prevent email with accent on convention form

gip-inclusion · Dec 5, 2024 · 65e1938 · 65e1938
1 parent cddc607
commit 65e1938
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 16 deletions.
diff --git a/front/src/app/components/agency/AgencyUserModificationForm.tsx b/front/src/app/components/agency/AgencyUserModificationForm.tsx
@@ -11,6 +11,7 @@ import {
   AgencyDtoWithoutEmails,
   UserParamsForAgency,
   domElementIds,
+  toLowerCaseWithoutDiacritics,
   userParamsForAgencySchema,
 } from "shared";
 import {
@@ -126,8 +127,16 @@ export const AgencyUserModificationForm = ({
         <EmailValidationInput
           label="Email"
           nativeInputProps={{
-            ...register("email"),
+            ...register("email", {
+              setValueAs: (value) => toLowerCaseWithoutDiacritics(value),
+            }),
             id: domElementIds.admin.agencyTab.editAgencyUserEmail,
+            onBlur: (event) => {
+              setValue(
+                "email",
+                toLowerCaseWithoutDiacritics(event.currentTarget.value),
+              );
+            },
           }}
           {...getFieldError("email")}
           disabled={agencyUser.isIcUser}

diff --git a/front/src/app/components/forms/commons/EmailValidationInput.tsx b/front/src/app/components/forms/commons/EmailValidationInput.tsx
@@ -29,7 +29,10 @@ export const EmailValidationInput = (props: EmailValidationInputProps) => {
     stateRelatedMessage,
   });
 
-  const onBlur = async (): Promise<void> =>
+  const onBlur = async (
+    event: React.FocusEvent<HTMLInputElement, Element>,
+  ): Promise<void> => {
+    const { currentTarget } = event;
     trigger(props.nativeInputProps?.name)
       .then((isFieldValid) =>
         currentInputValue && isFieldValid
@@ -43,6 +46,10 @@ export const EmailValidationInput = (props: EmailValidationInputProps) => {
           const feedback = makeStateRelated(emailValidationStatus);
           props.onEmailValidationFeedback?.(feedback);
           setStateRelated(feedback);
+          props.nativeInputProps?.onBlur?.({
+            ...event,
+            currentTarget,
+          });
         }
       })
       .catch((error) => {
@@ -54,6 +61,7 @@ export const EmailValidationInput = (props: EmailValidationInputProps) => {
         props.onEmailValidationFeedback?.(feedback);
         setStateRelated(feedback);
       });
+  };
 
   const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setCurrentInputValue(event.target.value);

diff --git a/...app/components/forms/convention/sections/beneficiary/BeneficiaryCurrentEmployerFields.tsx b/...app/components/forms/convention/sections/beneficiary/BeneficiaryCurrentEmployerFields.tsx
@@ -3,7 +3,11 @@ import { Alert } from "@codegouvfr/react-dsfr/Alert";
 import { Input } from "@codegouvfr/react-dsfr/Input";
 import React from "react";
 import { useFormContext } from "react-hook-form";
-import { ConventionDto, addressDtoToString } from "shared";
+import {
+  ConventionDto,
+  addressDtoToString,
+  toLowerCaseWithoutDiacritics,
+} from "shared";
 import { EmailValidationInput } from "src/app/components/forms/commons/EmailValidationInput";
 import {
   EmailValidationErrorsState,
@@ -164,7 +168,15 @@ export const BeneficiaryCurrentEmployerFields = ({
         label={formFields["signatories.beneficiaryCurrentEmployer.email"].label}
         nativeInputProps={{
           ...formFields["signatories.beneficiaryCurrentEmployer.email"],
-          ...register("signatories.beneficiaryCurrentEmployer.email"),
+          ...register("signatories.beneficiaryCurrentEmployer.email", {
+            setValueAs: (value) => toLowerCaseWithoutDiacritics(value),
+          }),
+          onBlur: (event) => {
+            setValue(
+              "signatories.beneficiaryCurrentEmployer.email",
+              toLowerCaseWithoutDiacritics(event.currentTarget.value),
+            );
+          },
         }}
         {...getFieldError("signatories.beneficiaryCurrentEmployer.email")}
         onEmailValidationFeedback={({ state, stateRelatedMessage }) => {

diff --git a/front/src/app/components/forms/convention/sections/beneficiary/BeneficiaryFormSection.tsx b/front/src/app/components/forms/convention/sections/beneficiary/BeneficiaryFormSection.tsx
@@ -15,6 +15,7 @@ import {
   emailSchema,
   isBeneficiaryStudent,
   levelsOfEducation,
+  toLowerCaseWithoutDiacritics,
 } from "shared";
 import { AddressAutocomplete } from "src/app/components/forms/autocomplete/AddressAutocomplete";
 import { ConventionEmailWarning } from "src/app/components/forms/convention/ConventionEmailWarning";
@@ -182,8 +183,16 @@ export const BeneficiaryFormSection = ({
         }
         nativeInputProps={{
           ...formContents["signatories.beneficiary.email"],
-          ...register("signatories.beneficiary.email"),
+          ...register("signatories.beneficiary.email", {
+            setValueAs: (value) => toLowerCaseWithoutDiacritics(value),
+          }),
           ...(userFieldsAreFilled ? { value: connectedUser.email } : {}),
+          onBlur: (event) => {
+            setValue(
+              "signatories.beneficiary.email",
+              toLowerCaseWithoutDiacritics(event.currentTarget.value),
+            );
+          },
         }}
         {...getFieldError("signatories.beneficiary.email")}
         onEmailValidationFeedback={({ state, stateRelatedMessage }) => {

diff --git a/.../app/components/forms/convention/sections/beneficiary/BeneficiaryRepresentativeFields.tsx b/.../app/components/forms/convention/sections/beneficiary/BeneficiaryRepresentativeFields.tsx
@@ -1,7 +1,11 @@
 import { Input } from "@codegouvfr/react-dsfr/Input";
 import React, { useEffect } from "react";
 import { useFormContext } from "react-hook-form";
-import { ConventionReadDto, filterNotFalsy } from "shared";
+import {
+  ConventionReadDto,
+  filterNotFalsy,
+  toLowerCaseWithoutDiacritics,
+} from "shared";
 import { ConventionEmailWarning } from "src/app/components/forms/convention/ConventionEmailWarning";
 import {
   EmailValidationErrorsState,
@@ -111,7 +115,15 @@ export const BeneficiaryRepresentativeFields = ({
         }
         nativeInputProps={{
           ...formContents["signatories.beneficiaryRepresentative.email"],
-          ...register("signatories.beneficiaryRepresentative.email"),
+          ...register("signatories.beneficiaryRepresentative.email", {
+            setValueAs: (value) => toLowerCaseWithoutDiacritics(value),
+          }),
+          onBlur: (event) => {
+            setValue(
+              "signatories.beneficiaryRepresentative.email",
+              toLowerCaseWithoutDiacritics(event.currentTarget.value),
+            );
+          },
         }}
         {...getFieldError("signatories.beneficiaryRepresentative.email")}
         onEmailValidationFeedback={({ state, stateRelatedMessage }) => {

diff --git a/.../src/app/components/forms/convention/sections/establishment/EstablishementTutorFields.tsx b/.../src/app/components/forms/convention/sections/establishment/EstablishementTutorFields.tsx
@@ -2,7 +2,7 @@ import { Input } from "@codegouvfr/react-dsfr/Input";
 import React from "react";
 import { useFormContext } from "react-hook-form";
 import { useSelector } from "react-redux";
-import { ConventionReadDto } from "shared";
+import { ConventionReadDto, toLowerCaseWithoutDiacritics } from "shared";
 import { ConventionEmailWarning } from "src/app/components/forms/convention/ConventionEmailWarning";
 import {
   EmailValidationErrorsState,
@@ -25,7 +25,7 @@ export const EstablishementTutorFields = ({
   emailValidationErrors: EmailValidationErrorsState;
   isTutorEstablishmentRepresentative: boolean;
 }): JSX.Element => {
-  const { register, getValues, formState } =
+  const { register, getValues, formState, setValue } =
     useFormContext<ConventionReadDto>();
   const values = getValues();
   const getFieldError = makeFieldError(formState);
@@ -73,7 +73,15 @@ export const EstablishementTutorFields = ({
             hintText={formContents["establishmentTutor.email"].hintText}
             nativeInputProps={{
               ...formContents["establishmentTutor.email"],
-              ...register("establishmentTutor.email"),
+              ...register("establishmentTutor.email", {
+                setValueAs: (value) => toLowerCaseWithoutDiacritics(value),
+              }),
+              onBlur: (event) => {
+                setValue(
+                  "establishmentTutor.email",
+                  toLowerCaseWithoutDiacritics(event.currentTarget.value),
+                );
+              },
             }}
             {...getFieldError("establishmentTutor.email")}
             onEmailValidationFeedback={({ state, stateRelatedMessage }) => {

diff --git a/.../components/forms/convention/sections/establishment/EstablishmentRepresentativeFields.tsx b/.../components/forms/convention/sections/establishment/EstablishmentRepresentativeFields.tsx
@@ -3,7 +3,7 @@ import { Input } from "@codegouvfr/react-dsfr/Input";
 import React from "react";
 import { useFormContext } from "react-hook-form";
 import { useSelector } from "react-redux";
-import { ConventionReadDto } from "shared";
+import { ConventionReadDto, toLowerCaseWithoutDiacritics } from "shared";
 import { ConventionEmailWarning } from "src/app/components/forms/convention/ConventionEmailWarning";
 import {
   EmailValidationErrorsState,
@@ -24,7 +24,7 @@ export const EstablishmentRepresentativeFields = ({
   setEmailValidationErrors: SetEmailValidationErrorsState;
   emailValidationErrors: EmailValidationErrorsState;
 }): JSX.Element => {
-  const { getValues, register, formState } =
+  const { getValues, register, formState, setValue } =
     useFormContext<ConventionReadDto>();
   const values = getValues();
   const { getFormFields } = getFormContents(
@@ -91,7 +91,15 @@ export const EstablishmentRepresentativeFields = ({
         }
         nativeInputProps={{
           ...formContents["signatories.establishmentRepresentative.email"],
-          ...register("signatories.establishmentRepresentative.email"),
+          ...register("signatories.establishmentRepresentative.email", {
+            setValueAs: (value) => toLowerCaseWithoutDiacritics(value),
+          }),
+          onBlur: (event) => {
+            setValue(
+              "signatories.establishmentRepresentative.email",
+              toLowerCaseWithoutDiacritics(event.currentTarget.value),
+            );
+          },
         }}
         disabled={isFetchingSiret}
         onEmailValidationFeedback={({ state, stateRelatedMessage }) => {

diff --git a/front/src/app/components/forms/establishment/BusinessContact.tsx b/front/src/app/components/forms/establishment/BusinessContact.tsx
@@ -6,7 +6,12 @@ import {
 } from "@codegouvfr/react-dsfr/RadioButtons";
 import React, { Dispatch, SetStateAction, useState } from "react";
 import { UseFormRegisterReturn, useFormContext } from "react-hook-form";
-import { DotNestedKeys, FormEstablishmentDto, emailSchema } from "shared";
+import {
+  DotNestedKeys,
+  FormEstablishmentDto,
+  emailSchema,
+  toLowerCaseWithoutDiacritics,
+} from "shared";
 import { MultipleEmailsInput } from "src/app/components/forms/commons/MultipleEmailsInput";
 import { formEstablishmentFieldsLabels } from "src/app/contents/forms/establishment/formEstablishment";
 import {
@@ -115,11 +120,19 @@ export const BusinessContact = ({
         hintText={formContents["businessContact.email"].hintText}
         nativeInputProps={{
           ...formContents["businessContact.email"],
-          ...register("businessContact.email"),
+          ...register("businessContact.email", {
+            setValueAs: (value) => toLowerCaseWithoutDiacritics(value),
+          }),
           onChange: (event) => {
             setEmailModified(true);
             setValue("businessContact.email", event.currentTarget.value);
           },
+          onBlur: (event) => {
+            setValue(
+              "businessContact.email",
+              toLowerCaseWithoutDiacritics(event.currentTarget.value),
+            );
+          },
         }}
         {...getFieldError(
           "businessContact.email" as DotNestedKeys<FormEstablishmentDto>,

diff --git a/front/src/app/components/immersion-offer/ContactByEmail.tsx b/front/src/app/components/immersion-offer/ContactByEmail.tsx
@@ -16,6 +16,7 @@ import {
   conventionObjectiveOptions,
   domElementIds,
   labelsForImmersionObjective,
+  toLowerCaseWithoutDiacritics,
 } from "shared";
 import { TranscientPreferencesDisplay } from "src/app/components/immersion-offer/TranscientPreferencesDisplay";
 import { getDefaultAppellationCode } from "src/app/components/immersion-offer/contactUtils";
@@ -190,7 +191,15 @@ export const ContactByEmail = ({
           <EmailValidationInput
             label={inputsLabelsByKey.potentialBeneficiaryEmail}
             nativeInputProps={{
-              ...register("potentialBeneficiaryEmail"),
+              ...register("potentialBeneficiaryEmail", {
+                setValueAs: (value) => toLowerCaseWithoutDiacritics(value),
+              }),
+              onBlur: (event) => {
+                setValue(
+                  "potentialBeneficiaryEmail",
+                  toLowerCaseWithoutDiacritics(event.currentTarget.value),
+                );
+              },
             }}
             {...getFieldError("potentialBeneficiaryEmail")}
             onEmailValidationFeedback={({ state, stateRelatedMessage }) =>