kybernus 3.0.1 → 3.2.0

package/templates/ecommerce/apps/web/src/modules/auth/RegisterForm.tsx

@@ -0,0 +1,109 @@
+import { useState, FormEvent } from 'react';
+
+export interface RegisterFormData {
+  name: string;
+  email: string;
+  password: string;
+}
+
+export interface RegisterFormProps {
+  onSubmit: (data: RegisterFormData) => void;
+  isLoading?: boolean;
+  errorMessage?: string;
+}
+
+interface FormErrors {
+  name?: string;
+  email?: string;
+  password?: string;
+}
+
+function validateEmail(email: string): boolean {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+
+export function RegisterForm({ onSubmit, isLoading = false, errorMessage }: RegisterFormProps) {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [errors, setErrors] = useState<FormErrors>({});
+
+  function validate(): FormErrors {
+    const errs: FormErrors = {};
+    if (!name.trim()) errs.name = 'Nome é obrigatório';
+    if (!validateEmail(email)) errs.email = 'Email inválido';
+    if (password.length < 8) errs.password = 'Mínimo de 8 caracteres';
+    return errs;
+  }
+
+  function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const errs = validate();
+    if (Object.keys(errs).length > 0) {
+      setErrors(errs);
+      return;
+    }
+    setErrors({});
+    onSubmit({ name, email, password });
+  }
+
+  const fieldStyle: React.CSSProperties = { marginBottom: '1.1rem' };
+  const errorStyle: React.CSSProperties = { display: 'block', marginTop: '0.3rem', fontSize: '0.8rem', color: '#ef4444' };
+
+  return (
+    <form onSubmit={handleSubmit} noValidate>
+      <div style={fieldStyle}>
+        <label htmlFor="register-name">Nome</label>
+        <input
+          id="register-name"
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          autoComplete="name"
+          placeholder="Seu nome completo"
+          aria-invalid={!!errors.name}
+        />
+        {errors.name && <span style={errorStyle}>{errors.name}</span>}
+      </div>
+
+      <div style={fieldStyle}>
+        <label htmlFor="register-email">Email</label>
+        <input
+          id="register-email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          autoComplete="email"
+          placeholder="seu@email.com"
+          aria-invalid={!!errors.email}
+        />
+        {errors.email && <span style={errorStyle}>{errors.email}</span>}
+      </div>
+
+      <div style={{ ...fieldStyle, marginBottom: '1.5rem' }}>
+        <label htmlFor="register-password">Senha</label>
+        <input
+          id="register-password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          autoComplete="new-password"
+          placeholder="Mínimo 8 caracteres"
+          aria-invalid={!!errors.password}
+        />
+        {errors.password && <span style={errorStyle}>{errors.password}</span>}
+      </div>
+
+      {errorMessage && (
+        <p role="alert" style={{ marginBottom: '1rem', padding: '0.625rem 0.75rem', background: '#fef2f2', color: '#dc2626', borderRadius: '0.5rem', fontSize: '0.875rem' }}>
+          {errorMessage}
+        </p>
+      )}
+
+      <button type="submit" disabled={isLoading}>
+        {isLoading && <span data-testid="spinner" aria-hidden="true" />}
+        Criar conta
+      </button>
+    </form>
+  );
+}

package/templates/ecommerce/apps/web/src/modules/auth/__tests__/ForgotPasswordPage.test.tsx

