@gopherium/react-auth 0.3.0 → 0.5.0

package/dist/AuthGate.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 // SPDX-License-Identifier: Apache-2.0
 import { useQueryClient } from '@tanstack/react-query';
+import { __ } from '@wordpress/i18n';
+import { DOMAIN } from './domain.js';
 import { sessionQueryKey, useSession } from './session.js';
 /**
  * Guards its children behind a login session, rendering the given login
@@ -11,7 +13,7 @@ import { sessionQueryKey, useSession } from './session.js';
  * @param error - Shown when the session cannot be loaded.
  * @returns The children, the login screen, or a status element.
  */
-export function AuthGate({ children, loginScreen, loading = _jsx("p", { role: "status", children: "Loading\u2026" }), error = _jsx("p", { role: "alert", children: "Something went wrong." }), }) {
+export function AuthGate({ children, loginScreen, loading = _jsx("p", { role: "status", children: __('Loading…', DOMAIN) }), error = _jsx("p", { role: "alert", children: __('Something went wrong.', DOMAIN) }), }) {
     const queryClient = useQueryClient();
     const session = useSession();
     if (session.data === undefined) {

package/dist/admin/index.d.ts

@@ -5,6 +5,7 @@ declare const userSchema: z.ZodObject<{
     email: z.ZodString;
     name: z.ZodString;
     disabled: z.ZodBoolean;
+    rank: z.ZodDefault<z.ZodString>;
     created_at: z.ZodCoercedDate<unknown>;
 }, z.core.$strip>;
 export type User = z.infer<typeof userSchema>;
@@ -12,6 +13,7 @@ export interface NewUser {
     email: string;
     name: string;
     password: string;
+    rank?: string;
 }
 /**
  * EmailTakenError is thrown when a new user's email is already in use.
@@ -24,6 +26,22 @@ export declare class EmailTakenError extends Error {
  */
 export declare class ValidationError extends Error {
 }
+/**
+ * RankRefusedError is thrown when the actor holds no rank the server admits.
+ */
+export declare class RankRefusedError extends Error {
+}
+/**
+ * SelfRankError is thrown when an account changes its own rank.
+ */
+export declare class SelfRankError extends Error {
+}
+/**
+ * LastPrivilegedError is thrown when a write would leave no enabled
+ * account holding a privileged rank.
+ */
+export declare class LastPrivilegedError extends Error {
+}
 /**
  * Returns every user account.
  * @param signal - Aborts the in-flight request.
@@ -42,4 +60,10 @@ export declare function createUser(input: NewUser): Promise<User>;
  * @param disabled - Whether the account should be disabled.
  */
 export declare function setUserDisabled(id: string, disabled: boolean): Promise<void>;
+/**
+ * Sets the rank an account holds.
+ * @param id - The identifier of the account to update.
+ * @param rank - The rank the account is to hold.
+ */
+export declare function setUserRank(id: string, rank: string): Promise<void>;
 export {};

package/dist/admin/index.js

@@ -1,6 +1,8 @@
 // SPDX-License-Identifier: Apache-2.0
+import { __ } from '@wordpress/i18n';
 import { z } from 'zod';
 import { UnauthorizedError } from '../api.js';
+import { DOMAIN } from '../domain.js';
 import { resolveTransport } from '../transport.js';
 export const usersQueryKey = ['users'];
 const userSchema = z.object({
@@ -8,6 +10,7 @@ const userSchema = z.object({
     email: z.string(),
     name: z.string(),
     disabled: z.boolean(),
+    rank: z.string().default(''),
     created_at: z.coerce.date(),
 });
 /**
@@ -21,7 +24,23 @@ export class EmailTakenError extends Error {
  */
 export class ValidationError extends Error {
 }
-const errorSchema = z.object({ error: z.string() });
+/**
+ * RankRefusedError is thrown when the actor holds no rank the server admits.
+ */
+export class RankRefusedError extends Error {
+}
+/**
+ * SelfRankError is thrown when an account changes its own rank.
+ */
+export class SelfRankError extends Error {
+}
+/**
+ * LastPrivilegedError is thrown when a write would leave no enabled
+ * account holding a privileged rank.
+ */
+export class LastPrivilegedError extends Error {
+}
+const errorSchema = z.object({ error: z.string(), code: z.string().optional() });
 /**
  * Extracts the backend's explanation from a failed response body.
  * @param response - The failed HTTP response.
@@ -69,7 +88,7 @@ async function restCreateUser(input) {
         throw new EmailTakenError('email already in use');
     }
     if (response.status === 422) {
-        throw new ValidationError(await errorMessage(response, 'invalid user details'));
+        throw new ValidationError(await errorMessage(response, __('invalid user details', DOMAIN)));
     }
     if (!response.ok) {
         throw new Error(`creating user failed with status ${response.status}`);
@@ -94,6 +113,49 @@ async function restSetUserDisabled(id, disabled) {
         throw new Error(`updating user failed with status ${response.status}`);
     }
 }
+/**
+ * Writes the rank an account holds over REST.
+ * @param id - The identifier of the account to update.
+ * @param rank - The rank the account is to hold.
+ */
+async function restSetUserRank(id, rank) {
+    const response = await fetch(`/api/users/${id}/rank`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ rank }),
+    });
+    if (response.ok) {
+        return;
+    }
+    if (response.status === 401) {
+        throw new UnauthorizedError('session expired');
+    }
+    const refusal = await refusalOf(response);
+    if (refusal.code === 'rank_insufficient') {
+        throw new RankRefusedError(refusal.message);
+    }
+    if (refusal.code === 'self_rank_refused') {
+        throw new SelfRankError(refusal.message);
+    }
+    if (refusal.code === 'last_privileged_refused') {
+        throw new LastPrivilegedError(refusal.message);
+    }
+    throw new Error(`updating rank failed with status ${response.status}`);
+}
+/**
+ * Returns the code and message a refused response carries.
+ * @param response - The refused HTTP response.
+ * @returns The refusal code, if any, and its message.
+ */
+async function refusalOf(response) {
+    try {
+        const held = errorSchema.parse(await response.json());
+        return { code: held.code, message: held.error };
+    }
+    catch {
+        return { message: __('the account could not be updated', DOMAIN) };
+    }
+}
 /**
  * Returns every user account.
  * @param signal - Aborts the in-flight request.
@@ -118,3 +180,11 @@ export async function createUser(input) {
 export async function setUserDisabled(id, disabled) {
     await resolveTransport('setUserDisabled', restSetUserDisabled)(id, disabled);
 }
+/**
+ * Sets the rank an account holds.
+ * @param id - The identifier of the account to update.
+ * @param rank - The rank the account is to hold.
+ */
+export async function setUserRank(id, rank) {
+    await resolveTransport('setUserRank', restSetUserRank)(id, rank);
+}

package/dist/api.d.ts

@@ -3,6 +3,7 @@ declare const userSchema: z.ZodObject<{
     id: z.ZodString;
     email: z.ZodString;
     name: z.ZodString;
+    rank: z.ZodDefault<z.ZodString>;
 }, z.core.$strip>;
 export type User = z.infer<typeof userSchema>;
 /**

package/dist/api.js

@@ -5,6 +5,7 @@ const userSchema = z.object({
     id: z.string(),
     email: z.string(),
     name: z.string(),
+    rank: z.string().default(''),
 });
 /**
  * InvalidCredentialsError is thrown when the backend rejects a login.

package/dist/domain.d.ts

@@ -0,0 +1,2 @@
+/** The text domain every string this package owns is named under. */
+export declare const DOMAIN = "gopherium-react-auth";

package/dist/domain.js

@@ -0,0 +1,3 @@
+// SPDX-License-Identifier: Apache-2.0
+/** The text domain every string this package owns is named under. */
+export const DOMAIN = 'gopherium-react-auth';

package/dist/index.d.ts

@@ -1,6 +1,9 @@
 export { InvalidCredentialsError, RateLimitedError, UnauthorizedError, fetchSession, login, logout, } from './api.js';
 export type { User } from './api.js';
 export { AuthGate } from './AuthGate.js';
+export { DOMAIN } from './domain.js';
+export { catalogFor } from './languages.js';
+export type { Catalog } from './languages.js';
 export { isSessionRevoked } from './probe.js';
 export { createAuthQueryClient } from './queryClient.js';
 export { sessionQueryKey, useLogout, useSession } from './session.js';

package/dist/index.js

@@ -1,6 +1,8 @@
 // SPDX-License-Identifier: Apache-2.0
 export { InvalidCredentialsError, RateLimitedError, UnauthorizedError, fetchSession, login, logout, } from './api.js';
 export { AuthGate } from './AuthGate.js';
+export { DOMAIN } from './domain.js';
+export { catalogFor } from './languages.js';
 export { isSessionRevoked } from './probe.js';
 export { createAuthQueryClient } from './queryClient.js';
 export { sessionQueryKey, useLogout, useSession } from './session.js';

package/dist/languages/es-ES.json

@@ -0,0 +1 @@
+{ "": { "lang": "es-ES", "plural-forms": "nplurals=2; plural=(n != 1);" }, "Actions": ["Acciones"], "Active": ["Activo"], "Create user": ["Crear usuario"], "Disable": ["Desactivar"], "Disable %s": ["Desactivar a %s"], "Disabled": ["Desactivado"], "Enable": ["Activar"], "Enable %s": ["Activar a %s"], "Invalid email or password.": ["Correo o contraseña no válidos."], "Loading users…": ["Cargando usuarios…"], "Loading…": ["Cargando…"], "Log in": ["Iniciar sesión"], "Log out": ["Cerrar sesión"], "Login failed, please try again.": ["No se pudo iniciar sesión, inténtalo de nuevo."], "Logout failed, please try again.": ["No se pudo cerrar sesión, inténtalo de nuevo."], "Password": ["Contraseña"], "Something went wrong.": ["Algo ha ido mal."], "That email is already in use.": ["Ese correo ya está en uso."], "The user could not be created.": ["No se pudo crear el usuario."], "Too many attempts. Please wait a minute and try again.": ["Demasiados intentos. Espera un minuto e inténtalo de nuevo."], "Update failed.": ["No se pudo actualizar."], "Users could not be loaded.": ["No se pudieron cargar los usuarios."], "admin section\u0004Users": ["Usuarios"], "button\u0004New user": ["Nuevo usuario"], "column\u0004Email": ["Correo"], "column\u0004Name": ["Nombre"], "column\u0004Status": ["Estado"], "field label\u0004Email": ["Correo"], "field label\u0004Name": ["Nombre"], "invalid user details": ["datos de usuario no válidos"], "page heading\u0004New user": ["Nuevo usuario"], "page heading\u0004Users": ["Usuarios"], "the account could not be updated": ["no se ha podido actualizar la cuenta"] }

package/dist/languages/languages/es-ES.json

@@ -0,0 +1 @@
+{"":{"lang":"es-ES","plural-forms":"nplurals=2; plural=(n != 1);"},"Actions":["Acciones"],"Active":["Activo"],"Create user":["Crear usuario"],"Disable":["Desactivar"],"Disable %s":["Desactivar a %s"],"Disabled":["Desactivado"],"Enable":["Activar"],"Enable %s":["Activar a %s"],"Invalid email or password.":["Correo o contraseña no válidos."],"Loading users…":["Cargando usuarios…"],"Loading…":["Cargando…"],"Log in":["Iniciar sesión"],"Log out":["Cerrar sesión"],"Login failed, please try again.":["No se pudo iniciar sesión, inténtalo de nuevo."],"Logout failed, please try again.":["No se pudo cerrar sesión, inténtalo de nuevo."],"Password":["Contraseña"],"Something went wrong.":["Algo ha ido mal."],"That email is already in use.":["Ese correo ya está en uso."],"The user could not be created.":["No se pudo crear el usuario."],"Too many attempts. Please wait a minute and try again.":["Demasiados intentos. Espera un minuto e inténtalo de nuevo."],"Update failed.":["No se pudo actualizar."],"Users could not be loaded.":["No se pudieron cargar los usuarios."],"admin section\u0004Users":["Usuarios"],"button\u0004New user":["Nuevo usuario"],"column\u0004Email":["Correo"],"column\u0004Name":["Nombre"],"column\u0004Status":["Estado"],"field label\u0004Email":["Correo"],"field label\u0004Name":["Nombre"],"invalid user details":["datos de usuario no válidos"],"page heading\u0004New user":["Nuevo usuario"],"page heading\u0004Users":["Usuarios"],"the account could not be updated":["no se ha podido actualizar la cuenta"]}

package/dist/languages.d.ts

@@ -0,0 +1,8 @@
+/** A compiled catalogue, keyed by message with the metadata entry first. */
+export type Catalog = Record<string, string[] | Record<string, string>>;
+/**
+ * Returns the catalogue this package ships for a language.
+ * @param locale - The language the reader settled on.
+ * @returns The catalogue, or nothing when the package ships none for it.
+ */
+export declare function catalogFor(locale: string): Promise<Catalog | undefined>;

package/dist/languages.js

@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: Apache-2.0
+/** The catalogue this package ships for each language it has one for. */
+const SHIPPED = {
+    'es-ES': () => import('./languages/es-ES.json', { with: { type: 'json' } }),
+};
+/**
+ * Returns the catalogue this package ships for a language.
+ * @param locale - The language the reader settled on.
+ * @returns The catalogue, or nothing when the package ships none for it.
+ */
+export async function catalogFor(locale) {
+    const load = SHIPPED[locale];
+    return load === undefined ? undefined : (await load()).default;
+}

package/dist/session.d.ts

@@ -10,6 +10,7 @@ export declare function useSession(): import("@tanstack/react-query").UseQueryRe
     id: string;
     email: string;
     name: string;
+    rank: string;
 } | null>, Error>;
 /**
  * Ends the current session and drops all cached data belonging to the

package/dist/testing/index.d.ts

@@ -11,6 +11,17 @@ export declare function installTestEnvironment(): void;
  * defaultUser is the canned account tests sign in as.
  */
 export declare const defaultUser: User;
+/**
+ * Returns a canned account holding the given rank, one identifier per rank.
+ * @param rank - The rank the account holds.
+ * @returns The account.
+ */
+export declare function rankedUser(rank: string): User;
+/**
+ * Accepts a rank change.
+ * @returns The msw handler.
+ */
+export declare function rankOk(): import("msw").HttpHandler;
 /**
  * Seeds the cached session so components render signed in without a fetch.
  * @param client - The query client under test.

package/dist/testing/index.js

@@ -25,7 +25,34 @@ export const defaultUser = {
     id: '0198b2f0-0000-7000-8000-000000000001',
     email: 'grace@example.com',
     name: 'Grace Hopper',
+    rank: '',
 };
+/**
+ * Returns a canned account holding the given rank, one identifier per rank.
+ * @param rank - The rank the account holds.
+ * @returns The account.
+ */
+export function rankedUser(rank) {
+    let held = 2166136261;
+    for (const letter of rank) {
+        held ^= letter.charCodeAt(0);
+        held = Math.imul(held, 16777619);
+    }
+    held >>>= 0;
+    return {
+        id: `0198b2f0-0000-7000-8000-${String(held).padStart(12, '0')}`,
+        email: `${rank}@example.com`,
+        name: `Maria Perez the ${rank}`,
+        rank,
+    };
+}
+/**
+ * Accepts a rank change.
+ * @returns The msw handler.
+ */
+export function rankOk() {
+    return http.put('/api/users/:id/rank', () => new HttpResponse(null, { status: 204 }));
+}
 /**
  * Seeds the cached session so components render signed in without a fetch.
  * @param client - The query client under test.

package/dist/transport.d.ts

@@ -14,6 +14,7 @@ export interface AuthTransport {
     fetchUsers(signal?: AbortSignal): Promise<Account[]>;
     createUser(input: NewUser): Promise<Account>;
     setUserDisabled(id: string, disabled: boolean): Promise<void>;
+    setUserRank(id: string, rank: string): Promise<void>;
 }
 /**
  * Replaces backend calls with the given implementations, keeping the REST

package/dist/wpds/AccountPanel.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: Apache-2.0
+import { __ } from '@wordpress/i18n';
 import { Button, Stack, Text } from '@wordpress/ui';
+import { DOMAIN } from '../domain.js';
 import { useLogout, useSession } from '../session.js';
 /**
  * Renders the signed-in user's identity with a logout control, or nothing
@@ -14,5 +16,5 @@ export function AccountPanel({ className }) {
     if (!user) {
         return null;
     }
-    return (_jsxs(Stack, { direction: "column", gap: "sm", className: className, children: [_jsx(Text, { children: user.name }), _jsx(Button, { variant: "outline", loading: signOut.isPending, onClick: () => signOut.mutate(), children: "Log out" }), signOut.isError ? (_jsx(Text, { role: "alert", children: "Logout failed, please try again." })) : null] }));
+    return (_jsxs(Stack, { direction: "column", gap: "sm", className: className, children: [_jsx(Text, { children: user.name }), _jsx(Button, { variant: "outline", loading: signOut.isPending, onClick: () => signOut.mutate(), children: __('Log out', DOMAIN) }), signOut.isError ? (_jsx(Text, { role: "alert", children: __('Logout failed, please try again.', DOMAIN) })) : null] }));
 }

package/dist/wpds/LoginScreen.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: Apache-2.0
 import { useMutation } from '@tanstack/react-query';
+import { __, _x } from '@wordpress/i18n';
 import { Button, Card, InputControl, Stack, Text } from '@wordpress/ui';
 import { useState } from 'react';
 import { InvalidCredentialsError, RateLimitedError, login } from '../api.js';
+import { DOMAIN } from '../domain.js';
 /**
  * Maps a login attempt error to the message shown to the user.
  * @param error - The error thrown by the login attempt.
@@ -11,12 +13,12 @@ import { InvalidCredentialsError, RateLimitedError, login } from '../api.js';
  */
 function loginErrorMessage(error) {
     if (error instanceof InvalidCredentialsError) {
-        return 'Invalid email or password.';
+        return __('Invalid email or password.', DOMAIN);
     }
     if (error instanceof RateLimitedError) {
-        return 'Too many attempts. Please wait a minute and try again.';
+        return __('Too many attempts. Please wait a minute and try again.', DOMAIN);
     }
-    return 'Login failed, please try again.';
+    return __('Login failed, please try again.', DOMAIN);
 }
 /**
  * Renders the login form and reports the authenticated user upward.
@@ -34,5 +36,5 @@ export function LoginScreen({ brand, onLogin, }) {
     return (_jsx("div", { className: "gopherium-login", children: _jsx(Card.Root, { className: "gopherium-login__card", children: _jsx(Card.Content, { children: _jsx("form", { onSubmit: (event) => {
                         event.preventDefault();
                         attempt.mutate();
-                    }, children: _jsxs(Stack, { direction: "column", gap: "lg", children: [_jsx(Text, { variant: "heading-lg", render: _jsx("h1", {}), children: brand }), _jsx(InputControl, { label: "Email", type: "email", value: email, onChange: (event) => setEmail(event.target.value) }), _jsx(InputControl, { label: "Password", type: "password", value: password, onChange: (event) => setPassword(event.target.value) }), _jsx(Button, { type: "submit", disabled: email.trim() === '' || password === '' || attempt.isPending, loading: attempt.isPending, children: "Log in" }), attempt.isError ? (_jsx(Text, { role: "alert", children: loginErrorMessage(attempt.error) })) : null] }) }) }) }) }));
+                    }, children: _jsxs(Stack, { direction: "column", gap: "lg", children: [_jsx(Text, { variant: "heading-lg", render: _jsx("h1", {}), children: brand }), _jsx(InputControl, { label: _x('Email', 'field label', DOMAIN), type: "email", value: email, onChange: (event) => setEmail(event.target.value) }), _jsx(InputControl, { label: __('Password', DOMAIN), type: "password", value: password, onChange: (event) => setPassword(event.target.value) }), _jsx(Button, { type: "submit", disabled: email.trim() === '' || password === '' || attempt.isPending, loading: attempt.isPending, children: __('Log in', DOMAIN) }), attempt.isError ? (_jsx(Text, { role: "alert", children: loginErrorMessage(attempt.error) })) : null] }) }) }) }) }));
 }

package/dist/wpds/NewUserScreen.js

@@ -1,9 +1,11 @@
 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 { EmailTakenError, ValidationError, createUser, usersQueryKey } from '../admin/index.js';
+import { DOMAIN } from '../domain.js';
 /**
  * Maps a creation failure to the message shown under the form, surfacing
  * the backend's explanation for rejected input.
@@ -12,12 +14,12 @@ import { EmailTakenError, ValidationError, createUser, usersQueryKey } from '../
  */
 function createErrorMessage(error) {
     if (error instanceof EmailTakenError) {
-        return 'That email is already in use.';
+        return __('That email is already in use.', DOMAIN);
     }
     if (error instanceof ValidationError) {
         return error.message;
     }
-    return 'The user could not be created.';
+    return __('The user could not be created.', DOMAIN);
 }
 /**
  * Renders the new user form, creating an account and reporting success
@@ -37,11 +39,11 @@ export function NewUserScreen({ onCreated, }) {
             await onCreated?.();
         },
     });
-    return (_jsxs(Stack, { direction: "column", gap: "lg", children: [_jsx(Text, { variant: "heading-lg", render: _jsx("h1", {}), children: "New user" }), _jsx("form", { onSubmit: (event) => {
+    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: "Email", type: "email", autoComplete: "off", value: email, onChange: (event) => setEmail(event.target.value) }), _jsx(InputControl, { label: "Name", autoComplete: "off", value: name, onChange: (event) => setName(event.target.value) }), _jsx(InputControl, { label: "Password", type: "password", autoComplete: "new-password", value: password, onChange: (event) => setPassword(event.target.value) }), _jsx(Button, { type: "submit", disabled: email.trim() === '' ||
+                }, 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(InputControl, { label: __('Password', DOMAIN), type: "password", autoComplete: "new-password", value: password, onChange: (event) => setPassword(event.target.value) }), _jsx(Button, { type: "submit", disabled: email.trim() === '' ||
                                 name.trim() === '' ||
                                 password === '' ||
-                                create.isPending, children: "Create user" }), create.isError ? (_jsx(Text, { role: "alert", children: createErrorMessage(create.error) })) : null] }) })] }));
+                                create.isPending, children: __('Create user', DOMAIN) }), create.isError ? (_jsx(Text, { role: "alert", children: createErrorMessage(create.error) })) : null] }) })] }));
 }

package/dist/wpds/UsersScreen.js

@@ -1,8 +1,10 @@
 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
@@ -17,7 +19,9 @@ function UserRow({ user, isSelf }) {
         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' : 'Active' }) }), _jsx("td", { children: isSelf ? null : (_jsxs(Stack, { direction: "column", gap: "xs", children: [_jsx(Button, { variant: "outline", "aria-label": `${user.disabled ? 'Enable' : 'Disable'} ${user.name}`, disabled: toggle.isPending, onClick: () => toggle.mutate(), children: user.disabled ? 'Enable' : 'Disable' }), toggle.isError ? _jsx(Text, { role: "alert", children: "Update failed." }) : null] })) })] }));
+    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
@@ -33,10 +37,10 @@ export function UsersScreen({ newUserRender, }) {
         queryFn: ({ signal }) => fetchUsers(signal),
     });
     if (users.isPending) {
-        return _jsx(Text, { role: "status", children: "Loading users\u2026" });
+        return _jsx(Text, { role: "status", children: __('Loading users…', DOMAIN) });
     }
     if (users.isError) {
-        return _jsx(Text, { role: "alert", children: "Users could not be loaded." });
+        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: "Users" }), newUserRender ? _jsx(Button, { render: newUserRender, children: "New user" }) : null] }), _jsxs("table", { className: "gopherium-users", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Name" }), _jsx("th", { scope: "col", children: "Email" }), _jsx("th", { scope: "col", children: "Status" }), _jsx("th", { scope: "col", children: _jsx(VisuallyHidden, { children: "Actions" }) })] }) }), _jsx("tbody", { children: users.data.map((user) => (_jsx(UserRow, { user: user, isSelf: user.id === currentUserId }, user.id))) })] })] }));
+    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))) })] })] }));
 }

package/dist/wpds/nav.js

@@ -1,7 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+// SPDX-License-Identifier: Apache-2.0
+import { _x } from '@wordpress/i18n';
+import { DOMAIN } from '../domain.js';
 const usersIcon = (_jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: _jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }));
 /**
  * usersNavItem is the ready-made navigation entry for the user
  * administration screen.
  */
-export const usersNavItem = { label: 'Users', to: '/users', icon: usersIcon };
+export const usersNavItem = {
+    get label() {
+        return _x('Users', 'admin section', DOMAIN);
+    },
+    to: '/users',
+    icon: usersIcon,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gopherium/react-auth",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Session authentication for React apps backed by gouncer's authkit.",
   "license": "Apache-2.0",
   "type": "module",
@@ -26,14 +26,17 @@
       "default": "./dist/wpds/index.js"
     },
     "./wpds/style.css": "./dist/wpds/style.css",
+    "./languages/*": "./dist/languages/*",
     "./testing": {
       "types": "./dist/testing/index.d.ts",
       "default": "./dist/testing/index.js"
     }
   },
   "scripts": {
-    "build": "tsc -p tsconfig.build.json && cp src/wpds/style.css dist/wpds/style.css",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp src/wpds/style.css dist/wpds/style.css && cp -R src/languages dist/languages",
+    "catalogs": "node scripts/write-catalogs.ts",
     "cover": "vitest run --coverage",
+    "pot": "node scripts/write-pot.ts",
     "lint": "oxlint",
     "prepublishOnly": "pnpm run build"
   },
@@ -47,6 +50,7 @@
     "@tanstack/react-query": "^5.101.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@wordpress/i18n": ">=6.26.0 <7.0.0",
     "@wordpress/theme": ">=1.0.0 <2.0.0",
     "@wordpress/ui": ">=0.19.0 <0.20.0",
     "msw": "^2.15.0",
@@ -78,15 +82,19 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
+    "@types/gettext-parser": "9.0.0",
     "@types/react": "^19.2.17",
     "@vitejs/plugin-react": "^6.0.3",
     "@vitest/coverage-v8": "^4.1.10",
+    "@wordpress/i18n": "6.26.0",
     "@wordpress/theme": "1.1.0",
     "@wordpress/ui": "0.19.0",
     "eslint": "^9.39.1",
     "eslint-plugin-jsdoc": "^63.0.13",
     "eslint-plugin-sonarjs": "^4.2.0",
     "eslint-plugin-tsdoc": "^0.4.0",
+    "gettext-extractor": "4.0.6",
+    "gettext-parser": "9.1.1",
     "jsdom": "^29.1.1",
     "msw": "^2.15.0",
     "oxlint": "^1.71.0",