Merge branch 'dev' into row_dash

frontend/package.json

@@ -11,7 +11,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.2",
-    "sass": "^1.69.5"
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.0.3",

frontend/src/App.css

@@ -15,6 +15,11 @@
   --text-exemple: #9a9999;
   --border-radius: 70px;
   --border-radius-negatif: -70px;
+  /* Couleurs de messages d'alerte */
+  --succes-msg: #355233;
+  --succes-background: #d4eed9;
+  --error-msg: #3f1519;
+  --error-background: #f7d7da;
 }
 * {
   margin: 0;

frontend/src/App.jsx

@@ -1,15 +1,16 @@
 import { Outlet } from "react-router-dom";
+import SignContextProvider from "./contexts/SignContext";
 import "./App.css";
 import Navbar from "./components/NavBar/NavBar";
 import RowDash from "./components/Dashboards/RowDash";
 
 function App() {
   return (
-    <>
+    <SignContextProvider>
       <Navbar />
       <Outlet />
       <RowDash />
-    </>
+    </SignContextProvider>
   );
 }
 export default App;

frontend/src/components/Alertes Messages/ErrorMsg.jsx

@@ -0,0 +1,19 @@
+import PropTypes from "prop-types";
+import "./error-msg.css";
+
+function ErrorMsg({ message }) {
+  return (
+    <div className="error-pop">
+      <h3 className="error-description">
+        <b className="error-text">Erreur : </b>
+        {message}.
+      </h3>
+    </div>
+  );
+}
+
+ErrorMsg.propTypes = {
+  message: PropTypes.string.isRequired,
+};
+
+export default ErrorMsg;

frontend/src/components/Alertes Messages/SuccesMsg.jsx

@@ -0,0 +1,19 @@
+import PropTypes from "prop-types";
+import "./succes-msg.css";
+
+function SuccesMsg({ message }) {
+  return (
+    <div className="succes-pop">
+      <h3 className="succes-description">
+        {message}
+        <b className="succes-text"> Succès.</b>
+      </h3>
+    </div>
+  );
+}
+
+SuccesMsg.propTypes = {
+  message: PropTypes.string.isRequired,
+};
+
+export default SuccesMsg;

frontend/src/components/Alertes Messages/error-msg.css

@@ -0,0 +1,17 @@
+.error-pop {
+  margin: 20px 0px;
+  width: 100%;
+  background-color: var(--error-background);
+  border-radius: 10px;
+}
+
+.error-description {
+  color: var(--error-msg);
+  font-weight: 300;
+  padding: 10px 0px;
+  text-align: center;
+}
+
+.error-text {
+  font-weight: 500;
+}

frontend/src/components/Alertes Messages/succes-msg.css

@@ -0,0 +1,17 @@
+.succes-pop {
+  margin: 20px 0px;
+  width: 100%;
+  background-color: var(--succes-background);
+  border-radius: 10px;
+}
+
+.succes-description {
+  color: var(--succes-msg);
+  font-weight: 300;
+  padding: 10px 0px;
+  text-align: center;
+}
+
+.succes-text {
+  font-weight: 500;
+}

frontend/src/components/Boutons/ButtonMaxi.jsx

@@ -1,13 +1,19 @@
+import React from "react";
 import PropTypes from "prop-types";
+import { useSignContext } from "../../contexts/SignContext";
 import "./button-maxi.css";
 
 function ButtonMaxi({ textBtn }) {
+  const { handleSubmitSignIn } = useSignContext();
+
   return (
-    <div>
-      <button className="submit-btn-maxi" type="submit">
-        {textBtn ?? "Test button maxi"}
-      </button>
-    </div>
+    <button
+      className="submit-btn-maxi"
+      type="button"
+      onClick={handleSubmitSignIn}
+    >
+      {textBtn ?? "Test button maxi"}
+    </button>
   );
 }
 

frontend/src/components/Dashboards/TitleDashboard.jsx

@@ -1,12 +1,14 @@
+import "./title-dashboard.css";
+
 function TitleDashboard() {
   return (
-    <div>
-      <h4>ID Offres</h4>
-      <h4>Entreprises</h4>
-      <h4>Candidats</h4>
-      <h4>Statut offre</h4>
-      <h4>Référent</h4>
-      <h4>Actions</h4>
+    <div className="title-container">
+      <h4 className="title-dash">ID Offres</h4>
+      <h4 className="title-dash">Entreprises</h4>
+      <h4 className="title-dash">Candidats</h4>
+      <h4 className="title-dash">Statut offre</h4>
+      <h4 className="title-dash">Référent</h4>
+      <h4 className="title-dash">Actions</h4>
     </div>
   );
 }

frontend/src/components/Dashboards/title-dashboard.css

@@ -0,0 +1,12 @@
+.title-container {
+  width: 70%;
+  margin-left: 25px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.title-dash {
+  font-size: 20px;
+  color: var(--texte-default);
+  font-weight: 400;
+}

frontend/src/components/Headers/HeaderLongTitle.jsx

@@ -1,20 +1,18 @@
 import "./header.css";
 import PropTypes from "prop-types";
 
-function HeaderLongTitle({ textTitle, textTitle2 }) {
+function HeaderLongTitle({ textTitle }) {
   return (
     <header className="header">
       <div className="header-content">
         <h1>{textTitle}</h1>
-        <h2>{textTitle2}</h2>
       </div>
     </header>
   );
 }
 
 HeaderLongTitle.propTypes = {
   textTitle: PropTypes.string.isRequired,
-  textTitle2: PropTypes.string.isRequired,
 };
 
 export default HeaderLongTitle;

frontend/src/components/Inputs/CheckboxCondition.jsx

@@ -1,11 +1,24 @@
 import PropTypes from "prop-types";
+import { useSignContext } from "../../contexts/SignContext";
 import "./checkbox-conditions.css";
 
-function CheckboxCondition({ textCondition }) {
+function CheckboxCondition({ textCondition, fieldName }) {
+  const { handleCheckboxChange } = useSignContext();
+
+  const handleChange = () => {
+    handleCheckboxChange(fieldName);
+  };
+
   return (
     <div>
       <div className="container-checkbox">
-        <input type="checkbox" id="scales" name="scales" />
+        <input
+          type="checkbox"
+          id={fieldName}
+          name={fieldName}
+          value={fieldName}
+          onChange={handleChange}
+        />
         <label htmlFor="scales">
           {textCondition ?? "Aucune valeur définit"}
         </label>
@@ -16,6 +29,7 @@ function CheckboxCondition({ textCondition }) {
 
 CheckboxCondition.propTypes = {
   textCondition: PropTypes.string.isRequired,
+  fieldName: PropTypes.string.isRequired,
 };
 
 export default CheckboxCondition;

frontend/src/components/Inputs/Input.jsx

@@ -1,7 +1,10 @@
 import PropTypes from "prop-types";
+import { useSignContext } from "../../contexts/SignContext";
 import "./input.css";
 
-function Input({ titleInput, holderText, hideInput }) {
+function Input({ titleInput, holderText, typeInput, fieldName, hideInput }) {
+  const { signIn, handleSignIn } = useSignContext();
+
   return (
     <div className="container-input">
       <label className="label-champs" htmlFor="name">
@@ -10,9 +13,12 @@ function Input({ titleInput, holderText, hideInput }) {
       {!hideInput && (
         <input
           className="background-input"
-          type="text"
-          id="name"
+          type={typeInput ?? "text"}
+          id={fieldName}
+          name={fieldName}
           placeholder={holderText ?? "Texte du placeholder"}
+          value={signIn[fieldName]}
+          onChange={(event) => handleSignIn(fieldName, event)}
         />
       )}
     </div>
@@ -22,6 +28,8 @@ function Input({ titleInput, holderText, hideInput }) {
 Input.propTypes = {
   titleInput: PropTypes.string.isRequired,
   holderText: PropTypes.string.isRequired,
+  typeInput: PropTypes.string.isRequired,
+  fieldName: PropTypes.string.isRequired,
   hideInput: PropTypes.bool.isRequired,
 };