@gopherium/react-auth 0.14.0 → 0.16.0

package/dist/wpds/users/words.js

@@ -0,0 +1,151 @@
+// SPDX-License-Identifier: Apache-2.0
+import { formatNumber } from '@gopherium/gottext';
+import { __, _n, _x, sprintf } from '@wordpress/i18n';
+import { DOMAIN } from '../../domain.js';
+/**
+ * Returns the label a role reads as, a role the app names no label for reading as its stored name with a capital.
+ * @param role - The role the server stores, empty for an account holding none.
+ * @param roleLabels - The labels the app gives its own roles.
+ * @returns The label, No role for an empty role the app names no label for.
+ */
+export function roleLabelOf(role, roleLabels = {}) {
+    if (Object.hasOwn(roleLabels, role)) {
+        return roleLabels[role];
+    }
+    return role === '' ? _x('No role', 'role', DOMAIN) : role.charAt(0).toUpperCase() + role.slice(1);
+}
+/**
+ * Returns the words a Role cell reads for an account, None for one holding no role as WordPress writes it.
+ * @param role - The role the server stores, empty for an account holding none.
+ * @param roleLabels - The labels the app gives its own roles.
+ * @returns The words.
+ */
+export function roleCellOf(role, roleLabels) {
+    return role === '' ? _x('None', 'no user roles', DOMAIN) : roleLabelOf(role, roleLabels);
+}
+/**
+ * Returns the words for each error code the account writes answer, WordPress's sentence wherever WordPress has one.
+ * @returns The words, keyed by code, read fresh so the loaded catalogue answers.
+ */
+function codeMessages() {
+    const notGrantable = __('Sorry, you are not allowed to give users that role.', DOMAIN);
+    return {
+        user_not_editable: __('Sorry, you are not allowed to edit this user.', DOMAIN),
+        role_not_grantable: notGrantable,
+        role_unknown: notGrantable,
+        self_role_refused: __('You cannot change your own role.', DOMAIN),
+        self_disable_refused: __('You cannot disable your own account.', DOMAIN),
+        last_privileged_refused: __('Somebody must be able to manage users.', DOMAIN),
+        role_changed: __('The role of that account just changed. Reload the page and try again.', DOMAIN),
+        user_not_found: __('Invalid user ID.', DOMAIN),
+        role_insufficient: __('Sorry, you are not allowed to edit users.', DOMAIN),
+    };
+}
+/**
+ * Returns the code an error carries, as every typed error of the admin calls does.
+ * @param error - What a write failed with.
+ * @returns The code, none for an error carrying no code.
+ */
+function codeOf(error) {
+    const code = error?.code;
+    return typeof code === 'string' ? code : undefined;
+}
+/**
+ * Returns the words a failed account write reads as: the words for its code, else the app's, else the fallback.
+ * @param error - What the write failed with.
+ * @param errorMessages - The words the app gives the codes only it answers.
+ * @param fallback - The words for an error with no code either side words.
+ * @returns The words.
+ */
+export function errorMessageOf(error, errorMessages, fallback) {
+    const code = codeOf(error);
+    if (code === undefined) {
+        return fallback;
+    }
+    const known = codeMessages();
+    if (Object.hasOwn(known, code)) {
+        return known[code];
+    }
+    return Object.hasOwn(errorMessages, code) ? errorMessages[code] : fallback;
+}
+/**
+ * Returns the toast confirming the accounts one Enable or Disable changed.
+ * @param disabled - Whether the accounts were disabled rather than enabled.
+ * @param done - How many accounts changed.
+ * @param only - The one account asked, when only one was.
+ * @returns The confirmation, naming the account whole when only one was asked.
+ */
+function switchedMessage(disabled, done, only) {
+    if (only !== undefined) {
+        const template = disabled ? __('"%(name)s" disabled.', DOMAIN) : __('"%(name)s" enabled.', DOMAIN);
+        return sprintf(template, { name: only.name });
+    }
+    const template = disabled
+        ? _n('%s user disabled.', '%s users disabled.', done, DOMAIN)
+        : _n('%s user enabled.', '%s users enabled.', done, DOMAIN);
+    return sprintf(template, formatNumber(done));
+}
+/**
+ * Returns the toast naming the accounts one Enable or Disable could not change.
+ * @param disabled - Whether the accounts were to be disabled rather than enabled.
+ * @param failures - Each unchanged account with the error it failed with.
+ * @param asked - How many accounts the action was asked to change.
+ * @param errorMessages - The words the app gives the codes only it answers.
+ * @returns The reason for one account, the count for several.
+ */
+function unswitchedMessage(disabled, failures, asked, errorMessages) {
+    if (asked === 1) {
+        const fallback = disabled
+            ? __('The user could not be disabled.', DOMAIN)
+            : __('The user could not be enabled.', DOMAIN);
+        return errorMessageOf(failures[0].error, errorMessages, fallback);
+    }
+    const template = disabled
+        ? _n('%s user could not be disabled.', '%s users could not be disabled.', failures.length, DOMAIN)
+        : _n('%s user could not be enabled.', '%s users could not be enabled.', failures.length, DOMAIN);
+    return sprintf(template, formatNumber(failures.length));
+}
+/**
+ * Returns the line Change role opens with, naming the one account or counting several.
+ * @param accounts - The accounts the dialog acts on.
+ * @returns The line.
+ */
+export function roleLineOf(accounts) {
+    if (accounts.length === 1) {
+        return sprintf(__('Choose the role of %(name)s.', DOMAIN), { name: accounts[0].name });
+    }
+    const template = _n('Choose the role of %s user.', 'Choose the role of %s users.', accounts.length, DOMAIN);
+    return sprintf(template, formatNumber(accounts.length));
+}
+/**
+ * Returns the words a Change role run reports its outcome in, WordPress's Changed roles. for several.
+ * @param errorMessages - The words the app gives the codes only it answers.
+ * @returns The words for the accounts changed, naming one account whole, and for the ones that failed.
+ */
+export function roleWords(errorMessages) {
+    return {
+        done: (_done, only) => only === undefined
+            ? __('Changed roles.', DOMAIN)
+            : sprintf(__('Role changed for "%(name)s".', DOMAIN), { name: only.name }),
+        failed: (failures, asked) => {
+            if (asked === 1) {
+                return errorMessageOf(failures[0].error, errorMessages, __('The role could not be changed.', DOMAIN));
+            }
+            const count = failures.length;
+            const template = _n('The role of %s user could not be changed.', 'The roles of %s users could not be changed.', count, DOMAIN);
+            return sprintf(template, formatNumber(count));
+        },
+    };
+}
+/**
+ * Returns the words an Enable or a Disable run reports its outcome in.
+ * @param disabled - Whether the run disables the accounts rather than enables them.
+ * @param errorMessages - The words the app gives the codes only it answers.
+ * @returns The words for the accounts changed and for the ones that failed.
+ */
+export function switchWords(disabled, errorMessages) {
+    return {
+        done: (done, only) => switchedMessage(disabled, done, only),
+        failed: (failures, asked) => unswitchedMessage(disabled, failures, asked, errorMessages),
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gopherium/react-auth",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "Session authentication for React apps backed by gouncer's authkit.",
   "license": "Apache-2.0",
   "type": "module",
@@ -25,6 +25,10 @@
       "types": "./dist/wpds/index.d.ts",
       "default": "./dist/wpds/index.js"
     },
+    "./wpds/users": {
+      "types": "./dist/wpds/users/index.d.ts",
+      "default": "./dist/wpds/users/index.js"
+    },
     "./wpds/style.css": "./dist/wpds/style.css",
     "./languages/*": "./dist/languages/*",
     "./testing": {
@@ -48,10 +52,16 @@
     "zxcvbn": "4.4.1"
   },
   "peerDependencies": {
+    "@gopherium/godmin": ">=0.28.0 <0.29.0",
+    "@gopherium/gottext": ">=0.6.0 <0.8.0",
     "@tanstack/react-query": "^5.101.2",
     "@testing-library/jest-dom": "^6.9.1 || ^7.0.0",
     "@testing-library/react": "^16.3.2",
+    "@wordpress/components": ">=42.0.0 <43.0.0",
+    "@wordpress/dataviews": ">=20.0.0 <21.0.0",
+    "@wordpress/date": ">=5.57.0 <6.0.0",
     "@wordpress/i18n": ">=6.30.0 <7.0.0",
+    "@wordpress/icons": ">=18.0.0 <19.0.0",
     "@wordpress/theme": ">=2.3.0 <3.0.0",
     "@wordpress/ui": ">=0.24.0 <0.25.0",
     "msw": "^2.15.0",
@@ -59,12 +69,30 @@
     "vitest": "^4.1.10 || ^5.0.0"
   },
   "peerDependenciesMeta": {
+    "@gopherium/godmin": {
+      "optional": true
+    },
+    "@gopherium/gottext": {
+      "optional": true
+    },
     "@testing-library/jest-dom": {
       "optional": true
     },
     "@testing-library/react": {
       "optional": true
     },
+    "@wordpress/components": {
+      "optional": true
+    },
+    "@wordpress/dataviews": {
+      "optional": true
+    },
+    "@wordpress/date": {
+      "optional": true
+    },
+    "@wordpress/icons": {
+      "optional": true
+    },
     "@wordpress/theme": {
       "optional": true
     },
@@ -79,7 +107,10 @@
     }
   },
   "devDependencies": {
+    "@gopherium/godmin": "0.28.0",
+    "@gopherium/gottext": "0.7.0",
     "@tanstack/react-query": "^5.101.2",
+    "@tanstack/react-router": "^1.170.44",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
@@ -88,7 +119,13 @@
     "@types/zxcvbn": "4.4.5",
     "@vitejs/plugin-react": "^6.0.3",
     "@vitest/coverage-v8": "^5.0.3",
+    "@wordpress/a11y": "4.57.0",
+    "@wordpress/components": "42.0.0",
+    "@wordpress/dataviews": "20.0.0",
+    "@wordpress/date": "5.57.0",
     "@wordpress/i18n": "6.30.0",
+    "@wordpress/icons": "18.0.0",
+    "@wordpress/style-runtime": "0.13.0",
     "@wordpress/theme": "2.3.0",
     "@wordpress/ui": "0.24.0",
     "eslint": "^9.39.1",

package/dist/wpds/NewUserScreen.d.ts

@@ -1,9 +0,0 @@
-/**
- * Renders the new user form, sending an invitation and reporting success
- * upward, or showing the activation link when no mail server delivered it.
- * @param onCreated - Called after the invitation is handled.
- * @returns The new user screen element.
- */
-export declare function NewUserScreen({ onCreated, }: {
-    onCreated?: () => void | Promise<void>;
-}): import("react").JSX.Element;

package/dist/wpds/NewUserScreen.js

@@ -1,70 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// SPDX-License-Identifier: Apache-2.0
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { __, _x } from '@wordpress/i18n';
-import { Button, InputControl, Stack, Text } from '@wordpress/ui';
-import { useState } from 'react';
-import { ValidationError, invite, usersQueryKey } from '../admin/index.js';
-import { DOMAIN } from '../domain.js';
-import { Outcome } from './Outcome.js';
-/**
- * Maps the screen's failures to the message shown beside the form,
- * surfacing the backend's explanation for rejected input.
- * @param invited - The error the invitation raised, if any.
- * @param handedOff - The error handing the invitation onward raised, if any.
- * @returns The message to display, or null when nothing failed.
- */
-function failureMessage(invited, handedOff) {
-    if (invited instanceof ValidationError) {
-        return invited.message;
-    }
-    if (invited) {
-        return __('The invitation could not be sent.', DOMAIN);
-    }
-    if (handedOff) {
-        return __('Something went wrong.', DOMAIN);
-    }
-    return null;
-}
-/**
- * Renders the new user form, sending an invitation and reporting success
- * upward, or showing the activation link when no mail server delivered it.
- * @param onCreated - Called after the invitation is handled.
- * @returns The new user screen element.
- */
-export function NewUserScreen({ onCreated, }) {
-    const queryClient = useQueryClient();
-    const [email, setEmail] = useState('');
-    const [name, setName] = useState('');
-    const [activationLink, setActivationLink] = useState(null);
-    const finish = useMutation({
-        mutationFn: async () => {
-            await onCreated?.();
-        },
-    });
-    const create = useMutation({
-        mutationFn: () => invite({ email: email.trim(), name: name.trim() }),
-        onMutate: () => {
-            finish.reset();
-        },
-        onSuccess: async (invitation) => {
-            await queryClient.invalidateQueries({ queryKey: usersQueryKey });
-            if (invitation.delivered) {
-                finish.mutate();
-                return;
-            }
-            setActivationLink(invitation.activation_link);
-        },
-    });
-    const failure = failureMessage(create.error, finish.error);
-    if (activationLink !== null) {
-        return (_jsxs(Stack, { direction: "column", gap: "lg", children: [_jsx(Text, { variant: "heading-lg", render: _jsx("h1", {}), children: _x('New user', 'page heading', DOMAIN) }), _jsx(Outcome, { children: _jsx(Text, { children: __('No mail server is configured. Deliver the activation link by hand.', DOMAIN) }) }), _jsx(InputControl, { label: _x('Activation link', 'field label', DOMAIN), readOnly: true, value: activationLink }), _jsx(Button, { type: "button", disabled: finish.isPending, loading: finish.isPending, onClick: () => finish.mutate(), children: __('Done', DOMAIN) }), failure ? _jsx(Text, { role: "alert", children: failure }) : null] }));
-    }
-    return (_jsxs(Stack, { direction: "column", gap: "lg", children: [_jsx(Text, { variant: "heading-lg", render: _jsx("h1", {}), children: _x('New user', 'page heading', DOMAIN) }), _jsx("form", { onSubmit: (event) => {
-                    event.preventDefault();
-                    create.mutate();
-                }, children: _jsxs(Stack, { direction: "column", gap: "md", children: [_jsx(InputControl, { label: _x('Email', 'field label', DOMAIN), type: "email", autoComplete: "off", value: email, onChange: (event) => setEmail(event.target.value) }), _jsx(InputControl, { label: _x('Name', 'field label', DOMAIN), autoComplete: "off", value: name, onChange: (event) => setName(event.target.value) }), _jsx(Button, { type: "submit", disabled: email.trim() === '' ||
-                                name.trim() === '' ||
-                                create.isPending ||
-                                finish.isPending, loading: create.isPending || finish.isPending, children: __('Send invitation', DOMAIN) }), failure ? _jsx(Text, { role: "alert", children: failure }) : null] }) })] }));
-}

package/dist/wpds/UsersScreen.d.ts

@@ -1,11 +0,0 @@
-import type { ReactElement } from 'react';
-/**
- * Renders the user administration screen: the account list with status and
- * disable controls, plus an optional control to create a new user.
- * @param newUserRender - The navigation element the New user button renders
- * as, typically the app router's link to its create form.
- * @returns The users screen, or a loading or error message.
- */
-export declare function UsersScreen({ newUserRender, }: {
-    newUserRender?: ReactElement<Record<string, unknown>>;
-}): import("react").JSX.Element;

package/dist/wpds/UsersScreen.js

@@ -1,46 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// SPDX-License-Identifier: Apache-2.0
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { __, _x, sprintf } from '@wordpress/i18n';
-import { Badge, Button, Stack, Text, VisuallyHidden } from '@wordpress/ui';
-import { fetchUsers, setUserDisabled, usersQueryKey } from '../admin/index.js';
-import { DOMAIN } from '../domain.js';
-import { useSession } from '../session.js';
-/**
- * Renders one user row with status and a disable toggle, hidden for the
- * signed-in account.
- * @param user - The user the row describes.
- * @param isSelf - Whether the row is the signed-in account.
- * @returns The table row element.
- */
-function UserRow({ user, isSelf }) {
-    const queryClient = useQueryClient();
-    const toggle = useMutation({
-        mutationFn: () => setUserDisabled(user.id, !user.disabled),
-        onSuccess: () => queryClient.invalidateQueries({ queryKey: usersQueryKey }),
-    });
-    return (_jsxs("tr", { children: [_jsx("td", { children: user.name }), _jsx("td", { children: user.email }), _jsx("td", { children: _jsx(Badge, { intent: user.disabled ? 'draft' : 'stable', children: user.disabled ? __('Disabled', DOMAIN) : __('Active', DOMAIN) }) }), _jsx("td", { children: isSelf ? null : (_jsxs(Stack, { direction: "column", gap: "xs", children: [_jsx(Button, { variant: "outline", "aria-label": user.disabled
-                                ? sprintf(__('Enable %s', DOMAIN), user.name)
-                                : sprintf(__('Disable %s', DOMAIN), user.name), disabled: toggle.isPending, onClick: () => toggle.mutate(), children: user.disabled ? __('Enable', DOMAIN) : __('Disable', DOMAIN) }), toggle.isError ? _jsx(Text, { role: "alert", children: __('Update failed.', DOMAIN) }) : null] })) })] }));
-}
-/**
- * Renders the user administration screen: the account list with status and
- * disable controls, plus an optional control to create a new user.
- * @param newUserRender - The navigation element the New user button renders
- * as, typically the app router's link to its create form.
- * @returns The users screen, or a loading or error message.
- */
-export function UsersScreen({ newUserRender, }) {
-    const currentUserId = useSession().data?.id;
-    const users = useQuery({
-        queryKey: usersQueryKey,
-        queryFn: ({ signal }) => fetchUsers(signal),
-    });
-    if (users.isPending) {
-        return _jsx(Text, { role: "status", children: __('Loading users…', DOMAIN) });
-    }
-    if (users.isError) {
-        return _jsx(Text, { role: "alert", children: __('Users could not be loaded.', DOMAIN) });
-    }
-    return (_jsxs(Stack, { direction: "column", gap: "lg", children: [_jsxs(Stack, { direction: "row", align: "center", gap: "md", children: [_jsx(Text, { variant: "heading-lg", render: _jsx("h1", {}), children: _x('Users', 'page heading', DOMAIN) }), newUserRender ? (_jsx(Button, { render: newUserRender, children: _x('New user', 'button', DOMAIN) })) : null] }), _jsxs("table", { className: "gopherium-users", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: _x('Name', 'column', DOMAIN) }), _jsx("th", { scope: "col", children: _x('Email', 'column', DOMAIN) }), _jsx("th", { scope: "col", children: _x('Status', 'column', DOMAIN) }), _jsx("th", { scope: "col", children: _jsx(VisuallyHidden, { children: __('Actions', DOMAIN) }) })] }) }), _jsx("tbody", { children: users.data.map((user) => (_jsx(UserRow, { user: user, isSelf: user.id === currentUserId }, user.id))) })] })] }));
-}