@jmruthers/pace-core 0.5.191 → 0.6.1

package/src/components/PaceAppLayout/PaceAppLayout.tsx

@@ -86,7 +86,7 @@
  * - Permission-based route protection
  *
  * @dependencies
- * - React 18+ - Component framework
+ * - React 19+ - Component framework
  * - React Router v6 - Routing
  * - UnifiedAuthProvider - Authentication
  * - usePermissionCache - Permission management
@@ -103,10 +103,10 @@ import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
 import { useOrganisations } from '../../hooks/useOrganisations';
 import { useEvents } from '../../hooks/useEvents';
 import { useEventTheme } from '../../hooks/useEventTheme';
-import { useCan, useResolvedScope } from '../../rbac/hooks';
+import { useCan, useResolvedScope, useRBAC } from '../../rbac/hooks';
 import { createScopeFromEvent } from '../../rbac/utils/eventContext';
 import { getCurrentAppName } from '../../utils/app/appNameResolver';
-import { isSuperAdmin } from '../../rbac/api';
+import { isSuperAdmin as checkSuperAdminApi } from '../../rbac/api';
 import { logger } from '../../utils/core/logger';
 import type { Permission, Scope } from '../../rbac/types';
 
@@ -372,7 +372,7 @@ export function PaceAppLayout({
   onRouteAccessDenied,
   onRouteStrictModeViolation
 }: PaceAppLayoutProps) {
-  const { user, signOut, updatePassword, supabase, appId: contextAppId } = useUnifiedAuth(); // Get appId from context (resolved on login)
+  const { user, signOut, updatePassword, supabase, appId: contextAppId, selectedOrganisationId } = useUnifiedAuth(); // Get appId from context (resolved on login)
   const { 
     selectedOrganisation, 
     isContextReady, 
@@ -380,6 +380,47 @@ export function PaceAppLayout({
     ensureOrganisationContext,
     isLoading: organisationLoading 
   } = useOrganisations();
+  // Use useRBAC to get super admin status - it's more reliable than async check
+  // Note: isSuperAdmin might be false initially while loading, but that's OK - we'll allow rendering
+  // if organisation loading completes or if we're a super admin
+  const { isSuperAdmin: isSuperAdminFromRBAC, isLoading: rbacLoading } = useRBAC();
+
+  // Also check super admin status directly as a fallback (for ADMIN/PORTAL apps)
+  // This allows super admins to proceed even if RBAC hasn't loaded yet
+  const [isSuperAdminDirect, setIsSuperAdminDirect] = useState<boolean>(false);
+  const [isCheckingSuperAdminDirect, setIsCheckingSuperAdminDirect] = useState<boolean>(false);
+
+  useEffect(() => {
+    const checkSuperAdminDirect = async () => {
+      if (!user?.id) {
+        setIsSuperAdminDirect(false);
+        setIsCheckingSuperAdminDirect(false);
+        return;
+      }
+
+      // Only skip if RBAC already confirmed super admin
+      if (isSuperAdminFromRBAC) {
+        setIsCheckingSuperAdminDirect(false);
+        return;
+      }
+
+      setIsCheckingSuperAdminDirect(true);
+      try {
+        const superAdminStatus = await checkSuperAdminApi(user.id);
+        setIsSuperAdminDirect(superAdminStatus);
+      } catch (error) {
+        logger.error('PaceAppLayout', 'Error checking super admin status directly', { userId: user?.id, error });
+        setIsSuperAdminDirect(false);
+      } finally {
+        setIsCheckingSuperAdminDirect(false);
+      }
+    };
+
+    checkSuperAdminDirect();
+  }, [user?.id, isSuperAdminFromRBAC]);
+
+  // Use direct check if RBAC hasn't loaded yet, otherwise use RBAC result
+  const isSuperAdmin = isSuperAdminFromRBAC || isSuperAdminDirect;
   const navigate = useNavigate();
   const location = useLocation();
   
@@ -408,28 +449,25 @@ export function PaceAppLayout({
   
   // Build scope from resolved values
   // Preserve appId from resolvedScope or fallback to resolvedAppId
+  // CRITICAL: Always create a new scope object from primitive values to ensure stable reference
+  // This prevents useCan from re-checking permissions when resolvedScope changes reference but values are the same
+  const scopeOrgId = resolvedScope?.organisationId || selectedOrganisation?.id || '';
+  const scopeEventId = resolvedScope?.eventId || selectedEvent?.event_id || undefined;
+  const scopeAppId = resolvedScope?.appId || resolvedAppId || undefined;
+  
   const scope = useMemo<Scope>(() => {
-    // Prefer resolvedScope if available (includes appId)
-    if (resolvedScope?.organisationId) {
-      return resolvedScope;
+    const newScope: Scope = {};
+    if (scopeOrgId) {
+      newScope.organisationId = scopeOrgId;
     }
-    
-    // Fallback: build scope from context values with resolvedAppId
-    if (selectedOrganisation?.id) {
-      return {
-        organisationId: selectedOrganisation.id,
-        eventId: selectedEvent?.event_id || undefined,
-        appId: resolvedAppId || resolvedScope?.appId || undefined
-      };
+    if (scopeEventId) {
+      newScope.eventId = scopeEventId;
     }
-    
-    // Last resort: return minimal scope
-    return {
-      organisationId: selectedOrganisation?.id || '',
-      eventId: selectedEvent?.event_id || undefined,
-      appId: resolvedAppId || resolvedScope?.appId || undefined
-    };
-  }, [resolvedScope, selectedOrganisation?.id, selectedEvent?.event_id, resolvedAppId]);
+    if (scopeAppId) {
+      newScope.appId = scopeAppId;
+    }
+    return newScope;
+  }, [scopeOrgId, scopeEventId, scopeAppId]);
 
   // Default navigation items if none provided
   const defaultNavItems: NavigationItem[] = useMemo(() => [
@@ -460,61 +498,45 @@ export function PaceAppLayout({
     }
     // Extract first path segment (base page name)
     const pathSegments = currentPath.slice(1).split('/').filter(Boolean);
-    return pathSegments[0] || 'home';
+    // Only return 'home' if there's actually a path segment, otherwise return empty string
+    // This prevents checking permissions for a non-existent "home" page when the index route is used
+    return pathSegments[0] || '';
   }, [location.pathname, pageIdMapping]);
 
   // Build permission string in format: operation:page.pageId
   const currentPermission = useMemo<Permission>(() => {
-    if (!enforcePermissions) {
-      return 'read:page.home' as Permission;
+    // If enforcePermissions is false, don't check any permission (return empty string)
+    // If currentPageId is empty (index route with no path segments), don't check permissions
+    if (!enforcePermissions || !currentPageId) {
+      return '' as Permission;
     }
     const permissionString = `${currentRoutePermission}:page.${currentPageId}`;
     return permissionString as Permission;
   }, [enforcePermissions, currentRoutePermission, currentPageId]);
 
   // Check super admin status before permission enforcement
-  const [isSuperAdminUser, setIsSuperAdminUser] = useState<boolean>(false);
-  const [isCheckingSuperAdmin, setIsCheckingSuperAdmin] = useState<boolean>(false);
-
-  useEffect(() => {
-    const checkSuperAdminStatus = async () => {
-      if (!user?.id) {
-        setIsSuperAdminUser(false);
-        setIsCheckingSuperAdmin(false);
-        return;
-      }
-
-      setIsCheckingSuperAdmin(true);
-      try {
-        const superAdminStatus = await isSuperAdmin(user.id);
-        setIsSuperAdminUser(superAdminStatus);
-      } catch (error) {
-        logger.error('PaceAppLayout', 'Error checking super admin status', { userId: user?.id, error });
-        setIsSuperAdminUser(false);
-      } finally {
-        setIsCheckingSuperAdmin(false);
-      }
-    };
-
-    checkSuperAdminStatus();
-  }, [user?.id]);
+  // Removed duplicate super admin check - using useRBAC hook instead
+  // The useRBAC hook provides isSuperAdmin which is more reliable
 
   // Use useCan hook for permission checking (standardized approach)
   // Note: The database function already handles super admin bypass, but we check here
   // as an additional safety layer to prevent unnecessary permission checks
   // Pass appName to useCan so it can be passed to isPermitted for PORTAL/ADMIN special case
+  // Only check permissions if enforcePermissions is true and we have a valid permission string
+  const shouldCheckPermission = enforcePermissions && !!currentPermission && !!currentPageId;
   const { can: canFromHook, isLoading: isCheckingPermission, error: permissionError } = useCan(
     user?.id || '',
     scope,
-    currentPermission,
-    currentPageId,
+    shouldCheckPermission ? currentPermission : ('' as Permission),
+    shouldCheckPermission ? currentPageId : '',
     true, // useCache
     appName // Pass appName for PORTAL/ADMIN special case
   );
 
   // Permission enforcement state - super admin bypasses all checks
   // This ensures super admins never see permission errors even if useCan hasn't completed
-  const can = isSuperAdminUser ? true : canFromHook;
+  // Use combined super admin check (RBAC + direct check)
+  const can = isSuperAdmin ? true : canFromHook;
   const hasPermission = enforcePermissions ? can : true;
 
   // Handle permission check results with audit logging and callbacks
@@ -524,19 +546,20 @@ export function PaceAppLayout({
     }
 
     // Only proceed when permission check is complete (not loading)
-    // Wait for both super admin check and permission check to complete
-    if (isCheckingSuperAdmin || isCheckingPermission) {
+    // Super admin status is checked via useRBAC hook (isSuperAdminFromRBAC)
+    // If RBAC is still loading, allow rendering to proceed (optimistic for super admins)
+    if (isCheckingPermission) {
       return;
     }
 
     // NEW: Phase 1 - Enhanced Security Features
     // Handle strict mode violations - skip for super admins
-    if (strictMode && !isSuperAdminUser && !can) {
+    if (strictMode && !isSuperAdmin && !can) {
       logger.error('PaceAppLayout', 'STRICT MODE VIOLATION: User attempted to access protected page without permission', {
         pageName: currentPageId,
         operation: currentRoutePermission,
         userId: user?.id,
-        isSuperAdmin: isSuperAdminUser,
+        isSuperAdmin: isSuperAdmin,
         timestamp: new Date().toISOString()
       });
       
@@ -546,10 +569,10 @@ export function PaceAppLayout({
     }
     
     // Handle page access denied callback - skip for super admins
-    if (!isSuperAdminUser && !can && onPageAccessDenied) {
+    if (!isSuperAdmin && !can && onPageAccessDenied) {
       onPageAccessDenied(currentPageId, currentRoutePermission);
     }
-  }, [enforcePermissions, can, isCheckingPermission, isCheckingSuperAdmin, isSuperAdminUser, currentPageId, currentRoutePermission, user?.id, strictMode, auditLog, onPageAccessDenied, onStrictModeViolation]);
+  }, [enforcePermissions, can, isCheckingPermission, isSuperAdmin, currentPageId, currentRoutePermission, user?.id, strictMode, auditLog, onPageAccessDenied, onStrictModeViolation]);
 
   // Filter navigation items based on permissions
   // Permission filtering is always enabled - users only see navigation items they have permission to access
@@ -610,8 +633,8 @@ export function PaceAppLayout({
       // For super admins, show all items (they bypass permission checks)
       // Gracefully handle RBAC not being initialized (e.g., in tests)
       try {
-        const { isSuperAdmin } = await import('../../rbac/api');
-        const isSuper = await isSuperAdmin(user.id);
+        const { isSuperAdmin: checkSuperAdminDynamic } = await import('../../rbac/api');
+        const isSuper = await checkSuperAdminDynamic(user.id);
         
         if (isSuper) {
           // Super admins see all navigation items
@@ -825,7 +848,13 @@ export function PaceAppLayout({
   // This is critical - we must wait for organisation context before allowing any data access
   // BUT: Allow rendering to proceed if loading is complete, even if user has no organisations (valid state for profile pages)
   // Only block if we're actively loading - once loading completes (success or error), allow rendering
-  if (user?.id && organisationLoading) {
+  // EXCEPTION: Super admins can proceed even during organisation loading (they can access all orgs)
+  // Use combined super admin check (RBAC + direct check) to allow super admins to proceed immediately
+  // IMPORTANT: If we're still checking super admin status, allow rendering to proceed (optimistic approach)
+  // This prevents blocking super admins while their status is being determined
+  // Also allow rendering if we already have a selectedOrganisationId (even if organisationLoading is still true)
+  // This prevents blank pages when organisation context is available but loading state hasn't cleared yet
+  if (user?.id && organisationLoading && !isSuperAdmin && !isCheckingSuperAdminDirect && !rbacLoading && !selectedOrganisationId) {
     return (
       <div className="flex items-center justify-center min-h-screen">
         <div className="text-center">
@@ -841,10 +870,10 @@ export function PaceAppLayout({
   // These pages work with user context only and don't require organisation context
   // The app can check hasValidOrganisationContext() to determine if org context is available for org-specific features
 
-  // Show loading state while checking permissions or super admin status
-  // Keep loading active until BOTH checks complete to prevent exposing protected content
-  // This ensures we don't render the main layout when permission check failed but super admin check is pending
-  if (enforcePermissions && (isCheckingSuperAdmin || isCheckingPermission)) {
+  // Show loading state while checking permissions
+  // Keep loading active until permission check completes to prevent exposing protected content
+  // Super admin status is checked via useRBAC hook (isSuperAdminFromRBAC)
+  if (enforcePermissions && isCheckingPermission) {
     return (
       <div className="flex items-center justify-center min-h-screen">
         <div className="text-center">
@@ -857,7 +886,7 @@ export function PaceAppLayout({
 
   // Show permission error (only after BOTH checks are complete)
   // Super admins bypass all permission checks, so don't show errors for them
-  if (enforcePermissions && permissionError && !isSuperAdminUser) {
+  if (enforcePermissions && permissionError && !isSuperAdmin) {
     return (
       <div className="flex items-center justify-center min-h-screen">
         <div className="text-center">
@@ -871,7 +900,7 @@ export function PaceAppLayout({
 
   // Show permission fallback if user lacks permission
   // Only show this if super admin check is complete and user is not a super admin
-  if (enforcePermissions && hasPermission === false && !isCheckingSuperAdmin && !isSuperAdminUser) {
+  if (enforcePermissions && hasPermission === false && !isCheckingSuperAdminDirect && !isSuperAdmin) {
     // NEW: Phase 1 - Use page permission fallback if available
     if (enforcePagePermissions && pagePermissionFallback) {
       return <>{pagePermissionFallback}</>;

package/src/components/PaceAppLayout/README.md

@@ -309,7 +309,7 @@ function App() {
 
 ## Dependencies
 
-- React 18+
+- React 19+
 - React Router v6
 - UnifiedAuthProvider
 - Header component

package/src/components/PaceLoginPage/PaceLoginPage.tsx

@@ -111,7 +111,7 @@
  * - Automatic redirect prevention loops
  *
  * @dependencies
- * - React 18+ - Hooks and effects
+ * - React 19+ - Hooks and effects
  * - React Router v6 - Navigation
  * - UnifiedAuthProvider - Authentication
  * - LoginForm component
@@ -208,7 +208,6 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
         }
       } catch (error) {
         // Service may not be available yet or events not loaded - that's okay
-        logger.debug('PaceLoginPage', 'Could not restore persisted event (service may not be ready):', error);
       }
     };
     
@@ -266,7 +265,6 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
           .eq('app_id', appData.id);
 
         if (pagesError || !pagesData || pagesData.length === 0) {
-          logger.debug('PaceLoginPage', 'No pages configured for app:', appName);
           setAccessError(`You do not have permission to access ${appName}. This application is currently unavailable. Please contact your administrator if you believe you should have access.`);
           setIsCheckingAccess(false);
           return;
@@ -285,7 +283,6 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
         const organisationId = orgRow?.organisation_id;
 
         if (!organisationId) {
-          logger.debug('PaceLoginPage', 'User has no organisation access');
           setAccessError(`You do not have permission to access ${appName}. You are not assigned to any organisation. Please contact your administrator.`);
           setIsCheckingAccess(false);
           return;
@@ -305,8 +302,6 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
               p_page_id: page.page_name // Page name to resolve to UUID
             });
 
-          logger.debug('PaceLoginPage', 'Permission check for page:', { pageName: page.page_name, hasPermission, error: permError });
-
           if (!permError && hasPermission === true) {
             hasAnyAccess = true;
             break;
@@ -314,14 +309,12 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
         }
 
         if (hasAnyAccess) {
-          logger.debug('PaceLoginPage', 'User has access to app');
           setIsCheckingAccess(false);
           navigate(onSuccessRedirectPath, { replace: true });
           return;
         }
 
         // No access - deny
-        logger.debug('PaceLoginPage', 'Access denied - no permissions');
         setAccessError(`You do not have permission to access ${appName}. This application is restricted to authorized users only. Please contact your administrator if you believe you should have access.`);
         setIsCheckingAccess(false);
       } catch (error) {

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

@@ -55,13 +55,13 @@ vi.mock('../Label', () => ({
 
 describe('PasswordChangeForm', () => {
   const mockOnSubmit = vi.fn();
-  const defaultProps: PasswordChangeFormProps = {
+  const baseProps: PasswordChangeFormProps = {
     onSubmit: mockOnSubmit
   };
 
     describe('Rendering', () => {
     it('renders password change form with all elements', () => {
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       expect(screen.getByLabelText('New Password')).toBeInTheDocument();
       expect(screen.getByLabelText('Confirm Password')).toBeInTheDocument();
@@ -70,14 +70,14 @@ describe('PasswordChangeForm', () => {
 
     it('renders with custom className', () => {
       const customClass = 'custom-password-change-form';
-      const { container } = render(<PasswordChangeForm {...defaultProps} className={customClass} />);
+      const { container } = render(<PasswordChangeForm {...baseProps} className={customClass} />);
 
       const form = container.querySelector('form');
       expect(form).toHaveClass(customClass);
     });
 
     it('has proper form structure and accessibility', () => {
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       expect(newPasswordInput).toHaveAttribute('type', 'password');
@@ -97,7 +97,7 @@ describe('PasswordChangeForm', () => {
   describe('Form Interaction', () => {
     it('updates new password input value when user types', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       await user.type(newPasswordInput, 'newpassword123');
@@ -107,7 +107,7 @@ describe('PasswordChangeForm', () => {
 
     it('updates confirm password input value when user types', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
       await user.type(confirmPasswordInput, 'newpassword123');
@@ -117,7 +117,7 @@ describe('PasswordChangeForm', () => {
 
     it('enables submit button when both passwords are provided', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -133,7 +133,7 @@ describe('PasswordChangeForm', () => {
 
     it('disables submit button when new password is empty', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
       const submitButton = screen.getByRole('button', { name: 'Change Password' });
@@ -145,7 +145,7 @@ describe('PasswordChangeForm', () => {
 
     it('disables submit button when confirm password is empty', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const submitButton = screen.getByRole('button', { name: 'Change Password' });
@@ -159,7 +159,7 @@ describe('PasswordChangeForm', () => {
   describe('Form Validation', () => {
     it('shows error when password is too short', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -175,7 +175,7 @@ describe('PasswordChangeForm', () => {
 
     it('shows error when passwords do not match', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -191,7 +191,7 @@ describe('PasswordChangeForm', () => {
 
     it('validates password length before checking match', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -207,7 +207,7 @@ describe('PasswordChangeForm', () => {
 
     it('clears error when form is resubmitted with valid data', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -236,7 +236,7 @@ describe('PasswordChangeForm', () => {
       const user = userEvent.setup();
       mockOnSubmit.mockResolvedValue({});
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -254,7 +254,7 @@ describe('PasswordChangeForm', () => {
 
     it('prevents form submission when validation fails', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -273,7 +273,7 @@ describe('PasswordChangeForm', () => {
       const user = userEvent.setup();
       mockOnSubmit.mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)));
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -291,7 +291,7 @@ describe('PasswordChangeForm', () => {
       const user = userEvent.setup();
       mockOnSubmit.mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)));
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -309,7 +309,7 @@ describe('PasswordChangeForm', () => {
       const user = userEvent.setup();
       mockOnSubmit.mockResolvedValue({});
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -329,7 +329,7 @@ describe('PasswordChangeForm', () => {
       const user = userEvent.setup();
       mockOnSubmit.mockResolvedValue({ error: { message: 'Test error' } });
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -352,7 +352,7 @@ describe('PasswordChangeForm', () => {
       const errorMessage = 'Password change failed';
       mockOnSubmit.mockResolvedValue({ error: { message: errorMessage } });
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -373,7 +373,7 @@ describe('PasswordChangeForm', () => {
       const errorMessage = 'Network error';
       mockOnSubmit.mockRejectedValue(new Error(errorMessage));
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -393,7 +393,7 @@ describe('PasswordChangeForm', () => {
       const user = userEvent.setup();
       mockOnSubmit.mockRejectedValue('String error');
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -412,7 +412,7 @@ describe('PasswordChangeForm', () => {
       const user = userEvent.setup();
       mockOnSubmit.mockResolvedValue({ error: { code: 'INVALID_PASSWORD' } });
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -433,7 +433,7 @@ describe('PasswordChangeForm', () => {
         .mockResolvedValueOnce({ error: { message: 'First error' } })
         .mockResolvedValueOnce({});
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -457,7 +457,7 @@ describe('PasswordChangeForm', () => {
 
   describe('Accessibility', () => {
     it('has proper form labels and associations', () => {
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       expect(newPasswordInput).toHaveAttribute('id', 'new-password');
@@ -472,7 +472,7 @@ describe('PasswordChangeForm', () => {
       const user = userEvent.setup();
       mockOnSubmit.mockResolvedValue({ error: { message: 'Test error' } });
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -492,7 +492,7 @@ describe('PasswordChangeForm', () => {
       const user = userEvent.setup();
       mockOnSubmit.mockResolvedValue({});
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -510,7 +510,7 @@ describe('PasswordChangeForm', () => {
 
   describe('Edge Cases', () => {
     it('handles empty password values', () => {
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const submitButton = screen.getByRole('button', { name: 'Change Password' });
 
@@ -519,7 +519,7 @@ describe('PasswordChangeForm', () => {
 
     it('handles whitespace-only passwords', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -538,7 +538,7 @@ describe('PasswordChangeForm', () => {
       const longPassword = 'a'.repeat(1000);
       mockOnSubmit.mockResolvedValue({});
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -559,7 +559,7 @@ describe('PasswordChangeForm', () => {
       const specialPassword = 'P@ssw0rd!@#$%^&*()_+-=';
       mockOnSubmit.mockResolvedValue({});
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -580,7 +580,7 @@ describe('PasswordChangeForm', () => {
       const unicodePassword = 'pássw0rd_测试_пароль';
       mockOnSubmit.mockResolvedValue({});
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -600,7 +600,7 @@ describe('PasswordChangeForm', () => {
   describe('Performance', () => {
     it('handles rapid input changes efficiently', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       

package/src/components/PasswordChange/PasswordChangeForm.tsx

@@ -90,7 +90,7 @@
  * - Proper error handling
  *
  * @dependencies
- * - React 18+ - Hooks and state
+ * - React 19+ - Hooks and state
  * - Button component
  * - Input component
  * - Label component