@thetechfossil/auth2 1.2.15 → 1.2.17

package/dist/index.mjs

@@ -2,7 +2,7 @@
 import axios from 'axios';
 import { UpfilesClient, ImageManager } from '@thetechfossil/upfiles';
 export { ConnectProjectDialog, ImageManager, ProjectFilesWidget, UpfilesClient, Uploader } from '@thetechfossil/upfiles';
-import React3, { createContext, forwardRef, useContext, useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import React, { createContext, forwardRef, useContext, useState, useCallback, useEffect, useRef, useMemo } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var __defProp = Object.defineProperty;
@@ -68,6 +68,11 @@ var HttpClient = class {
             return Promise.reject(refreshError);
           }
         }
+        if (error.response && error.response.data && error.response.data.message) {
+          const customError = new Error(error.response.data.message);
+          customError.response = error.response;
+          return Promise.reject(customError);
+        }
         return Promise.reject(error);
       }
     );
@@ -504,7 +509,7 @@ var AuthService = class {
     return response;
   }
 };
-var ThemeContext = createContext({ theme: "light", mounted: false });
+var ThemeContext = React.createContext({ theme: "light", mounted: false });
 function AuthThemeProvider({ children }) {
   const [theme, setTheme] = useState("light");
   const [mounted, setMounted] = useState(false);
@@ -571,11 +576,17 @@ var AuthProvider = ({ children, config }) => {
     const authenticated = authService.isAuthenticated();
     if (authenticated) {
       try {
-        const currentUser = authService.getCurrentUser();
-        setUser(currentUser);
+        const freshUser = await authService.getProfile();
+        setUser(freshUser);
       } catch (error) {
-        console.error("Failed to get current user:", error);
-        setUser(null);
+        console.error("Failed to fetch fresh user profile, falling back to token:", error);
+        try {
+          const currentUser = authService.getCurrentUser();
+          setUser(currentUser);
+        } catch (fallbackError) {
+          console.error("Failed to get current user from token:", fallbackError);
+          setUser(null);
+        }
       }
     } else {
       setUser(null);
@@ -1034,7 +1045,7 @@ try {
 } catch (error) {
   console.warn("react-phone-number-input not available, using fallback");
 }
-var CustomPhoneInput = React3.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var CustomPhoneInput = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   "input",
   {
     ...props,
@@ -3513,7 +3524,19 @@ var UserButton = ({ showName = false, appearance }) => {
           e.currentTarget.style.backgroundColor = "transparent";
         },
         children: [
-          /* @__PURE__ */ jsx("div", { style: {
+          user.avatar ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: user.avatar,
+              alt: user.name,
+              style: {
+                width: "36px",
+                height: "36px",
+                borderRadius: "50%",
+                objectFit: "cover"
+              }
+            }
+          ) : /* @__PURE__ */ jsx("div", { style: {
             width: "36px",
             height: "36px",
             borderRadius: "50%",
@@ -3550,7 +3573,19 @@ var UserButton = ({ showName = false, appearance }) => {
         alignItems: "center",
         gap: "12px"
       }, children: [
-        /* @__PURE__ */ jsx("div", { style: {
+        user.avatar ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: user.avatar,
+            alt: user.name,
+            style: {
+              width: "48px",
+              height: "48px",
+              borderRadius: "50%",
+              objectFit: "cover"
+            }
+          }
+        ) : /* @__PURE__ */ jsx("div", { style: {
           width: "48px",
           height: "48px",
           borderRadius: "50%",
@@ -4430,6 +4465,68 @@ var ChangePassword = ({ onSuccess, appearance }) => {
     )
   ] }) });
 };
+
+// src/react/components/utils/injectModalStyles.ts
+var injectModalStyles = () => {
+  if (document.getElementById("ttf-auth-modal-styles")) {
+    return;
+  }
+  const styleElement = document.createElement("style");
+  styleElement.id = "ttf-auth-modal-styles";
+  styleElement.textContent = `
+    /* ImageManager Modal Styles - Critical for proper modal display */
+    /* Radix UI Dialog styles - Force visibility */
+    [data-radix-portal] {
+      z-index: 99999 !important;
+      position: fixed !important;
+      inset: 0 !important;
+      pointer-events: none !important;
+    }
+
+    [data-radix-portal] > * {
+      pointer-events: auto !important;
+    }
+
+    /* Dialog Overlay */
+    [data-state="open"][data-radix-dialog-overlay],
+    [role="dialog"] + [data-radix-dialog-overlay] {
+      position: fixed !important;
+      inset: 0 !important;
+      z-index: 99998 !important;
+      background-color: rgba(0, 0, 0, 0.6) !important;
+      pointer-events: auto !important;
+    }
+
+    /* Dialog Content - Center the modal properly */
+    [data-state="open"][data-radix-dialog-content],
+    [role="dialog"][data-radix-dialog-content] {
+      position: fixed !important;
+      left: 50% !important;
+      top: 50% !important;
+      transform: translate(-50%, -50%) !important;
+      z-index: 99999 !important;
+      background: white !important;
+      border-radius: 16px !important;
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+      pointer-events: auto !important;
+      width: 95vw !important;
+      max-width: 1280px !important;
+      height: 90vh !important;
+      max-height: 90vh !important;
+      min-width: 800px !important;
+      min-height: 600px !important;
+      overflow: hidden !important;
+    }
+
+    /* Dark mode support */
+    .dark [data-state="open"][data-radix-dialog-content],
+    .dark [role="dialog"][data-radix-dialog-content] {
+      background: #0f172a !important;
+      border: 1px solid #334155 !important;
+    }
+  `;
+  document.head.appendChild(styleElement);
+};
 var AvatarUploader = ({
   onUploadComplete,
   onError,
@@ -4440,32 +4537,30 @@ var AvatarUploader = ({
   upfilesConfig,
   buttonText = "Upload Avatar"
 }) => {
-  const { uploadAndUpdateAvatar } = useAuth();
+  const { user, updateProfile } = useAuth();
   const [open, setOpen] = useState(false);
   const [uploading, setUploading] = useState(false);
+  useEffect(() => {
+    injectModalStyles();
+  }, []);
+  const effectiveFolderPath = useMemo(() => {
+    if (user?.id) {
+      return `users/${user.id}/`;
+    }
+    return upfilesConfig.folderPath || "/";
+  }, [user?.id, upfilesConfig.folderPath]);
   const handleSelect = async (image) => {
     setUploading(true);
     try {
-      const proxyUrl = `${upfilesConfig.baseUrl}/api/download?fileKey=${encodeURIComponent(image.key)}`;
-      const response = await fetch(proxyUrl, {
-        headers: upfilesConfig.apiKey ? {
-          [upfilesConfig.apiKeyHeader || "authorization"]: upfilesConfig.apiKey.startsWith("upk_") ? `Bearer ${upfilesConfig.apiKey}` : upfilesConfig.apiKey
-        } : {}
-      });
-      if (!response.ok) {
-        throw new Error("Failed to fetch image");
-      }
-      const blob = await response.blob();
-      const file = new File([blob], image.originalName, { type: image.contentType });
-      const result = await uploadAndUpdateAvatar(file);
-      if (result.success && result.user?.avatar) {
-        onUploadComplete?.(result.user.avatar);
+      const response = await updateProfile({ avatar: image.url });
+      if (response.success && response.user?.avatar) {
+        onUploadComplete?.(response.user.avatar);
         setOpen(false);
       } else {
-        throw new Error(result.message || "Failed to update avatar");
+        throw new Error(response.message || "Failed to update avatar");
       }
     } catch (error) {
-      const err = error instanceof Error ? error : new Error("Upload failed");
+      const err = error instanceof Error ? error : new Error("Failed to update avatar");
       onError?.(err);
     } finally {
       setUploading(false);
@@ -4495,7 +4590,7 @@ var AvatarUploader = ({
           presignPath: upfilesConfig.presignPath
         },
         projectId: upfilesConfig.projectId,
-        folderPath: upfilesConfig.folderPath || "avatars/",
+        folderPath: effectiveFolderPath,
         title: "Select Avatar",
         description: "Upload a new avatar or select from existing images.",
         mode: "full",
@@ -4812,12 +4907,27 @@ var AvatarManager = ({
   gridClassName,
   maxFileSize = 5 * 1024 * 1024,
   // 5MB default
+  maxFiles = 10,
   mode = "full",
   showDelete = false,
+  autoRecordToDb = true,
+  fetchThumbnails = true,
+  projectId,
+  deleteUrl,
+  onDelete,
   upfilesConfig
 }) => {
-  const { updateProfile } = useAuth();
+  const { user, updateProfile } = useAuth();
   const [updating, setUpdating] = useState(false);
+  useEffect(() => {
+    injectModalStyles();
+  }, []);
+  const effectiveFolderPath = useMemo(() => {
+    if (user?.id) {
+      return `users/${user.id}/`;
+    }
+    return upfilesConfig.folderPath || "/";
+  }, [user?.id, upfilesConfig.folderPath]);
   const handleSelect = async (image) => {
     setUpdating(true);
     try {
@@ -4845,18 +4955,25 @@ var AvatarManager = ({
         apiKey: upfilesConfig.apiKey,
         apiKeyHeader: upfilesConfig.apiKeyHeader || "authorization",
         presignUrl: upfilesConfig.presignUrl,
-        presignPath: upfilesConfig.presignPath
+        presignPath: upfilesConfig.presignPath,
+        headers: upfilesConfig.headers,
+        withCredentials: upfilesConfig.withCredentials
       },
-      folderPath: upfilesConfig.folderPath || "avatars/",
+      projectId,
+      folderPath: effectiveFolderPath,
       title,
       description,
       className,
       gridClassName,
       onSelect: handleSelect,
+      onDelete,
+      deleteUrl,
+      autoRecordToDb,
+      fetchThumbnails,
       maxFileSize,
+      maxFiles,
       mode,
-      showDelete,
-      fetchThumbnails: true
+      showDelete
     }
   );
 };