@fuzdev/fuz_app 0.1.1 → 0.2.0

package/dist/ui/BootstrapForm.svelte

@@ -5,9 +5,10 @@
 	import {Username} from '../auth/account_schema.js';
 	import {PASSWORD_LENGTH_MIN} from '../auth/password.js';
 	import {auth_state_context} from './auth_state.svelte.js';
-	import {enter_advance} from './enter_advance.js';
+	import {FormState} from './form_state.svelte.js';
 
 	const auth_state = auth_state_context.get();
+	const form_state = new FormState();
 
 	let token = $state('');
 	let username = $state('');
@@ -21,11 +22,19 @@
 			username.trim() &&
 			username_valid &&
 			password.length >= PASSWORD_LENGTH_MIN &&
-			passwords_match,
+			passwords_match &&
+			!auth_state.verifying,
 	);
 
 	const handle_bootstrap = async (): Promise<void> => {
-		if (!can_submit) return;
+		form_state.attempt();
+		if (!can_submit) {
+			if (!token.trim()) form_state.focus('token');
+			else if (!username.trim() || !username_valid) form_state.focus('username');
+			else if (password.length < PASSWORD_LENGTH_MIN) form_state.focus('password');
+			else if (!passwords_match) form_state.focus('password_confirm');
+			return;
+		}
 		await auth_state.bootstrap(token.trim(), username.trim(), password);
 	};
 </script>
@@ -39,11 +48,12 @@
 		e.preventDefault();
 		void handle_bootstrap();
 	}}
-	{@attach enter_advance()}
+	{@attach form_state.form()}
 >
 	<label>
 		<div class="title">bootstrap token</div>
 		<input
+			name="token"
 			type="password"
 			bind:value={token}
 			placeholder="paste token"
@@ -54,6 +64,7 @@
 	<label>
 		<div class="title">username</div>
 		<input
+			name="username"
 			type="text"
 			bind:value={username}
 			placeholder="admin"
@@ -61,7 +72,7 @@
 			disabled={auth_state.verifying}
 		/>
 	</label>
