mi
51 lines
2.1 KiB
Plaintext
51 lines
2.1 KiB
Plaintext
<#import "template.ftl" as layout>
|
|
<@layout.registrationLayout displayMessage=false; section>
|
|
<#if section = "header">${msg("otpTitle")}
|
|
<#elseif section = "form">
|
|
<link rel="stylesheet" href="${url.resourcesPath}/css/han-login.css?v=4"/>
|
|
<div class="han-auth-screen han-otp-screen">
|
|
<button class="han-back-button" type="button" onclick="window.history.back()">
|
|
<span aria-hidden="true">←</span>
|
|
<span>${msg("authBack")}</span>
|
|
</button>
|
|
|
|
<div class="han-auth-heading han-otp-heading">
|
|
<h1>${msg("otpHeading")}</h1>
|
|
<p>${msg("otpSent", maskedPhone!"***")}</p>
|
|
</div>
|
|
|
|
<form id="kc-otp-form" action="${url.loginAction}" method="post">
|
|
<input id="otp" name="otp" type="hidden" value=""/>
|
|
<div id="han-otp-inputs" class="han-otp-inputs <#if message?has_content>han-shake</#if>">
|
|
<#list 0..5 as index>
|
|
<input class="han-otp-digit" type="text" inputmode="numeric" maxlength="1"
|
|
aria-label="${msg("otpDigit", index + 1)}"
|
|
<#if index == 0>autocomplete="one-time-code" autofocus</#if>
|
|
aria-invalid="<#if message?has_content>true<#else>false</#if>"/>
|
|
</#list>
|
|
</div>
|
|
|
|
<#if message?has_content>
|
|
<div class="han-error han-otp-error" role="alert">
|
|
<span class="han-error-icon">!</span>
|
|
<span>${kcSanitize(message.summary)?no_esc}</span>
|
|
</div>
|
|
</#if>
|
|
|
|
<div class="han-resend">
|
|
<p id="han-resend-countdown">${msg("otpResendCountdown")} <strong>0:59</strong></p>
|
|
<button id="han-resend-button" type="button" hidden onclick="window.history.back()">
|
|
<span aria-hidden="true">↻</span>
|
|
<span>${msg("otpResend")}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<button id="han-otp-submit" class="han-primary-button" type="submit" disabled>
|
|
${msg("verifyOtp")}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<script src="${url.resourcesPath}/js/han-login.js?v=3"></script>
|
|
</#if>
|
|
</@layout.registrationLayout>
|