paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 05:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

templates: Replace focusing scripts with autofocus attribute.

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

20
static/js/portico/signup.js
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;
}

2
templates/zerver/accounts_home.html
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 %}

6
templates/zerver/create_realm.html
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>

284
templates/zerver/login.html
View File

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

6
templates/zerver/reset.html
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 %}

5
templates/zerver/reset_confirm.html
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>