@draftlab/auth 0.0.4 → 0.1.0

package/dist/ui/code.d.ts

@@ -1,155 +1,42 @@
-import { CodeProviderError, CodeProviderOptions } from "../provider/code.js";
+import { CodeProviderOptions } from "../provider/code.js";
 
 //#region src/ui/code.d.ts
 
 /**
- * Default text copy for the PIN code authentication UI.
- * All text can be customized via the copy prop.
+ * Type for customizable UI copy text
  */
-declare const DEFAULT_COPY: {
-  /** Placeholder text for the email/contact input field */
-  email_placeholder: string;
-  /** Error message displayed when the entered email/contact is invalid */
-  email_invalid: string;
-  /** Text for the primary action button */
-  button_continue: string;
-  /** Informational text explaining that a PIN code will be sent */
-  code_info: string;
-  /** Placeholder text for the PIN code input field */
-  code_placeholder: string;
-  /** Error message displayed when the entered PIN code is incorrect */
-  code_invalid: string;
-  /** Success message prefix when code is initially sent */
-  code_sent: string;
-  /** Success message prefix when code is resent */
-  code_resent: string;
-  /** Text asking if user didn't receive the code */
-  code_didnt_get: string;
-  /** Text for the resend code button */
-  code_resend: string;
-};
-/**
- * Type for customizable UI copy text.
- * All properties are optional to allow partial customization.
- */
-type CodeUICopy = typeof DEFAULT_COPY;
+interface CodeUICopy {
+  readonly email_placeholder: string;
+  readonly email_invalid: string;
+  readonly button_continue: string;
+  readonly code_info: string;
+  readonly code_placeholder: string;
+  readonly code_invalid: string;
+  readonly code_sent: string;
+  readonly code_resent: string;
+  readonly code_didnt_get: string;
+  readonly code_resend: string;
+}
 /**
- * Input mode for the contact field.
- * Determines the input type and validation behavior.
+ * Input mode for the contact field
  */
 type CodeUIMode = "email" | "phone";
 /**
- * Configuration options for the CodeUI component.
+ * Configuration options for the CodeUI component
  */
