EdwinDev6 · EdwinDev6 · Jan 22, 2024 · Jan 21, 2024 · Jan 22, 2024
diff --git 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/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
@@ -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
@@ -1,10 +1,14 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import { useLocation } 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 location = useLocation();
   const {
     isLoginPage,
     isSignupPage,
@@ -17,14 +21,16 @@ const Navbar = () => {
     isHomePage,
     isContactPage,
     isEmailPage,
+    isConfirmPage,
+    isForgotPage,
   } = useRouteVariables();
 
   const [open, setOpen] = useState(false);
 
   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,33 +90,27 @@ 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 &&
-              location.pathname !== "/contact" &&
               !isDetailPage &&
-              !isEmailPage && (
+              !isEmailPage &&
+              !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 />
+            <Dropdown />
           </nav>
         </div>
       </nav>

diff --git 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 />
   );
 };
 

diff --git 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
@@ -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">
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,7 +16,7 @@ const RequiresAuth = ({ allowedRoles }) => { @@
         <Outlet />
       ) : (
-        <Navigate to={"/"} state={{ from: location }} replace />
+        <Navigate to={"/login"} state={{ from: location }} replace />
       );
     };
@@ Expand Down @@