keycloak-theme/account/totp.ftl

<#import "template.ftl" as layout>
<@layout.mainLayout active='totp' bodyClass='totp'; section>

  <div class="row">
    <div class="col-md-10">
      <h2>${msg("authenticatorTitle")}</h2>
    </div>
    <#if totp.otpCredentials?size == 0>
      <div class="col-md-2 subtitle">
        <span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
      </div>
    </#if>
  </div>

  <#if totp.enabled>
    <table class="table table-bordered table-striped">
      <thead>
      <#if totp.otpCredentials?size gt 1>
        <tr>
          <th colspan="4">${msg("configureAuthenticators")}</th>
        </tr>
      <#else>
        <tr>
          <th colspan="3">${msg("configureAuthenticators")}</th>
        </tr>
      </#if>
      </thead>
      <tbody>
      <#list totp.otpCredentials as credential>
        <tr>
          <td class="provider">${msg("mobile")}</td>
          <#if totp.otpCredentials?size gt 1>
            <td class="provider">${credential.id}</td>
          </#if>
          <td class="provider">${credential.userLabel!}</td>
          <td class="action">
            <form action="${url.totpUrl}" method="post" class="form-inline">
              <input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}">
              <input type="hidden" id="submitAction" name="submitAction" value="Delete">
              <input type="hidden" id="credentialId" name="credentialId" value="${credential.id}">
              <button id="remove-mobile" class="ps-button ps-button_small">
                  ${msg("doRemove")}
              </button>
            </form>
          </td>
        </tr>
      </#list>
      </tbody>
    </table>
    <#else>

  <hr/>

  <ol>
    <li>
      <p>${msg("totpStep1")}</p>

      <ul>
        <#list totp.supportedApplications as app>
          <li>${msg(app)}</li>
        </#list>
      </ul>
    </li>

    <#if mode?? && mode = "manual">
      <li>
        <p>${msg("totpManualStep2")}</p>
        <pre class="ps-mono"><code>${totp.totpSecretEncoded}</code></pre>
        <p><a href="${totp.qrUrl}" id="mode-barcode">${msg("totpScanBarcode")}</a></p>
      </li>
      <li>
        <p>${msg("totpManualStep3")}</p>
        <ul>
          <li id="kc-totp-type">${msg("totpType")}: ${msg("totp." + totp.policy.type)}</li>
          <li id="kc-totp-algorithm">${msg("totpAlgorithm")}: ${totp.policy.getAlgorithmKey()}</li>
          <li id="kc-totp-digits">${msg("totpDigits")}: ${totp.policy.digits}</li>
          <#if totp.policy.type = "totp">
            <li id="kc-totp-period">${msg("totpInterval")}: ${totp.policy.period}</li>
          <#elseif totp.policy.type = "hotp">
            <li id="kc-totp-counter">${msg("totpCounter")}: ${totp.policy.initialCounter}</li>
          </#if>
        </ul>
      </li>
    <#else>
      <li>
        <p>${msg("totpStep2")}</p>
        <p><img src="data:image/png;base64, ${totp.totpSecretQrCode}" alt="Figure: Barcode"></p>
        <p><a href="${totp.manualUrl}" id="mode-manual">${msg("totpUnableToScan")}</a></p>
      </li>
    </#if>
    <li>
      <p>${msg("totpStep3")}</p>
      <p>${msg("totpStep3DeviceName")}</p>
    </li>
  </ol>

  <hr/>

  <form action="${url.totpUrl}" class="ps-container" method="post">
    <input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}">
    <div class="ps-form-group">
      <label for="totp" class="ps-form-group--label">${msg("authenticatorCode")} <span class="required">*</span></label>

      <input type="text" class="ps-input" id="totp" name="totp" autocomplete="off" autofocus>
      <input type="hidden" id="totpSecret" name="totpSecret" value="${totp.totpSecret}"/>
    </div>

    <div class="ps-form-group" ${messagesPerField.printIfExists('userLabel',properties.kcFormGroupErrorClass!)}">
      <label for="userLabel" class="ps-form-group--label">${msg("totpDeviceName")} <#if totp.otpCredentials?size gte 1><span class="required">*</span></#if></label>

      <input type="text" class="ps-input" id="userLabel" name="userLabel" autocomplete="off">
    </div>

    <div class="ps-form-group">
      <div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit">
        <div class="">
          <button type="submit"
              class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}"
              id="saveTOTPBtn" name="submitAction" value="Save">${msg("doSave")}
          </button>
          <button type="submit"
              class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}"
              id="cancelTOTPBtn" name="submitAction" value="Cancel">${msg("doCancel")}
          </button>
        </div>
      </div>
    </div>
  </form>
  </#if>

</@layout.mainLayout>