@flaredev/cli 0.2.0 → 0.3.0

package/templates/app/components/auth/sign-up-form.tsx

@@ -1,101 +1,93 @@
-"use client";
-
-import { useState } from "react";
-import { MailIcon } from "lucide-react";
-import { authClient } from "@/lib/auth-client";
-import type { SocialProvider } from "@/lib/auth-config";
-import { authErrorMessage } from "./sign-in-flow";
-import { SocialButtons } from "./social-buttons";
-import { AuthInput, AuthLabel, Divider, FormMessage, PrimaryButton } from "./ui";
-
-interface Props {
-  providers: SocialProvider[];
-  socialPlacement: "before" | "after";
-  socialStyle: "full" | "icon";
-  next: string;
-  /** With email verification required, sign-up ends on "check your email". */
-  verifyFirst: boolean;
-}
-
-export function SignUpForm({ providers, socialPlacement, socialStyle, next, verifyFirst }: Props) {
-  const [values, setValues] = useState({ name: "", email: "", password: "" });
-  const [pending, setPending] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [sent, setSent] = useState(false);
-  const set = (key: keyof typeof values) => (event: React.ChangeEvent<HTMLInputElement>) => setValues({ ...values, [key]: event.target.value });
-
-  const submit = async (event: React.FormEvent) => {
-    event.preventDefault();
-    setError(null);
-    if (values.password.length < 8) return setError("Use at least 8 characters for your password.");
-    setPending(true);
-    const { error } = await authClient.signUp.email({ ...values, callbackURL: next });
-    setPending(false);
-    if (error) return setError(authErrorMessage(error));
-    if (verifyFirst) return setSent(true);
-    window.location.href = next;
-  };
-
-  if (sent) {
-    return (
-      <div className="flex flex-col gap-4 text-center">
-        <span className="mx-auto grid size-12 place-items-center rounded-full bg-brand/15 text-link">
-          <MailIcon className="size-6" />
-        </span>
-        <p className="text-base font-medium">Check your email</p>
-        <p className="text-sm text-foreground-muted">
-          We sent a link to <span className="font-medium text-foreground">{values.email}</span>. Open it to verify your address and sign in.
-        </p>
-      </div>
-    );
-  }
-
-  const social = <SocialButtons providers={providers} variant={socialStyle} next={next} onError={setError} />;
-  return (
-    <div className="flex flex-col gap-4">
-      {providers.length > 0 && socialPlacement === "before" && (
-        <>
-          {social}
-          <Divider />
-        </>
-      )}
-      <form className="flex flex-col gap-4" onSubmit={submit}>
-        <div className="flex flex-col gap-2">
-          <AuthLabel htmlFor="name">Name</AuthLabel>
-          <AuthInput id="name" name="name" autoComplete="name" value={values.name} onChange={set("name")} required autoFocus />
-        </div>
-        <div className="flex flex-col gap-2">
-          <AuthLabel htmlFor="email">Email</AuthLabel>
-          <AuthInput id="email" name="email" type="email" autoComplete="email" placeholder="you@example.com" value={values.email} onChange={set("email")} required />
-        </div>
-        <div className="flex flex-col gap-2">
-          <AuthLabel htmlFor="password">Password</AuthLabel>
-          <AuthInput
-            id="password"
-            name="password"
-            type="password"
-            autoComplete="new-password"
-            value={values.password}
-            onChange={set("password")}
-            required
-            minLength={8}
-            aria-describedby="password-hint"
-          />
-          <p id="password-hint" className="text-xs text-foreground-muted">
-            At least 8 characters.
-          </p>
-        </div>
-        <FormMessage>{error}</FormMessage>
-        <PrimaryButton type="submit" pending={pending}>
-          Create account
-        </PrimaryButton>
-      </form>
-      {providers.length > 0 && socialPlacement === "after" && (
-        <>
-          <Divider />
-          {social}
-        </>
-      )}
-    </div>
-  );
-}
+"use client";
+
+import { useState } from "react";
+import { MailIcon } from "lucide-react";
+import { authClient } from "@/lib/auth-client";
+import type { SocialProvider } from "@/lib/auth-config";
+import { checkPassword } from "@/lib/password-rules";
+import { PasswordField } from "./password-field";
+import { authErrorMessage } from "./sign-in-flow";
+import { SocialButtons } from "./social-buttons";
+import { AuthInput, AuthLabel, Divider, FormMessage, PrimaryButton } from "./ui";
+
+interface Props {
+  providers: SocialProvider[];
+  socialPlacement: "before" | "after";
+  socialStyle: "full" | "icon";
+  next: string;
+  /** With email verification required, sign-up ends on "check your email". */
+  verifyFirst: boolean;
+}
+
+export function SignUpForm({ providers, socialPlacement, socialStyle, next, verifyFirst }: Props) {
+  const [values, setValues] = useState({ name: "", email: "", password: "" });
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [sent, setSent] = useState(false);
+  const set = (key: keyof typeof values) => (event: React.ChangeEvent<HTMLInputElement>) => setValues({ ...values, [key]: event.target.value });
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setError(null);
+    const check = checkPassword(values.password, [values.email, values.name]);
+    if (!check.valid) return setError(check.advice ?? "That password is too short.");
+    setPending(true);
+    const { error } = await authClient.signUp.email({ ...values, callbackURL: next });
+    setPending(false);
+    if (error) return setError(authErrorMessage(error));
+    if (verifyFirst) return setSent(true);
+    window.location.href = next;
+  };
+
+  if (sent) {
+    return (
+      <div className="flex flex-col gap-4 text-center">
+        <span className="mx-auto grid size-12 place-items-center rounded-full bg-brand/15 text-link">
+          <MailIcon className="size-6" />
+        </span>
+        <p className="text-base font-medium">Check your email</p>
+        <p className="text-sm text-foreground-muted">
+          We sent a link to <span className="font-medium text-foreground">{values.email}</span>. Open it to verify your address and sign in.
+        </p>
+      </div>
+    );
+  }
+
+  const social = <SocialButtons providers={providers} variant={socialStyle} next={next} onError={setError} />;
+  return (
+    <div className="flex flex-col gap-4">
+      {providers.length > 0 && socialPlacement === "before" && (
+        <>
+          {social}
+          <Divider />
+        </>
+      )}
+      <form className="flex flex-col gap-4" onSubmit={submit}>
+        <div className="flex flex-col gap-2">
+          <AuthLabel htmlFor="name">Name</AuthLabel>
+          <AuthInput id="name" name="name" autoComplete="name" value={values.name} onChange={set("name")} required autoFocus />
+        </div>
+        <div className="flex flex-col gap-2">
+          <AuthLabel htmlFor="email">Email</AuthLabel>
+          <AuthInput id="email" name="email" type="email" autoComplete="email" placeholder="you@example.com" value={values.email} onChange={set("email")} required />
+        </div>
+        <PasswordField
+          id="password"
+          value={values.password}
+          onChange={(password) => setValues({ ...values, password })}
+          avoid={[values.email, values.name]}
+        />
+        <FormMessage>{error}</FormMessage>
+        <PrimaryButton type="submit" pending={pending}>
+          Create account
+        </PrimaryButton>
+      </form>
+      {providers.length > 0 && socialPlacement === "after" && (
+        <>
+          <Divider />
+          {social}
+        </>
+      )}
+    </div>
+  );
+}

