feat: Added logout option in /user/profile route

src/App.jsx

@@ -4,6 +4,7 @@ import Home from "./pages/Home";
 import ClubLogin from "./pages/clubs/ClubsLogin";
 import ClubRegister from "./pages/clubs/ClubsRegister";
 import UserRegister from "./pages/user/UserRegister";
+import UserProfile from "./pages/user/UserProfile";
 import ClubsPage from "./pages/display/ClubsPage";
 import UserLogin from "./pages/user/UserLogin";
 import ContactPage from "./pages/ContactUs";
@@ -25,7 +26,7 @@ const App = () => {
 
             <Route exact path="/user/register" element={<UserRegister />} />
             <Route exact path="/user/login" element={<UserLogin />} />
-
+            <Route exact path="/user/profile" element={<UserProfile />} />
             {/* //* Auth routes - CLUBS*/}
 
             <Route exact path="/clubs/login" element={<ClubLogin />} />

src/components/Footer.jsx

@@ -21,7 +21,7 @@ const Footer = () => {
   const handleReportSubmit = async (e) => {
     e.preventDefault();
 
-    if (localStorage.getItem("user") === null) {
+    if (sessionStorage.getItem("token") === null) {
       toast.error("You must be logged in to report an issue");
       return;
     }

src/components/Navbar.jsx

@@ -13,7 +13,11 @@ const Navbar = (props) => {
   const navigate = useNavigate();
 
   const handleNavigate = () => {
-    navigate("/user/login");
+    if (sessionStorage.getItem("token")) {
+      navigate("/user/profile");
+    } else {
+      navigate("/user/login");
+    }
   };
 
   return (

src/pages/Home.jsx

@@ -8,7 +8,7 @@ import EventsBanner from "../components/Events";
 import LoginBanner from "../components/loginBanner";
 
 const AuthState = () => {
-  const [login, setLogin] = useState(localStorage.getItem("token"));
+  const [login, setLogin] = useState(sessionStorage.getItem("token"));
   return login;
 };
 const Home = () => {

src/pages/user/UserProfile.jsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import Navbar from "../../components/Navbar";
+import { Link, useNavigate } from "react-router-dom";
+
+
+export default function UserProfile() {
+
+    const Navigate = useNavigate();
+    const handleLogout = () => {
+        sessionStorage.removeItem("token");
+        Navigate("/");
+    }
+
+    return (
+        <>
+            <Navbar />
+
+
+            <section className="vh-100">
+        <div className="container py-5 h-100">
+          <div className="row d-flex align-items-center justify-content-center h-100">
+            <div className="col-md-8 col-lg-7 col-xl-6">
+              <img
+                src="https://www.getillustrations.com/packs/plastic-illustrations-scene-builder-pack/scenes/_1x/accounts%20_%20man,%20workspace,%20desk,%20laptop,%20login,%20user_md.png"
+                className="img-fluid"
+                alt="Phone"
+              />
+            </div>
+
+            <div className="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
+              <form style={{ width: "auto" }}>
+                <h2 style={{ letterSpacing: "1px" }}>Profile</h2>
+                <div className="form-outline mb-4">
+                  <label
+                    htmlFor="email"
+                    className=" col-form-label col-form-label-lg"
+                  >
+                    Update Email address
+                  </label>
+
+
+                </div>
+                <div className="form-outline mb-4">
+                  <label
+                    htmlFor="password"
+                    className="col-form-label col-form-label-lg"
+                  >
+                    Update Password
+                  </label>
+
+                </div>
+                <br />
+                <button
+                  onClick={handleLogout}
+                  className="btn btn-lg btn-block"                  
+                  style={{ backgroundColor: "#89b5f7" }}
+                >
+                  Logout
+                </button>
+                <br></br> <br></br>
+
+              </form>
+            </div>
+          </div>
+        </div>
+      </section>
+
+        </>
+    )
+}