req-120: Novo Layout Público em Tailwind CSS e Migração das Telas de Autenticação, Cadastro e Recuperação de Senha

O módulo perfil-usuario contém 15 páginas públicas e fluxos de autenticação além do painel de perfil. Atualmente, todas essas páginas dependem do layout legado…

Status do intake: ready-for-intake
Data: 2026-08-17 (atualizado em 2026-08-18)
Origem: etapa final do programa de modernização do módulo perfil-usuario, criação de layout público em Tailwind CSS e eliminação do Fomantic-UI nas telas públicas
Classificação: novo layout público, migração de framework CSS (Tailwind v4), refatoração de frontend, acessibilidade
Batch candidato: BATCH-121

1. Contexto e Objetivos

O módulo perfil-usuario contém 15 páginas públicas e fluxos de autenticação além do painel de perfil. Atualmente, todas essas páginas dependem do layout legado layout-pagina-sem-permissao e dos componentes do Fomantic-UI (.ui.form, .ui.segment, .ui.message, .ui.button, etc.).

Esta requisição completa a modernização dos fluxos de identidade com dois objetivos fundamentais:

Preservar o layout legado (layout-pagina-sem-permissao) para garantir retrocompatibilidade com telas antigas do sistema que ainda não foram migradas;
Criar o novo layout público em Tailwind CSS (layout-pagina-sem-permissao-tailwind em pt-br e en), fornecendo um shell limpo, topo responsivo com logo Conn2Flow, contêiner de card centralizado para formulários e rodapé sutil;
Reconstruir todas as 15 páginas públicas de autenticação em Tailwind CSS v4 puro com componentes Vanilla JS leves, garantindo design moderno, responsividade perfeita, excelente tempo de carregamento e acessibilidade.

2. Escopo Técnico Requerido

Módulo 1: Criação do Layout Público em Tailwind CSS (`layout-pagina-sem-permissao-tailwind`)

