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 React, { useState, useEffect } from "react";
import { Button } from "./Button";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { useAuth } from "../auth/AuthProvider"; import { useAuth, logout } from "../auth/AuthProvider";
import "./Navbar.css"; import "./Navbar.css";
import "@fortawesome/fontawesome-free/css/all.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 */ /* Shows the button after resizing the screen */
useEffect(() => { useEffect(() => {
@ -59,9 +58,25 @@ function Navbar() {
</Link> </Link>
</li> </li>
{isLoggedIn ? ( {isLoggedIn ? (
console.log("Eingeloggt") <li className="nav-item">
): ( <Link
console.log("Nicht eingeloggt") 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> <li>
<Link <Link
@ -73,7 +88,6 @@ function Navbar() {
</Link> </Link>
</li> </li>
</ul> </ul>
{button && <Button buttonStyle="btn--outline">SIGN UP</Button>}
</div> </div>
</nav> </nav>
</> </>