Um frontend responsivo e moderno para a API de autenticação AuthAPI.
✨ Funcionalidades:
- ✅ Página de login responsiva
- ✅ Formulário de registro com validação
- ✅ Dashboard com informações do usuário
- ✅ Exibição e cópia de token JWT
- ✅ Persistência de dados no LocalStorage
- ✅ Validação em tempo real de formulários
- ✅ Design responsivo para mobile, tablet e desktop
- ✅ Suporte a modo escuro
- ✅ Transições e animações suaves
- ✅ Gerenciamento de senhas com toggle
frontend/
├── index.html # Página principal
├── css/
│ └── styles.css # Estilos responsivos
└── js/
└── app.js # Lógica da aplicação
- Navegador moderno (Chrome, Firefox, Safari, Edge)
- API AuthAPI rodando em
http://localhost:8000
cd ..
python -m uvicorn main:app --reloadA API estará disponível em http://localhost:8000
Simplesmente abra o arquivo index.html em seu navegador:
# Opção 1: Abrir diretamente
start index.html
# Opção 2: Usar um servidor local (recomendado)
python -m http.server 8080
# Acesse http://localhost:8080/frontend- Digite suas credenciais (email e senha)
- Clique em "Entrar"
- O frontend envia uma requisição POST para
/token - Ao receber o token, o sistema salva no
localStorage - O usuário é redirecionado para o dashboard
- Preencha os dados pessoais
- Confirme sua senha
- Concorde com os termos
- Clique em "Cadastrar"
- Após sucesso, você é redirecionado para login
Após fazer login, você terá acesso a:
- ✅ Nome e email do usuário
- ✅ Status da conta
- ✅ Token JWT (mostrar/ocultar)
- ✅ Copiar token para clipboard
- ✅ Botão para sair
A API foi configurada para aceitar requisições do frontend. Se você precisar mudar a origem permitida, edite em main.py:
app.add_middleware(
CORSMiddleware,
allow_origins=["http://localhost:3000"], # Altere conforme necessário
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)| Método | Endpoint | Descrição |
|---|---|---|
| POST | /token |
Login e geração de token |
| POST | /users/ |
Registro de novo usuário |
| GET | /users/me |
Obter dados do usuário autenticado |
- ✅ Email obrigatório
- ✅ Senha obrigatória (mín. 8 caracteres)
- ✅ Nome obrigatório (mín. 3 caracteres)
- ✅ Email obrigatório e válido
- ✅ Senha obrigatória (mín. 8 caracteres)
- ✅ Confirmação de senha deve corresponder
- ✅ Aceitar termos é obrigatório
O frontend é totalmente responsivo com breakpoints para:
- 📱 Mobile (até 480px)
- 📱 Smartphone (até 768px)
- 💻 Tablet (até 1024px)
- 🖥️ Desktop (acima de 1024px)
- Ajuste automático de padding e margens
- Tamanhos de fonte adaptáveis
- Botões otimizados para toque
- Layout responsivo sem scroll horizontal
O frontend utiliza localStorage para persistir:
accessToken- Token JWT do usuárioemail- Email do usuário (para preenchimento automático)
Nota: Ao fazer logout, esses dados são limpos automaticamente.
- LocalStorage: O token é armazenado em localStorage. Para produção, considere usar cookies HTTP-only.
- CORS: Configure as origens permitidas apropriadamente em produção.
- HTTPS: Sempre use HTTPS em produção.
- Variáveis de Ambiente: Adicione a URL da API a um arquivo
.env(não versionado).
O frontend detecta automaticamente a preferência de modo escuro do sistema via prefers-color-scheme e adapta o tema conforme necessário.
- 🎨 CSS personalizado com variáveis CSS
- ⚡ Transições suaves com cubic-bezier
- 🎯 Validação em tempo real sem biblioteca externa
- 📱 Touch-friendly com espaçamento adequado
- ♿ Acessibilidade com suporte a motion preferences
Verifique se:
- A API está rodando em
http://localhost:8000 - O CORS está habilitado na API
- Não há firewall bloqueando a conexão
Altere a variável de ambiente ACCESS_TOKEN_EXPIRE_MINUTES em seu arquivo .env
Use um email diferente ou acesse com o email/senha corretos
Para melhorias e sugestões, abra uma issue ou pull request!
Veja o arquivo LICENSE para mais informações.