Dev

src/App.css

@@ -36,3 +36,4 @@
     transform: rotate(360deg);
   }
 }
+

src/App.js

@@ -2,8 +2,8 @@ import { HomePage, PostForm, NotFoundPage } from "./pages/index";
 import { Routes, Route } from "react-router-dom";
 import { PostProvider } from "./context/postContext";
 import { Toaster } from "react-hot-toast";
-import Signup from "./components/Signup";
-import Login from "./components/Login";
+import Signup from "./components/signup/Signup";
+import Login from "./components/Login/Login";
 import RequiresAuth from "./components/RequiresAuth";
 import { HomePageUser } from "./pages/HomePageUser";
 import Navbar from "./components/Navbar/Navbar";
@@ -14,6 +14,7 @@ function App() {
   const isLoginPage = location.pathname === "/login";
 
   return (
+
     <div
       className="bg-cover h-screen w-screen overflow-y-scroll"
       style={{
@@ -28,12 +29,12 @@ function App() {
           {/* Public routes */}
           <Route path="signup" exact element={<Signup />} />
           <Route path="login" exact element={<Login />} />
-          <Route path="/homeuser" exact element={<HomePageUser />} />
+          <Route path="/" exact element={<HomePageUser />} />
           <Route path="/contact" exact element={<ContactForm />} />
 
           {/* Private routes */}
           <Route element={<RequiresAuth allowedRoles={["admin"]} />}>
-            <Route path="/" exact element={<HomePage />} />
+            <Route path="/admin" exact element={<HomePage />} />
             <Route path="/posts/:id" element={<PostForm />} />
             <Route path="/new" exact element={<PostForm />} />
           </Route>

src/components/Login/index.jsx → src/components/Login/Login.jsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
 import useAuth from "../../hooks/useAuth";
 import axios from "axios";
-
+import { useLocation, useNavigate } from "react-router-dom";
+import backgroundImage from '../../Images/logoimg.jpg'
 const Signin = () => {
   const [data, setData] = useState({
     email: "",
@@ -10,7 +11,9 @@ const Signin = () => {
   const [error, setError] = useState("");
 
   const { setAuth } = useAuth();
-
+  const location = useLocation();
+  const navigate = useNavigate();
+  const from = location.state?.from?.pathname || "/";
 
 
 
@@ -26,9 +29,10 @@ const Signin = () => {
       const roles = res?.roles;
       const token = res?.token;
       setAuth({ roles, token });
-
+      
       console.log(roles);
-      window.location= "/homeuser"
+
+      navigate(from, { replace: true });
     } catch (error) {
       if (
         error.response &&
@@ -44,11 +48,8 @@ const Signin = () => {
       <div className="flex justify-center h-screen">
         <div
           className="hidden bg-cover lg:block lg:w-2/3"
-          style={{
-            backgroundImage:
-              "url(https://images.unsplash.com/photo-1557992260-ec58e38d363c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80)",
-          }}
-        >
+          style={{ backgroundImage: `url('${backgroundImage}')` }}
+    >
           <div className="flex items-center h-full px-20 bg-gray-900 bg-opacity-40">
             <div>
               <h2 className="text-4xl font-bold text-white">TechTalk News</h2>
@@ -130,7 +131,7 @@ const Signin = () => {
                   )}
 
                   <button
-                    className="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400 focus:ring focus:ring-blue-300 focus:ring-opacity-50"
+                    className="w-full px-4 py-2 tracking-wide rounded-lg text-white transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
                     type="submit"
                   >
                     Sign in

src/components/Navbar/Navbar.jsx

@@ -1,12 +1,17 @@
 import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
+import useAuth from "../../hooks/useAuth";
 
 const Navbar = () => {
+  const location = useLocation();
+  const isLoginPage = location.pathname === '/login';
+  const { setAuth, auth } = useAuth(); 
+
   const handleLogout = () => {
-    localStorage.removeItem("token");
-    window.location.reload("/login");
+    setAuth({ roles: null, token: null });
+    window.location = "/login";
   };
 
   const [open, setOpen] = useState(true);
@@ -35,8 +40,8 @@ const Navbar = () => {
           </div>
           <nav className={`flex-col flex-grow ${open ? 'flex' : 'hidden'} pb-4 md:pb-0 md:flex md:justify-end md:flex-row`}>
             <Link
-              to="/homeuser"
-              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"
+              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"
             >
               Home
             </Link>
@@ -47,7 +52,7 @@ const Navbar = () => {
               Create Post
             </Link>
             <Link
-              to="/"
+              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"
             >
               Admin Page
@@ -58,11 +63,13 @@ const Navbar = () => {
             >
               Contact
             </Link>
-            <div className="relative" onClick={() => setOpen(false)}>
-              <button className="flex flex-row text-gray-900 bg-gray-200 items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:w-auto md:inline 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" onClick={handleLogout}>
-                logout <FontAwesomeIcon icon={faSignOutAlt} />
-              </button>
-            </div>
+            {!isLoginPage && (
+              <div className="relative" onClick={() => setOpen(false)}>
+                <button className="flex flex-row text-gray-900 bg-gray-200 items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:w-auto md:inline 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" onClick={handleLogout}>
+                  {auth.token ? 'Logout' : 'Login'} <FontAwesomeIcon icon={faSignOutAlt} />
+                </button>
+              </div>
+            )}
           </nav>
         </div>
       </div>

src/components/PostCard.jsx

@@ -2,6 +2,8 @@ import toast from "react-hot-toast";
 import { usePosts } from "../context/postContext";
 import { useNavigate } from "react-router-dom";
 import moment from "moment";
+import logoImg from "../Images/postimg.jpg"
+
 
 export function insertMedia(filePath) {
   var extension = filePath.split(".").pop().toLowerCase();
@@ -74,7 +76,7 @@ export function PostCard({ post }) {
         <div className="flex justify-between items-center py-4">
           <img
             className="w-12 rounded-full"
-            src="https://images.unsplash.com/photo-1585829365295-ab7cd400c167?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
+            src={logoImg}
             alt="img Logo"
           />
           <div className="ml-3">
@@ -89,16 +91,18 @@ export function PostCard({ post }) {
         <div>
           {" "}
           <button
-            className="bg-sky-400 text-sm px-2 py-1 rounded-sm"
+            className="text-sm px-2 py-1 rounded-sm group relative overflow-hidden  bg-white  shadow"
             onClick={() => navigate(`/posts/${post._id}`)}
           >
-            Edit
+            <div class="absolute inset-0 w-2 bg-cyan-300 transition-all duration-[250ms] ease-out group-hover:w-full"></div>
+            <span class="relative text-black group-hover:text-white">Edit</span>
           </button>{" "}
           <button
-            className="bg-red-600 text-sm px-2 py-1 rounded-sm "
+            className=" text-sm px-2 py-1 rounded-sm group relative overflow-hidden  bg-white  shadow"
             onClick={() => handleDelete(post._id)}
           >
-            Delete
+            <div class="absolute inset-0 w-2 bg-rose-500 transition-all duration-[250ms] ease-out group-hover:w-full"></div>
+            <span class="relative text-black group-hover:text-white">Delete</span>
           </button>
         </div>
       </div>

src/components/PostCardUser.jsx

@@ -1,5 +1,7 @@
 import moment from "moment";
 import { insertMedia } from "./PostCard";
+import logoImg from "../Images/postimg.jpg"
+
 export function PostCardUser({ post }) {
   const normalDate = moment(post.createdAt).format("DD/MM/YYYY");
   return (
@@ -8,7 +10,7 @@ export function PostCardUser({ post }) {
         <div className="flex justify-between items-center py-4">
           <img
             className="w-12 rounded-full"
-            src="https://images.unsplash.com/photo-1585829365295-ab7cd400c167?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
+            src={logoImg}
             alt="logo"
           />
           <div className="ml-3">
@@ -24,7 +26,7 @@ export function PostCardUser({ post }) {
         <div>
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            className="h-7 w-7 cursor-pointer"
+            className="h-7 w-7 cursor-not-allowed"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -33,7 +35,7 @@ export function PostCardUser({ post }) {
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth="2"
-              d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+              d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z "
             />
           </svg>
         </div>

src/pages/Contact.js

@@ -48,7 +48,7 @@ const ContactForm = () => {
   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 ">Contact us</h1>
+        <h1 className="text-4xl font-medium animate-bounce">Contact us</h1>
         <p className="mt-3 ">
           Email us at help@techtalk12.com or message us here:
         </p>
@@ -106,7 +106,7 @@ const ContactForm = () => {
           </div>
           <button
             type="submit"
-            className="mt-5 rounded-md bg-black px-10 py-2 text-white"
+            className="mt-5 rounded-md py-2 px-4 bg-transparent text-black font-semibold border border-black  hover:bg-black hover:text-white hover:border-transparent transition ease-in duration-200 transform hover:-translate-y-1 active:translate-y-0 "
           >
             Send Message
           </button>

src/pages/NotFoundPage.js

@@ -10,7 +10,7 @@ export function NotFoundPage() {
       </div>
       <button className="mt-5">
         <Link
-          to="/homeuser"
+          to="/"
           className="relative inline-block text-sm font-medium text-[#FF6A3D] group active:text-orange-500 focus:outline-none focus:ring"
         >
           <span className="absolute inset-0 transition-transform translate-x-0.5 translate-y-0.5 bg-[#FF6A3D] group-hover:translate-y-0 group-hover:translate-x-0"></span>

src/pages/PostForm.js

@@ -79,15 +79,15 @@ export function PostForm() {
             />
             <label
               htmlFor="description"
-              className="text-sm block font-bold text-gray-400"
+              className="text-sm block font-bold text-gray-400 "
             >
               Description
             </label>
             <Field
               component="textarea"
               name="description"
               placeholder="Description"
-              className="px-3 py-2 focus:outline-none rounded bg-gray-600 text-white w-full"
+              className="px-3 py-2 focus:outline-none rounded bg-gray-600 text-white w-full "
               rows={5}
             />
             <ErrorMessage
@@ -104,7 +104,7 @@ export function PostForm() {
             <input type="file" name="image" className="px-3 py-2 focus:outline-none rounded bg-gray-600 text-white w-full" onChange={(e)=> setFieldValue('image',e.target.files[0])}/>
             <button
               type="submit"
-              className="bg-indigo-600 hover:bg-indigo-500 px-4 py-2 rounded mt-2 text-white focus:outline-none disabled:bg-indigo-400"
+              className="bg-indigo-600 hover:bg-indigo-500 px-4 py-2 rounded mt-2 text-white focus:outline-none disabled:bg-indigo-400 animate-pulse"
               disable={isSubmitting}
             >
               {isSubmitting ?  <button