-interface CodeUIOptions {
+interface CodeUIOptions extends Pick<CodeProviderOptions, "sendCode"> {
   /**
-   * Callback function for sending PIN codes to users.
-   * Should handle delivery via email, SMS, or other channels based on the claims.
-   *
-   * @param claims - User contact information (email, phone, etc.)
-   * @param code - The generated PIN code to send
-   * @returns Promise resolving to undefined on success, or error object on failure
-   *
-   * @example
-   * ```ts
-   * sendCode: async (claims, code) => {
-   *   if (claims.email) {
-   *     await emailService.send({
-   *       to: claims.email,
-   *       subject: 'Your verification code',
-   *       text: `Your PIN code is: ${code}`
-   *     })
-   *   } else if (claims.phone) {
-   *     await smsService.send(claims.phone, `PIN: ${code}`)
-   *   } else {
-   *     return {
-   *       type: "invalid_claim",
-   *       key: "contact",
-   *       value: "Email or phone required"
-   *     }
-   *   }
-   * }
-   * ```
+   * Input mode determining the type of contact information to collect
+   * @default "email"
    */
-  sendCode: (claims: Record<string, string>, code: string) => Promise<CodeProviderError | undefined>;
+  readonly mode?: CodeUIMode;
   /**
-   * Custom text copy for UI labels and messages.
-   * Allows full customization of all displayed text.
-   *
-   * @example
-   * ```ts
-   * copy: {
-   *   email_placeholder: "Enter your email address",
-   *   code_info: "Check your email for a 6-digit verification code",
-   *   button_continue: "Verify",
-   *   code_invalid: "The code you entered is incorrect"
-   * }
-   * ```
+   * Custom text copy for UI labels, messages, and errors
    */
   readonly copy?: Partial<CodeUICopy>;
-  /**
-   * Input mode determining the type of contact information to collect.
-   *
-   * @default "email"
-   *
-   * @example
-   * ```ts
-   * mode: "phone" // Collect phone numbers instead of emails
-   * ```
-   */
-  readonly mode?: CodeUIMode;
 }
 /**
- * Creates a complete UI configuration for PIN code authentication.
- * Provides pre-built forms for collecting user contact info and verifying PIN codes.
- *
- * @param options - Configuration options for the UI
- * @returns Complete CodeProvider configuration with UI handlers
- *
- * @example
- * ```ts
- * // Basic email-based PIN authentication
- * const emailCodeUI = CodeUI({
- *   sendCode: async (claims, code) => {
- *     await emailService.send(claims.email, `Code: ${code}`)
- *   }
- * })
- *
- * // Phone-based PIN authentication with custom copy
- * const phoneCodeUI = CodeUI({
- *   mode: "phone",
- *   copy: {
- *     email_placeholder: "Phone number",
- *     code_info: "We'll send a verification code via SMS",
- *     email_invalid: "Please enter a valid phone number"
- *   },
- *   sendCode: async (claims, code) => {
- *     await smsService.send(claims.phone, `Verification: ${code}`)
- *   }
- * })
- *
- * // Multi-mode authentication
- * const flexibleCodeUI = CodeUI({
- *   copy: {
- *     email_placeholder: "Email or phone number",
- *     code_info: "We'll send a code to your email or phone"
- *   },
- *   sendCode: async (claims, code) => {
- *     if (claims.email && claims.email.includes('@')) {
- *       await emailService.send(claims.email, `Code: ${code}`)
- *     } else if (claims.email) {
- *       // Treat as phone number if no @ symbol
- *       await smsService.send(claims.email, `Code: ${code}`)
- *     } else {
- *       return {
- *         type: "invalid_claim",
- *         key: "contact",
- *         value: "Email or phone required"
- *       }
- *     }
- *   }
- * })
- * ```
+ * Creates a complete UI configuration for PIN code authentication
  */
 declare const CodeUI: (options: CodeUIOptions) => CodeProviderOptions;
 //#endregion

package/dist/ui/code.js

@@ -1,11 +1,9 @@
-import { UnknownStateError } from "../error.js";
-import { Layout } from "./base.js";
-import { FormAlert } from "./form.js";
+import { Layout, renderToHTML } from "./base.js";
+import { jsx, jsxs } from "preact/jsx-runtime";
 
-//#region src/ui/code.ts
+//#region src/ui/code.tsx
 /**
-* Default text copy for the PIN code authentication UI.
-* All text can be customized via the copy prop.
+* Default text copy for the PIN code authentication UI
 */
 const DEFAULT_COPY = {
 	email_placeholder: "Email",
@@ -20,174 +18,215 @@ const DEFAULT_COPY = {
 	code_resend: "Resend"
 };
 /**
-* Creates a complete UI configuration for PIN code authentication.
-* Provides pre-built forms for collecting user contact info and verifying PIN codes.
-*
-* @param options - Configuration options for the UI
-* @returns Complete CodeProvider configuration with UI handlers
-*
-* @example
-* ```ts
-* // Basic email-based PIN authentication
-* const emailCodeUI = CodeUI({
-*   sendCode: async (claims, code) => {
-*     await emailService.send(claims.email, `Code: ${code}`)
-*   }
-* })
-*
-* // Phone-based PIN authentication with custom copy
-* const phoneCodeUI = CodeUI({
-*   mode: "phone",
-*   copy: {
-*     email_placeholder: "Phone number",
-*     code_info: "We'll send a verification code via SMS",
-*     email_invalid: "Please enter a valid phone number"
-*   },
-*   sendCode: async (claims, code) => {
-*     await smsService.send(claims.phone, `Verification: ${code}`)
-*   }
-* })
-*
-* // Multi-mode authentication
-* const flexibleCodeUI = CodeUI({
-*   copy: {
-*     email_placeholder: "Email or phone number",
-*     code_info: "We'll send a code to your email or phone"
-*   },
-*   sendCode: async (claims, code) => {
-*     if (claims.email && claims.email.includes('@')) {
-*       await emailService.send(claims.email, `Code: ${code}`)
-*     } else if (claims.email) {
-*       // Treat as phone number if no @ symbol
-*       await smsService.send(claims.email, `Code: ${code}`)
-*     } else {
-*       return {
-*         type: "invalid_claim",
-*         key: "contact",
-*         value: "Email or phone required"
-*       }
-*     }
-*   }
-* })
-* ```
+* FormAlert component for displaying 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, autoFocus,...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
+*/
+/**
+* Gets the appropriate error message for display
+*/
+const getErrorMessage = (error, copy) => {
+	if (!error?.type) return void 0;
+	switch (error.type) {
+		case "invalid_code": return copy.code_invalid;
+		case "invalid_claim": return copy.email_invalid;
+	}
+};
+/**
+* Gets the appropriate success message for display
+*/
+const getSuccessMessage = (state, copy) => {
+	if (state.type === "start" || !state.claims) return void 0;
+	const contact = state.claims.email || state.claims.phone || "";
+	const prefix = state.resend ? copy.code_resent : copy.code_sent;
+	return {
+		message: `${prefix}${contact}`,
+		contact
+	};
+};
+/**
+* Creates a complete UI configuration for PIN code authentication
 */
 const CodeUI = (options) => {
 	const copy = {
 		...DEFAULT_COPY,
 		...options.copy
 	};
-	const inputMode = options.mode ?? "email";
+	const mode = options.mode || "email";
 	/**
-	* Determines the appropriate input field attributes based on the selected mode.
+	* Renders the start form for collecting contact information
 	*/
-	const getInputAttributes = () => {
-		switch (inputMode) {
-			case "email": return {
-				type: "email",
-				name: "email",
-				inputmode: "email",
-				autocomplete: "email"
-			};
-			case "phone": return {
-				type: "tel",
-				name: "phone",
-				inputmode: "tel",
-				autocomplete: "tel"
-			};
-		}
+	const renderStart = (form, error, state) => {
+		const success = getSuccessMessage(state || { type: "start" }, copy);
+		return /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsxs("form", {
+			"data-component": "form",
+			method: "post",
+			children: [
+				success ? /* @__PURE__ */ jsx(FormAlert, {
+					message: success.message,
+					color: "success"
+				}) : /* @__PURE__ */ jsx(FormAlert, { message: getErrorMessage(error, copy) }),
+				/* @__PURE__ */ jsx(Input, {
+					type: mode === "email" ? "email" : "tel",
+					name: mode,
+					placeholder: copy.email_placeholder,
+					value: form?.get(mode)?.toString() || "",
+					autoComplete: mode,
+					required: true
+				}),
+				/* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name: "action",
+					value: "request"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					children: copy.button_continue
+				}),
+				/* @__PURE__ */ jsx("p", {
+					style: {
+						fontSize: "0.875rem",
+						color: "var(--color-high)",
+						textAlign: "center",
+						margin: "1rem 0 0 0"
+					},
+					children: copy.code_info
+				})
+			]
+		}) });
 	};
 	/**
-	* Gets the appropriate contact value from claims for display purposes.
+	* Renders the code verification form
 	*/
-	const getContactValue = (claims) => {
-		return claims.email || claims.phone || Object.values(claims)[0] || "";
+	const renderCode = (_form, error, state) => {
+		const success = getSuccessMessage(state, copy);
+		const contact = state.type === "code" ? state.claims?.[mode] || "" : "";
+		return /* @__PURE__ */ jsxs(Layout, { children: [/* @__PURE__ */ jsxs("form", {
+			"data-component": "form",
+			method: "post",
+			children: [
+				success ? /* @__PURE__ */ jsx(FormAlert, {
+					message: success.message,
+					color: "success"
+				}) : /* @__PURE__ */ jsx(FormAlert, { message: getErrorMessage(error, copy) }),
+				/* @__PURE__ */ jsx("input", {
+					name: "action",
+					type: "hidden",
+					value: "verify"
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					type: "text",
+					name: "code",
+					placeholder: copy.code_placeholder,
+					"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: "resend"
+				}),
+				/* @__PURE__ */ jsx("input", {
+					name: mode,
+					type: "hidden",
+					value: contact
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					"data-component": "form-footer",
+					children: [/* @__PURE__ */ jsx("span", {
+						style: { fontSize: "0.875rem" },
+						children: copy.code_didnt_get
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						"data-component": "link",
+						children: copy.code_resend
+					})]
+				})
+			]
+		})] });
 	};
 	return {
 		sendCode: options.sendCode,
-		length: 6,
-		request: async (_req, state, _form, error) => {
-			if (state.type === "start") {
-				const inputAttrs = getInputAttributes();
-				const formContent = `
-					<form data-component="form" method="post">
-						${error?.type === "invalid_claim" ? FormAlert({ message: copy.email_invalid }) : ""}
-						
-						<input name="action" type="hidden" value="request" />
-						
-						<input
-							autofocus
-							data-component="input"
-							placeholder="${copy.email_placeholder}"
-							required
-							type="${inputAttrs.type}"
-							name="${inputAttrs.name}"
-							inputmode="${inputAttrs.inputmode}"
-							autocomplete="${inputAttrs.autocomplete}"
-						/>
-						
-						<button data-component="button" type="submit">
-							${copy.button_continue}
-						</button>
-					</form>
-					
-					<p data-component="form-footer">${copy.code_info}</p>
-				`;
-				const html = Layout({ children: formContent });
-				return new Response(html, { headers: { "Content-Type": "text/html" } });
-			}
-			if (state.type === "code") {
-				const contactValue = getContactValue(state.claims);
-				const hiddenInputs = Object.entries(state.claims).map(([key, value]) => `<input name="${key}" type="hidden" value="${value}" />`).join("");
-				const formContent = `
-					<form data-component="form" method="post">
-						${error?.type === "invalid_code" ? FormAlert({ message: copy.code_invalid }) : ""}
-						
-						${FormAlert({
-					color: "success",
-					message: (state.resend ? copy.code_resent : copy.code_sent) + contactValue
-				})}
-						
-						<input name="action" type="hidden" value="verify" />
-						
-						<input
-							aria-label="6-digit verification code"
-							autocomplete="one-time-code"
-							autofocus
-							data-component="input"
-							inputmode="numeric"
-							maxlength="6"
-							minlength="6"
-							name="code"
-							pattern="[0-9]{6}"
-							placeholder="${copy.code_placeholder}"
-							required
-							type="text"
-						/>
-						
-						<button data-component="button" type="submit">
-							${copy.button_continue}
-						</button>
-					</form>
-					
-					<form method="post">
-						${hiddenInputs}
-						
-						<input name="action" type="hidden" value="resend" />
-						
-						<div data-component="form-footer">
-							<span>
-								${copy.code_didnt_get} 
-								<button data-component="link" type="submit">
-									${copy.code_resend}
-								</button>
-							</span>
-						</div>
-					</form>
-				`;
-				const html = Layout({ children: formContent });
-				return new Response(html, { headers: { "Content-Type": "text/html" } });
-			}
-			throw new UnknownStateError();
+		request: async (_req, state, form, error) => {
+			const html = renderToHTML(state.type === "start" ? renderStart(form, error, state) : renderCode(form, error, state));
+			return new Response(html, { headers: { "Content-Type": "text/html" } });
 		}
 	};
 };

package/dist/ui/form.d.ts

@@ -1,8 +1,7 @@
+import { ComponentChildren } from "preact";
+
 //#region src/ui/form.d.ts
-/**
- * Form alert component for displaying success and error messages.
- * Provides consistent styling and iconography for user feedback in authentication forms.
- */
+
 /**
  * Alert color variant determining the visual style and icon.
  */
@@ -24,8 +23,11 @@ interface FormAlertProps {
 }
 /**
  * Form alert component that displays error or success messages.
- * Returns an HTML string for the alert or empty string if no message.
+ * Returns a Preact component or null if no message.
  */
-declare const FormAlert: (props: FormAlertProps) => string;
+declare const FormAlert: ({
+  message,
+  color
+}: FormAlertProps) => ComponentChildren;
 //#endregion
 export { FormAlert, FormAlertColor, FormAlertProps };