refactor: shifting lots of stuff around

frontend/src/pages/index.ts

@@ -1,3 +1,5 @@
 export * from "./front";
 export * from "./gallery";
 export * from "./image";
+export * from "./settings";
+export * from "./login";

frontend/src/pages/login/index.tsx

@@ -0,0 +1,86 @@
+import { isTokenValid } from "@components/protected-route";
+import { Button } from "@kobalte/core/button";
+import { TextField } from "@kobalte/core/text-field";
+import { postCode, postDemoLogin, postLogin } from "@network/index";
+import { Navigate } from "@solidjs/router";
+import { type Component, Show, createSignal } from "solid-js";
+
+export const Login: Component = () => {
+	let form: HTMLFormElement | undefined;
+
+	const [submitted, setSubmitted] = createSignal(false);
+
+	const onSubmit: HTMLFormElement["onsubmit"] = async (e) => {
+		e.preventDefault();
+		const formData = new FormData(form);
+		const email = formData.get("email");
+		if (email == null) {
+			throw new Error("bruh, no email");
+		}
+
+		if (email.toString() === "demo@email.com") {
+			const { access, refresh } = await postDemoLogin();
+
+			localStorage.setItem("access", access);
+			localStorage.setItem("refresh", refresh);
+
+			window.location.href = "/";
+			return;
+		}
+
+		if (!submitted()) {
+			await postLogin(email.toString());
+			setSubmitted(true);
+		} else {
+			const code = formData.get("code");
+			if (code == null) {
+				throw new Error("bruh, no code");
+			}
+
+			const { access, refresh } = await postCode(
+				email.toString(),
+				code.toString(),
+			);
+
+			localStorage.setItem("access", access);
+			localStorage.setItem("refresh", refresh);
+
+			window.location.href = "/";
+		}
+	};
+
+	const isAuthorized = isTokenValid();
+
+	return (
+		<Show when={!isAuthorized} fallback={<Navigate href="/" />}>
+			<form
+				ref={form}
+				onSubmit={onSubmit}
+				class="flex flex-col gap-2 mt-4 w-72"
+			>
+				<TextField name="email" class="flex flex-col gap-4">
+					<TextField.Label class="text-xl font-semibold">Email</TextField.Label>
+					<TextField.Input
+						pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
+						type="email"
+						class="rounded px-1 py-2"
+					/>
+				</TextField>
+				<Show when={submitted()}>
+					<TextField name="code" class="flex flex-col gap-2">
+						<TextField.Label class="text-xl font-semibold">
+							Code
+						</TextField.Label>
+						<TextField.Input class="rounded px-1 py-2" />
+					</TextField>
+				</Show>
+				<Button
+					type="submit"
+					class="rounded-xl bg-slate-800 px-2 py-4 text-neutral-200"
+				>
+					Submit
+				</Button>
+			</form>
+		</Show>
+	);
+};

frontend/src/pages/settings/index.tsx

@@ -0,0 +1,28 @@
+import { Shortcuts } from "@components/shortcuts/Shortcuts";
+import { Button } from "@kobalte/core/button";
+
+export const Settings = () => {
+	const logout = () => {
+		localStorage.removeItem("access");
+		localStorage.removeItem("refresh");
+		window.location.href = "/login";
+	};
+
+	return (
+		<>
+			<main class="container pt-2">
+				<div class="flex flex-col px-4 gap-2">
+					<h1 class="text-3xl font-bold">Settings</h1>
+
+					<Shortcuts />
+					<Button
+						class="p-2 bg-neutral-100 border mt-4 border-neutral-300"
+						onClick={logout}
+					>
+						Logout
+					</Button>
+				</div>
+			</main>
+		</>
+	);
+};