Ir ao conteúdo
SEED engenhariaDesign System

Componentes

83. TELA A19 — AUTENTICAÇÃO

estávelseed-componentes.md v1.43 · §83seção 89 de 9883-tela-a19-autenticacao-entrar-recuperar-criar.md · MD5 02c5f8a1

Título completo no canon: TELA A19 — AUTENTICAÇÃO (entrar · recuperar · criar conta) · estável (2026-08-23) · fecha a CD-P5 · tela 05-html-de-referencia/telas/tela-autenticacao.html v0.2 · instrumento 06-validacao/suites/suite-autenticacao.mjs (21 PASS · 0 FAIL · 0 [n/a])

O que é: a primeira tela da F7.6 (ordem aprovada no consolidado de 2026-08-22: A19 → A20 → A17 → A18 → A14 → A13). Promovida por gate visual do Rafael em 2026-08-23 com UMA correção, verbatim: "a tela de login deve ter o icone da seed no lugar do botao turquesa. fazendo essa correção, está aprovado" — aplicada antes da promoção (ver AU-13). A tela não inventa componente: compõe o §66 (credenciais CD1–CD16), o §2/§3.5 (form-field e norma de senha), o §1 (botão), o §1.13/1.13-b (live region) e o gabarito A19 da F7.1 (seed-composicao.md §3: um cartão centrado, coluna única, 420px máx, par sombra+anel; <600px vira largura total com calha mínima). Leitura de referência: 09-pesquisa/leitura-f76-bordas.md (2026-08-22) — ClickUp público (login/forgot/signup, MEDIDO) + shadcn login-01 (MEDIDO, a stack do ERP). Onde a norma decide, a spec mede contra a norma (precedente do §66.0); a leitura serviu à COMPOSIÇÃO.

83.1 Contratos (a suíte mede todos por comportamento, nunca por regex)#

  • AU-01<form> REAL por vista (4: entrar · recuperar · código · criar) e nenhum botão de submit nasce desabilitado (§2.6; o ClickUp nasce desabilitado a 1,4:1 de contraste e reprova nesta régua).
  • AU-02 — e-mail: type=email + autocomplete=username + inputmode=email + autocapitalize=none + spellcheck=false (CD2/§2.6) — nos TRÊS formulários que pedem e-mail.
  • AU-03 — senha de entrar = current-password; senha de criar = new-password; nenhuma senha tem maxlength (CD4). Código de verificação = one-time-code + inputmode=numeric + pattern/maxlength legítimos (CD11 — código tem forma fechada, o oposto da senha).
  • AU-04 — revelar senha é button[type=button] com aria-pressed/aria-controls (CD6), a visibilidade é ANUNCIADA na live region (CD7), o SUBMIT devolve a type=password (CD8) e a senha NASCE oculta (CD9).
  • AU-05 — todo input tem <label for> VISÍVEL (§2) — placeholder nunca é rótulo (defeito do vizinho, lido e rejeitado).
  • AU-06 — erro de CREDENCIAL: o container role=alert existe no DOM vazio e oculto ANTES do conteúdo (1.13-b) e a mensagem fala do PAR ("E-mail ou senha incorretos"), nunca de qual metade errou (CD13). Erro de FORMATO diz e aponta o campo (blur, B4; aria-invalid sempre com valor explícito, §2.9).
  • AU-07 — código em UM campo, nunca N caixinhas (CD10).
  • AU-08 — o prazo do código é DECLARADO em texto (mono para o número) e o reenvio existe como ação terciária (CD12).
  • AU-09 — criar conta sem "confirme a senha" (CD5/SC 3.3.7); força da senha em texto + forma, nunca bloqueia o envio (CD14).
  • AU-10lang=pt-BR, um <main>, um h1 por vista (o ClickUp tem ZERO h1/main na tela de login), uma vista visível por vez, e a troca de vista move o foco ao h1 da vista nova.
  • AU-11 — live region única role=status aria-atomic, visualmente oculta e separada do nó visível (§1.13).
  • AU-12o símbolo da marca é o ASSET OFICIAL, byte-idêntico: os paths de 03-assets/simbolos/simbolo-principal.svg (tema claro) e simbolo-mono-negativo.svg (tema escuro — tabela fundo×variante do marca-seed.md §5.1) foram INJETADOS POR SCRIPT na tela, nunca redigitados; a suíte confere o path âncora contra o arquivo do asset.
  • AU-13 (veredito do gate) — a identidade acima do cartão é o símbolo oficial + "SEED engenharia" em texto. A sigla geométrica genérica das telas internas NÃO serve à porta do produto.
  • AU-14 — Caps Lock ligado no campo de senha gera AVISO visível (warning, nunca danger) e anunciado, que morre no blur (CD15).

