Files
openmonetis/app/(dashboard)/ajustes/page.tsx
Claude fcd4ebc608 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
2025-11-17 19:43:50 +00:00

96 lines
3.7 KiB
TypeScript

import { DeleteAccountForm } from "@/components/ajustes/delete-account-form";
import { UpdateEmailForm } from "@/components/ajustes/update-email-form";
import { UpdateNameForm } from "@/components/ajustes/update-name-form";
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";
export default async function Page() {
const session = await auth.api.getSession({
headers: await headers(),
});
if (!session?.user) {
redirect("/");
}
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">
<TabsList className="w-full grid grid-cols-4 mb-2">
<TabsTrigger value="nome">Altere seu nome</TabsTrigger>
<TabsTrigger value="senha">Alterar senha</TabsTrigger>
<TabsTrigger value="email">Alterar e-mail</TabsTrigger>
<TabsTrigger value="deletar" className="text-destructive">
Deletar conta
</TabsTrigger>
</TabsList>
<Card className="p-6">
<TabsContent value="nome" className="space-y-4">
<div>
<h2 className="text-lg font-medium mb-1">Alterar nome</h2>
<p className="text-sm text-muted-foreground mb-4">
Atualize como seu nome aparece no OpenSheets. Esse nome pode ser
exibido em diferentes seções do app e em comunicações.
</p>
</div>
<UpdateNameForm currentName={userName} />
</TabsContent>
<TabsContent value="senha" className="space-y-4">
<div>
<h2 className="text-lg font-medium mb-1">Alterar senha</h2>
<p className="text-sm text-muted-foreground mb-4">
Defina uma nova senha para sua conta. Guarde-a em local seguro.
</p>
</div>
<UpdatePasswordForm authProvider={authProvider} />
</TabsContent>
<TabsContent value="email" className="space-y-4">
<div>
<h2 className="text-lg font-medium mb-1">Alterar e-mail</h2>
<p className="text-sm text-muted-foreground mb-4">
Atualize o e-mail associado à sua conta. Você precisará
confirmar os links enviados para o novo e também para o e-mail
atual (quando aplicável) para concluir a alteração.
</p>
</div>
<UpdateEmailForm currentEmail={userEmail} authProvider={authProvider} />
</TabsContent>
<TabsContent value="deletar" className="space-y-4">
<div>
<h2 className="text-lg font-medium mb-1 text-destructive">
Deletar conta
</h2>
<p className="text-sm text-muted-foreground mb-4">
Ao prosseguir, sua conta e todos os dados associados serão
excluídos de forma irreversível.
</p>
</div>
<DeleteAccountForm />
</TabsContent>
</Card>
</Tabs>
</div>
);
}