# Mobile — SwiftUI ## Etapa 01 - Contexto e Objetivos O objetivo é criar uma base mínima para um aplicativo de pedidos com autenticação via login, cadastro e código OTP. ---- ## Etapa 02 — Esqueleto do Projeto e Views - Criar projeto SwiftUI. - Criar NavigationStack e views LoginView, RegistrationView e OtpView. - Navegar entre telas. ---- ## Etapa 03 — LoginView - Logo e título "Boas-vindas!". - Descrição "Entre para continuar seu pedido.". - Inputs para e-mail e telefone. - Botão "Receber Código". - Link "Crie sua conta". ---- ## Etapa 04 — RegistrationView - Título "Crie sua conta". - Descrição "Preencha os dados abaixo...". - Inputs nome, e-mail e telefone. - Termos com switch. - Botão "Cadastrar e Receber Código". - Link "Já tem uma conta? Entrar". ---- ## Etapa 05 — OtpView - Título "OTP". - Texto "Enviado para ". - Inputs para código OTP. - Botão para enviar código. - Ação "Reenviar código". ---- ## Etapa 06 — View Models - Criar view models para cada view. - Validar campos básicos. - Gerenciar estados de loading e erros. ---- ## Etapa 07 — Validações e Máscaras - Validar e-mail válido. - Máscara para telefone. - Limitar número de dígitos do OTP. ---- ## Etapa 08 — Estados e Feedbacks - Mostrar loading no botão. - Desabilitar botão se inválido. - Feedback de erros inline. ---- ## Etapa 09 — Acessibilidade - Labels claros. - Áreas de toque adequadas. - Suporte a Dynamic Type. ---- ## Etapa 10 — Dark Mode - Cores adaptadas para modo escuro. - Testar contrastes e legibilidade. ---- ## Etapa 11 — Ajustes de UI (referencias) - Espaçamentos consistentes. - Tipografia alinhada ao design system. - Botões com padding padrão. - Estados visuais claros. ---- ## Etapa 11 — Checklist de Refinamento (Autenticação) ### Itens Globais - [ ] Espaçamentos consistentes (8 / 16 / 24) entre títulos, descrições, inputs e botões. - [ ] Cores alinhadas ao design system (backgroundLight/dark, textPrimary, primary para links/CTAs). - [ ] Tipografia: heading1 para títulos, body para textos e labels, botão usando componente padrão. - [ ] Estados: carregamento, desabilitado (opacidade), erro/validação inline quando necessário. - [ ] Acessibilidade: áreas de toque ≥ 44x44, labels claros, suporte a tamanhos dinâmicos de fonte. ### Login (LoginView) - [ ] Respiro após logo (≥ 16pt) e título “Boas‑vindas!” com heading1. - [ ] Descrição “Entre para continuar seu pedido.” com cor secundária e bom contraste no dark mode. - [ ] Inputs “E‑mail” e “Telefone” com `LoginField` padronizado; autocapitalization off (ok). - [ ] (Opcional) Validação leve: e‑mail válido e telefone numérico/máscara. - [ ] CTA “Receber Código” com padding horizontal 24 e top 8–16; estado desabilitado se necessário. - [ ] Texto de ajuda centralizado com padding horizontal 40. - [ ] Link “Crie sua conta” com espaçamento 8–16 do texto anterior. ### Cadastro (RegistrationView) - [ ] Título “Crie sua conta” com heading1. - [ ] Descrição “Preencha os dados abaixo...” com body, padding top 8 e bottom 20 (ok). - [ ] Inputs: Nome, E‑mail, Telefone com labels; ajustar keyboardType para e‑mail/telefone. - [ ] Termos: frase contínua sem quebras estranhas; links “Termos de Uso” e “Política de Privacidade” em primary. - [ ] Switch dos termos posicionado à direita (ok). - [ ] CTA “Cadastrar e Receber Código” desabilitado até Nome/E‑mail/Telefone preenchidos e switch ativado (ok); opacidade 0.5 quando desabilitado. - [ ] Bloco “Já tem uma conta? Entrar” com espaçamento superior 16 (ok). - [ ] Verificar contraste dos inputs e textos em dark mode. ### OTP (OtpView) - [ ] Título “OTP” com heading1 e texto “Enviado para ”. - [ ] Inputs para 6–8 dígitos (conforme definição final); foco automático no primeiro campo. - [ ] CTA desabilitado até todos os dígitos preenchidos. - [ ] Ação “Reenviar código” com timeout/contador. - [ ] Estados de erro (código inválido/expirado) e mensagens claras. ### Decisões em Aberto - [ ] Termos/Privacidade: navegação interna (views com conteúdo) ou URLs externas (Link/SFSafariView)? - [ ] Validações: mínima (campos preenchidos) ou reforçada (formato + mensagens inline)? - [ ] Máscara de telefone: aplicar padrão BR (ex.: (11) 98888‑7777)? - [ ] Dark mode: paleta de cinzas/texto secundário para contraste ideal. ## Progresso — Etapa 11 (Autenticação) Data de atualização: 2026-02-05 ### Itens Globais - [x] Espaçamentos consistentes básicos nas telas de Login e Cadastro. - [x] Cores e tipografia aplicadas via AppColors/AppTypography. - [ ] Revisão completa de dark mode (contraste de textos secundários). - [ ] Estados de carregamento e mensagens de erro padronizados. ### Login (LoginView) - [x] Estrutura com logo, título e descrição. - [x] Inputs padronizados (LoginField) para e‑mail e telefone. - [ ] Validação leve (formato de e‑mail/telefone) e mensagens inline. - [ ] Estado desabilitado do CTA quando inputs vazios (opcional nesta etapa). ### Cadastro (RegistrationView) - [x] Título e descrição com espaçamentos ajustados. - [x] Inputs com labels e `LoginField`. - [x] Termos com texto contínuo; links para “Termos de Uso” e “Política de Privacidade”. - [x] Switch dos termos à direita. - [x] CTA desabilitado até Nome/E‑mail/Telefone preenchidos e switch ativado. - [x] Espaçamento superior 16 no bloco “Já tem uma conta? Entrar”. - [ ] Ajustar keyboardType para e‑mail/telefone e (opcional) máscara BR. ### OTP (OtpView) - [x] Estrutura básica com título e indicação de e‑mail. - [ ] Campos de dígitos (6–8) com foco e validação. - [ ] CTA desabilitado até preenchimento completo. - [ ] Reenvio de código com contador. ### Decisões em Aberto - [ ] Termos/Privacidade: interno vs. URL externa. - [ ] Validações: mínima vs. reforçada (com mensagens inline). - [ ] Máscara de telefone: padrão BR. - [ ] Dark mode: paleta de cinzas/texto secundário.