hazo_auth 1.2.0 → 1.4.0

package/dist/components/layouts/my_settings/hooks/use_my_settings.js

@@ -0,0 +1,354 @@
+// file_description: hook for managing my settings state and API calls
+// section: client_directive
+"use client";
+// section: imports
+import { useState, useCallback } from "react";
+import { use_auth_status, trigger_auth_status_refresh } from "hazo_auth/components/layouts/shared/hooks/use_auth_status";
+import { toast } from "sonner";
+// section: helpers
+/**
+ * Validates email format
+ */
+const validateEmail = (email) => {
+    if (!email || email.trim() === "") {
+        return "Email is required";
+    }
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+        return "Invalid email address format";
+    }
+    return null;
+};
+/**
+ * Validates name (optional, but if provided should not be empty)
+ */
+const validateName = (name) => {
+    if (name.trim() === "") {
+        return "Name cannot be empty";
+    }
+    return null;
+};
+// section: hook
+/**
+ * Hook for managing my settings state and API calls
+ * Handles user data loading, field editing, and API calls for updates
+ * @param params - Hook parameters including password requirements
+ * @returns My settings hook result with state and actions
+ */
+export function use_my_settings({ passwordRequirements, }) {
+    const authStatus = use_auth_status();
+    // Password fields state
+    const [passwordFields, setPasswordFields] = useState({
+        currentPassword: "",
+        newPassword: "",
+        confirmPassword: "",
+        currentPasswordVisible: false,
+        newPasswordVisible: false,
+        confirmPasswordVisible: false,
+        errors: {},
+    });
+    // Get user data from auth status
+    const name = authStatus.name || "";
+    const email = authStatus.email || "";
+    const profilePictureUrl = authStatus.profile_picture_url;
+    const profileSource = authStatus.profile_source;
+    const lastLogon = authStatus.last_logon;
+    const loading = authStatus.loading;
+    /**
+     * Refreshes user data by triggering auth status refresh
+     */
+    const refreshUserData = useCallback(async () => {
+        trigger_auth_status_refresh();
+        // Also call the refresh method directly
+        await authStatus.refresh();
+    }, [authStatus]);
+    /**
+     * Updates user name
+     */
+    const handleNameSave = useCallback(async (value) => {
+        const validationError = validateName(value);
+        if (validationError) {
+            toast.error(validationError);
+            throw new Error(validationError);
+        }
+        try {
+            const response = await fetch("/api/hazo_auth/update_user", {
+                method: "PATCH",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                credentials: "include",
+                body: JSON.stringify({ name: value }),
+            });
+            const data = await response.json();
+            if (!response.ok || !data.success) {
+                const errorMessage = data.error || "Failed to update name";
+                toast.error(errorMessage);
+                throw new Error(errorMessage);
+            }
+            toast.success("Name updated successfully");
+            await refreshUserData();
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "Failed to update name";
+            toast.error(errorMessage);
+            throw error;
+        }
+    }, [refreshUserData]);
+    /**
+     * Updates user email
+     */
+    const handleEmailSave = useCallback(async (value) => {
+        const validationError = validateEmail(value);
+        if (validationError) {
+            toast.error(validationError);
+            throw new Error(validationError);
+        }
+        try {
+            const response = await fetch("/api/hazo_auth/update_user", {
+                method: "PATCH",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                credentials: "include",
+                body: JSON.stringify({ email: value }),
+            });
+            const data = await response.json();
+            if (!response.ok || !data.success) {
+                const errorMessage = data.error || "Failed to update email";
+                toast.error(errorMessage);
+                throw new Error(errorMessage);
+            }
+            if (data.email_changed) {
+                toast.success("Email updated successfully. Please verify your new email address.");
+            }
+            else {
+                toast.success("Email updated successfully");
+            }
+            await refreshUserData();
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "Failed to update email";
+            toast.error(errorMessage);
+            throw error;
+        }
+    }, [refreshUserData]);
+    /**
+     * Validates password requirements
+     */
+    const validatePassword = useCallback((password) => {
+        if (!password || password.length < passwordRequirements.minimum_length) {
+            return `Password must be at least ${passwordRequirements.minimum_length} characters long`;
+        }
+        const errors = [];
+        if (passwordRequirements.require_uppercase && !/[A-Z]/.test(password)) {
+            errors.push("uppercase letter");
+        }
+        if (passwordRequirements.require_lowercase && !/[a-z]/.test(password)) {
+            errors.push("lowercase letter");
+        }
+        if (passwordRequirements.require_number && !/[0-9]/.test(password)) {
+            errors.push("number");
+        }
+        if (passwordRequirements.require_special && !/[^A-Za-z0-9]/.test(password)) {
+            errors.push("special character");
+        }
+        if (errors.length > 0) {
+            return `Password must contain at least one: ${errors.join(", ")}`;
+        }
+        return null;
+    }, [passwordRequirements]);
+    /**
+     * Handles password field change
+     */
+    const handlePasswordFieldChange = useCallback((field, value) => {
+        setPasswordFields((prev) => {
+            const newFields = Object.assign(Object.assign({}, prev), { [field]: value });
+            // Clear errors for this field when user types
+            if (newFields.errors[field]) {
+                newFields.errors = Object.assign(Object.assign({}, newFields.errors), { [field]: undefined });
+            }
+            return newFields;
+        });
+    }, []);
+    /**
+     * Toggles password visibility
+     */
+    const togglePasswordVisibility = useCallback((field) => {
+        setPasswordFields((prev) => {
+            const fieldKey = `${field}Visible`;
+            const currentValue = prev[fieldKey];
+            return Object.assign(Object.assign({}, prev), { [fieldKey]: !currentValue });
+        });
+    }, []);
+    /**
+     * Validates password form
+     */
+    const validatePasswordForm = useCallback(() => {
+        const errors = {};
+        if (!passwordFields.currentPassword) {
+            errors.currentPassword = "Current password is required";
+        }
+        const newPasswordError = validatePassword(passwordFields.newPassword);
+        if (newPasswordError) {
+            errors.newPassword = newPasswordError;
+        }
+        if (!passwordFields.confirmPassword) {
+            errors.confirmPassword = "Please confirm your new password";
+        }
+        else if (passwordFields.newPassword !== passwordFields.confirmPassword) {
+            errors.confirmPassword = "Passwords do not match";
+        }
+        setPasswordFields((prev) => (Object.assign(Object.assign({}, prev), { errors })));
+        return Object.keys(errors).length === 0;
+    }, [passwordFields, validatePassword]);
+    /**
+     * Checks if password save should be disabled
+     */
+    const isPasswordSaveDisabled = useCallback(() => {
+        return !passwordFields.currentPassword || !passwordFields.newPassword || !passwordFields.confirmPassword;
+    }, [passwordFields]);
+    /**
+     * Saves password changes
+     */
+    const handlePasswordSave = useCallback(async () => {
+        if (!validatePasswordForm()) {
+            return;
+        }
+        try {
+            const response = await fetch("/api/hazo_auth/change_password", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                credentials: "include",
+                body: JSON.stringify({
+                    current_password: passwordFields.currentPassword,
+                    new_password: passwordFields.newPassword,
+                }),
+            });
+            const data = await response.json();
+            if (!response.ok || !data.success) {
+                const errorMessage = data.error || "Failed to change password";
+                setPasswordFields((prev) => (Object.assign(Object.assign({}, prev), { errors: { currentPassword: errorMessage } })));
+                toast.error(errorMessage);
+                throw new Error(errorMessage);
+            }
+            toast.success("Password changed successfully");
+            // Reset password fields
+            setPasswordFields({
+                currentPassword: "",
+                newPassword: "",
+                confirmPassword: "",
+                currentPasswordVisible: false,
+                newPasswordVisible: false,
+                confirmPasswordVisible: false,
+                errors: {},
+            });
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "Failed to change password";
+            toast.error(errorMessage);
+            throw error;
+        }
+    }, [passwordFields, validatePasswordForm]);
+    /**
+     * Profile picture dialog state
+     */
+    const [profilePictureDialogOpen, setProfilePictureDialogOpen] = useState(false);
+    /**
+     * Opens profile picture dialog
+     */
+    const handleProfilePictureEdit = useCallback(() => {
+        setProfilePictureDialogOpen(true);
+    }, []);
+    /**
+     * Closes profile picture dialog
+     */
+    const handleProfilePictureDialogClose = useCallback(() => {
+        setProfilePictureDialogOpen(false);
+    }, []);
+    /**
+     * Saves profile picture changes
+     * Note: profilePictureUrl is already a fully-formed URL (Gravatar URL is generated in the dialog)
+     */
+    const handleProfilePictureSave = useCallback(async (profilePictureUrl, profileSource) => {
+        try {
+            const response = await fetch("/api/hazo_auth/update_user", {
+                method: "PATCH",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                credentials: "include",
+                body: JSON.stringify({
+                    profile_picture_url: profilePictureUrl,
+                    profile_source: profileSource,
+                }),
+            });
+            const data = await response.json();
+            if (!response.ok || !data.success) {
+                const errorMessage = data.error || "Failed to update profile picture";
+                toast.error(errorMessage);
+                throw new Error(errorMessage);
+            }
+            toast.success("Profile picture updated successfully");
+            await refreshUserData();
+            setProfilePictureDialogOpen(false);
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "Failed to update profile picture";
+            toast.error(errorMessage);
+            throw error;
+        }
+    }, [refreshUserData]);
+    /**
+     * Removes profile picture
+     * - If upload: deletes the file and clears profile_picture_url and profile_source
+     * - If gravatar/library: clears profile_picture_url and profile_source
+     */
+    const handleProfilePictureRemove = useCallback(async () => {
+        try {
+            const response = await fetch("/api/hazo_auth/remove_profile_picture", {
+                method: "DELETE",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                credentials: "include",
+            });
+            const data = await response.json();
+            if (!response.ok || !data.success) {
+                const errorMessage = data.error || "Failed to remove profile picture";
+                toast.error(errorMessage);
+                throw new Error(errorMessage);
+            }
+            toast.success("Profile picture removed successfully");
+            await refreshUserData();
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "Failed to remove profile picture";
+            toast.error(errorMessage);
+            throw error;
+        }
+    }, [refreshUserData]);
+    return {
+        name,
+        email,
+        profilePictureUrl,
+        profileSource,
+        lastLogon,
+        loading,
+        passwordFields,
+        handlePasswordFieldChange,
+        togglePasswordVisibility,
+        handlePasswordSave,
+        isPasswordSaveDisabled: isPasswordSaveDisabled(),
+        profilePictureDialogOpen,
+        handleProfilePictureEdit,
+        handleProfilePictureDialogClose,
+        handleProfilePictureSave,
+        handleProfilePictureRemove,
+        handleNameSave,
+        handleEmailSave,
+        refreshUserData,
+    };
+}

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

