92 lines
2.5 KiB
TypeScript
92 lines
2.5 KiB
TypeScript
import { createSignal, useContext } from "solid-js";
|
|
import { LoginContext, ModalContext } from "./Root";
|
|
|
|
export function LoginForm() {
|
|
const modal_ctx = useContext(ModalContext);
|
|
const login_ctx = useContext(LoginContext);
|
|
const [username, setUsername] = createSignal("");
|
|
const [password, setPassword] = createSignal("");
|
|
const [waiting, setWaiting] = createSignal(false);
|
|
const [error, setError] = createSignal(false);
|
|
|
|
async function loginFailed() {
|
|
setError(true);
|
|
setWaiting(false);
|
|
setTimeout(() => {
|
|
setError(false);
|
|
}, 1000);
|
|
}
|
|
|
|
return (
|
|
<form class="form-control">
|
|
<label class="label">
|
|
<span class="label-text">Username</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
placeholder="username"
|
|
value={username()}
|
|
class="input input-bordered"
|
|
onChange={(e) => {
|
|
setUsername(e.target.value);
|
|
}} />
|
|
<label class="label">
|
|
<span class="label-text">Password</span>
|
|
</label>
|
|
<input
|
|
type="password"
|
|
placeholder="password"
|
|
value={password()}
|
|
class="input input-bordered"
|
|
onChange={(e) => {
|
|
setPassword(e.target.value);
|
|
}} />
|
|
<button
|
|
class={"btn btn-primary mt-4" + (error() ? " btn-error" : "")}
|
|
onClick={(b) => {
|
|
b.preventDefault();
|
|
setWaiting(true);
|
|
submitLogin(username(), password()).then((token) => {
|
|
if (token != "") {
|
|
setWaiting(false);
|
|
setError(false);
|
|
login_ctx?.setUsername(username());
|
|
setUsername("");
|
|
setPassword("");
|
|
login_ctx?.setToken(token);
|
|
modal_ctx?.setLoginModalOpen(false);
|
|
} else {
|
|
loginFailed();
|
|
}
|
|
});
|
|
}}
|
|
>
|
|
{waiting() ? "Logging in..." : "Login"}
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
// This function is responsible for sending the login request to the server
|
|
// and storing the token in localstorage
|
|
export async function submitLogin(
|
|
username: string,
|
|
password: string
|
|
): Promise<string> {
|
|
const response = await fetch("/api/login", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ username, password }),
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
if (data.token && data.username) {
|
|
localStorage.setItem("token", data.token);
|
|
localStorage.setItem("username", data.username);
|
|
return data.token;
|
|
}
|
|
}
|
|
return "";
|
|
}
|
|
|