templates: Replace focusing scripts with autofocus attribute.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
This commit is contained in:
Anders Kaseorg 2019-09-13 11:56:51 -07:00 committed by Tim Abbott
parent 6f6c761d80
commit ed63042480
6 changed files with 141 additions and 182 deletions

View File

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

View File

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

View File

@ -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>

View File

@ -8,18 +8,6 @@
{% block portico_content %}
{% if password_auth_enabled %}
<script>
{% 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>
@ -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 %}

View File

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

View File

@ -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>