website refactor

apps/website/app/auth/reset-password/ResetPasswordClient.tsx

@@ -0,0 +1,139 @@
+/**
+ * Reset Password Client Component
+ * 
+ * Handles client-side reset password flow.
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { ResetPasswordViewData } from '@/lib/builders/view-data/ResetPasswordViewDataBuilder';
+import { ResetPasswordTemplate } from '@/templates/auth/ResetPasswordTemplate';
+import { ResetPasswordMutation } from '@/lib/mutations/auth/ResetPasswordMutation';
+import { ResetPasswordViewModelBuilder } from '@/lib/builders/view-models/ResetPasswordViewModelBuilder';
+import { ResetPasswordViewModel } from '@/lib/view-models/auth/ResetPasswordViewModel';
+
+interface ResetPasswordClientProps {
+  viewData: ResetPasswordViewData;
+}
+
+export function ResetPasswordClient({ viewData }: ResetPasswordClientProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  
+  // Build ViewModel from ViewData
+  const [viewModel, setViewModel] = useState<ResetPasswordViewModel>(() => 
+    ResetPasswordViewModelBuilder.build(viewData)
+  );
+
+  const [formData, setFormData] = useState({ 
+    newPassword: '', 
+    confirmPassword: '' 
+  });
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    // Validate passwords match
+    if (formData.newPassword !== formData.confirmPassword) {
+      setViewModel(prev => prev.withMutationState(false, 'Passwords do not match'));
+      return;
+    }
+
+    // Update submitting state
+    setViewModel(prev => prev.withMutationState(true, null));
+
+    try {
+      const token = searchParams.get('token');
+      if (!token) {
+        setViewModel(prev => prev.withMutationState(false, 'Invalid reset link'));
+        return;
+      }
+
+      // Execute reset password mutation
+      const mutation = new ResetPasswordMutation();
+      const result = await mutation.execute({
+        token,
+        newPassword: formData.newPassword,
+      });
+
+      if (result.isErr()) {
+        const error = result.getError();
+        setViewModel(prev => prev.withMutationState(false, error));
+        return;
+      }
+
+      // Success
+      const data = result.unwrap();
+      setViewModel(prev => prev.withSuccess(data.message));
+      
+      // Redirect to login after a delay
+      setTimeout(() => {
+        router.push('/auth/login');
+      }, 3000);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to reset password';
+      setViewModel(prev => prev.withMutationState(false, errorMessage));
+    }
+  };
+
+  // Toggle password visibility
+  const togglePassword = () => {
+    setViewModel(prev => prev.withUIState({
+      ...prev.uiState,
+      showPassword: !prev.uiState.showPassword,
+    }));
+  };
+
+  const toggleConfirmPassword = () => {
+    setViewModel(prev => prev.withUIState({
+      ...prev.uiState,
+      showConfirmPassword: !prev.uiState.showConfirmPassword,
+    }));
+  };
+
+  // Build viewData for template
+  const templateViewData: ResetPasswordViewData = {
+    ...viewData,
+    showSuccess: viewModel.showSuccess,
+    successMessage: viewModel.successMessage || undefined,
+    formState: viewModel.formState,
+    isSubmitting: viewModel.isSubmitting,
+    submitError: viewModel.submitError,
+  };
+
+  return (
+    <ResetPasswordTemplate
+      // Spread the viewData properties
+      token={templateViewData.token}
+      returnTo={templateViewData.returnTo}
+      showSuccess={templateViewData.showSuccess}
+      successMessage={templateViewData.successMessage}
+      formState={templateViewData.formState}
+      isSubmitting={templateViewData.isSubmitting}
+      submitError={templateViewData.submitError}
+      // Add the additional props
+      formActions={{
+        setFormData,
+        handleSubmit,
+        setShowSuccess: (show) => {
+          if (!show) {
+            // Reset to initial state
+            setViewModel(prev => ResetPasswordViewModelBuilder.build(viewData));
+          }
+        },
+        setShowPassword: togglePassword,
+        setShowConfirmPassword: toggleConfirmPassword,
+      }}
+      uiState={{
+        showPassword: viewModel.uiState.showPassword,
+        showConfirmPassword: viewModel.uiState.showConfirmPassword,
+      }}
+      mutationState={{
+        isPending: viewModel.mutationPending,
+        error: viewModel.mutationError,
+      }}
+    />
+  );
+}

apps/website/app/auth/reset-password/page.tsx

@@ -1,371 +1,34 @@
-'use client';
+/**
+ * Reset Password Page
+ *
+ * RSC composition pattern:
+ * 1. PageQuery executes to get ViewData
+ * 2. Client component renders with ViewData
+ */
 