83.2 Decisões de composição (com a leitura que as sustenta)#

Cartão, não canvas aberto (gabarito F7.1; shadcn confirma; o CU diverge) · "Esqueceu a senha?" na LINHA do rótulo da senha, à direita (shadcn) · SSO ("Continuar com o Google") DEPOIS do formulário e do divisor "ou" — o método primário da casa é o e-mail corporativo · botão de recuperação nomeia o EFEITO ("Enviar link de recuperação") e o de criação nomeia o MÉTODO ("Criar conta com e-mail") — dispositivos lidos no CU e adotados · título da recuperação é PERGUNTA ("Esqueceu a senha?") · confirmação de envio NEUTRA ("Se o e-mail existir na conta…") — não revela existência de conta · termos como texto de continuação (redação final = produto/jurídico, LGPD) · v0.2 sem faixa de marca: a âncora da tela é o botão primário turquesa (PN21-05: UMA âncora por página); o CP19 (faixa) segue PERMITIDO pelo gabarito como variante, se um gate futuro a pedir.

83.3 Fronteiras (produto/Supabase — nada disto é do DS)#

Sessão, redirecionamento, rate-limit, política de senha (§3.5/NIST), "lembrar-me", MFA/2FA de produto, seleção de workspace multi-empresa (SI17-e), redação legal dos termos e os E-MAILS do fluxo (EM15: o template canônico em HTML puro é exatamente o que o Supabase Auth aceita — quando a decisão vier, é colar). O deep-link #vista=…&tema=…&estado=… da tela é INSTRUMENTO de avaliação (headless/suíte), não spec — em produto, vista é rota.

83.4 O que a produção pegou (instrumento e método)#

  1. Container query não estiliza o próprio container — a primeira versão punha container-type no .palco e mirava .palco dentro do @container: nunca disparava. Pego por MEDIÇÃO em navegador real a 390px (padding seguia 24px); o container subiu para o body. Medido depois: calha 12px, cartão 366px, scrollWidth = viewport.
  2. O screenshot do Chrome CLI a 390px inventou um overflow (link "vazando" da tela) que o navegador real desmente — REINCIDÊNCIA da armadilha catalogada no marco v1.9: render de prova é navegador real/puppeteer, nunca o CLI --screenshot.
  3. Ambiente de suíte nesta máquina: o G: (Drive File Stream) rejeita junction e node_modules dentro do stream é inviável; o jsdom vive em C:\Users\seed\AppData\Local\Temp\claude\jsdom-env e a suíte o resolve por caminho (env JSDOM_DIR). ⚠ As suítes antigas (import 'jsdom' puro) seguem sem rodar aqui — pendência de ambiente AU-P1.
  4. Defeito pego no pré-olhar: link "Esqueceu a senha?" herdava o AZUL default do UA no tema escuro (seletor de cor não cobria .linha-rotulo a) — consertado e reconferido.

83.5 Pendências que a seção deixa#

  • AU-P1 — ambiente: as ~60 suítes antigas não rodam nesta máquina (jsdom fora do repo; ver 83.4-3). Decidir o padrão da casa: env JSDOM_DIR em todas, ou ambiente node dedicado fora do stream.
  • AU-P2 — a variante COM faixa de marca (CP19) não foi desenhada; gatilho: gate futuro pedir a versão de marketing da porta.
  • AU-P3 — o fluxo multi-empresa pós-login (seleção de workspace, SI17-e) é tela de PRODUTO; se o ERP pedir, nasce como extensão desta seção com leitura própria.

TelaSEED · Gabarito A19 — Autenticação (v0.3 · estável 2026-08-23 · HV1 retroativo)abrir em página própria ↗
Esc