@@ -0,0 +1,42 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { ForgotPasswordPage } from '../pages/ForgotPasswordPage';
+
+const mockFetch = jest.fn();
+beforeAll(() => { global.fetch = mockFetch; });
+beforeEach(() => mockFetch.mockClear());
+
+describe('ForgotPasswordPage', () => {
+  it('exibe campo de email', () => {
+    render(<MemoryRouter><ForgotPasswordPage /></MemoryRouter>);
+    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+  });
+
+  it('chama POST /api/auth/forgot-password ao submeter', async () => {
+    mockFetch.mockResolvedValue({ ok: true, json: async () => ({}) });
+    render(<MemoryRouter><ForgotPasswordPage /></MemoryRouter>);
+
+    await userEvent.type(screen.getByLabelText(/email/i), 'user@example.com');
+    await userEvent.click(screen.getByRole('button', { name: /enviar|recuperar/i }));
+
+    await waitFor(() => {
+      expect(mockFetch).toHaveBeenCalledWith(
+        '/api/auth/forgot-password',
+        expect.objectContaining({ method: 'POST' }),
+      );
+    });
+  });
+
+  it('exibe mensagem de sucesso após submissão', async () => {
+    mockFetch.mockResolvedValue({ ok: true, json: async () => ({}) });
+    render(<MemoryRouter><ForgotPasswordPage /></MemoryRouter>);
+
+    await userEvent.type(screen.getByLabelText(/email/i), 'user@example.com');
+    await userEvent.click(screen.getByRole('button', { name: /enviar|recuperar/i }));
+
+    await waitFor(() =>
+      expect(screen.getByText(/verifique|enviamos|email/i)).toBeInTheDocument(),
+    );
+  });
+});

package/templates/ecommerce/apps/web/src/modules/auth/__tests__/LoginForm.test.tsx

@@ -0,0 +1,76 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LoginForm } from '../LoginForm';
+
+describe('LoginForm', () => {
+  const mockOnSubmit = jest.fn();
+
+  beforeEach(() => {
+    mockOnSubmit.mockClear();
+  });
+
+  it('deve renderizar campos email e senha', () => {
+    render(<LoginForm onSubmit={mockOnSubmit} />);
+
+    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/senha/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /entrar/i })).toBeInTheDocument();
+  });
+
+  it('deve exibir erro de validação se email for inválido ao submeter', async () => {
+    const user = userEvent.setup();
+    render(<LoginForm onSubmit={mockOnSubmit} />);
+
+    await user.type(screen.getByLabelText(/email/i), 'email-invalido');
+    await user.type(screen.getByLabelText(/senha/i), 'senha1234');
+    await user.click(screen.getByRole('button', { name: /entrar/i }));
+
+    expect(await screen.findByText(/email inválido/i)).toBeInTheDocument();
+    expect(mockOnSubmit).not.toHaveBeenCalled();
+  });
+
+  it('deve exibir erro se senha for vazia ao submeter', async () => {
+    const user = userEvent.setup();
+    render(<LoginForm onSubmit={mockOnSubmit} />);
+
+    await user.type(screen.getByLabelText(/email/i), 'joao@email.com');
+    await user.click(screen.getByRole('button', { name: /entrar/i }));
+
+    expect(await screen.findByText(/senha.*obrigatória/i)).toBeInTheDocument();
+    expect(mockOnSubmit).not.toHaveBeenCalled();
+  });
+
+  it('deve chamar onSubmit com email e senha ao submeter formulário válido', async () => {
+    const user = userEvent.setup();
+    render(<LoginForm onSubmit={mockOnSubmit} />);
+
+    await user.type(screen.getByLabelText(/email/i), 'joao@email.com');
+    await user.type(screen.getByLabelText(/senha/i), 'senha1234');
+    await user.click(screen.getByRole('button', { name: /entrar/i }));
+
+    expect(mockOnSubmit).toHaveBeenCalledWith({
+      email: 'joao@email.com',
+      password: 'senha1234',
+    });
+  });
+
+  it('deve mostrar spinner e desabilitar botão durante submissão (isLoading=true)', () => {
+    render(<LoginForm onSubmit={mockOnSubmit} isLoading />);
+
+    const button = screen.getByRole('button', { name: /entrar/i });
+    expect(button).toBeDisabled();
+    expect(screen.getByTestId('spinner')).toBeInTheDocument();
+  });
+
+  it('deve exibir mensagem de erro da API quando errorMessage é passado', () => {
+    render(<LoginForm onSubmit={mockOnSubmit} errorMessage="Credenciais inválidas" />);
+
+    expect(screen.getByText('Credenciais inválidas')).toBeInTheDocument();
+  });
+
+  it('deve ter campo senha do tipo password (não visível)', () => {
+    render(<LoginForm onSubmit={mockOnSubmit} />);
+
+    expect(screen.getByLabelText(/senha/i)).toHaveAttribute('type', 'password');
+  });
+});

