@gopherium/react-auth 0.15.0 → 0.16.0

package/dist/wpds/SetupAccountStep.js

@@ -1,21 +1,18 @@
 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 { __, _x } from '@wordpress/i18n';
+import { Button, Field, Input, Text } from '@wordpress/ui';
+import { useState } from 'react';
+import { passwordHint } from '../admin/fieldError.js';
 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 { PasswordField } from './PasswordField.js';
 import { setupRefusal } from './setupWords.js';
-import { disallowedWords, levelOf, loadMeter } from './strength.js';
+import { usePasswordField } from './usePasswordField.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.
@@ -24,17 +21,6 @@ const CAPS_ARROW = (_jsx("span", { "aria-hidden": "true", className: "gopherium-
 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',
@@ -100,113 +86,15 @@ async function reportRefusal(error, hooks) {
         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.
+ * @param passwordReady - Whether the password may be sent.
  * @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 };
+function isReady(name, email, passwordReady) {
+    return name.trim() !== '' && email.trim() !== '' && passwordReady;
 }
 /**
  * Sends the first account once and hands it to the wizard, retrying only the hand-over.
@@ -272,56 +160,6 @@ function RefusalMessage({ error, onError }) {
 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.
@@ -349,19 +187,21 @@ function HandoffFailure({ pending, onRetry }) {
 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 });
+    const password = usePasswordField({
+        length: generatedPasswordLength ?? GENERATED_PASSWORD_LENGTH,
+        userInputs: [name, email, ...(userInputs ?? [])],
+    });
+    const account = useFirstAccount(() => (onSubmit ?? createFirstAccount)({ code, email: email.trim(), name: name.trim(), password: password.value }), onCreated, () => password.mask(false), { onCodeRefused, onClosed });
     if (account.retry !== undefined) {
         return _jsx(HandoffFailure, { pending: account.retrying, onRetry: account.retry });
     }
-    const canSend = !account.locked && isReady(name, email, held);
+    const canSend = !account.locked && isReady(name, email, password.ready);
     return (_jsxs("form", { className: "gopherium-setup", noValidate: true, onSubmit: (event) => {
             event.preventDefault();
             if (!canSend) {
                 return;
             }
-            setMasked(true);
+            password.mask(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 }) })] }));
+        }, 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(PasswordField, { password: password, readOnly: account.locked, help: _jsxs(_Fragment, { children: [_jsx("strong", { children: __('Important:', DOMAIN) }), ' ', __('You will need this password to log\u00a0in. Please store it in a secure location.', DOMAIN)] }) }), _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/index.d.ts

@@ -1,10 +1,11 @@
 export { AccountPanel } from './AccountPanel.js';
 export { LoginScreen } from './LoginScreen.js';
 export { usersMenuItem } from './nav.js';
-export { NewUserScreen } from './NewUserScreen.js';
+export { PasswordField } from './PasswordField.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';
+export { usePasswordField } from './usePasswordField.js';
+export type { PasswordFieldState } from './usePasswordField.js';

package/dist/wpds/index.js

@@ -2,10 +2,10 @@
 export { AccountPanel } from './AccountPanel.js';
 export { LoginScreen } from './LoginScreen.js';
 export { usersMenuItem } from './nav.js';
-export { NewUserScreen } from './NewUserScreen.js';
+export { PasswordField } from './PasswordField.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';
+export { usePasswordField } from './usePasswordField.js';

package/dist/wpds/style.css

@@ -101,11 +101,11 @@
 	color: var(--wpds-color-foreground-content-neutral-weak);
 }
 
-.gopherium-setup__checkbox {
+.gopherium-setup__row .gopherium-setup__checkbox {
 	--_wp-ui-checkbox-control-label-line-height: max(var(--_wp-ui-checkbox-control-checkbox-height), 14px * 1.3);
 }
 
-.gopherium-setup__checkbox label {
+.gopherium-setup__row .gopherium-setup__checkbox label {
 	font-size: 14px;
 }
 
@@ -114,6 +114,10 @@
 	height: calc(100% + 2 * var(--wpds-border-width-xs));
 }
 
+.gopherium-setup__generate {
+	margin-block-end: 14px;
+}
+
 .gopherium-setup__password {
 	display: flex;
 	column-gap: 4px;
@@ -147,7 +151,6 @@
 	border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
 	border-radius: var(--wpds-border-radius-sm);
 	color: var(--wpds-color-foreground-content-neutral);
-	font-size: 14px;
 	font-weight: normal;
 	line-height: 1.3;
 	text-align: center;
@@ -211,10 +214,14 @@
 	border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-caution);
 	background-color: var(--wpds-color-background-surface-caution-weak);
 	color: var(--wpds-color-foreground-content-neutral);
-	font-size: 14px;
 	line-height: 1.3;
 }
 
+.gopherium-setup__row .gopherium-setup__meter,
+.gopherium-setup__row .gopherium-setup__caps {
+	font-size: 14px;
+}
+
 .gopherium-setup__caps-icon {
 	display: flex;
 	flex: none;
@@ -249,21 +256,3 @@
 		--_wp-ui-checkbox-control-checkbox-height: 25px;
 	}
 }
-
-.gopherium-users {
-	width: 100%;
-	border-collapse: collapse;
-	text-align: left;
-}
-
-.gopherium-users th,
-.gopherium-users td {
-	padding: 8px 12px;
-	border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral);
-	vertical-align: middle;
-}
-
-.gopherium-users th {
-	font-size: var(--wpds-typography-font-size-sm);
-	color: var(--wpds-color-foreground-content-neutral-weak);
-}

package/dist/wpds/usePasswordField.d.ts

@@ -0,0 +1,37 @@
+import type { Tone } from './strength.js';
+/** What the meter knows of the password: nothing yet, an empty field, or a score from -1 to 4. */
+export type Strength = number | 'empty' | undefined;
+/** The password a PasswordField draws, what the meter knows of it, and the setters the field calls. */
+export interface PasswordFieldState {
+    value: string;
+    strength: Strength;
+    confirmed: boolean;
+    masked: boolean;
+    ready: boolean;
+    change: (value: string) => void;
+    generate: () => void;
+    confirm: (confirmed: boolean) => void;
+    mask: (masked: boolean) => void;
+}
+/**
+ * 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.
+ */
+export declare function toneOf(strength: 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.
+ */
+export declare function needsConfirmation(strength: Strength): boolean;
+/**
+ * Holds a password, scores it when the meter lands and on each change, and keeps its mask and weak use confirmation.
+ * @param length - The length of every password it generates, the one the field starts with included.
+ * @param userInputs - The values the meter treats as easy to guess, such as the name and email typed beside it.
+ * @returns The password, what the meter knows of it, and its setters.
+ */
+export declare function usePasswordField({ length, userInputs, }: {
+    length: number;
+    userInputs: string[];
+}): PasswordFieldState;

package/dist/wpds/usePasswordField.js

@@ -0,0 +1,86 @@
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useEffectEvent, useRef, useState } from 'react';
+import { generatePassword } from './password.js';
+import { disallowedWords, levelOf, loadMeter } from './strength.js';
+/**
+ * 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.
+ */
+export 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.
+ */
+export function needsConfirmation(strength) {
+    const tone = toneOf(strength);
+    return tone === 'short' || tone === 'bad';
+}
+/**
+ * Reports whether a password may be sent, the meter's confirmation included.
+ * @param value - The password as typed.
+ * @param strength - What the meter knows of it.
+ * @param confirmed - Whether its weak use is confirmed.
+ * @returns True once it holds more than spaces and a weak password is confirmed.
+ */
+function isReady(value, strength, confirmed) {
+    return value.trim() !== '' && (confirmed || !needsConfirmation(strength));
+}
+/**
+ * Holds a password, scores it when the meter lands and on each change, and keeps its mask and weak use confirmation.
+ * @param length - The length of every password it generates, the one the field starts with included.
+ * @param userInputs - The values the meter treats as easy to guess, such as the name and email typed beside it.
+ * @returns The password, what the meter knows of it, and its setters.
+ */
+export function usePasswordField({ length, userInputs, }) {
+    const [value, setValue] = useState(() => generatePassword(length));
+    const [strength, setStrength] = useState(undefined);
+    const [confirmed, setConfirmed] = useState(false);
+    const [masked, setMasked] = useState(false);
+    const meter = useRef(undefined);
+    const words = () => disallowedWords([document.title, location.href, ...userInputs]);
+    const landed = useEffectEvent((loaded) => {
+        meter.current = loaded;
+        setStrength(strengthOf(value, loaded, words));
+    });
+    useEffect(() => {
+        loadMeter().then((loaded) => landed(loaded), () => undefined);
+    }, []);
+    const change = (next) => {
+        setValue(next);
+        setStrength(strengthOf(next, meter.current, words));
+        if (next.trim() === '') {
+            setConfirmed(false);
+        }
+    };
+    return {
+        value,
+        strength,
+        confirmed,
+        masked,
+        ready: isReady(value, strength, confirmed),
+        change,
+        generate: () => {
+            change(generatePassword(length));
+            setMasked(false);
+        },
+        confirm: setConfirmed,
+        mask: setMasked,
+    };
+}

package/dist/wpds/users/ChangeRoleDialog.d.ts

@@ -0,0 +1,35 @@
+import type { Trigger, UnsavedText } from '@gopherium/godmin';
+import type { Account } from '../../account.js';
+import type { ErrorMessages, RoleLabels } from './words.js';
+/** What Change role needs from the page. */
+export interface RoleTools {
+    /** The roles the reader may give, the one carrying most capabilities first. */
+    grantable: readonly string[];
+    /** The labels the app gives its own roles. */
+    roleLabels: RoleLabels;
+    /** The words the app gives the error codes only it answers. */
+    errorMessages: ErrorMessages;
+    /** The roles failed changes picked, by the accounts they were for, kept for the next open. */
+    unsaved: UnsavedText;
+    /** Reads the list again. */
+    reload: () => Promise<unknown>;
+}
+/** The Change role dialog the page holds open, on the accounts it acts on and the trigger it opened from. */
+export interface OpenedRole {
+    /** The accounts the dialog acts on. */
+    accounts: Account[];
+    /** The trigger the dialog opened from, which takes the focus back once the dialog is done. */
+    trigger: Trigger;
+}
+/**
+ * Renders the Change role dialog the page holds open, none while it holds none.
+ * @param props - The dialog, what it needs, what takes it away, what clears the selection and the focus back.
+ * @returns The dialog, giving the focus back to its trigger once it closed and once its writes read the list again.
+ */
+export declare function OpenRoleDialog({ opened, tools, onClose, onClearSelection, onBack, }: {
+    opened?: OpenedRole;
+    tools: RoleTools;
+    onClose: () => void;
+    onClearSelection: () => void;
+    onBack: (id: string, trigger: Trigger) => void;
+}): import("react").JSX.Element | null;

package/dist/wpds/users/ChangeRoleDialog.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-License-Identifier: Apache-2.0
+import { bulkNotes, markLatest, runEach, useToaster } from '@gopherium/godmin';
+import { FormDialog } from '@gopherium/godmin/dialogs';
+import { __ } from '@wordpress/i18n';
+import { Text } from '@wordpress/ui';
+import { useState } from 'react';
+import { setUserRole } from '../../admin/index.js';
+import { DOMAIN } from '../../domain.js';
+import { RoleSelect } from './RoleSelect.js';
+import { roleLineOf, roleWords } from './words.js';
+/**
+ * Returns the key the pick of a failed change is kept under, the ids of the accounts it was for.
+ * @param accounts - The accounts the dialog acts on.
+ * @returns The key.
+ */
+function keyOf(accounts) {
+    return accounts.map((account) => account.id).join(' ');
+}
+/**
+ * Returns the role the dialog opens on: the one a failed change kept, else the one account's role the reader may give.
+ * @param accounts - The accounts the dialog acts on.
+ * @param tools - What the dialog needs from the page.
+ * @returns The role, empty for several accounts or for a role the reader may not give.
+ */
+function startingRole(accounts, tools) {
+    const kept = tools.unsaved.get(keyOf(accounts));
+    if (kept !== undefined) {
+        return kept;
+    }
+    const [first] = accounts;
+    return accounts.length === 1 && tools.grantable.includes(first.role) ? first.role : '';
+}
+/**
+ * Writes the role to each account, reads the list again and shows one toast, keeping the pick when a write failed.
+ * @param accounts - The accounts the dialog acts on.
+ * @param role - The role picked.
+ * @param tools - What the dialog needs from the page.
+ * @param toaster - Shows the toast.
+ * @returns What settles once the toast shows.
+ */
+async function changeRoles(accounts, role, tools, toaster) {
+    const key = keyOf(accounts);
+    tools.unsaved.delete(key);
+    const stillLatest = markLatest(tools.unsaved, key);
+    const outcome = await runEach(accounts, (account) => setUserRole(account.id, role));
+    await tools.reload();
+    const notes = bulkNotes(accounts, outcome, roleWords(tools.errorMessages));
+    toaster.show(notes.notice ?? notes.toast);
+    if (outcome.failures.length > 0 && stillLatest()) {
+        tools.unsaved.set(key, role);
+    }
+}
+/**
+ * Renders Change role, closed the moment it is sent as a WordPress row edit closes, on one account or several.
+ * @param props - The accounts, what the dialog needs from the page and what closes, sends and settles it.
+ * @returns The dialog.
+ */
+function ChangeRoleDialog({ accounts, tools, onClose, onSent, onSettled }) {
+    const toaster = useToaster();
+    const [start] = useState(() => startingRole(accounts, tools));
+    const [chosen, setChosen] = useState(start);
+    const send = () => {
+        onSent();
+        onClose();
+        void changeRoles(accounts, chosen, tools, toaster).then(onSettled);
+    };
+    return (_jsxs(FormDialog, { title: __('Change role', DOMAIN), size: "medium", kind: "edit", submitLabel: __('Change role', DOMAIN), cancelLabel: __('Cancel', DOMAIN), canSubmit: chosen !== '', onSubmit: send, onClose: onClose, children: [_jsx(Text, { children: roleLineOf(accounts) }), _jsx(RoleSelect, { grantable: tools.grantable, value: chosen, onChange: setChosen, roleLabels: tools.roleLabels, placeholder: start === '' ? __('Change role to…', DOMAIN) : undefined })] }));
+}
+/**
+ * Renders the Change role dialog the page holds open, none while it holds none.
+ * @param props - The dialog, what it needs, what takes it away, what clears the selection and the focus back.
+ * @returns The dialog, giving the focus back to its trigger once it closed and once its writes read the list again.
+ */
+export function OpenRoleDialog({ opened, tools, onClose, onClearSelection, onBack, }) {
+    if (opened === undefined) {
+        return null;
+    }
+    const back = () => onBack(opened.accounts[0].id, opened.trigger);
+    const close = () => {
+        onClose();
+        back();
+    };
+    const sent = () => {
+        if (opened.trigger === 'bulk') {
+            onClearSelection();
+        }
+    };
+    return _jsx(ChangeRoleDialog, { accounts: opened.accounts, tools: tools, onClose: close, onSent: sent, onSettled: back });
+}

package/dist/wpds/users/ResendModal.d.ts

@@ -0,0 +1,13 @@
+import type { UnsavedText } from '@gopherium/godmin';
+import type { RenderModalProps } from '@wordpress/dataviews';
+import type { Account } from '../../account.js';
+import type { ErrorMessages } from './words.js';
+/**
+ * Renders the confirm sending a pending account a new invitation, closing only itself once the write ends.
+ * @param props - The account, what closes the dialog, the kept activation links and the app's own error words.
+ * @returns The confirm, or the activation link the server answered, kept for the next open if the dialog closed first.
+ */
+export declare function ResendModal({ items: [account], closeModal, links, errorMessages, }: RenderModalProps<Account> & {
+    links: UnsavedText;
+    errorMessages: ErrorMessages;
+}): import("react").JSX.Element;