@@ -0,0 +1,64 @@
+import { type MySettingsLabelOverrides } from "hazo_auth/components/layouts/my_settings/config/my_settings_field_config";
+import type { PasswordRequirementOptions, ButtonPaletteOverrides } from "hazo_auth/components/layouts/shared/config/layout_customization";
+export type MySettingsLayoutProps = {
+    labels?: MySettingsLabelOverrides;
+    button_colors?: ButtonPaletteOverrides;
+    password_requirements: PasswordRequirementOptions;
+    profilePicture: {
+        allow_photo_upload: boolean;
+        upload_photo_path?: string;
+        max_photo_size: number;
+        user_photo_default: boolean;
+        user_photo_default_priority1: "gravatar" | "library";
+        user_photo_default_priority2?: "library" | "gravatar";
+        library_photo_path: string;
+    };
+    userFields: {
+        show_name_field: boolean;
+        show_email_field: boolean;
+        show_password_field: boolean;
+    };
+    unauthorizedMessage?: string;
+    loginButtonLabel?: string;
+    loginPath?: string;
+    heading?: string;
+    subHeading?: string;
+    profilePhotoLabel?: string;
+    profilePhotoRecommendation?: string;
+    uploadPhotoButtonLabel?: string;
+    removePhotoButtonLabel?: string;
+    profileInformationLabel?: string;
+    passwordLabel?: string;
+    currentPasswordLabel?: string;
+    newPasswordLabel?: string;
+    confirmPasswordLabel?: string;
+    messages: {
+        photo_upload_disabled_message: string;
+        gravatar_setup_message: string;
+        gravatar_no_account_message: string;
+        library_tooltip_message: string;
+    };
+    uiSizes: {
+        gravatar_size: number;
+        profile_picture_size: number;
+        tooltip_icon_size_default: number;
+        tooltip_icon_size_small: number;
+        library_photo_grid_columns: number;
+        library_photo_preview_size: number;
+        image_compression_max_dimension: number;
+        upload_file_hard_limit_bytes: number;
+    };
+    fileTypes: {
+        allowed_image_extensions: string[];
+        allowed_image_mime_types: string[];
+    };
+};
+/**
+ * My Settings layout component with tabs for profile and security settings
+ * Shows editable fields for name, email, and password change dialog
+ * Displays profile picture and last logged in information
+ * @param props - Component props including labels, button colors, password requirements, etc.
+ * @returns My settings layout component
+ */
+export default function my_settings_layout({ labels, button_colors, password_requirements, profilePicture, userFields, unauthorizedMessage, loginButtonLabel, loginPath, heading, subHeading, profilePhotoLabel, profilePhotoRecommendation, uploadPhotoButtonLabel, removePhotoButtonLabel, profileInformationLabel, passwordLabel, currentPasswordLabel, newPasswordLabel, confirmPasswordLabel, messages, uiSizes, fileTypes, }: MySettingsLayoutProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/my_settings/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAGL,KAAK,wBAAwB,EAC9B,MAAM,0EAA0E,CAAC;AAClF,OAAO,KAAK,EACV,0BAA0B,EAC1B,sBAAsB,EACvB,MAAM,iEAAiE,CAAC;AAOzE,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAClC,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC,qBAAqB,EAAE,0BAA0B,CAAC;IAClD,cAAc,EAAE;QACd,kBAAkB,EAAE,OAAO,CAAC;QAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,cAAc,EAAE,MAAM,CAAC;QACvB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,4BAA4B,EAAE,UAAU,GAAG,SAAS,CAAC;QACrD,4BAA4B,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;QACtD,kBAAkB,EAAE,MAAM,CAAC;KAC5B,CAAC;IACF,UAAU,EAAE;QACV,eAAe,EAAE,OAAO,CAAC;QACzB,gBAAgB,EAAE,OAAO,CAAC;QAC1B,mBAAmB,EAAE,OAAO,CAAC;KAC9B,CAAC;IACF,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,EAAE;QACR,6BAA6B,EAAE,MAAM,CAAC;QACtC,sBAAsB,EAAE,MAAM,CAAC;QAC/B,2BAA2B,EAAE,MAAM,CAAC;QACpC,uBAAuB,EAAE,MAAM,CAAC;KACjC,CAAC;IACF,OAAO,EAAE;QACP,aAAa,EAAE,MAAM,CAAC;QACtB,oBAAoB,EAAE,MAAM,CAAC;QAC7B,yBAAyB,EAAE,MAAM,CAAC;QAClC,uBAAuB,EAAE,MAAM,CAAC;QAChC,0BAA0B,EAAE,MAAM,CAAC;QACnC,0BAA0B,EAAE,MAAM,CAAC;QACnC,+BAA+B,EAAE,MAAM,CAAC;QACxC,4BAA4B,EAAE,MAAM,CAAC;KACtC,CAAC;IACF,SAAS,EAAE;QACT,wBAAwB,EAAE,MAAM,EAAE,CAAC;QACnC,wBAAwB,EAAE,MAAM,EAAE,CAAC;KACpC,CAAC;CACH,CAAC;AAGF;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,MAAM,EACN,aAAa,EACb,qBAAqB,EACrB,cAAc,EACd,UAAU,EACV,mBAAkE,EAClE,gBAAgC,EAChC,SAA8B,EAC9B,OAA4B,EAC5B,UAAoE,EACpE,iBAAmC,EACnC,0BAAqE,EACrE,sBAA2C,EAC3C,sBAAiC,EACjC,uBAA+C,EAC/C,aAA0B,EAC1B,oBAAyC,EACzC,gBAAiC,EACjC,oBAAyC,EACzC,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,qBAAqB,2CAqNvB"}

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

@@ -0,0 +1,65 @@
+// file_description: my settings layout component with tabs for profile and security settings
+// section: client_directive
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// section: imports
+import { Button } from "hazo_auth/components/ui/button";
+import { EditableField } from "hazo_auth/components/layouts/my_settings/components/editable_field";
+import { ProfilePictureDisplay } from "hazo_auth/components/layouts/my_settings/components/profile_picture_display";
+import { ProfilePictureDialog } from "hazo_auth/components/layouts/my_settings/components/profile_picture_dialog";
+import { UnauthorizedGuard } from "hazo_auth/components/layouts/shared/components/unauthorized_guard";
+import { use_my_settings } from "hazo_auth/components/layouts/my_settings/hooks/use_my_settings";
+import { resolveMySettingsLabels, resolveMySettingsButtonPalette, } from "hazo_auth/components/layouts/my_settings/config/my_settings_field_config";
+import { PasswordField } from "hazo_auth/components/layouts/shared/components/password_field";
+import { FormFieldWrapper } from "hazo_auth/components/layouts/shared/components/form_field_wrapper";
+import { Pencil, Trash2 } from "lucide-react";
+// section: component
+/**
+ * My Settings layout component with tabs for profile and security settings
+ * Shows editable fields for name, email, and password change dialog
+ * Displays profile picture and last logged in information
+ * @param props - Component props including labels, button colors, password requirements, etc.
+ * @returns My settings layout component
+ */
+export default function my_settings_layout({ labels, button_colors, password_requirements, profilePicture, userFields, unauthorizedMessage = "You must be logged in to access this page.", loginButtonLabel = "Go to login", loginPath = "/hazo_auth/login", heading = "Account Settings", subHeading = "Manage your profile, password, and email preferences.", profilePhotoLabel = "Profile Photo", profilePhotoRecommendation = "Recommended size: 200x200px. JPG, PNG.", uploadPhotoButtonLabel = "Upload New Photo", removePhotoButtonLabel = "Remove", profileInformationLabel = "Profile Information", passwordLabel = "Password", currentPasswordLabel = "Current Password", newPasswordLabel = "New Password", confirmPasswordLabel = "Confirm Password", messages, uiSizes, fileTypes, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const resolvedLabels = resolveMySettingsLabels(labels);
+    const resolvedButtonPalette = resolveMySettingsButtonPalette(button_colors);
+    const settings = use_my_settings({
+        passwordRequirements: password_requirements,
+    });
+    return (_jsx(UnauthorizedGuard, { message: unauthorizedMessage, loginButtonLabel: loginButtonLabel, loginPath: loginPath, children: _jsxs("div", { className: "cls_my_settings_layout flex flex-col gap-6 p-6 max-w-4xl mx-auto min-h-screen bg-slate-50", children: [_jsxs("div", { className: "cls_my_settings_layout_header flex flex-col gap-2", children: [_jsx("h1", { className: "cls_my_settings_layout_heading text-3xl font-bold text-slate-900", children: heading }), _jsx("p", { className: "cls_my_settings_layout_subheading text-slate-600", children: subHeading })] }), _jsxs("div", { className: "cls_my_settings_layout_profile_photo_section bg-white rounded-lg border border-slate-200 p-6", children: [_jsx("h2", { className: "cls_my_settings_layout_section_heading text-lg font-semibold text-slate-900 mb-4", children: profilePhotoLabel }), _jsx("div", { className: "cls_my_settings_layout_profile_photo_content flex flex-col items-center", children: _jsxs("div", { className: "cls_my_settings_layout_profile_photo_display relative", children: [_jsx(ProfilePictureDisplay, { profilePictureUrl: settings.profilePictureUrl, name: settings.name, email: settings.email, onEdit: settings.handleProfilePictureEdit }), _jsxs("div", { className: "cls_my_settings_layout_profile_photo_actions absolute left-0 right-0 flex items-center justify-between px-2", style: { bottom: '-20px' }, children: [_jsx(Button, { type: "button", onClick: settings.handleProfilePictureEdit, disabled: settings.loading, variant: "ghost", size: "icon", className: "cls_my_settings_layout_upload_photo_button", "aria-label": uploadPhotoButtonLabel, children: _jsx(Pencil, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsx(Button, { type: "button", onClick: settings.handleProfilePictureRemove, disabled: settings.loading || !settings.profilePictureUrl, variant: "ghost", size: "icon", className: "cls_my_settings_layout_remove_photo_button text-red-600 hover:text-red-700 hover:bg-red-50", "aria-label": removePhotoButtonLabel, children: _jsx(Trash2, { className: "h-4 w-4", "aria-hidden": "true" }) })] })] }) })] }), _jsxs("div", { className: "cls_my_settings_layout_profile_information_section bg-white rounded-lg border border-slate-200 p-6", children: [_jsx("h2", { className: "cls_my_settings_layout_section_heading text-lg font-semibold text-slate-900 mb-4", children: profileInformationLabel }), _jsxs("div", { className: "cls_my_settings_layout_profile_information_fields grid grid-cols-1 md:grid-cols-2 gap-6", children: [userFields.show_name_field && (_jsx(EditableField, { label: "Full Name", value: settings.name, type: "text", placeholder: "Enter your full name", onSave: settings.handleNameSave, validation: validateName, disabled: settings.loading, ariaLabel: "Full name input field" })), userFields.show_email_field && (_jsx(EditableField, { label: "Email Address", value: settings.email, type: "email", placeholder: "Enter your email address", onSave: settings.handleEmailSave, validation: validateEmail, disabled: settings.loading, ariaLabel: "Email address input field" }))] })] }), userFields.show_password_field && (_jsxs("div", { className: "cls_my_settings_layout_password_section bg-white rounded-lg border border-slate-200 p-6", children: [_jsx("h2", { className: "cls_my_settings_layout_section_heading text-lg font-semibold text-slate-900 mb-4", children: passwordLabel }), _jsxs("div", { className: "cls_my_settings_layout_password_fields flex flex-col gap-6", children: [_jsx(FormFieldWrapper, { fieldId: "current-password", label: currentPasswordLabel, input: _jsx(PasswordField, { inputId: "current-password", ariaLabel: currentPasswordLabel, value: ((_a = settings.passwordFields) === null || _a === void 0 ? void 0 : _a.currentPassword) || "", placeholder: "Enter your current password", autoComplete: "current-password", isVisible: ((_b = settings.passwordFields) === null || _b === void 0 ? void 0 : _b.currentPasswordVisible) || false, onChange: (value) => settings.handlePasswordFieldChange("currentPassword", value), onToggleVisibility: () => settings.togglePasswordVisibility("currentPassword"), errorMessage: (_d = (_c = settings.passwordFields) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d.currentPassword }) }), _jsxs("div", { className: "cls_my_settings_layout_password_fields_row grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsx(FormFieldWrapper, { fieldId: "new-password", label: newPasswordLabel, input: _jsx(PasswordField, { inputId: "new-password", ariaLabel: newPasswordLabel, value: ((_e = settings.passwordFields) === null || _e === void 0 ? void 0 : _e.newPassword) || "", placeholder: "Enter your new password", autoComplete: "new-password", isVisible: ((_f = settings.passwordFields) === null || _f === void 0 ? void 0 : _f.newPasswordVisible) || false, onChange: (value) => settings.handlePasswordFieldChange("newPassword", value), onToggleVisibility: () => settings.togglePasswordVisibility("newPassword"), errorMessage: (_h = (_g = settings.passwordFields) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h.newPassword }) }), _jsx(FormFieldWrapper, { fieldId: "confirm-password", label: confirmPasswordLabel, input: _jsx(PasswordField, { inputId: "confirm-password", ariaLabel: confirmPasswordLabel, value: ((_j = settings.passwordFields) === null || _j === void 0 ? void 0 : _j.confirmPassword) || "", placeholder: "Confirm your new password", autoComplete: "new-password", isVisible: ((_k = settings.passwordFields) === null || _k === void 0 ? void 0 : _k.confirmPasswordVisible) || false, onChange: (value) => settings.handlePasswordFieldChange("confirmPassword", value), onToggleVisibility: () => settings.togglePasswordVisibility("confirmPassword"), errorMessage: (_m = (_l = settings.passwordFields) === null || _l === void 0 ? void 0 : _l.errors) === null || _m === void 0 ? void 0 : _m.confirmPassword }) })] })] }), _jsx("div", { className: "cls_my_settings_layout_password_actions flex justify-end mt-4", children: _jsx(Button, { type: "button", onClick: settings.handlePasswordSave, disabled: settings.loading || settings.isPasswordSaveDisabled, className: "cls_my_settings_layout_save_password_button", style: {
+                                    backgroundColor: resolvedButtonPalette.submitBackground,
+                                    color: resolvedButtonPalette.submitText,
+                                }, "aria-label": "Save password", children: "Save Password" }) })] })), _jsx(ProfilePictureDialog, { open: settings.profilePictureDialogOpen, onOpenChange: (open) => {
+                        if (open) {
+                            settings.handleProfilePictureEdit();
+                        }
+                        else {
+                            settings.handleProfilePictureDialogClose();
+                        }
+                    }, onSave: settings.handleProfilePictureSave, email: settings.email, allowPhotoUpload: profilePicture.allow_photo_upload, maxPhotoSize: profilePicture.max_photo_size, libraryPhotoPath: profilePicture.library_photo_path, currentProfilePictureUrl: settings.profilePictureUrl, currentProfileSource: settings.profileSource, disabled: settings.loading, messages: messages, uiSizes: uiSizes, fileTypes: fileTypes })] }) }));
+}
+// section: validation_helpers
+/**
+ * Validates name (optional, but if provided should not be empty)
+ */
+function validateName(name) {
+    if (name.trim() === "") {
+        return "Name cannot be empty";
+    }
+    return null;
+}
+/**
+ * Validates email format
+ */
+function validateEmail(email) {
+    if (!email || email.trim() === "") {
+        return "Email is required";
+    }
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+        return "Invalid email address format";
+    }
+    return null;
+}

package/dist/components/layouts/register/config/register_field_config.d.ts

@@ -0,0 +1,14 @@
+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 REGISTER_FIELD_IDS: {
+    readonly NAME: "name";
+    readonly EMAIL: "email_address";
+    readonly PASSWORD: "password";
+    readonly CONFIRM_PASSWORD: "confirm_password";
+};
+export type RegisterFieldId = (typeof REGISTER_FIELD_IDS)[keyof typeof REGISTER_FIELD_IDS];
+export declare const createRegisterFieldDefinitions: (overrides?: LayoutFieldMapOverrides) => LayoutFieldMap;
+export declare const resolveRegisterLabels: (overrides?: LayoutLabelOverrides) => LayoutLabelDefaults;
+export declare const resolveRegisterButtonPalette: (overrides?: ButtonPaletteOverrides) => ButtonPaletteDefaults;
+export declare const resolveRegisterPasswordRequirements: (overrides?: PasswordRequirementOverrides) => PasswordRequirementOptions;
+//# sourceMappingURL=register_field_config.d.ts.map

package/dist/components/layouts/register/config/register_field_config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"register_field_config.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/register/config/register_field_config.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,uBAAuB,EAAE,MAAM,iEAAiE,CAAC;AAC/H,OAAO,EAKL,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,0BAA0B,EAC/B,KAAK,4BAA4B,EAClC,MAAM,iEAAiE,CAAC;AAGzE,eAAO,MAAM,kBAAkB;;;;;CAKrB,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,OAAO,kBAAkB,CAAC,CAAC;AAsC3F,eAAO,MAAM,8BAA8B,GACzC,YAAY,uBAAuB,mBAC8B,CAAC;AAUpE,eAAO,MAAM,qBAAqB,GAAI,YAAY,oBAAoB,wBACnB,CAAC;AAUpD,eAAO,MAAM,4BAA4B,GAAI,YAAY,sBAAsB,0BACZ,CAAC;AAWpE,eAAO,MAAM,mCAAmC,GAC9C,YAAY,4BAA4B,+BACiC,CAAC"}

package/dist/components/layouts/register/config/register_field_config.js

@@ -0,0 +1,69 @@
+import { resolveButtonPalette, resolveFieldDefinitions, resolveLabels, resolvePasswordRequirements, } from "hazo_auth/components/layouts/shared/config/layout_customization";
+// section: field_identifiers
+export const REGISTER_FIELD_IDS = {
+    NAME: "name",
+    EMAIL: "email_address",
+    PASSWORD: "password",
+    CONFIRM_PASSWORD: "confirm_password",
+};
+// section: field_definitions
+const REGISTER_FIELD_DEFINITIONS = {
+    [REGISTER_FIELD_IDS.NAME]: {
+        id: REGISTER_FIELD_IDS.NAME,
+        label: "Full name",
+        type: "text",
+        autoComplete: "name",
+        placeholder: "Enter your full name",
+        ariaLabel: "Full name input field",
+    },
+    [REGISTER_FIELD_IDS.EMAIL]: {
+        id: REGISTER_FIELD_IDS.EMAIL,
+        label: "Email address",
+        type: "email",
+        autoComplete: "email",
+        placeholder: "Enter your email address",
+        ariaLabel: "Email address input field",
+    },
+    [REGISTER_FIELD_IDS.PASSWORD]: {
+        id: REGISTER_FIELD_IDS.PASSWORD,
+        label: "Password",
+        type: "password",
+        autoComplete: "new-password",
+        placeholder: "Enter your password",
+        ariaLabel: "Password input field",
+    },
+    [REGISTER_FIELD_IDS.CONFIRM_PASSWORD]: {
+        id: REGISTER_FIELD_IDS.CONFIRM_PASSWORD,
+        label: "Re-enter password",
+        type: "password",
+        autoComplete: "new-password",
+        placeholder: "Re-enter your password",
+        ariaLabel: "Re-enter password input field",
+    },
+};
+export const createRegisterFieldDefinitions = (overrides) => resolveFieldDefinitions(REGISTER_FIELD_DEFINITIONS, overrides);
+// section: label_defaults
+const REGISTER_LABEL_DEFAULTS = {
+    heading: "Create your hazo account",
+    subHeading: "Secure your access with editable fields powered by shadcn components.",
+    submitButton: "Register",
+    cancelButton: "Cancel",
+};
+export const resolveRegisterLabels = (overrides) => resolveLabels(REGISTER_LABEL_DEFAULTS, overrides);
+// section: button_palette_defaults
+const REGISTER_BUTTON_PALETTE_DEFAULTS = {
+    submitBackground: "#0f172a",
+    submitText: "#ffffff",
+    cancelBorder: "#cbd5f5",
+    cancelText: "#0f172a",
+};
+export const resolveRegisterButtonPalette = (overrides) => resolveButtonPalette(REGISTER_BUTTON_PALETTE_DEFAULTS, overrides);
+// section: password_rules
+const REGISTER_PASSWORD_REQUIREMENTS = {
+    minimum_length: 8,
+    require_uppercase: true,
+    require_lowercase: true,
+    require_number: true,
+    require_special: true,
+};
+export const resolveRegisterPasswordRequirements = (overrides) => resolvePasswordRequirements(REGISTER_PASSWORD_REQUIREMENTS, overrides);

package/dist/components/layouts/register/hooks/use_register_form.d.ts

@@ -0,0 +1,30 @@
+import type { LayoutDataClient } from "hazo_auth/components/layouts/shared/data/layout_data_client";
+import type { PasswordRequirementOptions, PasswordRequirementOverrides } from "hazo_auth/components/layouts/shared/config/layout_customization";
+import { type RegisterFieldId } from "hazo_auth/components/layouts/register/config/register_field_config";
+export type RegisterFormValues = Record<RegisterFieldId, string>;
+export type RegisterFormErrors = Partial<Record<RegisterFieldId, string | string[]>> & {
+    submit?: string;
+};
+export type PasswordVisibilityState = Record<Extract<RegisterFieldId, "password" | "confirm_password">, boolean>;
+export type UseRegisterFormParams<TClient = unknown> = {
+    showNameField: boolean;
+    passwordRequirements: PasswordRequirementOptions;
+    passwordRequirementOverrides?: PasswordRequirementOverrides;
+    dataClient: LayoutDataClient<TClient>;
+    urlOnLogon?: string;
+};
+export type UseRegisterFormResult = {
+    values: RegisterFormValues;
+    errors: RegisterFormErrors;
+    passwordVisibility: PasswordVisibilityState;
+    isSubmitDisabled: boolean;
+    isSubmitting: boolean;
+    emailTouched: boolean;
+    handleFieldChange: (fieldId: RegisterFieldId, value: string) => void;
+    handleEmailBlur: () => void;
+    togglePasswordVisibility: (fieldId: "password" | "confirm_password") => void;
+    handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+    handleCancel: () => void;
+};
+export declare const use_register_form: <TClient>({ showNameField, passwordRequirements, dataClient, urlOnLogon, }: UseRegisterFormParams<TClient>) => UseRegisterFormResult;
+//# sourceMappingURL=use_register_form.d.ts.map

package/dist/components/layouts/register/hooks/use_register_form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_register_form.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/register/hooks/use_register_form.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6DAA6D,CAAC;AACpG,OAAO,KAAK,EAAE,0BAA0B,EAAE,4BAA4B,EAAE,MAAM,iEAAiE,CAAC;AAChJ,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,oEAAoE,CAAC;AAU9H,MAAM,MAAM,kBAAkB,GAAG,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AACjE,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC,GAAG;IACrF,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AACF,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAC1C,OAAO,CAAC,eAAe,EAAE,UAAU,GAAG,kBAAkB,CAAC,EACzD,OAAO,CACR,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,OAAO,GAAG,OAAO,IAAI;IACrD,aAAa,EAAE,OAAO,CAAC;IACvB,oBAAoB,EAAE,0BAA0B,CAAC;IACjD,4BAA4B,CAAC,EAAE,4BAA4B,CAAC;IAC5D,UAAU,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,kBAAkB,EAAE,uBAAuB,CAAC;IAC5C,gBAAgB,EAAE,OAAO,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,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;AAYF,eAAO,MAAM,iBAAiB,GAAI,OAAO,EAAG,kEAKzC,qBAAqB,CAAC,OAAO,CAAC,KAAG,qBAmNnC,CAAC"}