@qwickapps/server 1.5.2 → 1.6.1

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

@@ -0,0 +1,95 @@
+/**
+ * PasswordResetPage - Password reset request form
+ *
+ * Allows users to request a password reset email
+ */
+
+import React, { useState } from 'react';
+import { useAuth } from '@qwickapps/auth-client';
+import { GridLayout, TextInputField, Button } from '@qwickapps/react-framework';
+import { AuthLayout, AuthError } from './shared';
+
+export interface PasswordResetPageProps {
+  /**
+   * Callback invoked on successful password reset request
+   */
+  onSuccess?: () => void;
+}
+
+export function PasswordResetPage({ onSuccess }: PasswordResetPageProps) {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+
+  const { resetPassword } = useAuth();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      const result = await resetPassword({ email });
+      if (result.error) {
+        setError(result.error.message);
+      } else {
+        setSuccess(true);
+        onSuccess?.();
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to send reset email');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (success) {
+    return (
+      <AuthLayout title="Check Your Email">
+        <div style={{ textAlign: 'center' }}>
+          <p style={{ marginBottom: '1.5rem', color: '#666' }}>
+            We've sent a password reset link to <strong>{email}</strong>
+          </p>
+          <a href="/login" style={{ color: '#0066cc', fontSize: '0.875rem' }}>
+            Back to login
+          </a>
+        </div>
+      </AuthLayout>
+    );
+  }
+
+  return (
+    <AuthLayout title="Reset Password">
+      <form onSubmit={handleSubmit}>
+        <GridLayout columns={1} spacing="md">
+          {error && <AuthError message={error} />}
+
+          <p style={{ marginBottom: '1rem', color: '#666', fontSize: '0.875rem' }}>
+            Enter your email address and we'll send you a link to reset your password.
+          </p>
+
+          <TextInputField
+            label="Email"
+            type="email"
+            value={email}
+            onChange={setEmail}
+            required
+            disabled={loading}
+            textFieldProps={{ autoComplete: 'email' }}
+          />
+
+          <Button type="submit" variant="primary" loading={loading} fullWidth>
+            Send Reset Link
+          </Button>
+
+          <div style={{ textAlign: 'center', marginTop: '1rem' }}>
+            <a href="/login" style={{ fontSize: '0.875rem', color: '#0066cc' }}>
+              Back to login
+            </a>
+          </div>
+        </GridLayout>
+      </form>
+    </AuthLayout>
+  );
+}

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

@@ -0,0 +1,140 @@
+/**
+ * SignupPage - User registration form component
+ *
+ * Provides name, email, password registration with validation
+ */
+
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '@qwickapps/auth-client';
+import { GridLayout, TextInputField, Button } from '@qwickapps/react-framework';
+import { AuthLayout, AuthError } from './shared';
+
+export interface SignupPageProps {
+  /**
+   * Callback invoked on successful registration
+   */
+  onSuccess?: (user: any) => void;
+
+  /**
+   * Path to redirect to after successful registration
+   * @default '/verify-email'
+   */
+  redirectTo?: string;
+
+  /**
+   * Whether email verification is required
+   * @default true
+   */
+  requireEmailVerification?: boolean;
+
+  /**
+   * Whether to show login link
+   * @default true
+   */
+  showLoginLink?: boolean;
+}
+
+export function SignupPage({
+  onSuccess,
+  redirectTo = '/verify-email',
+  showLoginLink = true,
+}: SignupPageProps) {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const { signUp } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const result = await signUp({ email, password, metadata: { name } });
+      if (result.error) {
+        setError(result.error.message);
+      } else {
+        onSuccess?.(result.data);
+        navigate(redirectTo);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Registration failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <AuthLayout title="Create Account">
+      <form onSubmit={handleSubmit}>
+        <GridLayout columns={1} spacing="md">
+          {error && <AuthError message={error} />}
+
+          <TextInputField
+            label="Full Name"
+            value={name}
+            onChange={setName}
+            required
+            disabled={loading}
+            textFieldProps={{ autoComplete: 'name' }}
+          />
+
+          <TextInputField
+            label="Email"
+            type="email"
+            value={email}
+            onChange={setEmail}
+            required
+            disabled={loading}
+            textFieldProps={{ autoComplete: 'email' }}
+          />
+
+          <TextInputField
+            label="Password"
+            type="password"
+            value={password}
+            onChange={setPassword}
+            required
+            disabled={loading}
+            helperText="Minimum 8 characters"
+            textFieldProps={{ autoComplete: 'new-password' }}
+          />
+
+          <TextInputField
+            label="Confirm Password"
+            type="password"
+            value={confirmPassword}
+            onChange={setConfirmPassword}
+            required
+            disabled={loading}
+            textFieldProps={{ autoComplete: 'new-password' }}
+          />
+
+          <Button type="submit" variant="primary" loading={loading} fullWidth>
+            Create Account
+          </Button>
+
+          {showLoginLink && (
+            <p style={{ textAlign: 'center', marginTop: '1rem', fontSize: '0.875rem' }}>
+              Already have an account?{' '}
+              <a href="/login" style={{ color: '#0066cc', fontWeight: 500 }}>
+                Sign in
+              </a>
+            </p>
+          )}
+        </GridLayout>
+      </form>
+    </AuthLayout>
+  );
+}

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