package/templates/app/components/auth/two-factor-form.tsx

@@ -1,124 +1,139 @@
-"use client";
-
-import { useState } from "react";
-import { authClient } from "@/lib/auth-client";
-import { cn } from "@/lib/utils";
-import { authErrorMessage } from "./sign-in-flow";
-import { AuthInput, AuthLabel, FormMessage, PrimaryButton, TextButton } from "./ui";
-
-type Method = "authenticator" | "email" | "backup";
-
-interface Props {
-  methods: { authenticator: boolean; email: boolean };
-  next: string;
-}
-
-const LABELS: Record<Method, string> = { authenticator: "Authenticator app", email: "Email code", backup: "Backup code" };
-
-/** The second step of a password sign-in: an authenticator code, an emailed code, or a backup code. */
-export function TwoFactorForm({ methods, next }: Props) {
-  const available: Method[] = [...(methods.authenticator ? (["authenticator"] as const) : []), ...(methods.email ? (["email"] as const) : []), "backup"];
-  const [method, setMethod] = useState<Method>(available[0]!);
-  const [code, setCode] = useState("");
-  const [trust, setTrust] = useState(false);
-  const [pending, setPending] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [sent, setSent] = useState(false);
-
-  const choose = (item: Method) => {
-    setMethod(item);
-    setCode("");
-    setError(null);
-  };
-
-  const sendEmail = async () => {
-    setPending(true);
-    setError(null);
-    const { error } = await authClient.twoFactor.sendOtp();
-    setPending(false);
-    if (error) return setError(authErrorMessage(error));
-    setSent(true);
-  };
-
-  const verify = async (event: React.FormEvent) => {
-    event.preventDefault();
-    setPending(true);
-    setError(null);
-    const body = { code: code.trim(), trustDevice: trust };
-    const { error } =
-      method === "authenticator"
-        ? await authClient.twoFactor.verifyTotp(body)
-        : method === "email"
-          ? await authClient.twoFactor.verifyOtp(body)
-          : await authClient.twoFactor.verifyBackupCode(body);
-    setPending(false);
-    if (error) return setError(authErrorMessage(error));
-    window.location.href = next;
-  };
-
-  const waitingForEmail = method === "email" && !sent;
-
-  return (
-    <form className="flex flex-col gap-4" onSubmit={verify}>
-      {available.length > 1 && (
-        <div role="tablist" aria-label="Verify with" className="grid auto-cols-fr grid-flow-col gap-1 rounded-[calc(var(--radius)+2px)] bg-surface-muted p-1">
-          {available.map((item) => (
-            <button
-              key={item}
-              type="button"
-              role="tab"
-              aria-selected={method === item}
-              onClick={() => choose(item)}
-              className={cn("rounded-[var(--radius)] px-2 py-1.5 text-xs font-medium text-foreground-muted", method === item && "bg-surface text-foreground shadow-sm")}
-            >
-              {LABELS[item]}
-            </button>
-          ))}
-        </div>
-      )}
-      <p className="text-sm text-foreground-muted">
-        {method === "authenticator" && "Open your authenticator app and enter the 6-digit code for this account."}
-        {method === "email" && (sent ? "We sent a 6-digit code to your email." : "We'll email you a 6-digit code.")}
-        {method === "backup" && "Enter one of the backup codes you saved when you set up two-factor. Each works once."}
-      </p>
-      {waitingForEmail ? (
-        <>
-          <FormMessage>{error}</FormMessage>
-          <PrimaryButton type="button" onClick={sendEmail} pending={pending}>
-            Email me a code
-          </PrimaryButton>
-        </>
-      ) : (
-        <>
-          <div className="flex flex-col gap-2">
-            <AuthLabel htmlFor="code">{method === "backup" ? "Backup code" : "Code"}</AuthLabel>
-            <AuthInput
-              id="code"
-              value={code}
-              onChange={(event) => setCode(event.target.value)}
-              inputMode={method === "backup" ? "text" : "numeric"}
-              autoComplete="one-time-code"
-              className={cn(method !== "backup" && "text-center font-mono text-xl tracking-[0.5em]")}
-              required
-              autoFocus
-              aria-invalid={Boolean(error) || undefined}
-            />
-          </div>
-          <label className="flex items-center gap-2 text-sm text-foreground-muted">
-            <input type="checkbox" checked={trust} onChange={(event) => setTrust(event.target.checked)} className="size-4 accent-[var(--brand)]" />
-            Trust this device for 30 days
-          </label>
-          <FormMessage>{error}</FormMessage>
-          <PrimaryButton type="submit" pending={pending}>
-            Verify
-          </PrimaryButton>
-          {method === "email" && (
-            <TextButton onClick={sendEmail} disabled={pending} className="self-center">
-              Send a new code
-            </TextButton>
-          )}
-        </>
-      )}
-    </form>
-  );
-}
+"use client";
+
+import { useState } from "react";
+import { authClient } from "@/lib/auth-client";
+import { cn } from "@/lib/utils";
+import { OtpInput } from "./otp-input";
+import { authErrorMessage } from "./sign-in-flow";
+import { useResend } from "./use-resend";
+import { AuthInput, AuthLabel, FormMessage, PrimaryButton, TextButton } from "./ui";
+
+type Method = "authenticator" | "email" | "backup";
+
+interface Props {
+  methods: { authenticator: boolean; email: boolean };
+  next: string;
+}
+
+const LABELS: Record<Method, string> = { authenticator: "Authenticator app", email: "Email code", backup: "Backup code" };
+
+/** The second step of a password sign-in: an authenticator code, an emailed code, or a backup code. */
+export function TwoFactorForm({ methods, next }: Props) {
+  const available: Method[] = [...(methods.authenticator ? (["authenticator"] as const) : []), ...(methods.email ? (["email"] as const) : []), "backup"];
+  const [method, setMethod] = useState<Method>(available[0]!);
+  const [code, setCode] = useState("");
+  const [trust, setTrust] = useState(false);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [sent, setSent] = useState(false);
+
+  const choose = (item: Method) => {
+    setMethod(item);
+    setCode("");
+    setError(null);
+  };
+
+  const sendEmail = async () => {
+    setPending(true);
+    setError(null);
+    const { error } = await authClient.twoFactor.sendOtp();
+    setPending(false);
+    if (error) return setError(authErrorMessage(error));
+    setSent(true);
+  };
+
+  const emailResend = useResend(sendEmail);
+
+  const verify = async (event?: React.FormEvent) => {
+    event?.preventDefault();
+    setPending(true);
+    setError(null);
+    const body = { code: code.trim(), trustDevice: trust };
+    const { error } =
+      method === "authenticator"
+        ? await authClient.twoFactor.verifyTotp(body)
+        : method === "email"
+          ? await authClient.twoFactor.verifyOtp(body)
+          : await authClient.twoFactor.verifyBackupCode(body);
+    setPending(false);
+    if (error) return setError(authErrorMessage(error));
+    window.location.href = next;
+  };
+
+  const waitingForEmail = method === "email" && !sent;
+
+  return (
+    <form className="flex flex-col gap-4" onSubmit={verify}>
+      {available.length > 1 && (
+        <div role="tablist" aria-label="Verify with" className="grid auto-cols-fr grid-flow-col gap-1 rounded-[calc(var(--radius)+2px)] bg-surface-muted p-1">
+          {available.map((item) => (
+            <button
+              key={item}
+              type="button"
+              role="tab"
+              aria-selected={method === item}
+              onClick={() => choose(item)}
+              className={cn("rounded-[var(--radius)] px-2 py-1.5 text-xs font-medium text-foreground-muted", method === item && "bg-surface text-foreground shadow-sm")}
+            >
+              {LABELS[item]}
+            </button>
+          ))}
+        </div>
+      )}
+      <p className="text-sm text-foreground-muted">
+        {method === "authenticator" && "Open your authenticator app and enter the 6-digit code for this account."}
+        {method === "email" && (sent ? "We sent a 6-digit code to your email." : "We'll email you a 6-digit code.")}
+        {method === "backup" && "Enter one of the backup codes you saved when you set up two-factor. Each works once."}
+      </p>
+      {waitingForEmail ? (
+        <>
+          <FormMessage>{error}</FormMessage>
+          <PrimaryButton type="button" onClick={sendEmail} pending={pending}>
+            Email me a code
+          </PrimaryButton>
+        </>
+      ) : (
+        <>
+          {method === "backup" ? (
+            <div className="flex flex-col gap-2">
+              <AuthLabel htmlFor="code">Backup code</AuthLabel>
+              <AuthInput
+                id="code"
+                value={code}
+                onChange={(event) => setCode(event.target.value)}
+                inputMode="text"
+                autoComplete="one-time-code"
+                className="text-center font-mono text-lg tracking-[0.2em]"
+                required
+                autoFocus
+                aria-invalid={Boolean(error) || undefined}
+              />
+            </div>
+          ) : (
+            <OtpInput
+              value={code}
+              onChange={setCode}
+              onComplete={() => void verify()}
+              label={method === "authenticator" ? "Authenticator code" : "Emailed code"}
+              autoFocus
+              disabled={pending}
+            />
+          )}
+          <label className="flex items-center gap-2 text-sm text-foreground-muted">
+            <input type="checkbox" checked={trust} onChange={(event) => setTrust(event.target.checked)} className="size-4 accent-[var(--brand)]" />
+            Trust this device for 30 days
+          </label>
+          <FormMessage>{error}</FormMessage>
+          <PrimaryButton type="submit" pending={pending}>
+            Verify
+          </PrimaryButton>
+          {method === "email" && (
+            <TextButton onClick={() => void emailResend.resend()} disabled={emailResend.disabled || pending} className="self-center">
+              {emailResend.label}
+            </TextButton>
+          )}
+        </>
+      )}
+    </form>
+  );
+}

