@gopherium/react-auth 0.12.0 → 0.14.0

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;

package/dist/wpds/password.js

@@ -0,0 +1,35 @@
+// SPDX-License-Identifier: Apache-2.0
+/** The letters, digits and ten symbols a generated password draws from. */
+const CHARACTERS = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()';
+/** The first byte value that would make some characters likelier than others. */
+const UNBIASED_BOUND = 256 - (256 % CHARACTERS.length);
+/** The most bytes crypto.getRandomValues fills in one draw, so the longest password the generator makes. */
+const LONGEST_PASSWORD = 65536;
+/**
+ * Reports whether the generator makes a password this long.
+ * @param length - The number of characters asked for.
+ * @returns True for a whole number from 1 to 65536.
+ */
+function isAllowedLength(length) {
+    return Number.isInteger(length) && length >= 1 && length <= LONGEST_PASSWORD;
+}
+/**
+ * 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 function generatePassword(length) {
+    if (!isAllowedLength(length)) {
+        throw new RangeError(`generatedPasswordLength must be a whole number from 1 to ${LONGEST_PASSWORD}, not ${length}`);
+    }
+    const bytes = new Uint8Array(length);
+    let password = '';
+    while (password.length < length) {
+        crypto.getRandomValues(bytes);
+        const kept = bytes.filter((byte) => byte < UNBIASED_BOUND);
+        for (const byte of kept.slice(0, length - password.length)) {
+            password += CHARACTERS[byte % CHARACTERS.length];
+        }
+    }
+    return password;
+}

package/dist/wpds/setupWords.d.ts

@@ -0,0 +1,13 @@
+import { SetupCodeError } from '../setup.js';
+/**
+ * Returns the sentence for a refused setup code.
+ * @param reason - Why the site refused the code.
+ * @returns The sentence to show.
+ */
+export declare function codeRefusal(reason: SetupCodeError['reason']): string;
+/**
+ * Returns the sentence both setup steps show for a refusal they share.
+ * @param error - The error the setup call threw.
+ * @returns The sentence to show, or undefined for an error the steps do not share.
+ */
+export declare function setupRefusal(error: unknown): string | undefined;

package/dist/wpds/setupWords.js

@@ -0,0 +1,39 @@
+// SPDX-License-Identifier: Apache-2.0
+import { __ } from '@wordpress/i18n';
+import { RateLimitedError } from '../api.js';
+import { DOMAIN } from '../domain.js';
+import { SetupClosedError, SetupCodeError, SiteStartingError } from '../setup.js';
+/** The sentence each reason for a refused setup code shows. */
+const codeWords = {
+    invalid: () => __('Your setup code appears to be invalid. Please copy it again from the setup code file.', DOMAIN),
+    expired: () => __('Your setup code has expired. A new one is waiting in the setup code file.', DOMAIN),
+    file: () => __('The setup code file cannot be used. Please check it and try again.', DOMAIN),
+};
+/**
+ * Returns the sentence for a refused setup code.
+ * @param reason - Why the site refused the code.
+ * @returns The sentence to show.
+ */
+export function codeRefusal(reason) {
+    return codeWords[reason]();
+}
+/**
+ * Returns the sentence both setup steps show for a refusal they share.
+ * @param error - The error the setup call threw.
+ * @returns The sentence to show, or undefined for an error the steps do not share.
+ */
+export function setupRefusal(error) {
+    if (error instanceof SetupCodeError) {
+        return codeRefusal(error.reason);
+    }
+    if (error instanceof SetupClosedError) {
+        return __('You appear to have already set up this site.', DOMAIN);
+    }
+    if (error instanceof SiteStartingError) {
+        return __('The site is starting. Please wait a moment and try again.', DOMAIN);
+    }
+    if (error instanceof RateLimitedError) {
+        return __('Too many attempts. Please try again later.', DOMAIN);
+    }
+    return undefined;
+}

package/dist/wpds/strength.d.ts

@@ -0,0 +1,26 @@
+/** A meter answers a password's strength score, 0 to 4. */
+export type Meter = (password: string, words: string[]) => number;
+/** The tone a strength shows in, named after the class it sets. */
+export type Tone = 'short' | 'bad' | 'good' | 'strong';
+/** The word and tone the meter shows for a score. */
+export interface Level {
+    word: string;
+    tone: Tone;
+}
+/**
+ * Loads zxcvbn on demand as its own chunk.
+ * @returns The meter scoring a password against the given words.
+ */
+export declare function loadMeter(): Promise<Meter>;
+/**
+ * Splits values into the words the meter treats as easy to guess.
+ * @param values - The values the person typed or the page shows.
+ * @returns The distinct words of four characters or more.
+ */
+export declare function disallowedWords(values: string[]): string[];
+/**
+ * Returns the word and tone the meter shows for a score.
+ * @param score - The meter's score, or -1 while it is unknown.
+ * @returns The word and tone.
+ */
+export declare function levelOf(score: number): Level;

