forked from git.gladyson/openmonetis
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
96 lines
3.7 KiB
TypeScript
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>
|
|
);
|
|
}
|