@exegia/corpora-ui 0.6.0 → 0.8.0

package/src/components/blocks/auth/signup-block.tsx

@@ -31,6 +31,11 @@ import {
 export interface SignupBlockProps {
   title?: string;
   description?: string;
+  /**
+   * Replaces the built-in "terms" link inside the consent label — pass your
+   * own dialog trigger to render it inline instead of wiring `onTerms`.
+   */
+  termsComponent?: React.ReactNode;
   /** Brand mark rendered above the title. Omit for no logo row at all. */
   logo?: React.ReactNode;
   /** Brand accent for the primary action. Omit to keep the default primary. */
@@ -39,6 +44,16 @@ export interface SignupBlockProps {
   showNameField?: boolean;
   /** Require the terms checkbox before submitting. */
   showTerms?: boolean;
+  /**
+   * Controls the terms checkbox. Pass it with `onTermsCheckedChange` when
+   * something outside the block has to tick the box — an "I agree" action in
+   * your own terms dialog, say. Omit to let the block own the state.
+   */
+  termsChecked?: boolean;
+  /** Starting state of the terms checkbox while it is uncontrolled. */
+  defaultTermsChecked?: boolean;
+  /** Fires on every change, controlled or not. */
+  onTermsCheckedChange?: (checked: boolean) => void;
   /** Block submission until every password requirement is met. */
   enforceStrongPassword?: boolean;
   onSubmit?: (data: {
@@ -59,21 +74,36 @@ export function SignupBlock({
   providers = ["google", "apple", "github"],
   showNameField = true,
   showTerms = true,
+  termsChecked,
+  defaultTermsChecked = false,
+  onTermsCheckedChange,
   enforceStrongPassword = true,
   onSubmit,
+  termsComponent,
   onProviderSelect,
   onLogin,
   onTerms,
 }: SignupBlockProps) {
   const nameId = React.useId();
   const emailId = React.useId();
+  const passwordId = React.useId();
   const termsId = React.useId();
   const [status, setStatus] = React.useState<AuthStatus>("idle");
   const [error, setError] = React.useState<string | null>(null);
   const [loadingProvider, setLoadingProvider] =
     React.useState<SocialProvider | null>(null);
   const [password, setPassword] = React.useState("");
-  const [terms, setTerms] = React.useState(false);
+  // Controlled when `termsChecked` is passed, uncontrolled otherwise. The
+  // internal state is kept either way, so a block that switches between the
+  // two mid-life does not lose the box, and the callback fires in both modes.
+  const [uncontrolledTerms, setUncontrolledTerms] =
+    React.useState(defaultTermsChecked);
+  const terms = termsChecked ?? uncontrolledTerms;
+
+  function handleTermsChange(checked: boolean) {
+    if (termsChecked === undefined) setUncontrolledTerms(checked);
+    onTermsCheckedChange?.(checked);
+  }
   // Tracked from each input's own constraint validation rather than a regex.
   // The values stay uncontrolled — only validity is needed, and the form reads
   // values from FormData on submit.
@@ -198,6 +228,7 @@ export function SignupBlock({
                   id={emailId}
                   name="email"
                   type="email"
+                  aria-label="Email"
                   autoComplete="email"
                   placeholder="you@example.com"
                   required
@@ -209,9 +240,11 @@ export function SignupBlock({
               </Field>
               <Reveal show={emailValid}>
                 <Field name="password">
-                  <FieldLabel>Password</FieldLabel>
+                  <FieldLabel htmlFor={passwordId}>Password</FieldLabel>
                   <PasswordInput
+                    id={passwordId}
                     name="password"
+                    aria-label="Password"
                     autoComplete="new-password"
                     placeholder="Create a password"
                     showStrength
@@ -227,18 +260,18 @@ export function SignupBlock({
                   <Checkbox
                     id={termsId}
                     checked={terms}
-                    onCheckedChange={(checked) => setTerms(checked === true)}
+                    onCheckedChange={(checked) =>
+                      handleTermsChange(checked === true)
+                    }
                     disabled={busy}
                   />
                   <Label htmlFor={termsId} className="font-normal">
                     I agree to the{" "}
-                    <Button
-                      variant="link"
-                      type="button"
-                      onClick={onTerms}
-                    >
-                      terms
-                    </Button>
+                    {termsComponent ?? (
+                      <Button variant="link" type="button" onClick={onTerms}>
+                        terms
+                      </Button>
+                    )}
                   </Label>
                 </div>
               )}

package/src/components/blocks/auth/update-password-block.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import * as React from "react";
+
+import {
+  getPasswordStrength,
+  PasswordInput,
+} from "@/components/composed/password-input";
+import { Button } from "@/components/ui/button";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { type AuthAccent, authAccentActionStyles } from "@/lib/auth-accent";
+import { cn } from "@/lib/utils";
+import {
+  AuthCard,
+  AuthError,
+  AuthSuccess,
+  MorphStep,
+  Reveal,
+  type AuthStatus,
+} from "./auth-shell";
+
+export interface UpdatePasswordBlockProps {
+  title?: string;
+  description?: string;
+  /** Brand mark rendered above the title. Omit for no logo row at all. */
+  logo?: React.ReactNode;
+  /** Brand accent for the primary action. Omit to keep the default primary. */
+  accent?: AuthAccent;
+  /**
+   * Minimum strength (0-4, as scored by `getPasswordStrength`) the new
+   * password must reach before the confirm field is revealed. 0 disables the
+   * gate.
+   */
+  minStrength?: number;
+  /** Reject (or throw) to show the error state with the error's message. */
+  onSubmit?: (data: { password: string }) => Promise<void> | void;
+  onDone?: () => void;
+}
+
+/**
+ * Password change form for an already-authenticated user: a strength-metered
+ * new password gates the confirm field, which in turn gates the submit
+ * button. Mismatch is caught client-side; everything else comes back as a
+ * rejection from `onSubmit`.
+ */
+export function UpdatePasswordBlock({
+  title = "Update your password",
+  description = "Choose a new password for your account",
+  logo,
+  accent,
+  minStrength = 4,
+  onSubmit,
+  onDone,
+}: UpdatePasswordBlockProps) {
+  const passwordId = React.useId();
+  const confirmId = React.useId();
+  const [status, setStatus] = React.useState<AuthStatus>("idle");
+  const [error, setError] = React.useState<string | null>(null);
+  const [password, setPassword] = React.useState("");
+  const [confirmPassword, setConfirmPassword] = React.useState("");
+
+  // Progressive disclosure, matching the signup block: the confirm field
+  // appears once the new password clears the policy, the submit button once
+  // the two match.
+  const strongEnough = getPasswordStrength(password) >= minStrength;
+  const matches = confirmPassword.length > 0 && confirmPassword === password;
+  const canSubmit = strongEnough && matches;
+
+  // Only flag a mismatch once the confirmation has diverged — while it is
+  // still a prefix of the new password the user is simply mid-keystroke, and
+  // nagging on every character would shake the field the whole way through.
+  const mismatch =
+    confirmPassword.length > 0 && !password.startsWith(confirmPassword);
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    // Enter in any field submits the form even while the button is hidden.
+    if (!canSubmit) return;
+    setError(null);
+    setStatus("loading");
+    try {
+      await onSubmit?.({ password });
+      setStatus("success");
+    } catch (cause) {
+      setStatus("idle");
+      setError(
+        cause instanceof Error ? cause.message : "Unable to update password.",
+      );
+    }
+  }
+
+  return (
+    <AuthCard
+      title={title}
+      description={description}
+      logo={logo}
+      accent={accent}
+    >
+      <MorphStep step={status === "success" ? "success" : "form"}>
+        {status === "success" ? (
+          <AuthSuccess
+            title="Password updated"
+            description="Your password has been changed successfully."
+          >
+            {onDone && (
+              <Button variant="link" onClick={onDone}>
+                Continue
+              </Button>
+            )}
+          </AuthSuccess>
+        ) : (
+          <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
+            <Field name="password">
+              <FieldLabel htmlFor={passwordId}>New password</FieldLabel>
+              <PasswordInput
+                id={passwordId}
+                name="password"
+                autoComplete="new-password"
+                required
+                showStrength
+                disabled={status === "loading"}
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+              />
+            </Field>
+            <Reveal show={strongEnough}>
+              <Field name="confirmPassword">
+                <FieldLabel htmlFor={confirmId}>Confirm new password</FieldLabel>
+                <PasswordInput
+                  id={confirmId}
+                  name="confirmPassword"
+                  autoComplete="new-password"
+                  required
+                  disabled={status === "loading"}
+                  value={confirmPassword}
+                  onChange={(event) => setConfirmPassword(event.target.value)}
+                />
+              </Field>
+            </Reveal>
+            <AuthError
+              message={error ?? (mismatch ? "Passwords do not match." : null)}
+            />
+            <Reveal show={canSubmit}>
+              <Button
+                className={cn("w-full", accent && authAccentActionStyles)}
+                type="submit"
+                loading={status === "loading"}
+              >
+                Update password
+              </Button>
+            </Reveal>
+          </form>
+        )}
+      </MorphStep>
+    </AuthCard>
+  );
+}

package/src/components/composed/social-providers.tsx

@@ -13,7 +13,8 @@ import { cn } from "@/lib/utils";
 
 export type SocialProvider = "google" | "apple" | "github" | "x";
 
-const PROVIDERS: Record<
+/** Label + brand mark per provider, shared with the auth blocks. */
+export const SOCIAL_PROVIDERS: Record<
   SocialProvider,
   { label: string; Icon: React.ComponentType<{ className?: string }> }
 > = {
@@ -63,7 +64,7 @@ export function SocialProviders({
       )}
     >
       {providers.map((provider) => {
-        const { label, Icon } = PROVIDERS[provider];
+        const { label, Icon } = SOCIAL_PROVIDERS[provider];
         return (
           <Button
             key={provider}

package/src/index.ts

@@ -28,8 +28,13 @@ export * from "./components/composed/social-providers"
 export * from "./components/blocks/auth/auth-shell"
 export * from "./components/blocks/auth/code-auth-block"
 export * from "./components/blocks/auth/forgot-password-block"
+export * from "./components/blocks/auth/linked-accounts-block"
 export * from "./components/blocks/auth/login-block"
+export * from "./components/blocks/auth/onboarding-block"
+export * from "./components/blocks/auth/passkey-manager-block"
+export * from "./components/blocks/auth/passkey-sign-in-block"
 export * from "./components/blocks/auth/signup-block"
+export * from "./components/blocks/auth/update-password-block"
 
 // lib
 export * from "./lib/auth-accent"