package/templates/app/components/auth/use-resend.ts

@@ -0,0 +1,44 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * "Send a new code", with a countdown so it can't be hammered.
+ *
+ * Asking again doesn't invalidate the code already sitting in the inbox — people press
+ * resend, then find the first email. The server keeps both valid until they expire.
+ */
+export function useResend(send: () => Promise<unknown>, seconds = 30) {
+  const [remaining, setRemaining] = useState(0);
+  const [sending, setSending] = useState(false);
+  const timer = useRef<ReturnType<typeof setInterval>>(undefined);
+
+  useEffect(() => () => clearInterval(timer.current), []);
+
+  const resend = useCallback(async () => {
+    if (remaining > 0 || sending) return;
+    setSending(true);
+    try {
+      await send();
+    } finally {
+      setSending(false);
+    }
+    setRemaining(seconds);
+    clearInterval(timer.current);
+    timer.current = setInterval(() => {
+      setRemaining((value) => {
+        if (value <= 1) clearInterval(timer.current);
+        return Math.max(0, value - 1);
+      });
+    }, 1000);
+  }, [remaining, sending, send, seconds]);
+
+  return {
+    resend,
+    sending,
+    remaining,
+    /** "Send a new code" → "Send a new code in 24s" */
+    label: remaining > 0 ? `Send a new code in ${remaining}s` : "Send a new code",
+    disabled: remaining > 0 || sending,
+  };
+}

