Merge pull request #80 from Genesis-Solutions/testing

Testing
Genesis-Solutions · Jun 9, 2023 · bf777d6 · bf777d6
2 parents 85e7f81 + acbd2c8
commit bf777d6
Show file tree

Hide file tree

Showing 41 changed files with 775 additions and 400 deletions.
diff --git a/GomezMorinFrontEnd/public/images/Contigo.png b/GomezMorinFrontEnd/public/images/Contigo.png
diff --git a/GomezMorinFrontEnd/public/images/Logotipo_GM_Gris.png b/GomezMorinFrontEnd/public/images/Logotipo_GM_Gris.png
diff --git a/GomezMorinFrontEnd/public/images/gomez-morin-1.jpg b/GomezMorinFrontEnd/public/images/gomez-morin-1.jpg
diff --git a/GomezMorinFrontEnd/public/images/gomez-morin-10.jpg b/GomezMorinFrontEnd/public/images/gomez-morin-10.jpg
diff --git a/GomezMorinFrontEnd/public/images/gomez-morin-11.jpg b/GomezMorinFrontEnd/public/images/gomez-morin-11.jpg
diff --git a/GomezMorinFrontEnd/public/images/gomez-morin-12.jpg b/GomezMorinFrontEnd/public/images/gomez-morin-12.jpg
diff --git a/GomezMorinFrontEnd/public/images/gomez-morin-2.jpg b/GomezMorinFrontEnd/public/images/gomez-morin-2.jpg
diff --git a/GomezMorinFrontEnd/public/images/gomez-morin-3.jpg b/GomezMorinFrontEnd/public/images/gomez-morin-3.jpg
diff --git a/GomezMorinFrontEnd/public/images/gomez-morin-4.jpg b/GomezMorinFrontEnd/public/images/gomez-morin-4.jpg
diff --git a/GomezMorinFrontEnd/public/images/gomez-morin-5.jpg b/GomezMorinFrontEnd/public/images/gomez-morin-5.jpg
diff --git a/GomezMorinFrontEnd/public/images/gomez-morin-6.jpg b/GomezMorinFrontEnd/public/images/gomez-morin-6.jpg
diff --git a/GomezMorinFrontEnd/public/images/gomez-morin-7.jpg b/GomezMorinFrontEnd/public/images/gomez-morin-7.jpg
diff --git a/GomezMorinFrontEnd/public/images/gomez-morin-8.jpg b/GomezMorinFrontEnd/public/images/gomez-morin-8.jpg
diff --git a/GomezMorinFrontEnd/public/images/gomez-morin-9.jpg b/GomezMorinFrontEnd/public/images/gomez-morin-9.jpg
diff --git a/GomezMorinFrontEnd/public/images/image_carousel_1.jpg b/GomezMorinFrontEnd/public/images/image_carousel_1.jpg
diff --git a/GomezMorinFrontEnd/public/images/image_carousel_2.jpeg b/GomezMorinFrontEnd/public/images/image_carousel_2.jpeg
diff --git a/GomezMorinFrontEnd/public/images/image_carousel_3.jpg b/GomezMorinFrontEnd/public/images/image_carousel_3.jpg
diff --git a/GomezMorinFrontEnd/public/images/image_carousel_4.jpg b/GomezMorinFrontEnd/public/images/image_carousel_4.jpg
diff --git a/GomezMorinFrontEnd/public/images/image_carousel_5.png b/GomezMorinFrontEnd/public/images/image_carousel_5.png
diff --git a/GomezMorinFrontEnd/src/App.jsx b/GomezMorinFrontEnd/src/App.jsx
@@ -10,6 +10,7 @@ import RequestDetail from "./pages/RequestDetail";
 import { useSelector } from "react-redux";
 import PersistLogin from "./components/PersistLogin";
 import LandingPage from "./pages/LandingPage";
