simple-fs-server/islands/Login.tsx

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>
}

export default function LoginForm({
  redirect = "/",
  failed = false,
}: { redirect?: string; failed?: boolean }) {
  return (
    <div class="p-4 absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] 
    flex flex-col items-center border-gray-500 border-2 rounded-md
    sm:max-w-screen-sm max-w-screen-md">
      <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">
          <InputBox label="username" labelChildren={"Username"} type="text"/>
          <InputBox label="password" labelChildren={"Password"} type="password"/>
        </div>
        <button
          type="submit"
          class="bg-gray-400 p-2 rounded
                            m-auto"
        >
          Login
        </button>
      </form>
    </div>
  );
}