feat: melhorar UX/UI e segurança do módulo de ajustes de usuário

Implementa melhorias abrangentes de UX, UI e segurança nos formulários
de alteração de senha e e-mail:

 Funcionalidades adicionadas:
- Validação em tempo real para campos duplicados (senha e e-mail)
- Campo de senha atual obrigatório para alterações de senha
- Campo de senha para confirmar identidade ao alterar e-mail
- Detecção de método de autenticação (Google OAuth vs Email/Senha)
- Indicador de força de senha com feedback visual
- Bloqueio de alteração de senha para usuários Google OAuth

🎨 Melhorias de UI:
- Feedback visual instantâneo com ícones de check/close
- Bordas coloridas indicando status de validação (verde/vermelho)
- Mensagens de erro claras e específicas em tempo real
- Alerta amigável para usuários Google OAuth
- Indicador de progresso de força de senha

🔒 Segurança:
- Validação de senha atual no backend usando Better Auth
- Prevenção de alteração para o mesmo e-mail
- Verificação de e-mails duplicados no sistema
- Bloqueio de submissão quando validações falham

 Acessibilidade:
- Atributos aria-label, aria-required, aria-invalid
- role="alert" para mensagens de erro
- aria-describedby para textos auxiliares
- Labels descritivas e navegação por teclado aprimorada

🐛 Correções:
- Corrigido uso de error.errors para error.issues no Zod
- Validação backend de senha atual implementada
- Mensagens de erro específicas (não genéricas)

Ref: Análise completa de UX/UI solicitada para módulo de ajustes
This commit is contained in:
Claude
2025-11-17 19:43:50 +00:00
parent 71e083fd49
commit fcd4ebc608
4 changed files with 436 additions and 33 deletions

View File

@@ -5,6 +5,8 @@ import { UpdatePasswordForm } from "@/components/ajustes/update-password-form";
import { Card } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { auth } from "@/lib/auth/config";
import { db, schema } from "@/lib/db";
import { eq } from "drizzle-orm";
import { headers } from "next/headers";
import { redirect } from "next/navigation";
@@ -20,6 +22,14 @@ export default async function Page() {
const userName = session.user.name || "";
const userEmail = session.user.email || "";
// Detectar método de autenticação (Google OAuth vs E-mail/Senha)
const userAccount = await db.query.account.findFirst({
where: eq(schema.account.userId, session.user.id),
});
// Se o providerId for "google", o usuário usa Google OAuth
const authProvider = userAccount?.providerId || "credential";
return (
<div className="max-w-3xl">
<Tabs defaultValue="nome" className="w-full">
@@ -51,7 +61,7 @@ export default async function Page() {
Defina uma nova senha para sua conta. Guarde-a em local seguro.
</p>
</div>
<UpdatePasswordForm />
<UpdatePasswordForm authProvider={authProvider} />
</TabsContent>
<TabsContent value="email" className="space-y-4">
@@ -63,7 +73,7 @@ export default async function Page() {
atual (quando aplicável) para concluir a alteração.
</p>
</div>
<UpdateEmailForm currentEmail={userEmail} />
<UpdateEmailForm currentEmail={userEmail} authProvider={authProvider} />
</TabsContent>
<TabsContent value="deletar" className="space-y-4">