Sign-in forms

import * as React from "react"
import Link from "next/link"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

import { PasswordSignIn } from "./sign-in-forms-01.client"
import { DEMO_NOTE, LINKS, continueWith, signInWithPassword, whatsNew } from "./sign-in-forms-01.data"

/**
 * Signing in with an address and a password, in one framed card: the form on
 * one side — with the reveal toggle, the way to reset a forgotten password,
 * a choice to stay signed in and the outside providers under it — and on the
 * other what has shipped since a returning reader was last here.
 *
 * A server component. It reads the releases through `./sign-in-forms-01.data`
 * and hands the island two server functions defined here: `signIn`, which
 * checks the form and asks the auth adapter, and `start`, which starts a
 * sign-in with an outside provider. The adapter never leaves the server.
 */
export function SignInForms01() {
  const titleId = React.useId()
  const notes = whatsNew()

  async function signIn(formData: FormData) {
    "use server"
    return signInWithPassword(formData)
  }

  async function start(provider: string) {
    "use server"
    return continueWith(provider)
  }

  return (
    <section
      data-section="sign-in-forms-01"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <Card>
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>Sign in to Northwind</h2>
            </CardTitle>
            <CardDescription>Use your work email. Welcome back.</CardDescription>
          </CardHeader>
          <CardContent className="grid p-0 lg:grid-cols-2">
            <div className="p-(--card-spacing) md:p-8">
              <div className="mx-auto w-full max-w-sm">
                <PasswordSignIn links={LINKS} demoNote={DEMO_NOTE} signIn={signIn} continueWith={start} />
              </div>
            </div>
            <aside
              aria-labelledby={`${titleId}-news`}
              className="flex flex-col gap-5 border-t bg-surface p-(--card-spacing) md:p-8 lg:border-s lg:border-t-0"
            >
              <h3 id={`${titleId}-news`} className="text-sm font-semibold">
                New since you were last here
              </h3>
              <ol className="flex flex-col gap-5">
                {notes.map((note) => (
                  <li key={note.version} className="flex flex-col gap-1">
                    <p className="flex flex-wrap items-baseline gap-x-2 text-xs text-muted-foreground">
                      <span className="font-mono text-foreground">{note.version}</span>
                      <time dateTime={note.iso} className="tabular-nums">
                        {note.date}
                      </time>
                    </p>
                    <p className="text-sm font-medium text-balance">{note.title}</p>
                    <p className="text-sm text-pretty text-muted-foreground">{note.summary}</p>
                  </li>
                ))}
              </ol>
              <Link
                href={LINKS.changelog}
                className="mt-auto w-fit text-sm text-foreground underline underline-offset-4"
              >
                Every release note
              </Link>
            </aside>
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default SignInForms01

"use client"

import * as React from "react"
import Link from "next/link"
import { CircleCheckIcon } from "lucide-react"

import { isEmail } from "@/lib/validation"
import { Button, buttonVariants } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldError, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { PasswordInput } from "@/components/ui/password-input"
import { SocialAuthButtons, type SocialAuthProvider } from "@/components/ui/social-auth-buttons"
import { Spinner } from "@/components/ui/spinner"

import type { AuthResult } from "./sign-in-forms-01.data"

type FieldName = "email" | "password"

export type PasswordSignInProps = {
  links: { forgot: string; signUp: string; next: string }
  demoNote: string
  signIn: (formData: FormData) => Promise<AuthResult>
  continueWith: (provider: SocialAuthProvider) => Promise<AuthResult<{ provider: string }>>
}

/**
 * The credentials form: an address, a password with its reveal toggle and
 * the way to reset it, and a choice to stay signed in; under it the outside
 * providers. The form checks what it can before anything is sent — an
 * address in the shape of one, a password at all — and the adapter decides
 * the rest on the server. A refusal lands under the field it is about with
 * the focus on it; what happened is said in the status line, and a signed-in
 * reader is given the way on rather than moved.
 */
export function PasswordSignIn({ links, demoNote, signIn, continueWith }: PasswordSignInProps) {
  const uid = React.useId()
  const id = (name: string) => `${uid}-${name}`
  const [email, setEmail] = React.useState("")
  const [password, setPassword] = React.useState("")
  // Unticked until the reader asks: staying signed in on a shared machine is
  // a choice to make, not one to undo.
  const [remember, setRemember] = React.useState(false)
  const [error, setError] = React.useState<{ field: FieldName; message: string } | null>(null)
  const [refusal, setRefusal] = React.useState<string | null>(null)
  const [pending, setPending] = React.useState(false)
  const [signedIn, setSignedIn] = React.useState(false)
  const [said, setSaid] = React.useState("")
  const onward = React.useRef<HTMLAnchorElement>(null)
  // The focus goes to a refused field once the render that marks it is on the
  // screen — aria-invalid set, the message under it and named by it — so a
  // screen reader reads the field with its error rather than before it. The
  // count makes a second refusal of the same field a request of its own.
  const [focusRequest, setFocusRequest] = React.useState<{ field: string; n: number } | null>(null)
  React.useEffect(() => {
    if (focusRequest) document.getElementById(`${uid}-${focusRequest.field}`)?.focus()
  }, [focusRequest, uid])

  // Signing in swaps the pressed button for the link on; the focus follows it
  // rather than falling to the top of the page.
  React.useEffect(() => {
    if (signedIn) onward.current?.focus()
  }, [signedIn])

  function refuse(field: FieldName, message: string) {
    setError({ field, message })
    setFocusRequest((last) => ({ field, n: (last?.n ?? 0) + 1 }))
  }

  async function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setError(null)
    setRefusal(null)
    if (!isEmail(email.trim())) return refuse("email", "Enter your work email, like name@example.com.")
    if (!password) return refuse("password", "Enter your password.")
    const form = new FormData()
    form.set("email", email.trim())
    form.set("password", password)
    if (remember) form.set("remember", "on")
    setPending(true)
    let result: AuthResult
    try {
      result = await signIn(form)
    } catch {
      // The call never arrived — a dropped connection, or a page older than the server.
      result = { ok: false, error: { code: "unknown", message: "Your sign-in did not reach the server. Try again." } }
    } finally {
      setPending(false)
    }
    if (!result.ok) {
      const field = result.error.field
      if (field === "email" || field === "password") return refuse(field, result.error.message)
      return setRefusal(result.error.message)
    }
    setSignedIn(true)
    setSaid(
      `Signed in as ${result.data.user.name}${remember ? ", and kept signed in on this device for 30 days" : ""}. Your dashboard opens next.`
    )
  }

  async function provider(choice: SocialAuthProvider) {
    setRefusal(null)
    let result: AuthResult<{ provider: string }>
    try {
      result = await continueWith(choice)
    } catch {
      result = { ok: false, error: { code: "unknown", message: "The request did not reach the server. Try again." } }
    }
    if (!result.ok) return setRefusal(result.error.message)
    setSaid(`${result.data.provider} would open now to confirm it is you, then bring you back here signed in.`)
  }

  const invalid = (field: FieldName) => error?.field === field || undefined
  const described = (field: FieldName) => (error?.field === field ? id(`${field}-error`) : undefined)
  const message = (field: FieldName) =>
    error?.field === field ? <FieldError id={id(`${field}-error`)}>{error.message}</FieldError> : null
  const required = <span className="font-normal text-muted-foreground">(required)</span>

  return (
    <div className="flex flex-col gap-4">
      <form noValidate onSubmit={submit} aria-label="Sign in with your password" className="flex flex-col gap-4">
        <Field>
          <FieldLabel htmlFor={id("email")}>Work email {required}</FieldLabel>
          <Input
            id={id("email")}
            type="email"
            autoComplete="email"
            placeholder="name@example.com"
            required
            value={email}
            aria-invalid={invalid("email")}
            aria-describedby={described("email")}
            onChange={(event) => {
              setEmail(event.target.value)
              setError(null)
            }}
          />
          {message("email")}
        </Field>
        <Field>
          <div className="flex items-baseline justify-between gap-3">
            <FieldLabel htmlFor={id("password")}>Password {required}</FieldLabel>
            <Link
              href={links.forgot}
              className="text-xs text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
            >
              Forgot password?
            </Link>
          </div>
          <PasswordInput
            id={id("password")}
            required
            value={password}
            aria-invalid={invalid("password")}
            aria-describedby={described("password")}
            onChange={(event) => {
              setPassword(event.target.value)
              setError(null)
            }}
          />
          {message("password")}
        </Field>
        <div className="flex items-center gap-2.5">
          <Checkbox
            id={id("remember")}
            checked={remember}
            onCheckedChange={(checked) => setRemember(checked === true)}
          />
          <Label htmlFor={id("remember")} className="font-normal text-muted-foreground">
            Keep me signed in on this device for 30 days
          </Label>
        </div>
        {refusal ? (
          <Callout variant="danger" role="alert" title="You are not signed in">
            {refusal}
          </Callout>
        ) : null}
        {signedIn ? (
          <Link ref={onward} href={links.next} className={buttonVariants()}>
            Open the dashboard
          </Link>
        ) : (
          <Button type="submit" disabled={pending} focusableWhenDisabled aria-busy={pending || undefined}>
            {pending ? <Spinner aria-hidden="true" /> : null}
            Sign in
          </Button>
        )}
        <p role="status" aria-live="polite" className="flex min-h-5 items-start gap-2 text-sm">
          {said ? (
            <>
              <CircleCheckIcon aria-hidden="true" className="mt-0.5 size-4 shrink-0 text-success" />
              {said}
            </>
          ) : null}
        </p>
      </form>

      <div className="flex flex-col gap-3">
        <div aria-hidden="true" className="flex items-center gap-3 text-xs text-muted-foreground">
          <span className="h-px flex-1 bg-border" />
          or
          <span className="h-px flex-1 bg-border" />
        </div>
        <SocialAuthButtons providers={["google", "github"]} layout="stack" onSelect={provider} />
      </div>

      <p className="text-xs text-muted-foreground">
        {demoNote} <span className="font-mono text-foreground">wrong</span>. New to Northwind?{" "}
        <Link href={links.signUp} className="text-foreground underline underline-offset-4">
          Create an account
        </Link>
      </p>
    </div>
  )
}

/**
 * What `sign-in-forms-01` reads and calls: the three newest stable releases
 * in `db.releases`, which the panel beside the form shows a returning reader,
 * and the two things the form can ask of the server — a password sign-in,
 * checked and handed to the auth adapter by the kit's `createAuthActions`, and
 * the start of a sign-in with an outside provider, which only says where the
 * reader would go.
 *
 * Selectors and server-side calls, reading `db` inside functions. The adapter
 * stays on the server: the island takes plain props and the server functions
 * its section hands it, and never imports this module.
 */
import { createAuthActions, mockAuthAdapter, type AuthResult } from "@/lib/auth-adapter"
import { db } from "@/lib/sample-data"

export type { AuthResult }

/** Where the form's links go: the reset flow, the sign-up page, and the dashboard after signing in. */
export const LINKS = { forgot: "/forgot-password", signUp: "/sign-up", next: "/saas", changelog: "/changelog" }

/** What the mock adapter accepts, said once so the preview can be tried. */
export const DEMO_NOTE = "This form runs on the kit's mock adapter: any password works except"

export type ReleaseNote = { version: string; title: string; summary: string; date: string; iso: string }

const DAY = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" })

/** The three newest stable releases, newest first. */
export function whatsNew(): ReleaseNote[] {
  return db.releases
    .all()
    .filter((release) => release.channel === "stable")
    .sort((a, b) => b.date.getTime() - a.date.getTime())
    .slice(0, 3)
    .map((release) => ({
      version: release.version,
      title: release.title,
      summary: release.summary,
      date: DAY.format(release.date),
      iso: release.date.toISOString().slice(0, 10),
    }))
}

/** The longest an address can be (RFC 5321), and the longest password the form takes. */
const MAX_EMAIL = 254
const MAX_PASSWORD = 256

/**
 * Signs in from the form's FormData — email, password, remember — through the
 * adapter. The types are erased at the action boundary, so anything but a
 * form is refused, and an address or a password longer than any real one is
 * refused before the adapter's pattern reads it.
 */
export async function signInWithPassword(formData: FormData): Promise<AuthResult> {
  if (!(formData instanceof FormData))
    return { ok: false, error: { code: "invalid_input", message: "That is not a sign-in this form sends." } }
  const email = formData.get("email")
  if (typeof email !== "string" || email.length > MAX_EMAIL)
    return {
      ok: false,
      error: { code: "invalid_input", field: "email", message: "Enter your work email, like name@example.com." },
    }
  const password = formData.get("password")
  if (typeof password !== "string" || password.length > MAX_PASSWORD)
    return {
      ok: false,
      error: { code: "invalid_input", field: "password", message: "Enter your password, up to 256 characters." },
    }
  return createAuthActions(mockAuthAdapter).signIn(formData)
}

/** The providers a reader can sign in with instead, and how each writes its own name. */
const PROVIDERS = new Map([
  ["google", "Google"],
  ["github", "GitHub"],
])

/**
 * Starts a sign-in with an outside provider. Nothing signs in here: this is
 * the seam where a real app sends the reader to the provider, and it answers
 * with the provider's name so the page can say where they would go. The name
 * is looked up in a Map, so "constructor" or "__proto__" is no provider.
 */
export async function continueWith(provider: string): Promise<AuthResult<{ provider: string }>> {
  const name = typeof provider === "string" ? PROVIDERS.get(provider) : undefined
  if (!name)
    return { ok: false, error: { code: "invalid_input", message: "That provider is not set up for this workspace." } }
  return { ok: true, data: { provider: name } }
}

import * as React from "react"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

import { MagicLinkSignIn } from "./sign-in-forms-02.client"
import { LINK_MINUTES, RESEND_SECONDS, sendSignInLink } from "./sign-in-forms-02.data"

/**
 * Signing in with a link instead of a password, in one framed card: the three
 * steps it takes down one side, and the form that starts them beside it — an
 * address and a button on one line — which becomes where the link went, how
 * long it works and when another can be asked for.
 *
 * A server component. It hands the island `send`, a server function defined
 * here that checks the address and calls the mailer; nothing is read from the
 * store, and the answer never says whether an account exists.
 */
export function SignInForms02() {
  const titleId = React.useId()

  async function send(email: string) {
    "use server"
    return sendSignInLink(email)
  }

  return (
    <section
      data-section="sign-in-forms-02"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <Card>
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>Sign in with a link</h2>
            </CardTitle>
            <CardDescription>No password: we email a link that signs you in once.</CardDescription>
          </CardHeader>
          <CardContent className="p-0">
            <MagicLinkSignIn minutes={LINK_MINUTES} resendSeconds={RESEND_SECONDS} send={send} />
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default SignInForms02

"use client"

import * as React from "react"
import { CircleCheckIcon, MailIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { isEmail } from "@/lib/validation"
import { Button } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import { Countdown } from "@/components/ui/countdown"
import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Spinner } from "@/components/ui/spinner"

import type { AuthResult } from "./sign-in-forms-02.data"

export type MagicLinkSignInProps = {
  minutes: number
  resendSeconds: number
  send: (email: string) => Promise<AuthResult<{ sentTo: string; minutes: number }>>
}

/**
 * The three steps of a link sign-in beside the form that starts them. Before
 * the link goes the first step is the current one; once it is sent the form
 * becomes the sent state — where it went, how long it works — and the second
 * step is. Another link can be asked for after a stated wait, counted down
 * where the button is; the moment it can, the status line says so. "Use a
 * different address" goes back to the form with the address still in it.
 */
export function MagicLinkSignIn({ minutes, resendSeconds, send }: MagicLinkSignInProps) {
  const uid = React.useId()
  const [email, setEmail] = React.useState("")
  const [error, setError] = React.useState<string | null>(null)
  const [pending, setPending] = React.useState(false)
  const [sentTo, setSentTo] = React.useState<string | null>(null)
  const [until, setUntil] = React.useState<Date | null>(null)
  const [ready, setReady] = React.useState(false)
  const [said, setSaid] = React.useState("")
  const [refusal, setRefusal] = React.useState<string | null>(null)
  const heading = React.useRef<HTMLHeadingElement>(null)
  const field = React.useRef<HTMLInputElement>(null)
  const moved = React.useRef<"heading" | "field" | null>(null)

  React.useEffect(() => {
    const target = moved.current
    moved.current = null
    if (target === "heading") heading.current?.focus()
    if (target === "field") field.current?.focus()
  }, [sentTo])

  async function request(address: string) {
    setRefusal(null)
    setPending(true)
    let result: AuthResult<{ sentTo: string; minutes: number }>
    try {
      result = await send(address)
    } catch {
      // The call never arrived — a dropped connection, or a page older than the server.
      result = { ok: false, error: { code: "unknown", message: "Your request did not reach the server. Try again." } }
    } finally {
      setPending(false)
    }
    if (!result.ok) {
      if (result.error.field !== "email") return setRefusal(result.error.message)
      setError(result.error.message)
      return field.current?.focus()
    }
    const again = sentTo !== null
    if (!again) moved.current = "heading"
    setSentTo(result.data.sentTo)
    setReady(false)
    setUntil(new Date(Date.now() + resendSeconds * 1000))
    setSaid(again ? `Sent another link to ${result.data.sentTo}.` : `A link is on its way to ${result.data.sentTo}.`)
  }

  function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    if (!isEmail(email.trim())) {
      setError("Enter your work email, like name@example.com.")
      return field.current?.focus()
    }
    setError(null)
    void request(email)
  }

  const step = sentTo ? 1 : 0
  const steps = [
    { title: "Enter your work email", detail: "The one your team invited." },
    { title: "Open the link we send", detail: `On this device, within ${minutes} minutes.` },
    { title: "You are in", detail: "No password to remember or reset." },
  ]

  return (
    <div className="grid lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
      <ol
        aria-label="How a link sign-in works"
        className="flex flex-col gap-4 border-b bg-surface p-(--card-spacing) md:p-8 lg:border-e lg:border-b-0"
      >
        {steps.map((entry, index) => (
          <li key={entry.title} aria-current={index === step ? "step" : undefined} className="flex items-start gap-3">
            <span
              aria-hidden="true"
              className={cn(
                "flex size-6 shrink-0 items-center justify-center rounded-full border text-xs tabular-nums",
                index < step && "border-transparent bg-foreground text-background",
                index === step && "border-foreground font-semibold"
              )}
            >
              {index + 1}
            </span>
            <span className="flex flex-col gap-0.5">
              <span
                className={cn("text-sm", index === step ? "font-semibold" : index > step && "text-muted-foreground")}
              >
                {entry.title}
                {index < step ? <span className="sr-only"> (done)</span> : null}
              </span>
              <span className="text-xs text-muted-foreground">{entry.detail}</span>
            </span>
          </li>
        ))}
      </ol>

      <div className="flex flex-col gap-4 p-(--card-spacing) md:p-8">
        {sentTo ? (
          <div className="flex max-w-md flex-col items-start gap-4">
            <span
              aria-hidden="true"
              className="flex size-9 items-center justify-center rounded-lg bg-surface ring-1 ring-border"
            >
              <MailIcon className="size-4" />
            </span>
            <h3 ref={heading} tabIndex={-1} className="text-base font-semibold outline-none">
              Check your inbox
            </h3>
            <p className="text-sm text-pretty text-muted-foreground">
              A link is on its way to <span className="font-medium text-foreground">{sentTo}</span>. It signs you in
              once, for the next {minutes} minutes.
            </p>
            <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
              {/* Off while the wait runs and while it sends, but it keeps the focus it was pressed with. */}
              <Button
                type="button"
                variant="outline"
                disabled={!ready || pending}
                focusableWhenDisabled
                aria-busy={pending || undefined}
                onClick={() => void request(sentTo)}
              >
                {pending ? <Spinner aria-hidden="true" /> : null}
                Send another link
              </Button>
              {until && !ready ? (
                <span className="flex items-center gap-1.5 text-sm text-muted-foreground">
                  You can ask for another in
                  <Countdown
                    to={until}
                    format="clock"
                    onComplete={() => {
                      setReady(true)
                      setSaid("You can ask for another link now.")
                    }}
                    valueClassName="text-sm font-medium"
                  />
                </span>
              ) : null}
            </div>
            <Button
              type="button"
              variant="link"
              className="h-auto p-0"
              onClick={() => {
                moved.current = "field"
                setSentTo(null)
                setSaid("")
                setRefusal(null)
              }}
            >
              Use a different address
            </Button>
          </div>
        ) : (
          <form
            noValidate
            onSubmit={submit}
            aria-label="Email me a sign-in link"
            className="flex max-w-md flex-col gap-4"
          >
            <Field>
              <FieldLabel htmlFor={`${uid}-email`}>
                Work email <span className="font-normal text-muted-foreground">(required)</span>
              </FieldLabel>
              <div className="flex flex-col gap-2 sm:flex-row">
                <Input
                  ref={field}
                  id={`${uid}-email`}
                  type="email"
                  autoComplete="email"
                  placeholder="name@example.com"
                  required
                  value={email}
                  aria-invalid={error ? true : undefined}
                  aria-describedby={[`${uid}-hint`, error ? `${uid}-error` : ""].filter(Boolean).join(" ")}
                  onChange={(event) => {
                    setEmail(event.target.value)
                    setError(null)
                  }}
                />
                <Button
                  type="submit"
                  className="shrink-0"
                  disabled={pending}
                  focusableWhenDisabled
                  aria-busy={pending || undefined}
                >
                  {pending ? <Spinner aria-hidden="true" /> : null}
                  Email me a link
                </Button>
              </div>
              <FieldDescription id={`${uid}-hint`}>We never say whether an address has an account.</FieldDescription>
              {error ? <FieldError id={`${uid}-error`}>{error}</FieldError> : null}
            </Field>
          </form>
        )}
        {refusal ? (
          <Callout variant="danger" role="alert" title="The link was not sent" className="max-w-md">
            {refusal}
          </Callout>
        ) : null}
        <p role="status" aria-live="polite" className="flex min-h-5 items-start gap-2 text-sm">
          {said ? (
            <>
              <CircleCheckIcon aria-hidden="true" className="mt-0.5 size-4 shrink-0 text-success" />
              {said}
            </>
          ) : null}
        </p>
      </div>
    </div>
  )
}

/**
 * What `sign-in-forms-02` needs: how long a sign-in link works and how long
 * the page waits before it offers another, and `sendSignInLink`, which the
 * section's server function calls. The auth adapter has no link ceremony of
 * its own — borrowing its password reset for one would mail resets to anyone
 * who asked to sign in — so this is the seam: the address is checked here,
 * and your mailer is called here.
 *
 * No store is read: a sign-in link is about the address the reader types, and
 * the answer never says whether an account exists for it.
 */
import { type AuthResult } from "@/lib/auth-adapter"
import { isEmail } from "@/lib/validation"

export type { AuthResult }

/** How long a link signs a reader in for, in minutes. */
export const LINK_MINUTES = 15

/** How long the page waits before it offers to send another link, in seconds. */
export const RESEND_SECONDS = 30

/** The longest an address can be (RFC 5321); a longer one never reaches the email pattern. */
const MAX_EMAIL = 254

/**
 * Sends a single-use sign-in link. It answers the same for every address in
 * the shape of one — registered or not — because saying which addresses have
 * accounts is how a list of them gets collected. The types are erased at the
 * action boundary, so anything but text of an address's length is refused,
 * never thrown on.
 */
export async function sendSignInLink(email: string): Promise<AuthResult<{ sentTo: string; minutes: number }>> {
  const address = typeof email === "string" ? email.trim().toLowerCase() : ""
  if (address.length > MAX_EMAIL || !isEmail(address))
    return {
      ok: false,
      error: { code: "invalid_input", field: "email", message: "Enter your work email, like name@example.com." },
    }
  return { ok: true, data: { sentTo: address, minutes: LINK_MINUTES } }
}

import * as React from "react"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

import { SsoSignIn } from "./sign-in-forms-03.client"
import { OTHER_WAYS, findWorkspace, startSingleSignOn } from "./sign-in-forms-03.data"

/**
 * Company single sign-on, in one narrow framed card: the work email first,
 * and from its domain the workspace it belongs to — named, with the way to
 * its identity provider, or an answer in words for why that address signs in
 * some other way.
 *
 * A server component. It hands the island two server functions defined here:
 * `find`, which looks the domain up among the companies on the books, and
 * `start`, which looks it up again before it starts anything.
 */
export function SignInForms03() {
  const titleId = React.useId()

  async function find(email: string) {
    "use server"
    return findWorkspace(email)
  }

  async function start(domain: string) {
    "use server"
    return startSingleSignOn(domain)
  }

  return (
    <section
      data-section="sign-in-forms-03"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        {/* An address-first sign-in is one column of decisions: the card holds to it. */}
        <Card className="mx-auto max-w-lg">
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>Sign in with your company</h2>
            </CardTitle>
            <CardDescription>Single sign-on, found from your work email.</CardDescription>
          </CardHeader>
          <CardContent className="md:p-6">
            <SsoSignIn otherWays={OTHER_WAYS} find={find} start={start} />
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default SignInForms03

"use client"

import * as React from "react"
import Link from "next/link"
import { ArrowRightIcon, CircleCheckIcon } from "lucide-react"

import { isEmail } from "@/lib/validation"
import { Button, buttonVariants } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Spinner } from "@/components/ui/spinner"

import type { AuthResult, Verdict } from "./sign-in-forms-03.data"

export type SsoSignInProps = {
  otherWays: { password: string; link: string }
  find: (email: string) => Promise<AuthResult<Verdict>>
  start: (domain: string) => Promise<AuthResult<{ company: string }>>
}

/** What each answer says, in a heading and a line, and the tone it is drawn in. */
function explain(verdict: Verdict): { title: string; detail: string; tone: "default" | "warning" } {
  switch (verdict.kind) {
    case "password":
      return {
        title: `${verdict.company} signs in with a password`,
        detail: `Its workspace is on ${verdict.plan}, and single sign-on comes with ${verdict.ssoPlan}.`,
        tone: "default",
      }
    case "suspended":
      return {
        title: `${verdict.company}'s workspace is suspended`,
        detail:
          "Single sign-on is off until an admin settles the account. Ask the person who runs Northwind for your team.",
        tone: "warning",
      }
    case "cancelled":
      return {
        title: `${verdict.company} closed its workspace`,
        detail: "There is nothing to sign in to. An admin can reopen it from the billing page.",
        tone: "default",
      }
    default:
      return {
        title: `No workspace signs in with single sign-on for @${verdict.domain}`,
        detail: "Your address may belong to a workspace that uses a password, or none yet.",
        tone: "default",
      }
  }
}

/**
 * Single sign-on, found by address: the work email first, and from its domain
 * the workspace it belongs to. A workspace that uses its own identity
 * provider is named, with the button that goes there; any other answer says
 * why in words — a plan without single sign-on, a suspended or closed
 * workspace, a domain nobody uses — and offers the other ways in. The answer
 * takes the focus and is said in the status line; the address is kept.
 */
export function SsoSignIn({ otherWays, find, start }: SsoSignInProps) {
  const uid = React.useId()
  const [email, setEmail] = React.useState("")
  const [error, setError] = React.useState<string | null>(null)
  const [refusal, setRefusal] = React.useState<string | null>(null)
  const [pending, setPending] = React.useState(false)
  const [verdict, setVerdict] = React.useState<Verdict | null>(null)
  const [said, setSaid] = React.useState({ text: "", good: false, shown: false })
  const answer = React.useRef<HTMLHeadingElement>(null)
  const field = React.useRef<HTMLInputElement>(null)
  const moved = React.useRef<"answer" | "field" | null>(null)

  React.useEffect(() => {
    const target = moved.current
    moved.current = null
    if (target === "answer") answer.current?.focus()
    if (target === "field") field.current?.focus()
  }, [verdict])

  async function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setRefusal(null)
    if (!isEmail(email.trim())) {
      setError("Enter your work email, like name@example.com.")
      return field.current?.focus()
    }
    setError(null)
    setPending(true)
    let result: AuthResult<Verdict>
    try {
      result = await find(email)
    } catch {
      // The call never arrived — a dropped connection, or a page older than the server.
      result = { ok: false, error: { code: "unknown", message: "Your address did not reach the server. Try again." } }
    } finally {
      setPending(false)
    }
    if (!result.ok) {
      if (result.error.field !== "email") return setRefusal(result.error.message)
      setError(result.error.message)
      return field.current?.focus()
    }
    moved.current = "answer"
    setVerdict(result.data)
    setSaid(
      result.data.kind === "sso"
        ? { text: `Found ${result.data.company}. It signs in through its own identity provider.`, good: true, shown: false }
        : { text: `${explain(result.data).title}.`, good: false, shown: false }
    )
  }

  async function go(domain: string) {
    setRefusal(null)
    setPending(true)
    let result: AuthResult<{ company: string }>
    try {
      result = await start(domain)
    } catch {
      result = { ok: false, error: { code: "unknown", message: "The request did not reach the server. Try again." } }
    } finally {
      setPending(false)
    }
    if (!result.ok) return setRefusal(result.error.message)
    setSaid({
      text: `${result.data.company}'s identity provider would open now, and bring you back to Northwind signed in.`,
      good: true,
      shown: true,
    })
  }

  function again() {
    moved.current = "field"
    setVerdict(null)
    setRefusal(null)
    setSaid({ text: "", good: false, shown: false })
  }

  const others = (
    <div className="flex flex-wrap gap-2">
      <Link href={otherWays.password} className={buttonVariants({ variant: "outline", size: "sm" })}>
        Sign in with a password
      </Link>
      <Link href={otherWays.link} className={buttonVariants({ variant: "outline", size: "sm" })}>
        Email me a link
      </Link>
    </div>
  )

  return (
    <div className="flex flex-col gap-5">
      {verdict === null ? (
        <form noValidate onSubmit={submit} aria-label="Find your workspace" className="flex flex-col gap-4">
          <Field>
            <FieldLabel htmlFor={`${uid}-email`}>
              Work email <span className="font-normal text-muted-foreground">(required)</span>
            </FieldLabel>
            <Input
              ref={field}
              id={`${uid}-email`}
              type="email"
              autoComplete="email"
              placeholder="name@example.com"
              required
              value={email}
              aria-invalid={error ? true : undefined}
              aria-describedby={[`${uid}-hint`, error ? `${uid}-error` : ""].filter(Boolean).join(" ")}
              onChange={(event) => {
                setEmail(event.target.value)
                setError(null)
              }}
            />
            <FieldDescription id={`${uid}-hint`}>
              Your company’s domain tells us which workspace is yours.
            </FieldDescription>
            {error ? <FieldError id={`${uid}-error`}>{error}</FieldError> : null}
          </Field>
          {refusal ? (
            <Callout variant="danger" role="alert" title="Your workspace was not looked up">
              {refusal}
            </Callout>
          ) : null}
          <Button type="submit" disabled={pending} focusableWhenDisabled aria-busy={pending || undefined}>
            {pending ? <Spinner aria-hidden="true" /> : null}
            Continue with single sign-on
          </Button>
        </form>
      ) : verdict.kind === "sso" ? (
        <div className="flex flex-col gap-4">
          <div className="flex items-center gap-3">
            <span
              aria-hidden="true"
              className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-foreground text-sm font-semibold text-background"
            >
              {verdict.company.charAt(0)}
            </span>
            <div className="flex min-w-0 flex-col">
              <h3 ref={answer} tabIndex={-1} className="truncate text-sm font-semibold outline-none">
                {verdict.company}
              </h3>
              <p className="text-xs text-muted-foreground tabular-nums">
                {verdict.seats} people sign in through @{verdict.domain}
              </p>
            </div>
          </div>
          {refusal ? (
            <Callout variant="danger" role="alert" title="Single sign-on did not start">
              {refusal}
            </Callout>
          ) : null}
          <Button
            type="button"
            disabled={pending}
            focusableWhenDisabled
            aria-busy={pending || undefined}
            onClick={() => void go(verdict.domain)}
          >
            {pending ? <Spinner aria-hidden="true" /> : null}
            Continue to {verdict.company}
            <ArrowRightIcon aria-hidden="true" data-icon="inline-end" />
          </Button>
        </div>
      ) : (
        <div className="flex flex-col gap-4">
          <Callout
            variant={explain(verdict).tone}
            title={
              <h3 ref={answer} tabIndex={-1} className="outline-none">
                {explain(verdict).title}
              </h3>
            }
          >
            {explain(verdict).detail}
          </Callout>
          {verdict.kind === "password" || verdict.kind === "unknown" ? others : null}
        </div>
      )}

      {verdict ? (
        <p className="text-sm text-muted-foreground">
          Signing in as <span className="font-medium text-foreground">{email.trim().toLowerCase()}</span>.{" "}
          <Button type="button" variant="link" className="h-auto p-0 align-baseline" onClick={again}>
            Use a different email
          </Button>
        </p>
      ) : null}
      {/* An answer the panel above already shows is said aloud only; what the provider would do next is shown too. */}
      <p role="status" aria-live="polite" className={said.shown ? "flex min-h-5 items-start gap-2 text-sm" : "sr-only"}>
        {said.good && said.shown ? <CircleCheckIcon aria-hidden="true" className="mt-0.5 size-4 shrink-0 text-success" /> : null}
        {said.text}
      </p>
    </div>
  )
}

/**
 * What `sign-in-forms-03` looks up: which workspace a work address belongs
 * to, by its domain, among the companies in `db.customers` — and whether
 * that workspace signs in through its own identity provider. Single sign-on
 * comes with the plan in `db.plans` whose features include it, so a company
 * on any other plan signs in with a password; a suspended or cancelled
 * workspace has it switched off. `findWorkspace` and `startSingleSignOn` are
 * what the section's server functions call; the second looks the domain up
 * again rather than trusting the page.
 *
 * Selectors and checks, reading `db` inside functions on the server. The
 * island takes plain props and never imports this module.
 */
import { type AuthResult } from "@/lib/auth-adapter"
import { db } from "@/lib/sample-data"
import { isEmail } from "@/lib/validation"

export type { AuthResult }

/** The other ways in, for an address whose workspace does not use single sign-on. */
export const OTHER_WAYS = { password: "/sign-in", link: "/sign-in/link" }

/** What an address's domain says about how its owner signs in. */
export type Verdict =
  | { kind: "sso"; domain: string; company: string; seats: number }
  | { kind: "password"; domain: string; company: string; plan: string; ssoPlan: string }
  | { kind: "suspended" | "cancelled"; domain: string; company: string }
  | { kind: "unknown"; domain: string }

const PLAN_NAMES: Record<string, string> = { free: "Free", starter: "Starter", team: "Team", enterprise: "Enterprise" }

/** The plan single sign-on comes with: the one whose features name it. */
export function ssoPlan(): string {
  return db.plans.all().find((plan) => plan.features.some((feature) => /\bSSO\b/.test(feature)))?.name ?? "Enterprise"
}

function verdictFor(domain: string): Verdict {
  const customer = db.customers.all().find((row) => row.email.toLowerCase().endsWith(`@${domain}`))
  if (!customer) return { kind: "unknown", domain }
  const company = customer.company
  if (customer.status === "churned") return { kind: "cancelled", domain, company }
  if (customer.status === "suspended") return { kind: "suspended", domain, company }
  const plan = PLAN_NAMES[customer.plan] ?? customer.plan
  const sso = ssoPlan()
  if (plan !== sso) return { kind: "password", domain, company, plan, ssoPlan: sso }
  return { kind: "sso", domain, company, seats: customer.seats }
}

/** The longest an address (RFC 5321) and a domain (RFC 1035) can be; longer ones never reach a pattern. */
const MAX_EMAIL = 254
const MAX_DOMAIN = 253

/**
 * Finds the workspace a work address belongs to, by its domain, and says how
 * its people sign in. The types are erased at the action boundary, so
 * anything but text of an address's length is refused, never thrown on.
 */
export async function findWorkspace(email: string): Promise<AuthResult<Verdict>> {
  const address = typeof email === "string" ? email.trim().toLowerCase() : ""
  if (address.length > MAX_EMAIL || !isEmail(address))
    return {
      ok: false,
      error: { code: "invalid_input", field: "email", message: "Enter your work email, like name@example.com." },
    }
  return { ok: true, data: verdictFor(address.slice(address.indexOf("@") + 1)) }
}

/**
 * Starts the single sign-on for a domain, after looking it up again. Nothing
 * signs in here: this is where a real app redirects to the company's identity
 * provider, and it answers with the company so the page can say where.
 */
export async function startSingleSignOn(domain: string): Promise<AuthResult<{ company: string }>> {
  const name = typeof domain === "string" ? domain.trim().toLowerCase() : ""
  const verdict: Verdict = name && name.length <= MAX_DOMAIN ? verdictFor(name) : { kind: "unknown", domain: "" }
  if (verdict.kind !== "sso")
    return {
      ok: false,
      error: { code: "invalid_credentials", message: "That workspace does not sign in with single sign-on any more." },
    }
  return { ok: true, data: { company: verdict.company } }
}

import * as React from "react"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

import { AccountChooser } from "./sign-in-forms-04.client"
import { OTHER_ACCOUNT_HREF, rememberedAccounts, signInWithPassword, signInWithPasskey } from "./sign-in-forms-04.data"

/**
 * Signing in with a passkey, in one framed card: the accounts this device
 * remembers, each with its face and a passkey button, and the password one
 * press away in the same row — the fallback a missing passkey opens for you.
 *
 * A server component. It reads the remembered accounts through
 * `./sign-in-forms-04.data` and hands the island two server functions defined
 * here, `passkey` and `password`, each of which reads the member again and
 * takes the address from the row.
 */
export function SignInForms04() {
  const titleId = React.useId()

  async function passkey(id: string) {
    "use server"
    return signInWithPasskey(id)
  }

  async function password(id: string, secret: string) {
    "use server"
    return signInWithPassword(id, secret)
  }

  return (
    <section
      data-section="sign-in-forms-04"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <Card className="mx-auto max-w-2xl">
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>Choose an account</h2>
            </CardTitle>
            <CardDescription>Sign in with the passkey on this device, or with a password.</CardDescription>
          </CardHeader>
          <CardContent className="md:px-6">
            <AccountChooser
              accounts={rememberedAccounts()}
              otherAccount={OTHER_ACCOUNT_HREF}
              passkey={passkey}
              password={password}
            />
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default SignInForms04

"use client"

import * as React from "react"
import Link from "next/link"
import { CircleCheckIcon, KeyRoundIcon } from "lucide-react"

import { getInitials } from "@/lib/format"
import { AsyncButton } from "@/components/ui/async-button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import { FieldError, FieldLabel } from "@/components/ui/field"
import { PasswordInput } from "@/components/ui/password-input"
import { Spinner } from "@/components/ui/spinner"

import type { AuthResult, Remembered } from "./sign-in-forms-04.data"

export type AccountChooserProps = {
  accounts: Remembered[]
  otherAccount: string
  passkey: (id: string) => Promise<AuthResult<{ name: string }>>
  password: (id: string, password: string) => Promise<AuthResult<{ name: string }>>
}

/**
 * The accounts this device remembers, each with its face and a passkey
 * button; the password is always one press away. A passkey that is not on
 * this device is refused in the account's own row, and the password field
 * opens there with the focus in it — the way in is never a dead end. What
 * signed in, and how, is said in the status line.
 */
export function AccountChooser({ accounts, otherAccount, passkey, password }: AccountChooserProps) {
  const uid = React.useId()
  const [open, setOpen] = React.useState<string | null>(null)
  const [notices, setNotices] = React.useState<Record<string, { title: string; message: string }>>({})
  const [secret, setSecret] = React.useState("")
  const [error, setError] = React.useState<string | null>(null)
  const [pending, setPending] = React.useState(false)
  const [signedIn, setSignedIn] = React.useState<string | null>(null)
  const [said, setSaid] = React.useState("")
  const focusPassword = React.useRef(false)
  const confirmed = React.useRef<HTMLSpanElement>(null)

  // Signing in swaps the row's buttons (or its password form) for "Signed in";
  // the focus follows, rather than falling to the top of the page.
  React.useEffect(() => {
    if (signedIn) confirmed.current?.focus()
  }, [signedIn])

  React.useEffect(() => {
    if (!focusPassword.current || !open) return
    focusPassword.current = false
    document.getElementById(`${uid}-${open}-password`)?.focus()
  }, [open, uid])

  function fallBack(id: string) {
    focusPassword.current = true
    setOpen(id)
    setSecret("")
    setError(null)
  }

  /** Puts a refusal in the account's row, or takes it away. */
  function notify(id: string, notice: { title: string; message: string } | null) {
    setNotices((all) => {
      const next = { ...all }
      if (notice) next[id] = notice
      else delete next[id]
      return next
    })
  }

  async function tryPasskey(account: Remembered) {
    notify(account.id, null)
    let result: AuthResult<{ name: string }>
    try {
      result = await passkey(account.id)
    } catch {
      // The call never arrived — a dropped connection, or a page older than the server.
      return notify(account.id, {
        title: "You are not signed in",
        message: "The passkey check did not reach the server. Try again.",
      })
    }
    if (!result.ok) {
      // A missing passkey opens the password, the way in that is left; an account that can no longer sign in
      // at all is told so, with no password to try.
      if (result.error.code !== "invalid_credentials")
        return notify(account.id, { title: "This account cannot sign in", message: result.error.message })
      notify(account.id, { title: "Passkey not found", message: result.error.message })
      return fallBack(account.id)
    }
    setOpen(null)
    setSignedIn(account.id)
    setSaid(`Signed in as ${result.data.name} with the passkey on this device.`)
  }

  async function submit(event: React.FormEvent<HTMLFormElement>, account: Remembered) {
    event.preventDefault()
    if (!secret) {
      setError("Enter the password.")
      return document.getElementById(`${uid}-${account.id}-password`)?.focus()
    }
    setError(null)
    notify(account.id, null)
    setPending(true)
    let result: AuthResult<{ name: string }>
    try {
      result = await password(account.id, secret)
    } catch {
      return notify(account.id, {
        title: "You are not signed in",
        message: "Your password did not reach the server. Try again.",
      })
    } finally {
      setPending(false)
    }
    if (!result.ok) {
      if (result.error.field !== "password") {
        setOpen(null)
        return notify(account.id, { title: "This account cannot sign in", message: result.error.message })
      }
      setError(result.error.message)
      return document.getElementById(`${uid}-${account.id}-password`)?.focus()
    }
    setSignedIn(account.id)
    setOpen(null)
    setSaid(`Signed in as ${result.data.name} with a password.`)
  }

  return (
    <div className="flex flex-col gap-4">
      <ul aria-label="Accounts on this device" className="flex flex-col divide-y border-y">
        {accounts.map((account) => (
          <li key={account.id} className="flex flex-col gap-3 py-4">
            <div className="flex flex-wrap items-center gap-3">
              <Avatar size="lg">
                <AvatarImage src={account.face} alt="" />
                <AvatarFallback>{getInitials(account.name)}</AvatarFallback>
              </Avatar>
              <div className="flex min-w-0 flex-1 basis-40 flex-col">
                <span className="truncate text-sm font-medium">{account.name}</span>
                <span className="truncate text-xs text-muted-foreground">
                  {account.email} · here {account.lastHere}
                </span>
              </div>
              {signedIn === account.id ? (
                <span ref={confirmed} tabIndex={-1} className="flex items-center gap-1.5 text-xs text-success outline-none">
                  <CircleCheckIcon aria-hidden="true" className="size-4" />
                  Signed in
                </span>
              ) : (
                <div className="flex items-center gap-1">
                  {/* A passkey is offered only where this device holds one; the password is always there. */}
                  {account.hasPasskey ? (
                    <AsyncButton
                      type="button"
                      size="sm"
                      aria-label={`Use passkey for ${account.name}`}
                      onClick={() => tryPasskey(account)}
                    >
                      <KeyRoundIcon aria-hidden="true" data-icon="inline-start" />
                      Use passkey
                    </AsyncButton>
                  ) : null}
                  <Button
                    type="button"
                    variant={account.hasPasskey ? "ghost" : "outline"}
                    size="sm"
                    aria-expanded={open === account.id}
                    aria-controls={open === account.id ? `${uid}-${account.id}-form` : undefined}
                    aria-label={`Use password for ${account.name}`}
                    onClick={() => (open === account.id ? setOpen(null) : fallBack(account.id))}
                  >
                    Password
                  </Button>
                </div>
              )}
            </div>
            {notices[account.id] ? (
              <Callout variant="danger" role="alert" title={notices[account.id].title}>
                {notices[account.id].message}
              </Callout>
            ) : null}
            {open === account.id ? (
              <form
                id={`${uid}-${account.id}-form`}
                noValidate
                onSubmit={(event) => void submit(event, account)}
                className="flex flex-col gap-2"
              >
                {/* Whose password this is, for a password manager: the address is on the row above. */}
                <input type="text" name="username" autoComplete="username" value={account.email} readOnly hidden />
                <FieldLabel htmlFor={`${uid}-${account.id}-password`}>
                  Password for {account.name.split(" ")[0]}{" "}
                  <span className="font-normal text-muted-foreground">(required)</span>
                </FieldLabel>
                <div className="flex gap-2">
                  <PasswordInput
                    id={`${uid}-${account.id}-password`}
                    required
                    value={secret}
                    aria-invalid={error ? true : undefined}
                    aria-describedby={error ? `${uid}-${account.id}-error` : undefined}
                    onChange={(event) => {
                      setSecret(event.target.value)
                      setError(null)
                    }}
                  />
                  <Button type="submit" disabled={pending} focusableWhenDisabled aria-busy={pending || undefined}>
                    {pending ? <Spinner aria-hidden="true" /> : null}
                    Sign in
                  </Button>
                </div>
                {error ? <FieldError id={`${uid}-${account.id}-error`}>{error}</FieldError> : null}
              </form>
            ) : null}
          </li>
        ))}
      </ul>
      <p role="status" aria-live="polite" className="flex min-h-5 items-start gap-2 text-sm">
        {said ? (
          <>
            <CircleCheckIcon aria-hidden="true" className="mt-0.5 size-4 shrink-0 text-success" />
            {said}
          </>
        ) : null}
      </p>
      <p className="flex flex-wrap items-center justify-between gap-2 text-xs text-muted-foreground">
        <span>
          In this demo, a person with a second factor has a passkey here, and any password works except{" "}
          <span className="font-mono text-foreground">wrong</span>.
        </span>
        <Link href={otherAccount} className="text-sm text-foreground underline underline-offset-4">
          Use another account
        </Link>
      </p>
    </div>
  )
}