templates: Replace focusing scripts with autofocus attribute.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>

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;
         }

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 %}

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>
 

templates/zerver/login.html

@@ -8,22 +8,10 @@
 
 {% 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. -->
-    {% if password_auth_enabled %}
+<div data-page-id="login-page"></div>
-    <script>
+<div class="app login-page split-view new-style flex full-page">
-        {% if email %}
-        common.autofocus('#id_password');
-        {% else %}
-        common.autofocus('#id_username');
-        {% endif %}
-    </script>
-    {% endif %}
-
-    <!-- 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>
@@ -81,7 +69,7 @@
                                 <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 %}
+                                      {% 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 %}
@@ -95,7 +83,9 @@
                                 </div>
 
                                 <div class="input-box no-validation">
-                                        <input id="id_password" name="password" class="required" type="password" required />
+                                    <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 %}
@@ -164,6 +154,6 @@
             {% endif %}
         </div>
     </div>
-    </div>
+</div>
 
 {% endblock %}

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 %}

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>