Login page design

packages/frontend/src/routes/Home.tsx

@@ -0,0 +1 @@
+export default () => null;

packages/frontend/src/routes/Login.css.ts

@@ -0,0 +1,138 @@
+import { style } from "@vanilla-extract/css";
+
+export const container = style({
+	width: "100%",
+	height: "100%",
+
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+});
+
+export const box = style({
+	padding: 8,
+
+	display: "flex",
+	flexDirection: "column",
+	gap: 8,
+
+	borderWidth: 1,
+	borderStyle: "solid",
+	borderColor: "black",
+
+	borderRadius: 4,
+
+	"@media": {
+		"(prefers-color-scheme: dark)": {
+			borderColor: "white",
+		},
+	},
+});
+
+export const header = style({
+	paddingBottom: 8,
+
+	borderBottomWidth: 1,
+	borderBottomStyle: "solid",
+	borderBottomColor: "black",
+
+	textAlign: "center",
+	fontWeight: "bold",
+
+	"@media": {
+		"(prefers-color-scheme: dark)": {
+			borderBottomColor: "white",
+		},
+	},
+});
+
+export const input = style({
+	width: "32ch",
+	padding: 8,
+
+	borderWidth: 1,
+	borderStyle: "solid",
+	borderColor: "black",
+
+	borderRadius: 4,
+
+	"selectors": {
+		"&:focus": {
+			outlineWidth: 2,
+			outlineStyle: "solid",
+			outlineColor: "#8080FF",
+
+			"@media": {
+				"(prefers-color-scheme: dark)": {
+					outlineColor: "#C0C0FF",
+				},
+			},
+		},
+	},
+
+	"@media": {
+		"(prefers-color-scheme: dark)": {
+			borderColor: "white",
+		},
+	},
+});
+
+export const submit = style({
+	padding: 8,
+
+	backgroundColor: "#C0C0C0",
+
+	borderWidth: 2,
+	borderStyle: "solid",
+	borderTopColor: "#E0E0E0",
+	borderLeftColor: "#E0E0E0",
+	borderRightColor: "#404040",
+	borderBottomColor: "#404040",
+
+	borderRadius: 4,
+
+	cursor: "pointer",
+
+	"selectors": {
+		"&:focus": {
+			outlineWidth: 2,
+			outlineStyle: "solid",
+			outlineColor: "#8080FF",
+
+			"@media": {
+				"(prefers-color-scheme: dark)": {
+					outlineColor: "#C0C0FF",
+				},
+			},
+		},
+
+		"&:active": {
+			borderTopColor: "#404040",
+			borderLeftColor: "#404040",
+			borderRightColor: "#E0E0E0",
+			borderBottomColor: "#E0E0E0",
+
+			"@media": {
+				"(prefers-color-scheme: dark)": {
+					outlineColor: "#C0C0FF",
+
+					borderTopColor: "#202020",
+					borderLeftColor: "#202020",
+					borderRightColor: "#606060",
+					borderBottomColor: "#606060",
+				},
+			},
+		},
+	},
+
+	"@media": {
+		"(prefers-color-scheme: dark)": {
+			backgroundColor: "#404040",
+
+			borderTopColor: "#606060",
+			borderLeftColor: "#606060",
+			borderRightColor: "#202020",
+			borderBottomColor: "#202020",
+		},
+	},
+});

packages/frontend/src/routes/Login.tsx

@@ -0,0 +1,92 @@
+import { Schema as S } from "@effect/schema";
+import { LoginRequest, LoginResponse } from "common/api";
+import { useId, useMemo, useRef } from "preact/hooks";
+import { useStore } from "../store";
+import * as style from "./Login.css";
+import { Effect, Fiber, pipe } from "effect";
+
+export default () => {
+
+	const loginUsername = useStore(state => state.loginUsername);
+	const loginPassword = useStore(state => state.loginPassword);
+
+	const setLoginUsername = useStore(state => state.setLoginUsername);
+	const setLoginPassword = useStore(state => state.setLoginPassword);
+
+	const usernameId = useId();
+	const passwordId = useId();
+
+	const requestFiber = useRef<Fiber.RuntimeFiber<void> | null>(null);
+	const requestEffect = useMemo(() => Effect.gen(function* () {
+		const requestData = LoginRequest.make(LoginRequest.make({ username: loginUsername, password: loginPassword }));
+
+		const requestJson = yield* pipe(
+			requestData,
+			S.encode(LoginRequest),
+			Effect.map(JSON.stringify),
+			Effect.orDie,
+		);
+
+		const res = yield* Effect.promise((signal) => fetch("/api/login", {
+			method: "POST",
+			body: requestJson,
+			headers: { "Content-Type": "application/json" },
+			signal,
+		}));
+
+		if (!res.ok) {
+			yield* Effect.die(new Error("Response was not ok"));
+		}
+
+		const responseData = yield* pipe(
+			Effect.promise(() => res.json()),
+			Effect.flatMap(S.decodeUnknown(LoginResponse)),
+			Effect.orDie,
+		);
+
+		setLoginUsername("");
+		setLoginPassword("");
+
+		const a = document.createElement("a");
+		a.href = "/";
+		a.click();
+	}), [loginUsername, loginPassword]);
+
+	const onSubmit = (e: SubmitEvent) => {
+		e.preventDefault();
+
+		if (requestFiber.current !== null) {
+			Effect.runFork(Fiber.interrupt(requestFiber.current), { immediate: true });
+		}
+
+		requestFiber.current = Effect.runFork(requestEffect);
+	};
+
+	return (
+		<div class={style.container}>
+			<form class={style.box} onSubmit={onSubmit}>
+				<header class={style.header}>Repozytorium muzyczne</header>
+				<label for={usernameId}>Nazwa użytkownika</label>
+				<input
+					id={usernameId}
+					class={style.input}
+					type="text"
+					value={loginUsername}
+					autofocus
+					required
+					onInput={(e) => setLoginUsername(e.currentTarget.value)}
+				/>
+				<label for={passwordId}>Hasło</label>
+				<input
+					id={passwordId}
+					class={style.input}
+					type="password"
+					value={loginPassword}
+					required
+					onInput={(e) => setLoginPassword(e.currentTarget.value)}
+				/>
+				<button class={style.submit} type="submit">Zaloguj się</button>
+			</form>
+		</div>
+	);
+};