package/templates/ecommerce/apps/web/src/modules/auth/__tests__/RegisterForm.test.tsx

@@ -0,0 +1,62 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { RegisterForm } from '../RegisterForm';
+
+describe('RegisterForm', () => {
+  const mockOnSubmit = jest.fn();
+
+  beforeEach(() => {
+    mockOnSubmit.mockClear();
+  });
+
+  it('deve renderizar campos nome, email e senha', () => {
+    render(<RegisterForm onSubmit={mockOnSubmit} />);
+
+    expect(screen.getByLabelText(/nome/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/^senha$/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /criar conta/i })).toBeInTheDocument();
+  });
+
+  it('deve exibir erro se senha tiver menos de 8 caracteres', async () => {
+    const user = userEvent.setup();
+    render(<RegisterForm onSubmit={mockOnSubmit} />);
+
+    await user.type(screen.getByLabelText(/nome/i), 'João');
+    await user.type(screen.getByLabelText(/email/i), 'joao@email.com');
+    await user.type(screen.getByLabelText(/^senha$/i), '123');
+    await user.click(screen.getByRole('button', { name: /criar conta/i }));
+
+    expect(await screen.findByText(/mínimo.*8 caracteres/i)).toBeInTheDocument();
+    expect(mockOnSubmit).not.toHaveBeenCalled();
+  });
+
+  it('deve chamar onSubmit com name, email e password ao submeter válido', async () => {
+    const user = userEvent.setup();
+    render(<RegisterForm onSubmit={mockOnSubmit} />);
+
+    await user.type(screen.getByLabelText(/nome/i), 'João Silva');
+    await user.type(screen.getByLabelText(/email/i), 'joao@email.com');
+    await user.type(screen.getByLabelText(/^senha$/i), 'senha1234');
+    await user.click(screen.getByRole('button', { name: /criar conta/i }));
+
+    expect(mockOnSubmit).toHaveBeenCalledWith({
+      name: 'João Silva',
+      email: 'joao@email.com',
+      password: 'senha1234',
+    });
+  });
+
+  it('deve exibir mensagem de erro da API quando errorMessage é passado', () => {
+    render(<RegisterForm onSubmit={mockOnSubmit} errorMessage="Email já cadastrado" />);
+
+    expect(screen.getByText('Email já cadastrado')).toBeInTheDocument();
+  });
+
+  it('deve mostrar spinner e desabilitar botão durante submissão', () => {
+    render(<RegisterForm onSubmit={mockOnSubmit} isLoading />);
+
+    expect(screen.getByRole('button', { name: /criar conta/i })).toBeDisabled();
+    expect(screen.getByTestId('spinner')).toBeInTheDocument();
+  });
+});

package/templates/ecommerce/apps/web/src/modules/auth/__tests__/ResetPasswordPage.test.tsx

