@draftlab/auth 0.0.4 → 0.1.1

package/dist/ui/password.js

@@ -1,10 +1,9 @@
-import { Layout } from "./base.js";
-import { FormAlert } from "./form.js";
+import { Layout, renderToHTML } from "./base.js";
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 
-//#region src/ui/password.ts
+//#region src/ui/password.tsx
 /**
-* Default text copy for all password authentication UI screens.
-* All text can be customized via the copy prop.
+* Default copy text for password authentication UI
 */
 const DEFAULT_COPY = {
 	error_email_taken: "There is already an account with this email.",
@@ -32,7 +31,81 @@ const DEFAULT_COPY = {
 	logo: "A"
 };
 /**
-* Creates a complete UI configuration for password-based authentication.
+* FormAlert component for displaying error messages
+*/
+const FormAlert = ({ message, color = "danger" }) => {
+	if (!message) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-component": "form-alert",
+		"data-color": color,
+		children: [/* @__PURE__ */ jsx("i", {
+			"data-slot": color === "success" ? "icon-success" : "icon-danger",
+			children: color === "success" ? /* @__PURE__ */ jsx("svg", {
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24",
+				xmlns: "http://www.w3.org/2000/svg",
+				"aria-label": "Success",
+				role: "img",
+				children: /* @__PURE__ */ jsx("path", {
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: 2,
+					d: "M5 13l4 4L19 7"
+				})
+			}) : /* @__PURE__ */ jsx("svg", {
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24",
+				xmlns: "http://www.w3.org/2000/svg",
+				"aria-label": "Error",
+				role: "img",
+				children: /* @__PURE__ */ jsx("path", {
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: 2,
+					d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.232 16.5c-.77.833.192 2.5 1.732 2.5z"
+				})
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			"data-slot": "message",
+			children: message
+		})]
+	});
+};
+/**
+* Input component with consistent styling
+*/
+const Input = ({ type, name, placeholder, value, required, autoComplete,...props }) => /* @__PURE__ */ jsx("input", {
+	type,
+	name,
+	placeholder,
+	value,
+	required,
+	autoComplete,
+	"data-component": "input",
+	...props
+});
+/**
+* Button component with consistent styling
+*/
+const Button = ({ type = "submit", children,...props }) => /* @__PURE__ */ jsx("button", {
+	type,
+	"data-component": "button",
+	...props,
+	children
+});
+/**
+* Link component with consistent styling
+*/
+const Link = ({ href, children,...props }) => /* @__PURE__ */ jsx("a", {
+	href,
+	"data-component": "link",
+	...props,
+	children
+});
+/**
+* Creates a complete UI configuration for password-based authentication
 */
 const PasswordUI = (options) => {
 	const copy = {
@@ -40,253 +113,284 @@ const PasswordUI = (options) => {
 		...options.copy
 	};
 	/**
-	* Gets the appropriate error message for display.
+	* Gets the appropriate error message for display
 	*/
 	const getErrorMessage = (error) => {
-		if (!error?.type) return;
+		if (!error?.type) return void 0;
 		if (error.type === "validation_error" && "message" in error && error.message) return error.message;
-		return copy[`error_${error.type}`];
+		const errorKey = `error_${error.type}`;
+		return copy[errorKey];
+	};
+	/**
+	* Renders the login form with email and password inputs
+	*/
+	const renderLogin = (form, error) => /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsxs("form", {
+		"data-component": "form",
+		method: "post",
+		children: [
+			/* @__PURE__ */ jsx(FormAlert, { message: getErrorMessage(error) }),
+			/* @__PURE__ */ jsx(Input, {
+				type: "email",
+				name: "email",
+				placeholder: copy.input_email,
+				value: form?.get("email")?.toString() || "",
+				autoComplete: "email",
+				required: true
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				type: "password",
+				name: "password",
+				placeholder: copy.input_password,
+				autoComplete: "current-password",
+				required: true
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				children: copy.button_continue
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-component": "form-footer",
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					copy.register_prompt,
+					" ",
+					/* @__PURE__ */ jsx(Link, {
+						href: "./register",
+						children: copy.register
+					})
+				] }), /* @__PURE__ */ jsx(Link, {
+					href: "./change",
+					children: copy.change_prompt
+				})]
+			})
+		]
+	}) });
+	/**
+	* Renders the registration form based on current state
+	*/
+	const renderRegister = (state, form, error) => {
+		const emailError = ["invalid_email", "email_taken"].includes(error?.type || "");
+		const passwordError = [
+			"invalid_password",
+			"password_mismatch",
+			"validation_error"
+		].includes(error?.type || "");
+		return /* @__PURE__ */ jsx(Layout, { children: state.type === "start" ? /* @__PURE__ */ jsxs("form", {
+			"data-component": "form",
+			method: "post",
+			children: [
+				/* @__PURE__ */ jsx(FormAlert, { message: getErrorMessage(error) }),
+				/* @__PURE__ */ jsx("input", {
+					name: "action",
+					type: "hidden",
+					value: "register"
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					type: "email",
+					name: "email",
+					placeholder: copy.input_email,
+					value: emailError ? "" : form?.get("email")?.toString() || "",
+					autoComplete: "email",
+					required: true
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					type: "password",
+					name: "password",
+					placeholder: copy.input_password,
+					value: passwordError ? "" : form?.get("password")?.toString() || "",
+					autoComplete: "new-password",
+					required: true
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					type: "password",
+					name: "repeat",
+					placeholder: copy.input_repeat,
+					autoComplete: "new-password",
+					required: true
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					children: copy.button_continue
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-component": "form-footer",
+					children: /* @__PURE__ */ jsxs("span", { children: [
+						copy.login_prompt,
+						" ",
+						/* @__PURE__ */ jsx(Link, {
+							href: "./authorize",
+							children: copy.login
+						})
+					] })
+				})
+			]
+		}) : /* @__PURE__ */ jsxs("form", {
+			"data-component": "form",
+			method: "post",
+			children: [
+				/* @__PURE__ */ jsx(FormAlert, { message: getErrorMessage(error) }),
+				/* @__PURE__ */ jsx("input", {
+					name: "action",
+					type: "hidden",
+					value: "verify"
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					type: "text",
+					name: "code",
+					placeholder: copy.input_code,
+					"aria-label": "6-digit verification code",
+					autoComplete: "one-time-code",
+					inputMode: "numeric",
+					maxLength: 6,
+					minLength: 6,
+					pattern: "[0-9]{6}",
+					autoFocus: true,
+					required: true
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					children: copy.button_continue
+				})
+			]
+		}) });
+	};
+	/**
+	* Renders the password change form based on current state
+	*/
+	const renderChange = (state, form, error) => {
+		const passwordError = [
+			"invalid_password",
+			"password_mismatch",
+			"validation_error"
+		].includes(error?.type || "");
+		return /* @__PURE__ */ jsx(Layout, { children: state.type === "start" ? /* @__PURE__ */ jsxs("form", {
+			"data-component": "form",
+			method: "post",
+			children: [
+				/* @__PURE__ */ jsx(FormAlert, { message: getErrorMessage(error) }),
+				/* @__PURE__ */ jsx("input", {
+					name: "action",
+					type: "hidden",
+					value: "code"
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					type: "email",
+					name: "email",
+					placeholder: copy.input_email,
+					value: form?.get("email")?.toString() || "",
+					autoComplete: "email",
+					required: true
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					children: copy.button_continue
+				})
+			]
+		}) : state.type === "code" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("form", {
+			"data-component": "form",
+			method: "post",
+			children: [
+				/* @__PURE__ */ jsx(FormAlert, { message: getErrorMessage(error) }),
+				/* @__PURE__ */ jsx("input", {
+					name: "action",
+					type: "hidden",
+					value: "verify"
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					type: "text",
+					name: "code",
+					placeholder: copy.input_code,
+					"aria-label": "6-digit verification code",
+					autoComplete: "one-time-code",
+					inputMode: "numeric",
+					maxLength: 6,
+					minLength: 6,
+					pattern: "[0-9]{6}",
+					autoFocus: true,
+					required: true
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					children: copy.button_continue
+				})
+			]
+		}), /* @__PURE__ */ jsxs("form", {
+			method: "post",
+			children: [
+				/* @__PURE__ */ jsx("input", {
+					name: "action",
+					type: "hidden",
+					value: "code"
+				}),
+				/* @__PURE__ */ jsx("input", {
+					name: "email",
+					type: "hidden",
+					value: state.email
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					"data-component": "form-footer",
+					children: [/* @__PURE__ */ jsxs("span", { children: [
+						copy.code_return,
+						" ",
+						/* @__PURE__ */ jsx(Link, {
+							href: "./authorize",
+							children: copy.login.toLowerCase()
+						})
+					] }), /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						"data-component": "link",
+						children: copy.code_resend
+					})]
+				})
+			]
+		})] }) : /* @__PURE__ */ jsxs("form", {
+			"data-component": "form",
+			method: "post",
+			children: [
+				/* @__PURE__ */ jsx(FormAlert, { message: getErrorMessage(error) }),
+				/* @__PURE__ */ jsx("input", {
+					name: "action",
+					type: "hidden",
+					value: "update"
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					type: "password",
+					name: "password",
+					placeholder: copy.input_password,
+					value: passwordError ? "" : form?.get("password")?.toString() || "",
+					autoComplete: "new-password",
+					required: true
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					type: "password",
+					name: "repeat",
+					placeholder: copy.input_repeat,
+					value: passwordError ? "" : form?.get("repeat")?.toString() || "",
+					autoComplete: "new-password",
+					required: true
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					children: copy.button_continue
+				})
+			]
+		}) });
 	};
 	return {
 		validatePassword: options.validatePassword,
 		sendCode: options.sendCode,
 		login: async (_req, form, error) => {
-			const formContent = `
-				<form data-component="form" method="post">
-					${FormAlert({ message: getErrorMessage(error) })}
-
-					<input
-						autocomplete="email"
-						data-component="input"
-						value="${form?.get("email")?.toString() || ""}"
-						name="email"
-						placeholder="${copy.input_email}"
-						required
-						type="email"
-					/>
-
-					<input
-						autocomplete="current-password"
-						data-component="input"
-						name="password"
-						placeholder="${copy.input_password}"
-						required
-						type="password"
-					/>
-
-					<button data-component="button" type="submit">
-						${copy.button_continue}
-					</button>
-
-					<div data-component="form-footer">
-						<span>
-							${copy.register_prompt} 
-							<a data-component="link" href="./register">
-								${copy.register}
-							</a>
-						</span>
-						<a data-component="link" href="./change">
-							${copy.change_prompt}
-						</a>
-					</div>
-				</form>
-			`;
-			const html = Layout({ children: formContent });
+			const html = renderToHTML(renderLogin(form, error));
 			return new Response(html, {
 				status: error ? 401 : 200,
 				headers: { "Content-Type": "text/html" }
 			});
 		},
 		register: async (_req, state, form, error) => {
-			const emailError = ["invalid_email", "email_taken"].includes(error?.type || "");
-			const passwordError = [
-				"invalid_password",
-				"password_mismatch",
-				"validation_error"
-			].includes(error?.type || "");
-			let formContent = "";
-			if (state.type === "start") formContent = `
-					<form data-component="form" method="post">
-						${FormAlert({ message: getErrorMessage(error) })}
-						
-						<input name="action" type="hidden" value="register" />
-
-						<input
-							autocomplete="email"
-							data-component="input"
-							value="${emailError ? "" : form?.get("email")?.toString() || ""}"
-							name="email"
-							placeholder="${copy.input_email}"
-							required
-							type="email"
-						/>
-
-						<input
-							autocomplete="new-password"
-							data-component="input"
-							value="${passwordError ? "" : form?.get("password")?.toString() || ""}"
-							name="password"
-							placeholder="${copy.input_password}"
-							required
-							type="password"
-						/>
-
-						<input
-							autocomplete="new-password"
-							data-component="input"
-							name="repeat"
-							placeholder="${copy.input_repeat}"
-							required
-							type="password"
-						/>
-
-						<button data-component="button" type="submit">
-							${copy.button_continue}
-						</button>
-
-						<div data-component="form-footer">
-							<span>
-								${copy.login_prompt} 
-								<a data-component="link" href="./authorize">
-									${copy.login}
-								</a>
-							</span>
-						</div>
-					</form>
-				`;
-			else if (state.type === "code") formContent = `
-					<form data-component="form" method="post">
-						${FormAlert({ message: getErrorMessage(error) })}
-						
-						<input name="action" type="hidden" value="verify" />
-
-						<input
-							aria-label="6-digit verification code"
-							autocomplete="one-time-code"
-							data-component="input"
-							inputmode="numeric"
-							maxlength="6"
-							minlength="6"
-							name="code"
-							pattern="[0-9]{6}"
-							placeholder="${copy.input_code}"
-							required
-							type="text"
-						/>
-
-						<button data-component="button" type="submit">
-							${copy.button_continue}
-						</button>
-					</form>
-				`;
-			const html = Layout({ children: formContent });
+			const html = renderToHTML(renderRegister(state, form, error));
 			return new Response(html, { headers: { "Content-Type": "text/html" } });
 		},
 		change: async (_req, state, form, error) => {
-			const passwordError = [
-				"invalid_password",
-				"password_mismatch",
-				"validation_error"
-			].includes(error?.type || "");
-			let formContent = "";
-			let additionalForms = "";
-			if (state.type === "start") formContent = `
-					<form data-component="form" method="post">
-						${FormAlert({ message: getErrorMessage(error) })}
-						
-						<input name="action" type="hidden" value="code" />
-
-						<input
-							autocomplete="email"
-							data-component="input"
-							value="${form?.get("email")?.toString() || ""}"
-							name="email"
-							placeholder="${copy.input_email}"
-							required
-							type="email"
-						/>
-
-						<button data-component="button" type="submit">
-							${copy.button_continue}
-						</button>
-					</form>
-				`;
-			else if (state.type === "code") {
-				formContent = `
-					<form data-component="form" method="post">
-						${FormAlert({ message: getErrorMessage(error) })}
-						
-						<input name="action" type="hidden" value="verify" />
-
-						<input
-							aria-label="6-digit verification code"
-							autocomplete="one-time-code"
-							data-component="input"
-							inputmode="numeric"
-							maxlength="6"
-							minlength="6"
-							name="code"
-							pattern="[0-9]{6}"
-							placeholder="${copy.input_code}"
-							required
-							type="text"
-						/>
-
-						<button data-component="button" type="submit">
-							${copy.button_continue}
-						</button>
-					</form>
-				`;
-				additionalForms = `
-					<form method="post">
-						<input name="action" type="hidden" value="code" />
-						<input name="email" type="hidden" value="${state.email}" />
-
-						<div data-component="form-footer">
-							<span>
-								${copy.code_return} 
-								<a data-component="link" href="./authorize">
-									${copy.login.toLowerCase()}
-								</a>
-							</span>
-							<button data-component="link" type="submit">
-								${copy.code_resend}
-							</button>
-						</div>
-					</form>
-				`;
-			} else if (state.type === "update") formContent = `
-					<form data-component="form" method="post">
-						${FormAlert({ message: getErrorMessage(error) })}
-						
-						<input name="action" type="hidden" value="update" />
-
-						<input
-							autocomplete="new-password"
-							data-component="input"
-							value="${passwordError ? "" : form?.get("password")?.toString() || ""}"
-							name="password"
-							placeholder="${copy.input_password}"
-							required
-							type="password"
-						/>
-
-						<input
-							autocomplete="new-password"
-							data-component="input"
-							value="${passwordError ? "" : form?.get("repeat")?.toString() || ""}"
-							name="repeat"
-							placeholder="${copy.input_repeat}"
-							required
-							type="password"
-						/>
-
-						<button data-component="button" type="submit">
-							${copy.button_continue}
-						</button>
-					</form>
-				`;
-			const html = Layout({ children: formContent + additionalForms });
+			const html = renderToHTML(renderChange(state, form, error));
 			return new Response(html, {
 				status: error ? 400 : 200,
 				headers: { "Content-Type": "text/html" }