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

{{template "main-top" .}}

<div class="lgn-head">
  <h1>{{t "InitMFAPrompt.Title"}}</h1>
  {{ template "user-profile" . }}

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

<form action="{{ mfaPromptUrl }}" method="POST">
  {{ .CSRF }}

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

  <div class="lgn-mfa-options">
    {{ range $provider := .MFAProviders}} {{ $providerName := (t (printf
    "InitMFAPrompt.Provider%v" $provider)) }}
    <div class="mfa">
      <label>
        <input
          id="{{ $provider }}"
          type="radio"
          name="provider"
          value="{{ $provider }}"
          required
        />
        {{ if eq $provider 0 }}
        <div class="mfa-img">
          <img width="100px" height="100px" alt="OTP" src="{{ resourceUrl
          "images/mfa/mfa-otp.svg" }}" />
        </div>
        {{ end }} {{ if eq $provider 1 }}
        <div class="mfa-img">
          <img width="100px" height="100px" alt="OTP" src="{{ resourceUrl
          "images/mfa/mfa-u2f.svg" }}" />
        </div>
        {{ end }} {{ if eq $provider 3 }}
        <div class="mfa-img">
          <img width="100px" height="100px" alt="OTP SMS" src="{{ resourceUrl
          "images/mfa/mfa-u2f.svg" }}" /> // TODO: image
        </div>
        {{ end }}{{ if eq $provider 4 }}
        <div class="mfa-img">
          <img width="100px" height="100px" alt="OTP Email" src="{{ resourceUrl
          "images/mfa/mfa-u2f.svg" }}" /> // TODO: image
        </div>
        {{ end }}
        <span>{{ $providerName }} </span>
      </label>
    </div>
    {{ end }}
  </div>

  <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>

    {{if not .MFARequired}}
    <button
      class="lgn-stroked-button"
      name="skip"
      value="true"
      type="submit"
      formnovalidate
    >
      {{t "InitMFAPrompt.SkipButtonText"}}
    </button>
    {{end}}
    <span class="fill-space"></span>
    <button class="lgn-raised-button lgn-primary" type="submit">
      {{t "InitMFAPrompt.NextButtonText"}}
    </button>
  </div>
</form>

<script src="{{ resourceUrl "scripts/mfa.js" }}"></script>

{{template "main-bottom" .}}