2023-01-05 18:18:07 +09:00
|
|
|
import { Head } from "$fresh/runtime.ts";
|
|
|
|
|
|
|
|
|
|
export default function Login() {
|
2023-01-06 18:24:27 +09:00
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>Simple file server - Login</title>
|
|
|
|
|
</Head>
|
|
|
|
|
<div class="">
|
|
|
|
|
<div class="p-4 absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]
|
2023-01-05 18:18:07 +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-06 18:24:27 +09:00
|
|
|
<img
|
|
|
|
|
src="/logo.svg"
|
|
|
|
|
class="w-32 h-32"
|
|
|
|
|
alt="the fresh logo: a sliced lemon dripping with juice"
|
|
|
|
|
/>
|
|
|
|
|
<form
|
|
|
|
|
action="/api/login"
|
|
|
|
|
method="POST"
|
|
|
|
|
class="flex flex-col gap-2 items-stretch"
|
|
|
|
|
>
|
|
|
|
|
<div class="flex gap-2 flex-wrap">
|
|
|
|
|
<div class="basis-40 flex items-center flex-1">
|
|
|
|
|
<label for="username" class="w-20">Username</label>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
name="username"
|
|
|
|
|
id="username"
|
|
|
|
|
class="border-b-2 focus:border-green-500 transition-colors flex-1"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center flex-1">
|
|
|
|
|
<label for="password" class="w-20">Password</label>
|
|
|
|
|
<input
|
|
|
|
|
type="password"
|
|
|
|
|
name="password"
|
|
|
|
|
id="password"
|
|
|
|
|
class="border-b-2 focus:border-green-500 transition-colors flex-1"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
2023-01-05 18:18:07 +09:00
|
|
|
</div>
|
2023-01-06 18:24:27 +09:00
|
|
|
<button
|
|
|
|
|
type="submit"
|
|
|
|
|
class="bg-gray-400 p-2 rounded
|
|
|
|
|
m-auto"
|
|
|
|
|
>
|
|
|
|
|
Login
|
|
|
|
|
</button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
);
|
2023-01-05 18:18:07 +09:00
|
|
|
}
|
