From ed63042480113227cc3d1f4b51da253210c063e0 Mon Sep 17 00:00:00 2001
From: Anders Kaseorg <anders@zulipchat.com>
Date: Fri, 13 Sep 2019 11:56:51 -0700
Subject: [PATCH] templates: Replace focusing scripts with autofocus attribute.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
---
 static/js/portico/signup.js         |  20 --
 templates/zerver/accounts_home.html |   2 +-
 templates/zerver/create_realm.html  |   6 +-
 templates/zerver/login.html         | 284 ++++++++++++++--------------
 templates/zerver/reset.html         |   6 +-
 templates/zerver/reset_confirm.html |   5 +-
 6 files changed, 141 insertions(+), 182 deletions(-)

diff --git a/static/js/portico/signup.js b/static/js/portico/signup.js
index 860b6a4865..63f3015db4 100644
--- a/static/js/portico/signup.js
+++ b/static/js/portico/signup.js
@@ -81,29 +81,9 @@ $(function () {
         });
     }
 
-    // Code in this block will be executed when the user visits
-    // /accounts/password/reset i.e. reset.html is rendered.
-    if ($("[data-page-id='reset-password-confirm']").length > 0) {
-        common.autofocus('#id_new_password1');
-    }
-
-    // Code in this block will be executed when the user visits
-    // /accounts/password/reset i.e. reset.html is rendered.
-    if ($("[data-page-id='reset-password']").length > 0) {
-        common.autofocus('#id_email');
-    }
-
-    // Code in this block will be executed when the user visits /new
-    // i.e. create_realm.html is rendered.
-    if ($("[data-page-id='create-realm']").length > 0) {
-        common.autofocus('#email');
-    }
-
     // Code in this block will be executed when the user visits /register
     // i.e. accounts_home.html is rendered.
     if ($("[data-page-id='accounts-home']").length > 0) {
-        common.autofocus('#email');
-
         if (window.location.hash.substring(0, 1) === "#") {
             document.email_form.action += window.location.hash;
         }
diff --git a/templates/zerver/accounts_home.html b/templates/zerver/accounts_home.html
index c5ac3b4981..444392bd77 100644
--- a/templates/zerver/accounts_home.html
+++ b/templates/zerver/accounts_home.html
@@ -55,7 +55,7 @@ page can be easily identified in it's respective JavaScript file -->
                                 {{ csrf_input }}
 
                                 <div class="input-box no-validate">
-                                    <input type="email" id="email" class="email" name="email" value="" required />
+                                    <input type="email" id="email" class="email" name="email" value="" autofocus required />
                                     <label for="email">Email</label>
                                     <div class="alert alert-error email-frontend-error"></div>
                                     {% if form.email.errors %}
diff --git a/templates/zerver/create_realm.html b/templates/zerver/create_realm.html
index ba3ebf012a..d425cbd1e5 100644
--- a/templates/zerver/create_realm.html
+++ b/templates/zerver/create_realm.html
@@ -4,10 +4,6 @@
 {# This is where we pitch the app and solicit signups. #}
 
 {% block portico_content %}
-
-<!-- The following empty tag has unique data-page-id so that this
-page can be easily identified in it's respective JavaScript file -->
-<div data-page-id="create-realm"></div>
 <div class="app register-page">
     <div class="app-main register-page-container new-style flex full-page center">
 
@@ -22,7 +18,7 @@ page can be easily identified in it's respective JavaScript file -->
                     <div class="input-box horizontal">
                         <div class="inline-block relative">
                             <input type="text" class="email required" placeholder="{{ _("Enter your email address") }}"
-                              id="email" name="email" required />
+                              id="email" name="email" autofocus required />
                             <label for="email">{{ _('Email') }}</label>
                         </div>
 
diff --git a/templates/zerver/login.html b/templates/zerver/login.html
index 830b0e472a..3b511ba043 100644
--- a/templates/zerver/login.html
+++ b/templates/zerver/login.html
@@ -8,162 +8,152 @@
 
 {% block portico_content %}
 
+<!-- The following empty tag has unique data-page-id so that this
+page can be easily identified in it's respective JavaScript file. -->
+<div data-page-id="login-page"></div>
+<div class="app login-page split-view new-style flex full-page">
+    <div class="inline-block">
+        <div class="lead">
+            <h1 class="get-started">{{ _("Log in to Zulip") }}</h1>
+        </div>
 
+        <div class="app-main login-page-container white-box inline-block">
+            {% if only_sso %}
+                {# SSO users don't have a password. #}
 
-    {% if password_auth_enabled %}
-    <script>
-        {% if email %}
-        common.autofocus('#id_password');
-        {% else %}
-        common.autofocus('#id_username');
-        {% endif %}
-    </script>
-    {% endif %}
+                <div class="login-sso">
+                    <a id="sso-login" href="/accounts/login/sso/?next={{ next }}" class="btn btn-large btn-primary">
+                        {{ _('Log in with %(identity_provider)s', identity_provider="SSO") }}
+                    </a>
+                </div>
 
-    <!-- The following empty tag has unique data-page-id so that this
-    page can be easily identified in it's respective JavaScript file. -->
-    <div data-page-id="login-page"></div>
-    <div class="app login-page split-view new-style flex full-page">
-        <div class="inline-block">
-            <div class="lead">
-                <h1 class="get-started">{{ _("Log in to Zulip") }}</h1>
-            </div>
+            {% else %}
+                {# Non-SSO users. #}
 
-            <div class="app-main login-page-container white-box inline-block">
-                {% if only_sso %}
-                    {# SSO users don't have a password. #}
-
-                    <div class="login-sso">
-                        <a id="sso-login" href="/accounts/login/sso/?next={{ next }}" class="btn btn-large btn-primary">
-                            {{ _('Log in with %(identity_provider)s', identity_provider="SSO") }}
-                        </a>
-                    </div>
-
-                {% else %}
-                    {# Non-SSO users. #}
-
-                    {% if realm_name %}
-                    <div class="left-side">
-                        <div class="org-header">
-                            <img class="avatar" src="{{ realm_icon }}" alt="" />
-                            <div class="info-box">
-                                <div class="organization-name">{{ realm_name }}</div>
-                                <div class="organization-path">{{ realm_uri }}</div>
-                            </div>
-                        </div>
-                        <div class="description">
-                            {{ realm_description|safe }}
+                {% if realm_name %}
+                <div class="left-side">
+                    <div class="org-header">
+                        <img class="avatar" src="{{ realm_icon }}" alt="" />
+                        <div class="info-box">
+                            <div class="organization-name">{{ realm_name }}</div>
+                            <div class="organization-path">{{ realm_uri }}</div>
                         </div>
                     </div>
-                    {% endif %}
-
-                    <div class="right-side">
-                        {% if no_auth_enabled %}
-                            <div class="alert">
-                                <p>No authentication backends are enabled on this
-                                server yet, so it is impossible to login!</p>
-
-                                <p>See the <a href="https://zulip.readthedocs.io/en/latest/production/install.html#step-3-configure-zulip">Zulip
-                                authentication documentation</a> to learn how to configure authentication backends.</p>
-                            </div>
-                        {% else %}
-                            {% if password_auth_enabled %}
-                                <form name="login_form" id="login_form" method="post" class="login-form"
-                                  action="{{ url('django.contrib.auth.views.login') }}?next={{ next }}">
-
-                                    {% if two_factor_authentication_enabled %}
-                                    {{ wizard.management_form }}
-                                    {% endif %}
-                                    {{ csrf_input }}
-
-                                    <!-- .no-validation is for removing the red star in CSS -->
-                                    {% if not two_factor_authentication_enabled or wizard.steps.current == 'auth' %}
-                                    <div class="input-box no-validation">
-                                        <input id="id_username" type="{% if not require_email_format_usernames %}text{% else %}email{% endif %}"
-                                          name="username" class="{% if require_email_format_usernames %}email {% endif %}required"
-                                          {% if email %} value="{{ email }}" {% else %} value="" {% endif %}
-                                          maxlength="72" required />
-                                        <label for="id_username">
-                                            {% if not require_email_format_usernames and email_auth_enabled %}
-                                            {{ _('Email or username') }}
-                                            {% elif not require_email_format_usernames %}
-                                            {{ _('Username') }}
-                                            {% else %}
-                                            {{ _('Email') }}
-                                            {% endif %}
-                                        </label>
-                                    </div>
-
-                                    <div class="input-box no-validation">
-                                        <input id="id_password" name="password" class="required" type="password" required />
-                                        <label for="id_password" class="control-label">{{ _('Password') }}</label>
-                                    </div>
-                                    {% else %}
-                                    {% include "two_factor/_wizard_forms.html" %}
-                                    {% endif %}
-
-                                    {% if form.errors %}
-                                    <div class="alert alert-error">
-                                        {% for error in form.errors.values() %}
-                                        <div>{{ error | striptags }}</div>
-                                        {% endfor %}
-                                    </div>
-                                    {% endif %}
-
-                                    {% if already_registered %}
-                                    <div class="alert">
-                                        {{ _("You've already registered with this email address. Please log in below.") }}
-                                    </div>
-                                    {% endif %}
-
-                                    {% if is_deactivated %}
-                                    <div class="alert">
-                                        {{ deactivated_account_error }}
-                                    </div>
-                                    {% endif %}
-
-                                    {% if subdomain %}
-                                    <div class="alert">
-                                        {{ wrong_subdomain_error }}
-                                    </div>
-                                    {% endif %}
-
-                                    <button type="submit" name="button" class="full-width">
-                                        <img class="loader" src="/static/images/loader.svg" alt="" />
-                                        <span class="text">{{ _("Log in") }}</span>
-                                    </button>
-                                </form>
-
-                                {% if any_oauth_backend_enabled %}
-                                <div class="or"><span>{{ _('OR') }}</span></div>
-                                {% endif %}
-
-                            {% endif %} <!-- if password_auth_enabled -->
-
-                            {% for backend in social_backends %}
-                            <div class="login-social">
-                                <form class="social_login_form form-inline {{ backend.name }}-wrapper" action="{{ backend.login_url }}" method="get">
-                                    <input type="hidden" name="next" value="{{ next }}">
-                                    <button class="login-social-button">
-                                        {{ _('Log in with %(identity_provider)s', identity_provider=backend.display_name) }}
-                                    </button>
-                                </form>
-                            </div>
-                            {% endfor %}
-
-                            <div class="actions">
-                                {% if email_auth_enabled %}
-                                <a class="forgot-password" href="/accounts/password/reset/">{{ _('Forgot your password?') }}</a>
-                                {% endif %}
-                                {% if not register_link_disabled %}
-                                <a class="register-link float-right" href="/register/">{{ _('Sign up') }}</a>
-                                {% endif %}
-                            </div>
-                        {% endif %}
+                    <div class="description">
+                        {{ realm_description|safe }}
                     </div>
+                </div>
                 {% endif %}
-            </div>
+
+                <div class="right-side">
+                    {% if no_auth_enabled %}
+                        <div class="alert">
+                            <p>No authentication backends are enabled on this
+                            server yet, so it is impossible to login!</p>
+
+                            <p>See the <a href="https://zulip.readthedocs.io/en/latest/production/install.html#step-3-configure-zulip">Zulip
+                            authentication documentation</a> to learn how to configure authentication backends.</p>
+                        </div>
+                    {% else %}
+                        {% if password_auth_enabled %}
+                            <form name="login_form" id="login_form" method="post" class="login-form"
+                              action="{{ url('django.contrib.auth.views.login') }}?next={{ next }}">
+
+                                {% if two_factor_authentication_enabled %}
+                                {{ wizard.management_form }}
+                                {% endif %}
+                                {{ csrf_input }}
+
+                                <!-- .no-validation is for removing the red star in CSS -->
+                                {% if not two_factor_authentication_enabled or wizard.steps.current == 'auth' %}
+                                <div class="input-box no-validation">
+                                    <input id="id_username" type="{% if not require_email_format_usernames %}text{% else %}email{% endif %}"
+                                      name="username" class="{% if require_email_format_usernames %}email {% endif %}required"
+                                      {% if email %} value="{{ email }}" {% else %} value="" autofocus {% endif %}
+                                      maxlength="72" required />
+                                    <label for="id_username">
+                                        {% if not require_email_format_usernames and email_auth_enabled %}
+                                        {{ _('Email or username') }}
+                                        {% elif not require_email_format_usernames %}
+                                        {{ _('Username') }}
+                                        {% else %}
+                                        {{ _('Email') }}
+                                        {% endif %}
+                                    </label>
+                                </div>
+
+                                <div class="input-box no-validation">
+                                    <input id="id_password" name="password" class="required" type="password"
+                                      {% if email %} autofocus {% endif %}
+                                      required />
+                                    <label for="id_password" class="control-label">{{ _('Password') }}</label>
+                                </div>
+                                {% else %}
+                                {% include "two_factor/_wizard_forms.html" %}
+                                {% endif %}
+
+                                {% if form.errors %}
+                                <div class="alert alert-error">
+                                    {% for error in form.errors.values() %}
+                                    <div>{{ error | striptags }}</div>
+                                    {% endfor %}
+                                </div>
+                                {% endif %}
+
+                                {% if already_registered %}
+                                <div class="alert">
+                                    {{ _("You've already registered with this email address. Please log in below.") }}
+                                </div>
+                                {% endif %}
+
+                                {% if is_deactivated %}
+                                <div class="alert">
+                                    {{ deactivated_account_error }}
+                                </div>
+                                {% endif %}
+
+                                {% if subdomain %}
+                                <div class="alert">
+                                    {{ wrong_subdomain_error }}
+                                </div>
+                                {% endif %}
+
+                                <button type="submit" name="button" class="full-width">
+                                    <img class="loader" src="/static/images/loader.svg" alt="" />
+                                    <span class="text">{{ _("Log in") }}</span>
+                                </button>
+                            </form>
+
+                            {% if any_oauth_backend_enabled %}
+                            <div class="or"><span>{{ _('OR') }}</span></div>
+                            {% endif %}
+
+                        {% endif %} <!-- if password_auth_enabled -->
+
+                        {% for backend in social_backends %}
+                        <div class="login-social">
+                            <form class="social_login_form form-inline {{ backend.name }}-wrapper" action="{{ backend.login_url }}" method="get">
+                                <input type="hidden" name="next" value="{{ next }}">
+                                <button class="login-social-button">
+                                    {{ _('Log in with %(identity_provider)s', identity_provider=backend.display_name) }}
+                                </button>
+                            </form>
+                        </div>
+                        {% endfor %}
+
+                        <div class="actions">
+                            {% if email_auth_enabled %}
+                            <a class="forgot-password" href="/accounts/password/reset/">{{ _('Forgot your password?') }}</a>
+                            {% endif %}
+                            {% if not register_link_disabled %}
+                            <a class="register-link float-right" href="/register/">{{ _('Sign up') }}</a>
+                            {% endif %}
+                        </div>
+                    {% endif %}
+                </div>
+            {% endif %}
         </div>
     </div>
+</div>
 
 {% endblock %}
diff --git a/templates/zerver/reset.html b/templates/zerver/reset.html
index 008c154171..57f090a707 100644
--- a/templates/zerver/reset.html
+++ b/templates/zerver/reset.html
@@ -1,10 +1,6 @@
 {% extends "zerver/portico_signup.html" %}
 {% block portico_content %}
 
-
-<!-- The following empty tag has unique data-page-id so that this
-page can be easily identified in it's respective JavaScript file -->
-<div data-page-id="reset-password"></div>
 <div class="flex new-style app portico-page">
     <div class="inline-block">
         <div class="lead">
@@ -22,7 +18,7 @@ page can be easily identified in it's respective JavaScript file -->
                         <div class="inline-block relative">
                             <input id="id_email" class="required" type="text" name="email"
                               value="{% if form.email.value() %}{{ form.email.value() }}{% endif %}"
-                              maxlength="100" required />
+                              maxlength="100" autofocus required />
                             <label for="id_email" class="">{{ _('Email') }}</label>
                             {% if form.email.errors %}
                                 {% for error in form.email.errors %}
diff --git a/templates/zerver/reset_confirm.html b/templates/zerver/reset_confirm.html
index 38a7867fb7..bf3bde65b7 100644
--- a/templates/zerver/reset_confirm.html
+++ b/templates/zerver/reset_confirm.html
@@ -6,9 +6,6 @@
 
 {% block portico_content %}
 
-<!-- The following empty tag has unique data-page-id so that this
-page can be easily identified in it's respective JavaScript file -->
-<div data-page-id="reset-password-confirm"></div>
 <div class="password-container flex full-page new-style">
 
     <!-- wrapper for flex content -->
@@ -35,7 +32,7 @@ page can be easily identified in it's respective JavaScript file -->
                       value="{% if form.new_password1.value() %}{{ form.new_password1.value() }}{% endif %}"
                       maxlength="100"
                       data-min-length="{{password_min_length}}"
-                      data-min-guesses="{{password_min_guesses}}" required />
+                      data-min-guesses="{{password_min_guesses}}" autofocus required />
                     {% if form.new_password1.errors %}
                         {% for error in form.new_password1.errors %}
                         <div class="alert alert-error">{{ error }}</div>