page wrapper

2026-01-07 12:40:52 +01:00
parent e589c30bf8
commit 0db80fa98d
128 changed files with 7386 additions and 8096 deletions
--- a/apps/website/app/auth/login/page.tsx
+++ b/apps/website/app/auth/login/page.tsx
@@ -23,107 +23,26 @@ import { useAuth } from '@/lib/auth/AuthContext';
 import { useLogin } from '@/hooks/auth/useLogin';
 import AuthWorkflowMockup from '@/components/auth/AuthWorkflowMockup';
 import UserRolesPreview from '@/components/auth/UserRolesPreview';
-import { EnhancedFormError, FormErrorSummary } from '@/components/errors/EnhancedFormError';
+import { EnhancedFormError } from '@/components/errors/EnhancedFormError';
 import { useEnhancedForm } from '@/lib/hooks/useEnhancedForm';
 import { validateLoginForm, type LoginFormValues } from '@/lib/utils/validation';
 import { logErrorWithContext } from '@/lib/utils/errorUtils';
+import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';

-export default function LoginPage() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const { refreshSession, session } = useAuth();
-  const returnTo = searchParams.get('returnTo') ?? '/dashboard';
-  
-  const [showPassword, setShowPassword] = useState(false);
-  const [showErrorDetails, setShowErrorDetails] = useState(false);
-  const [hasInsufficientPermissions, setHasInsufficientPermissions] = useState(false);
-
-  // Use login mutation hook
-  const loginMutation = useLogin({
-    onSuccess: async () => {
-      // Refresh session in context so header updates immediately
-      await refreshSession();
-      router.push(returnTo);
-    },
-    onError: (error) => {
-      // Show error details toggle in development
-      if (process.env.NODE_ENV === 'development') {
-        setShowErrorDetails(true);
-      }
-    },
-  });
-
-  // Check if user is already authenticated
-  useEffect(() => {
-    console.log('[LoginPage] useEffect running', {
-      session: session ? 'exists' : 'null',
-      returnTo: searchParams.get('returnTo'),
-      pathname: window.location.pathname,
-      search: window.location.search,
-    });
-    
-    if (session) {
-      // Check if this is a returnTo redirect (user lacks permissions)
-      const isPermissionRedirect = searchParams.get('returnTo') !== null;
-      
-      console.log('[LoginPage] Authenticated user check', {
-        isPermissionRedirect,
-        returnTo: searchParams.get('returnTo'),
-      });
-      
-      if (isPermissionRedirect) {
-        // User was redirected here due to insufficient permissions
-        // Show permission error instead of redirecting
-        console.log('[LoginPage] Showing permission error');
-        setHasInsufficientPermissions(true);
-      } else {
-        // User navigated here directly while authenticated, redirect to dashboard
-        console.log('[LoginPage] Redirecting to dashboard');
-        router.replace('/dashboard');
-      }
-    }
-  }, [session, router, searchParams]);
-
-  // Use enhanced form hook
+// Template component for login UI
+function LoginTemplate({ data }: { data: { returnTo: string; hasInsufficientPermissions: boolean; showPassword: boolean; showErrorDetails: boolean; formState: any; handleChange: any; handleSubmit: any; setFormState: any; setShowPassword: any; setShowErrorDetails: any; } }) {
  const {
+    returnTo,
+    hasInsufficientPermissions,
+    showPassword,
+    showErrorDetails,
    formState,
-    setFormState,
    handleChange,
    handleSubmit,
-    setFormError,
-  } = useEnhancedForm<LoginFormValues>({
-    initialValues: {
-      email: '',
-      password: '',
-      rememberMe: false,
-    },
-    validate: validateLoginForm,
-    component: 'LoginPage',
-    onSubmit: async (values) => {
-      // Log the attempt for debugging
-      logErrorWithContext(
-        { message: 'Login attempt', values: { ...values, password: '[REDACTED]' } },
-        {
-          component: 'LoginPage',
-          action: 'login-submit',
-          formData: { ...values, password: '[REDACTED]' },
-        }
-      );
-      
-      await loginMutation.mutateAsync({
-        email: values.email,
-        password: values.password,
-        rememberMe: values.rememberMe,
-      });
-    },
-    onError: (error, values) => {
-      // Error handling is done in the mutation's onError callback
-    },
-    onSuccess: () => {
-      // Reset error details on success
-      setShowErrorDetails(false);
-    },
-  });
+    setFormState,
+    setShowPassword,
+    setShowErrorDetails,
+  } = data;

  return (
    <main className="min-h-screen bg-deep-graphite flex">
@@ -303,7 +222,7 @@ export default function LoginPage() {
                    error={new Error(formState.submitError)}
                    onDismiss={() => {
                      // Clear the error by setting submitError to undefined
-                      setFormState(prev => ({ ...prev, submitError: undefined }));
+                      setFormState((prev: typeof formState) => ({ ...prev, submitError: undefined }));
                    }}
                    showDeveloperDetails={showErrorDetails}
                  />
@@ -377,4 +296,131 @@ export default function LoginPage() {
      </div>
    </main>
  );
+}
+
+export default function LoginPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { refreshSession, session } = useAuth();
+  const returnTo = searchParams.get('returnTo') ?? '/dashboard';
+  
+  const [showPassword, setShowPassword] = useState(false);
+  const [showErrorDetails, setShowErrorDetails] = useState(false);
+  const [hasInsufficientPermissions, setHasInsufficientPermissions] = useState(false);
+
+  // Use login mutation hook
+  const loginMutation = useLogin({
+    onSuccess: async () => {
+      // Refresh session in context so header updates immediately
+      await refreshSession();
+      router.push(returnTo);
+    },
+    onError: (error) => {
+      // Show error details toggle in development
+      if (process.env.NODE_ENV === 'development') {
+        setShowErrorDetails(true);
+      }
+    },
+  });
+
+  // Check if user is already authenticated
+  useEffect(() => {
+    console.log('[LoginPage] useEffect running', {
+      session: session ? 'exists' : 'null',
+      returnTo: searchParams.get('returnTo'),
+      pathname: window.location.pathname,
+      search: window.location.search,
+    });
+    
+    if (session) {
+      // Check if this is a returnTo redirect (user lacks permissions)
+      const isPermissionRedirect = searchParams.get('returnTo') !== null;
+      
+      console.log('[LoginPage] Authenticated user check', {
+        isPermissionRedirect,
+        returnTo: searchParams.get('returnTo'),
+      });
+      
+      if (isPermissionRedirect) {
+        // User was redirected here due to insufficient permissions
+        // Show permission error instead of redirecting
+        console.log('[LoginPage] Showing permission error');
+        setHasInsufficientPermissions(true);
+      } else {
+        // User navigated here directly while authenticated, redirect to dashboard
+        console.log('[LoginPage] Redirecting to dashboard');
+        router.replace('/dashboard');
+      }
+    }
+  }, [session, router, searchParams]);
+
+  // Use enhanced form hook
+  const {
+    formState,
+    setFormState,
+    handleChange,
+    handleSubmit,
+  } = useEnhancedForm<LoginFormValues>({
+    initialValues: {
+      email: '',
+      password: '',
+      rememberMe: false,
+    },
+    validate: validateLoginForm,
+    component: 'LoginPage',
+    onSubmit: async (values) => {
+      // Log the attempt for debugging
+      logErrorWithContext(
+        { message: 'Login attempt', values: { ...values, password: '[REDACTED]' } },
+        {
+          component: 'LoginPage',
+          action: 'login-submit',
+          formData: { ...values, password: '[REDACTED]' },
+        }
+      );
+      
+      await loginMutation.mutateAsync({
+        email: values.email,
+        password: values.password,
+        rememberMe: values.rememberMe,
+      });
+    },
+    onError: (error, values) => {
+      // Error handling is done in the mutation's onError callback
+    },
+    onSuccess: () => {
+      // Reset error details on success
+      setShowErrorDetails(false);
+    },
+  });
+
+  // Prepare template data
+  const templateData = {
+    returnTo,
+    hasInsufficientPermissions,
+    showPassword,
+    showErrorDetails,
+    formState,
+    handleChange,
+    handleSubmit,
+    setFormState,
+    setShowPassword,
+    setShowErrorDetails,
+  };
+
+  // Mutation state for wrapper
+  const isLoading = loginMutation.isPending;
+  const error = loginMutation.error;
+
+  return (
+    <StatefulPageWrapper
+      data={templateData}
+      isLoading={isLoading}
+      error={error}
+      retry={() => loginMutation.mutate({ email: '', password: '', rememberMe: false })}
+      Template={LoginTemplate}
+      loading={{ variant: 'full-screen', message: 'Loading login...' }}
+      errorConfig={{ variant: 'full-screen' }}
+    />
+  );
 }