-	{#if username && !username_valid}
+	{#if form_state.show('username') && username && !username_valid}
 		<p class="color_c_50 font_size_sm mt_0 mb_xs">
 			3-39 chars, starts with a letter, ends with letter/number, middle allows dash/underscore
 		</p>
@@ -71,6 +82,7 @@
 		<label>
 			<div class="title">password (min {PASSWORD_LENGTH_MIN} characters)</div>
 			<input
+				name="password"
 				type="password"
 				bind:value={password}
 				placeholder="password"
@@ -78,9 +90,15 @@
 				disabled={auth_state.verifying}
 			/>
 		</label>
+		{#if form_state.show('password') && password && password.length < PASSWORD_LENGTH_MIN}
+			<p class="color_c_50 font_size_sm mt_0 mb_xs">
+				password must be at least {PASSWORD_LENGTH_MIN} characters
+			</p>
+		{/if}
 		<label>
 			<div class="title">confirm password</div>
 			<input
+				name="password_confirm"
 				type="password"
 				bind:value={password_confirm}
 				placeholder="confirm password"
@@ -88,14 +106,14 @@
 				disabled={auth_state.verifying}
 			/>
 		</label>
-		{#if password && password_confirm && !passwords_match}
+		{#if form_state.show('password_confirm') && password && password_confirm && !passwords_match}
 			<p class="color_c_50 font_size_sm mt_0 mb_xs">passwords do not match</p>
 		{/if}
 	</fieldset>
 	<div class="row gap_sm">
 		<PendingButton
 			pending={auth_state.verifying}
-			disabled={!can_submit}
+			disabled={auth_state.verifying}
 			onclick={handle_bootstrap}
 			class={auth_state.verify_error ? 'color_c' : ''}
 		>

package/dist/ui/BootstrapForm.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BootstrapForm.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/BootstrapForm.svelte"],"names":[],"mappings":"AAwFA,QAAA,MAAM,aAAa,2DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"BootstrapForm.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/BootstrapForm.svelte"],"names":[],"mappings":"AAsGA,QAAA,MAAM,aAAa,2DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/ui/LoginForm.svelte

@@ -5,7 +5,7 @@
 	import {autofocus} from '@fuzdev/fuz_ui/autofocus.svelte.js';
 
 	import {auth_state_context} from './auth_state.svelte.js';
-	import {enter_advance} from './enter_advance.js';
+	import {FormState} from './form_state.svelte.js';
 
 	const {
 		username_label = 'username or email',
@@ -16,6 +16,7 @@
 	} = $props();
 
 	const auth_state = auth_state_context.get();
+	const form_state = new FormState();
 
 	let username = $state('');
 	let password = $state('');
@@ -23,13 +24,20 @@
 	const handle_login = async (): Promise<void> => {
 		const u = username.trim();
 		const p = password;
-		if (u && p) {
-			const success = await auth_state.login(u, p);
-			if (success) {
-				username = '';
-				password = '';
-				await goto(redirect_on_login);
-			}
+		if (!u) {
+			form_state.focus('username');
+			return;
+		}
+		if (!p) {
+			form_state.focus('password');
+			return;
+		}
+		const success = await auth_state.login(u, p);
+		if (success) {
+			form_state.reset();
+			username = '';
+			password = '';
+			await goto(redirect_on_login);
 		}
 	};
 </script>
@@ -43,11 +51,12 @@
 		e.preventDefault();
 		void handle_login();
 	}}
-	{@attach enter_advance()}
+	{@attach form_state.form()}
 >
 	<label>
 		<div class="title">{username_label}</div>
 		<input
+			name="username"
 			type="text"
 			bind:value={username}
 			placeholder={username_label}
@@ -59,6 +68,7 @@
 	<label>
 		<div class="title">password</div>
 		<input
+			name="password"
 			type="password"
 			bind:value={password}
 			placeholder="password"
@@ -69,7 +79,7 @@
 	<div class="row gap_sm">
 		<PendingButton
 			pending={auth_state.verifying}
-			disabled={!username.trim() || !password}
+			disabled={auth_state.verifying}
 			onclick={handle_login}
 			class={auth_state.verify_error ? 'color_c' : ''}
 		>

package/dist/ui/LoginForm.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoginForm.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/LoginForm.svelte"],"names":[],"mappings":"AAWC,KAAK,gBAAgB,GAAI;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AA4DH,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"LoginForm.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/LoginForm.svelte"],"names":[],"mappings":"AAWC,KAAK,gBAAgB,GAAI;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAoEH,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/ui/SignupForm.svelte

@@ -7,7 +7,7 @@
 	import {Username} from '../auth/account_schema.js';
 	import {PASSWORD_LENGTH_MIN} from '../auth/password.js';
 	import {auth_state_context} from './auth_state.svelte.js';
-	import {enter_advance} from './enter_advance.js';
+	import {FormState} from './form_state.svelte.js';
 
 	const {
 		redirect_on_signup = resolve('/account' as any),
@@ -16,6 +16,7 @@
 	} = $props();
 
 	const auth_state = auth_state_context.get();
+	const form_state = new FormState();
 
 	let username = $state('');
 	let email = $state('');
@@ -33,9 +34,16 @@
 	);
 
 	const handle_signup = async (): Promise<void> => {
-		if (!can_submit) return;
+		form_state.attempt();
+		if (!can_submit) {
+			if (!username.trim() || !username_valid) form_state.focus('username');
+			else if (password.length < PASSWORD_LENGTH_MIN) form_state.focus('password');
+			else if (!passwords_match) form_state.focus('password_confirm');
+			return;
+		}
 		const success = await auth_state.signup(username.trim(), password, email.trim() || undefined);
 		if (success) {
+			form_state.reset();
 			await goto(redirect_on_signup);
 		}
 	};
@@ -50,11 +58,12 @@
 		e.preventDefault();
 		void handle_signup();
 	}}
-	{@attach enter_advance()}
+	{@attach form_state.form()}
 >
 	<label>
 		<div class="title">username</div>
 		<input
+			name="username"
 			type="text"
 			bind:value={username}
 			placeholder="username"
