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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user