From cf3e0b804350aa1f417a66fbea9a6061633839fd Mon Sep 17 00:00:00 2001
From: cami <cami+giteaspcodes@mailbox.org>
Date: Sun, 27 Jun 2021 01:50:45 +0200
Subject: [PATCH] Add login / logout to navbar

This commit will add a login or logout button in the navbar so that the user can decide what the person wants to do . (solves #68)
---
 frontend/src/components/Navbar.js | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Navbar.js b/frontend/src/components/Navbar.js
index 025bf89..0cf5889 100644
--- a/frontend/src/components/Navbar.js
+++ b/frontend/src/components/Navbar.js
@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { Button } from "./Button";
 import { Link } from "react-router-dom";
-import { useAuth } from "../auth/AuthProvider";
+import { useAuth, logout } from "../auth/AuthProvider";
 import "./Navbar.css";
 import "@fortawesome/fontawesome-free/css/all.css";
 
@@ -20,7 +19,7 @@ function Navbar() {
     }
   };
 
-  const isLoggedIn = useAuth();
+  const [isLoggedIn] = useAuth();
 
   /* Shows the button after resizing the screen */
   useEffect(() => {
@@ -59,9 +58,25 @@ function Navbar() {
               </Link>
             </li>
             {isLoggedIn ? (
-              console.log("Eingeloggt")
-            ): (
-              console.log("Nicht eingeloggt")
+              <li className="nav-item">
+                <Link
+                  to="/logout"
+                  className="nav-links"
+                  onClick={() => logout()}
+                >
+                  Abmelden
+                </Link>
+              </li>
+            ) : (
+              <li className="nav-item">
+                <Link
+                  to="/login"
+                  className="nav-links"
+                  onClick={closeMobileMenu}
+                >
+                  Anmelden
+                </Link>
+              </li>
             )}
             <li>
               <Link
@@ -73,7 +88,6 @@ function Navbar() {
               </Link>
             </li>
           </ul>
-          {button && <Button buttonStyle="btn--outline">SIGN UP</Button>}
         </div>
       </nav>
     </>