Merge pull request #69 from Jhonatan2022/soporte

Auth

Frontend/ReactJS/react-routers/src/App/index.js

@@ -5,25 +5,42 @@ import { Menu } from "../Menu";
 import { Footer } from "../Footer";
 import { BlogPage } from "../Blog";
 import { BlogPost } from "../Blog/BlogPost";
+import { Login } from "../Auth/Login";
+import { Logout } from "../Auth/Logout";
+import { AuthProvider, AuthRoute } from "../Auth/auth";
 import React from "react";
 import "./App.css";
 
 function App() {
   return (
     <React.Fragment>
       <HashRouter>
-        <Menu />
-
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/profile" element={<Profile />} />
-          <Route path="/blog" element={<BlogPage />} />
-          <Route path="/blog/:slug" element={<BlogPost />} />
-          {/* En caso de que no exista la ruta Imprimimos el mensaje */}
-          <Route path="*" element={<h1>Not Found</h1>} />
-        </Routes>
-
-        <Footer />
+        <AuthProvider>
+          <Menu />
+
+          <Routes>
+            <Route path="/" element={<Home />} />
+
+            <Route path="/blog" element={<BlogPage />} >
+              <Route path=":slug" element={<BlogPost />} />
+            </Route>
+
+            <Route path="/login" element={<Login />} />
+            <Route 
+              path="/logout" 
+              element={<AuthRoute>
+                <Logout />
+              </AuthRoute>} />
+
+            <Route path="/profile" element={
+              <AuthRoute><Profile /></AuthRoute>} />
+
+            {/* En caso de que no exista la ruta Imprimimos el mensaje */}
+            <Route path="*" element={<h1>Not Found</h1>} />
+          </Routes>
+
+          <Footer />
+        </AuthProvider>
       </HashRouter>
     </React.Fragment>
   );

Frontend/ReactJS/react-routers/src/Auth/Login.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useAuth } from './auth';
+import { Navigate } from 'react-router-dom';
+
+function Login() {
+  const auth = useAuth();
+  const [username, setUsername] = React.useState('');
+
+  const login = (e) => {
+    e.preventDefault();
+    auth.login({ username });
+  };
+
+  if (auth.user) {
+    return <Navigate to="/profile" />
+  }
+
+  return (
+    <>
+      <h1>Login</h1>
+
+      <form onSubmit={login}>
+        <label>Escribe tu nombre de usuario:</label>
+        <input
+          value={username}
+          onChange={e => setUsername(e.target.value)}
+        />
+
+        <button type="submit">Entrar</button>
+      </form>
+    </>
+  );
+}
+
+export { Login };

Frontend/ReactJS/react-routers/src/Auth/Logout.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useAuth } from './auth';
+
+function Logout() {
+  const auth = useAuth();
+
+  const logout = (e) => {
+    e.preventDefault();
+    auth.logout();
+  };
+
+  return (
+    <>
+      <h1>Logout</h1>
+
+      <form onSubmit={logout}>
+        <label>¿Segura de que quieras salir?</label>
+
+        <button type="submit">Salir</button>
+      </form>
+    </>
+  );
+}
+
+export { Logout };

