login_to_access: Modal which blocks access for spectator.

We will use this modal for any narrow / hash or other UI element that
requires an actual account to use, to provide something reasonable to
occur when a user clicks on those things.

static/js/login_to_access.js

@@ -0,0 +1,31 @@
+// Module for displaying the modal asking spectators to login when
+// attempting to do things that are not possible as a specatator (like
+// add an emoji reaction, star a message, etc.).  While in many cases,
+// we will prefer to hide menu options that don't make sense for
+// spectators, this modal is useful for everything that doesn't make
+// sense to remove from a design perspective.
+
+import $ from "jquery";
+
+import render_login_to_access_modal from "../templates/login_to_access.hbs";
+
+import {page_params} from "./page_params";
+
+export function show() {
+    // Hide all overlays, popover and go back to the previous hash if the
+    // hash has changed.
+    let login_link;
+    if (page_params.development_environment) {
+        login_link = "/devlogin";
+    } else {
+        login_link = "/login";
+    }
+
+    $("#login-to-access-modal-holder").html(
+        render_login_to_access_modal({
+            signup_link: "/register",
+            login_link,
+        }),
+    );
+    $("#login_to_access_modal").modal("show");
+}

static/styles/app_components.css

@@ -592,3 +592,35 @@ div.overlay {
         outline: none;
     }
 }
+
+.color_animated_button {
+    display: flex;
+    justify-content: center;
+    background-color: hsl(0, 0%, 90%);
+
+    span {
+        color: hsl(0, 0%, 0%);
+    }
+
+    &:hover {
+        cursor: pointer;
+        background-color: hsl(228, 96%, 71%);
+        color: hsl(0, 0%, 100%);
+
+        span {
+            color: hsl(0, 0%, 100%);
+            transition: all 0.2s ease;
+        }
+
+        transition: all 0.2s ease;
+    }
+
+    * {
+        padding: 6px 3px;
+    }
+
+    .fa {
+        position: relative;
+        top: 3px;
+    }
+}

static/styles/night_mode.css

@@ -1085,6 +1085,17 @@ body.night-mode {
     .animated-purple-button:focus {
         box-shadow: 0 1px 4px 0 hsl(0, 0%, 100%, 0.666);
     }
+
+    .color_animated_button {
+        background-color: hsl(209, 32%, 5%);
+        * {
+            color: hsl(0, 0%, 100%);
+        }
+
+        &:hover {
+            background-color: hsl(228, 96%, 71%);
+        }
+    }
 }
 
 @supports (-moz-appearance: none) {

static/styles/zulip.css

@@ -2988,3 +2988,26 @@ select.inline_select_topic_edit {
         top: 5%;
     }
 }
+
+#login_to_access_modal {
+    .go_back_button .fa {
+        position: fixed;
+        top: 11px;
+        left: 30px;
+    }
+
+    .login_to_access_label {
+        font-size: 1.1rem;
+        font-weight: bold;
+    }
+
+    .login_to_access_footer {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+
+        .color_animated_button {
+            width: 48%;
+        }
+    }
+}

static/templates/login_to_access.hbs

@@ -0,0 +1,31 @@
+<div id="login_to_access_modal" class="modal modal-bg fade new-style" tabindex="-1" role="dialog" aria-labelledby="login_to_access_modal" aria-hidden="true">
+    <div class="modal-header">
+
+        <div class="color_animated_button go_back_button">
+            <i class="fa fa-arrow-left"></i>
+            <span class="login_to_access_label"><b>{{t "Login required" }}</b></span>
+        </div>
+    </div>
+    <div class="modal-body">
+        <p>
+            {{#tr}}
+                Since you are not logged in, you can only view messages in
+                <z-link>web public streams</z-link>.
+                {{#*inline "z-link"}}<a target="_blank" href="https://zulipchat.com/help/stream-permissions">{{> @partial-block}}</a>{{/inline}}
+            {{/tr}}
+        </p>
+        <div class="topic_edit_spinner"></div>
+    </div>
+    <div class="modal-footer">
+        <div class="login_to_access_footer">
+            <a class="signup_button color_animated_button" href="{{signup_link}}">
+                <i class="fa fa-pencil-square-o"></i>
+                <span>{{t "Sign up" }}</span>
+            </a>
+            <a class="login_button color_animated_button" href="{{login_link}}">
+                <i class="fa fa-sign-in"></i>
+                <span>{{t "Log in" }}</span>
+            </a>
+        </div>
+    </div>
+</div>

templates/zerver/app/index.html

@@ -208,5 +208,6 @@
         <source class="notification-sound-source-ogg" type="audio/ogg" />
         <source class="notification-sound-source-mp3" type="audio/mpeg" />
     </audio>
+    <div id="login-to-access-modal-holder"></div>
 </div>
 {% endblock %}

tools/test-js-with-node

@@ -84,6 +84,7 @@ EXEMPT_FILES = {
     "static/js/loading.ts",
     "static/js/local_message.js",
     "static/js/localstorage.js",
+    "static/js/login_to_access.js",
     "static/js/message_edit.js",
     "static/js/message_edit_history.js",
     "static/js/message_events.js",