diff --git a/src/App.css b/src/App.css index 788b373..874a035 100644 --- a/src/App.css +++ b/src/App.css @@ -263,6 +263,7 @@ button:hover { justify-content: center; align-items: center; padding: 0 !important; + margin: .25rem; } h1.text-warning { diff --git a/src/App.js b/src/App.js index c2819c0..918c130 100644 --- a/src/App.js +++ b/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 + ) : ( + + ); +}; 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={} /> - } /> )} + } + permissions={permissions} + allowedId={id} + /> + } + /> + } + permissions={permissions} + allowedId={id} + /> + } + /> + {permissions === 1 && ( //only have permissions = 1 you can pass <> { path={PrivateRoutes.FILTERUSUARIO} element={} /> - } - /> )} diff --git a/src/components/Nav/Menu.css b/src/components/Nav/Menu.css index 99c236f..6e655a7 100644 --- a/src/components/Nav/Menu.css +++ b/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; } \ No newline at end of file diff --git a/src/components/Nav/Menu.js b/src/components/Nav/Menu.js index 94d4028..485184a 100644 --- a/src/components/Nav/Menu.js +++ b/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" >
-
+
(window.location.href = PrivateRoutes.INTERFACE)} + > Menú
diff --git a/src/components/User/ModificarUsuario/MDUser.js b/src/components/User/ModificarUsuario/MDUser.js index fb84ad2..3d32db8 100644 --- a/src/components/User/ModificarUsuario/MDUser.js +++ b/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); } diff --git a/src/components/User/PerfilUsuario/PerfilUsuario.js b/src/components/User/PerfilUsuario/PerfilUsuario.js index 346f2c5..04a6e6d 100644 --- a/src/components/User/PerfilUsuario/PerfilUsuario.js +++ b/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" }); diff --git a/src/guards/id.guard.js b/src/guards/id.guard.js new file mode 100644 index 0000000..c5c96a0 --- /dev/null +++ b/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; diff --git a/src/guards/jwt.guard.js b/src/guards/jwt.guard.js index 9799fcb..7c888cb 100644 --- a/src/guards/jwt.guard.js +++ b/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;