zebflow 0.7.9

Reactive web automation platform — pipelines, templates, and real-time collaboration in a single binary.
Documentation
export const page = {
  html: {
    lang: "en",
  },
  body: {
    className:
      "min-h-screen flex flex-col items-center justify-center px-4 py-5 bg-zinc-50 text-gray-900 font-sans",
  },
  navigation: "history",
};

export function getPage(input) {
  return {
    head: {
      title: input?.seo?.title ?? "Login",
      description: input?.seo?.description ?? "Sign in to Zebflow",
    },
  };
}

export default function Page(input) {
  return (
    <div className="flex w-full max-w-xs flex-col items-center">
      <div className="flex flex-col items-center gap-2">
        <img
          src="/assets/branding/logo.svg"
          alt="Zebflow"
          className="h-14 w-14 shrink-0"
        />
        <span className="text-xl font-bold tracking-tight text-gray-900">ZEBFLOW</span>
      </div>
      <form
        method="post"
        action="/login"
        className="mt-6 flex w-full flex-col gap-2"
      >
        {input?.error ? (
          <p className="text-center text-sm text-red-600">{input.error}</p>
        ) : null}
        <input
          type="text"
          name="identifier"
          placeholder="Username"
          defaultValue={input?.default_identifier ?? ""}
          required
          autoComplete="username"
          className="h-9 w-full rounded-lg border border-gray-300 bg-white px-3 text-sm outline-none focus:ring-2 focus:ring-gray-400"
        />
        <input
          type="password"
          name="password"
          placeholder="Password"
          required
          autoComplete="current-password"
          className="h-9 w-full rounded-lg border border-gray-300 bg-white px-3 text-sm outline-none focus:ring-2 focus:ring-gray-400"
        />
        <button
          type="submit"
          className="h-10 w-full rounded-lg bg-gray-900 text-sm font-medium text-white hover:opacity-90"
        >
          Sign in
        </button>
      </form>
      {input?.app_version ? (
        <p className="mt-6 text-[0.7rem] text-gray-400 tracking-wide">v{input.app_version}</p>
      ) : null}
    </div>
  );
}