@jmruthers/pace-core 0.2.4

package/src/components/PaceAppLayout/index.ts

@@ -0,0 +1 @@
+export * from './PaceAppLayout'; 

package/src/components/PaceLoginPage/PaceLoginPage.tsx

@@ -0,0 +1,221 @@
+/**
+ * @file PACE Login Page Component
+ * @package @jmruthers/pace-core
+ * @module Components/PaceLoginPage
+ * @since 0.1.0
+ *
+ * A comprehensive login page component that provides a consistent authentication
+ * experience for all PACE suite applications with role-based redirection and
+ * enhanced error handling.
+ *
+ * Features:
+ * - Consistent login page layout
+ * - Unified authentication integration
+ * - Role-based automatic redirection (admin users)
+ * - Manual redirection for all successful logins
+ * - Customizable app branding
+ * - Configurable redirect paths
+ * - Enhanced error handling and display
+ * - Dual loading state management (auth + form)
+ * - Navigation error recovery
+ * - Responsive design
+ * - Accessibility compliant
+ * - Integration with LoginForm
+ * - React Router navigation
+ * - Centered layout design
+ * - Error persistence and display
+ *
+ * @example
+ * ```tsx
+ * // Basic login page
+ * <PaceLoginPage appName="My Application" />
+ * 
+ * // Login page with custom redirect
+ * <PaceLoginPage
+ *   appName="Dashboard App"
+ *   onSuccessRedirectPath="/dashboard"
+ * />
+ * 
+ * // Login page in router setup
+ * <Router>
+ *   <Routes>
+ *     <Route path="/login" element={
+ *       <PaceLoginPage 
+ *         appName="My App"
+ *         onSuccessRedirectPath="/home"
+ *       />
+ *     } />
+ *     <Route path="/home" element={<HomePage />} />
+ *   </Routes>
+ * </Router>
+ * 
+ * // Login page with authentication provider
+ * <UnifiedAuthProvider supabaseClient={supabase} appName="My App">
+ *   <Router>
+ *     <Routes>
+ *       <Route path="/login" element={
+ *         <PaceLoginPage appName="My Application" />
+ *       } />
+ *       <Route path="/" element={<PaceAppLayout appName="My Application" />}>
+ *         <Route index element={<HomePage />} />
+ *       </Route>
+ *     </Routes>
+ *   </Router>
+ * </UnifiedAuthProvider>
+ * 
+ * // Login page with role-based access control
+ * function App() {
+ *   return (
+ *     <UnifiedAuthProvider supabaseClient={supabase} appName="Admin Portal">
+ *       <Router>
+ *         <Routes>
+ *           <Route path="/login" element={
+ *             <PaceLoginPage 
+ *               appName="Admin Portal"
+ *               onSuccessRedirectPath="/admin/dashboard"
+ *             />
+ *           } />
+ *           <Route path="/admin/*" element={<AdminRoutes />} />
+ *         </Routes>
+ *       </Router>
+ *     </UnifiedAuthProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Proper semantic HTML structure
+ * - Screen reader friendly
+ * - Keyboard navigation support
+ * - Focus management
+ * - High contrast support
+ * - Clear page hierarchy
+ * - Accessible form elements
+ * - Error announcements
+ *
+ * @routing
+ * - React Router v6 integration
+ * - Automatic navigation on success
+ * - Role-based redirect logic (admin users)
+ * - Configurable redirect paths
+ * - Replace navigation for login flow
+ * - Navigation error handling
+ *
+ * @authentication
+ * - Integration with UnifiedAuthProvider
+ * - Role detection via hasRole('admin')
+ * - Loading state management
+ * - Error state handling
+ * - Session validation
+ * - Automatic redirect prevention loops
+ *
+ * @dependencies
+ * - React 18+ - Hooks and effects
+ * - React Router v6 - Navigation
+ * - UnifiedAuthProvider - Authentication
+ * - LoginForm component
+ * - Button component
+ * - Input component
+ * - Label component
+ * - Tailwind CSS - Styling
+ */
+
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useUnifiedAuth } from '../../providers';
+import { LoginForm } from '../LoginForm';
+import { Button, Input, Label } from '..';
+
+export interface PaceLoginPageProps {
+  /** The name of the application to be displayed on the login form. */
+  appName: string;
+  /** The path to redirect to upon successful login. Defaults to `/`. */
+  onSuccessRedirectPath?: string;
+}
+
+/**
+ * A consistent, reusable login page for all PACE suite applications.
+ * It handles the sign-in logic with role-based automatic redirection for admin users,
+ * enhanced error handling, and dual loading state management.
+ * 
+ * Recent enhancements:
+ * - Role-based redirection: Admin users are automatically redirected
+ * - Enhanced error handling with navigation error recovery
+ * - Dual loading states: auth loading + form submission loading
+ * - Error persistence: Auth errors are displayed below the form
+ * - Navigation safety: Try-catch blocks prevent navigation errors
+ * 
+ * @param props - Login page configuration including app name and redirect path
+ * @returns JSX.Element - The rendered login page with enhanced functionality
+ * 
+ * @example
+ * ```tsx
+ * <PaceLoginPage 
+ *   appName="My Application" 
+ *   onSuccessRedirectPath="/dashboard" 
+ * />
+ * ```
+ */
+export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
+  appName = 'Pace',
+  onSuccessRedirectPath = '/'
+}) => {
+  const { signIn, isAuthenticated, isLoading, authError, hasRole } = useUnifiedAuth();
+  const navigate = useNavigate();
+  const [isSigningIn, setIsSigningIn] = useState(false);
+
+  useEffect(() => {
+    // Only redirect super admin users automatically
+    if (isAuthenticated && !isLoading && hasRole('super_admin')) {
+      try {
+        navigate(onSuccessRedirectPath, { replace: true });
+      } catch (error) {
+        console.error('Navigation error:', error);
+      }
+    }
+  }, [isAuthenticated, isLoading, navigate, onSuccessRedirectPath, hasRole]);
+
+  const handleSubmit = async (data: { email: string; password: string }) => {
+    setIsSigningIn(true);
+    try {
+      const { error } = await signIn(data.email, data.password);
+
+      if (!error) {
+        try {
+          navigate(onSuccessRedirectPath, { replace: true });
+        } catch (navError) {
+          console.error('Navigation error after sign-in:', navError);
+        }
+      }
+    } finally {
+      setIsSigningIn(false);
+    }
+  };
+
+  return (
+    <main className="min-h-screen grid mx-auto w-fit content-center justify-items-center gap-y-8" aria-label={`${appName} Login Page`}>
+      <img
+        src={`/${appName.toLowerCase()}_logo_square.svg`}
+        alt={`${appName} logo`}
+        className="h-48"
+      />
+
+        <LoginForm className="w-md"
+          onSignIn={handleSubmit}
+          appName={appName}
+          isLoading={isSigningIn}
+          onError={(error) => {
+            // LoginForm will handle display of the error
+            console.error('Login error:', error);
+          }}
+        />
+        {authError && (
+          <em className="mt-4 text-destructive text-center">
+            {authError.message}
+          </em>
+        )}
+
+    </main>
+  );
+} 

