feat: implement forgot password and reset password frontend

- Add ForgotPassword page with email submission form
- Add ResetPassword page with token validation and new password form
- Extend AuthContext with requestPasswordReset and resetPassword functions
- Add routes for /forgot-password and /reset-password in App.tsx
- Update Login page to link to forgot password flow instead of showing alert

Implements Fase 1 of frontend missing features analysis

frontend/src/App.tsx

@@ -20,6 +20,8 @@ const Compare = lazy(() => import('./pages/Compare').then(m => ({ default: m.Com
 const Reports = lazy(() => import('./pages/Reports').then(m => ({ default: m.Reports })));
 const Login = lazy(() => import('./pages/Login').then(m => ({ default: m.Login })));
 const Register = lazy(() => import('./pages/Register').then(m => ({ default: m.Register })));
+const ForgotPassword = lazy(() => import('./pages/ForgotPassword').then(m => ({ default: m.ForgotPassword })));
+const ResetPassword = lazy(() => import('./pages/ResetPassword').then(m => ({ default: m.ResetPassword })));
 const ApiKeys = lazy(() => import('./pages/ApiKeys').then(m => ({ default: m.ApiKeys })));
 const AnalyticsDashboard = lazy(() => import('./pages/AnalyticsDashboard').then(m => ({ default: m.AnalyticsDashboard })));
 const NotFound = lazy(() => import('./pages/NotFound').then(m => ({ default: m.NotFound })));
@@ -70,6 +72,8 @@ function App() {
               {/* Public routes */}
               <Route path="/login" element={<Login />} />
               <Route path="/register" element={<Register />} />
+              <Route path="/forgot-password" element={<ForgotPassword />} />
+              <Route path="/reset-password" element={<ResetPassword />} />
               
               {/* Protected routes with layout */}
               <Route path="/" element={<ProtectedLayout />}>

frontend/src/contexts/AuthContext.tsx

@@ -23,6 +23,8 @@ interface AuthContextType {
   login: (email: string, password: string) => Promise<boolean>;
   logout: () => void;
   register: (email: string, password: string, fullName: string) => Promise<boolean>;
+  requestPasswordReset: (email: string) => Promise<boolean>;
+  resetPassword: (token: string, newPassword: string) => Promise<boolean>;
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
@@ -151,13 +153,58 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     localStorage.removeItem(REFRESH_TOKEN_KEY);
     localStorage.removeItem(USER_KEY);
     delete api.defaults.headers.common['Authorization'];
-    
-    showToast({ 
-      title: 'Logged out', 
-      description: 'See you soon!' 
+
+    showToast({
+      title: 'Logged out',
+      description: 'See you soon!'
     });
   }, []);
 
+  const requestPasswordReset = useCallback(async (email: string): Promise<boolean> => {
+    try {
+      await api.post('/auth/reset-password-request', { email });
+
+      showToast({
+        title: 'Reset email sent',
+        description: 'Check your email for password reset instructions'
+      });
+
+      return true;
+    } catch (error: any) {
+      const message = error.response?.data?.detail || 'Failed to send reset email';
+      showToast({
+        title: 'Request failed',
+        description: message,
+        variant: 'destructive'
+      });
+      return false;
+    }
+  }, []);
+
+  const resetPassword = useCallback(async (token: string, newPassword: string): Promise<boolean> => {
+    try {
+      await api.post('/auth/reset-password', {
+        token,
+        new_password: newPassword
+      });
+
+      showToast({
+        title: 'Password reset successful',
+        description: 'You can now log in with your new password'
+      });
+
+      return true;
+    } catch (error: any) {
+      const message = error.response?.data?.detail || 'Failed to reset password';
+      showToast({
+        title: 'Reset failed',
+        description: message,
+        variant: 'destructive'
+      });
+      return false;
+    }
+  }, []);
+
   return (
     <AuthContext.Provider value={{
       user,
@@ -166,6 +213,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
       login,
       logout,
       register,
+      requestPasswordReset,
+      resetPassword,
     }}>
       {children}
     </AuthContext.Provider>

frontend/src/pages/ForgotPassword.tsx

@@ -0,0 +1,131 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useAuth } from '@/contexts/AuthContext';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Cloud, Loader2, CheckCircle } from 'lucide-react';
+
+export function ForgotPassword() {
+  const [email, setEmail] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+  const { requestPasswordReset } = useAuth();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+
+    const success = await requestPasswordReset(email);
+    if (success) {
+      setIsSuccess(true);
+    }
+
+    setIsSubmitting(false);
+  };
+
+  if (isSuccess) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-muted/50 p-4">
+        <div className="w-full max-w-md">
+          <div className="flex items-center justify-center gap-2 mb-8">
+            <Cloud className="h-8 w-8 text-primary" />
+            <span className="text-2xl font-bold">mockupAWS</span>
+          </div>
+
+          <Card>
+            <CardHeader className="space-y-1 text-center">
+              <div className="flex justify-center mb-4">
+                <CheckCircle className="h-16 w-16 text-green-500" />
+              </div>
+              <CardTitle className="text-2xl">Check your email</CardTitle>
+              <CardDescription>
+                We've sent password reset instructions to <strong>{email}</strong>
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <p className="text-sm text-muted-foreground text-center">
+                If you don't see the email, check your spam folder or make sure the email address is correct.
+              </p>
+            </CardContent>
+            <CardFooter className="flex flex-col space-y-4">
+              <Button
+                variant="outline"
+                className="w-full"
+                onClick={() => setIsSuccess(false)}
+              >
+                Try another email
+              </Button>
+              <Link
+                to="/login"
+                className="text-sm text-primary hover:underline"
+              >
+                Back to sign in
+              </Link>
+            </CardFooter>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-muted/50 p-4">
+      <div className="w-full max-w-md">
+        <div className="flex items-center justify-center gap-2 mb-8">
+          <Cloud className="h-8 w-8 text-primary" />
+          <span className="text-2xl font-bold">mockupAWS</span>
+        </div>
+
+        <Card>
+          <CardHeader className="space-y-1">
+            <CardTitle className="text-2xl text-center">Reset password</CardTitle>
+            <CardDescription className="text-center">
+              Enter your email address and we'll send you instructions to reset your password
+            </CardDescription>
+          </CardHeader>
+          <form onSubmit={handleSubmit}>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="name@example.com"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                  autoComplete="email"
+                  autoFocus
+                />
+              </div>
+            </CardContent>
+            <CardFooter className="flex flex-col space-y-4">
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Sending instructions...
+                  </>
+                ) : (
+                  'Send reset instructions'
+                )}
+              </Button>
+              <p className="text-sm text-center text-muted-foreground">
+                Remember your password?{' '}
+                <Link to="/login" className="text-primary hover:underline">
+                  Sign in
+                </Link>
+              </p>
+            </CardFooter>
+          </form>
+        </Card>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Login.tsx

@@ -58,14 +58,9 @@ export function Login() {
               <div className="space-y-2">
                 <div className="flex items-center justify-between">
                   <Label htmlFor="password">Password</Label>
-                  <Link 
-                    to="#" 
+                  <Link
+                    to="/forgot-password"
                     className="text-sm text-primary hover:underline"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      // TODO: Implement forgot password
-                      alert('Forgot password - Coming soon');
-                    }}
                   >
                     Forgot password?
                   </Link>

frontend/src/pages/ResetPassword.tsx

@@ -0,0 +1,205 @@
+import { useState, useEffect } from 'react';
+import { Link, useSearchParams, useNavigate } from 'react-router-dom';
+import { useAuth } from '@/contexts/AuthContext';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Cloud, Loader2, CheckCircle, AlertCircle } from 'lucide-react';
+
+export function ResetPassword() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const token = searchParams.get('token');
+
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { resetPassword } = useAuth();
+
+  // Redirect if no token
+  useEffect(() => {
+    if (!token) {
+      setError('Invalid or missing reset token. Please request a new password reset.');
+    }
+  }, [token]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    if (password.length < 8) {
+      setError('Password must be at least 8 characters long');
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    const success = await resetPassword(token!, password);
+    if (success) {
+      setIsSuccess(true);
+      // Redirect to login after 3 seconds
+      setTimeout(() => {
+        navigate('/login');
+      }, 3000);
+    }
+
+    setIsSubmitting(false);
+  };
+
+  if (!token) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-muted/50 p-4">
+        <div className="w-full max-w-md">
+          <div className="flex items-center justify-center gap-2 mb-8">
+            <Cloud className="h-8 w-8 text-primary" />
+            <span className="text-2xl font-bold">mockupAWS</span>
+          </div>
+
+          <Card>
+            <CardHeader className="space-y-1 text-center">
+              <div className="flex justify-center mb-4">
+                <AlertCircle className="h-16 w-16 text-red-500" />
+              </div>
+              <CardTitle className="text-2xl">Invalid Link</CardTitle>
+              <CardDescription>
+                {error}
+              </CardDescription>
+            </CardHeader>
+            <CardFooter className="flex flex-col space-y-4">
+              <Link to="/forgot-password">
+                <Button className="w-full">
+                  Request new reset link
+                </Button>
+              </Link>
+              <Link
+                to="/login"
+                className="text-sm text-primary hover:underline"
+              >
+                Back to sign in
+              </Link>
+            </CardFooter>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+
+  if (isSuccess) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-muted/50 p-4">
+        <div className="w-full max-w-md">
+          <div className="flex items-center justify-center gap-2 mb-8">
+            <Cloud className="h-8 w-8 text-primary" />
+            <span className="text-2xl font-bold">mockupAWS</span>
+          </div>
+
+          <Card>
+            <CardHeader className="space-y-1 text-center">
+              <div className="flex justify-center mb-4">
+                <CheckCircle className="h-16 w-16 text-green-500" />
+              </div>
+              <CardTitle className="text-2xl">Password reset successful</CardTitle>
+              <CardDescription>
+                Your password has been reset successfully. You will be redirected to the login page in a few seconds.
+              </CardDescription>
+            </CardHeader>
+            <CardFooter className="flex flex-col space-y-4">
+              <Link to="/login">
+                <Button className="w-full">
+                  Sign in now
+                </Button>
+              </Link>
+            </CardFooter>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-muted/50 p-4">
+      <div className="w-full max-w-md">
+        <div className="flex items-center justify-center gap-2 mb-8">
+          <Cloud className="h-8 w-8 text-primary" />
+          <span className="text-2xl font-bold">mockupAWS</span>
+        </div>
+
+        <Card>
+          <CardHeader className="space-y-1">
+            <CardTitle className="text-2xl text-center">Set new password</CardTitle>
+            <CardDescription className="text-center">
+              Enter your new password below
+            </CardDescription>
+          </CardHeader>
+          <form onSubmit={handleSubmit}>
+            <CardContent className="space-y-4">
+              {error && (
+                <div className="p-3 text-sm text-red-500 bg-red-50 rounded-md">
+                  {error}
+                </div>
+              )}
+              <div className="space-y-2">
+                <Label htmlFor="password">New password</Label>
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="••••••••"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                  autoComplete="new-password"
+                  autoFocus
+                />
+                <p className="text-xs text-muted-foreground">
+                  Must be at least 8 characters long
+                </p>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="confirm-password">Confirm password</Label>
+                <Input
+                  id="confirm-password"
+                  type="password"
+                  placeholder="••••••••"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  required
+                  autoComplete="new-password"
+                />
+              </div>
+            </CardContent>
+            <CardFooter className="flex flex-col space-y-4">
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Resetting password...
+                  </>
+                ) : (
+                  'Reset password'
+                )}
+              </Button>
+              <Link
+                to="/login"
+                className="text-sm text-primary hover:underline"
+              >
+                Back to sign in
+              </Link>
+            </CardFooter>
+          </form>
+        </Card>
+      </div>
+    </div>
+  );
+}