Merge pull request #6 from pi-ati-ort/3-conectar-login

PR: login
pi-ati-ort · Dec 19, 2023 · dc38982 · dc38982
2 parents b2db61c + 96102c9
commit dc38982
Show file tree

Hide file tree

Showing 10 changed files with 343 additions and 19 deletions.
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Permiso de Construcción Digital | PI-ATI-ORT</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -4,4 +4,12 @@
 
 .verde-idem {
     color: #5CBE81;
-}
+  }
+
+.text-idem {
+    color: #5CBE81;
+  }
+
+.border-idem {
+    border-color: #5CBE81;
+  }
diff --git a/src/App.js b/src/App.js
@@ -4,8 +4,10 @@ import "./App.css";
 import Header from "./components/general/Header";
 
 import Home from "./components/home/Layout";
-// import Login from "./components/login/Layout";
+import Login from "./components/login/Layout";
 import Register from "./components/register/Layout";
+import Profile from "./components/profile/Layout";
+import NotFound from "./components/general/NotFound";
 
 function App() {
   return (
@@ -16,8 +18,10 @@ function App() {
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Home />} />
-          {/* <Route path="/login" element={<Login />} /> */}
+          <Route path="/login" element={<Login />} />
           <Route path="/register" element={<Register />} />
+          <Route path="/profile" element={<Profile />} />
+          <Route path="*" element={<NotFound />} />
         </Routes>
       </BrowserRouter>
     </div>

diff --git a/src/api/apiService.js b/src/api/apiService.js
@@ -12,4 +12,26 @@ export const registerUser = async (user) => {
     console.error("Error registering user:", error);
     throw error;
   }
-};
+};
+
+export const loginUser = async (user) => {
+  try {
+    const response = await axios.post("http://localhost:8080/auth/login", user);
+    return response.data;
+  } catch (error) {
+    console.error("Error login in: ", error);
+    throw error;
+  }
+};
+
+export const getUser = async (username) => {
+  try {
+    const response = await axios.get(
+      `http://localhost:8080/users/${username}`
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Error getting user: ", error);
+    throw error;
+  }
+}
diff --git a/src/components/general/Header.js b/src/components/general/Header.js
@@ -4,18 +4,59 @@ import "./header.css";
 import logo from "../../images/logo_imm.png";
 
 const Header = () => {
-
   const goToHome = (e) => {
     e.preventDefault();
     window.location.href = "/";
-  }
-  
+  };
+
   return (
-    <header className="flex flex-wrap w-full bg-verde-idem text-sm py-3">
-      <nav className="relative w-full mx-auto px-4">
-        <div className="">
-         <img src={logo} alt="Intendencia de Montevideo" className="h-11" onClick={goToHome} />
-        </div>
+    <header className="flex-wrap w-full bg-verde-idem text-sm py-3">
+      <nav className="relative w-full mx-auto px-4 flex flex-row">
+        <span className="">
+          <img
+            src={logo}
+            alt="Intendencia de Montevideo"
+            className="h-11"
+            onClick={goToHome}
+          />
+        </span>
+        {sessionStorage.getItem("token") ? (
+          <>
+            <span className="flex flex-row gap-6 mx-auto">
+              <div className="nav-menu flex justify-between">
+                <div className="flex items-center justify-between flex-shrink-0 text-white mr-6">
+                  <a
+                    className="text-white no-underline hover:text-white hover:no-underline"
+                    href="/profile"
+                  >
+                    <span className="text-base font-semibold">Perfil</span>
+                  </a>
+                </div>
+              </div>
+              <div className="nav-menu flex flex-wrap justify-between">
+                <div className="flex items-center flex-shrink-0 text-white">
+                  <a
+                    className="text-white no-underline hover:text-white hover:no-underline"
+                    href="/"
+                    onClick={() => {
+                      sessionStorage.clear();
+                      window.location.href = "/";
+                    }}
+                  >
+                    <span className="text-base font-semibold">Salir</span>
+                  </a>
+                </div>
+              </div>
+            </span>
+            <div className="flex right-0">
+              <p className="text-white font-semibold text-sm text-end">
+                {sessionStorage.getItem("name")}
+                <br />
+                {sessionStorage.getItem("username")}
+              </p>
+            </div>
+          </>
+        ) : null}
       </nav>
     </header>
   );

diff --git a/src/components/general/NotFound.js b/src/components/general/NotFound.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const NotFound = () => {
+  return (
+    <div>NotFound</div>
+  )
+}
+
+export default NotFound
diff --git a/src/components/home/Layout.js b/src/components/home/Layout.js
@@ -1,6 +1,11 @@
-import React from "react";
+import React, { useState } from "react";
+import "../../App.css";
+
+import logo from "../../images/dbp_logo.png";
 
 const Home = () => {
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+
   const LoginHandler = () => {
     window.location.href = "/login";
   };
@@ -9,14 +14,29 @@ const Home = () => {
     window.location.href = "/register";
   };
 
+  const ModalHandler = () => {
+    setModalIsOpen(!modalIsOpen);
+  };
+
   return (
     <div>
-      <header className="App-header">
-        <p className="text-5xl text-center mt-32 mb-20 text-black font-bold">
+      <div className="">
+        <div className="">
+          <img
+            src={logo}
+            alt="Permiso de contracción digital"
+            className="mx-auto w-1/3 mt-4"
+          />
+        </div>
+        <p className="text-4xl text-center mt-8 mb-4 text-black font-bold">
           Proyecto Integrador
         </p>
-      </header>
-      <div className="flex flex-row justify-center mt-10">
+        <p className="text-lg text-center mb-10 text-black font-bold">
+          Ampliación de sistema piloto de permisos de construcción <br />
+          digitales para la Intendencia de Montevideo
+        </p>
+      </div>
+      <div className="flex flex-row justify-center">
         <span className="mx-4">
           <button
             className="bg-verde-idem text-white rounded-md py-3 px-12 text-lg font-semibold"
@@ -27,13 +47,105 @@ const Home = () => {
         </span>
         <span className="mx-4">
           <button
-            className="bg-verde-idem text-white rounded-md py-3 px-9 text-lg font-semibold"
+            className="bg-verde-idem text-white rounded-md py-3 px-11 text-lg font-semibold"
             onClick={RegisterHandler}
           >
             Registro
           </button>
         </span>
       </div>
+      <div className="flex flex-row justify-center mt-10">
+        <span className="mx-4 w-full text-center">
+          <button
+            className="bg-slate-50 text-idem rounded-md py-3 text-lg font-semibold mx-auto px-20 border-2 border-idem mb-32"
+            onClick={ModalHandler}
+          >
+            Sobre este proyecto
+          </button>
+        </span>
+      </div>
+      {modalIsOpen && (
+        <div
+          className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50"
+          onClick={ModalHandler}
+        >
+          <div
+            className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-md shadow-lg p-10 w-4/5"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex flex-col gap-4">
+              <p className="text-2xl text-center text-black font-semibold">
+                Sobre este proyecto
+              </p>
+              <p className="text-justify text-black">
+                Este proyecto fue realizado por Nicolas Fernandez y Sebastian
+                Paulos, estudiantes de la{" "}
+                <a
+                  href="https://www.ort.edu.uy/"
+                  className="text-idem font-semibold"
+                >
+                  Universidad ORT Uruguay
+                </a>{" "}
+                como parte del Proyecto Integrador final de la carrera de
+                Analista en Tecnologías de la Información.
+              </p>
+              <p className="text-justify text-black">
+                El objetivo del mismo es desarrollar una aplicación web que
+                permita a los usuarios realizar un seguimiento de los trámites
+                que realizan ante la Intendencia de Montevideo. El objetivo del
+                mismo es desarrollar una aplicación web que permita a los
+                usuarios realizar un seguimiento de los trámites que realizan
+                ante la Intendencia de Montevideo. El objetivo del mismo es
+                desarrollar una aplicación web que permita a los usuarios
+                realizar un seguimiento de los trámites que realizan ante la
+                Intendencia de Montevideo. El objetivo del mismo es desarrollar
+                una aplicación web que permita a los usuarios realizar un
+                seguimiento de los trámites que realizan ante la Intendencia de
+                Montevideo. El objetivo del mismo es desarrollar una aplicación
+                web que permita a los usuarios realizar un seguimiento de los
+                trámites que realizan ante la Intendencia de Montevideo. El
+                objetivo del mismo es desarrollar una aplicación web que permita
+                a los usuarios realizar un seguimiento de los trámites que
+                realizan ante la Intendencia de Montevideo.
+              </p>
+              <p className="text-justify text-black">
+                Para ello, se utilizaron las siguientes tecnologías:
+              </p>
+              <ul className="list-disc list-inside text-black">
+                <li>React</li>
+                <li>Node.js</li>
+                <li>Express</li>
+                <li>MySQL</li>
+              </ul>
+              <p className="text-justify text-black">
+                El código fuente de este proyecto se encuentra disponible en{" "}
+                <a href="#" className="text-idem font-semibold">
+                  GitHub
+                </a>
+                .
+              </p>
+            </div>
+            <div className="flex justify-end mt-6 gap-3">
+              <span>
+                <button
+                  className="btn-sm bg-slate-50 text-idem border-2 border-idem rounded-md py-2 px-3 text-sm font-semibold"
+                  onClick={ModalHandler}
+                >
+                  Ver Repositorio
+                </button>
+              </span>
+              <span>
+                <button
+                  className="btn-sm bg-verde-idem text-white rounded-md py-2 px-3 text-sm font-semibold"
+                  onClick={ModalHandler}
+                >
+                  Cerrar
+                </button>
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };