hazo_auth 1.2.0 → 1.4.0

package/dist/components/layouts/register/hooks/use_register_form.js

@@ -0,0 +1,184 @@
+// file_description: encapsulate register form state, validation, and data interactions
+// section: imports
+import { useCallback, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { REGISTER_FIELD_IDS } from "hazo_auth/components/layouts/register/config/register_field_config";
+import { validateEmail, validatePassword } from "hazo_auth/components/layouts/shared/utils/validation";
+// section: constants
+const PASSWORD_FIELDS = [
+    REGISTER_FIELD_IDS.PASSWORD,
+    REGISTER_FIELD_IDS.CONFIRM_PASSWORD,
+];
+// section: helpers
+const buildInitialValues = () => ({
+    [REGISTER_FIELD_IDS.NAME]: "",
+    [REGISTER_FIELD_IDS.EMAIL]: "",
+    [REGISTER_FIELD_IDS.PASSWORD]: "",
+    [REGISTER_FIELD_IDS.CONFIRM_PASSWORD]: "",
+});
+// section: hook
+export const use_register_form = ({ showNameField, passwordRequirements, dataClient, urlOnLogon, }) => {
+    const [values, setValues] = useState(buildInitialValues);
+    const [errors, setErrors] = useState({});
+    const [passwordVisibility, setPasswordVisibility] = useState({
+        password: false,
+        confirm_password: false,
+    });
+    const [emailTouched, setEmailTouched] = useState(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const isSubmitDisabled = useMemo(() => {
+        if (isSubmitting) {
+            return true;
+        }
+        const hasEmptyField = Object.entries(values).some(([fieldId, fieldValue]) => {
+            if (fieldId === REGISTER_FIELD_IDS.NAME && !showNameField) {
+                return false;
+            }
+            return fieldValue.trim() === "";
+        });
+        const hasErrors = Object.keys(errors).length > 0;
+        return hasEmptyField || hasErrors;
+    }, [errors, showNameField, values, isSubmitting]);
+    const togglePasswordVisibility = useCallback((fieldId) => {
+        setPasswordVisibility((previous) => (Object.assign(Object.assign({}, previous), { [fieldId]: !previous[fieldId] })));
+    }, []);
+    const handleFieldChange = useCallback((fieldId, value) => {
+        setValues((previousValues) => {
+            const nextValues = Object.assign(Object.assign({}, previousValues), { [fieldId]: value });
+            setErrors((previousErrors) => {
+                const updatedErrors = Object.assign({}, previousErrors);
+                // Only validate email on change if it has been touched (blurred)
+                if (fieldId === REGISTER_FIELD_IDS.EMAIL && emailTouched) {
+                    const emailError = validateEmail(value);
+                    if (emailError) {
+                        updatedErrors[REGISTER_FIELD_IDS.EMAIL] = emailError;
+                    }
+                    else {
+                        delete updatedErrors[REGISTER_FIELD_IDS.EMAIL];
+                    }
+                }
+                if (PASSWORD_FIELDS.includes(fieldId)) {
+                    const passwordError = validatePassword(nextValues[REGISTER_FIELD_IDS.PASSWORD], passwordRequirements);
+                    if (passwordError) {
+                        updatedErrors[REGISTER_FIELD_IDS.PASSWORD] = passwordError;
+                    }
+                    else {
+                        delete updatedErrors[REGISTER_FIELD_IDS.PASSWORD];
+                    }
+                    if (nextValues[REGISTER_FIELD_IDS.CONFIRM_PASSWORD].trim().length > 0 &&
+                        nextValues[REGISTER_FIELD_IDS.PASSWORD] !==
+                            nextValues[REGISTER_FIELD_IDS.CONFIRM_PASSWORD]) {
+                        updatedErrors[REGISTER_FIELD_IDS.CONFIRM_PASSWORD] = "passwords do not match";
+                    }
+                    else {
+                        delete updatedErrors[REGISTER_FIELD_IDS.CONFIRM_PASSWORD];
+                    }
+                }
+                return updatedErrors;
+            });
+            return nextValues;
+        });
+    }, [passwordRequirements, emailTouched]);
+    const handleEmailBlur = useCallback(() => {
+        setEmailTouched(true);
+        // Validate email on blur
+        setErrors((previousErrors) => {
+            const updatedErrors = Object.assign({}, previousErrors);
+            const emailValue = values[REGISTER_FIELD_IDS.EMAIL];
+            const emailError = validateEmail(emailValue);
+            if (emailError) {
+                updatedErrors[REGISTER_FIELD_IDS.EMAIL] = emailError;
+            }
+            else {
+                delete updatedErrors[REGISTER_FIELD_IDS.EMAIL];
+            }
+            return updatedErrors;
+        });
+    }, [values]);
+    const handleSubmit = useCallback(async (event) => {
+        event.preventDefault();
+        // Final validation
+        const emailError = validateEmail(values[REGISTER_FIELD_IDS.EMAIL]);
+        const passwordError = validatePassword(values[REGISTER_FIELD_IDS.PASSWORD], passwordRequirements);
+        if (emailError || passwordError) {
+            setErrors(Object.assign(Object.assign({}, (emailError ? { [REGISTER_FIELD_IDS.EMAIL]: emailError } : {})), (passwordError ? { [REGISTER_FIELD_IDS.PASSWORD]: passwordError } : {})));
+            return;
+        }
+        // Check password match
+        if (values[REGISTER_FIELD_IDS.PASSWORD] !==
+            values[REGISTER_FIELD_IDS.CONFIRM_PASSWORD]) {
+            setErrors({
+                [REGISTER_FIELD_IDS.CONFIRM_PASSWORD]: "passwords do not match",
+            });
+            return;
+        }
+        setIsSubmitting(true);
+        setErrors({});
+        try {
+            const response = await fetch("/api/hazo_auth/register", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    name: values[REGISTER_FIELD_IDS.NAME] || undefined,
+                    email: values[REGISTER_FIELD_IDS.EMAIL],
+                    password: values[REGISTER_FIELD_IDS.PASSWORD],
+                    url_on_logon: urlOnLogon,
+                }),
+            });
+            const data = await response.json();
+            if (!response.ok) {
+                throw new Error(data.error || "Registration failed");
+            }
+            // Show success notification
+            toast.success("Registration successful!", {
+                description: "Your account has been created successfully.",
+            });
+            // Reset form on success
+            setValues(buildInitialValues());
+            setErrors({});
+            setPasswordVisibility({
+                password: false,
+                confirm_password: false,
+            });
+            setEmailTouched(false);
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "Registration failed. Please try again.";
+            // Show error notification
+            toast.error("Registration failed", {
+                description: errorMessage,
+            });
+            // Set error state
+            setErrors({
+                submit: errorMessage,
+            });
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    }, [values, passwordRequirements, dataClient, urlOnLogon]);
+    const handleCancel = useCallback(() => {
+        setValues(buildInitialValues());
+        setErrors({});
+        setPasswordVisibility({
+            password: false,
+            confirm_password: false,
+        });
+        setEmailTouched(false);
+    }, []);
+    return {
+        values,
+        errors,
+        passwordVisibility,
+        isSubmitDisabled,
+        isSubmitting,
+        emailTouched,
+        handleFieldChange,
+        handleEmailBlur,
+        togglePasswordVisibility,
+        handleSubmit,
+        handleCancel,
+    };
+};

package/dist/components/layouts/register/index.d.ts

@@ -0,0 +1,23 @@
+import { type ButtonPaletteOverrides, type LayoutFieldMapOverrides, type LayoutLabelOverrides, type PasswordRequirementOverrides } from "hazo_auth/components/layouts/shared/config/layout_customization";
+import { type LayoutDataClient } from "hazo_auth/components/layouts/shared/data/layout_data_client";
+export type RegisterLayoutProps<TClient = unknown> = {
+    image_src: string;
+    image_alt: string;
+    image_background_color?: string;
+    field_overrides?: LayoutFieldMapOverrides;
+    labels?: LayoutLabelOverrides;
+    button_colors?: ButtonPaletteOverrides;
+    password_requirements?: PasswordRequirementOverrides;
+    show_name_field?: boolean;
+    data_client: LayoutDataClient<TClient>;
+    alreadyLoggedInMessage?: string;
+    showLogoutButton?: boolean;
+    showReturnHomeButton?: boolean;
+    returnHomeButtonLabel?: string;
+    returnHomePath?: string;
+    signInPath?: string;
+    signInLabel?: string;
+    urlOnLogon?: string;
+};
+export default function register_layout<TClient>({ image_src, image_alt, image_background_color, field_overrides, labels, button_colors, password_requirements, show_name_field, data_client, alreadyLoggedInMessage, showLogoutButton, showReturnHomeButton, returnHomeButtonLabel, returnHomePath, signInPath, signInLabel, urlOnLogon, }: RegisterLayoutProps<TClient>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layouts/register/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/register/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,EACzB,KAAK,4BAA4B,EAClC,MAAM,iEAAiE,CAAC;AAYzE,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,6DAA6D,CAAC;AAGpG,MAAM,MAAM,mBAAmB,CAAC,OAAO,GAAG,OAAO,IAAI;IACnD,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC,qBAAqB,CAAC,EAAE,4BAA4B,CAAC;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAYF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,OAAO,EAAE,EAC/C,SAAS,EACT,SAAS,EACT,sBAAkC,EAClC,eAAe,EACf,MAAM,EACN,aAAa,EACb,qBAAqB,EACrB,eAAsB,EACtB,WAAW,EACX,sBAAoD,EACpD,gBAAuB,EACvB,oBAA4B,EAC5B,qBAAqC,EACrC,cAAoB,EACpB,UAA+B,EAC/B,WAAuB,EACvB,UAAU,GACX,EAAE,mBAAmB,CAAC,OAAO,CAAC,2CA+I9B"}

package/dist/components/layouts/register/index.js

@@ -0,0 +1,58 @@
+// file_description: register layout component built atop shared layout utilities
+// section: client_directive
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// section: imports
+import Link from "next/link";
+import { Input } from "hazo_auth/components/ui/input";
+import { PasswordField } from "hazo_auth/components/layouts/shared/components/password_field";
+import { FormFieldWrapper } from "hazo_auth/components/layouts/shared/components/form_field_wrapper";
+import { FormHeader } from "hazo_auth/components/layouts/shared/components/form_header";
+import { FormActionButtons } from "hazo_auth/components/layouts/shared/components/form_action_buttons";
+import { TwoColumnAuthLayout } from "hazo_auth/components/layouts/shared/components/two_column_auth_layout";
+import { AlreadyLoggedInGuard } from "hazo_auth/components/layouts/shared/components/already_logged_in_guard";
+import { REGISTER_FIELD_IDS, createRegisterFieldDefinitions, resolveRegisterButtonPalette, resolveRegisterLabels, resolveRegisterPasswordRequirements, } from "hazo_auth/components/layouts/register/config/register_field_config";
+import { use_register_form, } from "hazo_auth/components/layouts/register/hooks/use_register_form";
+const ORDERED_FIELDS = [
+    REGISTER_FIELD_IDS.NAME,
+    REGISTER_FIELD_IDS.EMAIL,
+    REGISTER_FIELD_IDS.PASSWORD,
+    REGISTER_FIELD_IDS.CONFIRM_PASSWORD,
+];
+// section: component
+export default function register_layout({ image_src, image_alt, image_background_color = "#f1f5f9", field_overrides, labels, button_colors, password_requirements, show_name_field = true, data_client, alreadyLoggedInMessage = "You are already logged in", showLogoutButton = true, showReturnHomeButton = false, returnHomeButtonLabel = "Return home", returnHomePath = "/", signInPath = "/hazo_auth/login", signInLabel = "Sign in", urlOnLogon, }) {
+    const fieldDefinitions = createRegisterFieldDefinitions(field_overrides);
+    const resolvedLabels = resolveRegisterLabels(labels);
+    const resolvedButtonPalette = resolveRegisterButtonPalette(button_colors);
+    const resolvedPasswordRequirements = resolveRegisterPasswordRequirements(password_requirements);
+    const form = use_register_form({
+        showNameField: show_name_field,
+        passwordRequirements: resolvedPasswordRequirements,
+        dataClient: data_client,
+        urlOnLogon: urlOnLogon,
+    });
+    const renderFields = (formState) => {
+        const renderOrder = ORDERED_FIELDS.filter((fieldId) => show_name_field || fieldId !== REGISTER_FIELD_IDS.NAME);
+        return renderOrder.map((fieldId) => {
+            const fieldDefinition = fieldDefinitions[fieldId];
+            const fieldValue = formState.values[fieldId];
+            const fieldError = formState.errors[fieldId];
+            const isPasswordField = fieldDefinition.type === "password" &&
+                (fieldId === REGISTER_FIELD_IDS.PASSWORD ||
+                    fieldId === REGISTER_FIELD_IDS.CONFIRM_PASSWORD);
+            const inputElement = isPasswordField ? (_jsx(PasswordField, { inputId: fieldDefinition.id, ariaLabel: fieldDefinition.ariaLabel, value: fieldValue, placeholder: fieldDefinition.placeholder, autoComplete: fieldDefinition.autoComplete, isVisible: formState.passwordVisibility[fieldDefinition.id], onChange: (nextValue) => formState.handleFieldChange(fieldId, nextValue), onToggleVisibility: () => formState.togglePasswordVisibility(fieldDefinition.id), errorMessage: fieldError })) : (_jsx(Input, { id: fieldDefinition.id, type: fieldDefinition.type, value: fieldValue, onChange: (event) => formState.handleFieldChange(fieldId, event.target.value), onBlur: fieldId === REGISTER_FIELD_IDS.EMAIL
+                    ? formState.handleEmailBlur
+                    : undefined, autoComplete: fieldDefinition.autoComplete, placeholder: fieldDefinition.placeholder, "aria-label": fieldDefinition.ariaLabel, className: "cls_register_layout_field_input" }));
+            // Only show email error if field has been touched (blurred)
+            const shouldShowError = isPasswordField
+                ? undefined
+                : fieldId === REGISTER_FIELD_IDS.EMAIL
+                    ? formState.emailTouched && fieldError
+                        ? fieldError
+                        : undefined
+                    : fieldError;
+            return (_jsx(FormFieldWrapper, { fieldId: fieldDefinition.id, label: fieldDefinition.label, input: inputElement, errorMessage: shouldShowError }, fieldId));
+        });
+    };
+    return (_jsx(AlreadyLoggedInGuard, { image_src: image_src, image_alt: image_alt, image_background_color: image_background_color, message: alreadyLoggedInMessage, showLogoutButton: showLogoutButton, showReturnHomeButton: showReturnHomeButton, returnHomeButtonLabel: returnHomeButtonLabel, returnHomePath: returnHomePath, children: _jsx(TwoColumnAuthLayout, { imageSrc: image_src, imageAlt: image_alt, imageBackgroundColor: image_background_color, formContent: _jsxs(_Fragment, { children: [_jsx(FormHeader, { heading: resolvedLabels.heading, subHeading: resolvedLabels.subHeading }), _jsxs("form", { className: "cls_register_layout_form_fields flex flex-col gap-5", onSubmit: form.handleSubmit, "aria-label": "Registration form", children: [renderFields(form), _jsx(FormActionButtons, { submitLabel: resolvedLabels.submitButton, cancelLabel: resolvedLabels.cancelButton, buttonPalette: resolvedButtonPalette, isSubmitDisabled: form.isSubmitDisabled, onCancel: form.handleCancel, submitAriaLabel: "Submit registration form", cancelAriaLabel: "Cancel registration form" }), _jsxs("div", { className: "cls_register_layout_sign_in_link flex items-center justify-center gap-1 text-sm text-muted-foreground", children: [_jsx("span", { children: "Already have an account?" }), _jsx(Link, { href: signInPath, className: "cls_register_layout_sign_in_link_text text-primary underline-offset-4 hover:underline", "aria-label": "Go to sign in page", children: signInLabel })] }), form.isSubmitting && (_jsx("div", { className: "cls_register_submitting_indicator text-sm text-slate-600 text-center", children: "Registering..." }))] })] }) }) }));
+}

package/dist/components/layouts/reset_password/config/reset_password_field_config.d.ts

@@ -0,0 +1,13 @@
+import type { LayoutFieldMap, LayoutFieldMapOverrides } from "hazo_auth/components/layouts/shared/config/layout_customization";
+import { type ButtonPaletteDefaults, type ButtonPaletteOverrides, type LayoutLabelDefaults, type LayoutLabelOverrides, type PasswordRequirementOptions, type PasswordRequirementOverrides } from "hazo_auth/components/layouts/shared/config/layout_customization";
+export declare const RESET_PASSWORD_FIELD_IDS: {
+    readonly PASSWORD: "password";
+    readonly CONFIRM_PASSWORD: "confirm_password";
+};
+export type ResetPasswordFieldId = (typeof RESET_PASSWORD_FIELD_IDS)[keyof typeof RESET_PASSWORD_FIELD_IDS];
+export declare const createResetPasswordFieldDefinitions: (overrides?: LayoutFieldMapOverrides) => LayoutFieldMap;
+export declare const resolveResetPasswordLabels: (overrides?: LayoutLabelOverrides) => LayoutLabelDefaults;
+export declare const resolveResetPasswordButtonPalette: (overrides?: ButtonPaletteOverrides) => ButtonPaletteDefaults;
+export declare const resolveResetPasswordPasswordRequirements: (overrides?: PasswordRequirementOverrides) => PasswordRequirementOptions;
+export declare const RESET_PASSWORD_ALREADY_LOGGED_IN_MESSAGE_DEFAULT = "You're already logged in.";
+//# sourceMappingURL=reset_password_field_config.d.ts.map

package/dist/components/layouts/reset_password/config/reset_password_field_config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reset_password_field_config.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/reset_password/config/reset_password_field_config.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,uBAAuB,EAAE,MAAM,iEAAiE,CAAC;AAC/H,OAAO,EAIL,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,0BAA0B,EAC/B,KAAK,4BAA4B,EAElC,MAAM,iEAAiE,CAAC;AAGzE,eAAO,MAAM,wBAAwB;;;CAG3B,CAAC;AAEX,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,OAAO,wBAAwB,CAAC,CAAC;AAsB5G,eAAO,MAAM,mCAAmC,GAC9C,YAAY,uBAAuB,mBACoC,CAAC;AAU1E,eAAO,MAAM,0BAA0B,GAAI,YAAY,oBAAoB,wBAClB,CAAC;AAU1D,eAAO,MAAM,iCAAiC,GAAI,YAAY,sBAAsB,0BACX,CAAC;AAW1E,eAAO,MAAM,wCAAwC,GACnD,YAAY,4BAA4B,+BAC+C,CAAC;AAG1F,eAAO,MAAM,gDAAgD,8BAA8B,CAAC"}

package/dist/components/layouts/reset_password/config/reset_password_field_config.js

@@ -0,0 +1,53 @@
+import { resolveButtonPalette, resolveFieldDefinitions, resolveLabels, resolvePasswordRequirements, } from "hazo_auth/components/layouts/shared/config/layout_customization";
+// section: field_identifiers
+export const RESET_PASSWORD_FIELD_IDS = {
+    PASSWORD: "password",
+    CONFIRM_PASSWORD: "confirm_password",
+};
+// section: field_definitions
+const RESET_PASSWORD_FIELD_DEFINITIONS = {
+    [RESET_PASSWORD_FIELD_IDS.PASSWORD]: {
+        id: RESET_PASSWORD_FIELD_IDS.PASSWORD,
+        label: "New password",
+        type: "password",
+        autoComplete: "new-password",
+        placeholder: "Enter your new password",
+        ariaLabel: "New password input field",
+    },
+    [RESET_PASSWORD_FIELD_IDS.CONFIRM_PASSWORD]: {
+        id: RESET_PASSWORD_FIELD_IDS.CONFIRM_PASSWORD,
+        label: "Confirm new password",
+        type: "password",
+        autoComplete: "new-password",
+        placeholder: "Re-enter your new password",
+        ariaLabel: "Confirm new password input field",
+    },
+};
+export const createResetPasswordFieldDefinitions = (overrides) => resolveFieldDefinitions(RESET_PASSWORD_FIELD_DEFINITIONS, overrides);
+// section: label_defaults
+const RESET_PASSWORD_LABEL_DEFAULTS = {
+    heading: "Reset your password",
+    subHeading: "Enter your new password below.",
+    submitButton: "Reset password",
+    cancelButton: "Cancel",
+};
+export const resolveResetPasswordLabels = (overrides) => resolveLabels(RESET_PASSWORD_LABEL_DEFAULTS, overrides);
+// section: button_palette_defaults
+const RESET_PASSWORD_BUTTON_PALETTE_DEFAULTS = {
+    submitBackground: "#0f172a",
+    submitText: "#ffffff",
+    cancelBorder: "#cbd5f5",
+    cancelText: "#0f172a",
+};
+export const resolveResetPasswordButtonPalette = (overrides) => resolveButtonPalette(RESET_PASSWORD_BUTTON_PALETTE_DEFAULTS, overrides);
+// section: password_requirements_defaults
+const RESET_PASSWORD_PASSWORD_REQUIREMENT_DEFAULTS = {
+    minimum_length: 8,
+    require_uppercase: false,
+    require_lowercase: false,
+    require_number: false,
+    require_special: false,
+};
+export const resolveResetPasswordPasswordRequirements = (overrides) => resolvePasswordRequirements(RESET_PASSWORD_PASSWORD_REQUIREMENT_DEFAULTS, overrides);
+// section: already_logged_in_label
+export const RESET_PASSWORD_ALREADY_LOGGED_IN_MESSAGE_DEFAULT = "You're already logged in.";

package/dist/components/layouts/reset_password/hooks/use_reset_password_form.d.ts

@@ -0,0 +1,28 @@
+import type { LayoutDataClient } from "hazo_auth/components/layouts/shared/data/layout_data_client";
+import type { PasswordRequirementOptions } from "hazo_auth/components/layouts/shared/config/layout_customization";
+import { type ResetPasswordFieldId } from "hazo_auth/components/layouts/reset_password/config/reset_password_field_config";
+export type ResetPasswordFormValues = Record<ResetPasswordFieldId, string>;
+export type ResetPasswordFormErrors = Partial<Record<ResetPasswordFieldId, string | string[]>>;
+export type PasswordVisibilityState = Record<Extract<ResetPasswordFieldId, "password" | "confirm_password">, boolean>;
+export type UseResetPasswordFormParams<TClient = unknown> = {
+    passwordRequirements: PasswordRequirementOptions;
+    dataClient: LayoutDataClient<TClient>;
+    loginPath?: string;
+};
+export type UseResetPasswordFormResult = {
+    values: ResetPasswordFormValues;
+    errors: ResetPasswordFormErrors;
+    passwordVisibility: PasswordVisibilityState;
+    isSubmitDisabled: boolean;
+    isSubmitting: boolean;
+    isSuccess: boolean;
+    token: string | null;
+    isValidatingToken: boolean;
+    tokenError: string | null;
+    handleFieldChange: (fieldId: ResetPasswordFieldId, value: string) => void;
+    togglePasswordVisibility: (fieldId: "password" | "confirm_password") => void;
+    handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+    handleCancel: () => void;
+};
+export declare const use_reset_password_form: <TClient>({ passwordRequirements, dataClient, loginPath, }: UseResetPasswordFormParams<TClient>) => UseResetPasswordFormResult;
+//# sourceMappingURL=use_reset_password_form.d.ts.map

package/dist/components/layouts/reset_password/hooks/use_reset_password_form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_reset_password_form.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/reset_password/hooks/use_reset_password_form.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6DAA6D,CAAC;AACpG,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iEAAiE,CAAC;AAClH,OAAO,EAA4B,KAAK,oBAAoB,EAAE,MAAM,gFAAgF,CAAC;AAUrJ,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC;AAC3E,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAAC,MAAM,CAAC,oBAAoB,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC,CAAC;AAC/F,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAC1C,OAAO,CAAC,oBAAoB,EAAE,UAAU,GAAG,kBAAkB,CAAC,EAC9D,OAAO,CACR,CAAC;AAEF,MAAM,MAAM,0BAA0B,CAAC,OAAO,GAAG,OAAO,IAAI;IAC1D,oBAAoB,EAAE,0BAA0B,CAAC;IACjD,UAAU,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,MAAM,EAAE,uBAAuB,CAAC;IAChC,MAAM,EAAE,uBAAuB,CAAC;IAChC,kBAAkB,EAAE,uBAAuB,CAAC;IAC5C,gBAAgB,EAAE,OAAO,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,iBAAiB,EAAE,CAAC,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,wBAAwB,EAAE,CAAC,OAAO,EAAE,UAAU,GAAG,kBAAkB,KAAK,IAAI,CAAC;IAC7E,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IAChE,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AASF,eAAO,MAAM,uBAAuB,GAAI,OAAO,EAAG,kDAI/C,0BAA0B,CAAC,OAAO,CAAC,KAAG,0BAyNxC,CAAC"}

package/dist/components/layouts/reset_password/hooks/use_reset_password_form.js

@@ -0,0 +1,201 @@
+// file_description: encapsulate reset password form state, validation, and data interactions
+// section: imports
+import { useCallback, useMemo, useState, useEffect } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { RESET_PASSWORD_FIELD_IDS } from "hazo_auth/components/layouts/reset_password/config/reset_password_field_config";
+import { validatePassword } from "hazo_auth/components/layouts/shared/utils/validation";
+// section: constants
+const PASSWORD_FIELDS = [
+    RESET_PASSWORD_FIELD_IDS.PASSWORD,
+    RESET_PASSWORD_FIELD_IDS.CONFIRM_PASSWORD,
+];
+// section: helpers
+const buildInitialValues = () => ({
+    [RESET_PASSWORD_FIELD_IDS.PASSWORD]: "",
+    [RESET_PASSWORD_FIELD_IDS.CONFIRM_PASSWORD]: "",
+});
+// section: hook
+export const use_reset_password_form = ({ passwordRequirements, dataClient, loginPath = "/hazo_auth/login", }) => {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const tokenParam = searchParams.get("token");
+    const [values, setValues] = useState(buildInitialValues);
+    const [errors, setErrors] = useState({});
+    const [passwordVisibility, setPasswordVisibility] = useState({
+        password: false,
+        confirm_password: false,
+    });
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [isSuccess, setIsSuccess] = useState(false);
+    const [token, setToken] = useState(tokenParam);
+    const [isValidatingToken, setIsValidatingToken] = useState(false);
+    const [tokenError, setTokenError] = useState(null);
+    // Validate token on mount
+    useEffect(() => {
+        if (!tokenParam) {
+            setTokenError("Reset password link invalid or has expired. Please go to Reset Password page to get a new link.");
+            return;
+        }
+        // Validate token by calling validation API
+        const validateToken = async () => {
+            setIsValidatingToken(true);
+            setTokenError(null);
+            try {
+                const response = await fetch(`/api/hazo_auth/validate_reset_token?token=${encodeURIComponent(tokenParam)}`, {
+                    method: "GET",
+                });
+                const data = await response.json();
+                if (!response.ok || !data.success) {
+                    const errorMessage = data.error || "Reset password link invalid or has expired. Please go to Reset Password page to get a new link.";
+                    setTokenError(errorMessage);
+                    setToken(null);
+                }
+                else {
+                    // Token is valid
+                    setToken(tokenParam);
+                    setTokenError(null);
+                }
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : "An error occurred while validating the token";
+                setTokenError("Reset password link invalid or has expired. Please go to Reset Password page to get a new link.");
+                setToken(null);
+            }
+            finally {
+                setIsValidatingToken(false);
+            }
+        };
+        void validateToken();
+    }, [tokenParam]);
+    const isSubmitDisabled = useMemo(() => {
+        if (isSubmitting || isSuccess || !token || tokenError) {
+            return true;
+        }
+        const hasEmptyField = Object.values(values).some((value) => value.trim() === "");
+        if (hasEmptyField) {
+            return true;
+        }
+        return Object.keys(errors).length > 0;
+    }, [isSubmitting, isSuccess, token, tokenError, values, errors]);
+    const handleFieldChange = useCallback((fieldId, value) => {
+        setValues((prev) => (Object.assign(Object.assign({}, prev), { [fieldId]: value })));
+        // Clear error for this field when user starts typing
+        if (errors[fieldId]) {
+            setErrors((prev) => {
+                const next = Object.assign({}, prev);
+                delete next[fieldId];
+                return next;
+            });
+        }
+        // Validate password fields in real-time
+        if (fieldId === RESET_PASSWORD_FIELD_IDS.PASSWORD) {
+            const passwordError = validatePassword(value, passwordRequirements);
+            if (passwordError) {
+                setErrors((prev) => (Object.assign(Object.assign({}, prev), { [RESET_PASSWORD_FIELD_IDS.PASSWORD]: passwordError })));
+            }
+            else {
+                setErrors((prev) => {
+                    const next = Object.assign({}, prev);
+                    delete next[RESET_PASSWORD_FIELD_IDS.PASSWORD];
+                    return next;
+                });
+            }
+            // Also validate confirm password if it has a value
+            if (values[RESET_PASSWORD_FIELD_IDS.CONFIRM_PASSWORD]) {
+                if (value !== values[RESET_PASSWORD_FIELD_IDS.CONFIRM_PASSWORD]) {
+                    setErrors((prev) => (Object.assign(Object.assign({}, prev), { [RESET_PASSWORD_FIELD_IDS.CONFIRM_PASSWORD]: "Passwords do not match" })));
+                }
+                else {
+                    setErrors((prev) => {
+                        const next = Object.assign({}, prev);
+                        delete next[RESET_PASSWORD_FIELD_IDS.CONFIRM_PASSWORD];
+                        return next;
+                    });
+                }
+            }
+        }
+        else if (fieldId === RESET_PASSWORD_FIELD_IDS.CONFIRM_PASSWORD) {
+            if (value !== values[RESET_PASSWORD_FIELD_IDS.PASSWORD]) {
+                setErrors((prev) => (Object.assign(Object.assign({}, prev), { [RESET_PASSWORD_FIELD_IDS.CONFIRM_PASSWORD]: "Passwords do not match" })));
+            }
+            else {
+                setErrors((prev) => {
+                    const next = Object.assign({}, prev);
+                    delete next[RESET_PASSWORD_FIELD_IDS.CONFIRM_PASSWORD];
+                    return next;
+                });
+            }
+        }
+    }, [errors, passwordRequirements, values]);
+    const togglePasswordVisibility = useCallback((fieldId) => {
+        setPasswordVisibility((prev) => (Object.assign(Object.assign({}, prev), { [fieldId]: !prev[fieldId] })));
+    }, []);
+    const handleSubmit = useCallback(async (event) => {
+        event.preventDefault();
+        if (!token) {
+            toast.error("Reset token is missing");
+            return;
+        }
+        // Validate all fields
+        const passwordError = validatePassword(values[RESET_PASSWORD_FIELD_IDS.PASSWORD], passwordRequirements);
+        const confirmPasswordError = values[RESET_PASSWORD_FIELD_IDS.PASSWORD] !== values[RESET_PASSWORD_FIELD_IDS.CONFIRM_PASSWORD]
+            ? "Passwords do not match"
+            : undefined;
+        if (passwordError || confirmPasswordError) {
+            setErrors(Object.assign(Object.assign({}, (passwordError ? { [RESET_PASSWORD_FIELD_IDS.PASSWORD]: passwordError } : {})), (confirmPasswordError ? { [RESET_PASSWORD_FIELD_IDS.CONFIRM_PASSWORD]: confirmPasswordError } : {})));
+            return;
+        }
+        setIsSubmitting(true);
+        try {
+            const response = await fetch("/api/hazo_auth/reset_password", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    token,
+                    new_password: values[RESET_PASSWORD_FIELD_IDS.PASSWORD],
+                }),
+            });
+            const data = await response.json();
+            if (!response.ok || !data.success) {
+                const errorMessage = data.error || "Failed to reset password";
+                toast.error(errorMessage);
+                setTokenError(errorMessage);
+                setIsSubmitting(false);
+                return;
+            }
+            toast.success(data.message || "Password reset successfully");
+            setIsSuccess(true);
+            // Redirect to login after a short delay
+            setTimeout(() => {
+                router.push(loginPath);
+            }, 2000);
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "An error occurred";
+            toast.error(errorMessage);
+            setTokenError(errorMessage);
+            setIsSubmitting(false);
+        }
+    }, [token, values, passwordRequirements, router, loginPath]);
+    const handleCancel = useCallback(() => {
+        router.push(loginPath);
+    }, [router, loginPath]);
+    return {
+        values,
+        errors,
+        passwordVisibility,
+        isSubmitDisabled,
+        isSubmitting,
+        isSuccess,
+        token,
+        isValidatingToken,
+        tokenError,
+        handleFieldChange,
+        togglePasswordVisibility,
+        handleSubmit,
+        handleCancel,
+    };
+};

