Files
han-app/VM1_app/codebase/backend/keycloak/themes/han-phone/login/otp.ftl
T

82 lines
3.8 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=6"/>
<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=""/>
<input type="hidden" name="han_device_id" class="han-device-id" value="${hanDeviceId!""}"/>
<input type="hidden" name="han_fingerprint" class="han-fingerprint" value="${hanFingerprint!""}"/>
<input type="hidden" name="han_platform" value="${hanPlatform!"web"}"/>
<input type="hidden" name="han_os_name" class="han-os-name" value="${hanOsName!""}"/>
<input type="hidden" name="han_os_version" class="han-os-version" value="${hanOsVersion!""}"/>
<input type="hidden" name="han_app_version" class="han-app-version" value="${hanAppVersion!""}"/>
<#if captchaEnabled!false>
<input id="han-captcha-token" name="smart-token" type="hidden" value=""/>
<div id="han-captcha-container" class="han-captcha"
data-sitekey="${captchaClientKey!""}"
data-form-id="kc-otp-form"
data-submit-id="han-resend-button"
data-resend-only="true"></div>
<div id="han-captcha-client-error" class="han-error" role="alert" hidden>
<span class="han-error-icon">!</span>
<span>${msg("captchaUnavailable")}</span>
</div>
</#if>
<div id="han-otp-inputs" class="han-otp-inputs <#if message?has_content>han-shake</#if>"
style="grid-template-columns: repeat(${otpCodeLength!6}, minmax(0, 1fr));">
<#list 0..((otpCodeLength!6) - 1) 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" data-expires-at="${(otpExpiresAt!0)?c}">
${msg("otpResendCountdown")} <strong>—</strong>
</p>
<button id="han-resend-button" type="submit" name="otp_action" value="resend" hidden>
<span aria-hidden="true">↻</span>
<span>${msg("otpResend")}</span>
</button>
</div>
<div id="han-otp-submit-error" class="han-error han-otp-error" role="alert" hidden>
<span class="han-error-icon">!</span>
<span>${msg("otpSubmitUnavailable")}</span>
</div>
<button id="han-otp-submit" class="han-primary-button" type="submit"
data-submitting-label="${msg("otpVerifying")}" disabled>
${msg("verifyOtp")}
</button>
</form>
</div>
<script src="${url.resourcesPath}/js/han-login.js?v=7"></script>
<#if captchaEnabled!false>
<script src="https://smartcaptcha.cloud.yandex.ru/captcha.js?render=onload&amp;onload=hanCaptchaOnload"
async defer></script>
</#if>
</#if>
</@layout.registrationLayout>