@gopherium/react-auth 0.13.0 → 0.14.0

package/dist/testing/setup.js

@@ -0,0 +1,119 @@
+// SPDX-License-Identifier: Apache-2.0
+import { HttpResponse, http } from 'msw';
+/** createdAccount is the canned first account a setup creates. */
+export const createdAccount = {
+    id: '0198b2f0-0000-7000-8000-000000000002',
+    email: 'maria@example.com',
+    name: 'Maria Perez',
+    disabled: false,
+    role: 'owner',
+    created_at: new Date('2026-10-19T10:00:00Z'),
+};
+/** The answer the site gives for each reason it refuses a setup code. */
+const codeRefused = {
+    invalid: () => HttpResponse.json({ error: 'setup code invalid', code: 'setup_code_invalid' }, { status: 401 }),
+    expired: () => HttpResponse.json({ error: 'setup code expired', code: 'setup_code_expired' }, { status: 401 }),
+    file: () => HttpResponse.json({ error: 'setup code file unusable', code: 'setup_code_file' }, { status: 500 }),
+};
+/**
+ * Answers a setup request as already set up.
+ * @returns The msw response.
+ */
+function setupDone() {
+    return HttpResponse.json({ error: 'setup already done', code: 'setup_done' }, { status: 409 });
+}
+/**
+ * Answers a setup request as rate limited.
+ * @returns The msw response.
+ */
+function setupThrottled() {
+    return HttpResponse.json({ error: 'too many login attempts, try again later', code: 'login_rate_limited' }, { status: 429 });
+}
+/**
+ * Answers a setup request as a site that is still starting.
+ * @returns The msw response.
+ */
+function siteStarting() {
+    return new HttpResponse(null, { status: 503 });
+}
+/**
+ * Answers the setup state.
+ * @param open - Whether the site still waits for its first account.
+ * @returns The msw handler.
+ */
+export function setupStatus(open) {
+    return http.get('/api/auth/setup', () => HttpResponse.json({ open }));
+}
+/**
+ * Accepts a setup code check.
+ * @returns The msw handler.
+ */
+export function setupCodeOk() {
+    return http.post('/api/auth/setup/code', () => new HttpResponse(null, { status: 204 }));
+}
+/**
+ * Refuses a setup code check for the given reason.
+ * @param reason - Why the site refuses the code.
+ * @returns The msw handler.
+ */
+export function setupCodeRefused(reason) {
+    return http.post('/api/auth/setup/code', codeRefused[reason]);
+}
+/**
+ * Refuses a setup code check as already set up.
+ * @returns The msw handler.
+ */
+export function setupCodeClosed() {
+    return http.post('/api/auth/setup/code', setupDone);
+}
+/**
+ * Refuses a setup code check as rate limited.
+ * @returns The msw handler.
+ */
+export function setupCodeRateLimited() {
+    return http.post('/api/auth/setup/code', setupThrottled);
+}
+/**
+ * Answers a setup code check as a site that is still starting.
+ * @returns The msw handler.
+ */
+export function setupCodeStarting() {
+    return http.post('/api/auth/setup/code', siteStarting);
+}
+/**
+ * Creates the first account as the given account.
+ * @param account - The account the site answers.
+ * @returns The msw handler.
+ */
+export function firstAccountOk(account = createdAccount) {
+    return http.post('/api/auth/setup', () => HttpResponse.json(account, { status: 201 }));
+}
+/**
+ * Refuses the first account's setup code for the given reason.
+ * @param reason - Why the site refuses the code.
+ * @returns The msw handler.
+ */
+export function firstAccountCodeRefused(reason) {
+    return http.post('/api/auth/setup', codeRefused[reason]);
+}
+/**
+ * Refuses the first account as already set up.
+ * @returns The msw handler.
+ */
+export function firstAccountClosed() {
+    return http.post('/api/auth/setup', setupDone);
+}
+/**
+ * Refuses the first account as rate limited.
+ * @returns The msw handler.
+ */
+export function firstAccountRateLimited() {
+    return http.post('/api/auth/setup', setupThrottled);
+}
+/**
+ * Answers the first account as a site that is still starting.
+ * @returns The msw handler.
+ */
+export function firstAccountStarting() {
+    return http.post('/api/auth/setup', siteStarting);
+}

