From a7127c6957a0e4b8d09e530a22e90ca32ed0b2b1 Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Sun, 21 Jan 2024 11:16:23 -0400
Subject: [PATCH 1/2] Refactor: elimination of repeated route and change of
 route for those not logged in

---
 src/App.js                       |  8 +++++++-
 src/components/Navbar/Navbar.jsx | 12 ++++++------
 src/components/RequiresAuth.jsx  |  2 +-
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/App.js b/src/App.js
index 58dbc57..0823b9d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -25,7 +25,6 @@ function App() {
           {/* Public routes */}
           <Route path="signup" exact element={<Signup /> } />
           <Route path="login" exact element={<Login />} />
-          <Route path="/" exact element={<HomePageWithCarousel />} />
           <Route path="/contact" exact element={<ContactForm />} />
           <Route path="/post/:id" exact element={<PostDetailsCard />} />
           <Route path="/subscription" exact element={<SubscriptionPage />} />
@@ -42,6 +41,13 @@ function App() {
             <Route path="/admin" exact element={<HomePage />} />
             <Route path="/edit/:id" element={<PostForm />} />
             <Route path="/new" exact element={<PostForm />} />
+          </Route>
+
+          <Route element={<RequiresAuth allowedRoles={["user"]} />}>
+          <Route path="/" exact element={<HomePageWithCarousel />} />
+          </Route>
+
+          <Route element={<RequiresAuth allowedRoles={["admin"]} />}>
             <Route path="/users" exact element={<UserList />} />
           </Route>
 
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index b75fdb4..c5104f8 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -1,10 +1,9 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import { useLocation } from "react-router-dom";
 import { useRouteVariables } from "./Location";
+
 import Dropdown from "./Dropdown";
 const Navbar = () => {
-  const location = useLocation();
   const {
     isLoginPage,
     isSignupPage,
@@ -17,6 +16,7 @@ const Navbar = () => {
     isHomePage,
     isContactPage,
     isEmailPage,
+    isConfirmPage,
   } = useRouteVariables();
 
   const [open, setOpen] = useState(false);
@@ -24,7 +24,7 @@ const Navbar = () => {
   const toggleMenu = () => {
     setOpen(!open);
   };
-  if (isLoginPage || isSignupPage ) {
+  if (isLoginPage || isSignupPage) {
     return null;
   }
 
@@ -91,9 +91,9 @@ const Navbar = () => {
             {(!isHomePage || (userListPage && !isContactPage)) &&
               !isAdminPage &&
               !isSubscribePage &&
-              location.pathname !== "/contact" &&
               !isDetailPage &&
-              !isEmailPage && (
+              !isEmailPage &&
+              !isConfirmPage && (
                 <Link
                   to="/admin"
                   className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
@@ -110,7 +110,7 @@ const Navbar = () => {
                 Users List
               </Link>
             )}
-          <Dropdown />
+            <Dropdown />
           </nav>
         </div>
       </nav>
diff --git a/src/components/RequiresAuth.jsx b/src/components/RequiresAuth.jsx
index 5a47988..d5e4b71 100644
--- a/src/components/RequiresAuth.jsx
+++ b/src/components/RequiresAuth.jsx
@@ -16,7 +16,7 @@ const RequiresAuth = ({ allowedRoles }) => {
 
     <Outlet />
   ) : (
-    <Navigate to={"/"} state={{ from: location }} replace />
+    <Navigate to={"/login"} state={{ from: location }} replace />
   );
 };
 

From 547b7fb323c53dcdae950d6e1653381c7a519bad Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Mon, 22 Jan 2024 00:03:51 -0400
Subject: [PATCH 2/2] Feat: icon in the app and fix routes for roles

---
 src/components/Login/Login.jsx     | 19 +++++++++---------
 src/components/Navbar/Dropdown.jsx | 16 ++++++++-------
 src/components/Navbar/Navbar.jsx   | 32 +++++++++++++++---------------
 src/hooks/useAuthentication.js     |  8 +++++---
 src/pages/Contact.js               | 21 +++++++++++---------
 src/pages/PostForm.js              | 12 +++++++++++
 6 files changed, 64 insertions(+), 44 deletions(-)

diff --git a/src/components/Login/Login.jsx b/src/components/Login/Login.jsx
index 38db568..c53a985 100644
--- a/src/components/Login/Login.jsx
+++ b/src/components/Login/Login.jsx
@@ -1,7 +1,8 @@
 import backgroundImage from "../../Images/logoimg.jpg";
 import useLoginForm from "../../hooks/useLoginForm";
 import useAuthentication from "../../hooks/useAuthentication";
-
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLock,faEnvelope,faNewspaper, faKey } from "@fortawesome/free-solid-svg-icons";
 const Signin = () => {
   const { data, error, handleChange, setError } = useLoginForm();
   const { authenticate } = useAuthentication();
@@ -34,8 +35,8 @@ const Signin = () => {
         <aside className="flex items-center w-full max-w-md px-6 mx-auto lg:w-2/6">
           <div className="flex-1">
             <header className="text-center">
-              <h1 className="text-4xl font-bold text-center text-gray-700 dark:text-white">
-                TechTalk
+              <h1 className="text-4xl font-bold text-center text-gray-500 dark:text-white">
+                TechTalk <FontAwesomeIcon icon={faNewspaper} />
               </h1>
               <p className="mt-3 text-gray-500 dark:text-gray-300">
                 Sign in to access your account
@@ -45,8 +46,8 @@ const Signin = () => {
             <div className="mt-8">
               <form onSubmit={handleSubmit}>
                 <div>
-                  <label htmlFor="email" className="block mb-2 text-sm text-gray-600 dark:text-gray-200">
-                    Email Address
+                  <label htmlFor="email" className="block mb-2 text-sm text-gray-300 dark:text-gray-200">
+                  <FontAwesomeIcon icon={faEnvelope} style={{color: "#1271ba",}} /> Email Address
                   </label>
                   <input
                     type="email"
@@ -62,11 +63,11 @@ const Signin = () => {
 
                 <div className="mt-6">
                   <div className="flex justify-between mb-2">
-                    <label htmlFor="password" className="text-sm text-gray-600 dark:text-gray-200">
-                      Password
+                    <label htmlFor="password" className="text-sm text-gray-300 dark:text-gray-200">
+                    <FontAwesomeIcon icon={faLock} style={{color: "#1271ba",}} /> Password
                     </label>
-                    <a href="forgot-password" className="text-sm text-gray-400 focus:text-blue-500 hover:text-blue-500 hover:underline">
-                      Forgot password?
+                    <a href="forgot-password" className="text-sm text-gray-300 focus:text-blue-500 hover:text-blue-500 hover:underline">
+                    Forgot password <FontAwesomeIcon icon={faKey} style={{color: "#1271ba",}} /> ?
                     </a>
                   </div>
 
diff --git a/src/components/Navbar/Dropdown.jsx b/src/components/Navbar/Dropdown.jsx
index b74cbb6..e8b7c2c 100644
--- a/src/components/Navbar/Dropdown.jsx
+++ b/src/components/Navbar/Dropdown.jsx
@@ -4,7 +4,7 @@ import { useRouteVariables } from "./Location";
 import useAuth from "../../hooks/useAuth";
 import Cookies from "js-cookie";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSignOutAlt,faUser } from "@fortawesome/free-solid-svg-icons";
+import { faSignOutAlt,faUserTie, faBell, faHeadset } from "@fortawesome/free-solid-svg-icons";
 
 const Dropdown = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -23,9 +23,11 @@ const Dropdown = () => {
 
   const handleLogout = () => {
     setAuth({ roles: null, token: null });
+    window.location = "/login";
     Cookies.remove("token");
     Cookies.remove("roles");
-    window.location = "/login";
+    Cookies.remove("username");
+    Cookies.remove("email");
   };
 
   const toggleMenu = () => {
@@ -57,11 +59,11 @@ const Dropdown = () => {
   return (
     <div className="relative z-50" ref={dropdownRef}>
       <button
-        className="flex items-center p-2 text-sm text-gray-600 bg-white border border-transparent rounded-md focus:border-blue-500 focus:ring-opacity-40 dark:focus:ring-opacity-40 focus:ring-blue-300 dark:focus:ring-blue-400 focus:ring dark:text-white dark:bg-gray-800 focus:outline-none"
+        className="flex items-center p-2 text-sm text-gray-600 bg-white border border-transparent rounded-md  focus:ring-opacity-40 dark:focus:ring-opacity-40 focus:ring-blue-300 dark:focus:ring-blue-400 focus:ring dark:text-white dark:bg-gray-800 focus:outline-none"
         onClick={toggleMenu}
       >
         <span className="mx-1 text-sm font-semibold ">
-        <FontAwesomeIcon icon={faUser} /> {Cookies.get("username")}
+        <FontAwesomeIcon icon={faUserTie} bounce/> {Cookies.get("username")}
         </span>
         <svg
           className="w-5 h-5 mx-1"
@@ -88,7 +90,7 @@ const Dropdown = () => {
         >
           <div className="mx-1">
             <h1 className="text-sm font-semibold text-gray-700 dark:text-gray-200">
-            <FontAwesomeIcon icon={faUser} /> {Cookies.get("username")}
+            <FontAwesomeIcon icon={faUserTie} /> {Cookies.get("username")}
             </h1>
             <p className="text-sm text-gray-500 dark:text-gray-400">
               {Cookies.get("email")}
@@ -109,7 +111,7 @@ const Dropdown = () => {
               onClick={handleMenuItemClick}
               className="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
             >
-              Subscribe
+              Subscribe <FontAwesomeIcon icon={faBell} shake/>
             </Link>
           )}
 
@@ -119,7 +121,7 @@ const Dropdown = () => {
             onClick={handleMenuItemClick}
             className="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
           >
-            Support
+            Support <FontAwesomeIcon icon={faHeadset} />
           </Link>
         )}
 
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index c5104f8..c4e5c1a 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -1,7 +1,12 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { useRouteVariables } from "./Location";
-
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faHouse,
+  faPlus,
+  faNewspaper,
+} from "@fortawesome/free-solid-svg-icons";
 import Dropdown from "./Dropdown";
 const Navbar = () => {
   const {
@@ -17,6 +22,7 @@ const Navbar = () => {
     isContactPage,
     isEmailPage,
     isConfirmPage,
+    isForgotPage,
   } = useRouteVariables();
 
   const [open, setOpen] = useState(false);
@@ -24,7 +30,7 @@ const Navbar = () => {
   const toggleMenu = () => {
     setOpen(!open);
   };
-  if (isLoginPage || isSignupPage) {
+  if (isLoginPage || isSignupPage || isEmailPage || isForgotPage) {
     return null;
   }
 
@@ -37,7 +43,7 @@ const Navbar = () => {
               to="#"
               className="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline pointer-events-none"
             >
-              TechTalk News
+              TechTalk News <FontAwesomeIcon icon={faNewspaper} />
             </Link>
 
             <button
@@ -75,7 +81,7 @@ const Navbar = () => {
                   to="/"
                   className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
                 >
-                  Home
+                  <FontAwesomeIcon icon={faHouse} /> Home
                 </Link>
               )}
 
@@ -84,32 +90,26 @@ const Navbar = () => {
                 to="/new"
                 className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
               >
-                Create Post
+                <FontAwesomeIcon icon={faPlus} /> Create Post
               </Link>
             )}
 
-            {(!isHomePage || (userListPage && !isContactPage)) &&
+            {(!isHomePage || userListPage) &&
               !isAdminPage &&
+              !isContactPage &&
               !isSubscribePage &&
               !isDetailPage &&
               !isEmailPage &&
-              !isConfirmPage && (
+              !isConfirmPage &&
+              !userListPage && (
                 <Link
                   to="/admin"
                   className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
                 >
-                  Admin Page
+                  <FontAwesomeIcon icon={faHouse} /> Home
                 </Link>
               )}
 
-            {!isHomePage && isAdminPage && (
-              <Link
-                to="/users"
-                className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
-              >
-                Users List
-              </Link>
-            )}
             <Dropdown />
           </nav>
         </div>
diff --git a/src/hooks/useAuthentication.js b/src/hooks/useAuthentication.js
index 407cf25..74559d7 100644
--- a/src/hooks/useAuthentication.js
+++ b/src/hooks/useAuthentication.js
@@ -18,13 +18,15 @@ const useAuthentication = () => {
         throw new Error("No roles or token received in response.");
       }
 
-      // Actualizar el token almacenado localmente
+      
       Cookies.set("token", token, { secure: true, httpOnly: true, sameSite: "strict" });
 
       if (roles.some((role) => role.name === "moderator")) {
         navigate("/admin");
-      } else {
-        navigate("/");
+      } else if (roles.some((role) => role.name === "admin")){
+        navigate("/users");
+      }else{
+        navigate("/")
       }
       toast("successful login, have fun!", {
         icon: "👏",
diff --git a/src/pages/Contact.js b/src/pages/Contact.js
index 0a47cb1..2acad72 100644
--- a/src/pages/Contact.js
+++ b/src/pages/Contact.js
@@ -1,11 +1,16 @@
 import { useState } from "react";
 import { toast } from "react-hot-toast";
+import { faHeadset } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Cookies from "js-cookie";
 const apiWeb = process.env.REACT_APP_API_CONTACT;
 
 const ContactForm = () => {
+  const savedEmail = Cookies.get("email") ;
+
   const [formValues, setFormValues] = useState({
     name: "",
-    email: "",
+    email: savedEmail,
     message: "",
   });
 
@@ -43,26 +48,23 @@ const ContactForm = () => {
 
       setFormValues({
         name: "",
-        email: "",
+        email: savedEmail, // Restaurar el valor del email guardado
         message: "",
       });
-    } else {
     }
   };
 
   return (
     <div className="flex min-h-screen items-center justify-start bg-white">
       <div className="mx-auto w-full max-w-lg">
-        <h1 className="text-4xl font-medium animate-bounce">Contact Us</h1>
+        <h1 className="text-4xl font-medium animate-bounce">
+          <FontAwesomeIcon icon={faHeadset} /> Contact Us
+        </h1>
         <p className="mt-3">
           Email us at help@techtalk12.com or message us here:
         </p>
 
-        <form
-          action="https://api.web3forms.com/submit"
-          className="mt-10"
-          onSubmit={handleSubmit}
-        >
+        <form action={apiWeb} className="mt-10" onSubmit={handleSubmit}>
           <input
             type="hidden"
             name="access_key"
@@ -91,6 +93,7 @@ const ContactForm = () => {
                 placeholder=" "
                 value={formValues.email}
                 onChange={handleChange}
+                readOnly
                 required
               />
               <label className="absolute top-3 -z-10 origin-[0] -translate-y-6 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:left-0 peer-focus:-translate-y-6 peer-focus:scale-75 peer-focus:text-blue-600 peer-focus:dark:text-blue-500">
diff --git a/src/pages/PostForm.js b/src/pages/PostForm.js
index 0307ecf..ba453e2 100644
--- a/src/pages/PostForm.js
+++ b/src/pages/PostForm.js
@@ -34,10 +34,12 @@ export function PostForm() {
       }
     })();
   }, [params.id, getPost]);
+
   const [imagePreview, setImagePreview] = useState({
     src: "",
     alt: "original imagen",
   });
+
   return (
     <div className="flex items-center justify-center">
       <div className="bg-blue-950 p-10 shadow-md shadow-black mt-7 animate-fade-down animate-once animate-duration-500 animate-ease-linear">
@@ -84,6 +86,7 @@ export function PostForm() {
                 Title
               </label>
               <Field
+                id="title"
                 name="title"
                 placeholder="Title"
                 className="px-3 py-2 focus:outline-none rounded bg-gray-600 text-white w-full"
@@ -93,6 +96,7 @@ export function PostForm() {
                 name="title"
                 className="text-red-400 text-sm"
               />
+
               <label
                 htmlFor="description"
                 className="text-sm block font-bold text-gray-400 "
@@ -100,6 +104,7 @@ export function PostForm() {
                 Description
               </label>
               <Field
+                id="description"
                 component="textarea"
                 name="description"
                 placeholder="Description"
@@ -119,6 +124,7 @@ export function PostForm() {
                 Categories
               </label>
               <Field
+                id="categories"
                 name="categories"
                 placeholder="Categories"
                 className="px-3 py-2 focus:outline-none rounded bg-gray-600 text-white w-full"
@@ -128,6 +134,7 @@ export function PostForm() {
                 name="categories"
                 className="text-red-400 text-sm"
               />
+
               <label
                 htmlFor="source"
                 className="text-sm block font-bold text-gray-400"
@@ -135,6 +142,7 @@ export function PostForm() {
                 Source
               </label>
               <Field
+                id="source"
                 name="source"
                 placeholder="Source"
                 className="px-3 py-2 focus:outline-none rounded bg-gray-600 text-white w-full"
@@ -144,6 +152,7 @@ export function PostForm() {
                 name="source"
                 className="text-red-400 text-sm"
               />
+
               <label
                 htmlFor="author"
                 className="text-sm block font-bold text-gray-400"
@@ -151,6 +160,7 @@ export function PostForm() {
                 Author
               </label>
               <Field
+                id="author"
                 name="author"
                 placeholder="Author"
                 className="px-3 py-2 focus:outline-none rounded bg-gray-600 text-white w-full"
@@ -160,6 +170,7 @@ export function PostForm() {
                 name="author"
                 className="text-red-400 text-sm"
               />
+
               <label
                 htmlFor="image"
                 className="text-sm block font-bold text-gray-400"
@@ -168,6 +179,7 @@ export function PostForm() {
               </label>
               <input
                 type="file"
+                id="image"
                 name="image"
                 className="px-3 py-2 focus:outline-none rounded bg-gray-600 text-white w-full"
                 onChange={(e) => {