+import RetrievePass from "./pages/RetrievePassword";
 
 const App = () => {
   const rol = useSelector((state) => state.auth.nameRol);
@@ -24,6 +25,7 @@ const App = () => {
             <Route element={<Layout />}>
               <Route path="/" element={<LandingPage />} />
               <Route path="/register" element={<Register />} />
+			  <Route path="/retrievepass" element={<RetrievePass />} />
               <Route path="/login" element={<Login />} />
 
               <Route

diff --git a/GomezMorinFrontEnd/src/components/DropdownInput.jsx b/GomezMorinFrontEnd/src/components/DropdownInput.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useState} from "react";
 import { useFormContext } from "react-hook-form";
 
 /**
@@ -8,23 +8,26 @@ import { useFormContext } from "react-hook-form";
  * @param {string} label - The label for the input.
  * @param {string} id - The ID for the input.
  * @param {Array<Object>} options - An array of options for the dropdown.
+ * @param {string} defaultValue - The default value for the dropdown.
+ * @param {string} pattern - The regex pattern for the input.
  * @returns {JSX.Element} - The DropdownInput component
  */
-const DropdownInput = ({ name, label, id, options, defaultValue }) => {
+const DropdownInput = ({ name, label, id, options, defaultValue, pattern}) => {
   const { register } = useFormContext();
+  const [errorMessage, setErrorMessage] = useState("");
 
   return (
     <div className="flex flex-col gap-2 w-full h-full ">
       <label className="font-semibold text-md py-1" htmlFor={id}>
         {label}
       </label>
       <select
-        {...register(name)}
+        {...register(name, { pattern: { value: pattern } })}
         className="px-4 py-2.5 border-gray-400 rounded-lg border focus:ring-blue-500 focus:border-blue-500 text-sm "
         name={name}
         id={id}
       >
-        <option key={""} value={defaultValue}>
+        <option key={0} value={defaultValue} >
           {defaultValue ? defaultValue : "- Selecciona -"}
         </option>
         {options.map((option) => {
@@ -36,6 +39,9 @@ const DropdownInput = ({ name, label, id, options, defaultValue }) => {
           );
         })}
       </select>
+      {errorMessage && (
+        <p className="font-semibold text-red-400 text-sm">{errorMessage}</p>
+      )}
     </div>
   );
 };

diff --git a/GomezMorinFrontEnd/src/components/EditModal.jsx b/GomezMorinFrontEnd/src/components/EditModal.jsx
@@ -10,12 +10,13 @@ import { updateForms } from "../queries/queryRequestForm";
 import { useNavigate } from "react-router-dom";
 import { useDispatch } from "react-redux";
 import { setRows } from "../states/formSlice";
+import { postEmail } from "../queries/queryApi";
 /**
  *  A React component that renders a modal with a form
  *
  * @returns {Jsx.Element} - A React JSX element representing a modal with a form
  */
-const EditModal = ({ idForm, folio, estatus, userId }) => {
+const EditModal = ({ idForm, folio, estatus, userId, userPtr }) => {
   const navigate = useNavigate();
   const methods = useForm();
   const [isOpen, setIsOpen] = useState(false);
@@ -26,6 +27,7 @@ const EditModal = ({ idForm, folio, estatus, userId }) => {
       id: item._id,
       fecha: item.requestDate,
       folio: item.folio,
+      userPtr: item.userPtr,
       tipo: item.membretatedLetterDoc ? "Persona moral" : "Persona física",
       evento: item.membretatedLetterDoc ? "-" : item.typeEvent,
       nombre: item.membretatedLetterDoc
@@ -54,6 +56,74 @@ const EditModal = ({ idForm, folio, estatus, userId }) => {
       alert(err.response.data.message);
     }
     setIsOpen(false);
+    if (estatus != data.estatus) {
+      try {
+        const emailData = {
+          title: "Cambio de estatus",
+          message: `<!DOCTYPE html>
+<html>
+<head>
+  <title>Notificación de Cambio de Estatus</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+    }
+    
+    .container {
+      max-width: 500px;
+      margin: 0 auto;
+      padding: 20px;
+      background-color: #f7f7f7;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+    }
+    
+    h1 {
+      color: #333;
+    }
+    
+    p {
+      margin-bottom: 10px;
+    }
+    
+    .button {
+      display: inline-block;
+      padding: 10px 20px;
+      background-color: #0492C2;
+      color: #fff;
+      text-decoration: none;
+      border-radius: 5px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>Notificación de Cambio de Estatus</h1>
+    <p>Estimado/a usuario,</p>
+    
+    <p>Queremos informarte que el estatus de la solicitud con folio: <strong>${data.folio}</strong> ha sido modificado a <strong>${data.estatus}</strong>.</p>
+    
+    <p>Para obtener más detalles y acceder a la página de eventos, haz clic en el siguiente botón:</p>
+    
+    <p>
+      <a class="button" href="http://eventos-ceceq.com" target="_blank">Ir a Eventos CECEQ</a>
+    </p>
+    
+    <p>¡Gracias y que tengas un buen día!</p>
+    
+    <p>Atentamente,</p>
+    <p>Goméz Morín</p>
+  </div>
+</body>
+</html>`,
+          userId: userPtr,
+        };
+        await postEmail(emailData);
+        alert("Correo con modificación de estatus enviado");
+      } catch (err) {
+        alert(err.response.data.message);
+      }
+    }
   };
 
   /**

diff --git a/GomezMorinFrontEnd/src/components/Footer.jsx b/GomezMorinFrontEnd/src/components/Footer.jsx
@@ -24,10 +24,10 @@ const Footer = () => {
           C.P.76000. Santiago de Querétaro.
         </p>
       </div>
-      <div className=" hidden md:px-4 md:pt-2">
+      <div className="md:px-4 md:pt-2">
         <img
           className="object-scale-down h-12"
-          src="/images/gomez_morin_blanco.png"
+          src="/images/Contigo.png"
         />
       </div>
     </div>

diff --git a/GomezMorinFrontEnd/src/components/InputForm.jsx b/GomezMorinFrontEnd/src/components/InputForm.jsx
@@ -29,21 +29,12 @@ const InputForm = ({
   maxLength,
   min,
   max,
+  onChange,
+  disabled
 }) => {
   const { register } = useFormContext();
   const [errorMessage, setErrorMessage] = useState("");
 
-  const handleFileChange = (event) => {
-    const file = event.target.files[0];
-    const allowedExtensions = /(\.pdf)$/i;
-
-    if (!allowedExtensions.test(file.name)) {
-      setErrorMessage("Solo se permiten archivos PDF.");
-    } else {
-      setErrorMessage("");
-    }
-  };
-
   return (
     <div className="flex flex-col gap-2 w-full h-full">
       <label htmlFor={name} className="font-semibold text-md py-1">
@@ -63,7 +54,8 @@ const InputForm = ({
         maxLength={maxLength}
         min={min}
         max={max}
-        onChange={handleFileChange}
+        onChange={onChange}
+        disabled={disabled}
       />
       {errorMessage && (
         <p className="font-semibold text-red-400 text-sm">{errorMessage}</p>

diff --git a/GomezMorinFrontEnd/src/components/Layout.jsx b/GomezMorinFrontEnd/src/components/Layout.jsx
@@ -9,10 +9,10 @@ import Footer from "./Footer";
  * 
  * @returns {JSX.Element} The JSX element representing the layout UI.
  */
-
+const isGray = import.meta.env.VITE_GRAYSCALE === 'true';
 const Layout = () => {
   return (
-    <div className="w-full h-full flex flex-col justify-between overflow-y-auto">
+    <div className={isGray ? "filter grayscale w-full h-full flex flex-col justify-between overflow-y-auto" : "w-full h-full flex flex-col justify-between overflow-y-auto"}>
       <Navbar />
       <Outlet />
       <Footer/>

diff --git a/GomezMorinFrontEnd/src/pages/LandingPage/index.jsx b/GomezMorinFrontEnd/src/pages/LandingPage/index.jsx
@@ -1,11 +1,18 @@
 import React from "react";
 import Header from "../../components/Header.jsx";
 import ImageCarousel from "../../components/ImageCarousel.jsx";
-import Carousel1 from "../../../public/images/image_carousel_1.jpg";
-import Carousel2 from "../../../public/images/image_carousel_2.jpeg";
-import Carousel3 from "../../../public/images/image_carousel_3.jpg";
-import Carousel4 from "../../../public/images/image_carousel_4.jpg";
-import Carousel5 from "../../../public/images/image_carousel_5.png";
+import Carousel1 from "../../../public/images/gomez-morin-1.jpg";
+import Carousel2 from "../../../public/images/gomez-morin-2.jpg";
+import Carousel3 from "../../../public/images/gomez-morin-3.jpg";
+import Carousel4 from "../../../public/images/gomez-morin-4.jpg";
+import Carousel5 from "../../../public/images/gomez-morin-5.jpg";
+import Carousel6 from "../../../public/images/gomez-morin-6.jpg";
+import Carousel7 from "../../../public/images/gomez-morin-7.jpg";
+import Carousel8 from "../../../public/images/gomez-morin-8.jpg";
+import Carousel9 from "../../../public/images/gomez-morin-9.jpg";
+import Carousel10 from "../../../public/images/gomez-morin-10.jpg";
+import Carousel11 from "../../../public/images/gomez-morin-11.jpg";
+import Carousel12 from "../../../public/images/gomez-morin-12.jpg";
 //import guideLinesPdf from "../../assets/Lineamientos de uso y disfrute.pdf";
 
 const LandingPage = () => {
@@ -86,7 +93,43 @@ const LandingPage = () => {
           <div className="col-span-1 place-self-center">
             <img
               className="object-cover h-48 w-96 shadow-xl rounded-lg"
-              src={Carousel1}
+              src={Carousel6}
+            />
+          </div>
+          <div className="col-span-1 place-self-center">
+            <img
+              className="object-cover h-48 w-96 shadow-xl rounded-lg"
+              src={Carousel7}
+            />
+          </div>
+          <div className="col-span-1 place-self-center">
+            <img
+              className="object-cover h-48 w-96 shadow-xl rounded-lg"
+              src={Carousel8}
+            />
+          </div>
+          <div className="col-span-1 place-self-center">
+            <img
+              className="object-cover h-48 w-96 shadow-xl rounded-lg"
+              src={Carousel9}
+            />
+          </div>
+          <div className="col-span-1 place-self-center">
+            <img
+              className="object-cover h-48 w-96 shadow-xl rounded-lg"
+              src={Carousel10}
+            />
+          </div>
+          <div className="col-span-1 place-self-center">
+            <img
+              className="object-cover h-48 w-96 shadow-xl rounded-lg"
+              src={Carousel11}
+            />
+          </div>
+          <div className="col-span-1 place-self-center">
+            <img
+              className="object-cover h-48 w-96 shadow-xl rounded-lg"
+              src={Carousel12}
             />
           </div>
         </div>

diff --git a/GomezMorinFrontEnd/src/pages/Login/index.jsx b/GomezMorinFrontEnd/src/pages/Login/index.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import InputForm from "../../components/InputForm";
 import Button from "../../components/Button";
 import IconTitle from "../../components/IconTitle";
@@ -18,9 +18,15 @@ const Login = () => {
   const methods = useForm();
   const navigate = useNavigate();
   const login = useLoginUser();
+  const [password, setPassword] = useState("");
+
+  const onChangeHandler = (e) => {
+    setPassword(e.target.value);
+  };
   const onSubmitUser = async (data) => {
+    const newData = { userName: data.userName, password: password };
     try {
-      await login(data);
+      await login(newData);
       navigate("/");
       // reload page
     } catch (err) {
@@ -54,6 +60,7 @@ const Login = () => {
                 label="Contraseña"
                 name="password"
                 type="password"
+                onChange={onChangeHandler}
                 placeholder="Ingresa tu contraseña"
                 defaultValue=""
               />
@@ -75,6 +82,14 @@ const Login = () => {
                 <TextButton text="Crear una Cuenta" path={"/register"} />
               </div>
             </div>
+            <div className="flex justify-center mt-6">
+              <div className="w-full max-w-s flex justify-center">
+                <TextButton
+                  text="¿Olvidaste tu contraseña?"
+                  path={"/retrievepass"}
+                />
+              </div>
+            </div>
           </form>
         </FormProvider>
       </div>

diff --git a/GomezMorinFrontEnd/src/pages/PageRequest/index.jsx b/GomezMorinFrontEnd/src/pages/PageRequest/index.jsx
@@ -6,6 +6,7 @@ import DataGridComponent from "../../components/DataGridComponent";
 import { getForm } from "../../queries/queryRequestForm";
 import { useSelector } from "react-redux";
 
+
 /**
  * The PageRequest component displays the request page, including a header, a button to create a new request,
  * and a data grid component to display existing requests.
@@ -74,9 +75,9 @@ const PageRequest = () => {
    * @returns {JSX.Element} - The PageRequest component.
    */
   return (
-    <div className="grid grid-cols-1 md:grid-cols-6">
-      <div className="md:col-span-1 md:bg-sideLeftBG md:bg-cover md:bg-center md:bg-no-repeat"></div>
-      <div className="col-span-1 md:col-span-4 flex justify-between">
+    <div className={`grid grid-cols-1 lg:grid-cols-6 ${rows.length === 0 ? 'lg:h-full' : ''}`}>
+      <div className="lg:col-span-1 lg:bg-sideLeftBG lg:bg-cover lg:bg-center lg:bg-no-repeat"></div>
+      <div className="col-span-1 lg:col-span-4 flex justify-between">
         <div className="flex flex-col items-center py-10 w-full md:p-12">
           <Header tittle={"Solicitudes"} />
           <div className="flex py-12 w-52 h-36 md:w-96 md:h-36 md:p-12 md:px-6 ">
@@ -104,7 +105,7 @@ const PageRequest = () => {
                 columns={rol === "Moral" ? columnsMoral : columns}
               ></DataGridComponent>
             ) : (
-              <div className="flex justify-center items-center w-full h-full">
+              <div className="flex justify-center items-center w-full">
                 <p className="text-base md:text-2xl text-gray-400">
                   No hay solicitudes registradas
                 </p>
@@ -113,7 +114,7 @@ const PageRequest = () => {
           </div>
         </div>
       </div>
-      <div className="md:col-span-1 md:bg-sideRightBG md:bg-cover md:bg-center md:bg-no-repeat"></div>
+      <div className="lg:col-span-1 lg:bg-sideRightBG lg:bg-cover lg:bg-center lg:bg-no-repeat"></div>
     </div>
   );
 };