@@ -0,0 +1,38 @@
+/**
+ * VerifyEmailPage - Email verification page
+ *
+ * Displays instructions for email verification
+ */
+
+import { AuthLayout } from './shared';
+
+export interface VerifyEmailPageProps {
+  /**
+   * User's email address
+   */
+  email?: string;
+}
+
+export function VerifyEmailPage({ email }: VerifyEmailPageProps) {
+  return (
+    <AuthLayout title="Verify Your Email">
+      <div style={{ textAlign: 'center' }}>
+        <p style={{ marginBottom: '1.5rem', color: '#666' }}>
+          {email ? (
+            <>
+              We&apos;ve sent a verification link to <strong>{email}</strong>
+            </>
+          ) : (
+            "We've sent you a verification link"
+          )}
+        </p>
+        <p style={{ marginBottom: '1.5rem', color: '#666', fontSize: '0.875rem' }}>
+          Please check your email and click the link to verify your account.
+        </p>
+        <a href="/login" style={{ color: '#0066cc', fontSize: '0.875rem' }}>
+          Back to login
+        </a>
+      </div>
+    </AuthLayout>
+  );
+}

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

@@ -0,0 +1,201 @@
+/**
+ * AcceptInvitationPage 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 { AcceptInvitationPage } from '../AcceptInvitationPage';
+import { vi } from 'vitest';
+
+// Mock API client
+const mockAcceptInvitation = vi.fn();
+const mockApiClient = {
+  users: {
+    acceptInvitation: mockAcceptInvitation,
+  },
+};
+
+// 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 renderAcceptInvitationPage = (props = {}, token = 'valid-token-123') => {
+  return render(
+    <BrowserRouter initialEntries={[`/accept-invitation/${token}`]}>
+      <Routes>
+        <Route
+          path="/accept-invitation/:token"
+          element={<AcceptInvitationPage apiClient={mockApiClient as any} {...props} />}
+        />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+describe('AcceptInvitationPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders password fields for invitation acceptance', async () => {
+    renderAcceptInvitationPage();
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/^password$/i)).toBeInTheDocument();
+      expect(screen.getByLabelText(/confirm password/i)).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /accept invitation/i })).toBeInTheDocument();
+    });
+  });
+
+  it('displays error when token is missing', async () => {
+    render(
+      <BrowserRouter initialEntries={['/accept-invitation/']}>
+        <Routes>
+          <Route
+            path="/accept-invitation/"
+            element={<AcceptInvitationPage apiClient={mockApiClient as any} />}
+          />
+        </Routes>
+      </BrowserRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/invalid invitation link/i)).toBeInTheDocument();
+    });
+  });
+
+  it('validates password confirmation match', async () => {
+    renderAcceptInvitationPage();
+
+    await waitFor(() => screen.getByLabelText(/^password$/i));
+
+    const passwordInput = screen.getByLabelText(/^password$/i);
+    const confirmPasswordInput = screen.getByLabelText(/confirm password/i);
+    const submitButton = screen.getByRole('button', { name: /accept invitation/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(mockAcceptInvitation).not.toHaveBeenCalled();
+  });
+
+  it('calls acceptInvitation API with token and password', async () => {
+    const mockUser = { id: 'user-123', email: 'invited@example.com' };
+    mockAcceptInvitation.mockResolvedValue({ user: mockUser });
+
+    renderAcceptInvitationPage({}, 'test-token-456');
+
+    await waitFor(() => screen.getByLabelText(/^password$/i));
+
+    const passwordInput = screen.getByLabelText(/^password$/i);
+    const confirmPasswordInput = screen.getByLabelText(/confirm password/i);
+    const submitButton = screen.getByRole('button', { name: /accept invitation/i });
+
+    fireEvent.change(passwordInput, { target: { value: 'newpassword123' } });
+    fireEvent.change(confirmPasswordInput, { target: { value: 'newpassword123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(mockAcceptInvitation).toHaveBeenCalledWith('test-token-456', {
+        password: 'newpassword123',
+      });
+    });
+  });
+
+  it('navigates to redirectTo on successful acceptance', async () => {
+    const mockUser = { id: 'user-123', email: 'invited@example.com' };
+    mockAcceptInvitation.mockResolvedValue({ user: mockUser });
+
+    renderAcceptInvitationPage({ redirectTo: '/welcome' });
+
+    await waitFor(() => screen.getByLabelText(/^password$/i));
+
+    const passwordInput = screen.getByLabelText(/^password$/i);
+    const confirmPasswordInput = screen.getByLabelText(/confirm password/i);
+    const submitButton = screen.getByRole('button', { name: /accept invitation/i });
+
+    fireEvent.change(passwordInput, { target: { value: 'password123' } });
+    fireEvent.change(confirmPasswordInput, { target: { value: 'password123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/welcome');
+    });
+  });
+
+  it('calls onSuccess callback with user data', async () => {
+    const mockUser = { id: 'user-123', email: 'invited@example.com' };
+    const onSuccess = vi.fn();
+    mockAcceptInvitation.mockResolvedValue({ user: mockUser });
+
+    renderAcceptInvitationPage({ onSuccess });
+
+    await waitFor(() => screen.getByLabelText(/^password$/i));
+
+    const passwordInput = screen.getByLabelText(/^password$/i);
+    const confirmPasswordInput = screen.getByLabelText(/confirm password/i);
+    const submitButton = screen.getByRole('button', { name: /accept invitation/i });
+
+    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 API failure', async () => {
+    mockAcceptInvitation.mockRejectedValue(new Error('Invalid or expired token'));
+
+    renderAcceptInvitationPage();
+
+    await waitFor(() => screen.getByLabelText(/^password$/i));
+
+    const passwordInput = screen.getByLabelText(/^password$/i);
+    const confirmPasswordInput = screen.getByLabelText(/confirm password/i);
+    const submitButton = screen.getByRole('button', { name: /accept invitation/i });
+
+    fireEvent.change(passwordInput, { target: { value: 'password123' } });
+    fireEvent.change(confirmPasswordInput, { target: { value: 'password123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/invalid or expired token/i)).toBeInTheDocument();
+    });
+  });
+
+  it('disables form during submission', async () => {
+    mockAcceptInvitation.mockImplementation(() => new Promise(() => {}));
+
+    renderAcceptInvitationPage();
+
+    await waitFor(() => screen.getByLabelText(/^password$/i));
+
+    const passwordInput = screen.getByLabelText(/^password$/i) as HTMLInputElement;
+    const confirmPasswordInput = screen.getByLabelText(/confirm password/i) as HTMLInputElement;
+    const submitButton = screen.getByRole('button', { name: /accept invitation/i });
+
+    fireEvent.change(passwordInput, { target: { value: 'password123' } });
+    fireEvent.change(confirmPasswordInput, { target: { value: 'password123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(passwordInput).toBeDisabled();
+      expect(confirmPasswordInput).toBeDisabled();
+    });
+  });
+});

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

@@ -0,0 +1,207 @@
+/**
+ * LoginPage 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 { LoginPage } from '../LoginPage';
+import { AuthProvider } from '@qwickapps/auth-client';
+import { vi } from 'vitest';
+
+// Mock the useAuth hook
+const mockLogin = vi.fn();
+const mockUseAuth = vi.fn(() => ({
+  login: mockLogin,
+  user: null,
+  loading: false,
+}));
+
+vi.mock('@qwickapps/auth-client', async () => {
+  const actual = await vi.importActual('@qwickapps/auth-client');
+  return {
+    ...actual,
+    useAuth: () => mockUseAuth(),
+  };
+});
+
+// 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 renderLoginPage = (props = {}) => {
+  return render(
+    <BrowserRouter>
+      <LoginPage {...props} />
+    </BrowserRouter>
+  );
+};
+
+describe('LoginPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders login form with email and password fields', () => {
+    renderLoginPage();
+
+    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /sign in/i })).toBeInTheDocument();
+  });
+
+  it('shows signup link when showSignupLink is true', () => {
+    renderLoginPage({ showSignupLink: true });
+
+    expect(screen.getByText(/don't have an account/i)).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /sign up/i })).toBeInTheDocument();
+  });
+
+  it('hides signup link when showSignupLink is false', () => {
+    renderLoginPage({ showSignupLink: false });
+
+    expect(screen.queryByText(/don't have an account/i)).not.toBeInTheDocument();
+  });
+
+  it('shows password reset link when showPasswordResetLink is true', () => {
+    renderLoginPage({ showPasswordResetLink: true });
+
+    expect(screen.getByText(/forgot password/i)).toBeInTheDocument();
+  });
+
+  it('hides password reset link when showPasswordResetLink is false', () => {
+    renderLoginPage({ showPasswordResetLink: false });
+
+    expect(screen.queryByText(/forgot password/i)).not.toBeInTheDocument();
+  });
+
+  it('validates required fields', async () => {
+    renderLoginPage();
+
+    const submitButton = screen.getByRole('button', { name: /sign in/i });
+    fireEvent.click(submitButton);
+
+    // Form should not submit without required fields
+    expect(mockLogin).not.toHaveBeenCalled();
+  });
+
+  it('calls login with email and password on submit', async () => {
+    const mockUser = { id: 'user-123', email: 'test@example.com' };
+    mockLogin.mockResolvedValue(mockUser);
+
+    renderLoginPage();
+
+    const emailInput = screen.getByLabelText(/email/i);
+    const passwordInput = screen.getByLabelText(/password/i);
+    const submitButton = screen.getByRole('button', { name: /sign in/i });
+
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
+    fireEvent.change(passwordInput, { target: { value: 'password123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(mockLogin).toHaveBeenCalledWith('test@example.com', 'password123');
+    });
+  });
+
+  it('navigates to redirectTo on successful login', async () => {
+    const mockUser = { id: 'user-123', email: 'test@example.com' };
+    mockLogin.mockResolvedValue(mockUser);
+
+    renderLoginPage({ redirectTo: '/custom-dashboard' });
+
+    const emailInput = screen.getByLabelText(/email/i);
+    const passwordInput = screen.getByLabelText(/password/i);
+    const submitButton = screen.getByRole('button', { name: /sign in/i });
+
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
+    fireEvent.change(passwordInput, { target: { value: 'password123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/custom-dashboard');
+    });
+  });
+
+  it('calls onSuccess callback on successful login', async () => {
+    const mockUser = { id: 'user-123', email: 'test@example.com' };
+    const onSuccess = vi.fn();
+    mockLogin.mockResolvedValue(mockUser);
+
+    renderLoginPage({ onSuccess });
+
+    const emailInput = screen.getByLabelText(/email/i);
+    const passwordInput = screen.getByLabelText(/password/i);
+    const submitButton = screen.getByRole('button', { name: /sign in/i });
+
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
+    fireEvent.change(passwordInput, { target: { value: 'password123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(onSuccess).toHaveBeenCalledWith(mockUser);
+    });
+  });
+
+  it('displays error message on login failure', async () => {
+    mockLogin.mockRejectedValue(new Error('Invalid credentials'));
+
+    renderLoginPage();
+
+    const emailInput = screen.getByLabelText(/email/i);
+    const passwordInput = screen.getByLabelText(/password/i);
+    const submitButton = screen.getByRole('button', { name: /sign in/i });
+
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
+    fireEvent.change(passwordInput, { target: { value: 'wrong-password' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/invalid credentials/i)).toBeInTheDocument();
+    });
+  });
+
+  it('disables form inputs while loading', async () => {
+    mockLogin.mockImplementation(() => new Promise(() => {})); // Never resolves
+
+    renderLoginPage();
+
+    const emailInput = screen.getByLabelText(/email/i) as HTMLInputElement;
+    const passwordInput = screen.getByLabelText(/password/i) as HTMLInputElement;
+    const submitButton = screen.getByRole('button', { name: /sign in/i }) as HTMLButtonElement;
+
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
+    fireEvent.change(passwordInput, { target: { value: 'password123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(emailInput).toBeDisabled();
+      expect(passwordInput).toBeDisabled();
+    });
+  });
+
+  it('shows loading state on submit button', async () => {
+    mockLogin.mockImplementation(() => new Promise(() => {})); // Never resolves
+
+    renderLoginPage();
+
+    const emailInput = screen.getByLabelText(/email/i);
+    const passwordInput = screen.getByLabelText(/password/i);
+    const submitButton = screen.getByRole('button', { name: /sign in/i });
+
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
+    fireEvent.change(passwordInput, { target: { value: 'password123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(submitButton).toHaveAttribute('aria-busy', 'true');
+    });
+  });
+});