@@ -0,0 +1,66 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { ResetPasswordPage } from '../pages/ResetPasswordPage';
+
+const mockFetch = jest.fn();
+const mockNavigate = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual<object>('react-router-dom'),
+  useNavigate: () => mockNavigate,
+  useSearchParams: () => [new URLSearchParams('token=valid-reset-token-abc'), jest.fn()],
+}));
+
+beforeAll(() => { global.fetch = mockFetch; });
+beforeEach(() => { mockFetch.mockClear(); mockNavigate.mockClear(); });
+
+describe('ResetPasswordPage', () => {
+  it('exibe campos nova senha e confirmação', () => {
+    render(<MemoryRouter><ResetPasswordPage /></MemoryRouter>);
+    expect(screen.getByLabelText(/nova senha/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/confirmar|confirmação/i)).toBeInTheDocument();
+  });
+
+  it('exibe erro se senhas não coincidirem', async () => {
+    render(<MemoryRouter><ResetPasswordPage /></MemoryRouter>);
+
+    await userEvent.type(screen.getByLabelText(/nova senha/i), 'senha1234');
+    await userEvent.type(screen.getByLabelText(/confirmar|confirmação/i), 'outrasenha');
+    await userEvent.click(screen.getByRole('button', { name: /redefinir|salvar/i }));
+
+    await waitFor(() =>
+      expect(screen.getByText(/senhas.*não|coincidem/i)).toBeInTheDocument(),
+    );
+  });
+
+  it('chama POST /api/auth/reset-password com token da URL', async () => {
+    mockFetch.mockResolvedValue({ ok: true, json: async () => ({}) });
+    render(<MemoryRouter><ResetPasswordPage /></MemoryRouter>);
+
+    await userEvent.type(screen.getByLabelText(/nova senha/i), 'novaSenha99');
+    await userEvent.type(screen.getByLabelText(/confirmar|confirmação/i), 'novaSenha99');
+    await userEvent.click(screen.getByRole('button', { name: /redefinir|salvar/i }));
+
+    await waitFor(() => {
+      expect(mockFetch).toHaveBeenCalledWith(
+        '/api/auth/reset-password',
+        expect.objectContaining({
+          method: 'POST',
+          body: expect.stringContaining('valid-reset-token-abc'),
+        }),
+      );
+    });
+  });
+
+  it('redireciona para /login após reset bem-sucedido', async () => {
+    mockFetch.mockResolvedValue({ ok: true, json: async () => ({}) });
+    render(<MemoryRouter><ResetPasswordPage /></MemoryRouter>);
+
+    await userEvent.type(screen.getByLabelText(/nova senha/i), 'novaSenha99');
+    await userEvent.type(screen.getByLabelText(/confirmar|confirmação/i), 'novaSenha99');
+    await userEvent.click(screen.getByRole('button', { name: /redefinir|salvar/i }));
+
+    await waitFor(() => expect(mockNavigate).toHaveBeenCalledWith('/login', expect.anything()));
+  });
+});

package/templates/ecommerce/apps/web/src/modules/auth/pages/ForgotPasswordPage.tsx

