hazo_auth 1.3.0 → 1.4.0

package/dist/components/layouts/forgot_password/hooks/use_forgot_password_form.js

@@ -0,0 +1,127 @@
+// file_description: encapsulate forgot password form state, validation, and data interactions
+// section: imports
+import { useCallback, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { FORGOT_PASSWORD_FIELD_IDS } from "hazo_auth/components/layouts/forgot_password/config/forgot_password_field_config";
+import { validateEmail } from "hazo_auth/components/layouts/shared/utils/validation";
+// section: helpers
+const buildInitialValues = () => ({
+    [FORGOT_PASSWORD_FIELD_IDS.EMAIL]: "",
+});
+// section: hook
+export const use_forgot_password_form = ({ dataClient, }) => {
+    const [values, setValues] = useState(buildInitialValues);
+    const [errors, setErrors] = useState({});
+    const [emailTouched, setEmailTouched] = useState(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const isSubmitDisabled = useMemo(() => {
+        if (isSubmitting) {
+            return true;
+        }
+        const hasEmptyField = Object.values(values).some((fieldValue) => fieldValue.trim() === "");
+        const hasErrors = Object.keys(errors).length > 0;
+        return hasEmptyField || hasErrors;
+    }, [errors, values, isSubmitting]);
+    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 === FORGOT_PASSWORD_FIELD_IDS.EMAIL && emailTouched) {
+                    const emailError = validateEmail(value);
+                    if (emailError) {
+                        updatedErrors[FORGOT_PASSWORD_FIELD_IDS.EMAIL] = emailError;
+                    }
+                    else {
+                        delete updatedErrors[FORGOT_PASSWORD_FIELD_IDS.EMAIL];
+                    }
+                }
+                return updatedErrors;
+            });
+            return nextValues;
+        });
+    }, [emailTouched]);
+    const handleEmailBlur = useCallback(() => {
+        setEmailTouched(true);
+        // Validate email on blur
+        setErrors((previousErrors) => {
+            const updatedErrors = Object.assign({}, previousErrors);
+            const emailValue = values[FORGOT_PASSWORD_FIELD_IDS.EMAIL];
+            const emailError = validateEmail(emailValue);
+            if (emailError) {
+                updatedErrors[FORGOT_PASSWORD_FIELD_IDS.EMAIL] = emailError;
+            }
+            else {
+                delete updatedErrors[FORGOT_PASSWORD_FIELD_IDS.EMAIL];
+            }
+            return updatedErrors;
+        });
+    }, [values]);
+    const handleSubmit = useCallback(async (event) => {
+        event.preventDefault();
+        // Final validation
+        const emailError = validateEmail(values[FORGOT_PASSWORD_FIELD_IDS.EMAIL]);
+        if (emailError) {
+            setErrors({
+                [FORGOT_PASSWORD_FIELD_IDS.EMAIL]: emailError,
+            });
+            return;
+        }
+        setIsSubmitting(true);
+        setErrors({});
+        try {
+            const response = await fetch("/api/hazo_auth/forgot_password", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    email: values[FORGOT_PASSWORD_FIELD_IDS.EMAIL],
+                }),
+            });
+            const data = await response.json();
+            if (!response.ok) {
+                throw new Error(data.error || "Password reset request failed");
+            }
+            // Show success notification
+            toast.success("Password reset link sent", {
+                description: "If an account with that email exists, a password reset link has been sent.",
+            });
+            // Reset form on success
+            setValues(buildInitialValues());
+            setErrors({});
+            setEmailTouched(false);
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "Password reset request failed. Please try again.";
+            // Show error notification
+            toast.error("Password reset failed", {
+                description: errorMessage,
+            });
+            // Set error state
+            setErrors({
+                submit: errorMessage,
+            });
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    }, [values, dataClient]);
+    const handleCancel = useCallback(() => {
+        setValues(buildInitialValues());
+        setErrors({});
+        setEmailTouched(false);
+    }, []);
+    return {
+        values,
+        errors,
+        isSubmitDisabled,
+        isSubmitting,
+        emailTouched,
+        handleFieldChange,
+        handleEmailBlur,
+        handleSubmit,
+        handleCancel,
+    };
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/forgot_password/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,EAC1B,MAAM,iEAAiE,CAAC;AAWzE,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,6DAA6D,CAAC;AAGpG,MAAM,MAAM,yBAAyB,CAAC,OAAO,GAAG,OAAO,IAAI;IACzD,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,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;CACzB,CAAC;AASF,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,OAAO,EAAE,EACtD,SAAS,EACT,SAAS,EACT,sBAAkC,EAClC,eAAe,EACf,MAAM,EACN,aAAa,EACb,WAAW,EACX,sBAAoD,EACpD,gBAAuB,EACvB,oBAA4B,EAC5B,qBAAqC,EACrC,cAAoB,GACrB,EAAE,yBAAyB,CAAC,OAAO,CAAC,2CAsGpC"}

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

