Auth Screen

"use client";

import { useId, useState, type FormEvent, type ReactElement } from "react";
import { Eye, EyeOff } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AuthScreenValues {
  email: string;
  password: string;
  remember: boolean;
}

export interface AuthScreenProps {
  mode?: "sign-in" | "sign-up";
  brand?: string;
  brandHref?: string;
  title?: string;
  subtitle?: string;
  /** OAuth providers shown above the form. */
  providers?: { id: string; label: string }[];
  onSubmit?: (values: AuthScreenValues) => void | Promise<void>;
  onProvider?: (providerId: string) => void;
  /** Error message displayed above the submit button (e.g. from your auth API). */
  error?: string;
  forgotHref?: string;
  switchHref?: string;
  quote?: { text: string; author: string; role: string };
  className?: string;
}

function GithubMark() {
  return (
    <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>
  );
}

function GoogleMark() {
  return (
    <svg aria-hidden viewBox="0 0 24 24" className="size-5">
      <path fill="#4285F4" d="M23.5 12.3c0-.8-.1-1.6-.2-2.3H12v4.5h6.5a5.6 5.6 0 0 1-2.4 3.6v3h3.9c2.2-2.1 3.5-5.1 3.5-8.8Z" />
      <path fill="#34A853" d="M12 24c3.2 0 6-1.1 8-2.9l-3.9-3c-1.1.7-2.5 1.2-4.1 1.2-3.1 0-5.8-2.1-6.7-5H1.3v3.1A12 12 0 0 0 12 24Z" />
      <path fill="#FBBC05" d="M5.3 14.3a7.2 7.2 0 0 1 0-4.6V6.6H1.3a12 12 0 0 0 0 10.8l4-3.1Z" />
      <path fill="#EA4335" d="M12 4.8c1.8 0 3.3.6 4.6 1.8l3.4-3.4A12 12 0 0 0 1.3 6.6l4 3.1c.9-2.9 3.6-4.9 6.7-4.9Z" />
    </svg>
  );
}

const PROVIDER_ICONS: Record<string, () => ReactElement> = { github: GithubMark, google: GoogleMark };