Arquivos:
- gestor/resources/pt-br/layouts/layout-pagina-sem-permissao-tailwind/layout-pagina-sem-permissao-tailwind.html e .css
- gestor/resources/en/layouts/layout-pagina-sem-permissao-tailwind/layout-pagina-sem-permissao-tailwind.html e .css
Estrutura:
- Header limpo com logo Conn2Flow responsivo (desktop e mobile);
- Miolo centralizado com wrapper responsivo para o corpo @[[pagina#corpo]]@;
- Rodapé discreto com links institucionais / copyright;
- Pré-compilação com framework_css = "tailwindcss".

Módulo 2: Inventário e Migração das 15 Páginas Públicas

Todas as páginas abaixo devem ser migradas em gestor/modulos/perfil-usuario/resources/pt-br/pages/ e resources/en/pages/, apontando para o novo layout layout-pagina-sem-permissao-tailwind:

Página / Rota	Descrição do Fluxo	Ações de Migração
`acessar-sistema`	Tela principal de login (Sign-in)	Card moderno centralizado com suporte a login por senha, código por e-mail (passwordless), botões de login social (Google, Meta) e links para cadastro/esqueci senha em Tailwind CSS.
`cadastrar-no-sistema`	Tela de cadastro público (Sign-up)	Formulário fluido com validação de força de senha em tempo real, termos de uso e integração com reCAPTCHA invisível/v3.
`Area-restrita`	Step-Up Auth / Reautenticação	Modal/Card elegante para reconfirmação de senha antes de operações críticas.
`esqueceu-a-senha`	Solicitação de reset de senha	Formulário limpo com validação de e-mail e envio de link de recuperação.
`esqueceu-a-senha-email-enviado`	Confirmação de disparo de e-mail	Tela informativa com ícone de sucesso e orientações claras de caixa de entrada/spam.
`redefinir-senha`	Definição da nova senha via token	Formulário com validação de complexidade de senha e confirmação de senha.
`redefinir-senha-confirmacao`	Sucesso de redefinição de senha	Feedback visual com botão de redirecionamento para o login.
`signin-2fa`	Validação de 2FA no login	Campo de 6 dígitos formatado (auto-focus, navegação numérica), suporte a código por App, por E-mail e link para uso de Recovery Code.
`confirmacao-de-email`	Validação de token de e-mail	Feedback de confirmação de conta ativa.
`social-login` / `oauth-callback`	Telas intermediárias de OAuth	Indicador de carregamento (spinner moderno em Tailwind) durante handshake de autenticação externa.
`oauth-authenticate` / `oauth-authenticate-2fa`	Consentimento de API OAuth	Tela de concessão de permissões para aplicações terceiras e validação de 2FA OAuth.
`validar-usuario` / `sair-sistema`	Validações e logout seguro	Telas de transição e encerramento de sessão com limpeza de cookies.

Módulo 3: Diretrizes de Implementação Técnica

Substituição de Controles Fomantic-UI:
- Inputs e selects: w-full rounded-lg border border-slate-300 px-3.5 py-2.5 text-slate-900 focus:border-emerald-600 focus:ring-2 focus:ring-emerald-600/20 transition;
- Mensagens de feedback: banners semânticos (bg-emerald-50 text-emerald-800 border-emerald-200 para sucesso, bg-rose-50 text-rose-800 border-rose-200 para erro);
- Botões principais e secundários em Tailwind com estados :hover, :active, :focus-visible e :disabled.
Pré-compilação e Recursos:
- Declarar framework_css = "tailwindcss" em todos os metadados das páginas e do layout;
- Gerar os arquivos .precompiled.css para o layout e para cada uma das 15 páginas em pt-br e en.
Preservação de Hooks e Parâmetros:
- Manter 100% dos nomes de campos POST, variáveis de template @[[...]]@, #[...]# e validações de CSRF existentes no backend perfil-usuario.php.

3. Critérios de Aceite e Validação

Layout legado layout-pagina-sem-permissao inalterado e preservado.
Novo layout layout-pagina-sem-permissao-tailwind criado e funcionando perfeitamente em desktop e mobile.
Todas as 15 páginas públicas do módulo perfil-usuario convertidas integralmente para Tailwind CSS em pt-br e en associadas ao novo layout.
Zero dependências visuais do Fomantic-UI nessas páginas.
Fluxos completos de autenticação (login, 2FA, cadastro, logout, esqueci minha senha, redefinição) validados e funcionais.
Testes automatizados Vitest e PHPUnit 100% verdes.

# req-120: Novo Layout Público em Tailwind CSS e Migração das Telas de Autenticação, Cadastro e Recuperação de Senha
- **Status do intake**: ready-for-intake
- **Data**: 2026-08-17 (atualizado em 2026-08-18)
- **Origem**: etapa final do programa de modernização do módulo `perfil-usuario`, criação de layout público em Tailwind CSS e eliminação do Fomantic-UI nas telas públicas
- **Classificação**: novo layout público, migração de framework CSS (Tailwind v4), refatoração de frontend, acessibilidade
- **Batch candidato**: BATCH-121
---
## 1. Contexto e Objetivos
O módulo `perfil-usuario` contém 15 páginas públicas e fluxos de autenticação além do painel de perfil. Atualmente, todas essas páginas dependem do layout legado `layout-pagina-sem-permissao` e dos componentes do Fomantic-UI (`.ui.form`, `.ui.segment`, `.ui.message`, `.ui.button`, etc.).
Esta requisição completa a modernização dos fluxos de identidade com dois objetivos fundamentais:
1. **Preservar o layout legado** (`layout-pagina-sem-permissao`) para garantir retrocompatibilidade com telas antigas do sistema que ainda não foram migradas;
2. **Criar o novo layout público em Tailwind CSS** (`layout-pagina-sem-permissao-tailwind` em `pt-br` e `en`), fornecendo um shell limpo, topo responsivo com logo Conn2Flow, contêiner de card centralizado para formulários e rodapé sutil;
3. **Reconstruir todas as 15 páginas públicas de autenticação em Tailwind CSS v4** puro com componentes Vanilla JS leves, garantindo design moderno, responsividade perfeita, excelente tempo de carregamento e acessibilidade.
---
## 2. Escopo Técnico Requerido
### Módulo 1: Criação do Layout Público em Tailwind CSS (`layout-pagina-sem-permissao-tailwind`)
* **Arquivos**:
  - `gestor/resources/pt-br/layouts/layout-pagina-sem-permissao-tailwind/layout-pagina-sem-permissao-tailwind.html` e `.css`
  - `gestor/resources/en/layouts/layout-pagina-sem-permissao-tailwind/layout-pagina-sem-permissao-tailwind.html` e `.css`
* **Estrutura**:
  - Header limpo com logo Conn2Flow responsivo (desktop e mobile);
  - Miolo centralizado com wrapper responsivo para o corpo `@[[pagina#corpo]]@`;
  - Rodapé discreto com links institucionais / copyright;
  - Pré-compilação com `framework_css = "tailwindcss"`.
### Módulo 2: Inventário e Migração das 15 Páginas Públicas
Todas as páginas abaixo devem ser migradas em `gestor/modulos/perfil-usuario/resources/pt-br/pages/` e `resources/en/pages/`, apontando para o novo layout `layout-pagina-sem-permissao-tailwind`:
| Página / Rota | Descrição do Fluxo | Ações de Migração |
| :--- | :--- | :--- |
| **`acessar-sistema`** | Tela principal de login (Sign-in) | Card moderno centralizado com suporte a login por senha, código por e-mail (passwordless), botões de login social (Google, Meta) e links para cadastro/esqueci senha em Tailwind CSS. |
| **`cadastrar-no-sistema`** | Tela de cadastro público (Sign-up) | Formulário fluido com validação de força de senha em tempo real, termos de uso e integração com reCAPTCHA invisível/v3. |
| **`Area-restrita`** | Step-Up Auth / Reautenticação | Modal/Card elegante para reconfirmação de senha antes de operações críticas. |
| **`esqueceu-a-senha`** | Solicitação de reset de senha | Formulário limpo com validação de e-mail e envio de link de recuperação. |
| **`esqueceu-a-senha-email-enviado`** | Confirmação de disparo de e-mail | Tela informativa com ícone de sucesso e orientações claras de caixa de entrada/spam. |
| **`redefinir-senha`** | Definição da nova senha via token | Formulário com validação de complexidade de senha e confirmação de senha. |
| **`redefinir-senha-confirmacao`** | Sucesso de redefinição de senha | Feedback visual com botão de redirecionamento para o login. |
| **`signin-2fa`** | Validação de 2FA no login | Campo de 6 dígitos formatado (auto-focus, navegação numérica), suporte a código por App, por E-mail e link para uso de **Recovery Code**. |
| **`confirmacao-de-email`** | Validação de token de e-mail | Feedback de confirmação de conta ativa. |
| **`social-login` / `oauth-callback`** | Telas intermediárias de OAuth | Indicador de carregamento (spinner moderno em Tailwind) durante handshake de autenticação externa. |
| **`oauth-authenticate` / `oauth-authenticate-2fa`** | Consentimento de API OAuth | Tela de concessão de permissões para aplicações terceiras e validação de 2FA OAuth. |
| **`validar-usuario` / `sair-sistema`** | Validações e logout seguro | Telas de transição e encerramento de sessão com limpeza de cookies. |
### Módulo 3: Diretrizes de Implementação Técnica
1. **Substituição de Controles Fomantic-UI**:
   - Inputs e selects: `w-full rounded-lg border border-slate-300 px-3.5 py-2.5 text-slate-900 focus:border-emerald-600 focus:ring-2 focus:ring-emerald-600/20 transition`;
   - Mensagens de feedback: banners semânticos (`bg-emerald-50 text-emerald-800 border-emerald-200` para sucesso, `bg-rose-50 text-rose-800 border-rose-200` para erro);
   - Botões principais e secundários em Tailwind com estados `:hover`, `:active`, `:focus-visible` e `:disabled`.
2. **Pré-compilação e Recursos**:
   - Declarar `framework_css = "tailwindcss"` em todos os metadados das páginas e do layout;
   - Gerar os arquivos `.precompiled.css` para o layout e para cada uma das 15 páginas em `pt-br` e `en`.
3. **Preservação de Hooks e Parâmetros**:
   - Manter 100% dos nomes de campos POST, variáveis de template `@[[...]]@`, `#[...]#` e validações de CSRF existentes no backend `perfil-usuario.php`.
---
## 3. Critérios de Aceite e Validação
1. Layout legado `layout-pagina-sem-permissao` inalterado e preservado.
2. Novo layout `layout-pagina-sem-permissao-tailwind` criado e funcionando perfeitamente em desktop e mobile.
3. Todas as 15 páginas públicas do módulo `perfil-usuario` convertidas integralmente para Tailwind CSS em `pt-br` e `en` associadas ao novo layout.
4. Zero dependências visuais do Fomantic-UI nessas páginas.
5. Fluxos completos de autenticação (login, 2FA, cadastro, logout, esqueci minha senha, redefinição) validados e funcionais.
6. Testes automatizados Vitest e PHPUnit 100% verdes.