@draftlab/auth 0.0.1

package/dist/ui/code.js

@@ -0,0 +1,197 @@
+import { UnknownStateError } from "../error-DgAKK7b2.js";
+import "../theme-CswaLtbW.js";
+import { Layout } from "../base-DRutbxgL.js";
+import { FormAlert } from "../form-6XKM_cOk.js";
+
+//#region src/ui/code.ts
+/**
+* Default text copy for the PIN code authentication UI.
+* All text can be customized via the copy prop.
+*/
+const DEFAULT_COPY = {
+	email_placeholder: "Email",
+	email_invalid: "Email address is not valid",
+	button_continue: "Continue",
+	code_info: "We'll send a pin code to your email.",
+	code_placeholder: "Code",
+	code_invalid: "Invalid code",
+	code_sent: "Code sent to ",
+	code_resent: "Code resent to ",
+	code_didnt_get: "Didn't get code?",
+	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"
+*       }
+*     }
+*   }
+* })
+* ```
+*/
+const CodeUI = (options) => {
+	const copy = {
+		...DEFAULT_COPY,
+		...options.copy
+	};
+	const inputMode = options.mode ?? "email";
+	/**
+	* Determines the appropriate input field attributes based on the selected mode.
+	*/
+	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"
+			};
+		}
+	};
+	/**
+	* Gets the appropriate contact value from claims for display purposes.
+	*/
+	const getContactValue = (claims) => {
+		return claims.email || claims.phone || Object.values(claims)[0] || "";
+	};
+	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();
+		}
+	};
+};
+
+//#endregion
+export { CodeUI };

package/dist/ui/form.d.ts

@@ -0,0 +1,31 @@
+//#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.
+ */
+type FormAlertColor = "danger" | "success";
+/**
+ * Props for the FormAlert component.
+ */
+interface FormAlertProps {
+  /**
+   * The message text to display in the alert.
+   * If not provided, the alert will not render.
+   */
+  readonly message?: string;
+  /**
+   * Visual style variant for the alert.
+   * @default "danger"
+   */
+  readonly color?: FormAlertColor;
+}
+/**
+ * Form alert component that displays error or success messages.
+ * Returns an HTML string for the alert or empty string if no message.
+ */
+declare const FormAlert: (props: FormAlertProps) => string;
+//#endregion
+export { FormAlert, FormAlertColor, FormAlertProps };

package/dist/ui/form.js

@@ -0,0 +1,3 @@
+import { FormAlert } from "../form-6XKM_cOk.js";
+
+export { FormAlert };

package/dist/ui/icon.d.ts

@@ -0,0 +1,98 @@
+//#region src/ui/icon.d.ts
+/**
+ * Icon components for Draft Auth UI.
+ * Provides SVG icons for various authentication providers and common UI elements.
+ *
+ * ## Usage
+ *
+ * ```ts
+ * import { ICON_GITHUB, ICON_GOOGLE, ICON_EMAIL } from "./icon"
+ *
+ * // In provider buttons
+ * const buttonHtml = `
+ *   <button>
+ *     ${ICON_GITHUB}
+ *     Continue with GitHub
+ *   </button>
+ * `
+ *
+ * // In form elements
+ * const formHtml = `
+ *   <div>
+ *     ${ICON_EMAIL}
+ *     Email verification
+ *   </div>
+ * `
+ * ```
+ *
+ * ## Features
+ *
+ * - **Consistent sizing**: All icons are properly sized and scalable
+ * - **Accessibility**: Proper ARIA labels and semantic markup
+ * - **Current color**: Icons inherit text color for easy theming
+ * - **Optimized SVGs**: Clean, minimal SVG markup for performance
+ *
+ * @packageDocumentation
+ */
+/**
+ * GitHub brand icon with official logo design.
+ * Used for GitHub authentication provider buttons and references.
+ *
+ * @example
+ * ```ts
+ * const buttonHtml = `
+ *   <button data-component="provider-button">
+ *     ${ICON_GITHUB}
+ *     Sign in with GitHub
+ *   </button>
+ * `
+ * ```
+ */
+declare const ICON_GITHUB = "\n\t<svg\n\t\taria-label=\"GitHub\"\n\t\tfill=\"currentColor\"\n\t\theight=\"250\"\n\t\tpreserveAspectRatio=\"xMidYMid\"\n\t\trole=\"img\"\n\t\tviewBox=\"0 0 256 250\"\n\t\twidth=\"256\"\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t>\n\t\t<path d=\"M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z\" />\n\t</svg>\n";
+/**
+ * Google brand icon with official multicolor logo design.
+ * Used for Google authentication provider buttons and references.
+ *
+ * @example
+ * ```ts
+ * const buttonHtml = `
+ *   <button data-component="provider-button">
+ *     ${ICON_GOOGLE}
+ *     Continue with Google
+ *   </button>
+ * `
+ * ```
+ */
+declare const ICON_GOOGLE = "\n\t<svg\n\t\taria-label=\"Google\"\n\t\theight=\"262\"\n\t\tpreserveAspectRatio=\"xMidYMid\"\n\t\trole=\"img\"\n\t\tviewBox=\"0 0 256 262\"\n\t\twidth=\"256\"\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t>\n\t\t<path\n\t\t\td=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"\n\t\t\tfill=\"#4285F4\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"\n\t\t\tfill=\"#34A853\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782\"\n\t\t\tfill=\"#FBBC05\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"\n\t\t\tfill=\"#EB4335\"\n\t\t/>\n\t</svg>\n";
+/**
+ * Email envelope icon for email-related authentication flows.
+ * Used in email verification, password reset, and contact forms.
+ *
+ * @example
+ * ```ts
+ * const inputGroupHtml = `
+ *   <div data-component="input-group">
+ *     ${ICON_EMAIL}
+ *     <input type="email" placeholder="Enter your email" />
+ *   </div>
+ * `
+ * ```
+ */
+declare const ICON_EMAIL = "\n\t<svg\n\t\taria-label=\"Email\"\n\t\tfill=\"none\"\n\t\trole=\"img\"\n\t\tstroke=\"currentColor\"\n\t\tstroke-width=\"1.5\"\n\t\tviewBox=\"0 0 24 24\"\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t>\n\t\t<path\n\t\t\td=\"M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75\"\n\t\t\tstroke-linecap=\"round\"\n\t\t\tstroke-linejoin=\"round\"\n\t\t/>\n\t</svg>\n";
+/**
+ * Slack brand icon with official logo design.
+ * Used for Slack authentication provider buttons and workplace integrations.
+ *
+ * @example
+ * ```ts
+ * const buttonHtml = `
+ *   <button data-component="provider-button">
+ *     ${ICON_SLACK}
+ *     Continue with Slack
+ *   </button>
+ * `
+ * ```
+ */
+declare const ICON_SLACK = "\n\t<svg\n\t\taria-label=\"Slack\"\n\t\tfill=\"none\"\n\t\theight=\"24\"\n\t\trole=\"img\"\n\t\tviewBox=\"0 0 24 24\"\n\t\twidth=\"24\"\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t>\n\t\t<g>\n\t\t\t<path\n\t\t\t\tclip-rule=\"evenodd\"\n\t\t\t\td=\"M8.79948 0C7.47279 0.000978593 6.39909 1.07547 6.40007 2.39951C6.39909 3.72355 7.47377 4.79804 8.80046 4.79902H11.2009V2.40049C11.2018 1.07645 10.1271 0.00195719 8.79948 0ZM8.79948 6.4H2.40039C1.07371 6.40098 -0.000977873 7.47547 2.67973e-06 8.79951C-0.00195842 10.1235 1.07273 11.198 2.39941 11.2H8.79948C10.1262 11.199 11.2009 10.1245 11.1999 8.80049C11.2009 7.47547 10.1262 6.40098 8.79948 6.4Z\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tfill-rule=\"evenodd\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tclip-rule=\"evenodd\"\n\t\t\t\td=\"M24.0007 8.79951C24.0016 7.47547 22.9269 6.40098 21.6003 6.4C20.2736 6.40098 19.1989 7.47547 19.1999 8.79951V11.2H21.6003C22.9269 11.199 24.0016 10.1245 24.0007 8.79951ZM17.6006 8.79951V2.39951C17.6016 1.07645 16.5279 0.00195719 15.2012 0C13.8745 0.000978593 12.7998 1.07547 12.8008 2.39951V8.79951C12.7988 10.1235 13.8735 11.198 15.2002 11.2C16.5269 11.199 17.6016 10.1245 17.6006 8.79951Z\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tfill-rule=\"evenodd\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tclip-rule=\"evenodd\"\n\t\t\t\td=\"M15.1992 23.9998C16.5259 23.9988 17.6006 22.9243 17.5996 21.6003C17.6006 20.2763 16.5259 19.2018 15.1992 19.2008H12.7988V21.6003C12.7978 22.9234 13.8725 23.9978 15.1992 23.9998ZM15.1992 17.5988H21.5993C22.926 17.5978 24.0007 16.5234 23.9997 15.1993C24.0016 13.8753 22.927 12.8008 21.6003 12.7988H15.2002C13.8735 12.7998 12.7988 13.8743 12.7998 15.1983C12.7988 16.5234 13.8725 17.5978 15.1992 17.5988Z\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tfill-rule=\"evenodd\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tclip-rule=\"evenodd\"\n\t\t\t\td=\"M0 15.1993C-0.000979882 16.5234 1.07371 17.5978 2.40039 17.5988C3.72708 17.5978 4.80177 16.5234 4.80079 15.1993V12.7998H2.40039C1.07371 12.8008 -0.000979882 13.8753 0 15.1993ZM6.40007 15.1993V21.5993C6.3981 22.9234 7.47279 23.9978 8.79948 23.9998C10.1262 23.9988 11.2009 22.9243 11.1999 21.6003V15.2013C11.2018 13.8772 10.1271 12.8027 8.80046 12.8008C7.47279 12.8008 6.39909 13.8753 6.40007 15.1993Z\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tfill-rule=\"evenodd\"\n\t\t\t/>\n\t\t</g>\n\t</svg>\n";
+//#endregion
+export { ICON_EMAIL, ICON_GITHUB, ICON_GOOGLE, ICON_SLACK };

package/dist/ui/icon.js

@@ -0,0 +1,3 @@
+import { ICON_EMAIL, ICON_GITHUB, ICON_GOOGLE, ICON_SLACK } from "../icon-Ci5uqGB_.js";
+
+export { ICON_EMAIL, ICON_GITHUB, ICON_GOOGLE, ICON_SLACK };

package/dist/ui/password.d.ts

@@ -0,0 +1,54 @@
+import "../storage-CxKerLlc.js";
+import "../provider-CwWMG-1l.js";
+import { PasswordConfig } from "../password-Cm0dRMwa.js";
+
+//#region src/ui/password.d.ts
+
+/**
+ * Default text copy for all password authentication UI screens.
+ * All text can be customized via the copy prop.
+ */
+declare const DEFAULT_COPY: {
+  error_email_taken: string;
+  error_invalid_code: string;
+  error_invalid_email: string;
+  error_invalid_password: string;
+  error_password_mismatch: string;
+  error_validation_error: string;
+  register_title: string;
+  register_description: string;
+  login_title: string;
+  login_description: string;
+  register: string;
+  register_prompt: string;
+  login_prompt: string;
+  login: string;
+  change_prompt: string;
+  code_resend: string;
+  code_return: string;
+  input_email: string;
+  input_password: string;
+  input_code: string;
+  input_repeat: string;
+  button_continue: string;
+  logo: string;
+};
+/**
+ * Type for customizable UI copy text.
+ */
+type PasswordUICopy = typeof DEFAULT_COPY;
+/**
+ * Configuration options for the PasswordUI component.
+ */
+interface PasswordUIOptions extends Pick<PasswordConfig, "sendCode" | "validatePassword"> {
+  /**
+   * Custom text copy for UI labels, messages, and errors.
+   */
+  readonly copy?: Partial<PasswordUICopy>;
+}
+/**
+ * Creates a complete UI configuration for password-based authentication.
+ */
+declare const PasswordUI: (options: PasswordUIOptions) => PasswordConfig;
+//#endregion
+export { PasswordUI, PasswordUIOptions };