@@ -0,0 +1,43 @@
+// file_description: forgot password 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 { Input } from "hazo_auth/components/ui/input";
+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 { FORGOT_PASSWORD_FIELD_IDS, createForgotPasswordFieldDefinitions, resolveForgotPasswordButtonPalette, resolveForgotPasswordLabels, } from "hazo_auth/components/layouts/forgot_password/config/forgot_password_field_config";
+import { use_forgot_password_form, } from "hazo_auth/components/layouts/forgot_password/hooks/use_forgot_password_form";
+const ORDERED_FIELDS = [
+    FORGOT_PASSWORD_FIELD_IDS.EMAIL,
+];
+// section: component
+export default function forgot_password_layout({ image_src, image_alt, image_background_color = "#f1f5f9", field_overrides, labels, button_colors, data_client, alreadyLoggedInMessage = "You are already logged in", showLogoutButton = true, showReturnHomeButton = false, returnHomeButtonLabel = "Return home", returnHomePath = "/", }) {
+    const fieldDefinitions = createForgotPasswordFieldDefinitions(field_overrides);
+    const resolvedLabels = resolveForgotPasswordLabels(labels);
+    const resolvedButtonPalette = resolveForgotPasswordButtonPalette(button_colors);
+    const form = use_forgot_password_form({
+        dataClient: data_client,
+    });
+    const renderFields = (formState) => {
+        return ORDERED_FIELDS.map((fieldId) => {
+            const fieldDefinition = fieldDefinitions[fieldId];
+            const fieldValue = formState.values[fieldId];
+            const fieldError = formState.errors[fieldId];
+            const inputElement = (_jsx(Input, { id: fieldDefinition.id, type: fieldDefinition.type, value: fieldValue, onChange: (event) => formState.handleFieldChange(fieldId, event.target.value), onBlur: fieldId === FORGOT_PASSWORD_FIELD_IDS.EMAIL
+                    ? formState.handleEmailBlur
+                    : undefined, autoComplete: fieldDefinition.autoComplete, placeholder: fieldDefinition.placeholder, "aria-label": fieldDefinition.ariaLabel, className: "cls_forgot_password_layout_field_input" }));
+            // Only show email error if field has been touched (blurred)
+            const shouldShowError = fieldId === FORGOT_PASSWORD_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_forgot_password_layout_form_fields flex flex-col gap-5", onSubmit: form.handleSubmit, "aria-label": "Forgot password form", children: [renderFields(form), _jsx(FormActionButtons, { submitLabel: resolvedLabels.submitButton, cancelLabel: resolvedLabels.cancelButton, buttonPalette: resolvedButtonPalette, isSubmitDisabled: form.isSubmitDisabled, onCancel: form.handleCancel, submitAriaLabel: "Submit forgot password form", cancelAriaLabel: "Cancel forgot password form" }), form.isSubmitting && (_jsx("div", { className: "cls_forgot_password_submitting_indicator text-sm text-slate-600 text-center", children: "Sending reset link..." }))] })] }) }) }));
+}

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

@@ -0,0 +1,16 @@
+export { default as LoginLayout } from "./login/index";
+export type { LoginLayoutProps } from "./login/index";
+export { default as RegisterLayout } from "./register/index";
+export type { RegisterLayoutProps } from "./register/index";
+export { default as ForgotPasswordLayout } from "./forgot_password/index";
+export type { ForgotPasswordLayoutProps } from "./forgot_password/index";
+export { default as ResetPasswordLayout } from "./reset_password/index";
+export type { ResetPasswordLayoutProps } from "./reset_password/index";
+export { default as EmailVerificationLayout } from "./email_verification/index";
+export type { EmailVerificationLayoutProps } from "./email_verification/index";
+export { default as MySettingsLayout } from "./my_settings/index";
+export type { MySettingsLayoutProps } from "./my_settings/index";
+export { UserManagementLayout } from "./user_management/index";
+export type { UserManagementLayoutProps } from "./user_management/index";
+export * from "./shared/index";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layouts/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC1E,YAAY,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AACxE,YAAY,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAEvE,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAChF,YAAY,EAAE,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AAE/E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAClE,YAAY,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,YAAY,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAGzE,cAAc,gBAAgB,CAAC"}

package/dist/components/layouts/index.js

@@ -0,0 +1,11 @@
+// file_description: barrel export for all layout components
+// section: layout_exports
+export { default as LoginLayout } from "./login/index";
+export { default as RegisterLayout } from "./register/index";
+export { default as ForgotPasswordLayout } from "./forgot_password/index";
+export { default as ResetPasswordLayout } from "./reset_password/index";
+export { default as EmailVerificationLayout } from "./email_verification/index";
+export { default as MySettingsLayout } from "./my_settings/index";
+export { UserManagementLayout } from "./user_management/index";
+// section: shared_exports
+export * from "./shared/index";

package/dist/components/layouts/login/config/login_field_config.d.ts

@@ -0,0 +1,11 @@
+import type { LayoutFieldMap, LayoutFieldMapOverrides } from "hazo_auth/components/layouts/shared/config/layout_customization";
+import { type ButtonPaletteDefaults, type ButtonPaletteOverrides, type LayoutLabelDefaults, type LayoutLabelOverrides } from "hazo_auth/components/layouts/shared/config/layout_customization";
+export declare const LOGIN_FIELD_IDS: {
+    readonly EMAIL: "email_address";
+    readonly PASSWORD: "password";
+};
+export type LoginFieldId = (typeof LOGIN_FIELD_IDS)[keyof typeof LOGIN_FIELD_IDS];
+export declare const createLoginFieldDefinitions: (overrides?: LayoutFieldMapOverrides) => LayoutFieldMap;
+export declare const resolveLoginLabels: (overrides?: LayoutLabelOverrides) => LayoutLabelDefaults;
+export declare const resolveLoginButtonPalette: (overrides?: ButtonPaletteOverrides) => ButtonPaletteDefaults;
+//# sourceMappingURL=login_field_config.d.ts.map

package/dist/components/layouts/login/config/login_field_config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"login_field_config.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/login/config/login_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,EAC1B,MAAM,iEAAiE,CAAC;AAGzE,eAAO,MAAM,eAAe;;;CAGlB,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;AAsBlF,eAAO,MAAM,2BAA2B,GACtC,YAAY,uBAAuB,mBAC2B,CAAC;AAUjE,eAAO,MAAM,kBAAkB,GAAI,YAAY,oBAAoB,wBACnB,CAAC;AAUjD,eAAO,MAAM,yBAAyB,GAAI,YAAY,sBAAsB,0BACZ,CAAC"}

package/dist/components/layouts/login/config/login_field_config.js

@@ -0,0 +1,42 @@
+import { resolveButtonPalette, resolveFieldDefinitions, resolveLabels, } from "hazo_auth/components/layouts/shared/config/layout_customization";
+// section: field_identifiers
+export const LOGIN_FIELD_IDS = {
+    EMAIL: "email_address",
+    PASSWORD: "password",
+};
+// section: field_definitions
+const LOGIN_FIELD_DEFINITIONS = {
+    [LOGIN_FIELD_IDS.EMAIL]: {
+        id: LOGIN_FIELD_IDS.EMAIL,
+        label: "Email address",
+        type: "email",
+        autoComplete: "email",
+        placeholder: "Enter your email address",
+        ariaLabel: "Email address input field",
+    },
+    [LOGIN_FIELD_IDS.PASSWORD]: {
+        id: LOGIN_FIELD_IDS.PASSWORD,
+        label: "Password",
+        type: "password",
+        autoComplete: "current-password",
+        placeholder: "Enter your password",
+        ariaLabel: "Password input field",
+    },
+};
+export const createLoginFieldDefinitions = (overrides) => resolveFieldDefinitions(LOGIN_FIELD_DEFINITIONS, overrides);
+// section: label_defaults
+const LOGIN_LABEL_DEFAULTS = {
+    heading: "Sign in to your account",
+    subHeading: "Enter your credentials to access your secure workspace.",
+    submitButton: "Login",
+    cancelButton: "Cancel",
+};
+export const resolveLoginLabels = (overrides) => resolveLabels(LOGIN_LABEL_DEFAULTS, overrides);
+// section: button_palette_defaults
+const LOGIN_BUTTON_PALETTE_DEFAULTS = {
+    submitBackground: "#0f172a",
+    submitText: "#ffffff",
+    cancelBorder: "#cbd5f5",
+    cancelText: "#0f172a",
+};
+export const resolveLoginButtonPalette = (overrides) => resolveButtonPalette(LOGIN_BUTTON_PALETTE_DEFAULTS, overrides);

package/dist/components/layouts/login/hooks/use_login_form.d.ts

@@ -0,0 +1,34 @@
+import type { LayoutDataClient } from "hazo_auth/components/layouts/shared/data/layout_data_client";
+import { type LoginFieldId } from "hazo_auth/components/layouts/login/config/login_field_config";
+export type LoginFormValues = Record<LoginFieldId, string>;
+export type LoginFormErrors = Partial<Record<LoginFieldId, string>>;
+export type PasswordVisibilityState = {
+    password: boolean;
+};
+export type UseLoginFormParams<TClient = unknown> = {
+    dataClient: LayoutDataClient<TClient>;
+    logger?: {
+        info: (message: string, data?: Record<string, unknown>) => void;
+        error: (message: string, data?: Record<string, unknown>) => void;
+        warn: (message: string, data?: Record<string, unknown>) => void;
+        debug: (message: string, data?: Record<string, unknown>) => void;
+    };
+    redirectRoute?: string;
+    successMessage?: string;
+    urlOnLogon?: string;
+};
+export type UseLoginFormResult = {
+    values: LoginFormValues;
+    errors: LoginFormErrors;
+    passwordVisibility: PasswordVisibilityState;
+    isSubmitDisabled: boolean;
+    emailTouched: boolean;
+    isSuccess: boolean;
+    handleFieldChange: (fieldId: LoginFieldId, value: string) => void;
+    handleEmailBlur: () => void;
+    togglePasswordVisibility: () => void;
+    handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+    handleCancel: () => void;
+};
+export declare const use_login_form: <TClient>({ dataClient, logger, redirectRoute, successMessage, urlOnLogon, }: UseLoginFormParams<TClient>) => UseLoginFormResult;
+//# sourceMappingURL=use_login_form.d.ts.map

package/dist/components/layouts/login/hooks/use_login_form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_login_form.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/login/hooks/use_login_form.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6DAA6D,CAAC;AACpG,OAAO,EAAmB,KAAK,YAAY,EAAE,MAAM,8DAA8D,CAAC;AAMlH,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC3D,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;AACpE,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,OAAO,GAAG,OAAO,IAAI;IAClD,UAAU,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE;QACP,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;QAChE,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;QACjE,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;QAChE,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;KAClE,CAAC;IACF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,eAAe,CAAC;IACxB,kBAAkB,EAAE,uBAAuB,CAAC;IAC5C,gBAAgB,EAAE,OAAO,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,wBAAwB,EAAE,MAAM,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IAChE,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAkBF,eAAO,MAAM,cAAc,GAAI,OAAO,EAAG,oEAMtC,kBAAkB,CAAC,OAAO,CAAC,KAAG,kBA0NhC,CAAC"}

package/dist/components/layouts/login/hooks/use_login_form.js

@@ -0,0 +1,196 @@
+// file_description: encapsulate login form state, validation, data interactions, IP collection, and login attempt logging
+// section: imports
+import { useCallback, useMemo, useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { LOGIN_FIELD_IDS } from "hazo_auth/components/layouts/login/config/login_field_config";
+import { validateEmail } from "hazo_auth/components/layouts/shared/utils/validation";
+import { get_client_ip } from "hazo_auth/components/layouts/shared/utils/ip_address";
+import { trigger_auth_status_refresh } from "hazo_auth/components/layouts/shared/hooks/use_auth_status";
+// section: helpers
+const buildInitialValues = () => ({
+    [LOGIN_FIELD_IDS.EMAIL]: "",
+    [LOGIN_FIELD_IDS.PASSWORD]: "",
+});
+const get_filename = () => {
+    return "use_login_form.ts";
+};
+const get_line_number = () => {
+    // This is a placeholder - in a real implementation, you might use Error stack trace
+    return 0;
+};
+// section: hook
+export const use_login_form = ({ dataClient, logger, redirectRoute, successMessage = "Successfully logged in", urlOnLogon, }) => {
+    const router = useRouter();
+    const [values, setValues] = useState(buildInitialValues);
+    const [errors, setErrors] = useState({});
+    const [passwordVisibility, setPasswordVisibility] = useState({
+        password: false,
+    });
+    const [clientIp, setClientIp] = useState("unknown");
+    const [emailTouched, setEmailTouched] = useState(false);
+    const [isSuccess, setIsSuccess] = useState(false);
+    // section: ip_collection
+    useEffect(() => {
+        let isMounted = true;
+        void get_client_ip().then((ip) => {
+            if (isMounted) {
+                setClientIp(ip);
+            }
+        });
+        return () => {
+            isMounted = false;
+        };
+    }, []);
+    const isSubmitDisabled = useMemo(() => {
+        const allFieldsEmpty = Object.values(values).every((fieldValue) => fieldValue.trim() === "");
+        return allFieldsEmpty;
+    }, [values]);
+    const togglePasswordVisibility = useCallback(() => {
+        setPasswordVisibility((previous) => ({
+            password: !previous.password,
+        }));
+    }, []);
+    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 === LOGIN_FIELD_IDS.EMAIL && emailTouched) {
+                    const emailError = validateEmail(value);
+                    if (emailError) {
+                        updatedErrors[LOGIN_FIELD_IDS.EMAIL] = emailError;
+                    }
+                    else {
+                        delete updatedErrors[LOGIN_FIELD_IDS.EMAIL];
+                    }
+                }
+                return updatedErrors;
+            });
+            return nextValues;
+        });
+    }, [emailTouched]);
+    const handleEmailBlur = useCallback(() => {
+        setEmailTouched(true);
+        // Validate email on blur
+        setErrors((previousErrors) => {
+            const updatedErrors = Object.assign({}, previousErrors);
+            const emailValue = values[LOGIN_FIELD_IDS.EMAIL];
+            const emailError = validateEmail(emailValue);
+            if (emailError) {
+                updatedErrors[LOGIN_FIELD_IDS.EMAIL] = emailError;
+            }
+            else {
+                delete updatedErrors[LOGIN_FIELD_IDS.EMAIL];
+            }
+            return updatedErrors;
+        });
+    }, [values]);
+    // section: login_attempt_logging
+    const log_login_attempt = useCallback((success, errorMessage) => {
+        if (!logger) {
+            return;
+        }
+        const timestamp = new Date().toISOString();
+        const logData = Object.assign({ filename: get_filename(), line_number: get_line_number(), email: values[LOGIN_FIELD_IDS.EMAIL], ip_address: clientIp, timestamp,
+            success }, (errorMessage ? { error_message: errorMessage } : {}));
+        if (success) {
+            logger.info("login_attempt_successful", logData);
+        }
+        else {
+            logger.error("login_attempt_failed", logData);
+        }
+    }, [logger, values, clientIp]);
+    const handleSubmit = useCallback(async (event) => {
+        event.preventDefault();
+        const email = values[LOGIN_FIELD_IDS.EMAIL];
+        const password = values[LOGIN_FIELD_IDS.PASSWORD];
+        try {
+            // Update IP address if still unknown
+            const currentIp = clientIp === "unknown" ? await get_client_ip() : clientIp;
+            setClientIp(currentIp);
+            // Attempt login via API route
+            const response = await fetch("/api/hazo_auth/login", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    email,
+                    password,
+                    url_on_logon: urlOnLogon,
+                }),
+            });
+            const data = await response.json();
+            if (!response.ok || !data.success) {
+                // Check if email is not verified
+                if (data.email_not_verified) {
+                    // Redirect to verify_email page with email and message
+                    const emailParam = encodeURIComponent(email);
+                    const messageParam = encodeURIComponent("Your email address has not been verified. Please verify your email to continue.");
+                    router.push(`/hazo_auth/verify_email?email=${emailParam}&message=${messageParam}`);
+                    return;
+                }
+                // Login failed for other reasons
+                const errorMessage = data.error || "Login failed. Please try again.";
+                // Log failed login attempt
+                log_login_attempt(false, errorMessage);
+                // Set error state (remain on same page)
+                setErrors({
+                    [LOGIN_FIELD_IDS.EMAIL]: errorMessage,
+                });
+                setIsSuccess(false);
+                return;
+            }
+            // Login successful
+            // Log successful login attempt
+            log_login_attempt(true);
+            // Trigger auth status refresh in all components (navbar, sidebar, etc.)
+            trigger_auth_status_refresh();
+            // Refresh the page to update authentication state (cookies are set server-side)
+            router.refresh();
+            // Use redirectUrl from server response if available, otherwise fall back to redirectRoute prop
+            // The server logic already prioritizes: query param > stored DB value > config > default "/"
+            const finalRedirectUrl = data.redirectUrl || redirectRoute;
+            if (finalRedirectUrl) {
+                router.push(finalRedirectUrl);
+            }
+            else {
+                // Otherwise, show success message
+                setIsSuccess(true);
+            }
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "Unknown error occurred";
+            // Log failed login attempt
+            log_login_attempt(false, errorMessage);
+            // Set error state (remain on same page)
+            setErrors({
+                [LOGIN_FIELD_IDS.EMAIL]: errorMessage,
+            });
+            setIsSuccess(false);
+        }
+    }, [values, clientIp, log_login_attempt, redirectRoute, router, urlOnLogon]);
+    const handleCancel = useCallback(() => {
+        setValues(buildInitialValues());
+        setErrors({});
+        setPasswordVisibility({
+            password: false,
+        });
+        setEmailTouched(false);
+        setIsSuccess(false);
+    }, []);
+    return {
+        values,
+        errors,
+        passwordVisibility,
+        isSubmitDisabled,
+        emailTouched,
+        isSuccess,
+        handleFieldChange,
+        handleEmailBlur,
+        togglePasswordVisibility,
+        handleSubmit,
+        handleCancel,
+    };
+};

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

