|
| 1 | +"use client"; |
| 2 | + |
| 3 | +import { fr } from "@codegouvfr/react-dsfr"; |
| 4 | +import { Alert } from "@codegouvfr/react-dsfr/Alert"; |
| 5 | +import { Button } from "@codegouvfr/react-dsfr/Button"; |
| 6 | +import { Input } from "@codegouvfr/react-dsfr/Input"; |
| 7 | +import { REGEX_EMAIL } from "@common/shared-domain/domain/valueObjects"; |
| 8 | +import { AlertFeatureStatus, useFeatureStatus } from "@components/utils/FeatureStatusProvider"; |
| 9 | +import { Container } from "@design-system"; |
| 10 | +import { zodResolver } from "@hookform/resolvers/zod"; |
| 11 | +import { signIn } from "next-auth/react"; |
| 12 | +import { useForm } from "react-hook-form"; |
| 13 | +import { z } from "zod"; |
| 14 | + |
| 15 | +const formSchema = z.object({ |
| 16 | + email: z |
| 17 | + .string() |
| 18 | + .min(1, "L'adresse email est requise.") |
| 19 | + .regex(REGEX_EMAIL, { message: "L'adresse email est invalide." }), |
| 20 | +}); |
| 21 | + |
| 22 | +type FormType = z.infer<typeof formSchema>; |
| 23 | + |
| 24 | +export interface EmailAuthticatorProps { |
| 25 | + callbackUrl: string; |
| 26 | +} |
| 27 | +export const EmailLogin = ({ callbackUrl }: EmailAuthticatorProps) => { |
| 28 | + const { featureStatus, setFeatureStatus } = useFeatureStatus(); |
| 29 | + |
| 30 | + const { |
| 31 | + register, |
| 32 | + handleSubmit, |
| 33 | + watch, |
| 34 | + formState: { errors, isValid }, |
| 35 | + } = useForm<FormType>({ |
| 36 | + resolver: zodResolver(formSchema), |
| 37 | + defaultValues: { |
| 38 | + email: "", |
| 39 | + }, |
| 40 | + }); |
| 41 | + |
| 42 | + const email = watch("email"); |
| 43 | + |
| 44 | + const onSubmit = async ({ email }: FormType) => { |
| 45 | + try { |
| 46 | + setFeatureStatus({ type: "loading" }); |
| 47 | + const result = await signIn("email", { email, callbackUrl, redirect: false }); |
| 48 | + if (result?.ok) { |
| 49 | + setFeatureStatus({ type: "success", message: "Un email vous a été envoyé." }); |
| 50 | + } else { |
| 51 | + setFeatureStatus({ |
| 52 | + type: "error", |
| 53 | + message: `Erreur lors de l'envoi de l'email. (${result?.status}) ${result?.error}`, |
| 54 | + }); |
| 55 | + } |
| 56 | + } catch (error) { |
| 57 | + setFeatureStatus({ |
| 58 | + type: "error", |
| 59 | + message: "Erreur lors de l'envoi de l'email, veuillez vérifier que l'adresse est correcte.", |
| 60 | + }); |
| 61 | + } |
| 62 | + }; |
| 63 | + |
| 64 | + return ( |
| 65 | + <> |
| 66 | + <AlertFeatureStatus title="Erreur" type="error" /> |
| 67 | + |
| 68 | + {featureStatus.type === "success" && ( |
| 69 | + <> |
| 70 | + <p>Vous allez recevoir un mail sur l'adresse email que vous avez indiquée à l'étape précédente.</p> |
| 71 | + |
| 72 | + <p> |
| 73 | + <strong>Ouvrez ce mail et cliquez sur le lien de validation.</strong> |
| 74 | + </p> |
| 75 | + <p> |
| 76 | + Si vous ne recevez pas ce mail sous peu, il se peut que l'email saisi (<strong>{email}</strong>) soit |
| 77 | + incorrect, ou bien que le mail ait été déplacé dans votre dossier de courriers indésirables ou dans le |
| 78 | + dossier SPAM. |
| 79 | + </p> |
| 80 | + <p>En cas d'échec, la procédure devra être reprise avec un autre email.</p> |
| 81 | + |
| 82 | + <Button onClick={() => setFeatureStatus({ type: "idle" })} className={fr.cx("fr-mt-4w")}> |
| 83 | + Réessayer |
| 84 | + </Button> |
| 85 | + </> |
| 86 | + )} |
| 87 | + |
| 88 | + {featureStatus.type !== "success" && ( |
| 89 | + <> |
| 90 | + <Alert |
| 91 | + severity="info" |
| 92 | + title="Attention" |
| 93 | + description="En cas d'email erroné, vous ne pourrez pas remplir le formulaire ou accéder à votre déclaration déjà transmise." |
| 94 | + /> |
| 95 | + |
| 96 | + <p className={fr.cx("fr-mt-4w")}> |
| 97 | + Pour pouvoir permettre de poursuivre la transmission des informations requises, l’email doit correspondre à |
| 98 | + celui de la personne à contacter par les services de l’inspection du travail en cas de besoin et sera celui |
| 99 | + sur lequel sera adressé l’accusé de réception en fin de procédure. |
| 100 | + </p> |
| 101 | + |
| 102 | + <p> |
| 103 | + Si vous souhaitez visualiser ou modifier votre déclaration déjà transmise, veuillez saisir l'email utilisé |
| 104 | + pour la déclaration. |
| 105 | + </p> |
| 106 | + |
| 107 | + <form onSubmit={handleSubmit(onSubmit)} noValidate> |
| 108 | + <Container fluid mt="4w"> |
| 109 | + <Input |
| 110 | + label="Adresse email" |
| 111 | + state={errors.email?.message ? "error" : "default"} |
| 112 | + stateRelatedMessage={errors.email?.message} |
| 113 | + nativeInputProps={{ |
| 114 | + ...register("email"), |
| 115 | + type: "email", |
| 116 | + spellCheck: false, |
| 117 | + autoComplete: "email", |
| 118 | + placeholder: "Exemple : [email protected]", |
| 119 | + }} |
| 120 | + /> |
| 121 | + <Button disabled={featureStatus.type === "loading" || !isValid}>Envoyer</Button> |
| 122 | + </Container> |
| 123 | + </form> |
| 124 | + </> |
| 125 | + )} |
| 126 | + </> |
| 127 | + ); |
| 128 | +}; |
0 commit comments