makersclaw 0.2.0 → 0.3.0

package/registry/blocks/auth-form/auth-form.jsx

@@ -0,0 +1,568 @@
+"use client";
+
+import { useId, useState } from "react";
+import { Button, Card, Checkbox, Field, Icon, Input, Notice, PasswordInput, Select, Separator, cx } from "../../ui";
+
+// AuthForm — the screens around an account: sign in, sign up, a magic
+// link, a reset link, and changing a password. It draws the form and
+// holds its state; the auth itself is the caller's. Every submit goes out
+// through an async callback that returns { ok } or { ok: false, error },
+// and the form shows the error. See README.md beside this file.
+
+const PROVIDERS = {
+  google: { label: "Google", icon: "google" },
+  github: { label: "GitHub", icon: "github" },
+  apple: { label: "Apple", icon: "apple" },
+  microsoft: { label: "Microsoft", icon: "microsoft" },
+  sso: { label: "single sign-on (SSO)", icon: "key" },
+};
+
+/** The default rules a new password is checked against. */
+export const PASSWORD_RULES = [
+  { label: "At least 8 characters", test: (v) => v.length >= 8 },
+  { label: "An uppercase letter (A–Z)", test: (v) => /[A-Z]/.test(v) },
+  { label: "A lowercase letter (a–z)", test: (v) => /[a-z]/.test(v) },
+  { label: "A number (0–9)", test: (v) => /\d/.test(v) },
+  { label: "A symbol, like ! ? # or %", test: (v) => /[^A-Za-z0-9\s]/.test(v) },
+];
+
+const COPY = {
+  "sign-in": {
+    title: "Sign in",
+    description: "Welcome back. Enter your details to continue.",
+    submit: "Sign in",
+    verb: "Sign in with",
+  },
+  "sign-up": {
+    title: "Create your account",
+    description: "Start with your name and work email.",
+    submit: "Create account",
+    verb: "Sign up with",
+  },
+  "magic-link": {
+    title: "Sign in with a link",
+    description: "We email you a link that signs you in. No password to remember.",
+    submit: "Email me a link",
+    verb: "Continue with",
+  },
+  reset: {
+    title: "Reset your password",
+    description: "Enter the email you signed up with and we send you a link to choose a new one.",
+    submit: "Send reset link",
+    verb: "Continue with",
+  },
+  "change-password": {
+    title: "Change password",
+    description: "Choose a strong password you do not use anywhere else.",
+    submit: "Update password",
+    verb: "Continue with",
+  },
+};
+
+const MODES = Object.keys(COPY);
+
+const DEFAULT_FIELDS = [{ name: "name", label: "Full name", autoComplete: "name", required: true }];
+
+function providerOf(p) {
+  const id = typeof p === "string" ? p : p.id;
+  const known = PROVIDERS[id] ?? {};
+  return { id, label: (typeof p === "object" && p.label) || known.label || id, icon: (typeof p === "object" && p.icon) || known.icon || "log-in" };
+}
+
+// A link to another screen: an href (a route) or a function (switch in place).
+function Go({ to, children }) {
+  if (!to) return null;
+  return typeof to === "function" ? (
+    <Button variant="link" size="inherit" onClick={to}>
+      {children}
+    </Button>
+  ) : (
+    <Button variant="link" size="inherit" href={to}>
+      {children}
+    </Button>
+  );
+}
+
+function failure(result) {
+  return result && result.ok === false ? result.error || "That did not work. Try again." : null;
+}
+
+async function attempt(fn) {
+  try {
+    return failure(await fn());
+  } catch (e) {
+    return e?.message || String(e);
+  }
+}
+
+/** The password rules as a live checklist: met rules turn on as you type. */
+function RuleList({ rules, value, id }) {
+  return (
+    <ul id={id} className="grid gap-1.5" aria-label="Password rules">
+      {rules.map((rule) => {
+        const met = Boolean(rule.test(value));
+        return (
+          <li key={rule.label} className={cx("flex items-center gap-2 text-sm", met ? "text-foreground" : "text-muted-foreground")}>
+            <Icon name={met ? "circle-check" : "circle"} size={16} className={cx("shrink-0", met ? "text-success" : "text-muted-foreground")} />
+            <span>{rule.label}</span>
+            <span className="sr-only">{met ? "(met)" : "(not met yet)"}</span>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export function AuthForm({
+  mode = "sign-in",
+  onSubmit,
+  providers = [],
+  onProvider,
+  providersFirst = false,
+  password = true,
+  remember = false,
+  fields = DEFAULT_FIELDS,
+  confirm = true,
+  rules,
+  requireCurrent = true,
+  acceptTerms = false,
+  newsletter,
+  links = {},
+  onCancel,
+  logo,
+  title,
+  description,
+  submitLabel,
+  layout = "card",
+  defaultEmail = "",
+  tips,
+  className,
+}) {
+  const m = MODES.includes(mode) ? mode : "sign-in";
+  const copy = COPY[m];
+  const uid = useId();
+  const idOf = (name) => `${uid}-${name}`;
+
+  const signUp = m === "sign-up";
+  const change = m === "change-password";
+  const emailOnly = m === "magic-link" || m === "reset";
+  const askPassword = (m === "sign-in" && password) || signUp;
+  const newRules = rules === false ? [] : rules ?? (change ? PASSWORD_RULES : []);
+  const extra = signUp ? fields ?? [] : [];
+
+  const [values, setValues] = useState(() => ({ email: defaultEmail, remember: false, terms: false, newsletter: false }));
+  const [errors, setErrors] = useState({});
+  const [error, setError] = useState(null);
+  const [busy, setBusy] = useState(null); // "submit" or a provider id
+  const [sent, setSent] = useState(null); // the email a link went to
+  const [done, setDone] = useState(false);
+
+  const set = (name) => (e) => {
+    const v = e?.target ? (e.target.type === "checkbox" ? e.target.checked : e.target.value) : e;
+    setValues((s) => ({ ...s, [name]: v }));
+    if (errors[name]) setErrors((s) => ({ ...s, [name]: undefined }));
+    if (done) setDone(false);
+  };
+
+  const newPassword = String((change ? values.newPassword : values.password) ?? "");
+  const choosing = signUp || change; // a new password is being chosen
+
+  async function submit(e) {
+    e.preventDefault();
+    if (busy) return;
+    setError(null);
+    const next = {};
+    if (choosing && newRules.length && !newRules.every((r) => r.test(newPassword))) {
+      next[change ? "newPassword" : "password"] = "Meet every rule in the list.";
+    }
+    if (choosing && confirm && values.confirm !== newPassword) next.confirm = "The two passwords do not match.";
+    if (change && requireCurrent && values.currentPassword && values.currentPassword === newPassword) {
+      next.newPassword = "Choose a password different from the current one.";
+    }
+    if (signUp && acceptTerms && !values.terms) next.terms = "Agree to the terms to continue.";
+    setErrors(next);
+    if (Object.values(next).some(Boolean)) return;
+
+    const payload = {};
+    if (!change) payload.email = values.email.trim();
+    if (askPassword) payload.password = values.password ?? "";
+    if (m === "sign-in" && remember) payload.remember = Boolean(values.remember);
+    for (const f of extra) payload[f.name] = values[f.name] ?? (f.type === "select" ? f.options?.[0]?.value ?? "" : "");
+    if (signUp && newsletter) payload.newsletter = Boolean(values.newsletter);
+    if (signUp && acceptTerms) payload.terms = true;
+    if (change) {
+      if (requireCurrent) payload.currentPassword = values.currentPassword ?? "";
+      payload.newPassword = newPassword;
+    }
+
+    setBusy("submit");
+    const failed = await attempt(() => onSubmit?.(payload, m));
+    setBusy(null);
+    if (failed) {
+      setError(failed);
+      return;
+    }
+    if (emailOnly) setSent(payload.email);
+    if (change) {
+      setDone(true);
+      setValues((s) => ({ ...s, currentPassword: "", newPassword: "", confirm: "" }));
+    }
+  }
+
+  async function provider(id) {
+    if (busy) return;
+    setError(null);
+    setBusy(id);
+    const failed = await attempt(() => onProvider?.(id));
+    setBusy(null);
+    if (failed) setError(failed);
+  }
+
+  const heading = title ?? copy.title;
+  const lede = description === undefined ? copy.description : description;
+  const list = (providers ?? []).filter(Boolean).map(providerOf);
+  const paired = providersFirst && list.length === 2;
+
+  const providerButtons = list.length ? (
+    <div className={cx("grid gap-2", paired && "sm:grid-cols-2")}>
+      {list.map((p) => (
+        <Button
+          key={p.id}
+          variant="secondary"
+          icon={p.icon}
+          loading={busy === p.id}
+          disabled={Boolean(busy) && busy !== p.id}
+          aria-label={paired ? `${copy.verb} ${p.label}` : undefined}
+          onClick={() => provider(p.id)}
+        >
+          {paired ? p.label : `${copy.verb} ${p.label}`}
+        </Button>
+      ))}
+    </div>
+  ) : null;
+
+  const disabled = Boolean(busy);
+
+  // The screen a link-sending mode shows once the link is on its way.
+  if (sent) {
+    const body = (
+      <div className="grid justify-items-center gap-3 text-center">
+        {logo ? <div className="mb-1 flex">{logo}</div> : null}
+        <span className="grid size-12 place-items-center rounded-full bg-muted text-foreground">
+          <Icon name="mail" size={22} />
+        </span>
+        <h2 className="text-xl font-semibold">Check your email</h2>
+        <p className="text-sm text-muted-foreground">
+          {m === "reset" ? "If an account exists for " : "We sent a sign-in link to "}
+          <span className="font-medium text-foreground">{sent}</span>
+          {m === "reset" ? ", a link to reset the password is on its way." : ". It works once and expires soon."}
+        </p>
+        <Button variant="secondary" className="mt-2 w-full" onClick={() => setSent(null)}>
+          Use a different email
+        </Button>
+        {links["sign-in"] ? (
+          <p className="text-sm text-muted-foreground">
+            <Go to={links["sign-in"]}>Back to sign in</Go>
+          </p>
+        ) : null}
+      </div>
+    );
+    return <Frame layout={layout} className={className}>{body}</Frame>;
+  }
+
+  const forgot = m === "sign-in" && askPassword && links.reset ? <Go to={links.reset}>Forgot password?</Go> : null;
+  const passwordRule = choosing && newRules.length ? idOf("rules") : undefined;
+
+  const form = (
+    <form onSubmit={submit} className="grid gap-4" aria-describedby={error ? idOf("error") : undefined}>
+      {extra.length ? (
+        <div className="grid gap-4 sm:grid-cols-2">
+          {extra.map((f) => (
+            <Field key={f.name} id={idOf(f.name)} label={f.label} hint={f.hint} required={f.required} error={errors[f.name]} className={f.half ? "" : "sm:col-span-2"}>
+              {f.type === "select" ? (
+                <Select id={idOf(f.name)} options={f.options ?? []} value={values[f.name] ?? f.options?.[0]?.value ?? ""} onChange={set(f.name)} disabled={disabled} required={f.required} />
+              ) : (
+                <Input
+                  id={idOf(f.name)}
+                  type={f.type ?? "text"}
+                  autoComplete={f.autoComplete}
+                  placeholder={f.placeholder}
+                  required={f.required}
+                  value={values[f.name] ?? ""}
+                  onChange={set(f.name)}
+                  disabled={disabled}
+                />
+              )}
+            </Field>
+          ))}
+        </div>
+      ) : null}
+
+      {!change ? (
+        <Field id={idOf("email")} label="Email" error={errors.email}>
+          <Input
+            id={idOf("email")}
+            type="email"
+            autoComplete={signUp ? "email" : "username"}
+            inputMode="email"
+            placeholder="you@company.com"
+            required
+            value={values.email}
+            onChange={set("email")}
+            disabled={disabled}
+          />
+        </Field>
+      ) : null}
+
+      {change && requireCurrent ? (
+        <Field id={idOf("currentPassword")} label="Current password" error={errors.currentPassword}>
+          <PasswordInput id={idOf("currentPassword")} required value={values.currentPassword ?? ""} onChange={set("currentPassword")} disabled={disabled} />
+        </Field>
+      ) : null}
+
+      {askPassword || change ? (
+        <div className="grid gap-1.5">
+          {forgot ? (
+            <div className="flex items-baseline justify-between gap-3">
+              <label htmlFor={idOf("password")} className="text-sm font-medium text-foreground">
+                Password
+              </label>
+              <span className="text-sm">{forgot}</span>
+            </div>
+          ) : null}
+          <Field
+            id={idOf(change ? "newPassword" : "password")}
+            label={forgot ? undefined : change ? "New password" : "Password"}
+            error={errors[change ? "newPassword" : "password"]}
+          >
+            <PasswordInput
+              id={idOf(change ? "newPassword" : "password")}
+              autoComplete={choosing ? "new-password" : "current-password"}
+              required
+              value={(change ? values.newPassword : values.password) ?? ""}
+              onChange={set(change ? "newPassword" : "password")}
+              aria-describedby={passwordRule}
+              disabled={disabled}
+            />
+          </Field>
+        </div>
+      ) : null}
+
+      {choosing && confirm ? (
+        <Field id={idOf("confirm")} label={change ? "Confirm new password" : "Confirm password"} error={errors.confirm}>
+          <PasswordInput id={idOf("confirm")} autoComplete="new-password" required value={values.confirm ?? ""} onChange={set("confirm")} disabled={disabled} />
+        </Field>
+      ) : null}
+
+      {choosing && newRules.length && !change ? <RuleList id={passwordRule} rules={newRules} value={newPassword} /> : null}
+
+      {m === "sign-in" && remember ? (
+        <Checkbox id={idOf("remember")} label={typeof remember === "string" ? remember : "Remember me"} checked={values.remember} onChange={set("remember")} disabled={disabled} />
+      ) : null}
+
+      {signUp && (newsletter || acceptTerms) ? (
+        <div className="grid">
+          {newsletter ? (
+            <Checkbox id={idOf("newsletter")} label={typeof newsletter === "string" ? newsletter : "Send me product news, now and then"} checked={values.newsletter} onChange={set("newsletter")} disabled={disabled} />
+          ) : null}
+          {acceptTerms ? (
+            <>
+              <Checkbox
+                id={idOf("terms")}
+                label={<TermsText links={links} lead="I agree to the" />}
+                checked={values.terms}
+                onChange={set("terms")}
+                disabled={disabled}
+                aria-invalid={errors.terms ? true : undefined}
+              />
+              {errors.terms ? (
+                <p role="alert" className="text-xs text-destructive">
+                  {errors.terms}
+                </p>
+              ) : null}
+            </>
+          ) : null}
+        </div>
+      ) : null}
+
+      {error ? (
+        <div id={idOf("error")}>
+          <Notice tone="danger">{error}</Notice>
+        </div>
+      ) : null}
+      {done ? <Notice tone="success">Password updated. Use the new one next time you sign in.</Notice> : null}
+
+      <div className={cx(change && onCancel ? "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end" : "grid")}>
+        {change && onCancel ? (
+          <Button variant="secondary" onClick={onCancel} disabled={disabled}>
+            Cancel
+          </Button>
+        ) : null}
+        <Button type="submit" variant="primary" loading={busy === "submit"} disabled={disabled && busy !== "submit"}>
+          {submitLabel ?? copy.submit}
+        </Button>
+      </div>
+    </form>
+  );
+
+  const divider = list.length ? <Separator label={providersFirst ? "or with email" : "or"} /> : null;
+
+  const footer = (
+    <FooterLinks mode={m} links={links} acceptTerms={acceptTerms} />
+  );
+
+  const main = (
+    <div className="grid gap-6">
+      <Head logo={logo} title={heading} description={lede} center={layout !== "plain"} />
+      {providersFirst ? providerButtons : null}
+      {providersFirst ? divider : null}
+      {form}
+      {!providersFirst ? divider : null}
+      {!providersFirst ? providerButtons : null}
+      {footer}
+    </div>
+  );
+
+  if (change && newRules.length) {
+    return (
+      <Frame layout={layout} className={className} wide>
+        <div className="grid gap-6 md:grid-cols-[minmax(0,1fr)_minmax(0,18rem)]">
+          <div className="grid content-start gap-6">
+            <Head logo={logo} title={heading} description={lede} icon="shield" />
+            {form}
+          </div>
+          <aside className="grid content-start gap-4 rounded-lg bg-muted p-4" aria-label="Password requirements">
+            <div className="grid gap-1">
+              <h3 className="flex items-center gap-2 text-sm font-semibold">
+                <Icon name="shield-check" size={16} className="text-muted-foreground" />
+                Password requirements
+              </h3>
+              <p className="text-sm text-muted-foreground">Your new password needs every one of these.</p>
+            </div>
+            <RuleList id={passwordRule} rules={newRules} value={newPassword} />
+            {tips?.length ? (
+              <div className="grid gap-2 border-t border-border pt-4">
+                <h4 className="text-sm font-medium">Good habits</h4>
+                <ul className="grid list-disc gap-1 pl-5 text-sm text-muted-foreground">
+                  {tips.map((t) => (
+                    <li key={t}>{t}</li>
+                  ))}
+                </ul>
+              </div>
+            ) : null}
+          </aside>
+        </div>
+      </Frame>
+    );
+  }
+
+  return (
+    <Frame layout={layout} className={className}>
+      {main}
+    </Frame>
+  );
+}
+
+function Head({ logo, title, description, center, icon }) {
+  return (
+    <header className={cx("grid gap-2", center && "justify-items-center text-center")}>
+      {logo ? <div className="mb-1 flex">{logo}</div> : null}
+      {icon && !logo ? (
+        <span className="mb-1 grid size-10 place-items-center rounded-md bg-muted text-foreground">
+          <Icon name={icon} size={20} />
+        </span>
+      ) : null}
+      <h2 className="text-2xl font-semibold leading-tight tracking-tight">{title}</h2>
+      {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+    </header>
+  );
+}
+
+function TermsText({ links, lead }) {
+  const terms = links.terms;
+  const privacy = links.privacy;
+  return (
+    <span>
+      {lead} {terms ? <Go to={terms}>Terms of Service</Go> : "Terms of Service"}
+      {privacy ? (
+        <>
+          {" "}and <Go to={privacy}>Privacy Policy</Go>
+        </>
+      ) : null}
+    </span>
+  );
+}
+
+function FooterLinks({ mode, links, acceptTerms }) {
+  const rows = [];
+  if (mode === "sign-in" && links["sign-up"]) {
+    rows.push(
+      <p key="up">
+        No account yet? <Go to={links["sign-up"]}>Sign up</Go>
+      </p>,
+    );
+  }
+  if (mode === "sign-in" && links["magic-link"]) {
+    rows.push(
+      <p key="ml">
+        <Go to={links["magic-link"]}>Email me a sign-in link instead</Go>
+      </p>,
+    );
+  }
+  if (mode === "magic-link" && links["sign-in"]) {
+    rows.push(
+      <p key="pw">
+        <Go to={links["sign-in"]}>Sign in with a password instead</Go>
+      </p>,
+    );
+  }
+  if (mode === "magic-link" && links["sign-up"]) {
+    rows.push(
+      <p key="up">
+        First time here? <Go to={links["sign-up"]}>Create an account</Go>
+      </p>,
+    );
+  }
+  if (mode === "sign-up" && links["sign-in"]) {
+    rows.push(
+      <p key="in">
+        Already have an account? <Go to={links["sign-in"]}>Sign in</Go>
+      </p>,
+    );
+  }
+  if (mode === "reset" && links["sign-in"]) {
+    rows.push(
+      <p key="in">
+        Remembered it? <Go to={links["sign-in"]}>Back to sign in</Go>
+      </p>,
+    );
+  }
+  const legal = !acceptTerms && mode !== "change-password" && (links.terms || links.privacy);
+  if (!rows.length && !legal) return null;
+  return (
+    <div className="grid gap-3 text-center text-sm text-muted-foreground">
+      {rows}
+      {legal ? (
+        <p className="text-xs">
+          <TermsText links={links} lead="By continuing, you agree to our" />.
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+// Where the form sits: a card (the default), plain (in your own column),
+// or page (centred in the window, for a route of its own).
+function Frame({ layout, wide, className, children }) {
+  const width = wide ? "max-w-3xl" : "max-w-sm";
+  if (layout === "plain") return <div className={cx("w-full", width, className)}>{children}</div>;
+  const card = (
+    <Card className={cx("w-full p-6 sm:p-8", width, layout !== "page" && className)} padding="none">
+      {children}
+    </Card>
+  );
+  if (layout === "page") {
+    return <div className={cx("grid min-h-dvh w-full place-items-center px-4 py-10", className)}>{card}</div>;
+  }
+  return card;
+}

package/registry/blocks/auth-form/block.json

@@ -0,0 +1,10 @@
+{
+  "name": "auth-form",
+  "title": "AuthForm",
+  "description": "The account screens in one form: sign in (password, email only, or provider buttons for Google, GitHub, Apple and Microsoft), sign up with extra fields, a magic link, a reset link, and changing a password against a live rules checklist. The auth is yours: each submit is an async callback that returns { ok } or an error the form shows.",
+  "useWhen": "An app needs a sign-in, sign-up, forgot-password or change-password screen, or a settings page where a signed-in person changes their password.",
+  "tags": ["auth", "login", "sign in", "sign up", "register", "password", "reset password", "forgot password", "change password", "magic link", "oauth", "google", "github", "sso", "account"],
+  "exports": ["AuthForm", "PASSWORD_RULES"],
+  "files": ["index.js", "auth-form.jsx"],
+  "requires": []
+}