Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | 4x 4x 4x 4x 7x 7x 7x 2x 2x 2x 2x 7x 57x | 'use client'
import { Form, Formik } from 'formik'
import { useState } from 'react'
import { ObjectSchema, object, string } from 'yup'
import { EMAIL_REQUIRED_ERROR } from '../../../../../../content/validation'
import { validateMail } from '../../../../../../utils/validateMail'
import { Alert, AlertProps } from '../../../../../components/Alert/Alert'
import { Button } from '../../../../../components/ButtonsAndLinks/Button/Button'
import { TextInput } from '../../../../../components/Form/TextInput/TextInput'
import { Headline } from '../../../../../components/Headline/Headline'
import { forgotPassword } from '../../../../../services/api/auth/resetPassword'
type ResetPasswordFormValues = {
email: string
}
// Formik
const initialFormValues: ResetPasswordFormValues = {
email: '',
}
const validationSchema: ObjectSchema<ResetPasswordFormValues> = object({
email: string().matches(validateMail.regex, validateMail.message).required(EMAIL_REQUIRED_ERROR),
})
const alertContent: { [key: string]: AlertProps } = {
OK: {
icon: 'check_circle',
color: 'green',
headline: 'Erfolgreich',
description: 'Wir haben Ihnen einen Link zum Passwort zurücksetzen gesendet.',
},
ERROR: {
icon: 'warning',
color: 'red',
headline: 'Fehler',
description: 'Beim Senden der E-Mail ist etwas schief gelaufen. Bitte versuchen Sie es später erneut.',
},
}
/**
* Reset Password Page with enter email Form.
*/
const ResetPassword = () => {
// Local State
const [isLoading, setIsLoading] = useState(false)
const [status, setStatus] = useState<'OK' | 'ERROR' | null>()
const onSubmit = async (values: ResetPasswordFormValues) => {
setIsLoading(true)
const response = await forgotPassword(values.email)
setStatus(response)
setIsLoading(false)
}
return (
<div className="container my-auto flex flex-col">
<header>
<Headline>Haben Sie Ihr Passwort vergessen?</Headline>
<p className="mb-2 font-semibold md:mb-4">Ändern Sie Ihr Passwort in drei einfachen Schritten.</p>
<ul className="mb-4 md:mb-6">
<li>1. Geben Sie unten Ihre E-Mail-Adresse ein.</li>
<li>2. Wir senden Ihnen einen Link zum Password ändern.</li>
<li>3. Ändern Sie ihr Passwort.</li>
</ul>
</header>
<main className="rounded-xl border border-gray-200 p-4 md:p-6 lg:w-2/3 xl:w-1/2">
<Formik initialValues={initialFormValues} validationSchema={validationSchema} onSubmit={onSubmit}>
{({ dirty, isValid }) => (
<Form className="mb-4">
<TextInput name="email" labelText="E-Mail" placeholder="Geben Sie Ihre E-Mail Adresse ein." />
<Button
datacy="submit-button"
type="submit"
icon="lock_reset"
loading={isLoading}
disabled={!(dirty && isValid)}
className="ml-auto"
>
Passwort zurücksetzen
</Button>
</Form>
)}
</Formik>
{status && <Alert {...alertContent[status]} />}
</main>
</div>
)
}
export default ResetPassword
|