99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
'use client'
|
|
|
|
import { useState, Suspense } from 'react'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { resetPassword } from '@/app/actions/auth-reset'
|
|
import { toast } from 'sonner'
|
|
import { useSearchParams, useRouter } from 'next/navigation'
|
|
import Link from 'next/link'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
|
|
function ResetPasswordForm() {
|
|
const searchParams = useSearchParams()
|
|
const router = useRouter()
|
|
const { t } = useLanguage()
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
|
|
const token = searchParams.get('token')
|
|
|
|
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault()
|
|
if (!token) return
|
|
|
|
const formData = new FormData(e.currentTarget)
|
|
const password = formData.get('password') as string
|
|
const confirm = formData.get('confirmPassword') as string
|
|
|
|
if (password !== confirm) {
|
|
toast.error(t('resetPassword.passwordMismatch'))
|
|
return
|
|
}
|
|
|
|
setIsSubmitting(true)
|
|
const result = await resetPassword(token, password)
|
|
setIsSubmitting(false)
|
|
|
|
if (result.error) {
|
|
toast.error(result.error)
|
|
} else {
|
|
toast.success(t('resetPassword.success'))
|
|
router.push('/login')
|
|
}
|
|
}
|
|
|
|
if (!token) {
|
|
return (
|
|
<Card className="w-full max-w-[400px]">
|
|
<CardHeader>
|
|
<CardTitle>{t('resetPassword.invalidLinkTitle')}</CardTitle>
|
|
<CardDescription>{t('resetPassword.invalidLinkDescription')}</CardDescription>
|
|
</CardHeader>
|
|
<CardFooter>
|
|
<Link href="/forgot-password" title="Try again" className="w-full">
|
|
<Button variant="outline" className="w-full">{t('resetPassword.requestNewLink')}</Button>
|
|
</Link>
|
|
</CardFooter>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Card className="w-full max-w-[400px]">
|
|
<CardHeader>
|
|
<CardTitle>{t('resetPassword.title')}</CardTitle>
|
|
<CardDescription>{t('resetPassword.description')}</CardDescription>
|
|
</CardHeader>
|
|
<form onSubmit={handleSubmit}>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<label htmlFor="password">{t('resetPassword.newPassword')}</label>
|
|
<Input id="password" name="password" type="password" required minLength={6} autoFocus />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label htmlFor="confirmPassword">{t('resetPassword.confirmNewPassword')}</label>
|
|
<Input id="confirmPassword" name="confirmPassword" type="password" required minLength={6} />
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
|
{isSubmitting ? t('resetPassword.resetting') : t('resetPassword.resetPassword')}
|
|
</Button>
|
|
</CardFooter>
|
|
</form>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default function ResetPasswordPage() {
|
|
const { t } = useLanguage()
|
|
return (
|
|
<main className="flex items-center justify-center md:h-screen p-4">
|
|
<Suspense fallback={<div>{t('resetPassword.loading')}</div>}>
|
|
<ResetPasswordForm />
|
|
</Suspense>
|
|
</main>
|
|
)
|
|
}
|