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

2026-10-07 21:01:45 +00:00
parent 82eed86423
commit 3772a75a8e
1 changed files with 78 additions and 4 deletions
@@ -1,5 +1,5 @@
 # GERADO por scripts/tema_login_escolinha.py — nao edite na mao.
-# Fonte: keycloak-theme/escolinha/{login,login-update-password,estilo}.ftl
+# Fonte: keycloak-theme/escolinha/{login,login-update-password,estilo,template}.ftl
 apiVersion: v1
 kind: ConfigMap
 metadata:
@@ -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,25 @@ 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 JS de passkey do tema base (26.4+) importa `rfc4648` PELO NOME, e quem
+           diz onde ele esta e este importmap — que o template.ftl de fabrica traz e
+           este tema, por nao herdar o <head> de la, nao trazia. Sem ele: "Failed to
+           resolve module specifier rfc4648" e o botao de passkey nao faz nada
+           (achado em 07/10/2026). Tem de vir ANTES de qualquer <script type=module>.
+           O gerador recusa publicar sem esta linha. -->
+      <script type="importmap">{"imports":{"rfc4648":"${url.resourcesCommonPath}/vendor/rfc4648/rfc4648.js"}}</script>
+      <#-- 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">
@@ -64,8 +86,27 @@ data:
          <div class="form">
            <span class="marca" role="img" aria-label="Athletic Map"></span>
    
-            <h1>Bem-vindo de <span class="hl">volta!</span></h1>
-            <p class="sub">Acesse sua conta para continuar</p>
+            <#-- O realm `clientes` e o do PAINEL DO COMPRADOR, e a conta dele e NOVA:
+                 separada da conta da escolinha, e sem senha ate ele usar o convite.
+                 "Bem-vindo de volta" fazia o comprador digitar a senha da escolinha e
+                 levar "senha invalida" sem entender por que (2026-09-25). -->
+            <#if (realm.name!"") == "clientes">
+              <h1>Painel da sua <span class="hl">conta</span></h1>
+              <p class="sub">Aqui voce ve tudo o que contratou. Esta conta e separada
+                da conta da sua escolinha.</p>
+              <div class="aviso aviso-info" style="margin-top:18px">
+                <b>Primeiro acesso?</b> Use o link que enviamos para o e-mail do
+                pagamento. Nao chegou? Clique em &ldquo;Esqueceu sua senha?&rdquo;.
+              </div>
+            <#-- O realm `athleticmap` e o da PLATAFORMA (07/10/2026): o Painel do dono e o sistema
+                 interno da empresa. So o dono tem conta aqui, com 2FA. -->
+            <#elseif (realm.name!"") == "athleticmap">
+              <h1>Painel do <span class="hl">dono</span></h1>
+              <p class="sub">&Aacute;rea restrita &agrave; administra&ccedil;&atilde;o da Athletic Map</p>
+            <#else>
+              <h1>Bem-vindo de <span class="hl">volta!</span></h1>
+              <p class="sub">Acesse sua conta para continuar</p>
+            </#if>
    
            <#if message?? && message.summary?has_content>
              <div class="aviso aviso-${message.type!'info'}" style="margin-top:24px">${message.summary!''}</div>
@@ -80,7 +121,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>
@@ -140,6 +181,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">
@@ -510,6 +555,31 @@ data:
             na base da foto. */
          .borda{display:none}
          .marca{margin-bottom:26px}
+          /* Sem isto a sobra da altura (min-height da tela) e repartida entre as
+             duas linhas, e a foto crescia nas telas curtas (definir senha, passkey). */
+          .stage{grid-template-rows:auto 1fr}
+        }
+    
+        /* ---------- Celular (folha do login do app, 360–430 px) ----------
+           O app abre o login numa folha (ASWebAuthenticationSession / Custom Tabs),
+           mais baixa que a tela. Aqui a foto vira uma faixa, o logo encolhe e o
+           formulario sobe — o botao "Entrar" fica a vista sem rolar. */
+        @media (max-width:480px){
+          /* dvh: no celular o 100vh conta a barra do navegador e sobra rolagem. */
+          .stage{min-height:100dvh}
+          .foto{min-height:112px;height:112px}
+          .painel{padding:22px 18px calc(28px + env(safe-area-inset-bottom,0px))}
+          .marca{width:58%;max-width:230px;margin-bottom:18px}
+          h1{font-size:26px}
+          .sub{font-size:14px;margin-top:6px}
+          form{margin-top:20px;gap:16px}
+          /* 16px no campo: abaixo disso o Safari do iPhone da zoom ao focar e a
+             tela fica deslocada para o lado. */
+          .caixa input{height:50px;font-size:16px}
+          .conteudo input[type=text],.conteudo input[type=email],.conteudo input[type=password]{font-size:16px}
+          .opcoes{flex-wrap:wrap;row-gap:8px}
+          .botao{height:52px}
+          .rodape{margin-top:24px}
        }
      </style>
    
@@ -564,6 +634,10 @@ data:
      <meta name="robots" content="noindex, nofollow">
      <title>${msg("loginTitle",(realm.displayName!''))}</title>
      <#include "estilo.ftl">
+      <#-- O mesmo importmap do template.ftl de fabrica: as paginas de passkey do tema
+           base (cadastrar passkey, escolher credencial) importam `rfc4648` pelo nome.
+           Ver o comentario no login.ftl. -->
+      <script type="importmap">{"imports":{"rfc4648":"${url.resourcesCommonPath}/vendor/rfc4648/rfc4648.js"}}</script>
    </head>
    <body>
      <div class="stage">