82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import React, { useCallback, useEffect, useState } from 'react'
|
|
import { useForm } from 'react-hook-form'
|
|
import { useRouter } from 'next/router'
|
|
|
|
import { useAuth } from '../../components/Auth'
|
|
import { Gutter } from '../../components/Gutter'
|
|
import { Input } from '../../components/Input'
|
|
import classes from './index.module.css'
|
|
|
|
type FormData = {
|
|
password: string
|
|
token: string
|
|
}
|
|
|
|
const ResetPassword: React.FC = () => {
|
|
const [error, setError] = useState('')
|
|
const { login } = useAuth()
|
|
const router = useRouter()
|
|
|
|
const token = typeof router.query.token === 'string' ? router.query.token : undefined
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
reset,
|
|
} = useForm<FormData>()
|
|
|
|
const onSubmit = useCallback(
|
|
async (data: FormData) => {
|
|
const response = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/reset-password`, {
|
|
method: 'POST',
|
|
body: JSON.stringify(data),
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
})
|
|
|
|
if (response.ok) {
|
|
const json = await response.json()
|
|
|
|
// Automatically log the user in after they successfully reset password
|
|
await login({ email: json.user.email, password: data.password })
|
|
|
|
// Redirect them to /account with success message in URL
|
|
router.push('/account?success=Password reset successfully.')
|
|
} else {
|
|
setError('There was a problem while resetting your password. Please try again later.')
|
|
}
|
|
},
|
|
[router, login],
|
|
)
|
|
|
|
// when NextJS populates token within router,
|
|
// reset form with new token value
|
|
useEffect(() => {
|
|
reset({ token })
|
|
}, [reset, token])
|
|
|
|
return (
|
|
<Gutter>
|
|
<h1>Reset Password</h1>
|
|
<p>Please enter a new password below.</p>
|
|
{error && <div className={classes.error}>{error}</div>}
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
<Input
|
|
name="password"
|
|
type="password"
|
|
label="New Password"
|
|
required
|
|
register={register}
|
|
error={errors.password}
|
|
/>
|
|
<input type="hidden" {...register('token')} />
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
</Gutter>
|
|
)
|
|
}
|
|
|
|
export default ResetPassword
|