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

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

@@ -1,16 +1,51 @@
 <#import "template.ftl" as layout>
-<@layout.registrationLayout displayMessage=true; section>
+<@layout.registrationLayout displayMessage=false; section>
   <#if section = "header">${msg("phoneTitle")}
   <#elseif section = "form">
-    <form id="kc-phone-form" action="${url.loginAction}" method="post">
-      <div class="form-group">
-        <label for="phone">${msg("phoneLabel")}</label>
-        <input id="phone" name="phone" type="tel" inputmode="tel" autocomplete="tel"
-               placeholder="+7 900 123-45-67" required autofocus
-               aria-invalid="<#if messagesPerField.existsError('phone')>true<#else>false</#if>"/>
+    <link rel="stylesheet" href="${url.resourcesPath}/css/han-login.css?v=4"/>
+    <div class="han-auth-screen han-phone-screen">
+      <div class="han-auth-main">
+        <div class="han-wordmark" aria-label="HAN">
+          <span class="han-wordmark-text">HAN</span>
+          <span class="han-wordmark-dot"></span>
+        </div>
+        <p class="han-brand-subtitle">${msg("authBrandSubtitle")}</p>
+
+        <div class="han-auth-heading">
+          <h1>${msg("phoneWelcome")}</h1>
+          <p>${msg("phoneIntro")}</p>
+        </div>
+
+        <form id="kc-phone-form" action="${url.loginAction}" method="post">
+          <div class="han-field">
+            <label for="phone">${msg("phoneLabel")}</label>
+            <input id="phone" name="phone" type="tel" inputmode="numeric" autocomplete="tel"
+                   placeholder="+7 (___) ___ __ __" required autofocus
+                   aria-invalid="<#if message?has_content>true<#else>false</#if>"/>
+            <p class="han-field-hint">${msg("phoneCountry")}</p>
+          </div>
+
+          <#if message?has_content>
+            <div class="han-error" role="alert">
+              <span class="han-error-icon">!</span>
+              <span>${kcSanitize(message.summary)?no_esc}</span>
+            </div>
+          </#if>
+
+          <button id="han-phone-submit" class="han-primary-button" type="submit" disabled>
+            <span>${msg("sendOtp")}</span>
+            <span class="han-button-arrow" aria-hidden="true">→</span>
+          </button>
+        </form>
       </div>
-      <p class="han-help">${msg("phoneHelp")}</p>
-      <button class="pf-c-button pf-m-primary pf-m-block" type="submit">${msg("sendOtp")}</button>
-    </form>
+
+      <p class="han-legal">
+        ${msg("phoneLegalPrefix")}
+        <span>${msg("termsOfUse")}</span>
+        ${msg("phoneLegalAnd")}
+        <span>${msg("privacyPolicy")}</span>
+      </p>
+    </div>
+    <script src="${url.resourcesPath}/js/han-login.js?v=3"></script>
   </#if>
 </@layout.registrationLayout>