mirror of https://github.com/zulip/zulip.git
templates: Replace focusing scripts with autofocus attribute.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
This commit is contained in:
Anders Kaseorg
Tim Abbott
parent
6f6c761d80
commit
ed63042480
|
|
@ -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
|
// Code in this block will be executed when the user visits /register
|
||||||
// i.e. accounts_home.html is rendered.
|
// i.e. accounts_home.html is rendered.
|
||||||
if ($("[data-page-id='accounts-home']").length > 0) {
|
if ($("[data-page-id='accounts-home']").length > 0) {
|
||||||
common.autofocus('#email');
|
|
||||||
|
|
||||||
if (window.location.hash.substring(0, 1) === "#") {
|
if (window.location.hash.substring(0, 1) === "#") {
|
||||||
document.email_form.action += window.location.hash;
|
document.email_form.action += window.location.hash;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -55,7 +55,7 @@ page can be easily identified in it's respective JavaScript file -->
|
||||||
{{ csrf_input }}
|
{{ csrf_input }}
|
||||||
|
|
||||||
<div class="input-box no-validate">
|
<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>
|
<label for="email">Email</label>
|
||||||
<div class="alert alert-error email-frontend-error"></div>
|
<div class="alert alert-error email-frontend-error"></div>
|
||||||
{% if form.email.errors %}
|
{% if form.email.errors %}
|
||||||
|
|
|
||||||
|
|
@ -4,10 +4,6 @@
|
||||||
{# This is where we pitch the app and solicit signups. #}
|
{# This is where we pitch the app and solicit signups. #}
|
||||||
|
|
||||||
{% block portico_content %}
|
{% 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 register-page">
|
||||||
<div class="app-main register-page-container new-style flex full-page center">
|
<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="input-box horizontal">
|
||||||
<div class="inline-block relative">
|
<div class="inline-block relative">
|
||||||
<input type="text" class="email required" placeholder="{{ _("Enter your email address") }}"
|
<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>
|
<label for="email">{{ _('Email') }}</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,162 +8,152 @@
|
||||||
|
|
||||||
{% block portico_content %}
|
{% 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 %}
|
<div class="login-sso">
|
||||||
<script>
|
<a id="sso-login" href="/accounts/login/sso/?next={{ next }}" class="btn btn-large btn-primary">
|
||||||
{% if email %}
|
{{ _('Log in with %(identity_provider)s', identity_provider="SSO") }}
|
||||||
common.autofocus('#id_password');
|
</a>
|
||||||
{% else %}
|
</div>
|
||||||
common.autofocus('#id_username');
|
|
||||||
{% endif %}
|
|
||||||
</script>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- The following empty tag has unique data-page-id so that this
|
{% else %}
|
||||||
page can be easily identified in it's respective JavaScript file. -->
|
{# Non-SSO users. #}
|
||||||
<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 realm_name %}
|
||||||
{% if only_sso %}
|
<div class="left-side">
|
||||||
{# SSO users don't have a password. #}
|
<div class="org-header">
|
||||||
|
<img class="avatar" src="{{ realm_icon }}" alt="" />
|
||||||
<div class="login-sso">
|
<div class="info-box">
|
||||||
<a id="sso-login" href="/accounts/login/sso/?next={{ next }}" class="btn btn-large btn-primary">
|
<div class="organization-name">{{ realm_name }}</div>
|
||||||
{{ _('Log in with %(identity_provider)s', identity_provider="SSO") }}
|
<div class="organization-path">{{ realm_uri }}</div>
|
||||||
</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 }}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
<div class="description">
|
||||||
|
{{ realm_description|safe }}
|
||||||
<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>
|
</div>
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% 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>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,6 @@
|
||||||
{% extends "zerver/portico_signup.html" %}
|
{% extends "zerver/portico_signup.html" %}
|
||||||
{% block portico_content %}
|
{% 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="flex new-style app portico-page">
|
||||||
<div class="inline-block">
|
<div class="inline-block">
|
||||||
<div class="lead">
|
<div class="lead">
|
||||||
|
|
@ -22,7 +18,7 @@ page can be easily identified in it's respective JavaScript file -->
|
||||||
<div class="inline-block relative">
|
<div class="inline-block relative">
|
||||||
<input id="id_email" class="required" type="text" name="email"
|
<input id="id_email" class="required" type="text" name="email"
|
||||||
value="{% if form.email.value() %}{{ form.email.value() }}{% endif %}"
|
value="{% if form.email.value() %}{{ form.email.value() }}{% endif %}"
|
||||||
maxlength="100" required />
|
maxlength="100" autofocus required />
|
||||||
<label for="id_email" class="">{{ _('Email') }}</label>
|
<label for="id_email" class="">{{ _('Email') }}</label>
|
||||||
{% if form.email.errors %}
|
{% if form.email.errors %}
|
||||||
{% for error in form.email.errors %}
|
{% for error in form.email.errors %}
|
||||||
|
|
|
||||||
|
|
@ -6,9 +6,6 @@
|
||||||
|
|
||||||
{% block portico_content %}
|
{% 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">
|
<div class="password-container flex full-page new-style">
|
||||||
|
|
||||||
<!-- wrapper for flex content -->
|
<!-- 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 %}"
|
value="{% if form.new_password1.value() %}{{ form.new_password1.value() }}{% endif %}"
|
||||||
maxlength="100"
|
maxlength="100"
|
||||||
data-min-length="{{password_min_length}}"
|
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 %}
|
{% if form.new_password1.errors %}
|
||||||
{% for error in form.new_password1.errors %}
|
{% for error in form.new_password1.errors %}
|
||||||
<div class="alert alert-error">{{ error }}</div>
|
<div class="alert alert-error">{{ error }}</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue