Login page design

packages/frontend/src/App.tsx

@@ -0,0 +1,15 @@
+import { ErrorBoundary, lazy, LocationProvider, Route, Router } from "preact-iso";
+
+const Home = lazy(() => import("./routes/Home"));
+const Login = lazy(() => import("./routes/Login"));
+
+export const App = () => (
+	<LocationProvider>
+		<ErrorBoundary>
+			<Router>
+				<Route path="/" component={Home} />
+				<Route path="/login" component={Login} />
+			</Router>
+		</ErrorBoundary>
+	</LocationProvider>
+);

packages/frontend/src/index.css.ts

@@ -4,6 +4,10 @@ globalStyle("html, body", {
 	margin: 0,
 	padding: 0,
 
+	width: "100%",
+	height: "100%",
+	overflow: "hidden",
+
 	backgroundColor: "white",
 	color: "black",
 
@@ -13,7 +17,26 @@ globalStyle("html, body", {
 
 	"@media": {
 		"(prefers-color-scheme: dark)": {
-			backgroundColor: "black",
+			backgroundColor: "#1E1E1E",
+			color: "white",
+		},
+	},
+});
+
+globalStyle("input, button, select, textarea", {
+	border: "none",
+	outline: "none",
+	backgroundImage: "none",
+	backgroundColor: "transparent",
+
+	fontFamily: "system-ui, sans-serif",
+	fontSize: 16,
+	fontWeight: "normal",
+
+	color: "black",
+
+	"@media": {
+		"(prefers-color-scheme: dark)": {
 			color: "white",
 		},
 	},

packages/frontend/src/index.tsx

@@ -1,5 +1,6 @@
 import { render } from "preact";
+import { App } from "./App";
 
 import "./index.css";
 
-render(<p>Hello World</p>, document.body);
+render(<App />, document.body);

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>
+	);
+};

packages/frontend/src/store.ts

@@ -5,11 +5,19 @@ export type Update<T> = T | ((prev: T) => T);
 export type Updater<T> = (action: Update<T>) => void;
 
 export interface Store {
-	readonly count: number;
+	readonly loginUsername: string;
+	readonly loginPassword: string;
+
+	readonly setLoginUsername: Updater<string>;
+	readonly setLoginPassword: Updater<string>;
 }
 
 let store: Store = Object.freeze<Store>({
-	count: 0,
+	loginUsername: "",
+	loginPassword: "",
+
+	setLoginUsername: (action) => set(({ loginUsername }) => ({ loginUsername: typeof action === "function" ? action(loginUsername) : loginUsername })),
+	setLoginPassword: (action) => set(({ loginPassword }) => ({ loginPassword: typeof action === "function" ? action(loginPassword) : loginPassword })),
 });
 
 // --- STORE IMPLEMENTATION ----------------------------------------------------