diff --git a/app/auth/forgot-password/page.tsx b/app/auth/forgot-password/page.tsx new file mode 100644 index 0000000..0a2c155 --- /dev/null +++ b/app/auth/forgot-password/page.tsx @@ -0,0 +1,65 @@ +'use client' + +import { useState } from 'react' +import { Button } from '@/components/ui/button' +import { Alert, AlertDescription } from '@/components/ui/alert' +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' +import { supabase } from '@/lib/supabaseClient' + +export default function ForgotPasswordPage() { + const [email, setEmail] = useState('') + const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle') + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault() + setStatus('sending') + + const { error } = await supabase.auth.resetPasswordForEmail(email, { + redirectTo: `${window.location.origin}/auth/reset-password` + }) + + if (error) { + setStatus('error') + console.error('Error sending reset email:', error.message) + } else { + setStatus('sent') + } + } + + return ( +
+ + + Forgot Password + + +
+ setEmail(e.target.value)} + required + className="w-full p-2 border rounded" + /> +
+ +
+
+ {status === 'sent' && ( + + Check your email for the reset link. + + )} + {status === 'error' && ( + + Failed to send reset link. Please try again. + + )} +
+
+
+ ) +} \ No newline at end of file diff --git a/app/auth/reset-password/page.tsx b/app/auth/reset-password/page.tsx new file mode 100644 index 0000000..19f9067 --- /dev/null +++ b/app/auth/reset-password/page.tsx @@ -0,0 +1,90 @@ +'use client' + +import { useState } from 'react' +import { useRouter } from 'next/navigation' +import { Button } from '@/components/ui/button' +import { Alert, AlertDescription } from '@/components/ui/alert' +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' +import { supabase } from '@/lib/supabaseClient' + +export default function ResetPasswordPage() { + const router = useRouter() + const [newPassword, setNewPassword] = useState('') + const [confirmPassword, setConfirmPassword] = useState('') + const [status, setStatus] = useState<'idle' | 'updating' | 'updated' | 'error'>('idle') + const [errorMessage, setErrorMessage] = useState('') + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault() + setErrorMessage('') + + if (newPassword !== confirmPassword) { + setErrorMessage('Passwords do not match.') + return + } + + setStatus('updating') + + // Use the access token to update the user's password + const { data, error } = await supabase.auth.updateUser({ password: newPassword }) + + if (error) { + setStatus('error') + console.error('Error updating password:', error.message) + } else { + setStatus('updated') + // Redirect to login or another page after successful password update + setTimeout(() => { + router.push('/auth/signin') + }, 2000) + } + } + + return ( +
+ + + Set New Password + + +
+ setNewPassword(e.target.value)} + required + className="w-full p-2 border rounded" + /> + setConfirmPassword(e.target.value)} + required + className="w-full p-2 border rounded" + /> + {errorMessage && ( + + {errorMessage} + + )} + +
+ {status === 'updated' && ( + + Password updated successfully! Redirecting to sign in... + + )} + {status === 'error' && ( + + Failed to update password. Please try again. + + )} +
+
+
+ ) +} \ No newline at end of file diff --git a/components/AuthComponent/SigninForm.tsx b/components/AuthComponent/SigninForm.tsx index 9732907..d3dcce1 100644 --- a/components/AuthComponent/SigninForm.tsx +++ b/components/AuthComponent/SigninForm.tsx @@ -128,6 +128,11 @@ export default function SigninForm() { title="Sign in" type="submit" /> +
+ + Forgot Password? + +