validation contact

GrossesMitaines/grosses-mitaines-ui/package-lock.json

@@ -25,6 +25,7 @@
         "react-devtools": "^4.26.0",
         "react-dom": "^18.2.0",
         "react-fontawesome": "^1.7.1",
+        "react-hook-form": "^7.38.0",
         "react-icons": "^4.6.0",
         "react-router-dom": "^6.4.1",
         "react-scripts": "^5.0.1",
@@ -15344,6 +15345,21 @@
         "react": ">=0.12.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.38.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.38.0.tgz",
+      "integrity": "sha512-gxWW1kMeru9xR1GoR+Iw4hA+JBOM3SHfr4DWCUKY0xc7Vv1MLsF109oHtBeWl9shcyPFx67KHru44DheN0XY5A==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-icons": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",
@@ -29471,6 +29487,12 @@
         "prop-types": "^15.5.6"
       }
     },
+    "react-hook-form": {
+      "version": "7.38.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.38.0.tgz",
+      "integrity": "sha512-gxWW1kMeru9xR1GoR+Iw4hA+JBOM3SHfr4DWCUKY0xc7Vv1MLsF109oHtBeWl9shcyPFx67KHru44DheN0XY5A==",
+      "requires": {}
+    },
     "react-icons": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",

GrossesMitaines/grosses-mitaines-ui/package.json

@@ -20,6 +20,7 @@
     "react-devtools": "^4.26.0",
     "react-dom": "^18.2.0",
     "react-fontawesome": "^1.7.1",
+    "react-hook-form": "^7.38.0",
     "react-icons": "^4.6.0",
     "react-router-dom": "^6.4.1",
     "react-scripts": "^5.0.1",

GrossesMitaines/grosses-mitaines-ui/src/pages/ContactUs.js

@@ -1,18 +1,63 @@
-import React from "react";
+import { useForm } from "react-hook-form";
-import { useEffect } from "react";
-import ContactForm from "../components/ContactForm";
 
-const ContactUs = () => {
+export default function App() {
+  const { register, handleSubmit, watch, formState: { errors } } = useForm();
+  const onSubmit = data => console.log(data);
 
-    useEffect(() => {
+  return (
-        document.title = 'Nous contacter';
+    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
-    });
+    <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="Contact">
+        <h1>Contacter-nous!</h1>
+        <div className="Error_color">
+        <div>
+            <div>
+            <label>Nom*</label>  
+            </div>
+            {/* include validation with required or other standard HTML validation rules */}
+            <input {...register("Nom", { required: true, minLength: 2})} />
+            {/* errors will return when field validation fails  */}
+            <div>
+            {errors.Nom && errors.Nom.type === 'required' && <span>Vous devez entrer votre nom!</span>}
+            {errors.Nom && errors.Nom.type === 'minLength' && <span>Votre nom doit avoir au moins 2 lettres!</span>}
+            </div>
+        </div>
 
-    return (
+         <div>
-        <div className="contactUs">
+            <div>
-          <ContactForm/>
+            <label>Email*</label>  
-        </div >
+            </div>
-    );
+            <input {...register("Email", { required: true, pattern: /^[A-Za-z0-9+_.-]+@(.+)$/ })} />
+            <div>
+            {errors.Email && errors.Email.type === 'required' && <span>Vous devez entrer une adresse!</span>}
+            {errors.Email && errors.Email.type === 'pattern' && <span>Adresse non valide!</span>}
+            </div>
+         </div>
+
+         <div>
+            <div>
+            <label>Téléphone*</label>  
+            </div>
+            <input placeholder="Exemple: 111-111-1111" {...register("Téléphone", { required: true, pattern: /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/ })} />
+            <div>
+            {errors.Téléphone && errors.Téléphone.type === 'required' && <span>Vous devez entrer un numéro de téléphone!</span>}
+            {errors.Téléphone && errors.Téléphone.type === 'pattern' && <span>Téléphone non valide!</span>}
+            </div>
+         </div>
+
+         <div>
+            <div>
+            <label>Message</label>  
+            </div>
+            <textarea {...register("Message")} />
+         </div>
+        </div>
+        
+
+      
+        <input type="submit" value="Contacter"/>
+        </div>
+        
+    </form>
+  );
 }
-
-export default ContactUs;

GrossesMitaines/grosses-mitaines-ui/src/pages/Login.js

@@ -17,7 +17,7 @@ const Login = () => {
                'Accept': 'text/json',
                'Content-Type': 'text/json'
             },
-            body: JSON.stringify({ username, password })
+            //body: JSON.stringify({ username, password })
         });
         // Partie de display d'erreur ou de redirection (faudrait checker pour se faire un state de connexion avec un cookie pour react).
         

GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css

@@ -20,6 +20,15 @@ a {
     text-decoration: none; 
 }
 
+.Contact {
+    background-color: beige;
+    text-align: center;
+}
+
+.Error_color span {
+    color: red;
+}
+
 .contactUs {
     height: 100vh;
 }