message_list_view: For spectators, show login button for failed images.

We render a login button for images that failed to load for
spectators. The image failed to load most likely due to being
rate limited by the server.

Fixes #19840

static/js/message_list_view.js

@@ -4,6 +4,7 @@ import _ from "lodash";
 
 import * as resolved_topic from "../shared/js/resolved_topic";
 import render_bookend from "../templates/bookend.hbs";
+import render_login_to_view_image_button from "../templates/login_to_view_image_button.hbs";
 import render_message_group from "../templates/message_group.hbs";
 import render_recipient_row from "../templates/recipient_row.hbs";
 import render_single_message from "../templates/single_message.hbs";
@@ -631,6 +632,16 @@ export class MessageListView {
             this._put_row($row);
             this._post_process_single_row($row);
         }
+
+        if (page_params.is_spectator) {
+            // For images that fail to load due to being rate limited or being denied access
+            // by server in general, we tell user to login to be able to view the image.
+            $message_rows.find(".message_inline_image img").on("error", (e) => {
+                $(e.target)
+                    .closest(".message_inline_image")
+                    .replaceWith(render_login_to_view_image_button());
+            });
+        }
     }
 
     _post_process_single_row($row) {

static/styles/zulip.css

@@ -3120,3 +3120,21 @@ select.inline_select_topic_edit {
     top: -1px;
     font-weight: 600;
 }
+
+.spectator_login_for_image_button {
+    max-width: 250px;
+    height: 50px;
+
+    :hover {
+        text-decoration: none;
+    }
+
+    .login_button {
+        padding: 5px;
+        margin-top: 5px;
+
+        .fa {
+            top: 1px;
+        }
+    }
+}

static/templates/login_to_view_image_button.hbs

@@ -0,0 +1,6 @@
+<div class="spectator_login_for_image_button">
+    <a class="login_button color_animated_button" href="/login/">
+        <i class='fa fa-sign-in'></i>
+        <span>Log in to view image</span>
+    </a>
+</div>