simple-fs-server/islands/Login.tsx

55 lines
1.5 KiB
TypeScript
Raw Normal View History

2023-02-08 01:33:54 +09:00
import { ComponentChildren } from "preact";
function InputBox(props: {
label: string;
labelChildren?: ComponentChildren;
type: string;
}){
const { label, labelChildren, type } = props;
return <div class="flex items-center flex-1">
<label for={label} class="w-20">{labelChildren}</label>
<input
type={type}
name={label}
id={label}
class="border-b-2 focus:border-green-500 transition-colors flex-1 focus:outline-none"
/>
</div>
}
2023-01-14 03:03:22 +09:00
export default function LoginForm({
2023-01-14 03:03:58 +09:00
redirect = "/",
failed = false,
}: { redirect?: string; failed?: boolean }) {
return (
<div class="p-4 absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]
2023-01-14 03:03:22 +09:00
flex flex-col items-center border-gray-500 border-2 rounded-md
sm:max-w-screen-sm max-w-screen-md">
2023-01-14 03:03:58 +09:00
<img
src="/logo.svg"
class="w-32 h-32"
alt="the fresh logo: a sliced lemon dripping with juice"
/>
<h1 class="text-2xl font-bold">Login</h1>
{failed ? <p class="text-red-500">Login failed</p> : null}
<form
action={"/login?redirect=" + redirect}
method="POST"
class="flex flex-col gap-2 items-stretch"
>
<div class="flex gap-2 flex-wrap">
2023-02-08 01:33:54 +09:00
<InputBox label="username" labelChildren={"Username"} type="text"/>
<InputBox label="password" labelChildren={"Password"} type="password"/>
2023-01-14 03:03:58 +09:00
</div>
<button
type="submit"
class="bg-gray-400 p-2 rounded
2023-01-14 03:03:22 +09:00
m-auto"
2023-01-14 03:03:58 +09:00
>
Login
</button>
</form>
2023-01-14 03:03:22 +09:00
</div>
2023-01-14 03:03:58 +09:00
);
}