fixed error of edit and style

src/App.css

@@ -263,6 +263,7 @@ button:hover {
   justify-content: center;
   align-items: center;
   padding: 0 !important;
+  margin: .25rem;
 }
 
 h1.text-warning {

src/App.js

@@ -1,5 +1,10 @@
 import React from "react";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  useParams,
+} from "react-router-dom";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "bootstrap/dist/js/bootstrap.bundle.min";
 
@@ -20,9 +25,20 @@ import Login from "./components/Login/LoginForm";
 
 import { PrivateRoutes, PublicRoutes } from "./models/routes";
 import Guard from "./guards/route.guard";
+import Id from "./guards/id.guard";
+
+const UserGuardedRoute = ({ element, permissions, allowedId }) => {
+  const { id_usuario } = useParams();
+  return permissions === 1 || id_usuario == allowedId ? (//double equal is necessary
+    element
+  ) : (
+    <Pagina404 />
+  );
+};
 
 const App = () => {
   const permissions = Guard();
+  const id = Id();
   const isLoginPage = window.location.pathname === PublicRoutes.LOGIN;
   const isNotFoundPage = window.location.pathname === PublicRoutes.NOTFOUND;
 
@@ -63,10 +79,30 @@ const App = () => {
                 path={`${PrivateRoutes.EDITARPROFESOR}:id_profesor`}
                 element={<FormEditProfesor />}
               />
-              <Route path={`${PrivateRoutes.DATAUSUARIO}:id_usuario`} element={<PerfilUsuario/>} />
             </>
           )}
 
+          <Route
+            path={`${PrivateRoutes.DATAUSUARIO}:id_usuario`}
+            element={
+              <UserGuardedRoute
+                element={<PerfilUsuario />}
+                permissions={permissions}
+                allowedId={id}
+              />
+            }
+          />
+          <Route
+            path={`${PrivateRoutes.EDITARUSUARIO}:id_usuario`}
+            element={
+              <UserGuardedRoute
+                element={<MDUser />}
+                permissions={permissions}
+                allowedId={id}
+              />
+            }
+          />
+
           {permissions === 1 && ( //only have permissions = 1 you can pass
             <>
               <Route
@@ -77,10 +113,6 @@ const App = () => {
                 path={PrivateRoutes.FILTERUSUARIO}
                 element={<NavUsuario />}
               />
-              <Route
-                path={`${PrivateRoutes.EDITARUSUARIO}:id_usuario`}
-                element={<MDUser />}
-              />
             </>
           )}
         </Routes>

src/components/Nav/Menu.css

@@ -14,7 +14,7 @@
 }
 
 .navbar-dark .nav-link {
-  color: #ffffff;
+  color: white !important;
 }
 
 .navbar-dark .nav-link:hover {
@@ -29,13 +29,10 @@
   background-color: #333333;
 }
 
-.offcanvas-body .nav-link {
-  color: #ffffff;
-}
-
 .offcanvas-body .nav-link:hover {
   color: #cccccc;
 }
