84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
|
import { useContext } from "solid-js";
|
||
|
|
import { A } from "@solidjs/router";
|
||
|
|
import { LoginContext } from "./Root";
|
||
|
|
import { ModalContext } from "./Root";
|
||
|
|
import { LoginForm } from "./Login";
|
||
|
|
|
||
|
|
function Menu() {
|
||
|
|
let login_ctx = useContext(LoginContext);
|
||
|
|
return (
|
||
|
|
<ul class="menu menu-horizontal bg-base-200 rounded-box space-x-2">
|
||
|
|
<li>
|
||
|
|
<A href="/" end>
|
||
|
|
Home
|
||
|
|
</A>
|
||
|
|
</li>
|
||
|
|
{login_ctx?.token() != "" ? (
|
||
|
|
<li>
|
||
|
|
<A href="/new" end>
|
||
|
|
New
|
||
|
|
</A>
|
||
|
|
</li>
|
||
|
|
) : (
|
||
|
|
<></>
|
||
|
|
)}
|
||
|
|
</ul>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Navbar() {
|
||
|
|
let modal_ctx = useContext(ModalContext);
|
||
|
|
let login_ctx = useContext(LoginContext);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div class="navbar bg-base-100 max-w-3xl max-w flex justify-around">
|
||
|
|
<a class="btn btn-ghost normal-case text-xl">FrostByte</a>
|
||
|
|
<Menu />
|
||
|
|
<A
|
||
|
|
href="#"
|
||
|
|
class="btn btn-ghost normal-case text-sm"
|
||
|
|
onClick={(b) => {
|
||
|
|
b.preventDefault();
|
||
|
|
if (login_ctx?.token() != "") {
|
||
|
|
localStorage.setItem("token", "");
|
||
|
|
localStorage.setItem("username", "");
|
||
|
|
login_ctx?.setToken("");
|
||
|
|
login_ctx?.setUsername("");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
modal_ctx?.setLoginModalOpen(true);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{login_ctx?.token() != "" ? login_ctx?.username() : "Login"}
|
||
|
|
</A>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// This is a modal
|
||
|
|
export function Login() {
|
||
|
|
const modal_ctx = useContext(ModalContext);
|
||
|
|
return (
|
||
|
|
<dialog id="login_modal" class="modal" open={modal_ctx?.loginModalOpen()}>
|
||
|
|
<div class="modal-box">
|
||
|
|
<h3 class="font-bold text-lg">Hello!</h3>
|
||
|
|
<p class="py-4">Login to your FrostByte account.</p>
|
||
|
|
<LoginForm />
|
||
|
|
</div>
|
||
|
|
<form
|
||
|
|
method="dialog"
|
||
|
|
// This backdrop renders choppy on my machine. Likely because of the blur filter or misuse of css transisions
|
||
|
|
class="modal-backdrop backdrop-brightness-50 backdrop-blur-sm backdrop-contrast-100 transition-all transition-300"
|
||
|
|
onsubmit={(e) => {
|
||
|
|
// This is just needed to set the state to false
|
||
|
|
// The modal will close itself without this code, but without setting the state
|
||
|
|
e.preventDefault();
|
||
|
|
modal_ctx?.setLoginModalOpen(false);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<button>close</button>
|
||
|
|
</form>
|
||
|
|
</dialog>
|
||
|
|
);
|
||
|
|
}
|