71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
import React from "react";
|
|
import classes from "./classes.module.scss";
|
|
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
|
import Form from "@Front/Components/DesignSystem/Form";
|
|
import TextField from "@Front/Components/DesignSystem/Form/TextField";
|
|
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
|
import { ValidationError } from "class-validator";
|
|
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
|
|
type IProps = {
|
|
onSubmit: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
|
|
validationErrors: ValidationError[];
|
|
onPasswordForgotClicked: () => void;
|
|
};
|
|
|
|
export default function StepPassword(props: IProps) {
|
|
const { onSubmit, validationErrors, onPasswordForgotClicked } = props;
|
|
const [isModalOpened, setIsModalOpened] = React.useState(false);
|
|
|
|
const closeModal = () => {
|
|
setIsModalOpened(false);
|
|
};
|
|
|
|
const openModal = () => {
|
|
setIsModalOpened(true);
|
|
};
|
|
|
|
const onModalAccept = () => {
|
|
onPasswordForgotClicked();
|
|
setIsModalOpened(false);
|
|
};
|
|
|
|
return (
|
|
<div className={classes["root"]}>
|
|
<Typography typo={ITypo.H1}>
|
|
<div className={classes["title"]}>Entrez votre mot de passe</div>
|
|
</Typography>
|
|
<Form className={classes["form"]} onSubmit={onSubmit}>
|
|
<TextField
|
|
placeholder="Mot de passe"
|
|
name="password"
|
|
validationError={validationErrors.find((error) => error.property === "password")}
|
|
password
|
|
/>
|
|
<div onClick={openModal}>
|
|
<Typography typo={ITypo.P_16} className={classes["forgot-password"]}>
|
|
Mot de passe oublié ?
|
|
</Typography>
|
|
</div>
|
|
<Button type="submit" variant={EButtonVariant.PRIMARY} className={classes["submit_button"]}>
|
|
Valider
|
|
</Button>
|
|
</Form>
|
|
<Confirm
|
|
isOpen={isModalOpened}
|
|
onClose={closeModal}
|
|
showCancelButton={true}
|
|
onAccept={onModalAccept}
|
|
closeBtn
|
|
header={"Mot de passe oublié ?"}
|
|
confirmText={"Valider"}
|
|
cancelText={"Annuler"}>
|
|
<div className={classes["modal-content"]}>
|
|
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
|
Un code à usage unique va vous être envoyé par sms pour réinitialiser votre mot de passe.
|
|
</Typography>
|
|
</div>
|
|
</Confirm>
|
|
</div>
|
|
);
|
|
}
|