@@ -63,7 +72,7 @@
 			{@attach autofocus()}
 		/>
 	</label>
-	{#if username && !username_valid}
+	{#if form_state.show('username') && username && !username_valid}
 		<p class="color_c_50 font_size_sm mt_0 mb_xs">
 			3-39 chars, starts with a letter, ends with letter/number, middle allows dash/underscore
 		</p>
@@ -71,6 +80,7 @@
 	<label>
 		<div class="title">email (optional)</div>
 		<input
+			name="email"
 			type="email"
 			bind:value={email}
 			placeholder="email"
@@ -83,6 +93,7 @@
 		<label>
 			<div class="title">password (min {PASSWORD_LENGTH_MIN} characters)</div>
 			<input
+				name="password"
 				type="password"
 				bind:value={password}
 				placeholder="password"
@@ -90,9 +101,15 @@
 				disabled={auth_state.verifying}
 			/>
 		</label>
+		{#if form_state.show('password') && password && password.length < PASSWORD_LENGTH_MIN}
+			<p class="color_c_50 font_size_sm mt_0 mb_xs">
+				password must be at least {PASSWORD_LENGTH_MIN} characters
+			</p>
+		{/if}
 		<label>
 			<div class="title">confirm password</div>
 			<input
+				name="password_confirm"
 				type="password"
 				bind:value={password_confirm}
 				placeholder="confirm password"
@@ -100,14 +117,14 @@
 				disabled={auth_state.verifying}
 			/>
 		</label>
-		{#if password && password_confirm && !passwords_match}
+		{#if form_state.show('password_confirm') && password && password_confirm && !passwords_match}
 			<p class="color_c_50 font_size_sm mt_0 mb_xs">passwords do not match</p>
 		{/if}
 	</fieldset>
 	<div class="row gap_sm">
 		<PendingButton
 			pending={auth_state.verifying}
-			disabled={!can_submit}
+			disabled={auth_state.verifying}
 			onclick={handle_signup}
 			class={auth_state.verify_error ? 'color_c' : ''}
 		>

package/dist/ui/SignupForm.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SignupForm.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/SignupForm.svelte"],"names":[],"mappings":"AAaC,KAAK,gBAAgB,GAAI;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAuFH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"SignupForm.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/SignupForm.svelte"],"names":[],"mappings":"AAaC,KAAK,gBAAgB,GAAI;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAoGH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/ui/form_state.svelte.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Reactive form state for controlling when field errors appear and focusing invalid fields.
+ *
+ * Tracks per-field `touched` state (set on blur via delegated `focusout`) and form-level
+ * `attempted` state (set on submit attempt). Errors show after a field is blurred or
+ * after a submit attempt, avoiding premature validation while the user is still typing.
+ *
+ * The {@link FormState.form | form} attachment also handles Enter key advancing
+ * between focusable elements.
+ *
+ * All trackable inputs must have a `name` attribute — an error is thrown in dev
+ * if an input without `name` loses focus.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   const form_state = new FormState();
+ *   let username = $state('');
+ *   const username_valid = $derived(Username.safeParse(username).success);
+ *   const can_submit = $derived(username.trim() && username_valid);
+ *
+ *   const handle_submit = async () => {
+ *     form_state.attempt();
+ *     if (!can_submit) {
+ *       if (!username.trim() || !username_valid) form_state.focus('username');
+ *       return;
+ *     }
+ *     // submit...
+ *   };
+ * </script>
+ *
+ * <form {@attach form_state.form()} onsubmit={(e) => { e.preventDefault(); void handle_submit(); }}>
+ *   <input name="username" bind:value={username} />
+ *   {#if form_state.show('username') && username && !username_valid}
+ *     <p>error message</p>
+ *   {/if}
+ *   <PendingButton onclick={handle_submit}>submit</PendingButton>
+ * </form>
+ * ```
+ *
+ * @module
+ */
+import type { Attachment } from 'svelte/attachments';
+export declare class FormState {
+    #private;
+    /**
+     * Whether a submit attempt has been made.
+     */
+    get attempted(): boolean;
+    /**
+     * Creates a form attachment that handles Enter key advancing between
+     * focusable elements and tracks field touched state via delegated `focusout`.
+     *
+     * Fields are identified by their `name` attribute.
+     */
+    form(): Attachment<HTMLFormElement>;
+    /**
+     * Whether a field has been blurred at least once.
+     */
+    is_touched(field: string): boolean;
+    /**
+     * Whether to show validation errors for a field.
+     * Returns `true` if the field has been blurred or a submit attempt was made.
+     */
+    show(field: string): boolean;
+    /**
+     * Programmatically marks a field as touched without requiring a blur event.
+     */
+    touch(field: string): void;
+    /**
+     * Focuses the named input within the form.
+     */
+    focus(field: string): void;
+    /**
+     * Marks the form as having been submitted, causing all field errors to show.
+     */
+    attempt(): void;
+    /**
+     * Resets all touched and attempted state.
+     */
+    reset(): void;
+}
+//# sourceMappingURL=form_state.svelte.d.ts.map

package/dist/ui/form_state.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form_state.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/form_state.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAEH,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAC;AASnD,qBAAa,SAAS;;IAKrB;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED;;;;;OAKG;IACH,IAAI,IAAI,UAAU,CAAC,eAAe,CAAC;IAuCnC;;OAEG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIlC;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAI5B;;OAEG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI1B;;OAEG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAe1B;;OAEG;IACH,OAAO,IAAI,IAAI;IAIf;;OAEG;IACH,KAAK,IAAI,IAAI;CAIb"}

package/dist/ui/form_state.svelte.js

@@ -0,0 +1,148 @@
+/**
+ * Reactive form state for controlling when field errors appear and focusing invalid fields.
+ *
+ * Tracks per-field `touched` state (set on blur via delegated `focusout`) and form-level
+ * `attempted` state (set on submit attempt). Errors show after a field is blurred or
+ * after a submit attempt, avoiding premature validation while the user is still typing.
+ *
+ * The {@link FormState.form | form} attachment also handles Enter key advancing
+ * between focusable elements.
+ *
+ * All trackable inputs must have a `name` attribute — an error is thrown in dev
+ * if an input without `name` loses focus.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   const form_state = new FormState();
+ *   let username = $state('');
+ *   const username_valid = $derived(Username.safeParse(username).success);
+ *   const can_submit = $derived(username.trim() && username_valid);
+ *
+ *   const handle_submit = async () => {
+ *     form_state.attempt();
+ *     if (!can_submit) {
+ *       if (!username.trim() || !username_valid) form_state.focus('username');
+ *       return;
+ *     }
+ *     // submit...
+ *   };
+ * </script>
+ *
+ * <form {@attach form_state.form()} onsubmit={(e) => { e.preventDefault(); void handle_submit(); }}>
+ *   <input name="username" bind:value={username} />
+ *   {#if form_state.show('username') && username && !username_valid}
+ *     <p>error message</p>
+ *   {/if}
+ *   <PendingButton onclick={handle_submit}>submit</PendingButton>
+ * </form>
+ * ```
+ *
+ * @module
+ */
+import { DEV } from 'esm-env';
+import { on } from 'svelte/events';
+import { SvelteSet } from 'svelte/reactivity';
+const FOCUSABLE_SELECTOR = 'input:not(:disabled), button:not(:disabled)';
+const FORM_INPUT_SELECTOR = 'input, textarea, select';
+export class FormState {
+    #touched = new SvelteSet();
+    #form = null;
+    #attempted = $state(false);
+    /**
+     * Whether a submit attempt has been made.
+     */
+    get attempted() {
+        return this.#attempted;
+    }
+    /**
+     * Creates a form attachment that handles Enter key advancing between
+     * focusable elements and tracks field touched state via delegated `focusout`.
+     *
+     * Fields are identified by their `name` attribute.
+     */
+    form() {
+        if (DEV && this.#form) {
+            throw new Error('FormState: form() called while already attached to a form.');
+        }
+        return (form) => {
+            this.#form = form;
+            const keydown_cleanup = on(form, 'keydown', (e) => {
+                if (e.key !== 'Enter')
+                    return;
+                if (!(e.target instanceof HTMLInputElement))
+                    return;
+                const elements = Array.from(form.querySelectorAll(FOCUSABLE_SELECTOR));
+                const index = elements.indexOf(e.target);
+                if (index < 0)
+                    return;
+                e.preventDefault();
+                elements[(index + 1) % elements.length].focus();
+            });
+            const focusout_cleanup = on(form, 'focusout', (e) => {
+                const target = e.target;
+                if (target instanceof HTMLElement && target.matches(FORM_INPUT_SELECTOR)) {
+                    const name = target.name;
+                    if (DEV && !name) {
+                        throw new Error('FormState: input missing name attribute. All inputs in a FormState form must have a name.');
+                    }
+                    if (name) {
+                        this.#touched.add(name);
+                    }
+                }
+            });
+            return () => {
+                keydown_cleanup();
+                focusout_cleanup();
+                this.#form = null;
+            };
+        };
+    }
+    /**
+     * Whether a field has been blurred at least once.
+     */
+    is_touched(field) {
+        return this.#touched.has(field);
+    }
+    /**
+     * Whether to show validation errors for a field.
+     * Returns `true` if the field has been blurred or a submit attempt was made.
+     */
+    show(field) {
+        return this.#touched.has(field) || this.#attempted;
+    }
+    /**
+     * Programmatically marks a field as touched without requiring a blur event.
+     */
+    touch(field) {
+        this.#touched.add(field);
+    }
+    /**
+     * Focuses the named input within the form.
+     */
+    focus(field) {
+        if (DEV && !this.#form) {
+            console.warn('FormState: focus() called before form() attachment is active.');
+            return;
+        }
+        const el = this.#form?.querySelector(`[name="${field}"]`);
+        if (DEV && !el) {
+            console.warn(`FormState: no element found with name="${field}". Check for typos in the name attribute or form_state.focus() call.`);
+            return;
+        }
+        el?.focus({ focusVisible: true });
+    }
+    /**
+     * Marks the form as having been submitted, causing all field errors to show.
+     */
+    attempt() {
+        this.#attempted = true;
+    }
+    /**
+     * Resets all touched and attempted state.
+     */
+    reset() {
+        this.#touched.clear();
+        this.#attempted = false;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuzdev/fuz_app",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "fullstack app library",
   "glyph": "🗝",
   "logo": "logo.svg",

package/dist/ui/enter_advance.d.ts

@@ -1,13 +0,0 @@
-/**
- * Svelte action that makes Enter advance to the next focusable form element
- * (inputs and buttons), or activate the element if it's already the last one.
- *
- * @example
- * ```svelte
- * <form {@attach enter_advance()}>
- * ```
- *
- * @module
- */
-export declare const enter_advance: () => ((form: HTMLFormElement) => () => void);
-//# sourceMappingURL=enter_advance.d.ts.map

package/dist/ui/enter_advance.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"enter_advance.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/enter_advance.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,eAAO,MAAM,aAAa,QAAO,CAAC,CAAC,IAAI,EAAE,eAAe,KAAK,MAAM,IAAI,CAiBtE,CAAC"}

package/dist/ui/enter_advance.js

@@ -1,30 +0,0 @@
-/**
- * Svelte action that makes Enter advance to the next focusable form element
- * (inputs and buttons), or activate the element if it's already the last one.
- *
- * @example
- * ```svelte
- * <form {@attach enter_advance()}>
- * ```
- *
- * @module
- */
-const FOCUSABLE_SELECTOR = 'input:not(:disabled), button:not(:disabled)';
-export const enter_advance = () => {
-    return (form) => {
-        const handle_keydown = (e) => {
-            if (e.key !== 'Enter')
-                return;
-            if (!(e.target instanceof HTMLInputElement))
-                return;
-            const elements = Array.from(form.querySelectorAll(FOCUSABLE_SELECTOR));
-            const index = elements.indexOf(e.target);
-            if (index < 0)
-                return;
-            e.preventDefault();
-            elements[(index + 1) % elements.length].focus();
-        };
-        form.addEventListener('keydown', handle_keydown);
-        return () => form.removeEventListener('keydown', handle_keydown);
-    };
-};