Накатил человеческий дизайн

codebase/backend/keycloak/themes/han-phone/login/otp.ftl

@@ -1,16 +1,50 @@
 <#import "template.ftl" as layout>
-<@layout.registrationLayout displayMessage=true; section>
+<@layout.registrationLayout displayMessage=false; section>
   <#if section = "header">${msg("otpTitle")}
   <#elseif section = "form">
-    <form id="kc-otp-form" action="${url.loginAction}" method="post">
-      <p class="han-help">${msg("otpSent", maskedPhone!"***")}</p>
-      <p class="han-test-mode">${msg("mockMode")}</p>
-      <div class="form-group">
-        <label for="otp">${msg("otpLabel")}</label>
-        <input id="otp" name="otp" type="password" inputmode="numeric" autocomplete="one-time-code"
-               minlength="4" maxlength="12" required autofocus/>
+    <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>
-      <button class="pf-c-button pf-m-primary pf-m-block" type="submit">${msg("verifyOtp")}</button>
-    </form>
+
+      <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>