package/dist/wpds/strength.js

@@ -0,0 +1,45 @@
+// SPDX-License-Identifier: Apache-2.0
+import { _x } from '@wordpress/i18n';
+import { DOMAIN } from '../domain.js';
+/** The number of leading characters the meter scores. */
+const SCORED_LENGTH = 64;
+/** The fewest characters a word needs to reach the meter. */
+const SHORTEST_WORD = 4;
+/**
+ * Returns the level for every score without one of its own, the lowest two included.
+ * @returns The very weak level.
+ */
+function veryWeak() {
+    return { word: _x('Very weak', 'password strength', DOMAIN), tone: 'short' };
+}
+const levels = new Map([
+    [-1, () => ({ word: _x('Password strength unknown', 'password strength', DOMAIN), tone: 'bad' })],
+    [2, () => ({ word: _x('Weak', 'password strength', DOMAIN), tone: 'bad' })],
+    [3, () => ({ word: _x('Medium', 'password strength', DOMAIN), tone: 'good' })],
+    [4, () => ({ word: _x('Strong', 'password strength', DOMAIN), tone: 'strong' })],
+]);
+/**
+ * Loads zxcvbn on demand as its own chunk.
+ * @returns The meter scoring a password against the given words.
+ */
+export async function loadMeter() {
+    const { default: zxcvbn } = await import('zxcvbn');
+    return (password, words) => zxcvbn(password.slice(0, SCORED_LENGTH), words).score;
+}
+/**
+ * Splits values into the words the meter treats as easy to guess.
+ * @param values - The values the person typed or the page shows.
+ * @returns The distinct words of four characters or more.
+ */
+export function disallowedWords(values) {
+    const words = values.flatMap((value) => value.replace(/\W/g, ' ').split(' '));
+    return words.filter((word, index) => word.length >= SHORTEST_WORD && words.indexOf(word) === index);
+}
+/**
+ * Returns the word and tone the meter shows for a score.
+ * @param score - The meter's score, or -1 while it is unknown.
+ * @returns The word and tone.
+ */
+export function levelOf(score) {
+    return (levels.get(score) ?? veryWeak)();
+}

package/dist/wpds/style.css

@@ -9,11 +9,247 @@
 	box-sizing: border-box;
 }
 
+.gopherium-login__column {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	max-width: 360px;
+}
+
 .gopherium-login__card {
 	width: 100%;
 	max-width: 360px;
 }
 
