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

{{template "main-top" .}}

<div class="lgn-head">
    <h1>{{t "VerifyMFAOTP.Title"}}</h1>

    {{ template "user-profile" . }}

    <p>{{t "VerifyMFAOTP.Description"}}</p>
</div>

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

    {{ .CSRF }}

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

    <div class="fields">
        <label class="lgn-label" for="code">{{t "VerifyMFAOTP.CodeLabel"}}</label>
        <input class="lgn-input" type="text" id="code" name="code" autocomplete="off" autofocus required>
    </div>

    {{ template "error-message" .}}

    <div class="lgn-actions">
        <!-- position element in header -->
        <a class="lgn-icon-button lgn-left-action" href="{{ loginUrl }}">
            <i class="lgn-icon-arrow-left-solid"></i>
        </a>
        <span class="fill-space"></span>
        <button class="lgn-raised-button lgn-primary" id="submit-button" type="submit">{{t "VerifyMFAOTP.NextButtonText"}}</button>
    </div>

    {{ if .MFAProviders }}
        <div class="lgn-mfa-other">
            <p>{{t "MFAProvider.ChooseOther"}}</p>
            {{ range $provider := .MFAProviders}}
            {{ $providerName := (t (printf "MFAProvider.Provider%v" $provider)) }}
            <button class="lgn-stroked-button lgn-primary" type="submit" name="provider" value="{{$provider}}"
                formnovalidate>{{$providerName}}</button>
            {{ end }}
        </div>
    {{ end }}
</form>

<script src="{{ resourceUrl "scripts/form_submit.js" }}"></script>
<script src="{{ resourceUrl "scripts/default_form_validation.js" }}"></script>
{{template "main-bottom" .}}