package/templates/app/components/auth/verify-email-form.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { useState } from "react";
+import { CheckCircle2Icon, MailIcon } from "lucide-react";
+import { authClient } from "@/lib/auth-client";
+import { OtpInput } from "./otp-input";
+import { authErrorMessage } from "./sign-in-flow";
+import { useResend } from "./use-resend";
+import { AuthInput, AuthLabel, Divider, FormMessage, PrimaryButton, SecondaryButton, TextButton } from "./ui";
+
+interface Props {
+  /** The address to verify; empty when they arrived without one. */
+  initialEmail: string;
+  /** Whether emailed codes are switched on, as well as the link. */
+  codes: boolean;
+  next: string;
+}
+
+/**
+ * Verify an email address, by the code in the message or by the link in it.
+ *
+ * People land here from the "check your email" step, from the account page, or by
+ * opening a link whose token has expired — so the page has to work without one.
+ */
+export function VerifyEmailForm({ initialEmail, codes, next }: Props) {
+  const [email, setEmail] = useState(initialEmail);
+  const [code, setCode] = useState("");
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [sent, setSent] = useState(false);
+  const [done, setDone] = useState(false);
+
+  const send = async () => {
+    setError(null);
+    if (!email) return setError("Enter the email address you signed up with.");
+    const { error } = codes
+      ? await authClient.emailOtp.sendVerificationOtp({ email, type: "email-verification" })
+      : await authClient.sendVerificationEmail({ email, callbackURL: next });
+    if (error) return setError(authErrorMessage(error));
+    setSent(true);
+  };
+
+  const resend = useResend(send);
+
+  const verify = async (value = code) => {
+    if (value.length !== 6) return;
+    setPending(true);
+    setError(null);
+    const { error } = await authClient.emailOtp.verifyEmail({ email, otp: value });
+    setPending(false);
+    if (error) return setError(authErrorMessage(error));
+    setDone(true);
+    window.location.href = next;
+  };
+
+  if (done) {
+    return (
+      <div className="flex flex-col items-center gap-3 text-center">
+        <span className="grid size-12 place-items-center rounded-full bg-success/15 text-success">
+          <CheckCircle2Icon className="size-6" />
+        </span>
+        <p className="text-base font-medium">Email verified</p>
+        <p className="text-sm text-foreground-muted">Taking you to your account…</p>
+      </div>
+    );
+  }
+
+  // Nothing sent yet: ask where to send it.
+  if (!sent) {
+    return (
+      <form
+        className="flex flex-col gap-4"
+        onSubmit={async (event) => {
+          event.preventDefault();
+          setPending(true);
+          await send();
+          setPending(false);
+        }}
+      >
+        <p className="text-sm text-foreground-muted">
+          {codes ? "We'll email you a 6-digit code to confirm this address." : "We'll email you a link to confirm this address."}
+        </p>
+        <div className="flex flex-col gap-2">
+          <AuthLabel htmlFor="email">Email</AuthLabel>
+          <AuthInput
+            id="email"
+            type="email"
+            autoComplete="email"
+            value={email}
+            onChange={(event) => setEmail(event.target.value)}
+            required
+            autoFocus={!initialEmail}
+          />
+        </div>
+        <FormMessage>{error}</FormMessage>
+        <PrimaryButton type="submit" pending={pending}>
+          {codes ? "Send me a code" : "Send me a link"}
+        </PrimaryButton>
+      </form>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col items-center gap-3 text-center">
+        <span className="grid size-12 place-items-center rounded-full bg-brand/15 text-link">
+          <MailIcon className="size-6" />
+        </span>
+        <p className="text-sm text-foreground-muted">
+          {codes ? "Enter the 6-digit code we sent to " : "Open the link we sent to "}
+          <span className="font-medium text-foreground">{email}</span>.
+        </p>
+      </div>
+
+      {codes && (
+        <>
+          <OtpInput value={code} onChange={setCode} onComplete={(value) => void verify(value)} label="Verification code" autoFocus disabled={pending} />
+          <FormMessage>{error}</FormMessage>
+          <PrimaryButton type="button" onClick={() => void verify()} pending={pending} disabled={code.length !== 6}>
+            Verify email
+          </PrimaryButton>
+          <Divider />
+        </>
+      )}
+      {!codes && <FormMessage>{error}</FormMessage>}
+
+      <div className="flex flex-col items-center gap-2">
+        <SecondaryButton onClick={() => void resend.resend()} disabled={resend.disabled}>
+          {resend.label.replace("code", codes ? "code" : "link")}
+        </SecondaryButton>
+        <TextButton onClick={() => setSent(false)}>Use a different email</TextButton>
+      </div>
+    </div>
+  );
+}