Frontend/ReactJS/react-routers/src/Auth/auth.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Navigate, useNavigate } from 'react-router-dom';
+
+const AuthContext = React.createContext();
+
+function AuthProvider({ children }) {
+  const navigate = useNavigate();
+  const [user, setUser] = React.useState(null);
+
+  const login = ({ username }) => {
+    setUser({ username });
+    navigate('/profile');
+  };
+
+  const logout = () => {
+    setUser(null);
+    navigate('/');
+  };
+
+  const auth = { user, login, logout };
+
+  return (
+    <AuthContext.Provider value={auth}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+function useAuth() {
+  const auth = React.useContext(AuthContext);
+  return auth;
+}
+
+function AuthRoute(props) {
+  const auth = useAuth();
+
+  if (!auth.user) {
+    return <Navigate to="/login" />;
+  }
+
+  return props.children;
+}
+
+export {
+  AuthProvider,
+  useAuth,
+  AuthRoute
+};

Frontend/ReactJS/react-routers/src/Blog/BlogPost.js

@@ -1,19 +1,26 @@
-import React from 'react';
-import { useParams } from 'react-router-dom';
-import { blogdata } from './blogData'
+import React from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { blogdata } from "./blogData";
 
 function BlogPost() {
-  const { slug } = useParams();
+    const navigate = useNavigate();
+    const { slug } = useParams();
 
-  const blogpost = blogdata.find(post => post.slug === slug);
+    const blogpost = blogdata.find((post) => post.slug === slug);
 
-  return (
-    <>
-      <h2>{blogpost.title}</h2>
-      <p>{blogpost.author}</p>
-      <p>{blogpost.content}</p>
-    </>
-  );
+    const returnBlogPage = () => {
+        // navigate(-1); // Vuelve a la página anterior
+        navigate("/blog");
+    }
+
+    return (
+        <>
+            <h2>{blogpost.title}</h2>
+            <button onClick={returnBlogPage}>Volver</button>
+            <p>{blogpost.author}</p>
+            <p>{blogpost.content}</p>
+        </>
+    );
 }
 
-export { BlogPost };
+export { BlogPost };

Frontend/ReactJS/react-routers/src/Blog/index.js

@@ -1,27 +1,28 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link, Outlet } from "react-router-dom";
 import { blogdata } from "./blogData";
 
 function BlogPage() {
-  return (
-    <>
-      <h1>BlogPage</h1>
+    return (
+        <>
+            <h1>BlogPage</h1>
 
-      <ul>
-        {blogdata.map((post) => (
-          <BlogLink post={post} />
-        ))}
-      </ul>
-    </>
-  );
+            <Outlet />
+            <ul>
+                {blogdata.map((post) => (
+                    <BlogLink post={post} key={post.slug} />
+                ))}
+            </ul>
+        </>
+    );
 }
 
 function BlogLink({ post }) {
-  return (
-    <li>
-      <Link to={`/blog/${post.slug}`}>{post.title}</Link>
-    </li>
-  );
+    return (
+        <li>
+            <Link to={`/blog/${post.slug}`}>{post.title}</Link>
+        </li>
+    );
 }
 
 export { BlogPage };

Frontend/ReactJS/react-routers/src/Menu/index.js

@@ -1,21 +1,29 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
+import { useAuth } from "../Auth/auth";
 
 function Menu() {
+
+  const auth = useAuth();
+
   return (
     <nav>
       <ul>
-      {routes.map(route => (
-        <li>
-            <NavLink 
-                style={({ isActive })=> ({
-                    color: isActive ? "red" : "blue"
-                })}
-                to={route.to} end>  
-                {route.text}
-            </NavLink>
-        </li>
-      ))}
+      {routes.map(route => {
+        if (route.publicOnly && auth.user) return null;
+        if (route.private && !auth.user) return null;
+        return (
+          <li key={route.to}>
+              <NavLink 
+                  style={({ isActive })=> ({
+                      color: isActive ? "red" : "blue"
+                  })}
+                  to={route.to} end>  
+                  {route.text}
+              </NavLink>
+          </li>
+        )
+      })}
       </ul>
     </nav>
   );
@@ -33,8 +41,11 @@ function Menu() {
 }
 
 const routes = [];
-routes.push({ to: "/", text: "Home" });
-routes.push({ to: "/profile", text: "Profile" });
-routes.push({ to: "/blog", text: "Blog" });
+routes.push({ to: "/", text: "Home", private: false });
+routes.push({ to: "/profile", text: "Profile", private: true });
+routes.push({ to: "/blog", text: "Blog", private: false });
+routes.push({ to: "/login", text: "Login", private: false, publicOnly: true });
+routes.push({ to: "/logout", text: "Logout", private: true});
+
 
 export { Menu };

Frontend/ReactJS/react-routers/src/Profile/index.js

@@ -1,9 +1,13 @@
-import React from "react";
+import React from 'react';
+import { useAuth } from '../Auth/auth';
 
 function Profile() {
+  const auth = useAuth();
+
   return (
     <>
-      <h1>Profile</h1>
+      <h1>Perfil</h1>
+      <p>Welcome, {auth.user.username}</p>
     </>
   );
 }