Merge pull request #21 from SocialGouv/fix-erreur-formulaire

fix: erreur formulaire
SocialGouv · Feb 10, 2022 · f7943f0 · f7943f0
2 parents 16b6894 + 91000b4
commit f7943f0
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/pages/contact/contact-form.js b/pages/contact/contact-form.js
@@ -36,9 +36,6 @@ export default function ContactForm() {
   const websiteSource = getInLocalStorage(STORAGE_SOURCE)
 
   const requiredField = <p className="required-field">*Champs obligatoire</p>
-  const loader = (
-    <Spinner animation="border" size="sm" className="margin-start-10" />
-  )
 
   const [sendEmailContactQuery] = useMutation(EPDS_CONTACT_INFORMATION, {
     client: client,
@@ -107,7 +104,7 @@ export default function ContactForm() {
     })
   }
 
-  const emailInput = ({ isRequired }) => (
+  const emailInput = (isRequired) => (
     <div
       className={`form-group fr-input-group ${isEmailValid ? "fr-input-group--valid" : ""
         }`}
@@ -123,11 +120,15 @@ export default function ContactForm() {
         onChange={(e) => setEmailValid(e.target.validity.valid)}
         placeholder="Écrivez ici l’adresse mail"
       />
+
+      {!isEmailValid ? (
+        <InputError error="L'adresse mail n'est pas au bon format" />
+      ) : null}
       {isRequired ? requiredField : null}
     </div>
   )
 
-  const phoneInput = ({ isRequired }) => (
+  const phoneInput = (isRequired) => (
     <div
       className={`form-group fr-input-group ${isPhoneValid ? "fr-input-group--valid" : ""
         }`}
@@ -144,6 +145,9 @@ export default function ContactForm() {
         placeholder="Écrivez ici le numéro pour vous contacter"
       />
 
+      {!isPhoneValid ? (
+        <InputError error="Le numéro de téléphone n'est pas au bon format" />
+      ) : null}
       {isRequired ? requiredField : null}
     </div>
   )
@@ -225,14 +229,24 @@ export default function ContactForm() {
             disabled={!canSend || isLoading}
           >
             Valider
-            {isLoading ? loader : null}
+            {isLoading ? <Loader /> : null}
           </button>
         </Col>
       </form>
     </ContentLayout>
   )
 }
 
+const Loader = () => (
+  <Spinner animation="border" size="sm" className="margin-start-10" />
+)
+
+const InputError = ({ error }) => (
+  <p id="text-input-error-desc-error" className="fr-error-text">
+    {error}
+  </p>
+)
+
 /**
  * Vérifie la validité du formulaire en fonction des informations complétées
  * @param {RequestContact.type} contactType Le type de contact

diff --git a/pages/index.js b/pages/index.js
@@ -45,7 +45,10 @@ export default function Home() {
           style={{ margin: 15 }}
           alt="Logo 1000 premiers jours"
         />
-        <Row className="slogan">Se tester c&#39;est déjà se soigner</Row>
+        <Row className="slogan">
+          Futurs parents, parents, évaluez votre bien être émotionnel en
+          quelques minutes.
+        </Row>
         <br />
         <button
           className="fr-btn fr-btn--lg"

diff --git a/styles/globals.scss b/styles/globals.scss
@@ -46,6 +46,7 @@ a {
   font-size: x-large;
   margin-block: $xxl;
   text-align: center;
+  line-height: 1.5em;
 }
 
 .widget-header{