zulip/templates/zerver/register.html

{% extends "zerver/portico_signup.html" %}
{% set entrypoint = "register" %}

{% block title %}
<title>{{ _("Registration") }} | Zulip</title>
{% endblock %}

{#
Gather other user information, after having confirmed
their email address.

Form is validated both client-side using jquery-validation (see signup.js) and server-side.
#}

{% block portico_content %}
<div class="register-account flex full-page">
    <div class="center-block new-style" id="create-account">

        <div class="pitch">
            {% if creating_new_realm %}
            <h1>{{ _('Create your organization') }}</h1>
            {% else %}
            <h1>{{ _('Create your account') }}</h1>
            {% endif %}

            {% trans %}
            <p>Enter your account details to complete registration.</p>
            {% endtrans %}
        </div>

        <form method="post" class="white-box" id="registration" action="{{ url('accounts_register') }}">
            {{ csrf_input }}

            <fieldset class="org-registration">
                {% if creating_new_realm %}
                <legend>{{ _('Your organization') }}
                    {% if not form.realm_subdomain.errors %}
                    <span class="edit-realm-details" role="button" tabindex="0"><i class="fa fa-pencil"></i></span>
                    {% endif %}
                </legend>
                {% with %}
                    {% set user_registration_form = "true" %}
                    {% include 'zerver/realm_creation_form.html' %}
                {% endwith %}
                {% if not form.realm_subdomain.errors %}
                <div class="not-editable-realm-details">
                    <div class="input-box">
                        <label for="id_realm_name" class="inline-block label-title">{{ _('Organization name') }}</label>
                        <div id="id_realm_name" class="not-editable-realm-field">{{ form.realm_name.value() }}</div>
                    </div>
                    <div class="input-box">
                        <label for="id_realm_type" class="inline-block label-title">{{ _('Organization type') }}</label>
                        <div id="id_realm_type" class="not-editable-realm-field">{{ selected_realm_type_name }}</div>
                    </div>
                    <div class="input-box">
                        <label for="id_realm_default_language" class="inline-block label-title">{{ _('Organization language') }}</label>
                        <div id="id_realm_default_language" class="not-editable-realm-field">{{ selected_realm_default_language_name }}</div>
                    </div>
                    <div class="input-box">
                        <label for="id_realm_subdomain" class="inline-block label-title">{{ _('Organization URL') }}</label>
                        <div id="id_realm_subdomain" class="not-editable-realm-field">{% if form.realm_subdomain.value() %}{{ form.realm_subdomain.value() }}.{% endif %}{{external_host}}</div>
                    </div>
                </div>
                {% endif %}
                {% endif %}
            </fieldset>

            <fieldset class="user-registration">
                {% if creating_new_realm %}
                <legend>{{ _('Your account') }}</legend>
                {% endif %}
                {% if realm_name and not creating_new_realm %}
                <img class="avatar inline-block" src="{{ realm_icon }}" alt="" />
                <div class="info-box inline-block">
                    <div class="organization-name organization-name-delayed-tooltip">{{ realm_name }}</div>
                    <div class="organization-path">{{ realm_url }}</div>
                </div>
                {% endif %}

                <div class="input-box">
                    <input type='hidden' name='key' value='{{ key }}' />
                    <input type='hidden' name='timezone' id='timezone'/>
                    <label for="id_email" class="inline-block label-title">{{ _('Email') }}</label>
                    <div id="id_email">{{ email }}</div>
                    {% if not creating_new_realm %}
                    {% include 'zerver/new_user_email_address_visibility.html' %}
                    {% endif %}
                </div>

                {% if accounts %}
                <div class="input-box">
                    <div class="inline-block relative">
                        <select class="select" name="source_realm_id" id="source_realm_select">
                            <option value=""
                              {% if "source_realm_id" in form.data and form.data["source_realm_id"] == "" %}selected {% endif %}>
                                {{ _('Don&rsquo;t import settings') }}
                            </option>
                            {% for account in accounts %}
                            <option value="{{ account.realm_id }}" data-full-name="{{account.full_name}}" data-avatar="{{account.avatar}}"
                              {% if ("source_realm_id" in form.data and account.realm_id == form.data["source_realm_id"]|int)
                              or ("source_realm_id" not in form.data and loop.index0 == 0) %} selected {% endif %}>
                                {{ account.realm_name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <label for="source_realm_id" class="inline-block">{{ _('Import settings from existing Zulip account') }}
                        <a href="{{ root_domain_url }}/help/import-your-settings"><i class="fa fa-question-circle"></i></a>
                    </label>
                </div>
                {% endif %}

                <div class="input-box" id="full_name_input_section">
                    {% 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 %}Your full name{% endtrans %}" required />
                        <label for="id_full_name" class="inline-block label-title">{{ _('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 %}
                    <p class="registration-form-hint">{{ _('This is how your account is displayed in Zulip.') }}</p>
                </div>

                <div class="input-box" id="profile_info_section" style="display:none;">
                    <img id="profile_avatar" />
                    <div id="profile_full_name"></div>
                </div>

                {% if require_ldap_password %}
                <div class="input-box password-div">
                    <input id="ldap-password" class="required" type="password" name="password" autocomplete="off" required />
                    <label for="ldap-password" class="inline-block">{{ _('Password') }}</label>
                    <i class="fa fa-eye-slash password_visibility_toggle" role="button" tabindex="0"></i>
                    <span class="help-inline">
                        {{ _('Enter your LDAP/Active Directory password.') }}
                    </span>
                </div>
                {% elif password_required %}
                <div class="input-box password-div">
                    <input id="id_password" class="required" type="password" name="password" autocomplete="new-password"
                      value="{% if form.password.value() %}{{ form.password.value() }}{% endif %}"
                      data-min-length="{{password_min_length}}"
                      data-max-length="{{ password_max_length }}"
                      data-min-guesses="{{password_min_guesses}}" required />
                    <label for="id_password" class="inline-block">{{ _('Password') }}</label>
                    <i class="fa fa-eye-slash password_visibility_toggle" role="button" tabindex="0"></i>
                    {% 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 %}
            </fieldset>
            {% if default_stream_groups %}
            <hr />
            <div class="default-stream-groups">
                <p class="margin">{{ _('What are you interested in?') }}</p>
                {% for default_stream_group in default_stream_groups %}
                <div class="input-group margin">
                    <label for="id_default_stream_group__{{ default_stream_group.id }}"
                      class="inline-block checkbox">
                        <input class="inline-block" type="checkbox"
                          name="default_stream_group"
                          id="id_default_stream_group__{{ default_stream_group.id }}" value="{{ default_stream_group.name }}"
                          {% if "default_stream_group" in form.data and default_stream_group.id in form.data.getlist('default_stream_group') %} checked {% endif %} />
                        <span class="rendered-checkbox"></span>
                        {% set comma = joiner(", ") %}
                        <span class="default_stream_group_name inline-block"
                          title="{{ default_stream_group.description }}">
                            {{ default_stream_group.name }}
                        </span>
                        (
                        {%- for stream in default_stream_group.streams.all() -%}
                            {{- comma() -}} <span class="stream_name inline-block">#{{ stream.name }}</span>
                        {%- endfor -%}
                        )
                    </label>
                </div>
                {% endfor %}
            </div>
            <hr />
            {% endif %}

            {% if creating_new_realm %}
            <div class="input-group input-box" id="how-realm-creator-found-zulip">
                <label for="how_realm_creator_found_zulip">
                    {{ _('How did you first hear about Zulip?') }}
                    {% if not corporate_enabled %}
                    <i class="fa fa-question-circle-o" aria-hidden="true" data-tippy-content="{% trans %}This value is used only if you sign up for a plan, in which case it will be sent to the Zulip team.{% endtrans %}"></i>
                    {% endif %}
                </label>
                <select name="how_realm_creator_found_zulip" class="required">
                    <option value="" selected disabled>{{ _('Select an option') }}</option>
                    {% for option_id, option_name in how_realm_creator_found_zulip_options %}
                    <option value="{{ option_id }}">{{ option_name }}</option>
                    {% endfor %}
                </select>
                <input id="how-realm-creator-found-zulip-other" class="how-found-zulip-extra-data-input" type="text" placeholder="{{ _('Please describe') }}" name="how_realm_creator_found_zulip_other_text" maxlength="100"/>
                <input id="how-realm-creator-found-zulip-where-ad" class="how-found-zulip-extra-data-input" type="text" placeholder="{{ _('Where did you see the ad?') }}" name="how_realm_creator_found_zulip_where_ad" maxlength="100"/>
                <input id="how-realm-creator-found-zulip-which-organization" class="how-found-zulip-extra-data-input" type="text" placeholder="{{ _('Which organization?') }}" name="how_realm_creator_found_zulip_which_organization" maxlength="100"/>
                <input id="how-realm-creator-found-zulip-review-site" class="how-found-zulip-extra-data-input" type="text" placeholder="{{ _('Which one?') }}" name="how_realm_creator_found_zulip_review_site" maxlength="100"/>
                <input id="how-realm-creator-found-zulip-which-ai-chatbot" class="how-found-zulip-extra-data-input" type="text" placeholder="{{ _('Which one?') }}" name="how_realm_creator_found_zulip_which_ai_chatbot" maxlength="100"/>
            </div>
            {% endif %}

            <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.)
                    #}
                    <label for="id_terms" class="inline-block checkbox">
                        <input id="id_terms" class="required" type="checkbox" name="terms"
                          {% if form.terms.value() %}checked="checked"{% endif %} />
                        <span class="rendered-checkbox"></span>
                        {% trans %}I agree to the <a href="{{ root_domain_url }}/policies/terms" target="_blank" rel="noopener noreferrer">Terms of Service</a>.{% endtrans %}
                    </label>
                    {% if form.terms.errors %}
                        {% for error in form.terms.errors %}
                        <p class="error help-inline alert alert-error">{{ error }}</p>
                        {% endfor %}
                    {% endif %}
                </div>
                {% endif %}
                {% if corporate_enabled %}
                <div class="input-group">
                    <label for="id_enable_marketing_emails" class="inline-block checkbox marketing_emails_checkbox">
                        <input id="id_enable_marketing_emails" type="checkbox" name="enable_marketing_emails"
                          checked="checked" />
                        <span class="rendered-checkbox"></span>
                        {% trans %}Subscribe me to Zulip's low-traffic newsletter (a few emails a year).{% endtrans %}
                    </label>
                </div>
                {% endif %}
                <div class="register-button-box">
                    <button class="register-button" type="submit">
                        <span>{{ _('Sign up') }}</span>
                        <object class="loader" type="image/svg+xml" data="{{ static('images/loading/loader-white.svg') }}"></object>
                    </button>
                    <input type="hidden" name="next" value="{{ next }}" />
                </div>
            </div>
        </form>

    </div>
</div>

{% if not creating_new_realm %}
{% include 'zerver/change_email_address_visibility_modal.html' %}
{% endif %}

{% endblock %}