+
 .navbar-toggler {
   border-radius: 8px;
   padding: 0.25rem 0.75rem;
@@ -43,4 +40,16 @@
 
 .ms-auto {
   margin-left: auto;
+}
+
+.red{
+  background-color: rgb(193, 17, 17);
+  color: white;
+  text-decoration: none;
+}
+
+.container{
+  border: 2px solid rgb(77, 77, 77);
+  border-radius: 8px;
+  margin: 10px;
 }

src/components/Nav/Menu.js

@@ -8,6 +8,7 @@ import JwtGuard from "../../guards/jwt.guard";
 const Menu = () => {
   JwtGuard();
   const permissions = Guard();
+  const [id, setId] = useState(null);
   const [usuario, setUsuario] = useState(null);
 
   useEffect(() => {
@@ -21,7 +22,9 @@ const Menu = () => {
       const parts = jwtToken.split(".");
       const decodedPayload = JSON.parse(atob(parts[1]));
       const user = decodedPayload.usuario;
+      const id = decodedPayload.id_usuario;
 
+      setId(id);
       setUsuario(user);
     };
     jwtPermissions();
@@ -60,7 +63,11 @@ const Menu = () => {
           aria-labelledby="offcanvasNavbarLabel"
         >
           <div className="offcanvas-header">
-            <h5 className="offcanvas-title" id="offcanvasNavbarLabel">
+            <h5
+              className="offcanvas-title"
+              id="offcanvasNavbarLabel"
+              onClick={() => (window.location.href = PrivateRoutes.INTERFACE)}
+            >
               Menú
             </h5>
             <button
@@ -73,25 +80,40 @@ const Menu = () => {
           <div className="offcanvas-body">
             <ul className="navbar-nav justify-content-end flex-grow-1 pe-3">
               <li className="nav-item">
-                <a
+                <h4
                   className="nav-link"
                   onClick={() =>
-                    (window.location.href = PrivateRoutes.CREARPROFESOR)
+                    (window.location.href = `${PrivateRoutes.DATAUSUARIO}${id}`)
                   }
                 >
-                  Crear Profesor
-                </a>
-              </li>
-              <li className="nav-item">
-                <a
-                  className="nav-link"
-                  onClick={() => (window.location.href = PublicRoutes.FILTER)}
-                >
-                  Editar Profesor
-                </a>
+                  Perfil
+                </h4>
               </li>
+
+              <div className="container">
+                <li className="nav-item">
+                  <a
+                    className="nav-link"
+                    onClick={() =>
+                      (window.location.href = PrivateRoutes.CREARPROFESOR)
+                    }
+                  >
+                    Crear Profesor
+                  </a>
+                </li>
+
+                <li className="nav-item">
+                  <a
+                    className="nav-link"
+                    onClick={() => (window.location.href = PublicRoutes.FILTER)}
+                  >
+                    Editar Profesor
+                  </a>
+                </li>
+              </div>
+
               {permissions === 1 && (
-                <>
+                <div className="container">
                   <li className="nav-item">
                     <a
                       className="nav-link"
@@ -112,13 +134,10 @@ const Menu = () => {
                       Editar Usuario
                     </a>
                   </li>
-                </>
+                </div>
               )}
               <li className="nav-item">
-                <button
-                  className="nav-link btn btn-link"
-                  onClick={handleLogout}
-                >
+                <button className=" btn red" onClick={handleLogout}>
                   Cerrar Sesión
                 </button>
               </li>

src/components/User/ModificarUsuario/MDUser.js

@@ -40,7 +40,7 @@ const MDUser = () => {
     try {
       const updatedUser = await updateUser(id_usuario, data);
       console.log("Success:", updatedUser);
-      window.location.href = PrivateRoutes.FILTERUSUARIO;
+      window.history.back();
     } catch (error) {
       console.error("Error updating user:", error);
     }

src/components/User/PerfilUsuario/PerfilUsuario.js

@@ -46,7 +46,6 @@ const PerfilUsuario = () => {
       year: "numeric",
       hour: "2-digit",
       minute: "2-digit",
-      second: "2-digit",
       hour12: false,
       timeZone: "America/Mexico_City"
     });

src/guards/id.guard.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+
+const Id = () => {
+  const [id, setId] = useState(String);
+
+  useEffect(() => {
+    const jwtPermissions = () => {
+      const jwtToken = localStorage.getItem("Token");
+      if (!jwtToken) {
+        console.error("No se encontró el token en localStorage");
+        return;
+      }
+
+      const parts = jwtToken.split(".");
+      const decodedPayload = JSON.parse(atob(parts[1]));
+      const userPermissions = decodedPayload.id_usuario;
+
+      setId(userPermissions);
+    };
+    jwtPermissions();
+  }, []);
+
+  return id;
+};
+
+export default Id;

src/guards/jwt.guard.js

@@ -3,7 +3,6 @@ import { useState, useEffect } from "react";
 const API_URL = process.env.REACT_APP_API_URL;
 
 const JwtGuard = () => {
-  const [jwt, setJwt] = useState(null);
   const [error, setError] = useState(null);
 
   useEffect(() => {
@@ -18,8 +17,6 @@ const JwtGuard = () => {
         });
 
         if (response.ok) {
-          const data = await response.json();
-          setJwt(data);
         } else {
           throw new Error("Token no válido");
         }
@@ -34,7 +31,7 @@ const JwtGuard = () => {
     validateJwt();
   }, []);
 
-  return { jwt, error };
+  return { error };
 };
 
 export default JwtGuard;