update character

2026-07-18 03:13:46 +00:00 · 2023-12-25 16:59:25 +01:00
parent 9894ba735e
commit 73660076e5
10 changed files with 204 additions and 103 deletions
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+
+function Footer() {
+    return <footer>
+        <div className="text-center p-4" style={{backgroundColor: "rgba(0, 0, 0, 0.05)"}}>
+            A Kard és Mágiát Lux Gábor alkotta. A szerzői jogok őt illetik. Ez az oldal egy "rajongói
+            hozzájárulás", célja a Kard és Mágia népszerűsítése. Ha többet akarsz tudni a Kard és Mágiáról
+            látogass el a <a href="https://fomalhaut.lfg.hu/">hivatalos honlapjára</a>. A Kard és Mágia az Open
+            Gaming Licence 1.0a alatt lett kiadva, melynek szövege <a href="ogl.html">itt található</a>
+        </div>
+    </footer>
+}
+
+export default Footer;
@@ -0,0 +1,66 @@
+import * as React from "react";
+import axios from "axios";
+import {useState} from "react";
+
+type LoadingState = "not-started" | "loading" | "finished"
+
+function logout() {
+    return axios.post("/Identity/Account/Logout?returnUrl=%2F")
+}
+
+function Header(props: {}) {
+    
+    let [loading, setLoading] = useState("not-started" as LoadingState);
+    let [userName, setUserName] = useState(null as string | null);
+
+    if (loading === "not-started") {
+        setLoading("loading");
+        fetch('api/User/me')
+            .then(response => {
+                response.ok
+                    ? response.text()
+                        .then(userName => userName?.length > 0 ? setUserName(userName) : setUserName(null))
+                    : console.log(response)
+            })
+            .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>
+    </header>
+}
+
+export default Header;