mirror of
https://github.com/zulip/zulip.git
synced 2025-11-02 13:03:29 +00:00
222 lines
10 KiB
HTML
222 lines
10 KiB
HTML
{% extends "zerver/portico_signup.html" %}
|
|
{#
|
|
Gather other user information, after having confirmed
|
|
their email address.
|
|
|
|
Form is validated both client-side using jquery-validate (see signup.js) and server-side.
|
|
#}
|
|
|
|
{% block customhead %}
|
|
{{ super() }}
|
|
{{ render_bundle('zxcvbn') }}
|
|
{{ render_bundle('translations') }}
|
|
{% endblock %}
|
|
|
|
{% block portico_content %}
|
|
<div class="register-account flex full-page">
|
|
<div class="center-block new-style" style="padding: 20px 0px">
|
|
|
|
<div class="pitch">
|
|
{% trans %}
|
|
<h1>You're almost there.</h1>
|
|
<p>We just need you to do one last thing.</p>
|
|
{% endtrans %}
|
|
</div>
|
|
|
|
<form method="post" class="form-horizontal white-box" id="registration" action="{{ url('zerver.views.registration.accounts_register') }}">
|
|
{{ csrf_input }}
|
|
|
|
<section class="user-registration">
|
|
<div class="input-box no-validation">
|
|
<input type='hidden' name='key' value='{{ key }}' />
|
|
<input type='hidden' name='timezone' id='timezone'/>
|
|
<input id="id_email" type='text' disabled="true" placeholder="{{ email }}" required />
|
|
<label for="id_email" class="inline-block label-title">{{ _('Email') }}</label>
|
|
</div>
|
|
|
|
<div class="input-box">
|
|
{% if lock_name %}
|
|
<p class="fakecontrol">{{ full_name }}</p>
|
|
{% else %}
|
|
<input id="id_full_name" class="required" type="text" name="full_name"
|
|
value="{% if full_name %}{{ full_name }}{% elif form.full_name.value() %}{{ form.full_name.value() }}{% endif %}"
|
|
maxlength={{ MAX_NAME_LENGTH }} placeholder="{% trans %}Full name or 名前{% endtrans %}" required />
|
|
<label for="id_full_name" class="inline-block label-title">{{ _('Full name') }}</label>
|
|
{% if form.full_name.errors %}
|
|
{% for error in form.full_name.errors %}
|
|
<p class="help-inline text-error">{{ error }}</p>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if password_required %}
|
|
<div class="input-box">
|
|
<input id="id_password" class="required" type="password" name="password"
|
|
value="{% if form.password.value() %}{{ form.password.value() }}{% endif %}"
|
|
maxlength={{ MAX_PASSWORD_LENGTH }}
|
|
data-min-length="{{password_min_length}}"
|
|
data-min-quality="{{password_min_quality}}" required />
|
|
<label for="id_password" class="inline-block">{{ _('Password') }}</label>
|
|
{% if full_name %}
|
|
<span class="help-inline">
|
|
{{ _('This is used for mobile applications and other tools that require a password.') }}
|
|
</span>
|
|
{% endif %}
|
|
{% if form.password.errors %}
|
|
{% for error in form.password.errors %}
|
|
<p class="help-inline text-error">{{ error }}</p>
|
|
{% endfor %}
|
|
{% endif %}
|
|
<div class="progress" id="pw_strength" title="{{ _('Password strength') }}">
|
|
<div class="bar bar-danger" style="width: 10%;"></div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
|
|
<section class="org-registration">
|
|
{% if creating_new_team %}
|
|
<div class="input-box">
|
|
<div class="inline-block relative">
|
|
<input id="id_team_name" class="required" type="text"
|
|
placeholder="Acme or Aκμή"
|
|
value="{% if form.realm_name.value() %}{{ form.realm_name.value() }}{% endif %}"
|
|
name="realm_name" maxlength={{ MAX_REALM_NAME_LENGTH }} required />
|
|
</div>
|
|
<label for="id_team_name" class="inline-block label-title">{{ _('Organization name') }}</label>
|
|
{% if form.realm_name.errors %}
|
|
{% for error in form.realm_name.errors %}
|
|
<p class="help-inline text-error">{{ error }}</p>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
<div class="help-box margin-top">
|
|
{{ _('Shorter is better than longer.') }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-box">
|
|
<label for="id_team_subdomain" class="inline-block label-title">
|
|
{% if realms_have_subdomains %}
|
|
{{ _('Subdomain') }}
|
|
{% else %}
|
|
{{ _('Organization handle') }}
|
|
{% endif %}
|
|
</label>
|
|
<div class="inline-block">
|
|
<div class="inline-block relative">
|
|
<input id="id_team_subdomain"
|
|
class="{% if root_domain_landing_page %}required{% endif %} {% if realms_have_subdomains %}subdomain{% endif %}" type="text"
|
|
placeholder="acme"
|
|
value="{% if form.realm_subdomain.value() %}{{ form.realm_subdomain.value() }}{% endif %}"
|
|
name="realm_subdomain" maxlength={{ MAX_REALM_SUBDOMAIN_LENGTH }}
|
|
{% if root_domain_landing_page %}required{% endif %} />
|
|
{% if realms_have_subdomains %}
|
|
<p class="realm_subdomain_label">.{{ external_host }}</p>
|
|
{% endif %}
|
|
<p id="id_team_subdomain_error_client" class="error help-inline text-error"></p>
|
|
</div>
|
|
{% if form.realm_subdomain.errors %}
|
|
{% for error in form.realm_subdomain.errors %}
|
|
<p class="error help-inline text-error team_subdomain_error_server">{{ error }}</p>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
<div class="help-box margin-top">
|
|
{% if realms_have_subdomains %}
|
|
{{ _("The address you'll use to sign in to your organization.") }}
|
|
{% else %}
|
|
{{ _("a-z, 0-9, and - only.") }}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
|
|
<div class="input-group margin terms-of-service">
|
|
{% if terms_of_service %}
|
|
<div class="input-group">
|
|
{#
|
|
This is somewhat subtle.
|
|
Checkboxes have a name and value, and when the checkbox is ticked, the form posts
|
|
with name=value. If the checkbox is unticked, the field just isn't present at all.
|
|
|
|
This is distinct from 'checked', which determines whether the checkbox appears
|
|
at all. (So, it's not symmetric to the code above.)
|
|
#}
|
|
<input id="id_terms" class="required" type="checkbox" name="terms"
|
|
{% if form.terms.value() %}checked="checked"{% endif %} />
|
|
<label for="id_terms" class="inline-block">
|
|
{% trans %}I agree to the <a href="{{ root_domain_uri }}/terms" target="_blank">Terms of Service</a>.{% endtrans %}
|
|
</label>
|
|
{% if form.terms.errors %}
|
|
{% for error in form.terms.errors %}
|
|
<div class="help-inline text-error">{{ error }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
<div class="register-button-box">
|
|
<button class="register-button" type="submit">{{ _('Register') }}</button>
|
|
<input type="hidden" name="next" value="{{ next }}" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
if ($('#id_email').length === 1) {
|
|
if (!$('#id_email').attr('disabled')) {
|
|
common.autofocus('#id_email');
|
|
} else {
|
|
common.autofocus('#id_full_name');
|
|
}
|
|
} else {
|
|
common.autofocus('#id_full_name');
|
|
}
|
|
|
|
// reset error message displays
|
|
$('#id_team_subdomain_error_client').css('display', 'none');
|
|
if ($('.team_subdomain_error_server').text() === '') {
|
|
$('.team_subdomain_error_server').css('display', 'none');
|
|
}
|
|
|
|
$("#timezone").val(moment.tz.guess());
|
|
|
|
$('#id_team_subdomain').on('input', function (e) {
|
|
// preserve selection range, to be set after setting the text
|
|
var start = e.target.selectionStart,
|
|
end = e.target.selectionEnd;
|
|
|
|
// toggle displaying server-side / client-side errors; messages
|
|
// from only one of the two should be showing at any time.
|
|
$('.team_subdomain_error_server').text('').css('display', 'none');
|
|
|
|
var autocorrected = e.target.value
|
|
.toLowerCase()
|
|
.replace(/[_|\s]/g, '-');
|
|
|
|
e.target.value = autocorrected;
|
|
|
|
if (e.target.value.charAt(0) === '-' ||
|
|
e.target.value.charAt(e.target.value.length - 1) === '-') {
|
|
$('#id_team_subdomain_error_client')
|
|
.text(i18n.t("Cannot start or end with a '-'"))
|
|
.css('display', 'block');
|
|
} else if (/[^0-9a-z\-]/.test(e.target.value)) {
|
|
$('#id_team_subdomain_error_client')
|
|
.text(i18n.t("Can only use letters a-z, numbers 0-9, and '-'s."))
|
|
.css('display', 'block');
|
|
} else {
|
|
$('#id_team_subdomain_error_client').text('').css('display', 'none');
|
|
}
|
|
|
|
e.target.setSelectionRange(start, end);
|
|
});
|
|
</script>
|
|
|
|
{% endblock %}
|