All files / app/(dynamic)/(pages)/account/reset-password page.tsx

100% Statements 13/13
100% Branches 4/4
100% Functions 3/3
100% Lines 13/13

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