package/dist/transport.d.ts

@@ -1,5 +1,6 @@
 import type { Invitation, NewInvite, User as Account, NewUser } from './admin/index.js';
 import type { User } from './api.js';
+import type { FirstAccount } from './setup.js';
 /**
  * AuthTransport carries every backend call of the package, so a consumer
  * can replace the REST transport with its own while keeping the screens,
@@ -19,6 +20,9 @@ export interface AuthTransport {
     acceptInvite(token: string, password: string): Promise<User>;
     requestPasswordReset(email: string): Promise<void>;
     resetPassword(token: string, password: string): Promise<void>;
+    isSetupOpen(signal?: AbortSignal): Promise<boolean>;
+    checkSetupCode(code: string): Promise<void>;
+    createFirstAccount(input: FirstAccount): Promise<Account>;
 }
 /**
  * Replaces backend calls with the given implementations, keeping the REST

package/dist/wpds/SetupAccountStep.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import type { Account } from '../account.js';
+import { SetupCodeError } from '../setup.js';
+import type { FirstAccount } from '../setup.js';
+/** The wizard's words for an error the step does not know. */
+type ErrorWords = (error: unknown) => ReactNode | undefined;
+/**
+ * Renders the first account's Name, Password and Your Email rows inside an application's setup wizard.
+ * @param code - The one-time setup code the wizard collected before this step.
+ * @param submitLabel - The wizard's words for the submit button.
+ * @param onCreated - Called with the account once the site created it.
+ * @param onSubmit - Sends the account through the wizard's own route, in place of the transport.
+ * @param onError - The wizard's words for an error the step does not know.
+ * @param onCodeRefused - Called with the reason when the site refuses the setup code.
+ * @param onClosed - Called when the site already has its first account.
+ * @param generatedPasswordLength - The length of the password the step starts with.
+ * @param userInputs - The wizard's own values the meter treats as easy to guess.
+ * @param before - The wizard's rows above Name.
+ * @param after - The wizard's rows below Your Email.
+ * @returns The setup account step element.
+ */
+export declare function SetupAccountStep({ code, submitLabel, onCreated, onSubmit, onError, onCodeRefused, onClosed, generatedPasswordLength, userInputs, before, after, }: {
+    code: string;
+    submitLabel: string;
+    onCreated: (account: Account) => void | Promise<void>;
+    onSubmit?: (input: FirstAccount) => Promise<Account>;
+    onError?: ErrorWords;
+    onCodeRefused?: (reason: SetupCodeError['reason']) => void;
+    onClosed?: () => void;
+    generatedPasswordLength?: number;
+    userInputs?: string[];
+    before?: ReactNode;
+    after?: ReactNode;
+}): import("react").JSX.Element;
+export {};

package/dist/wpds/SetupAccountStep.js

