keycloak-theme/login/login-otp.ftl

<#import "template.ftl" as layout>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('totp'); section>
  <#if section="header">
    ${msg("doLogIn")}
  <#elseif section="form">
    <form
      id="kc-otp-login-form"
      class="ps-container"
      action="${url.loginAction}"
      method="post"
    >
      <#if otpLogin.userOtpCredentials?size gt 1>
        <div class="${properties.kcFormGroupClass!}">
          <#list otpLogin.userOtpCredentials as otpCredential>
            <input id="kc-otp-credential-${otpCredential?index}" class="${properties.kcLoginOTPListInputClass!}" type="radio" name="selectedCredentialId" value="${otpCredential.id}" <#if otpCredential.id == otpLogin.selectedCredentialId>checked="checked"</#if>>
            <label for="kc-otp-credential-${otpCredential?index}" class="${properties.kcLoginOTPListClass!}" tabindex="${otpCredential?index}">
              <span class="${properties.kcLoginOTPListItemHeaderClass!}">
                <span class="${properties.kcLoginOTPListItemIconBodyClass!}">
                  <i class="${properties.kcLoginOTPListItemIconClass!}" aria-hidden="true"></i>
                </span>
                <span class="${properties.kcLoginOTPListItemTitleClass!}">${otpCredential.userLabel}</span>
              </span>
            </label>
          </#list>
        </div>
      </#if>

      <div class="${properties.kcFormGroupClass!}">
        <label for="otp" class="${properties.kcLabelClass!}">${msg("loginOtpOneTime")}</label>

        <input
          id="otp"
          name="otp"
          autocomplete="off"
          type="text"
          class="${properties.kcInputClass!}"
          autofocus aria-invalid="<#if messagesPerField.existsError('totp')>true</#if>"
        />

        <#if messagesPerField.existsError('totp')>
          <span id="input-error-otp-code" class="${properties.kcInputErrorMessageClass!}"
              aria-live="polite">
            ${kcSanitize(messagesPerField.get('totp'))?no_esc}
          </span>
        </#if>
      </div>

      <div class="${properties.kcFormGroupClass!}">
        <button
          class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
          name="login"
          id="kc-login"
          type="submit"
        >${msg("doLogIn")}</button>
      </div>
    </form>
  </#if>
</@layout.registrationLayout>