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 | 3x 3x 3x 3x 3x 3x 3x 1x 1x 1x 1x 3x 28x | '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 |