@@ -0,0 +1,31 @@
+import { type ButtonPaletteOverrides, type LayoutFieldMapOverrides, type LayoutLabelOverrides } from "hazo_auth/components/layouts/shared/config/layout_customization";
+import { type LayoutDataClient } from "hazo_auth/components/layouts/shared/data/layout_data_client";
+export type LoginLayoutProps<TClient = unknown> = {
+    image_src: string;
+    image_alt: string;
+    image_background_color?: string;
+    field_overrides?: LayoutFieldMapOverrides;
+    labels?: LayoutLabelOverrides;
+    button_colors?: ButtonPaletteOverrides;
+    data_client: LayoutDataClient<TClient>;
+    logger?: {
+        info: (message: string, data?: Record<string, unknown>) => void;
+        error: (message: string, data?: Record<string, unknown>) => void;
+        warn: (message: string, data?: Record<string, unknown>) => void;
+        debug: (message: string, data?: Record<string, unknown>) => void;
+    };
+    redirectRoute?: string;
+    successMessage?: string;
+    alreadyLoggedInMessage?: string;
+    showLogoutButton?: boolean;
+    showReturnHomeButton?: boolean;
+    returnHomeButtonLabel?: string;
+    returnHomePath?: string;
+    forgot_password_path?: string;
+    forgot_password_label?: string;
+    create_account_path?: string;
+    create_account_label?: string;
+    urlOnLogon?: string;
+};
+export default function login_layout<TClient>({ image_src, image_alt, image_background_color, field_overrides, labels, button_colors, data_client, logger, redirectRoute, successMessage, alreadyLoggedInMessage, showLogoutButton, showReturnHomeButton, returnHomeButtonLabel, returnHomePath, forgot_password_path, forgot_password_label, create_account_path, create_account_label, urlOnLogon, }: LoginLayoutProps<TClient>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/login/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,EAC1B,MAAM,iEAAiE,CAAC;AAWzE,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,6DAA6D,CAAC;AAGpG,MAAM,MAAM,gBAAgB,CAAC,OAAO,GAAG,OAAO,IAAI;IAChD,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,WAAW,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE;QACP,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;QAChE,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;QACjE,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;QAChE,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;KAClE,CAAC;IACF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,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,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAUF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,OAAO,EAAE,EAC5C,SAAS,EACT,SAAS,EACT,sBAAkC,EAClC,eAAe,EACf,MAAM,EACN,aAAa,EACb,WAAW,EACX,MAAM,EACN,aAAa,EACb,cAAyC,EACzC,sBAAoD,EACpD,gBAAuB,EACvB,oBAA4B,EAC5B,qBAAqC,EACrC,cAAoB,EACpB,oBAAmD,EACnD,qBAA0C,EAC1C,mBAA2C,EAC3C,oBAAuC,EACvC,UAAU,GACX,EAAE,gBAAgB,CAAC,OAAO,CAAC,2CAiK3B"}

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

@@ -0,0 +1,58 @@
+// file_description: login 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 { CheckCircle } from "lucide-react";
+import { AlreadyLoggedInGuard } from "hazo_auth/components/layouts/shared/components/already_logged_in_guard";
+import { LOGIN_FIELD_IDS, createLoginFieldDefinitions, resolveLoginButtonPalette, resolveLoginLabels, } from "hazo_auth/components/layouts/login/config/login_field_config";
+import { use_login_form, } from "hazo_auth/components/layouts/login/hooks/use_login_form";
+const ORDERED_FIELDS = [
+    LOGIN_FIELD_IDS.EMAIL,
+    LOGIN_FIELD_IDS.PASSWORD,
+];
+// section: component
+export default function login_layout({ image_src, image_alt, image_background_color = "#f1f5f9", field_overrides, labels, button_colors, data_client, logger, redirectRoute, successMessage = "Successfully logged in", alreadyLoggedInMessage = "You are already logged in", showLogoutButton = true, showReturnHomeButton = false, returnHomeButtonLabel = "Return home", returnHomePath = "/", forgot_password_path = "/hazo_auth/forgot_password", forgot_password_label = "Forgot password?", create_account_path = "/hazo_auth/register", create_account_label = "Create account", urlOnLogon, }) {
+    const fieldDefinitions = createLoginFieldDefinitions(field_overrides);
+    const resolvedLabels = resolveLoginLabels(labels);
+    const resolvedButtonPalette = resolveLoginButtonPalette(button_colors);
+    const form = use_login_form({
+        dataClient: data_client,
+        logger,
+        redirectRoute,
+        successMessage,
+        urlOnLogon: urlOnLogon,
+    });
+    const renderFields = (formState) => {
+        return ORDERED_FIELDS.map((fieldId) => {
+            const fieldDefinition = fieldDefinitions[fieldId];
+            const fieldValue = formState.values[fieldId];
+            const fieldError = formState.errors[fieldId];
+            const isPasswordField = fieldDefinition.type === "password";
+            const inputElement = isPasswordField ? (_jsx(PasswordField, { inputId: fieldDefinition.id, ariaLabel: fieldDefinition.ariaLabel, value: fieldValue, placeholder: fieldDefinition.placeholder, autoComplete: fieldDefinition.autoComplete, isVisible: formState.passwordVisibility.password, onChange: (nextValue) => formState.handleFieldChange(fieldId, nextValue), onToggleVisibility: formState.togglePasswordVisibility, errorMessage: fieldError })) : (_jsx(Input, { id: fieldDefinition.id, type: fieldDefinition.type, value: fieldValue, onChange: (event) => formState.handleFieldChange(fieldId, event.target.value), onBlur: fieldId === LOGIN_FIELD_IDS.EMAIL
+                    ? formState.handleEmailBlur
+                    : undefined, autoComplete: fieldDefinition.autoComplete, placeholder: fieldDefinition.placeholder, "aria-label": fieldDefinition.ariaLabel, className: "cls_login_layout_field_input" }));
+            // Only show email error if field has been touched (blurred)
+            const shouldShowError = isPasswordField
+                ? undefined
+                : fieldId === LOGIN_FIELD_IDS.EMAIL
+                    ? formState.emailTouched && fieldError
+                        ? fieldError
+                        : undefined
+                    : fieldError;
+            return (_jsx(FormFieldWrapper, { fieldId: fieldDefinition.id, label: fieldDefinition.label, input: inputElement, errorMessage: shouldShowError }, fieldId));
+        });
+    };
+    // Show success message if login was successful and no redirect route is provided
+    if (form.isSuccess) {
+        return (_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("div", { className: "cls_login_layout_success flex flex-col items-center justify-center gap-4 p-8 text-center", children: [_jsx(CheckCircle, { className: "cls_login_layout_success_icon h-16 w-16 text-green-600", "aria-hidden": "true" }), _jsx("p", { className: "cls_login_layout_success_message text-lg font-medium text-slate-900", children: successMessage })] })] }) }));
+    }
+    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_login_layout_form_fields flex flex-col gap-5", onSubmit: form.handleSubmit, "aria-label": "Login form", children: [renderFields(form), _jsx(FormActionButtons, { submitLabel: resolvedLabels.submitButton, cancelLabel: resolvedLabels.cancelButton, buttonPalette: resolvedButtonPalette, isSubmitDisabled: form.isSubmitDisabled, onCancel: form.handleCancel, submitAriaLabel: "Submit login form", cancelAriaLabel: "Cancel login form" }), _jsxs("div", { className: "cls_login_layout_support_links flex flex-col gap-1 text-sm text-muted-foreground", children: [_jsx(Link, { href: forgot_password_path, className: "cls_login_layout_forgot_password_link text-primary underline-offset-4 hover:underline", "aria-label": "Go to forgot password page", children: forgot_password_label }), _jsx(Link, { href: create_account_path, className: "cls_login_layout_create_account_link text-primary underline-offset-4 hover:underline", "aria-label": "Go to create account page", children: create_account_label })] })] })] }) }) }));
+}