@qwickapps/server 1.6.0 → 1.6.1

package/ui/src/components/auth/__tests__/PasswordResetConfirmPage.test.tsx

@@ -0,0 +1,183 @@
+/**
+ * PasswordResetConfirmPage Tests
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { PasswordResetConfirmPage } from '../PasswordResetConfirmPage';
+import { vi } from 'vitest';
+
+// Mock the useAuth hook
+const mockConfirmPasswordReset = vi.fn();
+vi.mock('@qwickapps/auth-client', async () => {
+  const actual = await vi.importActual('@qwickapps/auth-client');
+  return {
+    ...actual,
+    useAuth: () => ({
+      confirmPasswordReset: mockConfirmPasswordReset,
+    }),
+  };
+});
+
+// Mock useNavigate
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+const renderPasswordResetConfirmPage = (props = {}, token = 'reset-token-123') => {
+  return render(
+    <BrowserRouter initialEntries={[`/reset-password-confirm/${token}`]}>
+      <Routes>
+        <Route
+          path="/reset-password-confirm/:token"
+          element={<PasswordResetConfirmPage {...props} />}
+        />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+describe('PasswordResetConfirmPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders password fields', async () => {
+    renderPasswordResetConfirmPage();
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/^new password$/i)).toBeInTheDocument();
+      expect(screen.getByLabelText(/confirm password/i)).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /reset password/i })).toBeInTheDocument();
+    });
+  });
+
+  it('validates password confirmation match', async () => {
+    renderPasswordResetConfirmPage();
+
+    await waitFor(() => screen.getByLabelText(/^new password$/i));
+
+    const passwordInput = screen.getByLabelText(/^new password$/i);
+    const confirmPasswordInput = screen.getByLabelText(/confirm password/i);
+    const submitButton = screen.getByRole('button', { name: /reset password/i });
+
+    fireEvent.change(passwordInput, { target: { value: 'newpassword123' } });
+    fireEvent.change(confirmPasswordInput, { target: { value: 'different123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/passwords do not match/i)).toBeInTheDocument();
+    });
+
+    expect(mockConfirmPasswordReset).not.toHaveBeenCalled();
+  });
+
+  it('calls confirmPasswordReset with token and new password', async () => {
+    mockConfirmPasswordReset.mockResolvedValue({});
+
+    renderPasswordResetConfirmPage({}, 'test-reset-token');
+
+    await waitFor(() => screen.getByLabelText(/^new password$/i));
+
+    const passwordInput = screen.getByLabelText(/^new password$/i);
+    const confirmPasswordInput = screen.getByLabelText(/confirm password/i);
+    const submitButton = screen.getByRole('button', { name: /reset password/i });
+
+    fireEvent.change(passwordInput, { target: { value: 'newpassword123' } });
+    fireEvent.change(confirmPasswordInput, { target: { value: 'newpassword123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(mockConfirmPasswordReset).toHaveBeenCalledWith('test-reset-token', 'newpassword123');
+    });
+  });
+
+  it('navigates to redirectTo on successful reset', async () => {
+    mockConfirmPasswordReset.mockResolvedValue({});
+
+    renderPasswordResetConfirmPage({ redirectTo: '/login' });
+
+    await waitFor(() => screen.getByLabelText(/^new password$/i));
+
+    const passwordInput = screen.getByLabelText(/^new password$/i);
+    const confirmPasswordInput = screen.getByLabelText(/confirm password/i);
+    const submitButton = screen.getByRole('button', { name: /reset password/i });
+
+    fireEvent.change(passwordInput, { target: { value: 'newpassword123' } });
+    fireEvent.change(confirmPasswordInput, { target: { value: 'newpassword123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/login');
+    });
+  });
+
+  it('calls onSuccess callback', async () => {
+    const onSuccess = vi.fn();
+    mockConfirmPasswordReset.mockResolvedValue({});
+
+    renderPasswordResetConfirmPage({ onSuccess });
+
+    await waitFor(() => screen.getByLabelText(/^new password$/i));
+
+    const passwordInput = screen.getByLabelText(/^new password$/i);
+    const confirmPasswordInput = screen.getByLabelText(/confirm password/i);
+    const submitButton = screen.getByRole('button', { name: /reset password/i });
+
+    fireEvent.change(passwordInput, { target: { value: 'newpassword123' } });
+    fireEvent.change(confirmPasswordInput, { target: { value: 'newpassword123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(onSuccess).toHaveBeenCalled();
+    });
+  });
+
+  it('displays error message on invalid or expired token', async () => {
+    mockConfirmPasswordReset.mockRejectedValue(new Error('Invalid or expired reset token'));
+
+    renderPasswordResetConfirmPage();
+
+    await waitFor(() => screen.getByLabelText(/^new password$/i));
+
+    const passwordInput = screen.getByLabelText(/^new password$/i);
+    const confirmPasswordInput = screen.getByLabelText(/confirm password/i);
+    const submitButton = screen.getByRole('button', { name: /reset password/i });
+
+    fireEvent.change(passwordInput, { target: { value: 'newpassword123' } });
+    fireEvent.change(confirmPasswordInput, { target: { value: 'newpassword123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/invalid or expired reset token/i)).toBeInTheDocument();
+    });
+  });
+
+  it('disables form during submission', async () => {
+    mockConfirmPasswordReset.mockImplementation(() => new Promise(() => {}));
+
+    renderPasswordResetConfirmPage();
+
+    await waitFor(() => screen.getByLabelText(/^new password$/i));
+
+    const passwordInput = screen.getByLabelText(/^new password$/i) as HTMLInputElement;
+    const confirmPasswordInput = screen.getByLabelText(/confirm password/i) as HTMLInputElement;
+    const submitButton = screen.getByRole('button', { name: /reset password/i });
+
+    fireEvent.change(passwordInput, { target: { value: 'newpassword123' } });
+    fireEvent.change(confirmPasswordInput, { target: { value: 'newpassword123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(passwordInput).toBeDisabled();
+      expect(confirmPasswordInput).toBeDisabled();
+    });
+  });
+});

package/ui/src/components/auth/__tests__/PasswordResetPage.test.tsx

@@ -0,0 +1,174 @@
+/**
+ * PasswordResetPage Tests
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { PasswordResetPage } from '../PasswordResetPage';
+import { vi } from 'vitest';
+
+// Mock the useAuth hook
+const mockResetPassword = vi.fn();
+vi.mock('@qwickapps/auth-client', async () => {
+  const actual = await vi.importActual('@qwickapps/auth-client');
+  return {
+    ...actual,
+    useAuth: () => ({
+      resetPassword: mockResetPassword,
+    }),
+  };
+});
+
+const renderPasswordResetPage = (props = {}) => {
+  return render(
+    <BrowserRouter>
+      <PasswordResetPage {...props} />
+    </BrowserRouter>
+  );
+};
+
+describe('PasswordResetPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders email input and submit button', () => {
+    renderPasswordResetPage();
+
+    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /send reset link/i })).toBeInTheDocument();
+  });
+
+  it('shows back to login link', () => {
+    renderPasswordResetPage();
+
+    expect(screen.getByRole('link', { name: /back to login/i })).toBeInTheDocument();
+  });
+
+  it('validates email is required', async () => {
+    renderPasswordResetPage();
+
+    const submitButton = screen.getByRole('button', { name: /send reset link/i });
+    fireEvent.click(submitButton);
+
+    // Form should not submit without email
+    expect(mockResetPassword).not.toHaveBeenCalled();
+  });
+
+  it('calls resetPassword with email on submit', async () => {
+    mockResetPassword.mockResolvedValue({});
+
+    renderPasswordResetPage();
+
+    const emailInput = screen.getByLabelText(/email/i);
+    const submitButton = screen.getByRole('button', { name: /send reset link/i });
+
+    fireEvent.change(emailInput, { target: { value: 'user@example.com' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(mockResetPassword).toHaveBeenCalledWith('user@example.com');
+    });
+  });
+
+  it('shows success message after sending reset email', async () => {
+    mockResetPassword.mockResolvedValue({});
+
+    renderPasswordResetPage();
+
+    const emailInput = screen.getByLabelText(/email/i);
+    const submitButton = screen.getByRole('button', { name: /send reset link/i });
+
+    fireEvent.change(emailInput, { target: { value: 'user@example.com' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/reset link sent/i)).toBeInTheDocument();
+      expect(screen.getByText(/user@example\.com/i)).toBeInTheDocument();
+    });
+  });
+
+  it('hides form after successful submission', async () => {
+    mockResetPassword.mockResolvedValue({});
+
+    renderPasswordResetPage();
+
+    const emailInput = screen.getByLabelText(/email/i);
+    const submitButton = screen.getByRole('button', { name: /send reset link/i });
+
+    fireEvent.change(emailInput, { target: { value: 'user@example.com' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.queryByLabelText(/email/i)).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: /send reset link/i })).not.toBeInTheDocument();
+    });
+  });
+
+  it('calls onSuccess callback after sending email', async () => {
+    const onSuccess = vi.fn();
+    mockResetPassword.mockResolvedValue({});
+
+    renderPasswordResetPage({ onSuccess });
+
+    const emailInput = screen.getByLabelText(/email/i);
+    const submitButton = screen.getByRole('button', { name: /send reset link/i });
+
+    fireEvent.change(emailInput, { target: { value: 'user@example.com' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(onSuccess).toHaveBeenCalledWith({ email: 'user@example.com' });
+    });
+  });
+
+  it('displays error message on API failure', async () => {
+    mockResetPassword.mockRejectedValue(new Error('Email service unavailable'));
+
+    renderPasswordResetPage();
+
+    const emailInput = screen.getByLabelText(/email/i);
+    const submitButton = screen.getByRole('button', { name: /send reset link/i });
+
+    fireEvent.change(emailInput, { target: { value: 'user@example.com' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/email service unavailable/i)).toBeInTheDocument();
+    });
+  });
+
+  it('disables form during submission', async () => {
+    mockResetPassword.mockImplementation(() => new Promise(() => {}));
+
+    renderPasswordResetPage();
+
+    const emailInput = screen.getByLabelText(/email/i) as HTMLInputElement;
+    const submitButton = screen.getByRole('button', { name: /send reset link/i });
+
+    fireEvent.change(emailInput, { target: { value: 'user@example.com' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(emailInput).toBeDisabled();
+    });
+  });
+
+  it('shows loading state on submit button', async () => {
+    mockResetPassword.mockImplementation(() => new Promise(() => {}));
+
+    renderPasswordResetPage();
+
+    const emailInput = screen.getByLabelText(/email/i);
+    const submitButton = screen.getByRole('button', { name: /send reset link/i });
+
+    fireEvent.change(emailInput, { target: { value: 'user@example.com' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(submitButton).toHaveAttribute('aria-busy', 'true');
+    });
+  });
+});

package/ui/src/components/auth/__tests__/SignupPage.test.tsx

@@ -0,0 +1,210 @@
+/**
+ * SignupPage Tests
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { SignupPage } from '../SignupPage';
+import { vi } from 'vitest';
+
+// Mock the useAuth hook
+const mockRegister = vi.fn();
+vi.mock('@qwickapps/auth-client', async () => {
+  const actual = await vi.importActual('@qwickapps/auth-client');
+  return {
+    ...actual,
+    useAuth: () => ({
+      register: mockRegister,
+      user: null,
+      loading: false,
+    }),
+  };
+});
+
+// Mock useNavigate
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+const renderSignupPage = (props = {}) => {
+  return render(
+    <BrowserRouter>
+      <SignupPage {...props} />
+    </BrowserRouter>
+  );
+};
+
+describe('SignupPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders signup form with all required fields', () => {
+    renderSignupPage();
+
+    expect(screen.getByLabelText(/^name$/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/^password$/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/confirm password/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /sign up/i })).toBeInTheDocument();
+  });
+
+  it('shows login link when showLoginLink is true', () => {
+    renderSignupPage({ showLoginLink: true });
+
+    expect(screen.getByText(/already have an account/i)).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /sign in/i })).toBeInTheDocument();
+  });
+
+  it('hides login link when showLoginLink is false', () => {
+    renderSignupPage({ showLoginLink: false });
+
+    expect(screen.queryByText(/already have an account/i)).not.toBeInTheDocument();
+  });
+
+  it('validates password confirmation match', async () => {
+    renderSignupPage();
+
+    const passwordInput = screen.getByLabelText(/^password$/i);
+    const confirmPasswordInput = screen.getByLabelText(/confirm password/i);
+    const submitButton = screen.getByRole('button', { name: /sign up/i });
+
+    fireEvent.change(passwordInput, { target: { value: 'password123' } });
+    fireEvent.change(confirmPasswordInput, { target: { value: 'different123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/passwords do not match/i)).toBeInTheDocument();
+    });
+
+    expect(mockRegister).not.toHaveBeenCalled();
+  });
+
+  it('calls register with user data on valid submission', async () => {
+    const mockUser = { id: 'user-123', email: 'test@example.com', name: 'Test User' };
+    mockRegister.mockResolvedValue(mockUser);
+
+    renderSignupPage();
+
+    const nameInput = screen.getByLabelText(/^name$/i);
+    const emailInput = screen.getByLabelText(/email/i);
+    const passwordInput = screen.getByLabelText(/^password$/i);
+    const confirmPasswordInput = screen.getByLabelText(/confirm password/i);
+    const submitButton = screen.getByRole('button', { name: /sign up/i });
+
+    fireEvent.change(nameInput, { target: { value: 'Test User' } });
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
+    fireEvent.change(passwordInput, { target: { value: 'password123' } });
+    fireEvent.change(confirmPasswordInput, { target: { value: 'password123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(mockRegister).toHaveBeenCalledWith({
+        name: 'Test User',
+        email: 'test@example.com',
+        password: 'password123',
+      });
+    });
+  });
+
+  it('navigates to redirectTo on successful signup', async () => {
+    const mockUser = { id: 'user-123', email: 'test@example.com' };
+    mockRegister.mockResolvedValue(mockUser);
+
+    renderSignupPage({ redirectTo: '/verify-email' });
+
+    const nameInput = screen.getByLabelText(/^name$/i);
+    const emailInput = screen.getByLabelText(/email/i);
+    const passwordInput = screen.getByLabelText(/^password$/i);
+    const confirmPasswordInput = screen.getByLabelText(/confirm password/i);
+    const submitButton = screen.getByRole('button', { name: /sign up/i });
+
+    fireEvent.change(nameInput, { target: { value: 'Test User' } });
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
+    fireEvent.change(passwordInput, { target: { value: 'password123' } });
+    fireEvent.change(confirmPasswordInput, { target: { value: 'password123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/verify-email');
+    });
+  });
+
+  it('calls onSuccess callback on successful signup', async () => {
+    const mockUser = { id: 'user-123', email: 'test@example.com' };
+    const onSuccess = vi.fn();
+    mockRegister.mockResolvedValue(mockUser);
+
+    renderSignupPage({ onSuccess });
+
+    const nameInput = screen.getByLabelText(/^name$/i);
+    const emailInput = screen.getByLabelText(/email/i);
+    const passwordInput = screen.getByLabelText(/^password$/i);
+    const confirmPasswordInput = screen.getByLabelText(/confirm password/i);
+    const submitButton = screen.getByRole('button', { name: /sign up/i });
+
+    fireEvent.change(nameInput, { target: { value: 'Test User' } });
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
+    fireEvent.change(passwordInput, { target: { value: 'password123' } });
+    fireEvent.change(confirmPasswordInput, { target: { value: 'password123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(onSuccess).toHaveBeenCalledWith(mockUser);
+    });
+  });
+
+  it('displays error message on signup failure', async () => {
+    mockRegister.mockRejectedValue(new Error('Email already exists'));
+
+    renderSignupPage();
+
+    const nameInput = screen.getByLabelText(/^name$/i);
+    const emailInput = screen.getByLabelText(/email/i);
+    const passwordInput = screen.getByLabelText(/^password$/i);
+    const confirmPasswordInput = screen.getByLabelText(/confirm password/i);
+    const submitButton = screen.getByRole('button', { name: /sign up/i });
+
+    fireEvent.change(nameInput, { target: { value: 'Test User' } });
+    fireEvent.change(emailInput, { target: { value: 'existing@example.com' } });
+    fireEvent.change(passwordInput, { target: { value: 'password123' } });
+    fireEvent.change(confirmPasswordInput, { target: { value: 'password123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/email already exists/i)).toBeInTheDocument();
+    });
+  });
+
+  it('disables form inputs while loading', async () => {
+    mockRegister.mockImplementation(() => new Promise(() => {}));
+
+    renderSignupPage();
+
+    const nameInput = screen.getByLabelText(/^name$/i) as HTMLInputElement;
+    const emailInput = screen.getByLabelText(/email/i) as HTMLInputElement;
+    const passwordInput = screen.getByLabelText(/^password$/i) as HTMLInputElement;
+    const confirmPasswordInput = screen.getByLabelText(/confirm password/i) as HTMLInputElement;
+    const submitButton = screen.getByRole('button', { name: /sign up/i });
+
+    fireEvent.change(nameInput, { target: { value: 'Test User' } });
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
+    fireEvent.change(passwordInput, { target: { value: 'password123' } });
+    fireEvent.change(confirmPasswordInput, { target: { value: 'password123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(nameInput).toBeDisabled();
+      expect(emailInput).toBeDisabled();
+      expect(passwordInput).toBeDisabled();
+      expect(confirmPasswordInput).toBeDisabled();
+    });
+  });
+});

package/ui/src/components/auth/__tests__/VerifyEmailPage.test.tsx

@@ -0,0 +1,53 @@
+/**
+ * VerifyEmailPage Tests
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { VerifyEmailPage } from '../VerifyEmailPage';
+
+const renderVerifyEmailPage = (props = {}) => {
+  return render(
+    <BrowserRouter>
+      <VerifyEmailPage {...props} />
+    </BrowserRouter>
+  );
+};
+
+describe('VerifyEmailPage', () => {
+  it('renders verification message', () => {
+    renderVerifyEmailPage();
+
+    expect(screen.getByText(/verify your email/i)).toBeInTheDocument();
+    expect(screen.getByText(/we've sent you a verification link/i)).toBeInTheDocument();
+  });
+
+  it('displays specific email when provided', () => {
+    renderVerifyEmailPage({ email: 'test@example.com' });
+
+    expect(screen.getByText(/test@example\.com/i)).toBeInTheDocument();
+  });
+
+  it('shows generic message when email not provided', () => {
+    renderVerifyEmailPage();
+
+    expect(screen.queryByText(/@/)).not.toBeInTheDocument();
+    expect(screen.getByText(/we've sent you a verification link/i)).toBeInTheDocument();
+  });
+
+  it('shows back to login link', () => {
+    renderVerifyEmailPage();
+
+    expect(screen.getByRole('link', { name: /back to login/i })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /back to login/i })).toHaveAttribute('href', '/login');
+  });
+
+  it('includes instructions to check email', () => {
+    renderVerifyEmailPage();
+
+    expect(screen.getByText(/check your email/i)).toBeInTheDocument();
+    expect(screen.getByText(/click the link to verify/i)).toBeInTheDocument();
+  });
+});

package/ui/src/components/auth/index.ts

@@ -0,0 +1,26 @@
+/**
+ * Authentication page components
+ *
+ * Reusable auth pages for frontend applications
+ */
+
+export { LoginPage } from './LoginPage';
+export type { LoginPageProps } from './LoginPage';
+
+export { SignupPage } from './SignupPage';
+export type { SignupPageProps } from './SignupPage';
+
+export { AcceptInvitationPage } from './AcceptInvitationPage';
+export type { AcceptInvitationPageProps } from './AcceptInvitationPage';
+
+export { PasswordResetPage } from './PasswordResetPage';
+export type { PasswordResetPageProps } from './PasswordResetPage';
+
+export { PasswordResetConfirmPage } from './PasswordResetConfirmPage';
+export type { PasswordResetConfirmPageProps } from './PasswordResetConfirmPage';
+
+export { VerifyEmailPage } from './VerifyEmailPage';
+export type { VerifyEmailPageProps } from './VerifyEmailPage';
+
+export { AuthLayout, AuthError } from './shared';
+export type { AuthLayoutProps, AuthErrorProps } from './shared';

package/ui/src/components/auth/shared/AuthError.tsx

@@ -0,0 +1,28 @@
+/**
+ * AuthError - Error message display component for auth pages
+ *
+ * Displays error messages with consistent styling
+ */
+
+export interface AuthErrorProps {
+  message: string;
+}
+
+export function AuthError({ message }: AuthErrorProps) {
+  return (
+    <div
+      style={{
+        padding: '0.75rem 1rem',
+        backgroundColor: '#fee',
+        border: '1px solid #fcc',
+        borderRadius: '4px',
+        color: '#c00',
+        fontSize: '0.875rem',
+        marginBottom: '1rem',
+      }}
+      role="alert"
+    >
+      {message}
+    </div>
+  );
+}