hazo_auth 1.3.0 → 1.4.0

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

@@ -0,0 +1,48 @@
+// file_description: Gravatar tab component for profile picture dialog
+// section: client_directive
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// section: imports
+import { useState, useEffect } from "react";
+import { Switch } from "hazo_auth/components/ui/switch";
+import { Label } from "hazo_auth/components/ui/label";
+import { Avatar, AvatarImage, AvatarFallback } from "hazo_auth/components/ui/avatar";
+import { Info } from "lucide-react";
+import gravatarUrl from "gravatar-url";
+// section: component
+/**
+ * Gravatar tab component for profile picture dialog
+ * Shows Gravatar preview and setup instructions
+ * @param props - Component props including email, useGravatar state, and change handler
+ * @returns Gravatar tab component
+ */
+export function ProfilePictureGravatarTab({ email, useGravatar, onUseGravatarChange, disabled = false, gravatarSetupMessage, gravatarNoAccountMessage, gravatarSize, }) {
+    const [gravatarUrlState, setGravatarUrlState] = useState("");
+    const [gravatarExists, setGravatarExists] = useState(null);
+    useEffect(() => {
+        if (email) {
+            const url = gravatarUrl(email, {
+                size: gravatarSize,
+                default: "404", // Return 404 if Gravatar doesn't exist
+            });
+            setGravatarUrlState(url);
+            // Check if Gravatar exists by trying to load the image
+            const img = new Image();
+            img.onload = () => {
+                setGravatarExists(true);
+            };
+            img.onerror = () => {
+                setGravatarExists(false);
+            };
+            img.src = url;
+        }
+    }, [email]);
+    const getInitials = () => {
+        var _a;
+        if (email) {
+            return ((_a = email[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || "?";
+        }
+        return "?";
+    };
+    return (_jsxs("div", { className: "cls_profile_picture_gravatar_tab flex flex-col gap-4", children: [_jsxs("div", { className: "cls_profile_picture_gravatar_tab_switch flex items-center gap-3", children: [_jsx(Switch, { id: "use-gravatar", checked: useGravatar, onCheckedChange: onUseGravatarChange, disabled: disabled, className: "cls_profile_picture_gravatar_tab_switch_input", "aria-label": "Use Gravatar photo" }), _jsx(Label, { htmlFor: "use-gravatar", className: "cls_profile_picture_gravatar_tab_switch_label text-sm font-medium text-slate-700 cursor-pointer", children: "Use Gravatar photo" })] }), _jsx("div", { className: "cls_profile_picture_gravatar_tab_preview flex flex-col items-center gap-4 p-6 border border-slate-200 rounded-lg bg-slate-50", children: gravatarExists === true ? (_jsxs(_Fragment, { children: [_jsxs(Avatar, { className: "cls_profile_picture_gravatar_tab_avatar h-32 w-32", children: [_jsx(AvatarImage, { src: gravatarUrlState, alt: "Gravatar profile picture", className: "cls_profile_picture_gravatar_tab_avatar_image" }), _jsx(AvatarFallback, { className: "cls_profile_picture_gravatar_tab_avatar_fallback bg-slate-200 text-slate-600 text-3xl", children: getInitials() })] }), _jsx("p", { className: "cls_profile_picture_gravatar_tab_success_text text-sm text-slate-600 text-center", children: "Your Gravatar is available and will be used as your profile picture." })] })) : gravatarExists === false ? (_jsx(_Fragment, { children: _jsxs("div", { className: "cls_profile_picture_gravatar_tab_no_gravatar flex flex-col items-center gap-4", children: [_jsx("div", { className: "cls_profile_picture_gravatar_tab_no_gravatar_icon flex items-center justify-center w-16 h-16 rounded-full bg-slate-100", children: _jsx(Info, { className: "h-8 w-8 text-slate-400", "aria-hidden": "true" }) }), _jsxs("div", { className: "cls_profile_picture_gravatar_tab_no_gravatar_content flex flex-col gap-2 text-center", children: [_jsx("p", { className: "cls_profile_picture_gravatar_tab_no_gravatar_title text-sm font-medium text-slate-900", children: "No Gravatar found" }), _jsxs("p", { className: "cls_profile_picture_gravatar_tab_no_gravatar_message text-sm text-slate-600", children: [gravatarSetupMessage, " ", _jsx("span", { className: "font-semibold", children: email }), ":"] }), _jsxs("ol", { className: "cls_profile_picture_gravatar_tab_no_gravatar_steps text-sm text-slate-600 list-decimal list-inside space-y-1 mt-2", children: [_jsxs("li", { children: ["Visit ", _jsx("a", { href: "https://gravatar.com", target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:text-blue-700 underline", children: "gravatar.com" })] }), _jsxs("li", { children: ["Sign up or log in with your email: ", _jsx("span", { className: "font-mono text-xs", children: email })] }), _jsx("li", { children: "Upload a profile picture" }), _jsx("li", { children: "Return here and refresh to see your Gravatar" })] })] })] }) })) : (_jsx(_Fragment, { children: _jsx("div", { className: "cls_profile_picture_gravatar_tab_loading flex items-center justify-center", children: _jsx("p", { className: "cls_profile_picture_gravatar_tab_loading_text text-sm text-slate-600", children: "Checking Gravatar..." }) }) })) })] }));
+}

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

@@ -0,0 +1,21 @@
+export type ProfilePictureLibraryTabProps = {
+    useLibrary: boolean;
+    onUseLibraryChange: (use: boolean) => void;
+    onPhotoSelect: (photoUrl: string) => void;
+    disabled?: boolean;
+    libraryPhotoPath: string;
+    currentPhotoUrl?: string;
+    libraryTooltipMessage: string;
+    tooltipIconSizeSmall: number;
+    libraryPhotoGridColumns: number;
+    libraryPhotoPreviewSize: number;
+};
+/**
+ * Library tab component for profile picture dialog
+ * Two columns: left = vertical category tabs, right = image grid + preview
+ * Lazy loads thumbnails when category is selected
+ * @param props - Component props including library state, photo selection handler, and configuration
+ * @returns Library tab component
+ */
+export declare function ProfilePictureLibraryTab({ useLibrary, onUseLibraryChange, onPhotoSelect, disabled, libraryPhotoPath, currentPhotoUrl, libraryTooltipMessage, tooltipIconSizeSmall, libraryPhotoGridColumns, libraryPhotoPreviewSize, }: ProfilePictureLibraryTabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=profile_picture_library_tab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"profile_picture_library_tab.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/my_settings/components/profile_picture_library_tab.tsx"],"names":[],"mappings":"AAcA,MAAM,MAAM,6BAA6B,GAAG;IAC1C,UAAU,EAAE,OAAO,CAAC;IACpB,kBAAkB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,uBAAuB,EAAE,MAAM,CAAC;IAChC,uBAAuB,EAAE,MAAM,CAAC;CACjC,CAAC;AAGF;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,QAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACrB,oBAAoB,EACpB,uBAAuB,EACvB,uBAAuB,GACxB,EAAE,6BAA6B,2CAuQ/B"}

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

@@ -0,0 +1,144 @@
+// file_description: Library tab component for profile picture dialog with category tabs and image grid
+// section: client_directive
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// section: imports
+import { useState, useEffect } from "react";
+import { Switch } from "hazo_auth/components/ui/switch";
+import { Label } from "hazo_auth/components/ui/label";
+import { Avatar, AvatarFallback } from "hazo_auth/components/ui/avatar";
+import { VerticalTabs, VerticalTabsList, VerticalTabsTrigger } from "hazo_auth/components/ui/vertical-tabs";
+import { Loader2 } from "lucide-react";
+import { HazoUITooltip } from "hazo_auth/components/ui/hazo_ui_tooltip";
+// section: component
+/**
+ * Library tab component for profile picture dialog
+ * Two columns: left = vertical category tabs, right = image grid + preview
+ * Lazy loads thumbnails when category is selected
+ * @param props - Component props including library state, photo selection handler, and configuration
+ * @returns Library tab component
+ */
+export function ProfilePictureLibraryTab({ useLibrary, onUseLibraryChange, onPhotoSelect, disabled = false, libraryPhotoPath, currentPhotoUrl, libraryTooltipMessage, tooltipIconSizeSmall, libraryPhotoGridColumns, libraryPhotoPreviewSize, }) {
+    const [categories, setCategories] = useState([]);
+    const [selectedCategory, setSelectedCategory] = useState(null);
+    const [photos, setPhotos] = useState([]);
+    const [selectedPhoto, setSelectedPhoto] = useState(currentPhotoUrl || null);
+    const [loadingCategories, setLoadingCategories] = useState(false);
+    const [loadingPhotos, setLoadingPhotos] = useState(false);
+    // Load categories on mount
+    useEffect(() => {
+        const loadCategories = async () => {
+            setLoadingCategories(true);
+            try {
+                const response = await fetch("/api/hazo_auth/library_photos");
+                const data = await response.json();
+                if (data.success && data.categories) {
+                    setCategories(data.categories);
+                    // Select first category if available
+                    if (data.categories.length > 0) {
+                        setSelectedCategory(data.categories[0]);
+                    }
+                }
+            }
+            catch (error) {
+                // Client-side error handling - show toast notification
+                import("sonner").then(({ toast }) => {
+                    toast.error("Failed to load photo categories. Please try again.");
+                });
+            }
+            finally {
+                setLoadingCategories(false);
+            }
+        };
+        void loadCategories();
+    }, []);
+    // Sync selectedPhoto with currentPhotoUrl when it changes
+    useEffect(() => {
+        if (currentPhotoUrl && currentPhotoUrl !== selectedPhoto) {
+            setSelectedPhoto(currentPhotoUrl);
+        }
+    }, [currentPhotoUrl]);
+    // Load photos when category is selected
+    useEffect(() => {
+        if (!selectedCategory) {
+            setPhotos([]);
+            if (!currentPhotoUrl) {
+                setSelectedPhoto(null);
+            }
+            return;
+        }
+        const loadPhotos = async () => {
+            setLoadingPhotos(true);
+            try {
+                const response = await fetch(`/api/hazo_auth/library_photos?category=${encodeURIComponent(selectedCategory)}`);
+                const data = await response.json();
+                if (data.success && data.photos) {
+                    setPhotos(data.photos);
+                    // If we have a current photo URL and it's in this category, select it
+                    if (currentPhotoUrl && data.photos.includes(currentPhotoUrl)) {
+                        setSelectedPhoto(currentPhotoUrl);
+                        onPhotoSelect(currentPhotoUrl);
+                    }
+                    else if (data.photos.length > 0) {
+                        // Otherwise, select first photo if available and notify parent
+                        const firstPhoto = data.photos[0];
+                        setSelectedPhoto(firstPhoto);
+                        onPhotoSelect(firstPhoto);
+                    }
+                    else if (!currentPhotoUrl) {
+                        // Clear selection if no photos and no current photo
+                        setSelectedPhoto(null);
+                    }
+                }
+            }
+            catch (error) {
+                // Client-side error handling - show toast notification
+                import("sonner").then(({ toast }) => {
+                    toast.error("Failed to load photos. Please try again.");
+                });
+            }
+            finally {
+                setLoadingPhotos(false);
+            }
+        };
+        void loadPhotos();
+    }, [selectedCategory, onPhotoSelect, currentPhotoUrl]);
+    const handlePhotoClick = (photoUrl) => {
+        setSelectedPhoto(photoUrl);
+        onPhotoSelect(photoUrl);
+    };
+    const getInitials = () => {
+        return "L";
+    };
+    // Map column count to Tailwind grid class
+    const getGridColumnsClass = (columns) => {
+        const columnMap = {
+            1: "grid-cols-1",
+            2: "grid-cols-2",
+            3: "grid-cols-3",
+            4: "grid-cols-4",
+            5: "grid-cols-5",
+            6: "grid-cols-6",
+            7: "grid-cols-7",
+            8: "grid-cols-8",
+        };
+        return columnMap[columns] || "grid-cols-4";
+    };
+    return (_jsxs("div", { className: "cls_profile_picture_library_tab flex flex-col gap-4", children: [_jsxs("div", { className: "cls_profile_picture_library_tab_switch flex items-center gap-3", children: [_jsx(Switch, { id: "use-library", checked: useLibrary, onCheckedChange: onUseLibraryChange, disabled: disabled, className: "cls_profile_picture_library_tab_switch_input", "aria-label": "Use library photo" }), _jsxs(Label, { htmlFor: "use-library", className: "cls_profile_picture_library_tab_switch_label text-sm font-medium text-slate-700 cursor-pointer", children: ["Use library photo", _jsx(HazoUITooltip, { message: libraryTooltipMessage, iconSize: tooltipIconSizeSmall, side: "top" })] })] }), _jsxs("div", { className: "cls_profile_picture_library_tab_content grid grid-cols-12 gap-4", children: [_jsxs("div", { className: "cls_profile_picture_library_tab_categories_container flex flex-col gap-2 col-span-3", children: [_jsx(Label, { className: "cls_profile_picture_library_tab_categories_label text-sm font-medium text-slate-700", children: "Categories" }), loadingCategories ? (_jsx("div", { className: "cls_profile_picture_library_tab_loading flex items-center justify-center p-8 border border-slate-200 rounded-lg bg-slate-50 min-h-[400px]", children: _jsx(Loader2, { className: "h-6 w-6 text-slate-400 animate-spin", "aria-hidden": "true" }) })) : categories.length > 0 ? (_jsx(VerticalTabs, { value: selectedCategory || categories[0], onValueChange: setSelectedCategory, className: "cls_profile_picture_library_tab_vertical_tabs", children: _jsx(VerticalTabsList, { className: "cls_profile_picture_library_tab_vertical_tabs_list w-full", children: categories.map((category) => (_jsx(VerticalTabsTrigger, { value: category, className: "cls_profile_picture_library_tab_vertical_tabs_trigger w-full justify-start", children: category }, category))) }) })) : (_jsx("div", { className: "cls_profile_picture_library_tab_no_categories flex items-center justify-center p-8 border border-slate-200 rounded-lg bg-slate-50 min-h-[400px]", children: _jsx("p", { className: "cls_profile_picture_library_tab_no_categories_text text-sm text-slate-600", children: "No categories available" }) }))] }), _jsxs("div", { className: "cls_profile_picture_library_tab_photos_container flex flex-col gap-2 col-span-6", children: [_jsx(Label, { className: "cls_profile_picture_library_tab_photos_label text-sm font-medium text-slate-700", children: "Photos" }), loadingPhotos ? (_jsx("div", { className: "cls_profile_picture_library_tab_photos_loading flex items-center justify-center p-8 border border-slate-200 rounded-lg bg-slate-50 min-h-[400px]", children: _jsx(Loader2, { className: "h-6 w-6 text-slate-400 animate-spin", "aria-hidden": "true" }) })) : photos.length > 0 ? (_jsx("div", { className: `cls_profile_picture_library_tab_photos_grid grid ${getGridColumnsClass(libraryPhotoGridColumns)} gap-3 overflow-y-auto p-4 border border-slate-200 rounded-lg bg-slate-50 min-h-[400px] max-h-[400px]`, children: photos.map((photoUrl) => (_jsx("button", { type: "button", onClick: () => handlePhotoClick(photoUrl), className: `
+                    cls_profile_picture_library_tab_photo_thumbnail
+                    aspect-square rounded-lg overflow-hidden border-2 transition-colors cursor-pointer
+                    ${selectedPhoto === photoUrl ? "border-blue-500 ring-2 ring-blue-200" : "border-slate-200 hover:border-slate-300"}
+                  `, "aria-label": `Select photo ${photoUrl.split('/').pop()}`, children: _jsx("img", { src: photoUrl, alt: `Library photo ${photoUrl.split('/').pop()}`, className: "cls_profile_picture_library_tab_photo_thumbnail_image w-full h-full object-cover", loading: "lazy", onError: (e) => {
+                                            // Fallback if image fails to load
+                                            const target = e.target;
+                                            target.style.display = 'none';
+                                        } }) }, photoUrl))) })) : (_jsx("div", { className: "cls_profile_picture_library_tab_no_photos flex items-center justify-center p-8 border border-slate-200 rounded-lg bg-slate-50 min-h-[400px]", children: _jsx("p", { className: "cls_profile_picture_library_tab_no_photos_text text-sm text-slate-600", children: "No photos in this category" }) }))] }), _jsxs("div", { className: "cls_profile_picture_library_tab_preview_container flex flex-col gap-2 col-span-3", children: [_jsx(Label, { className: "cls_profile_picture_library_tab_preview_label text-sm font-medium text-slate-700", children: "Preview" }), selectedPhoto ? (_jsxs("div", { className: "cls_profile_picture_library_tab_preview flex flex-col items-center gap-4 p-4 border border-slate-200 rounded-lg bg-slate-50 min-h-[400px] justify-center", children: [_jsx("div", { className: "cls_profile_picture_library_tab_preview_image_wrapper w-full flex items-center justify-center", children: _jsx("img", { src: selectedPhoto, alt: "Selected library photo preview", className: "cls_profile_picture_library_tab_preview_image max-w-full max-h-[350px] rounded-lg object-contain", onError: (e) => {
+                                                // Fallback if preview image fails to load
+                                                const target = e.target;
+                                                target.style.display = 'none';
+                                                const wrapper = target.parentElement;
+                                                if (wrapper) {
+                                                    wrapper.innerHTML = '<p class="text-sm text-red-500">Failed to load preview</p>';
+                                                }
+                                            } }) }), _jsx("p", { className: "cls_profile_picture_library_tab_preview_text text-sm text-slate-600 text-center", children: "Selected photo preview" })] })) : (_jsxs("div", { className: "cls_profile_picture_library_tab_preview_empty flex flex-col items-center justify-center gap-2 p-8 border border-slate-200 rounded-lg bg-slate-50 min-h-[400px]", children: [_jsx(Avatar, { className: "cls_profile_picture_library_tab_preview_empty_avatar h-32 w-32", children: _jsx(AvatarFallback, { className: "cls_profile_picture_library_tab_preview_empty_avatar_fallback bg-slate-200 text-slate-600 text-3xl", children: getInitials() }) }), _jsx("p", { className: "cls_profile_picture_library_tab_preview_empty_text text-sm text-slate-500 text-center", children: "Select a photo to see preview" })] }))] })] })] }));
+}

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

@@ -0,0 +1,23 @@
+export type ProfilePictureUploadTabProps = {
+    useUpload: boolean;
+    onUseUploadChange: (use: boolean) => void;
+    onFileSelect: (file: File) => Promise<void>;
+    maxSize: number;
+    uploadEnabled: boolean;
+    disabled?: boolean;
+    currentPreview?: string;
+    photoUploadDisabledMessage?: string;
+    imageCompressionMaxDimension?: number;
+    uploadFileHardLimitBytes?: number;
+    allowedImageMimeTypes?: string[];
+};
+/**
+ * Upload tab component for profile picture dialog
+ * Two columns: left = dropzone, right = preview
+ * Uses browser-image-compression for client-side compression
+ * @param props - Component props including upload state, file handler, and configuration
+ * @returns Upload tab component
+ */
+export declare function ProfilePictureUploadTab({ useUpload, onUseUploadChange, onFileSelect, maxSize, uploadEnabled, disabled, currentPreview, photoUploadDisabledMessage, imageCompressionMaxDimension, uploadFileHardLimitBytes, // 10MB default
+allowedImageMimeTypes, }: ProfilePictureUploadTabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=profile_picture_upload_tab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"profile_picture_upload_tab.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/my_settings/components/profile_picture_upload_tab.tsx"],"names":[],"mappings":"AAcA,MAAM,MAAM,4BAA4B,GAAG;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;CAClC,CAAC;AAGF;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,iBAAiB,EACjB,YAAY,EACZ,OAAO,EACP,aAAa,EACb,QAAgB,EAChB,cAAc,EACd,0BAA0B,EAC1B,4BAAkC,EAClC,wBAAmC,EAAE,eAAe;AACpD,qBAAgE,GACjE,EAAE,4BAA4B,2CAmS9B"}

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

@@ -0,0 +1,169 @@
+// file_description: Upload tab component for profile picture dialog with dropzone and preview
+// section: client_directive
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// section: imports
+import { useState, useCallback, useEffect } from "react";
+import { Switch } from "hazo_auth/components/ui/switch";
+import { Label } from "hazo_auth/components/ui/label";
+import { Avatar, AvatarImage, AvatarFallback } from "hazo_auth/components/ui/avatar";
+import { Upload, X, Loader2, Info } from "lucide-react";
+import { Button } from "hazo_auth/components/ui/button";
+import imageCompression from "browser-image-compression";
+// section: component
+/**
+ * Upload tab component for profile picture dialog
+ * Two columns: left = dropzone, right = preview
+ * Uses browser-image-compression for client-side compression
+ * @param props - Component props including upload state, file handler, and configuration
+ * @returns Upload tab component
+ */
+export function ProfilePictureUploadTab({ useUpload, onUseUploadChange, onFileSelect, maxSize, uploadEnabled, disabled = false, currentPreview, photoUploadDisabledMessage, imageCompressionMaxDimension = 200, uploadFileHardLimitBytes = 10485760, // 10MB default
+allowedImageMimeTypes = ["image/jpeg", "image/jpg", "image/png"], }) {
+    const [dragActive, setDragActive] = useState(false);
+    const [preview, setPreview] = useState(currentPreview || null);
+    const [isNewImage, setIsNewImage] = useState(false); // Track if preview is showing a newly uploaded image
+    const [uploading, setUploading] = useState(false);
+    const [compressing, setCompressing] = useState(false);
+    const [error, setError] = useState(null);
+    // Update preview when currentPreview changes (e.g., when dialog opens)
+    useEffect(() => {
+        if (currentPreview) {
+            setPreview(currentPreview);
+            setIsNewImage(false); // Reset to current when dialog opens or currentPreview changes
+        }
+        else {
+            // If no current preview, only clear if we're not showing a new image
+            if (!isNewImage) {
+                setPreview(null);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentPreview]); // Only depend on currentPreview to avoid loops, isNewImage check is intentional
+    const handleFile = useCallback(async (file) => {
+        // Validate file type
+        if (!allowedImageMimeTypes.includes(file.type)) {
+            setError(`Invalid file type. Only ${allowedImageMimeTypes.map(t => t.split("/")[1].toUpperCase()).join(", ")} files are allowed.`);
+            return;
+        }
+        // Hard limit: reject files larger than configured limit (too large to process efficiently)
+        if (file.size > uploadFileHardLimitBytes) {
+            setError(`File is too large. Maximum size is ${Math.round(maxSize / 1024)}KB.`);
+            return;
+        }
+        setError(null);
+        setCompressing(false);
+        setUploading(false);
+        // If file is larger than maxSize, compress it
+        if (file.size > maxSize) {
+            setCompressing(true);
+            try {
+                // Compress image
+                const options = {
+                    maxSizeMB: maxSize / (1024 * 1024), // Convert bytes to MB
+                    maxWidthOrHeight: imageCompressionMaxDimension,
+                    useWebWorker: true,
+                    fileType: file.type,
+                };
+                const compressedFile = await imageCompression(file, options);
+                setCompressing(false);
+                // Check if compressed file is still too large
+                if (compressedFile.size > maxSize) {
+                    setError(`File is too large. Maximum size is ${Math.round(maxSize / 1024)}KB. After compression, file is ${Math.round(compressedFile.size / 1024)}KB.`);
+                    return;
+                }
+                // Create preview
+                const reader = new FileReader();
+                reader.onloadend = () => {
+                    setPreview(reader.result);
+                    setIsNewImage(true); // Mark as new image
+                };
+                reader.readAsDataURL(compressedFile);
+                // Upload the compressed file
+                setUploading(true);
+                await onFileSelect(compressedFile);
+                setUploading(false);
+            }
+            catch (error) {
+                setCompressing(false);
+                const errorMessage = error instanceof Error ? error.message : "Failed to compress image";
+                setError(errorMessage);
+            }
+        }
+        else {
+            // File is already small enough, just upload it
+            setUploading(true);
+            try {
+                // Create preview
+                const reader = new FileReader();
+                reader.onloadend = () => {
+                    setPreview(reader.result);
+                    setIsNewImage(true); // Mark as new image
+                };
+                reader.readAsDataURL(file);
+                // Call onFileSelect with original file
+                await onFileSelect(file);
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : "Failed to process image";
+                setError(errorMessage);
+            }
+            finally {
+                setUploading(false);
+            }
+        }
+    }, [maxSize, onFileSelect]);
+    const handleDrag = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.type === "dragenter" || e.type === "dragover") {
+            setDragActive(true);
+        }
+        else if (e.type === "dragleave") {
+            setDragActive(false);
+        }
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragActive(false);
+        if (!uploadEnabled || disabled) {
+            setError("Photo upload is not enabled");
+            return;
+        }
+        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+            void handleFile(e.dataTransfer.files[0]);
+        }
+    }, [uploadEnabled, disabled, handleFile]);
+    const handleChange = useCallback((e) => {
+        e.preventDefault();
+        if (!uploadEnabled || disabled) {
+            setError("Photo upload is not enabled");
+            return;
+        }
+        if (e.target.files && e.target.files[0]) {
+            void handleFile(e.target.files[0]);
+        }
+    }, [uploadEnabled, disabled, handleFile]);
+    const handleRemove = useCallback(() => {
+        setPreview(currentPreview || null); // Reset to current preview if available
+        setIsNewImage(false); // Reset to showing current image
+        setError(null);
+    }, [currentPreview]);
+    const getInitials = () => {
+        return "U";
+    };
+    return (_jsxs("div", { className: "cls_profile_picture_upload_tab flex flex-col gap-4", children: [_jsxs("div", { className: "cls_profile_picture_upload_tab_switch flex items-center gap-3", children: [_jsx(Switch, { id: "use-upload", checked: useUpload, onCheckedChange: onUseUploadChange, disabled: disabled || !uploadEnabled, className: "cls_profile_picture_upload_tab_switch_input", "aria-label": "Use uploaded photo" }), _jsx(Label, { htmlFor: "use-upload", className: "cls_profile_picture_upload_tab_switch_label text-sm font-medium text-slate-700 cursor-pointer", children: "Use uploaded photo" })] }), !uploadEnabled && (_jsxs("div", { className: "cls_profile_picture_upload_tab_disabled flex items-center gap-2 p-3 bg-yellow-50 border border-yellow-200 rounded-lg", children: [_jsx(Info, { className: "h-4 w-4 text-yellow-600", "aria-hidden": "true" }), _jsx("p", { className: "cls_profile_picture_upload_tab_disabled_text text-sm text-yellow-800", children: photoUploadDisabledMessage })] })), _jsxs("div", { className: "cls_profile_picture_upload_tab_content grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "cls_profile_picture_upload_tab_dropzone_container flex flex-col gap-2", children: [_jsx(Label, { className: "cls_profile_picture_upload_tab_dropzone_label text-sm font-medium text-slate-700", children: "Upload Photo" }), _jsxs("div", { className: `
+              cls_profile_picture_upload_tab_dropzone
+              flex flex-col items-center justify-center
+              border-2 border-dashed rounded-lg p-8
+              transition-colors
+              ${dragActive ? "border-blue-500 bg-blue-50" : "border-slate-300 bg-slate-50"}
+              ${disabled || !uploadEnabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:border-slate-400"}
+            `, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, onClick: () => {
+                                    var _a;
+                                    if (!disabled && uploadEnabled) {
+                                        (_a = document.getElementById("file-upload-input")) === null || _a === void 0 ? void 0 : _a.click();
+                                    }
+                                }, children: [_jsx("input", { id: "file-upload-input", type: "file", accept: allowedImageMimeTypes.join(","), onChange: handleChange, disabled: disabled || !uploadEnabled, className: "hidden", "aria-label": "Upload profile picture" }), _jsx(Upload, { className: "h-8 w-8 text-slate-400 mb-2", "aria-hidden": "true" }), _jsx("p", { className: "cls_profile_picture_upload_tab_dropzone_text text-sm text-slate-600 text-center", children: "Drag and drop an image here, or click to select" }), _jsxs("p", { className: "cls_profile_picture_upload_tab_dropzone_hint text-xs text-slate-500 text-center mt-1", children: ["JPG or PNG, max ", Math.round(maxSize / 1024), "KB"] })] }), error && (_jsx("p", { className: "cls_profile_picture_upload_tab_error text-sm text-red-600", role: "alert", children: error }))] }), _jsxs("div", { className: "cls_profile_picture_upload_tab_preview_container flex flex-col gap-2", children: [_jsx(Label, { className: "cls_profile_picture_upload_tab_preview_label text-sm font-medium text-slate-700", children: isNewImage ? "Preview (new)" : "Preview (current)" }), _jsx("div", { className: "cls_profile_picture_upload_tab_preview_content flex flex-col items-center justify-center border border-slate-200 rounded-lg p-6 bg-slate-50 min-h-[200px]", children: compressing ? (_jsxs("div", { className: "cls_profile_picture_upload_tab_compressing flex flex-col items-center gap-2", children: [_jsx(Loader2, { className: "h-8 w-8 text-slate-400 animate-spin", "aria-hidden": "true" }), _jsx("p", { className: "cls_profile_picture_upload_tab_compressing_text text-sm text-slate-600", children: "Compressing image..." })] })) : uploading ? (_jsxs("div", { className: "cls_profile_picture_upload_tab_uploading flex flex-col items-center gap-2", children: [_jsx(Loader2, { className: "h-8 w-8 text-slate-400 animate-spin", "aria-hidden": "true" }), _jsx("p", { className: "cls_profile_picture_upload_tab_uploading_text text-sm text-slate-600", children: "Uploading..." })] })) : preview ? (_jsxs("div", { className: "cls_profile_picture_upload_tab_preview_image_container flex flex-col items-center gap-4", children: [_jsxs("div", { className: "cls_profile_picture_upload_tab_preview_image_wrapper relative", children: [_jsxs(Avatar, { className: "cls_profile_picture_upload_tab_preview_avatar h-32 w-32", children: [_jsx(AvatarImage, { src: preview, alt: "Uploaded profile picture preview", className: "cls_profile_picture_upload_tab_preview_avatar_image" }), _jsx(AvatarFallback, { className: "cls_profile_picture_upload_tab_preview_avatar_fallback bg-slate-200 text-slate-600 text-3xl", children: getInitials() })] }), _jsx(Button, { type: "button", onClick: handleRemove, variant: "ghost", size: "icon", className: "cls_profile_picture_upload_tab_preview_remove absolute -top-2 -right-2 rounded-full h-6 w-6 border border-slate-300 bg-white hover:bg-slate-50", "aria-label": "Remove preview", children: _jsx(X, { className: "h-4 w-4", "aria-hidden": "true" }) })] }), _jsx("p", { className: "cls_profile_picture_upload_tab_preview_success_text text-sm text-slate-600 text-center", children: "Preview of your uploaded photo" })] })) : (_jsxs("div", { className: "cls_profile_picture_upload_tab_preview_empty flex flex-col items-center gap-2", children: [_jsx(Avatar, { className: "cls_profile_picture_upload_tab_preview_empty_avatar h-32 w-32", children: _jsx(AvatarFallback, { className: "cls_profile_picture_upload_tab_preview_empty_avatar_fallback bg-slate-200 text-slate-600 text-3xl", children: getInitials() }) }), _jsx("p", { className: "cls_profile_picture_upload_tab_preview_empty_text text-sm text-slate-500 text-center", children: "Upload an image to see preview" })] })) })] })] })] }));
+}

package/dist/components/layouts/my_settings/config/my_settings_field_config.d.ts

@@ -0,0 +1,19 @@
+import { type ButtonPaletteDefaults, type ButtonPaletteOverrides } from "hazo_auth/components/layouts/shared/config/layout_customization";
+export declare const MY_SETTINGS_FIELD_IDS: {
+    readonly NAME: "name";
+    readonly EMAIL: "email_address";
+    readonly PASSWORD: "password";
+};
+export type MySettingsFieldId = (typeof MY_SETTINGS_FIELD_IDS)[keyof typeof MY_SETTINGS_FIELD_IDS];
+export type MySettingsLabelDefaults = {
+    heading: string;
+    profileTab: string;
+    securityTab: string;
+    lastLoggedInLabel: string;
+    profilePictureLabel: string;
+    changePasswordButton: string;
+};
+export type MySettingsLabelOverrides = Partial<MySettingsLabelDefaults>;
+export declare const resolveMySettingsLabels: (overrides?: MySettingsLabelOverrides) => MySettingsLabelDefaults;
+export declare const resolveMySettingsButtonPalette: (overrides?: ButtonPaletteOverrides) => ButtonPaletteDefaults;
+//# sourceMappingURL=my_settings_field_config.d.ts.map

package/dist/components/layouts/my_settings/config/my_settings_field_config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"my_settings_field_config.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/my_settings/config/my_settings_field_config.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,EAE5B,MAAM,iEAAiE,CAAC;AAGzE,eAAO,MAAM,qBAAqB;;;;CAIxB,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,OAAO,qBAAqB,CAAC,CAAC;AAGnG,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,oBAAoB,EAAE,MAAM,CAAC;CAC9B,CAAC;AAWF,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAAC,uBAAuB,CAAC,CAAC;AAExE,eAAO,MAAM,uBAAuB,GAClC,YAAY,wBAAwB,KACnC,uBAKF,CAAC;AAUF,eAAO,MAAM,8BAA8B,GACzC,YAAY,sBAAsB,0BACqC,CAAC"}

package/dist/components/layouts/my_settings/config/my_settings_field_config.js

@@ -0,0 +1,26 @@
+import { resolveButtonPalette, } from "hazo_auth/components/layouts/shared/config/layout_customization";
+// section: field_identifiers
+export const MY_SETTINGS_FIELD_IDS = {
+    NAME: "name",
+    EMAIL: "email_address",
+    PASSWORD: "password",
+};
+const MY_SETTINGS_LABEL_DEFAULTS = {
+    heading: "My Settings",
+    profileTab: "Profile",
+    securityTab: "Security",
+    lastLoggedInLabel: "Last logged in",
+    profilePictureLabel: "Profile Picture",
+    changePasswordButton: "Change Password",
+};
+export const resolveMySettingsLabels = (overrides) => {
+    return Object.assign(Object.assign({}, MY_SETTINGS_LABEL_DEFAULTS), overrides);
+};
+// section: button_palette_defaults
+const MY_SETTINGS_BUTTON_PALETTE_DEFAULTS = {
+    submitBackground: "#0f172a",
+    submitText: "#ffffff",
+    cancelBorder: "#cbd5f5",
+    cancelText: "#0f172a",
+};
+export const resolveMySettingsButtonPalette = (overrides) => resolveButtonPalette(MY_SETTINGS_BUTTON_PALETTE_DEFAULTS, overrides);

package/dist/components/layouts/my_settings/hooks/use_my_settings.d.ts

@@ -0,0 +1,46 @@
+import type { PasswordRequirementOptions } from "hazo_auth/components/layouts/shared/config/layout_customization";
+export type PasswordFields = {
+    currentPassword: string;
+    newPassword: string;
+    confirmPassword: string;
+    currentPasswordVisible: boolean;
+    newPasswordVisible: boolean;
+    confirmPasswordVisible: boolean;
+    errors: {
+        currentPassword?: string;
+        newPassword?: string | string[];
+        confirmPassword?: string;
+    };
+};
+export type UseMySettingsResult = {
+    name: string;
+    email: string;
+    profilePictureUrl?: string;
+    profileSource?: "upload" | "library" | "gravatar" | "custom";
+    lastLogon?: string;
+    loading: boolean;
+    passwordFields?: PasswordFields;
+    handlePasswordFieldChange: (field: "currentPassword" | "newPassword" | "confirmPassword", value: string) => void;
+    togglePasswordVisibility: (field: "currentPassword" | "newPassword" | "confirmPassword") => void;
+    handlePasswordSave: () => Promise<void>;
+    isPasswordSaveDisabled: boolean;
+    profilePictureDialogOpen: boolean;
+    handleProfilePictureEdit: () => void;
+    handleProfilePictureDialogClose: () => void;
+    handleProfilePictureSave: (profilePictureUrl: string, profileSource: "upload" | "library" | "gravatar") => Promise<void>;
+    handleProfilePictureRemove: () => Promise<void>;
+    handleNameSave: (value: string) => Promise<void>;
+    handleEmailSave: (value: string) => Promise<void>;
+    refreshUserData: () => Promise<void>;
+};
+export type UseMySettingsParams = {
+    passwordRequirements: PasswordRequirementOptions;
+};
+/**
+ * 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 declare function use_my_settings({ passwordRequirements, }: UseMySettingsParams): UseMySettingsResult;
+//# sourceMappingURL=use_my_settings.d.ts.map

package/dist/components/layouts/my_settings/hooks/use_my_settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_my_settings.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/my_settings/hooks/use_my_settings.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iEAAiE,CAAC;AAGlH,MAAM,MAAM,cAAc,GAAG;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,sBAAsB,EAAE,OAAO,CAAC;IAChC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,sBAAsB,EAAE,OAAO,CAAC;IAChC,MAAM,EAAE;QACN,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAChC,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAEhC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IAGjB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,yBAAyB,EAAE,CAAC,KAAK,EAAE,iBAAiB,GAAG,aAAa,GAAG,iBAAiB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjH,wBAAwB,EAAE,CAAC,KAAK,EAAE,iBAAiB,GAAG,aAAa,GAAG,iBAAiB,KAAK,IAAI,CAAC;IACjG,kBAAkB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC,sBAAsB,EAAE,OAAO,CAAC;IAGhC,wBAAwB,EAAE,OAAO,CAAC;IAClC,wBAAwB,EAAE,MAAM,IAAI,CAAC;IACrC,+BAA+B,EAAE,MAAM,IAAI,CAAC;IAC5C,wBAAwB,EAAE,CAAC,iBAAiB,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,GAAG,SAAS,GAAG,UAAU,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzH,0BAA0B,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAGhD,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjD,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAGlD,eAAe,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,oBAAoB,EAAE,0BAA0B,CAAC;CAClD,CAAC;AA4BF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,oBAAoB,GACrB,EAAE,mBAAmB,GAAG,mBAAmB,CA0W3C"}