package/dist/components/layouts/reset_password/index.d.ts

@@ -0,0 +1,23 @@
+import { type ButtonPaletteOverrides, type LayoutFieldMapOverrides, type LayoutLabelOverrides, type PasswordRequirementOverrides } from "hazo_auth/components/layouts/shared/config/layout_customization";
+import { type LayoutDataClient } from "hazo_auth/components/layouts/shared/data/layout_data_client";
+export type ResetPasswordLayoutProps<TClient = unknown> = {
+    image_src: string;
+    image_alt: string;
+    image_background_color?: string;
+    field_overrides?: LayoutFieldMapOverrides;
+    labels?: LayoutLabelOverrides;
+    button_colors?: ButtonPaletteOverrides;
+    password_requirements?: PasswordRequirementOverrides;
+    data_client: LayoutDataClient<TClient>;
+    alreadyLoggedInMessage?: string;
+    showLogoutButton?: boolean;
+    showReturnHomeButton?: boolean;
+    returnHomeButtonLabel?: string;
+    returnHomePath?: string;
+    errorMessage?: string;
+    successMessage?: string;
+    loginPath?: string;
+    forgotPasswordPath?: string;
+};
+export default function reset_password_layout<TClient>({ image_src, image_alt, image_background_color, field_overrides, labels, button_colors, password_requirements, data_client, alreadyLoggedInMessage, showLogoutButton, showReturnHomeButton, returnHomeButtonLabel, returnHomePath, errorMessage, successMessage, loginPath, forgotPasswordPath, }: ResetPasswordLayoutProps<TClient>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layouts/reset_password/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/reset_password/index.tsx"],"names":[],"mappings":"AAYA,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,EACzB,KAAK,4BAA4B,EAClC,MAAM,iEAAiE,CAAC;AAYzE,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,6DAA6D,CAAC;AAIpG,MAAM,MAAM,wBAAwB,CAAC,OAAO,GAAG,OAAO,IAAI;IACxD,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC,qBAAqB,CAAC,EAAE,4BAA4B,CAAC;IACrD,WAAW,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAUF,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,OAAO,EAAE,EACrD,SAAS,EACT,SAAS,EACT,sBAAkC,EAClC,eAAe,EACf,MAAM,EACN,aAAa,EACb,qBAAqB,EACrB,WAAW,EACX,sBAAsB,EACtB,gBAAuB,EACvB,oBAA4B,EAC5B,qBAAqC,EACrC,cAAoB,EACpB,YAAgH,EAChH,cAAuE,EACvE,SAA8B,EAC9B,kBAAiD,GAClD,EAAE,wBAAwB,CAAC,OAAO,CAAC,2CAqNnC"}