@@ -0,0 +1,367 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// SPDX-License-Identifier: Apache-2.0
+import { useMutation } from '@tanstack/react-query';
+import { __, _n, _x, sprintf } from '@wordpress/i18n';
+import { Button, CheckboxControl, Field, Input, Text } from '@wordpress/ui';
+import { useEffect, useEffectEvent, useId, useRef, useState } from 'react';
+import { ValidationError } from '../api.js';
+import { DOMAIN } from '../domain.js';
+import { SetupClosedError, SetupCodeError, SiteStartingError, createFirstAccount, isSetupOpen } from '../setup.js';
+import { generatePassword } from './password.js';
+import { setupRefusal } from './setupWords.js';
+import { disallowedWords, levelOf, loadMeter } from './strength.js';
+/** The length of the password the step starts with, unless the wizard asks for another. */
+const GENERATED_PASSWORD_LENGTH = 18;
+/** The word the meter box holds for an empty password. */
+const NO_WORD = '\u00a0';
+/** The arrow drawn before the Caps Lock words. */
+const CAPS_ARROW = (_jsx("span", { "aria-hidden": "true", className: "gopherium-setup__caps-icon", children: _jsxs("svg", { viewBox: "0 0 24 26", fill: "currentColor", stroke: "currentColor", strokeWidth: "0.5", children: [_jsx("path", { d: "M12 5L19 15H16V19H8V15H5L12 5Z" }), _jsx("rect", { x: "8", y: "21", width: "8", height: "1.5", rx: "0.75" })] }) }));
+/**
+ * Renders a sentence with the part between its code tags as code.
+ * @param sentence - The translated sentence.
+ * @returns The sentence with its code part as markup.
+ */
+function withCode(sentence) {
+    return sentence.split(/<\/?code>/).map((part, index) => (index % 2 === 1 ? _jsx("code", { children: part }, index) : part));
+}
+/**
+ * Returns the password hint with the server's floor as its number.
+ * @param min - The fewest characters the server accepts.
+ * @returns The hint.
+ */
+function passwordHint(min) {
+    const hint = _n('Hint: The password should be at least %d character long. ' +
+        'To make it stronger, use upper and lower case letters, numbers, and symbols like ! " ? $ %% ^ & ).', 'Hint: The password should be at least %d characters long. ' +
+        'To make it stronger, use upper and lower case letters, numbers, and symbols like ! " ? $ %% ^ & ).', min, DOMAIN);
+    return sprintf(hint, min);
+}
+const validationWords = new Map([
+    [
+        'email_invalid',
+        () => withCode(__('Sorry, that is not a valid email address. ' +
+            'Email addresses look like <code>username@example.com</code>.', DOMAIN)),
+    ],
+    ['name_required', () => __('Please provide a name.', DOMAIN)],
+    ['name_too_long', () => __('This name is too long.', DOMAIN)],
+    ['password_too_short', (meta) => (typeof meta.min === 'number' ? passwordHint(meta.min) : undefined)],
+    ['password_too_long', () => __('This password is too long.', DOMAIN)],
+]);
+/**
+ * Returns the sentence for a validation refusal the step knows.
+ * @param error - The error the submit raised.
+ * @returns The sentence, or undefined for any other error.
+ */
+function validationRefusal(error) {
+    return error instanceof ValidationError ? validationWords.get(error.code ?? '')?.(error.meta ?? {}) : undefined;
+}
+/**
+ * Returns the sentence the step shows for a refused submit.
+ * @param error - The error the submit raised.
+ * @param onError - The wizard's words for an error the step does not know, if it has any.
+ * @returns The sentence to show.
+ */
+function refusalMessage(error, onError) {
+    return (setupRefusal(error) ??
+        validationRefusal(error) ??
+        onError?.(error) ??
+        __('The account could not be created, please try again.', DOMAIN));
+}
+/**
+ * Reports whether a failed submit may already have made the account.
+ * @param error - The error the submit raised.
+ * @returns True after a 503 or a network failure.
+ */
+function mayHaveCreated(error) {
+    return error instanceof SiteStartingError || error instanceof TypeError;
+}
+/**
+ * Asks the site once whether it still waits for its first account, and tells the wizard when it does not.
+ * @param onClosed - Called when the site answers that setup is closed.
+ */
+async function probeClosed(onClosed) {
+    const open = await isSetupOpen().catch(() => true);
+    if (!open) {
+        onClosed?.();
+    }
+}
+/**
+ * Tells the wizard what a refused submit means for it.
+ * @param error - The error the submit raised.
+ * @param hooks - The wizard's optional callbacks.
+ */
+async function reportRefusal(error, hooks) {
+    if (error instanceof SetupCodeError) {
+        hooks.onCodeRefused?.(error.reason);
+    }
+    else if (error instanceof SetupClosedError) {
+        hooks.onClosed?.();
+    }
+    else if (mayHaveCreated(error)) {
+        await probeClosed(hooks.onClosed);
+    }
+}
+/**
+ * Returns what the meter knows of a password at the moment it is scored.
+ * @param password - The password as typed.
+ * @param meter - The meter, once it has landed.
+ * @param words - Reads the words the meter treats as easy to guess.
+ * @returns The strength, -1 while the meter has not landed.
+ */
+function strengthOf(password, meter, words) {
+    if (password.trim() === '') {
+        return 'empty';
+    }
+    return meter === undefined ? -1 : meter(password, words());
+}
+/**
+ * Returns the meter's tone for a strength.
+ * @param strength - What the meter knows of the password.
+ * @returns The tone, or undefined while nothing was scored or the field is empty.
+ */
+function toneOf(strength) {
+    return typeof strength === 'number' ? levelOf(strength).tone : undefined;
+}
+/**
+ * Reports whether a password this strong needs its use confirmed.
+ * @param strength - What the meter knows of the password.
+ * @returns True for the very weak, weak and unknown levels.
+ */
+function needsConfirmation(strength) {
+    const tone = toneOf(strength);
+    return tone === 'short' || tone === 'bad';
+}
+/**
+ * Returns the word the meter box holds.
+ * @param strength - What the meter knows of the password.
+ * @returns Nothing before scoring, a no-break space for an empty field, or the level's word.
+ */
+function meterWord(strength) {
+    if (strength === undefined) {
+        return '';
+    }
+    return strength === 'empty' ? NO_WORD : levelOf(strength).word;
+}
+/**
+ * Returns a class with its tone modifier when it has a tone.
+ * @param block - The class without a tone.
+ * @param tone - The tone to add, if any.
+ * @returns The class names.
+ */
+function withTone(block, tone) {
+    return tone === undefined ? block : `${block} ${block}--${tone}`;
+}
+/**
+ * Reports whether a key types a character, the only keys Caps Lock is read from.
+ * @param event - The key the person pressed.
+ * @returns True for a printable key pressed without Control, Alt or Meta.
+ */
+function isPrintable(event) {
+    return event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey;
+}
+/**
+ * Returns the words the meter treats as easy to guess, read from the fields when it scores.
+ * @param name - The name as typed.
+ * @param email - The email as typed.
+ * @param userInputs - The wizard's own values, if it gave any.
+ * @returns The distinct words of four characters or more.
+ */
+function wordsFor(name, email, userInputs = []) {
+    return disallowedWords([document.title, location.href, name, email, ...userInputs]);
+}
+/**
+ * Reports whether the step may send the account, the meter's confirmation included.
+ * @param name - The name as typed.
+ * @param email - The email as typed.
+ * @param held - The password and what the meter knows of it.
+ * @returns True once every field holds more than spaces and a weak password is confirmed.
+ */
+function isReady(name, email, held) {
+    return (name.trim() !== '' &&
+        email.trim() !== '' &&
+        held.password.trim() !== '' &&
+        (held.confirmed || !needsConfirmation(held.strength)));
+}
+/**
+ * Holds the password, scores it when the meter lands and on each change, and keeps the weak use confirmation.
+ * @param length - The length of the password the step starts with, if the wizard chose one.
+ * @param words - Reads the words the meter treats as easy to guess.
+ * @returns The password, its strength, the confirmation and their setters.
+ */
+function usePassword(length, words) {
+    const [password, setPassword] = useState(() => generatePassword(length ?? GENERATED_PASSWORD_LENGTH));
+    const [strength, setStrength] = useState(undefined);
+    const [confirmed, setConfirmed] = useState(false);
+    const meter = useRef(undefined);
+    const landed = useEffectEvent((loaded) => {
+        meter.current = loaded;
+        setStrength(strengthOf(password, loaded, words));
+    });
+    useEffect(() => {
+        loadMeter().then((loaded) => landed(loaded), () => undefined);
+    }, []);
+    const change = (value) => {
+        setPassword(value);
+        setStrength(strengthOf(value, meter.current, words));
+        if (value.trim() === '') {
+            setConfirmed(false);
+        }
+    };
+    return { password, strength, confirmed, change, setConfirmed };
+}
+/**
+ * Sends the first account once and hands it to the wizard, retrying only the hand-over.
+ * @param send - Sends the account, through the wizard's route or the transport.
+ * @param onCreated - Called with the account once the site created it.
+ * @param onRefused - Called first after every refused submit.
+ * @param hooks - The wizard's optional callbacks for a refusal.
+ * @returns The submit, its refusal, its busy and locked states, and the retry once a hand-over failed.
+ */
+function useFirstAccount(send, onCreated, onRefused, hooks) {
+    const [created, setCreated] = useState(null);
+    const [handoffFailed, setHandoffFailed] = useState(false);
+    const finish = useMutation({
+        mutationFn: async (account) => {
+            await onCreated(account);
+        },
+        onError: () => setHandoffFailed(true),
+        onSuccess: () => setHandoffFailed(false),
+    });
+    const create = useMutation({
+        mutationFn: send,
+        onSuccess: (account) => {
+            setCreated(account);
+            finish.mutate(account);
+        },
+        onError: async (error) => {
+            onRefused();
+            await reportRefusal(error, hooks);
+        },
+    });
+    return {
+        submit: () => create.mutate(),
+        error: create.error,
+        busy: create.isPending || finish.isPending,
+        locked: create.isPending || create.isSuccess,
+        retry: created !== null && handoffFailed ? () => finish.mutate(created) : undefined,
+        retrying: finish.isPending,
+    };
+}
+/**
+ * Renders a sentence in the message box above the rows.
+ * @param children - The sentence.
+ * @returns The message box element.
+ */
+function MessageBox({ children }) {
+    return (_jsx(Text, { role: "alert", render: _jsx("p", { className: "gopherium-setup__message" }), children: children }));
+}
+/**
+ * Renders the sentence for a refused submit, if there is one.
+ * @param error - The error the last submit raised, if any.
+ * @param onError - The wizard's words for an error the step does not know.
+ * @returns The message box element, or nothing.
+ */
+function RefusalMessage({ error, onError }) {
+    return error === null ? null : _jsx(MessageBox, { children: refusalMessage(error, onError) });
+}
+/**
+ * Renders one labelled field row of the step, with its help line when it has one.
+ * @param label - The field's label.
+ * @param help - The line under the field, if any.
+ * @returns The row element.
+ */
+function TextRow({ label, help, ...field }) {
+    return (_jsxs(Field.Root, { className: "gopherium-setup__row", render: _jsx("div", {}), children: [_jsx(Field.Label, { className: "gopherium-setup__label", children: label }), _jsxs("div", { children: [_jsx(Input, { ...field }), help === undefined ? null : _jsx(Field.Description, { className: "gopherium-setup__help", children: help })] })] }));
+}
+/**
+ * Renders the button that shows or hides the password.
+ * @param masked - Whether the password is hidden.
+ * @param onToggle - Called when the button is pressed.
+ * @returns The toggle element.
+ */
+function MaskToggle({ masked, onToggle }) {
+    const show = __('Show', DOMAIN);
+    const hide = __('Hide', DOMAIN);
+    return (_jsx(Button, { type: "button", variant: "outline", className: "gopherium-setup__toggle", "data-other-word": masked ? hide : show, "aria-label": masked ? __('Show password', DOMAIN) : __('Hide password', DOMAIN), onClick: onToggle, children: masked ? show : hide }));
+}
+/**
+ * Renders the box that shows the meter's word in its tone.
+ * @param id - The id the password field is described by.
+ * @param strength - What the meter knows of the password.
+ * @returns The meter box element.
+ */
+function MeterBox({ id, strength }) {
+    return (_jsx("div", { id: id, "aria-live": "polite", className: withTone('gopherium-setup__meter', toneOf(strength)), children: meterWord(strength) }));
+}
+/**
+ * Renders the password row with the meter box, the Caps Lock line and the line asking to store it.
+ * @param password - The password as typed.
+ * @param strength - What the meter knows of the password.
+ * @param masked - Whether the password is hidden.
+ * @param readOnly - Whether the password stays as sent while the account is created.
+ * @param onPasswordChange - Called with the password on every change.
+ * @param onToggle - Called when the show or hide button is pressed.
+ * @returns The row element.
+ */
+function PasswordRow({ password, strength, masked, readOnly, onPasswordChange, onToggle, }) {
+    const [capsLock, setCapsLock] = useState(false);
+    const meterId = useId();
+    const helpId = useId();
+    return (_jsxs(Field.Root, { className: "gopherium-setup__row", render: _jsx("div", {}), children: [_jsx(Field.Label, { className: "gopherium-setup__label", children: __('Password', DOMAIN) }), _jsxs("div", { children: [_jsxs("div", { className: "gopherium-setup__password", children: [_jsxs("div", { className: "gopherium-setup__password-field", children: [_jsx(Input, { type: masked ? 'password' : 'text', className: withTone('gopherium-setup__input', toneOf(strength)), value: password, readOnly: readOnly, onChange: (event) => onPasswordChange(event.target.value), onKeyDown: (event) => {
+                                            if (isPrintable(event)) {
+                                                setCapsLock(event.getModifierState('CapsLock'));
+                                            }
+                                        }, autoComplete: "new-password", spellCheck: false, "aria-describedby": `${meterId} ${helpId}` }), _jsx(MeterBox, { id: meterId, strength: strength }), _jsx("div", { "aria-live": "assertive", className: "gopherium-setup__caps", children: capsLock ? (_jsxs(_Fragment, { children: [CAPS_ARROW, _jsx("span", { className: "gopherium-setup__caps-text", children: __('Caps lock is on.', DOMAIN) })] })) : null })] }), _jsx(MaskToggle, { masked: masked, onToggle: onToggle })] }), _jsxs(Text, { render: _jsx("p", { id: helpId, className: "gopherium-setup__help" }), children: [_jsx("strong", { children: __('Important:', DOMAIN) }), ' ', __('You will need this password to log\u00a0in. Please store it in a secure location.', DOMAIN)] })] })] }));
+}
+/**
+ * Renders the row asking to confirm the use of a weak password.
+ * @param checked - Whether the use is confirmed.
+ * @param readOnly - Whether the choice stays as sent while the account is created.
+ * @param onCheckedChange - Called with the new choice.
+ * @returns The row element.
+ */
+function ConfirmRow({ checked, readOnly, onCheckedChange, }) {
+    return (_jsxs("div", { className: "gopherium-setup__row", children: [_jsx(Field.VisualLabel, { className: "gopherium-setup__label", children: __('Confirm Password', DOMAIN) }), _jsx("div", { children: _jsx(CheckboxControl, { className: "gopherium-setup__checkbox", label: __('Confirm use of weak password', DOMAIN), checked: checked, readOnly: readOnly, onCheckedChange: (next) => onCheckedChange(next) }) })] }));
+}
+/**
+ * Renders the sentence and the button that hand the created account to the wizard again.
+ * @param pending - Whether the hand-over runs.
+ * @param onRetry - Called when the button is pressed.
+ * @returns The hand-over failure element.
+ */
+function HandoffFailure({ pending, onRetry }) {
+    return (_jsxs("div", { className: "gopherium-setup", children: [_jsx(MessageBox, { children: __('Something went wrong.', DOMAIN) }), _jsx("p", { className: "gopherium-setup__step", children: _jsx(Button, { type: "button", disabled: pending, loading: pending, onClick: onRetry, children: __('Try again', DOMAIN) }) })] }));
+}
+/**
+ * Renders the first account's Name, Password and Your Email rows inside an application's setup wizard.
+ * @param code - The one-time setup code the wizard collected before this step.
+ * @param submitLabel - The wizard's words for the submit button.
+ * @param onCreated - Called with the account once the site created it.
+ * @param onSubmit - Sends the account through the wizard's own route, in place of the transport.
+ * @param onError - The wizard's words for an error the step does not know.
+ * @param onCodeRefused - Called with the reason when the site refuses the setup code.
+ * @param onClosed - Called when the site already has its first account.
+ * @param generatedPasswordLength - The length of the password the step starts with.
+ * @param userInputs - The wizard's own values the meter treats as easy to guess.
+ * @param before - The wizard's rows above Name.
+ * @param after - The wizard's rows below Your Email.
+ * @returns The setup account step element.
+ */
+export function SetupAccountStep({ code, submitLabel, onCreated, onSubmit, onError, onCodeRefused, onClosed, generatedPasswordLength, userInputs, before, after, }) {
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    const [masked, setMasked] = useState(false);
+    const held = usePassword(generatedPasswordLength, () => wordsFor(name, email, userInputs));
+    const account = useFirstAccount(() => (onSubmit ?? createFirstAccount)({ code, email: email.trim(), name: name.trim(), password: held.password }), onCreated, () => setMasked(false), { onCodeRefused, onClosed });
+    if (account.retry !== undefined) {
+        return _jsx(HandoffFailure, { pending: account.retrying, onRetry: account.retry });
+    }
+    const canSend = !account.locked && isReady(name, email, held);
+    return (_jsxs("form", { className: "gopherium-setup", noValidate: true, onSubmit: (event) => {
+            event.preventDefault();
+            if (!canSend) {
+                return;
+            }
+            setMasked(true);
+            account.submit();
+        }, children: [_jsx(RefusalMessage, { error: account.error, onError: onError }), before, _jsx(TextRow, { label: _x('Name', 'field label', DOMAIN), type: "text", autoComplete: "name", value: name, readOnly: account.locked, onChange: (event) => setName(event.target.value) }), _jsx(PasswordRow, { password: held.password, strength: held.strength, masked: masked, readOnly: account.locked, onPasswordChange: held.change, onToggle: () => setMasked(!masked) }), needsConfirmation(held.strength) ? (_jsx(ConfirmRow, { checked: held.confirmed, readOnly: account.locked, onCheckedChange: held.setConfirmed })) : null, _jsx(TextRow, { label: __('Your Email', DOMAIN), type: "email", autoComplete: "username", value: email, readOnly: account.locked, onChange: (event) => setEmail(event.target.value), help: __('Double-check your email address before continuing.', DOMAIN) }), after, _jsx("p", { className: "gopherium-setup__step", children: _jsx(Button, { type: "submit", disabled: !canSend, loading: account.busy, children: submitLabel }) })] }));
+}

