@jmruthers/pace-core 0.6.4 → 0.6.6

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

@@ -15,6 +15,7 @@ import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 import { Logger, LogLevel } from '../../utils/core/logger';
 import { clearPalette } from '../../theming/runtime';
 import { EventServiceContext } from '../../providers/services/EventServiceProvider';
+import { UnifiedAuthContext } from '../../providers/services/UnifiedAuthProvider';
 
 // Mock React Router
 const mockNavigate = vi.fn();
@@ -47,36 +48,66 @@ const mockSupabase = {
 // Mock the UnifiedAuthProvider
 const mockAuthContext = {
   user: null as User | null,
+  session: null,
   isAuthenticated: false,
   isLoading: false,
+  authLoading: false,
   authError: null as Error | null,
+  error: null,
   hasRole: vi.fn(),
   getUserRole: vi.fn(),
   signIn: vi.fn(),
   signOut: vi.fn(),
+  signUp: vi.fn(),
+  resetPassword: vi.fn(),
+  updatePassword: vi.fn(),
   refreshSession: vi.fn(),
   supabase: mockSupabase,
   appName: 'Test App',
+  appId: undefined,
   hasErrors: false,
-  // RBAC context
-  globalRole: null,
-  organisationRole: null,
-  eventAppRole: null,
-  rbacLoading: false,
-  rbacError: null,
+  // Organisation context
+  selectedOrganisation: null,
+  selectedOrganisationId: null,
+  organisations: [],
+  userMemberships: [],
+  organisationLoading: false,
+  organisationError: null,
+  hasValidOrganisationContext: false,
+  isContextReady: false,
+  switchOrganisation: vi.fn(),
+  validateOrganisationAccess: vi.fn(),
+  refreshOrganisations: vi.fn(),
+  ensureOrganisationContext: vi.fn(),
+  isOrganisationSecure: vi.fn(),
+  getPrimaryOrganisation: vi.fn(),
+  // Event context
+  events: [],
+  selectedEvent: null,
+  selectedEventId: null,
+  eventLoading: false,
+  eventError: null,
+  setSelectedEvent: vi.fn(),
+  refreshEvents: vi.fn(),
   // Inactivity context
   isIdle: false,
-  timeUntilIdle: 0,
-  resetInactivityTimer: vi.fn(),
-  inactivityLoading: false,
-  inactivityError: null,
+  timeRemaining: 0,
+  showWarning: false,
+  showInactivityWarning: false,
+  inactivityTimeRemaining: 0,
+  isTracking: false,
+  resetActivity: vi.fn(),
+  startTracking: vi.fn(),
+  stopTracking: vi.fn(),
+  handleIdleLogout: vi.fn(),
+  handleStaySignedIn: vi.fn(),
+  handleSignOutNow: vi.fn(),
+  // Session restoration
+  sessionRestoration: { state: 'idle', error: null },
+  sessionRestorationTimedOut: false,
+  sessionRestorationTimeoutMs: 5000,
 };
 
-// Mock the useUnifiedAuth hook - needs to match the actual import path
-vi.mock('../../providers', () => ({
-  useUnifiedAuth: () => mockAuthContext,
-  UnifiedAuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-}));
 
 vi.mock('../../theming/runtime', () => ({
   clearPalette: vi.fn(),
@@ -105,6 +136,16 @@ const resetAuthContext = () => {
   mockAuthContext.supabase = mockSupabase;
 };
 
+// Helper to render with UnifiedAuthContext
+const renderWithAuthContext = (ui: React.ReactElement, options: { withRouter?: boolean } = {}) => {
+  return renderWithProviders(
+    <UnifiedAuthContext.Provider value={mockAuthContext as any}>
+      {ui}
+    </UnifiedAuthContext.Provider>,
+    options
+  );
+};
+
 describe('PaceLoginPage Component', () => {
   let originalMode: string | undefined;
 
@@ -141,7 +182,7 @@ describe('PaceLoginPage Component', () => {
 
   describe('Side Effects', () => {
     it('clears theme palette on mount and when login route is active', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
 
       expect(clearPalette).toHaveBeenCalled();
     });
@@ -151,9 +192,11 @@ describe('PaceLoginPage Component', () => {
       window.history.pushState({}, '', '/login');
 
       renderWithProviders(
-        <EventServiceContext.Provider value={{ eventService: { restorePersistedEvent } as any }}>
-          <PaceLoginPage appName="Test App" />
-        </EventServiceContext.Provider>
+        <UnifiedAuthContext.Provider value={mockAuthContext as any}>
+          <EventServiceContext.Provider value={{ eventService: { restorePersistedEvent } as any }}>
+            <PaceLoginPage appName="Test App" />
+          </EventServiceContext.Provider>
+        </UnifiedAuthContext.Provider>
       );
 
       await waitFor(() => {
@@ -165,19 +208,19 @@ describe('PaceLoginPage Component', () => {
   // Basic rendering tests
   describe('Rendering', () => {
     it('renders with default props', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
     });
 
     it('renders with custom app name', () => {
-      renderWithProviders(<PaceLoginPage appName="My Application" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="My Application" />, { withRouter: false });
       
       expect(screen.getByLabelText('My Application Login Page')).toBeInTheDocument();
     });
 
     it('renders with custom redirect path', () => {
-      renderWithProviders(
+      renderWithAuthContext(
         <PaceLoginPage 
           appName="Test App" 
           onSuccessRedirectPath="/dashboard" 
@@ -188,7 +231,7 @@ describe('PaceLoginPage Component', () => {
     });
 
     it('renders app logo with correct attributes', () => {
-      renderWithProviders(<PaceLoginPage appName="TestApp" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="TestApp" />, { withRouter: false });
       
       const logo = screen.getByAltText('TestApp logo');
       expect(logo).toBeInTheDocument();
@@ -197,13 +240,13 @@ describe('PaceLoginPage Component', () => {
     });
 
     it('renders LoginForm component', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByTestId('login-form')).toBeInTheDocument();
     });
 
     it('passes correct props to LoginForm', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       // Check that LoginForm receives the app name
       expect(screen.getByText('Sign in to Test App')).toBeInTheDocument();
@@ -215,7 +258,7 @@ describe('PaceLoginPage Component', () => {
     it('handles loading state', () => {
       mockAuthContext.isLoading = true;
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
     });
@@ -225,7 +268,7 @@ describe('PaceLoginPage Component', () => {
       mockAuthContext.isLoading = false;
       mockAuthContext.hasRole.mockReturnValue(false);
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
     });
@@ -233,7 +276,7 @@ describe('PaceLoginPage Component', () => {
     it('handles authentication error', () => {
       mockAuthContext.authError = new Error('Authentication failed');
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByText('Authentication failed')).toBeInTheDocument();
       expect(screen.getByText('Authentication failed')).toHaveClass('text-destructive');
@@ -243,7 +286,7 @@ describe('PaceLoginPage Component', () => {
       const errorMessage = 'Invalid credentials';
       mockAuthContext.authError = new Error(errorMessage);
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const errorElement = screen.getByText(errorMessage);
       expect(errorElement).toBeInTheDocument();
@@ -260,7 +303,7 @@ describe('PaceLoginPage Component', () => {
       (authErr as any).code = 'session_missing';
       mockAuthContext.authError = authErr;
 
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
 
       expect(screen.queryByText(/Auth session missing/i)).toBeNull();
     });
@@ -278,11 +321,13 @@ describe('PaceLoginPage Component', () => {
       vi.mocked(isSuperAdmin).mockResolvedValue(true);
       
       renderWithProviders(
-        <PaceLoginPage 
-          appName="Test App" 
-          onSuccessRedirectPath="/admin"
-          requireAppAccess={true}
-        />
+        <UnifiedAuthContext.Provider value={mockAuthContext as any}>
+          <PaceLoginPage 
+            appName="Test App" 
+            onSuccessRedirectPath="/admin"
+            requireAppAccess={true}
+          />
+        </UnifiedAuthContext.Provider>
       );
       
       await waitFor(() => {
@@ -295,7 +340,7 @@ describe('PaceLoginPage Component', () => {
       mockAuthContext.isLoading = false;
       mockAuthContext.hasRole.mockReturnValue(false);
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       await waitFor(() => {
         expect(mockNavigate).not.toHaveBeenCalled();
@@ -319,10 +364,12 @@ describe('PaceLoginPage Component', () => {
       console.error = vi.fn();
       
       renderWithProviders(
-        <PaceLoginPage 
-          appName="Test App" 
-          requireAppAccess={true}
-        />
+        <UnifiedAuthContext.Provider value={mockAuthContext as any}>
+          <PaceLoginPage 
+            appName="Test App" 
+            requireAppAccess={true}
+          />
+        </UnifiedAuthContext.Provider>
       );
       
       await waitFor(() => {
@@ -340,7 +387,7 @@ describe('PaceLoginPage Component', () => {
       const user = userEvent.setup();
       mockAuthContext.signIn.mockResolvedValue({ error: null });
       
-      renderWithProviders(
+      renderWithAuthContext(
         <PaceLoginPage 
           appName="Test App" 
           onSuccessRedirectPath="/dashboard" 
@@ -369,7 +416,7 @@ describe('PaceLoginPage Component', () => {
       const signInError = new Error('Invalid credentials');
       mockAuthContext.signIn.mockResolvedValue({ error: signInError });
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -399,7 +446,7 @@ describe('PaceLoginPage Component', () => {
       
       const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
       
-      renderWithProviders(
+      renderWithAuthContext(
         <PaceLoginPage appName="Test App" requireAppAccess={false} />, 
         { withRouter: false }
       );
@@ -430,7 +477,7 @@ describe('PaceLoginPage Component', () => {
       });
       mockAuthContext.signIn.mockReturnValue(signInPromise);
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -459,14 +506,14 @@ describe('PaceLoginPage Component', () => {
   // Error handling tests
   describe('Error Handling', () => {
     it('handles missing app name gracefully', () => {
-      renderWithProviders(<PaceLoginPage appName="" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="" />, { withRouter: false });
       
       // Check that the component renders even with empty app name
       expect(screen.getByTestId('login-form')).toBeInTheDocument();
     });
 
     it('handles undefined redirect path', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" onSuccessRedirectPath={undefined} />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" onSuccessRedirectPath={undefined} />, { withRouter: false });
       
       expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
     });
@@ -478,7 +525,7 @@ describe('PaceLoginPage Component', () => {
       
       const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -502,14 +549,14 @@ describe('PaceLoginPage Component', () => {
   // Accessibility tests
   describe('Accessibility', () => {
     it('has proper ARIA attributes', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const main = screen.getByLabelText('Test App Login Page');
       expect(main).toHaveAttribute('aria-label', 'Test App Login Page');
     });
 
     it('has proper semantic structure', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
       expect(screen.getByRole('img')).toBeInTheDocument();
@@ -517,7 +564,7 @@ describe('PaceLoginPage Component', () => {
     });
 
     it('has accessible form elements', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByLabelText('Email')).toBeInTheDocument();
       expect(screen.getByLabelText('Password')).toBeInTheDocument();
@@ -527,7 +574,7 @@ describe('PaceLoginPage Component', () => {
     it('announces errors to screen readers', () => {
       mockAuthContext.authError = new Error('Authentication failed');
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const errorElement = screen.getByText('Authentication failed');
       expect(errorElement).toBeInTheDocument();
@@ -537,7 +584,7 @@ describe('PaceLoginPage Component', () => {
   // Integration tests
   describe('Integration', () => {
     it('integrates with LoginForm component', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       // Check that LoginForm is rendered with correct props
       expect(screen.getByTestId('login-form')).toBeInTheDocument();
@@ -552,7 +599,7 @@ describe('PaceLoginPage Component', () => {
       });
       mockAuthContext.signIn.mockReturnValue(signInPromise);
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -574,21 +621,21 @@ describe('PaceLoginPage Component', () => {
   // Layout and styling tests
   describe('Layout and Styling', () => {
     it('has correct main container classes', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const main = screen.getByLabelText('Test App Login Page');
       expect(main).toHaveClass('min-h-screen', 'grid', 'mx-auto', 'w-fit', 'content-center', 'justify-items-center', 'gap-y-8');
     });
 
     it('renders logo with correct styling', () => {
-      renderWithProviders(<PaceLoginPage appName="TestApp" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="TestApp" />, { withRouter: false });
       
       const logo = screen.getByAltText('TestApp logo');
       expect(logo).toHaveClass('h-48');
     });
 
     it('renders LoginForm with correct width class', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const form = screen.getByTestId('login-form');
       expect(form.closest('.w-md')).toBeInTheDocument();
@@ -600,7 +647,7 @@ describe('PaceLoginPage Component', () => {
     it('handles empty form submission', async () => {
       const user = userEvent.setup();
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const submitButton = screen.getByRole('button', { name: /sign in/i });
       await user.click(submitButton);
@@ -612,7 +659,7 @@ describe('PaceLoginPage Component', () => {
     it('handles very long app names', () => {
       const longAppName = 'A'.repeat(100);
       
-      renderWithProviders(<PaceLoginPage appName={longAppName} />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName={longAppName} />, { withRouter: false });
       
       expect(screen.getByLabelText(`${longAppName} Login Page`)).toBeInTheDocument();
     });
@@ -620,7 +667,7 @@ describe('PaceLoginPage Component', () => {
     it('handles special characters in app name', () => {
       const specialAppName = 'Test & Co. (Ltd.)';
 
-      renderWithProviders(<PaceLoginPage appName={specialAppName} />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName={specialAppName} />, { withRouter: false });
 
       expect(screen.getByLabelText(`${specialAppName} Login Page`)).toBeInTheDocument();
     });
@@ -655,7 +702,7 @@ describe('PaceLoginPage Component', () => {
       };
       mockAuthContext.supabase = missingAppSupabase as any;
 
-      renderWithProviders(
+      renderWithAuthContext(
         <PaceLoginPage appName="Test App" requireAppAccess />
       );
 
@@ -727,7 +774,7 @@ describe('PaceLoginPage Component', () => {
 
       mockAuthContext.supabase = supabaseWithNoOrg as any;
 
-      renderWithProviders(
+      renderWithAuthContext(
         <PaceLoginPage appName="Test App" requireAppAccess />
       );
 

package/src/components/PaceLoginPage/PaceLoginPage.tsx

@@ -123,7 +123,7 @@
 
 import React, { useEffect, useState, useContext } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { useUnifiedAuth } from '../../providers';
+import { UnifiedAuthContext } from '../../providers/services/UnifiedAuthProvider';
 import { isSuperAdmin } from '../../rbac/api';
 import { LoginForm } from '../LoginForm';
 import { Button, Input, Label } from '..';
@@ -172,8 +172,11 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
   onSuccessRedirectPath = '/',
   requireAppAccess = false
 }) => {
-  const { signIn, isAuthenticated, isLoading, authError, user, supabase } = useUnifiedAuth();
-  
+  // Call all hooks unconditionally at the top level
+  // Hooks must be called in the same order on every render
+  // Use useContext directly instead of useUnifiedAuth() to avoid throwing
+  // if context isn't available yet (e.g., during initial render)
+  const authContext = useContext(UnifiedAuthContext);
   const navigate = useNavigate();
   const location = useLocation();
   const [isSigningIn, setIsSigningIn] = useState(false);
@@ -185,6 +188,15 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
   const eventServiceContext = useContext(EventServiceContext);
   const eventService = eventServiceContext?.eventService || null;
 
+  // Destructure auth context values with defaults to handle missing context
+  // These are used in useEffect dependency arrays, so they must always be defined
+  const signIn = authContext?.signIn || (async () => ({ error: null }));
+  const isAuthenticated = authContext?.isAuthenticated ?? false;
+  const isLoading = authContext?.isLoading ?? false;
+  const authError = authContext?.authError ?? null;
+  const user = authContext?.user ?? null;
+  const supabase = authContext?.supabase ?? null;
+
   // Clear any active event theme when login page mounts
   // This ensures the login screen always uses default colors
   useEffect(() => {
@@ -356,6 +368,18 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
     }
   };
 
+  // Handle missing auth context - show loading state
+  // This check happens after all hooks are called
+  if (!authContext) {
+    return (
+      <main className="min-h-screen flex items-center justify-center">
+        <section className="text-center">
+          <p>Loading...</p>
+        </section>
+      </main>
+    );
+  }
+
   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

package/src/components/PasswordChange/PasswordChangeForm.test.tsx

@@ -266,6 +266,67 @@ describe('PasswordChangeForm', () => {
 
       expect(mockOnSubmit).not.toHaveBeenCalled();
     });
+
+    it('calls onSuccess callback when password change succeeds', async () => {
+      const user = userEvent.setup();
+      const mockOnSuccess = vi.fn();
+      mockOnSubmit.mockResolvedValue({});
+
+      render(<PasswordChangeForm {...baseProps} onSuccess={mockOnSuccess} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'newpassword123');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockOnSuccess).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    it('does not call onSuccess callback when password change fails', async () => {
+      const user = userEvent.setup();
+      const mockOnSuccess = vi.fn();
+      mockOnSubmit.mockResolvedValue({ error: { message: 'Password too weak' } });
+
+      render(<PasswordChangeForm {...baseProps} onSuccess={mockOnSuccess} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'newpassword123');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Password too weak')).toBeInTheDocument();
+        expect(mockOnSuccess).not.toHaveBeenCalled();
+      });
+    });
+
+    it('works without onSuccess callback (backward compatibility)', async () => {
+      const user = userEvent.setup();
+      mockOnSubmit.mockResolvedValue({});
+
+      render(<PasswordChangeForm {...baseProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'newpassword123');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockOnSubmit).toHaveBeenCalled();
+      });
+      // Should not throw error when onSuccess is not provided
+    });
   });
 
   describe('Loading States', () => {

package/src/components/PasswordChange/PasswordChangeForm.tsx

@@ -47,7 +47,7 @@
  *   }}
  * />
  * 
- * // Password change form in a modal
+ * // Password change form in a modal with onSuccess callback
  * <Modal isOpen={showPasswordChange} onClose={() => setShowPasswordChange(false)}>
  *   <ModalContent>
  *     <ModalHeader>
@@ -58,13 +58,15 @@
  *         onSubmit={async (values) => {
  *           const result = await changePassword(values.newPassword);
  *           if (result.success) {
- *             setShowPasswordChange(false);
- *             toast.success('Password changed successfully');
  *             return {};
  *           } else {
  *             return { error: { message: result.error } };
  *           }
  *         }}
+ *         onSuccess={() => {
+ *           setShowPasswordChange(false);
+ *           toast.success('Password changed successfully');
+ *         }}
  *       />
  *     </ModalBody>
  *   </ModalContent>
@@ -124,10 +126,11 @@ export interface PasswordChangeFormError {
  */
 export interface PasswordChangeFormProps {
   onSubmit: (values: PasswordChangeFormValues) => Promise<{ error?: PasswordChangeFormError }>;
+  onSuccess?: () => void;
   className?: string;
 }
 
-export function PasswordChangeForm({ onSubmit, className }: PasswordChangeFormProps) {
+export function PasswordChangeForm({ onSubmit, onSuccess, className }: PasswordChangeFormProps) {
   const [newPassword, setNewPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
   const [error, setError] = useState<string | null>(null);
@@ -151,6 +154,9 @@ export function PasswordChangeForm({ onSubmit, className }: PasswordChangeFormPr
       const result = await onSubmit({ newPassword, confirmPassword });
       if (result && result.error) {
         setError(result.error.message || 'Failed to change password.');
+      } else {
+        // Success - call onSuccess callback
+        onSuccess?.();
       }
     } catch (err) {
       const errorObj = err instanceof Error ? err : new Error('An unexpected error occurred');
@@ -163,23 +169,23 @@ export function PasswordChangeForm({ onSubmit, className }: PasswordChangeFormPr
   return (
     <form onSubmit={handleSubmit} className={cn('space-y-4', className)}>
       {error && (
-        <div role="alert">
+      <p className="grid place-items-center text-center size-full" role="alert">
           {error}
-        </div>
+        </p>
       )}
-      <div className="space-y-2">
-        <Label htmlFor="new-password">New Password</Label>
-        <Input
+        <Label htmlFor="new-password" className="block mb-4">New Password
+          <Input
           id="new-password"
           type="password"
           value={newPassword}
           onChange={(e) => setNewPassword(e.target.value)}
           required
           disabled={isSubmitting}
+          className="mt-2"
         />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="confirm-password">Confirm Password</Label>
+        </Label>
+
+        <Label htmlFor="confirm-password" className="block mb-4">Confirm Password
         <Input
           id="confirm-password"
           type="password"
@@ -187,8 +193,9 @@ export function PasswordChangeForm({ onSubmit, className }: PasswordChangeFormPr
           onChange={(e) => setConfirmPassword(e.target.value)}
           required
           disabled={isSubmitting}
+          className="mt-2"
         />
-      </div>
+        </Label>
       <Button
         type="submit"
         className="w-full"