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

{{template "main-top" .}}

<div class="lgn-head">
    {{if .Linking}}
    <h1>{{t "Login.TitleLinking"}}</h1>
    <p>{{t "Login.DescriptionLinking"}}{{if .OrgName}} {{t "Login.MustBeMemberOfOrg" "OrgName" .OrgName}}{{end}}</p>
    {{else}}
    <h1>{{t "Login.Title"}}</h1>
    <p>{{t "Login.Description"}}{{if .OrgName}} {{t "Login.MustBeMemberOfOrg" "OrgName" .OrgName}}{{end}}</p>
    {{end}}
</div>


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

    {{ .CSRF }}

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

    {{if hasUsernamePasswordLogin }}
    <div class="fields">
        <label class="lgn-label" for="loginName">{{t "Login.LoginNameLabel"}}</label>
        <div class="lgn-suffix-wrapper">
            <input class="lgn-input lgn-suffix-input" type="text" id="loginName" name="loginName" placeholder="{{if .OrgID }}{{t "Login.UsernamePlaceHolder"}}{{else}}{{t "Login.LoginnamePlaceHolder"}}{{end}}"
            value="{{ .UserName }}" {{if .ErrMessage}}shake {{end}} autocomplete="username" autofocus required>
            {{if .DisplayLoginNameSuffix}}
                <span id="default-login-suffix" lgnsuffix class="loginname-suffix">@{{.PrimaryDomain}}</span>
            {{end}}
        </div>
    </div>
    {{end}}

    {{template "error-message" .}}

    <div class="lgn-actions lgn-reverse-order">
        <a class="lgn-icon-button lgn-left-action" id="back-button" href="#">
            <i class="lgn-icon-arrow-left-solid"></i>
        </a>
        <button class="lgn-raised-button lgn-primary lgn-initial-focus" id="submit-button" type="submit">{{t "Login.NextButtonText"}}</button>
        <span class="fill-space"></span>
        {{if hasRegistration}}
        <button class="lgn-stroked-button" name="register" value="true" formnovalidate>{{t "Login.RegisterButtonText"}}</button>
        {{end}}
    </div>

    {{if hasExternalLogin }}
    <div class="lgn-idp-providers">
        <p class="lgn-idp-desc">{{t "Login.ExternalUserDescription"}}</p>

        {{ $reqid := .AuthReqID}}
        {{range $provider := .IDPProviders}}
        <a href="{{ externalIDPAuthURL $reqid $provider.IDPConfigID}}"
            class="lgn-idp {{idpProviderClass $provider.IDPType}}">
            <span class="logo"></span>
            {{if $provider.IDPType.IsSignInButton}}
            <span class="provider-name">{{t "SignIn" "Provider" $provider.DisplayName}}</span>
            {{else}}
            <span class="provider-name">{{$provider.DisplayName}}</span>
            {{end}}
        </a>
        {{end}}
    </div>
    {{end}}
</form>

<script src="{{ resourceUrl "scripts/form_submit.js" }}"></script>
<script src="{{ resourceUrl "scripts/default_form_validation.js" }}"></script>
<script src="{{ resourceUrl "scripts/input_suffix_offset.js" }}"></script>
<script src="{{ resourceUrl "scripts/go_back.js" }}"></script>

{{template "main-bottom" .}}