Lovable reset password logic not working?
Reset password/forgot my password code.
Here is the code just replace it with this code.
Reset password/forgot my password code.
Here is the code just replace it with this code.
Code:
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useToast } from '@/hooks/use-toast';
import { supabase } from '@/integrations/supabase/client';
const ResetPassword = () => {
const navigate = useNavigate();
const { toast } = useToast();
const [loading, setLoading] = useState(true);
const [sessionExists, setSessionExists] = useState(false);
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
const [error, setError] = useState('');
useEffect(() => {
const checkSession = async () => {
const {
data: { session },
error,
} = await supabase.auth.getSession();
if (error || !session) {
setError('Invalid or expired password reset link.');
setSessionExists(false);
} else {
setSessionExists(true);
}
setLoading(false);
};
checkSession();
}, []);
const handlePasswordReset = async (e: React.FormEvent) => {
e.preventDefault();
setError('');
if (password !== confirmPassword) {
setError('Passwords do not match.');
return;
}
if (password.length < 6) {
setError('Password must be at least 6 characters long.');
return;
}
setIsSubmitting(true);
const { error } = await supabase.auth.updateUser({ password });
if (error) {
setError(error.message || 'Failed to update password.');
} else {
toast({
title: 'Password Updated',
description: 'Your password has been successfully updated. You can now log in.',
});
setTimeout(() => {
navigate('/login');
}, 2000);
}
setIsSubmitting(false);
};
if (loading) {
return (
<div className="min-h-screen bg-background flex items-center justify-center">
<div className="text-center">
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary"></div>
<p className="mt-4 text-muted-foreground">Verifying reset link...</p>
</div>
</div>
);
}
if (!sessionExists) {
return (
<div className="min-h-screen bg-background flex items-center justify-center p-4">
<Card>
<CardHeader className="text-center">
<CardTitle>Reset Password</CardTitle>
</CardHeader>
<CardContent>
<p className="text-destructive text-center mb-4">{error}</p>
<Button onClick={() => navigate('/login')} className="w-full">
Back to Login
</Button>
</CardContent>
</Card>
</div>
);
}
return (
<div className="min-h-screen bg-background flex items-center justify-center p-4">
<div className="w-full max-w-md">
<Card>
<CardHeader className="text-center">
<CardTitle>Reset Password</CardTitle>
</CardHeader>
<CardContent>
<form onSubmit={handlePasswordReset} className="space-y-4">
<div className="space-y-2">
<Label htmlFor="password">New Password</Label>
<Input
id="password"
type="password"
placeholder="Enter new password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
minLength={6}
/>
</div>
<div className="space-y-2">
<Label htmlFor="confirmPassword">Confirm New Password</Label>
<Input
id="confirmPassword"
type="password"
placeholder="Confirm new password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
required
minLength={6}
/>
</div>
{error && <p className="text-destructive text-sm">{error}</p>}
<Button type="submit" className="w-full" disabled={isSubmitting}>
{isSubmitting ? 'Updating Password...' : 'Update Password'}
</Button>
</form>
</CardContent>
</Card>
<div className="text-center mt-6">
<Button variant="link" onClick={() => navigate('/')}>
↠Back to Homepage
</Button>
</div>
</div>
</div>
);
};
export default ResetPassword;