feat(atm-plataforma): tela de login Athletic Map

tenants/plataforma/36-kc-theme.yaml

@@ -26,6 +26,9 @@ data:
     
       Nao edite o YAML na mao: ele e derivado deste arquivo.
     -->
+    <#-- Passkeys (Keycloak 26.4+): o `passkeys.ftl` vem do tema BASE. Sem a politica
+         "Passkeys" ligada no realm, a macro nao desenha nada. -->
+    <#import "passkeys.ftl" as passkeys>
     <!DOCTYPE html>
     <html lang="pt-BR">
     <head>
@@ -36,6 +39,18 @@ data:
       <#-- Ver estilo.ftl: o <style> vive la porque as imagens pesam 400 KB e
            a tela de definir senha usa o mesmo. -->
       <#include "estilo.ftl">
+      <#-- O botao de passkey e da macro do tema base, com classes do PatternFly que
+           este tema nao estiliza: aqui ele ganha o desenho do `.botao.social`. -->
+      <style>
+        #authenticateWebAuthnButton{
+          display:flex;align-items:center;justify-content:center;gap:10px;
+          width:100%;height:56px;margin-top:12px;border-radius:12px;
+          font-size:16px;font-weight:700;text-decoration:none;
+          background:#fff;color:var(--navy);border:1.5px solid var(--line);
+        }
+        #authenticateWebAuthnButton:hover{background:#F6F4F1}
+        #authenticateWebAuthnButton:focus-visible{outline:3px solid rgba(245,130,32,.45);outline-offset:2px}
+      </style>
     </head>
     <body>
       <div class="stage">
@@ -94,7 +109,7 @@ data:
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m3.5 7 8.5 6 8.5-6"/></svg>
                   </span>
                   <input tabindex="1" id="username" name="username" type="text" placeholder="seu@email.com"
-                         autofocus autocomplete="username" value="${(login.username!'')}"
+                         autofocus autocomplete="username webauthn" value="${(login.username!'')}"
                          class="<#if messagesPerField.existsError('username','password')>erro</#if>"/>
                 </div>
               </div>
@@ -154,6 +169,10 @@ data:
                 </#list>
               </#if>
             </form>
+            <#-- FORA do form de senha: a macro traz os proprios forms (o do
+                 WebAuthn e o de escolher credencial). `webauthn` no autocomplete do
+                 e-mail e o que faz o navegador sugerir a passkey no proprio campo. -->
+            <@passkeys.conditionalUIData />
             </#if>
     
             <p class="rodape">