Merge pull request #92 from freedompraise:freedompraise/issue91

Update login route and dynamically render login/account in navbar
freedompraise · Jan 1, 2024 · 9e0d3b1 · 9e0d3b1
2 parents fdfe580 + c7c2c4e
commit 9e0d3b1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -19,7 +19,7 @@ function App() {
           <Switch>
             <Route path="/" exact component={Home} />
             <Route path="/drinks/:id" exact component={Product} />
-            <Route path="/account/login" exact component={Login} />
+            <Route path="/login" exact component={Login} />
             <Route path="/account" exact component={Account} />
             <Route path="/cart" exact component={Cart} />
             <Route path="/checkout" exact component={Checkout} />

diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx
@@ -12,6 +12,7 @@ import { useCart } from "../CartContext";
 
 function NavBar() {
   const { totalItems } = useCart();
+  const isLoggedIn = !!localStorage.getItem('userEmail');
   return (
     <nav
       className="flex justify-between items-center text-white h-16"
@@ -59,14 +60,22 @@ function NavBar() {
 
       {/* Right section */}
       <div className="flex items-center space-x-2 mr-8 ">
-        {/* User Icon */}
-        <a href="/account" className="hover:text-black">
+    {isLoggedIn ? (<a href="/account" className="hover:text-black">
+          <i className="fas fa-user">
+            <FontAwesomeIcon icon={faUser} className="fas fa-user" />
+          </i>
+          <span>ACCOUNT</span>
+        </a> 
+        ) : (
+          <a href="/login" className="hover:text-black">
           <i className="fas fa-user">
             <FontAwesomeIcon icon={faUser} className="fas fa-user" />
           </i>
-          {/* Login */}
           <span>LOGIN</span>
         </a>
+        )
+        }
+
         {/* Cart Icon */}
         <a href="/cart" className="hover:text-black">
           <div className="flex items-center">