Разработана первая версия приложений

codebase/backend/keycloak/themes/han-phone/login/messages/messages_ru.properties

@@ -0,0 +1,13 @@
+phoneTitle=Вход по номеру телефона
+phoneLabel=Номер телефона
+phoneHelp=Укажите российский или международный номер. Мы используем его только для входа.
+sendOtp=Получить код
+otpTitle=Подтверждение телефона
+otpLabel=Код подтверждения
+otpSent=Код подтверждения подготовлен для номера {0}
+verifyOtp=Войти
+mockMode=Тестовый режим отправки кода
+phoneInvalid=Проверьте формат номера телефона.
+otpInvalid=Код неверен, истёк или уже использован.
+otpLimited=Слишком много попыток. Повторите позже.
+otpUnavailable=Сервис подтверждения временно недоступен. Повторите позже.

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

@@ -0,0 +1,16 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayMessage=true; 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/>
+      </div>
+      <button class="pf-c-button pf-m-primary pf-m-block" type="submit">${msg("verifyOtp")}</button>
+    </form>
+  </#if>
+</@layout.registrationLayout>

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

@@ -0,0 +1,16 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayMessage=true; 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>"/>
+      </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>
+  </#if>
+</@layout.registrationLayout>

codebase/backend/keycloak/themes/han-phone/login/resources/css/han-login.css

@@ -0,0 +1,18 @@
+:root {
+  --han-primary: #246bfd;
+  --han-text: #172033;
+}
+
+body { color: var(--han-text); }
+.pf-c-button.pf-m-primary { background: var(--han-primary); border-radius: 10px; min-height: 44px; }
+input[type="tel"], input[name="otp"] {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 44px;
+  margin-top: 8px;
+  padding: 10px 12px;
+  border: 1px solid #9aa6bd;
+  border-radius: 8px;
+}
+.han-help { color: #596780; font-size: .9rem; }
+.han-test-mode { color: #7a4b00; background: #fff3cd; padding: 8px 10px; border-radius: 8px; }

codebase/backend/keycloak/themes/han-phone/login/theme.properties

@@ -0,0 +1,4 @@
+parent=keycloak.v2
+import=common/keycloak
+styles=css/han-login.css
+locales=ru