--- a/apps/website/app/auth/signup/page.tsx
+++ b/apps/website/app/auth/signup/page.tsx
@@ -15,7 +15,6 @@ import {
  User,
  Check,
  X,
-  Loader2,
  Car,
  Users,
  Trophy,
@@ -29,6 +28,7 @@ import Input from '@/components/ui/Input';
 import Heading from '@/components/ui/Heading';
 import { useAuth } from '@/lib/auth/AuthContext';
 import { useSignup } from '@/hooks/auth/useSignup';
+import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';

 interface FormErrors {
  firstName?: string;
@@ -45,6 +45,10 @@ interface PasswordStrength {
  color: string;
 }

+interface SignupData {
+  placeholder: string;
+}
+
 function checkPasswordStrength(password: string): PasswordStrength {
  let score = 0;
  if (password.length >= 8) score++;
@@ -89,13 +93,12 @@ const FEATURES = [
  'Access detailed performance analytics',
 ];

-export default function SignupPage() {
+const SignupTemplate = ({ data }: { data: SignupData }) => {
  const router = useRouter();
  const searchParams = useSearchParams();
-  const { refreshSession, session } = useAuth();
+  const { refreshSession } = useAuth();
  const returnTo = searchParams.get('returnTo') ?? '/onboarding';
-  
-  const [checkingAuth, setCheckingAuth] = useState(true);
+
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const [errors, setErrors] = useState<FormErrors>({});
@@ -107,32 +110,6 @@ export default function SignupPage() {
    confirmPassword: '',
  });

-  // Check if already authenticated
-  useEffect(() => {
-    if (session) {
-      // Already logged in, redirect to dashboard or return URL
-      router.replace(returnTo === '/onboarding' ? '/dashboard' : returnTo);
-      return;
-    }
-    
-    // If no session, still check via API for consistency
-    async function checkAuth() {
-      try {
-        const response = await fetch('/api/auth/session');
-        const data = await response.json();
-        if (data.authenticated) {
-          // Already logged in, redirect to dashboard or return URL
-          router.replace(returnTo === '/onboarding' ? '/dashboard' : returnTo);
-        }
-      } catch {
-        // Not authenticated, continue showing signup page
-      } finally {
-        setCheckingAuth(false);
-      }
-    }
-    checkAuth();
-  }, [session, router, returnTo]);
-
  const passwordStrength = checkPasswordStrength(formData.password);

  const passwordRequirements = [
@@ -239,18 +216,6 @@ export default function SignupPage() {
    }
  };

-  // Loading state from mutation
-  const loading = signupMutation.isPending;
-
-  // Show loading while checking auth
-  if (checkingAuth) {
-    return (
-      <main className="min-h-screen bg-deep-graphite flex items-center justify-center">
-        <Loader2 className="w-8 h-8 text-primary-blue animate-spin" />
-      </main>
-    );
-  }
-
  return (
    <main className="min-h-screen bg-deep-graphite flex">
      {/* Background Pattern */}
@@ -375,7 +340,7 @@ export default function SignupPage() {
                    error={!!errors.firstName}
                    errorMessage={errors.firstName}
                    placeholder="John"
-                    disabled={loading}
+                    disabled={signupMutation.isPending}
                    className="pl-10"
                    autoComplete="given-name"
                  />
@@ -397,7 +362,7 @@ export default function SignupPage() {
                    error={!!errors.lastName}
                    errorMessage={errors.lastName}
                    placeholder="Smith"
-                    disabled={loading}
+                    disabled={signupMutation.isPending}
                    className="pl-10"
                    autoComplete="family-name"
                  />
@@ -428,7 +393,7 @@ export default function SignupPage() {
                    error={!!errors.email}
                    errorMessage={errors.email}
                    placeholder="you@example.com"
-                    disabled={loading}
+                    disabled={signupMutation.isPending}
                    className="pl-10"
                    autoComplete="email"
                  />
@@ -450,7 +415,7 @@ export default function SignupPage() {
                    error={!!errors.password}
                    errorMessage={errors.password}
                    placeholder="••••••••"
-                    disabled={loading}
+                    disabled={signupMutation.isPending}
                    className="pl-10 pr-10"
                    autoComplete="new-password"
                  />
@@ -517,7 +482,7 @@ export default function SignupPage() {
                    error={!!errors.confirmPassword}
                    errorMessage={errors.confirmPassword}
                    placeholder="••••••••"
-                    disabled={loading}
+                    disabled={signupMutation.isPending}
                    className="pl-10 pr-10"
                    autoComplete="new-password"
                  />
@@ -536,29 +501,14 @@ export default function SignupPage() {
                )}
              </div>

-              {/* Error Message */}
-              <AnimatePresence>
-                {errors.submit && (
-                  <motion.div
-                    initial={{ opacity: 0, y: -10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: -10 }}
-                    className="flex items-start gap-3 p-3 rounded-lg bg-red-500/10 border border-red-500/30"
-                  >
-                    <AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5" />
-                    <p className="text-sm text-red-400">{errors.submit}</p>
-                  </motion.div>
-                )}
-              </AnimatePresence>
-
              {/* Submit Button */}
              <Button
                type="submit"
                variant="primary"
-                disabled={loading}
+                disabled={signupMutation.isPending}
                className="w-full flex items-center justify-center gap-2"
              >
-                {loading ? (
+                {signupMutation.isPending ? (
                  <>
                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                    Creating account...
@@ -620,4 +570,82 @@ export default function SignupPage() {
      </div>
    </main>
  );
+};
+
+export default function SignupPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { refreshSession, session } = useAuth();
+  const returnTo = searchParams.get('returnTo') ?? '/onboarding';
+  
+  const [checkingAuth, setCheckingAuth] = useState(true);
+
+  // Check if already authenticated
+  useEffect(() => {
+    if (session) {
+      // Already logged in, redirect to dashboard or return URL
+      router.replace(returnTo === '/onboarding' ? '/dashboard' : returnTo);
+      return;
+    }
+    
+    // If no session, still check via API for consistency
+    async function checkAuth() {
+      try {
+        const response = await fetch('/api/auth/session');
+        const data = await response.json();
+        if (data.authenticated) {
+          // Already logged in, redirect to dashboard or return URL
+          router.replace(returnTo === '/onboarding' ? '/dashboard' : returnTo);
+        }
+      } catch {
+        // Not authenticated, continue showing signup page
+      } finally {
+        setCheckingAuth(false);
+      }
+    }
+    checkAuth();
+  }, [session, router, returnTo]);
+
+  // Use signup mutation hook for state management
+  const signupMutation = useSignup({
+    onSuccess: async () => {
+      // Refresh session in context so header updates immediately
+      try {
+        await refreshSession();
+      } catch (error) {
+        console.error('Failed to refresh session after signup:', error);
+      }
+      // Always redirect to dashboard after signup
+      router.push('/dashboard');
+    },
+    onError: (error) => {
+      // Error will be handled in the template
+      console.error('Signup error:', error);
+    },
+  });
+
+  // Loading state from mutation
+  const loading = signupMutation.isPending;
+
+  // Show loading while checking auth
+  if (checkingAuth) {
+    return (
+      <main className="min-h-screen bg-deep-graphite flex items-center justify-center">
+        <div className="w-8 h-8 border-2 border-primary-blue border-t-transparent rounded-full animate-spin" />
+      </main>
+    );
+  }
+
+  // Map mutation states to StatefulPageWrapper
+  return (
+    <StatefulPageWrapper
+      data={{ placeholder: 'data' } as SignupData}
+      isLoading={loading}
+      error={signupMutation.error}
+      retry={() => signupMutation.mutate({ email: '', password: '', displayName: '' })}
+      Template={SignupTemplate}
+      loading={{ variant: 'full-screen', message: 'Processing signup...' }}
+      errorConfig={{ variant: 'full-screen' }}
+    />
+  );
 }