-import { useState, FormEvent, type ChangeEvent, useEffect } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import Link from 'next/link';
-import { motion } from 'framer-motion';
-import {
-  Lock,
-  Eye,
-  EyeOff,
-  AlertCircle,
-  Flag,
-  Shield,
-  CheckCircle2,
-  ArrowLeft,
-} from 'lucide-react';
+import { ResetPasswordPageQuery } from '@/lib/page-queries/auth/ResetPasswordPageQuery';
+import { ResetPasswordClient } from './ResetPasswordClient';
 
-import Card from '@/components/ui/Card';
-import Button from '@/components/ui/Button';
-import Input from '@/components/ui/Input';
-import Heading from '@/components/ui/Heading';
-import { useAuth } from '@/lib/auth/AuthContext';
-import { useResetPassword } from "@/lib/hooks/auth/useResetPassword";
+export default async function ResetPasswordPage({
+  searchParams,
+}: {
+  searchParams: Promise<URLSearchParams>;
+}) {
+  // Execute PageQuery
+  const params = await searchParams;
+  const queryResult = await ResetPasswordPageQuery.execute(params);
 
-interface FormErrors {
-  newPassword?: string;
-  confirmPassword?: string;
-  submit?: string;
-}
-
-interface PasswordStrength {
-  score: number;
-  label: string;
-  color: string;
-}
-
-function checkPasswordStrength(password: string): PasswordStrength {
-  let score = 0;
-  if (password.length >= 8) score++;
-  if (password.length >= 12) score++;
-  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score++;
-  if (/\d/.test(password)) score++;
-  if (/[^a-zA-Z\d]/.test(password)) score++;
-
-  if (score <= 1) return { score, label: 'Weak', color: 'bg-red-500' };
-  if (score <= 2) return { score, label: 'Fair', color: 'bg-warning-amber' };
-  if (score <= 3) return { score, label: 'Good', color: 'bg-primary-blue' };
-  return { score, label: 'Strong', color: 'bg-performance-green' };
-}
-
-export default function ResetPasswordPage() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const { session } = useAuth();
-  
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-  const [errors, setErrors] = useState<FormErrors>({});
-  const [success, setSuccess] = useState<string | null>(null);
-  const [formData, setFormData] = useState({
-    newPassword: '',
-    confirmPassword: '',
-  });
-  const [token, setToken] = useState<string>('');
-
-  // Check if user is already authenticated
-  useEffect(() => {
-    if (session) {
-      router.replace('/dashboard');
-    }
-  }, [session, router]);
-
-  // Extract token from URL on mount
-  useEffect(() => {
-    const tokenParam = searchParams.get('token');
-    if (tokenParam) {
-      setToken(tokenParam);
-    }
-  }, [searchParams]);
-
-  const passwordStrength = checkPasswordStrength(formData.newPassword);
-
-  const passwordRequirements = [
-    { met: formData.newPassword.length >= 8, label: 'At least 8 characters' },
-    { met: /[a-z]/.test(formData.newPassword) && /[A-Z]/.test(formData.newPassword), label: 'Upper and lowercase letters' },
-    { met: /\d/.test(formData.newPassword), label: 'At least one number' },
-    { met: /[^a-zA-Z\d]/.test(formData.newPassword), label: 'At least one special character' },
-  ];
-
-  const validateForm = (): boolean => {
-    const newErrors: FormErrors = {};
-
-    if (!formData.newPassword) {
-      newErrors.newPassword = 'New password is required';
-    } else if (formData.newPassword.length < 8) {
-      newErrors.newPassword = 'Password must be at least 8 characters';
-    } else if (!/[a-z]/.test(formData.newPassword) || !/[A-Z]/.test(formData.newPassword) || !/\d/.test(formData.newPassword)) {
-      newErrors.newPassword = 'Password must contain uppercase, lowercase, and number';
-    }
-
-    if (!formData.confirmPassword) {
-      newErrors.confirmPassword = 'Please confirm your password';
-    } else if (formData.newPassword !== formData.confirmPassword) {
-      newErrors.confirmPassword = 'Passwords do not match';
-    }
-
-    if (!token) {
-      newErrors.submit = 'Invalid reset token. Please request a new reset link.';
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  // Use reset password mutation hook
-  const resetPasswordMutation = useResetPassword({
-    onSuccess: (result) => {
-      setSuccess(result.message);
-    },
-    onError: (error) => {
-      setErrors({
-        submit: error.message || 'Failed to reset password. Please try again.',
-      });
-    },
-  });
-
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    if (resetPasswordMutation.isPending) return;
-
-    if (!validateForm()) return;
-
-    setErrors({});
-    setSuccess(null);
-
-    try {
-      await resetPasswordMutation.mutateAsync({
-        token,
-        newPassword: formData.newPassword,
-      });
-    } catch (error) {
-      // Error handling is done in the mutation's onError callback
-    }
-  };
-
-  // Loading state from mutation
-  const loading = resetPasswordMutation.isPending;
-
-  return (
-    <main className="min-h-screen bg-deep-graphite flex items-center justify-center px-4 py-12">
-      {/* Background Pattern */}
-      <div className="absolute inset-0 bg-gradient-to-br from-primary-blue/5 via-transparent to-purple-600/5" />
-      <div className="absolute inset-0 opacity-5">
-        <div className="absolute inset-0" style={{
-          backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
-        }} />
+  if (queryResult.isErr()) {
+    // Handle query error
+    return (
+      <div className="min-h-screen bg-deep-graphite flex items-center justify-center">
+        <div className="text-red-400">Failed to load reset password page</div>
       </div>
+    );
+  }
 
-      <div className="relative w-full max-w-md">
-        {/* Header */}
-        <div className="text-center mb-8">
-          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30 mx-auto mb-4">
-            <Lock className="w-8 h-8 text-primary-blue" />
-          </div>
-          <Heading level={1} className="mb-2">Set New Password</Heading>
-          <p className="text-gray-400">
-            Create a strong password for your account
-          </p>
-        </div>
+  const viewData = queryResult.unwrap();
 
-        <Card className="relative overflow-hidden">
-          {/* Background accent */}
-          <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />
-
-          {!success ? (
-            <form onSubmit={handleSubmit} className="relative space-y-5">
-              {/* New Password */}
-              <div>
-                <label htmlFor="newPassword" className="block text-sm font-medium text-gray-300 mb-2">
-                  New Password
-                </label>
-                <div className="relative">
-                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
-                  <Input
-                    id="newPassword"
-                    type={showPassword ? 'text' : 'password'}
-                    value={formData.newPassword}
-                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, newPassword: e.target.value })}
-                    error={!!errors.newPassword}
-                    errorMessage={errors.newPassword}
-                    placeholder="••••••••"
-                    disabled={loading}
-                    className="pl-10 pr-10"
-                    autoComplete="new-password"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(!showPassword)}
-                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
-                  >
-                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                  </button>
-                </div>
-
-                {/* Password Strength */}
-                {formData.newPassword && (
-                  <div className="mt-3 space-y-2">
-                    <div className="flex items-center gap-2">
-                      <div className="flex-1 h-1.5 rounded-full bg-charcoal-outline overflow-hidden">
-                        <motion.div
-                          className={`h-full ${passwordStrength.color}`}
-                          initial={{ width: 0 }}
-                          animate={{ width: `${(passwordStrength.score / 5) * 100}%` }}
-                          transition={{ duration: 0.3 }}
-                        />
-                      </div>
-                      <span className={`text-xs font-medium ${
-                        passwordStrength.score <= 1 ? 'text-red-400' :
-                        passwordStrength.score <= 2 ? 'text-warning-amber' :
-                        passwordStrength.score <= 3 ? 'text-primary-blue' :
-                        'text-performance-green'
-                      }`}>
-                        {passwordStrength.label}
-                      </span>
-                    </div>
-                    <div className="grid grid-cols-2 gap-1">
-                      {passwordRequirements.map((req, index) => (
-                        <div key={index} className="flex items-center gap-1.5 text-xs">
-                          {req.met ? (
-                            <CheckCircle2 className="w-3 h-3 text-performance-green" />
-                          ) : (
-                            <AlertCircle className="w-3 h-3 text-gray-500" />
-                          )}
-                          <span className={req.met ? 'text-gray-300' : 'text-gray-500'}>
-                            {req.label}
-                          </span>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              {/* Confirm Password */}
-              <div>
-                <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-300 mb-2">
-                  Confirm Password
-                </label>
-                <div className="relative">
-                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
-                  <Input
-                    id="confirmPassword"
-                    type={showConfirmPassword ? 'text' : 'password'}
-                    value={formData.confirmPassword}
-                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, confirmPassword: e.target.value })}
-                    error={!!errors.confirmPassword}
-                    errorMessage={errors.confirmPassword}
-                    placeholder="••••••••"
-                    disabled={loading}
-                    className="pl-10 pr-10"
-                    autoComplete="new-password"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
-                  >
-                    {showConfirmPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                  </button>
-                </div>
-                {formData.confirmPassword && formData.newPassword === formData.confirmPassword && (
-                  <p className="mt-1 text-xs text-performance-green flex items-center gap-1">
-                    <CheckCircle2 className="w-3 h-3" /> Passwords match
-                  </p>
-                )}
-              </div>
-
-              {/* Error Message */}
-              {errors.submit && (
-                <motion.div
-                  initial={{ opacity: 0, y: -10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  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>
-              )}
-
-              {/* Submit Button */}
-              <Button
-                type="submit"
-                variant="primary"
-                disabled={loading}
-                className="w-full flex items-center justify-center gap-2"
-              >
-                {loading ? (
-                  <>
-                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                    Resetting...
-                  </>
-                ) : (
-                  <>
-                    <Lock className="w-4 h-4" />
-                    Reset Password
-                  </>
-                )}
-              </Button>
-
-              {/* Back to Login */}
-              <div className="text-center">
-                <Link
-                  href="/auth/login"
-                  className="text-sm text-primary-blue hover:underline flex items-center justify-center gap-1"
-                >
-                  <ArrowLeft className="w-4 h-4" />
-                  Back to Login
-                </Link>
-              </div>
-            </form>
-          ) : (
-            <motion.div
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0 }}
-              className="relative space-y-4"
-            >
-              <div className="flex items-start gap-3 p-4 rounded-lg bg-performance-green/10 border border-performance-green/30">
-                <CheckCircle2 className="w-6 h-6 text-performance-green flex-shrink-0 mt-0.5" />
-                <div>
-                  <p className="text-sm text-performance-green font-medium">{success}</p>
-                  <p className="text-xs text-gray-400 mt-1">
-                    Your password has been successfully reset
-                  </p>
-                </div>
-              </div>
-
-              <Button
-                type="button"
-                variant="primary"
-                onClick={() => router.push('/auth/login')}
-                className="w-full"
-              >
-                Login with New Password
-              </Button>
-            </motion.div>
-          )}
-        </Card>
-
-        {/* Trust Indicators */}
-        <div className="mt-6 flex items-center justify-center gap-6 text-sm text-gray-500">
-          <div className="flex items-center gap-2">
-            <Shield className="w-4 h-4" />
-            <span>Encrypted & secure</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <CheckCircle2 className="w-4 h-4" />
-            <span>Instant update</span>
-          </div>
-        </div>
-
-        {/* Footer */}
-        <p className="mt-6 text-center text-xs text-gray-500">
-          Need help?{' '}
-          <Link href="/support" className="text-gray-400 hover:underline">
-            Contact support
-          </Link>
-        </p>
-      </div>
-    </main>
-  );
+  // Render client component with ViewData
+  return <ResetPasswordClient viewData={viewData} />;
 }