package/dist/wpds/SetupCodeStep.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { SetupCodeError } from '../setup.js';
+/**
+ * Renders the step asking for the one-time setup code and hands the accepted code upward.
+ * @param brand - The product name in the heading.
+ * @param fileHint - The application's words for where its code file lives.
+ * @param onUnlocked - Called with the code as typed once the site accepts it.
+ * @param onClosed - Called when the site already has its first account.
+ * @param refused - The reason a later step sent the wizard back, shown on arrival.
+ * @returns The setup code step element.
+ */
+export declare function SetupCodeStep({ brand, fileHint, onUnlocked, onClosed, refused, }: {
+    brand: string;
+    fileHint: ReactNode;
+    onUnlocked: (code: string) => void | Promise<void>;
+    onClosed?: () => void;
+    refused?: SetupCodeError['reason'];
+}): import("react").JSX.Element;

package/dist/wpds/SetupCodeStep.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-License-Identifier: Apache-2.0
+import { useMutation } from '@tanstack/react-query';
+import { __, sprintf } from '@wordpress/i18n';
+import { Button, Field, Input, Text } from '@wordpress/ui';
+import { useEffect, useId, useRef, useState } from 'react';
+import { DOMAIN } from '../domain.js';
+import { SetupClosedError, checkSetupCode } from '../setup.js';
+import { codeRefusal, setupRefusal } from './setupWords.js';
+/**
+ * Returns the sentence the code step shows, if any.
+ * @param failure - The error the last check or hand-over raised, if any.
+ * @param idle - Whether no check has run yet.
+ * @param refused - The reason a later step sent the wizard back, if any.
+ * @returns The sentence to show, or undefined for none.
+ */
+function stepMessage(failure, idle, refused) {
+    if (failure !== null) {
+        return setupRefusal(failure) ?? __('The request failed, please try again.', DOMAIN);
+    }
+    if (idle && refused !== undefined) {
+        return codeRefusal(refused);
+    }
+    return undefined;
+}
+/**
+ * Reports whether the field takes focus once it is in the page, which it does unless the pointer is coarse.
+ * @returns False on a touch screen, true elsewhere.
+ */
+function focusesOnMount() {
+    return window.matchMedia?.('(pointer: coarse)').matches !== true;
+}
+/**
+ * Renders the step asking for the one-time setup code and hands the accepted code upward.
+ * @param brand - The product name in the heading.
+ * @param fileHint - The application's words for where its code file lives.
+ * @param onUnlocked - Called with the code as typed once the site accepts it.
+ * @param onClosed - Called when the site already has its first account.
+ * @param refused - The reason a later step sent the wizard back, shown on arrival.
+ * @returns The setup code step element.
+ */
+export function SetupCodeStep({ brand, fileHint, onUnlocked, onClosed, refused, }) {
+    const [code, setCode] = useState('');
+    const field = useRef(null);
+    const hintId = useId();
+    const alertId = useId();
+    useEffect(() => {
+        if (focusesOnMount()) {
+            field.current?.focus();
+        }
+    }, []);
+    const attempt = useMutation({
+        mutationFn: async () => {
+            await checkSetupCode(code);
+            await onUnlocked(code);
+        },
+        onError: (error) => {
+            if (error instanceof SetupClosedError) {
+                onClosed?.();
+            }
+        },
+    });
+    const message = stepMessage(attempt.error, attempt.isIdle, refused);
+    const canCheck = code.trim() !== '' && !attempt.isPending;
+    return (_jsxs("form", { className: "gopherium-setup", onSubmit: (event) => {
+            event.preventDefault();
+            if (!canCheck) {
+                return;
+            }
+            attempt.mutate();
+        }, children: [_jsx(Text, { variant: "heading-lg", render: _jsx("h1", { className: "gopherium-setup__heading" }), children: sprintf(__('Unlock %s', DOMAIN), brand) }), _jsx(Text, { render: _jsx("p", { className: "gopherium-setup__text" }), children: __('To ensure this site is securely set up by its owner, a setup code has been written to a file on the server.', DOMAIN) }), _jsx(Text, { render: _jsx("div", { id: hintId, className: "gopherium-setup__file" }), children: fileHint }), _jsx(Text, { render: _jsx("p", { className: "gopherium-setup__text" }), children: __('Please copy the setup code from the file and paste it below.', DOMAIN) }), message === undefined ? null : (_jsx(Text, { role: "alert", id: alertId, render: _jsx("p", { className: "gopherium-setup__message" }), children: message })), _jsxs(Field.Root, { className: "gopherium-setup__row", render: _jsx("div", {}), children: [_jsx(Field.Label, { className: "gopherium-setup__label", children: __('Setup code', DOMAIN) }), _jsx("div", { children: _jsx(Input, { ref: field, type: "text", value: code, onChange: (event) => setCode(event.target.value), autoComplete: "off", spellCheck: false, "aria-describedby": message === undefined ? hintId : `${alertId} ${hintId}` }) })] }), _jsx("p", { className: "gopherium-setup__step", children: _jsx(Button, { type: "submit", disabled: !canCheck, loading: attempt.isPending, children: __('Continue', DOMAIN) }) })] }));
+}

