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)
This commit is contained in:
cami 2021-06-27 01:50:45 +02:00
parent 431b3454bd
commit cf3e0b8043

View file

@ -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")
<li className="nav-item">
<Link
to="/logout"
className="nav-links"
onClick={() => logout()}
>
Abmelden
</Link>
</li>
) : (
console.log("Nicht eingeloggt")
<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>
</>