zitadel/internal/ui/login/static/templates/register.html

{{template "main-top" .}}

<h1>{{t "Registration.Title"}}</h1>
<p>{{t "Registration.Description"}}</p>

<form action="{{ registrationUrl }}" method="POST">

    {{ .CSRF }}

    <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />

    <div class="fields">
        <div class="field">
            <label class="label" for="email">{{t "Registration.Email"}}</label>
            <input class="input" type="text" id="email" name="email" autocomplete="email" value="{{ .Email }}" autofocus required>
        </div>
        <div class="field">
            <label class="label" for="firstname">{{t "Registration.Firstname"}}</label>
            <input class="input" type="text" id="firstname" name="firstname" autocomplete="given-name" value="{{ .Firstname }}" required>
        </div>
        <div class="field">
            <label class="label" for="lastname">{{t "Registration.Lastname"}}</label>
            <input class="input" type="text" id="lastname" name="lastname" autocomplete="family-name" value="{{ .Lastname }}" required>
        </div>
        <div class="field">
            <label class="label" for="languages">{{t "Registration.Language"}}</label>
            <select id="languages" name="language">
                <option value=""></option>
                <option value="de" id="de" {{if (selectedLanguage "de")}} selected {{end}}>{{t "Registration.German"}}</option>
                <option value="en" id="en" {{if (selectedLanguage "en")}} selected {{end}}>{{t "Registration.English"}}</option>
            </select>
        </div>
        <div class="field">
            <label class="label" for="genders">
                {{t "Registration.Gender"}}
                <span class="optional">{{t "optional"}}</span>
            </label>
            <select id="genders" name="gender">
                <option value=""></option>
                <option value="1" id="female" {{if (selectedGender 1)}} selected {{end}}>{{t "Registration.Female"}}</option>
                <option value="2" id="male" {{if (selectedGender 2)}} selected {{end}}>{{t "Registration.Male"}}</option>
                <option value="3" id="diverse" {{if (selectedGender 3)}} selected {{end}}>{{t "Registration.Diverse"}}</option>
            </select>
        </div>
        <div class="field">
            <label class="label" for="register-password">{{t "Registration.Password"}}</label>
            <input data-minlength="{{ .MinLength }}"
                   data-has-uppercase="{{ .HasUppercase }}"
                   data-has-lowercase="{{ .HasLowercase }}"
                   data-has-number="{{ .HasNumber }}"
                   data-has-symbol="{{ .HasSymbol }}"
                   class="input" type="password" id="register-password" name="register-password" autocomplete="new-password" required>
            {{ .PasswordPolicyDescription }}
        </div>
        <div class="field">
            <label class="label" for="register-password-confirmation">{{t "Registration.Password2"}}</label>
            <input class="input" type="password" id="register-password-confirmation" name="register-password-confirmation" autocomplete="new-password" required>
        </div>
    </div>

    {{template "error-message" .}}

    <div class="actions">
        <button class="primary right" id="register-button" type="submit" disabled>{{t "Actions.Next"}}</button>
        <a href="{{ loginNameChangeUrl .AuthReqID }}">
            <button class="secondary" type="button">{{t "Actions.Back"}}</button>
        </a>
    </div>
</form>


<script src="{{ resourceUrl "scripts/form_submit.js" }}"></script>
<script src="{{ resourceUrl "scripts/password_policy_check.js" }}"></script>
<script src="{{ resourceUrl "scripts/register_check.js" }}"></script>

{{template "main-bottom" .}}