@@ -0,0 +1,100 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { usePageTitle } from '../../../shared/hooks/usePageTitle';
+
+export function ForgotPasswordPage() {
+  usePageTitle('Esqueci a Senha');
+  const [email, setEmail] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/auth/forgot-password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email }),
+      });
+      if (!res.ok) {
+        const body = (await res.json()) as { message?: string };
+        throw new Error(body.message ?? 'Erro ao processar solicitação');
+      }
+      setSuccess(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Erro ao processar solicitação');
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <div style={{ maxWidth: 420, margin: '4rem auto', padding: '2rem', border: '1px solid #e5e7eb', borderRadius: '8px' }}>
+      <h1 style={{ marginBottom: '0.5rem', fontFamily: 'var(--font-family)' }}>Recuperar senha</h1>
+
+      {success ? (
+        <div>
+          <p style={{ color: '#10b981', lineHeight: 1.6 }}>
+            Verifique seu email — enviamos um link para redefinir sua senha.
+          </p>
+          <Link
+            to="/login"
+            style={{ display: 'inline-block', marginTop: '1rem', color: 'var(--color-primary)', textDecoration: 'none' }}
+          >
+            Voltar ao login
+          </Link>
+        </div>
+      ) : (
+        <>
+          <p style={{ color: '#6b7280', fontSize: '0.875rem', marginBottom: '1.5rem' }}>
+            Informe seu email e enviaremos um link para redefinir sua senha.
+          </p>
+
+          <form onSubmit={handleSubmit} noValidate>
+            <div style={{ marginBottom: '1rem' }}>
+              <label
+                htmlFor="forgot-email"
+                style={{ display: 'block', fontWeight: 600, marginBottom: '0.4rem', fontSize: '0.875rem' }}
+              >
+                Email
+              </label>
+              <input
+                id="forgot-email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                placeholder="seu@email.com"
+                style={{ width: '100%', padding: '0.55rem 0.75rem', border: '1px solid #d1d5db', borderRadius: 6, fontSize: '0.9rem', boxSizing: 'border-box' }}
+              />
+            </div>
+
+            {error && (
+              <p role="alert" style={{ color: '#ef4444', fontSize: '0.85rem', marginBottom: '0.75rem' }}>
+                {error}
+              </p>
+            )}
+
+            <button
+              type="submit"
+              disabled={isLoading}
+              style={{ width: '100%', padding: '0.65rem', background: 'var(--color-primary)', color: '#fff', border: 'none', borderRadius: 6, fontWeight: 600, fontSize: '0.95rem', cursor: 'pointer' }}
+            >
+              {isLoading ? 'Enviando...' : 'Enviar link de recuperação'}
+            </button>
+          </form>
+
+          <p style={{ marginTop: '1.25rem', textAlign: 'center', fontSize: '0.875rem', color: '#6b7280' }}>
+            Lembrou a senha?{' '}
+            <Link to="/login" style={{ color: 'var(--color-primary)' }}>
+              Entrar
+            </Link>
+          </p>
+        </>
+      )}
+    </div>
+  );
+}

