kemkas/kemkas-gh-mirror
1
0
Fork 0
mirror of https://github.com/morbalint/kemkas.git synced 2026-07-18 11:23:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

logout and navbar fixes

Browse Source
This commit is contained in:
Balint Morasz
2023-12-27 11:21:44 +01:00
parent b6f4d33cc5
commit c1cd056495
2 changed files with 40 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Kemkas.Web/frontend/src/shared/Header.tsx
+39 -35
View File
@@ -1,8 +1,15 @@
import * as React from "react";
import {useState} from "react";
import axios from "axios";
import {Container, Nav, Navbar} from "react-bootstrap";
type LoadingState = "not-started" | "loading" | "finished"
async function logout() {
await axios.post("/Identity/Account/Logout")
document.location.reload()
}
function Header(props: {}) {
let [loading, setLoading] = useState("not-started" as LoadingState);
@@ -19,42 +26,39 @@ function Header(props: {}) {
})
.finally(() => setLoading("finished"))
}
return <header>
<nav
className="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div className="container ps-4 pe-4">
<a className="navbar-brand" href={userName == null ? "/" : "/karaktereim"}>Kemkas</a>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
{loading !== "finished" ? "Loading..." :
userName == null
? <div className="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link text-dark" href="/Identity/Account/Register">Register</a>
</li>
<li className="nav-item">
<a className="nav-link text-dark" href="/Identity/Account/Login">Login</a>
</li>
</ul>
</div>
: <div className="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link text-dark" href="/Identity/Account/Manage">Hello {userName}!</a>
</li>
<li className="nav-item">
<a className="nav-link text-dark" href="/Identity/Account/Logout">Logout</a>
</li>
</ul>
</div>
}
</div>
</nav>
<Navbar expand="sm" className="navbar-light bg-white border-bottom box-shadow mb-3">
<Container className="ps-4 pe-4">
<Navbar.Brand href="/">Kemkas</Navbar.Brand>
<Nav.Link className="text-dark" href="/karaktereim">Karaktereim</Nav.Link>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav" className="d-sm-inline-flex flex-sm-row-reverse">
<Nav>
{loading !== "finished" ? "Loading..." :
userName == null
? <>
<li className="nav-item">
<a className="nav-link text-dark" href="/Identity/Account/Register">Register</a>
</li>
<li className="nav-item">
<a className="nav-link text-dark" href="/Identity/Account/Login">Login</a>
</li>
</>
: <>
<li className="nav-item">
<a className="nav-link text-dark"
href="/Identity/Account/Manage">Hello {userName}!</a>
</li>
<li className="nav-item">
<button className="nav-link nav text-dark" onClick={logout}>Logout</button>
</li>
</>
}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</header>
}