2021-12-28 16:06:58 +01:00
|
|
|
import { NextPage } from 'next'
|
2021-10-24 06:09:43 +02:00
|
|
|
import Link from 'next/link'
|
|
|
|
|
import useTranslation from 'next-translate/useTranslation'
|
|
|
|
|
import axios from 'axios'
|
|
|
|
|
|
2022-01-07 21:21:38 +01:00
|
|
|
import { AuthenticationForm } from 'components/Authentication'
|
2021-10-24 06:09:43 +02:00
|
|
|
import { Head } from 'components/Head'
|
|
|
|
|
import { Header } from 'components/Header'
|
|
|
|
|
import { Main } from 'components/design/Main'
|
|
|
|
|
import { Footer, FooterProps } from 'components/Footer'
|
|
|
|
|
import { Input } from 'components/design/Input'
|
|
|
|
|
import { Button } from 'components/design/Button'
|
|
|
|
|
import { FormState } from 'components/design/FormState'
|
2022-01-01 20:42:25 +01:00
|
|
|
import { authenticationFromServerSide } from 'tools/authentication'
|
2021-10-24 06:09:43 +02:00
|
|
|
import { ScrollableBody } from 'components/ScrollableBody'
|
2021-10-26 16:38:55 +02:00
|
|
|
import { userSchema } from 'models/User'
|
2022-01-01 20:42:25 +01:00
|
|
|
import { api } from 'tools/api'
|
2021-10-26 16:38:55 +02:00
|
|
|
import { HandleSubmitCallback, useForm } from 'hooks/useForm'
|
2021-10-24 06:09:43 +02:00
|
|
|
|
2021-12-28 16:06:58 +01:00
|
|
|
const ForgotPassword: NextPage<FooterProps> = (props) => {
|
2021-10-24 06:09:43 +02:00
|
|
|
const { t } = useTranslation()
|
|
|
|
|
const { version } = props
|
|
|
|
|
|
2021-11-13 21:50:34 +01:00
|
|
|
const { fetchState, message, errors, getErrorTranslation, handleSubmit } =
|
2022-02-19 23:20:33 +01:00
|
|
|
useForm({
|
|
|
|
|
validateSchema: { email: userSchema.email },
|
|
|
|
|
resetOnSuccess: true
|
|
|
|
|
})
|
2021-10-24 06:09:43 +02:00
|
|
|
|
2021-10-26 16:38:55 +02:00
|
|
|
const onSubmit: HandleSubmitCallback = async (formData) => {
|
|
|
|
|
try {
|
|
|
|
|
await api.post(
|
|
|
|
|
`/users/reset-password?redirectURI=${window.location.origin}/authentication/reset-password`,
|
|
|
|
|
formData
|
|
|
|
|
)
|
|
|
|
|
return {
|
|
|
|
|
type: 'success',
|
|
|
|
|
value: 'authentication:success-forgot-password'
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
if (axios.isAxiosError(error) && error.response?.status === 400) {
|
|
|
|
|
return {
|
|
|
|
|
type: 'error',
|
|
|
|
|
value: 'errors:email'
|
2021-10-24 06:09:43 +02:00
|
|
|
}
|
|
|
|
|
}
|
2021-10-26 16:38:55 +02:00
|
|
|
return {
|
|
|
|
|
type: 'error',
|
|
|
|
|
value: 'errors:server-error'
|
|
|
|
|
}
|
2021-10-24 06:09:43 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<ScrollableBody>
|
|
|
|
|
<Head title={`Thream | ${t('authentication:forgot-password')}`} />
|
|
|
|
|
<Header />
|
|
|
|
|
<Main>
|
2021-10-26 16:38:55 +02:00
|
|
|
<AuthenticationForm onSubmit={handleSubmit(onSubmit)}>
|
2021-10-24 06:09:43 +02:00
|
|
|
<Input type='email' placeholder='Email' name='email' label='Email' />
|
2022-02-19 23:20:33 +01:00
|
|
|
<Button data-cy='submit' className='mt-6 w-full' type='submit'>
|
2021-10-24 06:09:43 +02:00
|
|
|
{t('authentication:submit')}
|
|
|
|
|
</Button>
|
2022-02-19 23:20:33 +01:00
|
|
|
<p className='mt-3 font-headline text-sm text-green-800 hover:underline dark:text-green-400'>
|
2021-10-24 06:09:43 +02:00
|
|
|
<Link href='/authentication/signin'>
|
|
|
|
|
<a>{t('authentication:already-know-password')}</a>
|
|
|
|
|
</Link>
|
|
|
|
|
</p>
|
|
|
|
|
</AuthenticationForm>
|
|
|
|
|
<FormState
|
|
|
|
|
id='message'
|
2021-11-13 21:50:34 +01:00
|
|
|
state={fetchState}
|
2021-10-24 06:09:43 +02:00
|
|
|
message={
|
2021-10-26 16:38:55 +02:00
|
|
|
message != null ? message : getErrorTranslation(errors.email)
|
2021-10-24 06:09:43 +02:00
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
</Main>
|
|
|
|
|
<Footer version={version} />
|
|
|
|
|
</ScrollableBody>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export const getServerSideProps = authenticationFromServerSide({
|
|
|
|
|
shouldBeAuthenticated: false,
|
|
|
|
|
fetchData: async () => {
|
|
|
|
|
const { readPackage } = await import('read-pkg')
|
|
|
|
|
const { version } = await readPackage()
|
|
|
|
|
return { version }
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
export default ForgotPassword
|