package/dist/wpds/index.d.ts

@@ -5,4 +5,6 @@ export { NewUserScreen } from './NewUserScreen.js';
 export { RequestResetScreen } from './RequestResetScreen.js';
 export { ResetPasswordScreen } from './ResetPasswordScreen.js';
 export { SetPasswordScreen } from './SetPasswordScreen.js';
+export { SetupAccountStep } from './SetupAccountStep.js';
+export { SetupCodeStep } from './SetupCodeStep.js';
 export { UsersScreen } from './UsersScreen.js';

package/dist/wpds/index.js

@@ -6,4 +6,6 @@ export { NewUserScreen } from './NewUserScreen.js';
 export { RequestResetScreen } from './RequestResetScreen.js';
 export { ResetPasswordScreen } from './ResetPasswordScreen.js';
 export { SetPasswordScreen } from './SetPasswordScreen.js';
+export { SetupAccountStep } from './SetupAccountStep.js';
+export { SetupCodeStep } from './SetupCodeStep.js';
 export { UsersScreen } from './UsersScreen.js';

package/dist/wpds/password.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns a random password from the generator's characters, each equally likely.
+ * @param length - The number of characters the password holds, a whole number from 1 to 65536.
+ * @returns The password.
+ */
+export declare function generatePassword(length: number): string;