2023-10-23 23:33:39 +02:00
|
|
|
import type { NextPage } from "next"
|
|
|
|
|
import Link from "next/link"
|
|
|
|
|
import useTranslation from "next-translate/useTranslation"
|
|
|
|
|
import axios from "axios"
|
|
|
|
|
import { useForm } from "react-component-form"
|
|
|
|
|
import type { HandleUseFormCallback } from "react-component-form"
|
2021-10-24 06:09:43 +02:00
|
|
|
|
2023-10-23 23:33:39 +02:00
|
|
|
import { AuthenticationForm } from "../../components/Authentication"
|
|
|
|
|
import { Head } from "../../components/Head"
|
|
|
|
|
import { Header } from "../../components/Header"
|
|
|
|
|
import { Main } from "../../components/design/Main"
|
|
|
|
|
import type { FooterProps } from "../../components/Footer"
|
|
|
|
|
import { Footer } from "../../components/Footer"
|
|
|
|
|
import { Input } from "../../components/design/Input"
|
|
|
|
|
import { Button } from "../../components/design/Button"
|
|
|
|
|
import { FormState } from "../../components/design/FormState"
|
|
|
|
|
import { authenticationFromServerSide } from "../../tools/authentication"
|
|
|
|
|
import { userSchema } from "../../models/User"
|
|
|
|
|
import { api } from "../../tools/api"
|
|
|
|
|
import { useFormTranslation } from "../../hooks/useFormTranslation"
|
2022-08-28 18:26:56 +02:00
|
|
|
|
|
|
|
|
const schema = {
|
2023-10-23 23:33:39 +02:00
|
|
|
email: userSchema.email,
|
2022-08-28 18:26:56 +02:00
|
|
|
}
|
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
|
|
|
|
|
|
2022-08-28 18:26:56 +02:00
|
|
|
const { handleUseForm, fetchState, message, errors } = useForm(schema)
|
|
|
|
|
const { getFirstErrorTranslation } = useFormTranslation()
|
2021-10-24 06:09:43 +02:00
|
|
|
|
2022-08-28 18:26:56 +02:00
|
|
|
const onSubmit: HandleUseFormCallback<typeof schema> = async (
|
|
|
|
|
formData,
|
2023-10-23 23:33:39 +02:00
|
|
|
formElement,
|
2022-08-28 18:26:56 +02:00
|
|
|
) => {
|
2021-10-26 16:38:55 +02:00
|
|
|
try {
|
|
|
|
|
await api.post(
|
|
|
|
|
`/users/reset-password?redirectURI=${window.location.origin}/authentication/reset-password`,
|
2023-10-23 23:33:39 +02:00
|
|
|
formData,
|
2021-10-26 16:38:55 +02:00
|
|
|
)
|
2022-08-28 18:26:56 +02:00
|
|
|
formElement.reset()
|
2021-10-26 16:38:55 +02:00
|
|
|
return {
|
2023-10-23 23:33:39 +02:00
|
|
|
type: "success",
|
|
|
|
|
message: "authentication:success-forgot-password",
|
2021-10-26 16:38:55 +02:00
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
if (axios.isAxiosError(error) && error.response?.status === 400) {
|
|
|
|
|
return {
|
2023-10-23 23:33:39 +02:00
|
|
|
type: "error",
|
|
|
|
|
message: "errors:invalid-email",
|
2021-10-24 06:09:43 +02:00
|
|
|
}
|
|
|
|
|
}
|
2021-10-26 16:38:55 +02:00
|
|
|
return {
|
2023-10-23 23:33:39 +02:00
|
|
|
type: "error",
|
|
|
|
|
message: "errors:server-error",
|
2021-10-26 16:38:55 +02:00
|
|
|
}
|
2021-10-24 06:09:43 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
2022-12-13 22:31:32 +01:00
|
|
|
<>
|
2023-10-23 23:33:39 +02:00
|
|
|
<Head title={`Thream | ${t("authentication:forgot-password")}`} />
|
2021-10-24 06:09:43 +02:00
|
|
|
<Header />
|
|
|
|
|
<Main>
|
2022-08-28 18:26:56 +02:00
|
|
|
<AuthenticationForm onSubmit={handleUseForm(onSubmit)}>
|
2023-10-23 23:33:39 +02:00
|
|
|
<Input type="email" placeholder="Email" name="email" label="Email" />
|
|
|
|
|
<Button data-cy="submit" className="mt-6 w-full" type="submit">
|
|
|
|
|
{t("authentication:submit")}
|
2021-10-24 06:09:43 +02:00
|
|
|
</Button>
|
2023-10-23 23:33:39 +02:00
|
|
|
<p className="mt-3 font-headline text-sm text-green-800 hover:underline dark:text-green-400">
|
|
|
|
|
<Link href="/authentication/signin">
|
|
|
|
|
{t("authentication:already-know-password")}
|
2021-10-24 06:09:43 +02:00
|
|
|
</Link>
|
|
|
|
|
</p>
|
|
|
|
|
</AuthenticationForm>
|
|
|
|
|
<FormState
|
2023-10-23 23:33:39 +02:00
|
|
|
id="message"
|
2021-11-13 21:50:34 +01:00
|
|
|
state={fetchState}
|
2021-10-24 06:09:43 +02:00
|
|
|
message={
|
2022-08-28 18:26:56 +02:00
|
|
|
message != null
|
|
|
|
|
? t(message)
|
|
|
|
|
: getFirstErrorTranslation(errors.email)
|
2021-10-24 06:09:43 +02:00
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
</Main>
|
|
|
|
|
<Footer version={version} />
|
2022-12-13 22:31:32 +01:00
|
|
|
</>
|
2021-10-24 06:09:43 +02:00
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export const getServerSideProps = authenticationFromServerSide({
|
|
|
|
|
shouldBeAuthenticated: false,
|
|
|
|
|
fetchData: async () => {
|
2023-10-23 23:33:39 +02:00
|
|
|
const { readPackage } = await import("read-pkg")
|
2021-10-24 06:09:43 +02:00
|
|
|
const { version } = await readPackage()
|
|
|
|
|
return { version }
|
2023-10-23 23:33:39 +02:00
|
|
|
},
|
2021-10-24 06:09:43 +02:00
|
|
|
})
|
|
|
|
|
|
|
|
|
|
export default ForgotPassword
|
