Auth Magic Link

"use client";

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

export interface AuthMagicLinkProps {
  brand?: string;
  title?: string;
  subtitle?: string;
  onSend?: (email: string) => void | Promise<void>;
  className?: string;
}

export function AuthMagicLink({
  brand = "Shipyard",
  title = "No passwords here.",
  subtitle = "Enter your work email and we'll send you a one-click login link.",
  onSend,
  className,
}: AuthMagicLinkProps) {
  const id = useId();
  const [email, setEmail] = useState("");
  const [state, setState] = useState<"idle" | "sending" | "sent">("idle");

  async function submit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setState("sending");
    await onSend?.(email);
    setState("sent");
  }

  return (
    <div className={cn("grid min-h-full bg-da-bg text-da-fg lg:grid-cols-[1fr_1.1fr]", className)}>
      <div aria-hidden className="da-stroke-b lg:da-stroke-r relative hidden overflow-hidden bg-da-secondary p-10 text-da-secondary-fg lg:block lg:border-b-0">
        <p className="font-da-display text-3xl tracking-da-display uppercase">{brand}</p>
        <div className="absolute inset-x-10 bottom-10 grid gap-3">
          {["Merged: feature/ai-summaries", "Drafted: v4.2.0 release notes", "Published: changelog · widget · slack"].map((l, i) => (
            <p key={l} className="da-stroke bg-da-surface px-4 py-3 font-da-mono text-sm font-bold text-da-surface-fg shadow-da-sm" style={{ marginLeft: `${i * 2}rem` }}>
              {l}
            </p>
          ))}
        </div>
      </div>
      <div className="flex flex-col justify-center px-6 py-16 sm:px-16">
        <p className="font-da-display text-2xl tracking-da-display uppercase lg:hidden">{brand}</p>
        {state === "sent" ? (
          <div role="status" className="mt-8 lg:mt-0">
            <p className="da-stroke inline-block rotate-2 bg-da-success px-3 py-1 font-da-mono text-xs font-bold text-da-success-fg uppercase shadow-da-sm">Link sent</p>
            <h1 className="mt-6 font-da-display text-5xl leading-none tracking-da-display uppercase">Check your inbox.</h1>
            <p className="mt-4 text-lg text-da-muted-fg">
              We sent a login link to <strong className="text-da-fg">{email}</strong>. It works once and expires in 15 minutes.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <a href="https://mail.google.com" className="da-focus da-stroke bg-da-fg px-5 py-3 font-bold text-da-bg shadow-da-sm">
                Open Gmail
              </a>
              <button type="button" onClick={() => setState("idle")} className="da-focus da-stroke bg-da-surface px-5 py-3 font-bold text-da-surface-fg">
                Use another email
              </button>
            </div>
          </div>
        ) : (
          <>
            <h1 className="mt-8 font-da-display text-5xl leading-none tracking-da-display uppercase lg:mt-0">{title}</h1>
            <p className="mt-4 max-w-md text-lg text-da-muted-fg">{subtitle}</p>
            <form onSubmit={submit} className="mt-8 grid max-w-md gap-3">
              <label htmlFor={id} className="font-da-mono text-xs font-bold tracking-da-label uppercase">
                Work email
              </label>
              <input
                id={id}
                type="email"
                required
                autoComplete="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="you@company.com"
                className="da-focus da-stroke h-14 bg-da-input px-4 text-lg text-da-fg shadow-da-sm"
              />
              <button type="submit" disabled={state === "sending"} className="da-focus da-stroke h-14 bg-da-primary text-lg font-bold text-da-primary-fg shadow-da-md hover:translate-x-[6px] hover:translate-y-[6px] hover:shadow-none disabled:opacity-60">
                {state === "sending" ? "Sending…" : "Email me a login link"}
              </button>
            </form>
          </>
        )}
      </div>
    </div>
  );
}

export default AuthMagicLink;