logout and navbar fixes

This commit is contained in:
2023-12-27 11:21:44 +01:00
parent b6f4d33cc5
commit c1cd056495
2 changed files with 40 additions and 35 deletions
@@ -13,6 +13,7 @@ using Microsoft.Extensions.Logging;
namespace Kemkas.Web.Areas.Identity.Pages.Account namespace Kemkas.Web.Areas.Identity.Pages.Account
{ {
[IgnoreAntiforgeryToken(Order = 1001)]
public class LogoutModel : PageModel public class LogoutModel : PageModel
{ {
private readonly SignInManager<ApplicationUser> _signInManager; private readonly SignInManager<ApplicationUser> _signInManager;
+25 -21
View File
@@ -1,8 +1,15 @@
import * as React from "react"; import * as React from "react";
import {useState} from "react"; import {useState} from "react";
import axios from "axios";
import {Container, Nav, Navbar} from "react-bootstrap";
type LoadingState = "not-started" | "loading" | "finished" type LoadingState = "not-started" | "loading" | "finished"
async function logout() {
await axios.post("/Identity/Account/Logout")
document.location.reload()
}
function Header(props: {}) { function Header(props: {}) {
let [loading, setLoading] = useState("not-started" as LoadingState); let [loading, setLoading] = useState("not-started" as LoadingState);
@@ -21,40 +28,37 @@ function Header(props: {}) {
} }
return <header> return <header>
<nav <Navbar expand="sm" className="navbar-light bg-white border-bottom box-shadow mb-3">
className="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> <Container className="ps-4 pe-4">
<div className="container ps-4 pe-4"> <Navbar.Brand href="/">Kemkas</Navbar.Brand>
<a className="navbar-brand" href={userName == null ? "/" : "/karaktereim"}>Kemkas</a> <Nav.Link className="text-dark" href="/karaktereim">Karaktereim</Nav.Link>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" <Navbar.Toggle aria-controls="basic-navbar-nav" />
data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent" <Navbar.Collapse id="basic-navbar-nav" className="d-sm-inline-flex flex-sm-row-reverse">
aria-expanded="false" aria-label="Toggle navigation"> <Nav>
<span className="navbar-toggler-icon"></span>
</button>
{loading !== "finished" ? "Loading..." : {loading !== "finished" ? "Loading..." :
userName == null userName == null
? <div className="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse"> ? <>
<ul className="navbar-nav">
<li className="nav-item"> <li className="nav-item">
<a className="nav-link text-dark" href="/Identity/Account/Register">Register</a> <a className="nav-link text-dark" href="/Identity/Account/Register">Register</a>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<a className="nav-link text-dark" href="/Identity/Account/Login">Login</a> <a className="nav-link text-dark" href="/Identity/Account/Login">Login</a>
</li> </li>
</ul> </>
</div> : <>
: <div className="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul className="navbar-nav">
<li className="nav-item"> <li className="nav-item">
<a className="nav-link text-dark" href="/Identity/Account/Manage">Hello {userName}!</a> <a className="nav-link text-dark"
href="/Identity/Account/Manage">Hello {userName}!</a>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<a className="nav-link text-dark" href="/Identity/Account/Logout">Logout</a> <button className="nav-link nav text-dark" onClick={logout}>Logout</button>
</li> </li>
</ul> </>
</div>
} }
</div> </Nav>
</nav> </Navbar.Collapse>
</Container>
</Navbar>
</header> </header>
} }