Auth Card

"use client";

import { useId, useState, type FormEvent } from "react";
import { cn } from "@/lib/utils";

export interface AuthCardProps {
  brand?: string;
  title?: string;
  onSubmit?: (values: { email: string; password: string }) => void | Promise<void>;
  onGithub?: () => void;
  error?: string;
  forgotHref?: string;
  signUpHref?: string;
  className?: string;
}

export function AuthCard({
  brand = "Shipyard",
  title = "Log in",
  onSubmit,
  onGithub,
  error,
  forgotHref = "#forgot",
  signUpHref = "#sign-up",
  className,
}: AuthCardProps) {
  const emailId = useId();
  const pwId = useId();
  const errId = useId();
  const [pending, setPending] = useState(false);

  async function submit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const d = new FormData(e.currentTarget);
    setPending(true);
    try {
      await onSubmit?.({ email: String(d.get("email") ?? ""), password: String(d.get("password") ?? "") });
    } finally {
      setPending(false);
    }
  }

  const field = "da-focus da-stroke h-12 w-full bg-da-input px-3 text-base text-da-fg";

  return (
    <div className={cn("grid min-h-full place-items-center bg-da-bg px-4 py-12 text-da-fg [background-image:radial-gradient(var(--da-border)_1.5px,transparent_1.5px)] [background-size:22px_22px]", className)}>
      <div className="w-full max-w-sm">
        <p className="da-stroke inline-block -rotate-2 bg-da-primary px-3 py-1 font-da-display text-xl tracking-da-display text-da-primary-fg uppercase shadow-da-sm">{brand}</p>
        <div className="da-stroke mt-6 bg-da-surface text-da-surface-fg shadow-da-lg">
          <h1 className="da-stroke-b bg-da-fg px-6 py-4 font-da-display text-3xl tracking-da-display text-da-bg uppercase">{title}</h1>
          <form onSubmit={submit} className="grid gap-4 p-6" aria-describedby={error ? errId : undefined}>
            <button type="button" onClick={onGithub} className="da-focus da-stroke flex h-12 items-center justify-center gap-2 bg-da-surface font-bold shadow-da-sm hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none">
              <svg aria-hidden viewBox="0 0 16 16" className="size-5" fill="currentColor">
                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
              </svg>
              Continue with GitHub
            </button>
            <p aria-hidden className="text-center font-da-mono text-xs font-bold text-da-muted-fg uppercase">— or —</p>
            <div className="grid gap-1.5">
              <label htmlFor={emailId} className="font-da-mono text-xs font-bold uppercase">
                Email
              </label>
              <input id={emailId} name="email" type="email" required autoComplete="email" className={field} />
            </div>
            <div className="grid gap-1.5">
              <div className="flex justify-between">
                <label htmlFor={pwId} className="font-da-mono text-xs font-bold uppercase">
                  Password
                </label>
                <a href={forgotHref} className="da-focus text-xs font-bold underline underline-offset-2">
                  Forgot?
                </a>
              </div>
              <input id={pwId} name="password" type="password" required minLength={8} autoComplete="current-password" className={field} />
            </div>
            {error && (
              <p id={errId} role="alert" className="da-stroke bg-da-danger px-3 py-2 text-sm font-bold text-da-danger-fg">
                {error}
              </p>
            )}
            <button type="submit" disabled={pending} className="da-focus da-stroke mt-2 h-12 bg-da-primary font-bold text-da-primary-fg shadow-da-md hover:translate-x-[6px] hover:translate-y-[6px] hover:shadow-none disabled:opacity-60">
              {pending ? "Logging in…" : "Log in →"}
            </button>
          </form>
        </div>
        <p className="mt-6 text-center text-sm font-medium">
          No account?{" "}
          <a href={signUpHref} className="da-focus font-bold underline decoration-[3px] underline-offset-4">
            Start free
          </a>
        </p>
      </div>
    </div>
  );
}

export default AuthCard;