+.gopherium-login__nav {
+	margin: 24px 0 0;
+	padding: 0 24px;
+	font-size: var(--wpds-typography-font-size-md);
+	line-height: var(--wpds-typography-line-height-sm);
+	text-align: start;
+}
+
+.gopherium-login__nav button {
+	padding: 0;
+	border: 0;
+	background: none;
+	font: inherit;
+	line-height: normal;
+	text-align: inherit;
+	text-decoration-line: underline;
+	cursor: pointer;
+}
+
+.gopherium-login__nav button:hover,
+.gopherium-login__nav button:focus-visible {
+	text-decoration-color: currentColor;
+}
+
+.gopherium-setup .gopherium-setup__heading {
+	margin: 0 0 0.67em;
+	padding-bottom: 7px;
+	border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral);
+	font-size: 24px;
+	font-weight: var(--wpds-typography-font-weight-default);
+	line-height: var(--wpds-typography-line-height-xl);
+}
+
+.gopherium-setup .gopherium-setup__text,
+.gopherium-setup .gopherium-setup__file,
+.gopherium-setup .gopherium-setup__message {
+	margin: 14px 0;
+}
+
+.gopherium-setup .gopherium-setup__text,
+.gopherium-setup .gopherium-setup__message,
+.gopherium-setup .gopherium-setup__help {
+	font-size: 14px;
+	line-height: 1.5;
+}
+
+.gopherium-setup__file {
+	font-size: var(--wpds-typography-font-size-sm);
+	overflow-wrap: anywhere;
+}
+
+.gopherium-setup__message {
+	padding: 0.7em 0.6em;
+	border-inline-start: 4px solid var(--wpds-color-stroke-surface-error-strong);
+	background-color: var(--wpds-color-background-surface-error-weak);
+}
+
+.gopherium-setup__row {
+	display: grid;
+	grid-template-columns: 115px minmax(0, 1fr);
+	column-gap: 20px;
+	padding: 10px 20px 10px 0;
+}
+
+.gopherium-setup__label {
+	font-size: 14px;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
+	line-height: 1.3;
+	text-transform: none;
+}
+
+.gopherium-setup__row input {
+	font-size: var(--wpds-typography-font-size-lg);
+}
+
+.gopherium-setup .gopherium-setup__help {
+	margin: 4px 0 0;
+	color: var(--wpds-color-foreground-content-neutral-weak);
+}
+
+.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 {
+	font-size: 14px;
+}
+
+.gopherium-setup__checkbox [role="checkbox"] > svg {
+	width: calc(100% + 2 * var(--wpds-border-width-xs));
+	height: calc(100% + 2 * var(--wpds-border-width-xs));
+}
+
+.gopherium-setup__password {
+	display: flex;
+	column-gap: 4px;
+}
+
+.gopherium-setup__password-field {
+	width: 100%;
+	min-width: 0;
+}
+
+.gopherium-setup__toggle {
+	flex: none;
+	flex-direction: column;
+	align-self: flex-start;
+	gap: 0;
+	white-space: nowrap;
+}
+
+.gopherium-setup__toggle::after {
+	content: attr(data-other-word);
+	height: 0;
+	overflow: hidden;
+	visibility: hidden;
+}
+
+.gopherium-setup__meter {
+	box-sizing: border-box;
+	width: 100%;
+	margin: -1px 0 5px;
+	padding: 3px 5px;
+	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;
+	opacity: 0;
+}
+
+.gopherium-setup__meter--short {
+	border-color: var(--wpds-color-stroke-surface-error-strong);
+	background-color: var(--wpds-color-background-surface-error);
+	opacity: 1;
+}
+
+.gopherium-setup__meter--bad {
+	border-color: var(--wpds-color-stroke-surface-error);
+	background-color: var(--wpds-color-background-surface-error-weak);
+	opacity: 1;
+}
+
+.gopherium-setup__meter--good {
+	border-color: var(--wpds-color-stroke-surface-caution);
+	background-color: var(--wpds-color-background-surface-caution-weak);
+	opacity: 1;
+}
+
+.gopherium-setup__meter--strong {
+	border-color: var(--wpds-color-stroke-surface-success);
+	background-color: var(--wpds-color-background-surface-success-weak);
+	opacity: 1;
+}
+
+.gopherium-setup__input input {
+	font-family: var(--wpds-typography-font-family-mono);
+}
+
+.gopherium-setup__input--short:not(:focus-within) {
+	border-color: var(--wpds-color-stroke-surface-error-strong);
+}
+
+.gopherium-setup__input--bad:not(:focus-within) {
+	border-color: var(--wpds-color-stroke-surface-error);
+}
+
+.gopherium-setup__input--good:not(:focus-within) {
+	border-color: var(--wpds-color-stroke-surface-caution);
+}
+
+.gopherium-setup__input--strong:not(:focus-within) {
+	border-color: var(--wpds-color-stroke-surface-success);
+}
+
+.gopherium-setup__caps:empty {
+	display: none;
+}
+
+.gopherium-setup__caps {
+	position: relative;
+	top: -8px;
+	display: flex;
+	align-items: flex-start;
+	padding: 6px 10px;
+	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__caps-icon {
+	display: flex;
+	flex: none;
+	justify-content: center;
+	width: 20px;
+	height: 20px;
+	margin-inline-end: 5px;
+}
+
+.gopherium-setup__step {
+	margin: 20px 0 15px;
+	padding: 0;
+	text-align: start;
+}
+
+@media screen and (max-width: 782px) {
+	.gopherium-setup__row {
+		grid-template-columns: minmax(0, 1fr);
+		row-gap: 5px;
+		padding: 20px 0 5px;
+	}
+
+	.gopherium-setup__row input {
+		font-size: 16px;
+	}
+
+	.gopherium-setup__meter {
+		padding: 8px;
+	}
+
+	.gopherium-setup__checkbox {
+		--_wp-ui-checkbox-control-checkbox-height: 25px;
+	}
+}
+
 .gopherium-users {
 	width: 100%;
 	border-collapse: collapse;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gopherium/react-auth",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "Session authentication for React apps backed by gouncer's authkit.",
   "license": "Apache-2.0",
   "type": "module",
@@ -44,7 +44,8 @@
     "access": "public"
   },
   "dependencies": {
-    "zod": "^4.4.3"
+    "zod": "^4.4.3",
+    "zxcvbn": "4.4.1"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.2",
@@ -84,6 +85,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/gettext-parser": "9.0.0",
     "@types/react": "^19.2.17",
+    "@types/zxcvbn": "4.4.5",
     "@vitejs/plugin-react": "^6.0.3",
     "@vitest/coverage-v8": "^5.0.3",
     "@wordpress/i18n": "6.30.0",