Frontend completo (Etapas 11-18) e extensões de backend (Etapas 13 e 18)

Adiciona o frontend Next.js em frontend/ (setup, design system, autenticação/tema, layout/navegação, área master, área tenant completa: clientes, produtos, vendas, recebimentos, whatsapp, e-mail, alertas, equipe e perfil). Estende o backend de forma aditiva e autorizada: cookie httpOnly para refresh token (Etapa 13) e CRUD de equipe + edição de perfil do tenant (Etapa 18, módulo src/modules/equipe/ novo e PUT /tenant/perfil). Detalhes completos em Etapas/V2/*. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-16 09:41:13 -03:00
parent f9738e54da
commit 323912748f
179 changed files with 29312 additions and 22 deletions
@@ -0,0 +1,125 @@
+'use client';
+
+import * as React from 'react';
+import Link from 'next/link';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { apiClient, ApiError } from '@/lib/api/client';
+import { forgotPasswordSchema, type ForgotPasswordFormValues } from '@/lib/validators/auth';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { FormField } from '@/components/ui/form-field';
+
+type Area = 'tenant' | 'master';
+
+export default function EsqueciSenhaPage() {
+  const [area, setArea] = React.useState<Area>('tenant');
+  const [sent, setSent] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<ForgotPasswordFormValues>({ resolver: zodResolver(forgotPasswordSchema) });
+
+  const onSubmit = async (values: ForgotPasswordFormValues) => {
+    setError(null);
+    try {
+      // Resposta é sempre genérica (200), mesmo se o e-mail não existir —
+      // o backend nunca revela isso (Etapa 13: nunca revelar se o e-mail existe).
+      await apiClient.post('/auth/password/forgot', {
+        email: values.email,
+        usuario_tipo: area === 'master' ? 'master' : 'tenant_user',
+      });
+      setSent(true);
+    } catch (err) {
+      setError(
+        err instanceof ApiError ? err.message : 'Não foi possível conectar. Tente novamente.',
+      );
+    }
+  };
+
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-neutral-50 p-4">
+      <div className="flex w-full max-w-[420px] flex-col gap-6 rounded-xl border border-border bg-surface p-6 shadow-sm sm:p-8">
+        <div className="flex flex-col gap-2 text-center">
+          <h1 className="text-xl font-semibold text-foreground">Esqueci minha senha</h1>
+          <p className="text-sm text-muted-foreground">
+            Informe seu e-mail — se ele existir no sistema, enviaremos instruções de redefinição.
+          </p>
+        </div>
+
+        {sent ? (
+          <div className="flex flex-col gap-4">
+            <p role="status" className="rounded-lg bg-success/10 p-3 text-sm text-success">
+              Se o e-mail informado existir, as instruções de redefinição foram enviadas.
+            </p>
+            <Link
+              href="/login"
+              className="text-center text-sm text-primary-on-light underline-offset-4 hover:underline"
+            >
+              Voltar para o login
+            </Link>
+          </div>
+        ) : (
+          <form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)} noValidate>
+            <div
+              role="radiogroup"
+              aria-label="Tipo de acesso"
+              className="grid grid-cols-2 gap-1 rounded-lg bg-muted p-1"
+            >
+              <button
+                type="button"
+                role="radio"
+                aria-checked={area === 'tenant'}
+                onClick={() => setArea('tenant')}
+                className={`min-h-9 rounded-md text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring ${
+                  area === 'tenant'
+                    ? 'bg-background text-foreground shadow-sm'
+                    : 'text-muted-foreground'
+                }`}
+              >
+                Sou cliente
+              </button>
+              <button
+                type="button"
+                role="radio"
+                aria-checked={area === 'master'}
+                onClick={() => setArea('master')}
+                className={`min-h-9 rounded-md text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring ${
+                  area === 'master'
+                    ? 'bg-background text-foreground shadow-sm'
+                    : 'text-muted-foreground'
+                }`}
+              >
+                Sou administrador
+              </button>
+            </div>
+
+            <FormField label="E-mail" error={errors.email?.message}>
+              <Input type="email" autoComplete="email" {...register('email')} />
+            </FormField>
+
+            {error && (
+              <p role="alert" className="rounded-lg bg-danger/10 p-3 text-sm text-danger">
+                {error}
+              </p>
+            )}
+
+            <Button type="submit" loading={isSubmitting} className="w-full">
+              Enviar instruções
+            </Button>
+
+            <Link
+              href="/login"
+              className="text-center text-sm text-primary-on-light underline-offset-4 hover:underline"
+            >
+              Voltar para o login
+            </Link>
+          </form>
+        )}
+      </div>
+    </main>
+  );
+}