146 lines
4.9 KiB
TypeScript
146 lines
4.9 KiB
TypeScript
'use client'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { useRouter, useSearchParams } from 'next/navigation'
|
|
import { useState } from 'react'
|
|
import resetPassword from '@/serverActions/ResetPassword'
|
|
import { toast } from 'sonner'
|
|
import forgotPassword from '@/serverActions/ForgotPassword'
|
|
|
|
export function ForgotPasswordForm({ className, ...props }: React.ComponentProps<'div'>) {
|
|
const router = useRouter()
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
const [didSendForgetRequest, setDidSendForgetRequest] = useState(false)
|
|
const searchParams = useSearchParams()
|
|
|
|
const token = searchParams.get('token')
|
|
|
|
const handleResetPasswordSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault()
|
|
|
|
if (isLoading) return
|
|
setIsLoading(true)
|
|
|
|
const formData = new FormData(e.currentTarget)
|
|
const password = String(formData.get('password'))
|
|
const confirmPassword = String(formData.get('confirmPassword'))
|
|
|
|
if (!password || !confirmPassword || password !== confirmPassword) {
|
|
toast('Finish the form to continue')
|
|
setIsLoading(false)
|
|
return
|
|
}
|
|
|
|
if (!token) {
|
|
toast('Password reset token is missing')
|
|
setIsLoading(false)
|
|
return
|
|
}
|
|
|
|
const didReset = await resetPassword({
|
|
token,
|
|
password,
|
|
confirmPassword,
|
|
})
|
|
|
|
console.log('didReset', didReset)
|
|
|
|
if (!didReset) {
|
|
toast('Issue resetting your password')
|
|
setIsLoading(false)
|
|
} else router.push('/login')
|
|
}
|
|
|
|
const handleForgotPasswordSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault()
|
|
|
|
if (isLoading) return
|
|
setIsLoading(true)
|
|
|
|
const formData = new FormData(e.currentTarget)
|
|
const email = String(formData.get('email'))
|
|
|
|
if (!email) return
|
|
|
|
const didForget = await forgotPassword({ email })
|
|
|
|
if (didForget) {
|
|
toast('A password change email was sent')
|
|
setDidSendForgetRequest(true)
|
|
} else toast('There was an issue with your forget password request')
|
|
|
|
setIsLoading(false)
|
|
}
|
|
|
|
return (
|
|
<div className={cn('flex flex-col gap-6', className)} {...props}>
|
|
<Card>
|
|
<CardHeader className="text-center">
|
|
<CardTitle className="text-xl">Welcome back</CardTitle>
|
|
<CardDescription>
|
|
{!token
|
|
? 'An email to reset your password will be sent if we find it in our system'
|
|
: 'Please enter your new password'}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form
|
|
onSubmit={token ? handleResetPasswordSubmit : handleForgotPasswordSubmit}
|
|
aria-disabled={isLoading}
|
|
>
|
|
<div className="grid gap-6">
|
|
<div className="grid gap-6">
|
|
{!token ? (
|
|
<div className="grid gap-3">
|
|
{didSendForgetRequest ? (
|
|
<p className="accent-muted">
|
|
Your request has been sent. Check you emails inbox and span folders
|
|
</p>
|
|
) : (
|
|
<>
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
placeholder="me@example.com"
|
|
required
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-3">
|
|
<div className="flex items-center">
|
|
<Label htmlFor="password">Password</Label>
|
|
</div>
|
|
<Input id="password" name="password" type="password" required />
|
|
|
|
<div className="flex items-center">
|
|
<Label htmlFor="password">Confirm Password</Label>
|
|
</div>
|
|
<Input id="confirmPassword" name="confirmPassword" type="password" required />
|
|
</div>
|
|
)}
|
|
{!didSendForgetRequest && (
|
|
<Button type="submit" className="w-full" disabled={isLoading}>
|
|
{!!token ? 'Forgot Password' : 'Reset'}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
<div className="text-muted-foreground *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4">
|
|
By clicking <i>Rest</i> or <i>Forgot Password</i>, you agree to our{' '}
|
|
<a href="/info/toc">Terms of Service</a> and <a href="/info/privacy">Privacy Policy</a>.
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|