export function AuthScreen({
  mode = "sign-in",
  brand = "Shipyard",
  brandHref = "/",
  title = mode === "sign-in" ? "Welcome back." : "Start shipping.",
  subtitle = mode === "sign-in" ? "Log in to publish your next release." : "Free for one project. No credit card.",
  providers = [
    { id: "github", label: "Continue with GitHub" },
    { id: "google", label: "Continue with Google" },
  ],
  onSubmit,
  onProvider,
  error,
  forgotHref = "#forgot",
  switchHref = mode === "sign-in" ? "#sign-up" : "#sign-in",
  quote = {
    text: "We shipped 60 releases last quarter and wrote exactly zero release notes by hand.",
    author: "Jonas Lindqvist",
    role: "Staff Engineer, Northdesk",
  },
  className,
}: AuthScreenProps) {
  const [showPassword, setShowPassword] = useState(false);
  const [pending, setPending] = useState(false);
  const emailId = useId();
  const passwordId = useId();
  const rememberId = useId();
  const errorId = useId();

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

  const field =
    "da-focus da-stroke h-12 w-full bg-da-input px-3 text-base text-da-fg placeholder:text-da-muted-fg focus-visible:outline-offset-2";

  return (
    <div className={cn("grid min-h-full bg-da-bg text-da-fg lg:grid-cols-2", className)}>
      <div className="flex flex-col px-6 py-8 sm:px-12">
        <a href={brandHref} className="da-focus flex items-center gap-2 self-start font-da-display text-xl tracking-da-display uppercase">
          <span aria-hidden className="da-stroke grid size-8 place-items-center bg-da-primary text-base text-da-primary-fg">
            {brand[0]}
          </span>
          {brand}
        </a>

        <div className="mx-auto flex w-full max-w-sm flex-1 flex-col justify-center py-12">
          <h1 className="font-da-display text-4xl tracking-da-display uppercase sm:text-5xl">{title}</h1>
          <p className="mt-3 text-da-muted-fg">{subtitle}</p>

          <div className="mt-8 flex flex-col gap-3">
            {providers.map((p) => {
              const Icon = PROVIDER_ICONS[p.id];
              return (
                <button
                  key={p.id}
                  type="button"
                  onClick={() => onProvider?.(p.id)}
                  className="da-focus da-transition da-stroke flex h-12 items-center justify-center gap-3 bg-da-surface font-bold text-da-surface-fg shadow-da-sm hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none"
                >
                  {Icon && <Icon />}
                  {p.label}
                </button>
              );
            })}
          </div>

          <div className="my-8 flex items-center gap-4 font-da-mono text-xs font-bold tracking-da-label text-da-muted-fg uppercase" aria-hidden>
            <span className="da-stroke-t flex-1" />
            or with email
            <span className="da-stroke-t flex-1" />
          </div>

          <form onSubmit={handleSubmit} className="flex flex-col gap-5" aria-describedby={error ? errorId : undefined}>
            <div className="flex flex-col gap-2">
              <label htmlFor={emailId} className="font-da-mono text-xs font-bold tracking-da-label uppercase">
                Work email
              </label>
              <input id={emailId} name="email" type="email" autoComplete="email" required placeholder="you@company.com" className={field} />
            </div>
            <div className="flex flex-col gap-2">
              <div className="flex items-center justify-between">
                <label htmlFor={passwordId} className="font-da-mono text-xs font-bold tracking-da-label uppercase">
                  Password
                </label>
                {mode === "sign-in" && (
                  <a href={forgotHref} className="da-focus text-sm font-bold underline underline-offset-4">
                    Forgot?
                  </a>
                )}
              </div>
              <div className="relative">
                <input
                  id={passwordId}
                  name="password"
                  type={showPassword ? "text" : "password"}
                  autoComplete={mode === "sign-in" ? "current-password" : "new-password"}
                  required
                  minLength={8}
                  className={cn(field, "pr-12")}
                />
                <button
                  type="button"
                  onClick={() => setShowPassword((s) => !s)}
                  aria-label={showPassword ? "Hide password" : "Show password"}
                  aria-pressed={showPassword}
                  className="da-focus absolute inset-y-0 right-0 grid w-12 place-items-center"
                >
                  {showPassword ? <EyeOff aria-hidden className="size-5" /> : <Eye aria-hidden className="size-5" />}
                </button>
              </div>
            </div>
            {mode === "sign-in" && (
              <div className="flex items-center gap-3">
                <input id={rememberId} name="remember" type="checkbox" className="da-focus size-5 accent-da-fg" />
                <label htmlFor={rememberId} className="text-sm font-medium">
                  Keep me signed in for 30 days
                </label>
              </div>
            )}
            {error && (
              <p id={errorId} role="alert" className="da-stroke bg-da-danger p-3 text-sm font-bold text-da-danger-fg">
                {error}
              </p>
            )}
            <button
              type="submit"
              disabled={pending}
              className="da-focus da-transition da-stroke h-12 bg-da-fg font-bold text-da-bg shadow-da-md hover:translate-x-[6px] hover:translate-y-[6px] hover:shadow-none disabled:opacity-60"
            >
              {pending ? "One sec…" : mode === "sign-in" ? "Log in" : "Create account"}
            </button>
          </form>

          <p className="mt-8 text-sm">
            {mode === "sign-in" ? "New to " + brand + "? " : "Already have an account? "}
            <a href={switchHref} className="da-focus font-bold underline decoration-[3px] underline-offset-4 hover:decoration-da-secondary">
              {mode === "sign-in" ? "Create an account" : "Log in"}
            </a>
          </p>
        </div>
      </div>

      <aside className="da-stroke-l relative hidden flex-col justify-between overflow-hidden bg-da-primary p-12 text-da-primary-fg lg:flex">
        <div
          aria-hidden
          className="absolute inset-0 opacity-15 [background-image:linear-gradient(currentColor_2px,transparent_2px),linear-gradient(90deg,currentColor_2px,transparent_2px)] [background-size:48px_48px]"
        />
        <p className="relative font-da-mono text-xs font-bold tracking-da-label uppercase">[ changelog ] v4.2.0 shipped 2 days ago</p>
        <figure className="da-stroke relative bg-da-surface p-8 text-da-surface-fg shadow-da-lg">
          <blockquote className="font-da-display text-3xl leading-tight tracking-da-display uppercase">“{quote.text}”</blockquote>
          <figcaption className="mt-6 text-sm">
            <span className="block font-bold">{quote.author}</span>
            <span className="text-da-muted-fg">{quote.role}</span>
          </figcaption>
        </figure>
        <p className="relative -rotate-2 self-start font-da-display text-6xl tracking-da-display uppercase">Ship loud.</p>
      </aside>
    </div>
  );
}

export default AuthScreen;