feat: implement forgot password and reset password frontend
Some checks failed
E2E Tests / Run E2E Tests (push) Waiting to run
E2E Tests / Visual Regression Tests (push) Blocked by required conditions
E2E Tests / Smoke Tests (push) Waiting to run
CI/CD - Build & Test / Backend Tests (push) Has been cancelled
CI/CD - Build & Test / Frontend Tests (push) Has been cancelled
CI/CD - Build & Test / Security Scans (push) Has been cancelled
CI/CD - Build & Test / Docker Build Test (push) Has been cancelled
CI/CD - Build & Test / Terraform Validate (push) Has been cancelled
Deploy to Production / Build & Test (push) Has been cancelled
Deploy to Production / Security Scan (push) Has been cancelled
Deploy to Production / Build Docker Images (push) Has been cancelled
Deploy to Production / Deploy to Staging (push) Has been cancelled
Deploy to Production / E2E Tests (push) Has been cancelled
Deploy to Production / Deploy to Production (push) Has been cancelled
Some checks failed
E2E Tests / Run E2E Tests (push) Waiting to run
E2E Tests / Visual Regression Tests (push) Blocked by required conditions
E2E Tests / Smoke Tests (push) Waiting to run
CI/CD - Build & Test / Backend Tests (push) Has been cancelled
CI/CD - Build & Test / Frontend Tests (push) Has been cancelled
CI/CD - Build & Test / Security Scans (push) Has been cancelled
CI/CD - Build & Test / Docker Build Test (push) Has been cancelled
CI/CD - Build & Test / Terraform Validate (push) Has been cancelled
Deploy to Production / Build & Test (push) Has been cancelled
Deploy to Production / Security Scan (push) Has been cancelled
Deploy to Production / Build Docker Images (push) Has been cancelled
Deploy to Production / Deploy to Staging (push) Has been cancelled
Deploy to Production / E2E Tests (push) Has been cancelled
Deploy to Production / Deploy to Production (push) Has been cancelled
- 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
This commit is contained in:
Luca Sacchi Ricciardi
131
frontend/src/pages/ForgotPassword.tsx
Normal file
131
frontend/src/pages/ForgotPassword.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
205
frontend/src/pages/ResetPassword.tsx
Normal file
205
frontend/src/pages/ResetPassword.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user