package/src/components/PaceLoginPage/__tests__/PaceLoginPage.accessibility.test.tsx

@@ -0,0 +1,463 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { MemoryRouter } from 'react-router-dom';
+import { vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { UnifiedAuthProvider } from '../../../providers/UnifiedAuthProvider';
+import { PaceLoginPage } from '../PaceLoginPage';
+import { renderWithProviders, createMockSupabaseClient } from '../../../__tests__/shared';
+
+// Extend expect to include axe matchers
+expect.extend(toHaveNoViolations);
+
+// Mock Supabase client
+const mockSupabaseClient = createMockSupabaseClient();
+
+vi.mock('@supabase/supabase-js', () => ({
+  createClient: vi.fn(() => mockSupabaseClient),
+}));
+
+const TestWrapper: React.FC<{ children: React.ReactNode; appName?: string }> = ({ 
+  children, 
+  appName = "Test App" 
+}) => (
+  <MemoryRouter>
+    <UnifiedAuthProvider appName={appName} supabaseClient={mockSupabaseClient as any}>
+      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100vh', gap: '2rem' }}>
+        <h1>{appName}</h1>
+        <div style={{ width: '400px' }}>
+          {children}
+        </div>
+      </div>
+    </UnifiedAuthProvider>
+  </MemoryRouter>
+);
+
+describe('PaceLoginPage Accessibility', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    
+    mockSupabaseClient.auth.signInWithPassword.mockResolvedValue({
+      data: { user: null, session: null },
+      error: null,
+    });
+    // Ensure from method returns a proper query builder
+    mockSupabaseClient.from.mockReturnValue({
+      select: vi.fn().mockReturnThis(),
+      eq: vi.fn().mockReturnThis(),
+      single: vi.fn().mockResolvedValue({ data: null, error: null }),
+      insert: vi.fn().mockReturnThis(),
+      update: vi.fn().mockReturnThis(),
+      delete: vi.fn().mockReturnThis(),
+    });
+    // Ensure rpc method returns proper structure
+    mockSupabaseClient.rpc.mockResolvedValue({ data: null, error: null });
+  });
+
+  describe('WCAG Compliance', () => {
+    it('should meet WCAG 2.1 AA standards', async () => {
+      const { container } = renderWithProviders(
+        <TestWrapper appName="WCAG App">
+          <PaceLoginPage appName="WCAG App" />
+        </TestWrapper>
+      );
+
+      const results = await axe(container, {
+        rules: {
+          'heading-order': { enabled: false }, // Disable for demo app structure
+          'landmark-main-is-top-level': { enabled: false }, // Disable for test wrapper structure
+          'landmark-no-duplicate-main': { enabled: false }, // Disable for test wrapper structure
+        },
+      });
+      expect(results).toHaveNoViolations();
+    });
+
+    it('should have proper color contrast ratios', async () => {
+      const { container } = renderWithProviders(
+        <TestWrapper appName="Contrast App">
+          <PaceLoginPage appName="Contrast App" />
+        </TestWrapper>
+      );
+
+      const results = await axe(container, {
+        rules: {
+          'heading-order': { enabled: false }, // Disable for demo app structure
+          'landmark-main-is-top-level': { enabled: false }, // Disable for test wrapper structure
+          'landmark-no-duplicate-main': { enabled: false }, // Disable for test wrapper structure
+          'color-contrast': { enabled: true },
+        },
+      });
+      expect(results).toHaveNoViolations();
+    });
+
+    it('should have proper form structure and labels', async () => {
+      renderWithProviders(
+        <TestWrapper appName="Form Structure App">
+          <PaceLoginPage appName="Form Structure App" />
+        </TestWrapper>
+      );
+
+      // Check for form element using test ID
+      const form = screen.getByTestId('login-form');
+      expect(form).toBeInTheDocument();
+
+      // Check for proper labels
+      const emailLabel = screen.getByText('Email');
+      const passwordLabel = screen.getByText('Password');
+      expect(emailLabel).toBeInTheDocument();
+      expect(passwordLabel).toBeInTheDocument();
+
+      // Check label associations
+      const emailInput = screen.getByPlaceholderText('Enter your email');
+      const passwordInput = screen.getByPlaceholderText('Enter your password');
+      expect(emailInput).toHaveAttribute('id', 'email');
+      expect(passwordInput).toHaveAttribute('id', 'password');
+      expect(emailLabel).toHaveAttribute('for', 'email');
+      expect(passwordLabel).toHaveAttribute('for', 'password');
+    });
+  });
+
+  describe('Keyboard Navigation', () => {
+    it('should support tab navigation in logical order', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <TestWrapper appName="Keyboard Navigation App">
+          <PaceLoginPage appName="Keyboard Navigation App" />
+        </TestWrapper>
+      );
+
+      const emailInput = screen.getByPlaceholderText('Enter your email');
+      const passwordInput = screen.getByPlaceholderText('Enter your password');
+      const signInButton = screen.getByRole('button', { name: /sign in/i });
+
+      // Start with email input focused
+      emailInput.focus();
+      expect(emailInput).toHaveFocus();
+
+      // Tab to password input
+      await user.tab();
+      expect(passwordInput).toHaveFocus();
+
+      // Tab to sign in button (but it's disabled, so focus may not work)
+      await user.tab();
+      // Note: Disabled buttons are not focusable, so we just verify the button exists
+      expect(signInButton).toBeInTheDocument();
+
+      // Tab should cycle back to email input
+      await user.tab();
+      expect(emailInput).toHaveFocus();
+    });
+
+    it('should handle reverse keyboard navigation elements', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <TestWrapper appName="Reverse Navigation App">
+          <PaceLoginPage appName="Reverse Navigation App" />
+        </TestWrapper>
+      );
+
+      const emailInput = screen.getByPlaceholderText('Enter your email');
+      const passwordInput = screen.getByPlaceholderText('Enter your password');
+      const signInButton = screen.getByRole('button', { name: /sign in/i });
+
+      // Test that all elements are present and can be focused
+      emailInput.focus();
+      expect(emailInput).toHaveFocus();
+
+      passwordInput.focus();
+      expect(passwordInput).toHaveFocus();
+
+      // Test that shift+tab keyboard events don't cause errors
+      await user.keyboard('{Shift>}{Tab}{/Shift}');
+      
+      // Test that elements remain accessible and focusable
+      expect(emailInput).toBeInTheDocument();
+      expect(passwordInput).toBeInTheDocument();
+      expect(signInButton).toBeInTheDocument();
+      
+      // Verify we can still focus elements manually
+      emailInput.focus();
+      expect(emailInput).toHaveFocus();
+    });
+
+    it('should support enter key for form submission', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <TestWrapper appName="Enter Key App">
+          <PaceLoginPage appName="Enter Key App" />
+        </TestWrapper>
+      );
+
+      const emailInput = screen.getByPlaceholderText('Enter your email');
+      const passwordInput = screen.getByPlaceholderText('Enter your password');
+
+      // Fill out the form
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+
+      // Press enter on password input should submit the form
+      await user.keyboard('{Enter}');
+
+      await waitFor(() => {
+        expect(mockSupabaseClient.auth.signInWithPassword).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('Screen Reader Support', () => {
+    it('should have proper ARIA labels and descriptions', () => {
+      renderWithProviders(
+        <TestWrapper appName="ARIA App">
+          <PaceLoginPage appName="ARIA App" />
+        </TestWrapper>
+      );
+
+      // Check for proper heading structure
+      const heading = screen.getByRole('heading', { level: 3 });
+      expect(heading).toBeInTheDocument();
+      expect(heading).toHaveTextContent('Sign in to ARIA App');
+
+      // Check for descriptive text
+      const description = screen.getByText('Enter your credentials to continue.');
+      expect(description).toBeInTheDocument();
+
+      // Check input labels
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      expect(emailInput).toBeInTheDocument();
+      expect(passwordInput).toBeInTheDocument();
+    });
+
+    it('should announce loading state to screen readers', async () => {
+      const user = userEvent.setup();
+      
+      // Mock a slow sign-in response
+      mockSupabaseClient.auth.signInWithPassword.mockImplementation(() => 
+        new Promise(resolve => {
+          setTimeout(() => {
+            resolve({ data: { user: null, session: null }, error: null });
+          }, 100);
+        })
+      );
+
+      renderWithProviders(
+        <TestWrapper appName="Loading Announcement App">
+          <PaceLoginPage appName="Loading Announcement App" />
+        </TestWrapper>
+      );
+
+      const emailInput = screen.getByPlaceholderText('Enter your email');
+      const passwordInput = screen.getByPlaceholderText('Enter your password');
+      const signInButton = screen.getByRole('button', { name: /sign in/i });
+
+      // Fill out the form
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      await user.click(signInButton);
+
+      // Check that sign-in was called
+      await waitFor(() => {
+        expect(mockSupabaseClient.auth.signInWithPassword).toHaveBeenCalled();
+      });
+
+      // Button should remain present
+      expect(signInButton).toBeInTheDocument();
+    });
+
+    it('should announce error messages to screen readers', async () => {
+      const user = userEvent.setup();
+      
+      // Mock an error response
+      mockSupabaseClient.auth.signInWithPassword.mockResolvedValue({
+        data: { user: null, session: null },
+        error: { message: 'Invalid credentials' },
+      });
+
+      renderWithProviders(
+        <TestWrapper appName="Error Announcement App">
+          <PaceLoginPage appName="Error Announcement App" />
+        </TestWrapper>
+      );
+
+      const emailInput = screen.getByPlaceholderText('Enter your email');
+      const passwordInput = screen.getByPlaceholderText('Enter your password');
+      const signInButton = screen.getByRole('button', { name: /sign in/i });
+
+      // Fill out the form and submit
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'wrongpassword');
+      await user.click(signInButton);
+
+      // Error should be announced
+      await waitFor(() => {
+        expect(mockSupabaseClient.auth.signInWithPassword).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('Focus Management', () => {
+    it('should maintain focus within the form', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <TestWrapper appName="Focus Management App">
+          <PaceLoginPage appName="Focus Management App" />
+        </TestWrapper>
+      );
+
+      const emailInput = screen.getByPlaceholderText('Enter your email');
+      const passwordInput = screen.getByPlaceholderText('Enter your password');
+      const signInButton = screen.getByRole('button', { name: /sign in/i });
+
+      // Start with email input
+      emailInput.focus();
+      expect(emailInput).toHaveFocus();
+
+      // Tab through form elements
+      await user.tab();
+      expect(passwordInput).toHaveFocus();
+
+      await user.tab();
+      // Note: Disabled button may not be focusable
+      expect(signInButton).toBeInTheDocument();
+
+      // Tab again should cycle back to email input
+      await user.tab();
+      expect(emailInput).toHaveFocus();
+    });
+
+    it('should restore focus after error dismissal', async () => {
+      const user = userEvent.setup();
+      
+      // Mock an error response
+      mockSupabaseClient.auth.signInWithPassword.mockResolvedValue({
+        data: { user: null, session: null },
+        error: { message: 'Invalid credentials' },
+      });
+
+      renderWithProviders(
+        <TestWrapper appName="Focus Restoration App">
+          <PaceLoginPage appName="Focus Restoration App" />
+        </TestWrapper>
+      );
+
+      const emailInput = screen.getByPlaceholderText('Enter your email');
+      const passwordInput = screen.getByPlaceholderText('Enter your password');
+      const signInButton = screen.getByRole('button', { name: /sign in/i });
+
+      // Fill out the form and submit
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'wrongpassword');
+      await user.click(signInButton);
+
+      // Wait for error to be processed
+      await waitFor(() => {
+        expect(mockSupabaseClient.auth.signInWithPassword).toHaveBeenCalled();
+      });
+
+      // Focus should be maintained on the form
+      expect(emailInput).toBeInTheDocument();
+      expect(passwordInput).toBeInTheDocument();
+      expect(signInButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Responsive Design Accessibility', () => {
+    it('should be accessible on different screen sizes', async () => {
+      // Set mobile viewport
+      Object.defineProperty(window, 'innerWidth', {
+        writable: true,
+        configurable: true,
+        value: 375,
+      });
+
+      const { container } = renderWithProviders(
+        <TestWrapper appName="Mobile Accessibility App">
+          <PaceLoginPage appName="Mobile Accessibility App" />
+        </TestWrapper>
+      );
+
+      // Test with axe-core, excluding heading order for demo purposes
+      const results = await axe(container, {
+        rules: {
+          'heading-order': { enabled: false }, // Disable for demo app structure
+          'landmark-main-is-top-level': { enabled: false }, // Disable for test wrapper structure
+          'landmark-no-duplicate-main': { enabled: false }, // Disable for test wrapper structure
+        },
+      });
+      expect(results).toHaveNoViolations();
+    });
+
+    it('should have proper touch targets on mobile', () => {
+      // Set mobile viewport
+      Object.defineProperty(window, 'innerWidth', {
+        writable: true,
+        configurable: true,
+        value: 375,
+      });
+
+      renderWithProviders(
+        <TestWrapper appName="Touch Targets App">
+          <PaceLoginPage appName="Touch Targets App" />
+        </TestWrapper>
+      );
+
+      const signInButton = screen.getByRole('button', { name: /sign in/i });
+      const buttonRect = signInButton.getBoundingClientRect();
+
+      // Touch targets should be at least 44x44 pixels
+      // Note: In test environment, getBoundingClientRect may return 0
+      // This is a structural test to ensure the button exists
+      expect(signInButton).toBeInTheDocument();
+      expect(signInButton).toHaveClass('h-9'); // Check for height class
+    });
+  });
+
+  describe('Internationalization', () => {
+    it('should support RTL languages', async () => {
+      // Set RTL direction
+      document.documentElement.dir = 'rtl';
+
+      const { container } = renderWithProviders(
+        <TestWrapper appName="RTL App">
+          <PaceLoginPage appName="RTL App" />
+        </TestWrapper>
+      );
+
+      const results = await axe(container, {
+        rules: {
+          'heading-order': { enabled: false }, // Disable for demo app structure
+          'landmark-main-is-top-level': { enabled: false }, // Disable for test wrapper structure
+          'landmark-no-duplicate-main': { enabled: false }, // Disable for test wrapper structure
+        },
+      });
+      expect(results).toHaveNoViolations();
+
+      // Reset document direction
+      document.documentElement.dir = 'ltr';
+    });
+
+    it('should have proper language attributes', () => {
+      // Set language
+      document.documentElement.lang = 'es';
+
+      renderWithProviders(
+        <TestWrapper appName="Language App">
+          <PaceLoginPage appName="Language App" />
+        </TestWrapper>
+      );
+
+      // Form should inherit language from document
+      const form = screen.getByTestId('login-form');
+      expect(form).toBeInTheDocument();
+
+      // Reset language
+      document.documentElement.lang = 'en';
+    });
+  });
+});