96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
import { Schema as S } from "@effect/schema";
|
|
import { Login } from "common/api";
|
|
import { useId, useMemo, useRef } from "preact/hooks";
|
|
import { useStore } from "../store";
|
|
import * as style from "./Login.css";
|
|
import { Effect, Fiber, Option as O, 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 setUser = useStore(state => state.setUser);
|
|
|
|
const usernameId = useId();
|
|
const passwordId = useId();
|
|
|
|
const requestFiber = useRef<Fiber.RuntimeFiber<void> | null>(null);
|
|
const requestEffect = useMemo(() => Effect.gen(function* () {
|
|
const requestData = Login.props.request.schema.make({ username: loginUsername, password: loginPassword });
|
|
|
|
const requestJson = yield* pipe(
|
|
requestData,
|
|
S.encode(Login.props.request.schema),
|
|
Effect.map(JSON.stringify),
|
|
Effect.orDie,
|
|
);
|
|
|
|
const res = yield* Effect.promise((signal) => fetch("http://localhost:3000/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(Login.props.response[200].schema)),
|
|
Effect.orDie,
|
|
);
|
|
|
|
setLoginUsername("");
|
|
setLoginPassword("");
|
|
setUser(O.some(responseData));
|
|
|
|
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>
|
|
);
|
|
};
|