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>
This commit is contained in:
Claude Sonnet 5
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import Image from 'next/image';
|
||||
import { useAuth } from '@/lib/auth/auth-context';
|
||||
import { useTenantTheme, TenantThemeProvider } from '@/lib/theme/theme-provider';
|
||||
import { ApiError } from '@/lib/api/client';
|
||||
import { loginSchema, type LoginFormValues } from '@/lib/validators/auth';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { FormField } from '@/components/ui/form-field';
|
||||
import Link from 'next/link';
|
||||
|
||||
type LoginArea = 'tenant' | 'master';
|
||||
|
||||
function GenericInvalidCredentialsMessage(): string {
|
||||
return 'E-mail ou senha inválidos.';
|
||||
}
|
||||
|
||||
function LoginFormInner() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const { loginMaster, loginTenant } = useAuth();
|
||||
const { theme } = useTenantTheme();
|
||||
|
||||
// Estratégia de detecção de tipo de login (Etapa 13): o backend expõe
|
||||
// dois endpoints separados (`/auth/master/login` e `/auth/tenant/login`,
|
||||
// sem detecção automática por e-mail — ver observações da Etapa 13 no
|
||||
// controle de progresso). Escolhido um toggle explícito em vez de dois
|
||||
// formulários separados por ser a opção mais simples de implementar e
|
||||
// mais clara para o usuário; "tenant" é o padrão porque é o público
|
||||
// majoritário (clientes), master é uso interno raro.
|
||||
const [area, setArea] = React.useState<LoginArea>('tenant');
|
||||
const [submitError, setSubmitError] = React.useState<string | null>(null);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm<LoginFormValues>({ resolver: zodResolver(loginSchema) });
|
||||
|
||||
const onSubmit = async (values: LoginFormValues) => {
|
||||
setSubmitError(null);
|
||||
try {
|
||||
if (area === 'master') {
|
||||
await loginMaster(values.email, values.senha);
|
||||
} else {
|
||||
await loginTenant(values.email, values.senha);
|
||||
}
|
||||
|
||||
const redirectParam = searchParams.get('redirect');
|
||||
const fallback = area === 'master' ? '/master/dashboard' : '/app/dashboard';
|
||||
router.push(redirectParam && redirectParam.startsWith('/') ? redirectParam : fallback);
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError && err.statusCode === 401) {
|
||||
setSubmitError(GenericInvalidCredentialsMessage());
|
||||
} else if (err instanceof ApiError) {
|
||||
setSubmitError(err.message);
|
||||
} else {
|
||||
setSubmitError('Não foi possível conectar. Tente novamente.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<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 items-center gap-2 text-center">
|
||||
{theme?.logoUrl ? (
|
||||
<Image
|
||||
src={theme.logoUrl}
|
||||
alt={theme.nome}
|
||||
width={48}
|
||||
height={48}
|
||||
className="size-12 rounded-lg object-contain"
|
||||
/>
|
||||
) : null}
|
||||
<h1 className="text-xl font-semibold text-foreground">
|
||||
{theme?.nome ?? 'SeConectai Vendas'}
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground">Entre com seu e-mail e senha</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)} noValidate>
|
||||
<FormField label="E-mail" error={errors.email?.message}>
|
||||
<Input type="email" autoComplete="email" {...register('email')} />
|
||||
</FormField>
|
||||
<FormField label="Senha" error={errors.senha?.message}>
|
||||
<Input type="password" autoComplete="current-password" {...register('senha')} />
|
||||
</FormField>
|
||||
|
||||
{submitError && (
|
||||
<p role="alert" className="rounded-lg bg-danger/10 p-3 text-sm text-danger">
|
||||
{submitError}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<Button type="submit" loading={isSubmitting} className="w-full">
|
||||
Entrar
|
||||
</Button>
|
||||
|
||||
<Link
|
||||
href="/esqueci-senha"
|
||||
className="text-center text-sm text-primary-on-light underline-offset-4 hover:underline"
|
||||
>
|
||||
Esqueci minha senha
|
||||
</Link>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function LoginForm() {
|
||||
const searchParams = useSearchParams();
|
||||
const tenantId = searchParams.get('tenant');
|
||||
|
||||
return (
|
||||
<TenantThemeProvider tenantId={tenantId}>
|
||||
<LoginFormInner />
|
||||
</TenantThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { Suspense } from 'react';
|
||||
import { LoginForm } from './login-form';
|
||||
|
||||
export default function LoginPage() {
|
||||
return (
|
||||
<main className="flex min-h-screen items-center justify-center bg-neutral-50 p-4">
|
||||
<Suspense fallback={null}>
|
||||
<LoginForm />
|
||||
</Suspense>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { apiClient, ApiError } from '@/lib/api/client';
|
||||
import { resetPasswordSchema, type ResetPasswordFormValues } from '@/lib/validators/auth';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { FormField } from '@/components/ui/form-field';
|
||||
|
||||
export default function RedefinirSenhaPage() {
|
||||
const { token } = useParams<{ token: string }>();
|
||||
const [done, setDone] = React.useState(false);
|
||||
const [tokenInvalido, setTokenInvalido] = React.useState(false);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm<ResetPasswordFormValues>({ resolver: zodResolver(resetPasswordSchema) });
|
||||
|
||||
const onSubmit = async (values: ResetPasswordFormValues) => {
|
||||
setError(null);
|
||||
setTokenInvalido(false);
|
||||
try {
|
||||
await apiClient.post('/auth/password/reset', { token, nova_senha: values.novaSenha });
|
||||
setDone(true);
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError && err.statusCode === 401) {
|
||||
setTokenInvalido(true);
|
||||
} else if (err instanceof ApiError) {
|
||||
setError(err.message);
|
||||
} else {
|
||||
setError('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">Redefinir senha</h1>
|
||||
</div>
|
||||
|
||||
{done ? (
|
||||
<div className="flex flex-col gap-4">
|
||||
<p role="status" className="rounded-lg bg-success/10 p-3 text-sm text-success">
|
||||
Senha redefinida com sucesso.
|
||||
</p>
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-center text-sm text-primary-on-light underline-offset-4 hover:underline"
|
||||
>
|
||||
Ir para o login
|
||||
</Link>
|
||||
</div>
|
||||
) : tokenInvalido ? (
|
||||
<div className="flex flex-col gap-4">
|
||||
<p role="alert" className="rounded-lg bg-danger/10 p-3 text-sm text-danger">
|
||||
Este link de redefinição é inválido ou já expirou.
|
||||
</p>
|
||||
<Link
|
||||
href="/esqueci-senha"
|
||||
className="text-center text-sm text-primary-on-light underline-offset-4 hover:underline"
|
||||
>
|
||||
Solicitar um novo link
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)} noValidate>
|
||||
<FormField
|
||||
label="Nova senha"
|
||||
error={errors.novaSenha?.message}
|
||||
helpText="Mínimo de 10 caracteres."
|
||||
>
|
||||
<Input type="password" autoComplete="new-password" {...register('novaSenha')} />
|
||||
</FormField>
|
||||
<FormField label="Confirmar nova senha" error={errors.confirmarSenha?.message}>
|
||||
<Input type="password" autoComplete="new-password" {...register('confirmarSenha')} />
|
||||
</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">
|
||||
Redefinir senha
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user