package/templates/ecommerce/apps/web/src/modules/auth/pages/LoginPage.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { LoginForm } from '../LoginForm';
+import { useAuthStore } from '../useAuthStore';
+import { usePageTitle } from '../../../shared/hooks/usePageTitle';
+
+export function LoginPage() {
+  usePageTitle('Entrar');
+  const login = useAuthStore((s) => s.login);
+  const navigate = useNavigate();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  async function handleSubmit(data: { email: string; password: string }) {
+    setIsLoading(true);
+    setError('');
+    try {
+      await login(data.email, data.password);
+      navigate('/');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Erro ao fazer login');
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <div style={{ maxWidth: 420, margin: '4rem auto', padding: '2rem', border: '1px solid #e5e7eb', borderRadius: '8px' }}>
+      <h1 style={{ marginBottom: '1.5rem', fontFamily: 'var(--font-family)' }}>Entrar</h1>
+      <LoginForm onSubmit={handleSubmit} isLoading={isLoading} errorMessage={error} />
+      <p style={{ marginTop: '1.25rem', textAlign: 'center', color: 'var(--color-text-muted)' }}>
+        Não tem conta?{' '}
+        <Link to="/register" style={{ color: 'var(--color-primary)' }}>
+          Cadastre-se
+        </Link>
+      </p>
+    </div>
+  );
+}

package/templates/ecommerce/apps/web/src/modules/auth/pages/RegisterPage.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { RegisterForm } from '../RegisterForm';
+import { useAuthStore } from '../useAuthStore';
+import { usePageTitle } from '../../../shared/hooks/usePageTitle';
+
+export function RegisterPage() {
+  usePageTitle('Criar Conta');
+  const register = useAuthStore((s) => s.register);
+  const navigate = useNavigate();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  async function handleSubmit(data: { name: string; email: string; password: string }) {
+    setIsLoading(true);
+    setError('');
+    try {
+      await register(data.name, data.email, data.password);
+      navigate('/');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Erro ao cadastrar');
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <div style={{ maxWidth: 420, margin: '4rem auto', padding: '2rem', border: '1px solid #e5e7eb', borderRadius: '8px' }}>
+      <h1 style={{ marginBottom: '1.5rem', fontFamily: 'var(--font-family)' }}>Criar conta</h1>
+      <RegisterForm onSubmit={handleSubmit} isLoading={isLoading} errorMessage={error} />
+      <p style={{ marginTop: '1.25rem', textAlign: 'center', color: 'var(--color-text-muted)' }}>
+        Já tem conta?{' '}
+        <Link to="/login" style={{ color: 'var(--color-primary)' }}>
+          Entrar
+        </Link>
+      </p>
+    </div>
+  );
+}

package/templates/ecommerce/apps/web/src/modules/auth/pages/ResetPasswordPage.tsx

@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import { useNavigate, useSearchParams, Link } from 'react-router-dom';
+import { usePageTitle } from '../../../shared/hooks/usePageTitle';
+
+export function ResetPasswordPage() {
+  usePageTitle('Nova Senha');
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const token = searchParams.get('token') ?? '';
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (password !== confirm) {
+      setError('As senhas não coincidem');
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/auth/reset-password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token, password }),
+      });
+      if (!res.ok) {
+        const body = (await res.json()) as { message?: string };
+        throw new Error(body.message ?? 'Link inválido ou expirado');
+      }
+      navigate('/login', { replace: true });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Erro ao redefinir senha');
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <div style={{ maxWidth: 420, margin: '4rem auto', padding: '2rem', border: '1px solid #e5e7eb', borderRadius: '8px' }}>
+      <h1 style={{ marginBottom: '0.5rem', fontFamily: 'var(--font-family)' }}>Redefinir senha</h1>
+      <p style={{ color: '#6b7280', fontSize: '0.875rem', marginBottom: '1.5rem' }}>
+        Escolha uma nova senha segura para sua conta.
+      </p>
+
+      <form onSubmit={handleSubmit} noValidate>
+        <div style={{ marginBottom: '1rem' }}>
+          <label
+            htmlFor="new-password"
+            style={{ display: 'block', fontWeight: 600, marginBottom: '0.4rem', fontSize: '0.875rem' }}
+          >
+            Nova senha
+          </label>
+          <input
+            id="new-password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            minLength={8}
+            placeholder="Mínimo 8 caracteres"
+            style={{ width: '100%', padding: '0.55rem 0.75rem', border: '1px solid #d1d5db', borderRadius: 6, fontSize: '0.9rem', boxSizing: 'border-box' }}
+          />
+        </div>
+
+        <div style={{ marginBottom: '1.25rem' }}>
+          <label
+            htmlFor="confirm-password"
+            style={{ display: 'block', fontWeight: 600, marginBottom: '0.4rem', fontSize: '0.875rem' }}
+          >
+            Confirmar senha
+          </label>
+          <input
+            id="confirm-password"
+            type="password"
+            value={confirm}
+            onChange={(e) => setConfirm(e.target.value)}
+            required
+            placeholder="Repita a nova senha"
+            style={{ width: '100%', padding: '0.55rem 0.75rem', border: '1px solid #d1d5db', borderRadius: 6, fontSize: '0.9rem', boxSizing: 'border-box' }}
+          />
+        </div>
+
+        {error && (
+          <p role="alert" style={{ color: '#ef4444', fontSize: '0.85rem', marginBottom: '0.75rem' }}>
+            {error}
+          </p>
+        )}
+
+        <button
+          type="submit"
+          disabled={isLoading}
+          style={{ width: '100%', padding: '0.65rem', background: 'var(--color-primary)', color: '#fff', border: 'none', borderRadius: 6, fontWeight: 600, fontSize: '0.95rem', cursor: 'pointer' }}
+        >
+          {isLoading ? 'Salvando...' : 'Redefinir senha'}
+        </button>
+      </form>
+
+      <p style={{ marginTop: '1.25rem', textAlign: 'center', fontSize: '0.875rem', color: '#6b7280' }}>
+        <Link to="/login" style={{ color: 'var(--color-primary)' }}>
+          Voltar ao login
+        </Link>
+      </p>
+    </div>
+  );
+}