@thetechfossil/auth2 1.2.7 → 1.2.9

package/dist/index.components.d.ts

@@ -177,6 +177,15 @@ interface UserProfileProps {
     showAvatar?: boolean;
     showEmailChange?: boolean;
     showPasswordChange?: boolean;
+    upfilesConfig?: {
+        baseUrl: string;
+        apiKey?: string;
+        apiKeyHeader?: 'authorization' | 'x-api-key' | 'x-up-api-key';
+        presignUrl?: string;
+        presignPath?: string;
+        folderPath?: string;
+        projectId?: string;
+    };
 }
 declare const UserProfile: React.FC<UserProfileProps>;
 
@@ -206,7 +215,9 @@ interface AvatarUploaderProps {
         presignUrl?: string;
         presignPath?: string;
         folderPath?: string;
+        projectId?: string;
     };
+    buttonText?: string;
 }
 declare const AvatarUploader: React.FC<AvatarUploaderProps>;
 

package/dist/index.components.js

@@ -5,15 +5,19 @@ var React2 = require('react');
 var axios = require('axios');
 var upfiles = require('@thetechfossil/upfiles');
 var jsxRuntime = require('react/jsx-runtime');
-var PhoneInputWithCountry = require('react-phone-number-input');
-require('react-phone-number-input/style.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React2__default = /*#__PURE__*/_interopDefault(React2);
 var axios__default = /*#__PURE__*/_interopDefault(axios);
-var PhoneInputWithCountry__default = /*#__PURE__*/_interopDefault(PhoneInputWithCountry);
 
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw new Error('Dynamic require of "' + x + '" is not supported');
+});
 var HttpClient = class {
   constructor(baseUrl, defaultHeaders = {}) {
     this.csrfToken = null;
@@ -695,6 +699,14 @@ function useThemeColors() {
   const { theme } = useAuthTheme();
   return theme === "dark" ? darkTheme : lightTheme;
 }
+var PhoneInputWithCountry = null;
+try {
+  const module = __require("react-phone-number-input");
+  PhoneInputWithCountry = module.default || module;
+  __require("react-phone-number-input/style.css");
+} catch (error) {
+  console.warn("react-phone-number-input not available, using fallback");
+}
 var CustomPhoneInput = React2__default.default.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "input",
   {
@@ -887,6 +899,30 @@ var PhoneInput = ({
   const handleChange = React2.useMemo(() => (val) => {
     onChange(val || "");
   }, [onChange]);
+  if (!PhoneInputWithCountry) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        id,
+        type: "tel",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        disabled,
+        required,
+        placeholder,
+        style: {
+          width: "100%",
+          padding: "12px 16px",
+          border: `1px solid ${colors.borderSecondary}`,
+          borderRadius: "8px",
+          fontSize: "16px",
+          backgroundColor: colors.bgSecondary,
+          color: colors.textPrimary,
+          ...style
+        }
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -897,7 +933,7 @@ var PhoneInput = ({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("style", { children: styleContent }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          PhoneInputWithCountry__default.default,
+          PhoneInputWithCountry,
           {
             id,
             international: true,
@@ -4113,15 +4149,85 @@ var ChangePassword = ({ onSuccess, appearance }) => {
     )
   ] }) });
 };
+var AvatarUploader = ({
+  onUploadComplete,
+  onError,
+  className,
+  buttonClassName,
+  maxFileSize = 5 * 1024 * 1024,
+  // 5MB default
+  upfilesConfig,
+  buttonText = "Upload Avatar"
+}) => {
+  const { uploadAndUpdateAvatar } = useAuth2();
+  const [open, setOpen] = React2.useState(false);
+  const [uploading, setUploading] = React2.useState(false);
+  const handleSelect = async (image) => {
+    setUploading(true);
+    try {
+      const response = await fetch(image.url);
+      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);
+        setOpen(false);
+      } else {
+        throw new Error(result.message || "Failed to update avatar");
+      }
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error("Upload failed");
+      onError?.(err);
+    } finally {
+      setUploading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(true),
+        disabled: uploading,
+        className: buttonClassName || "px-4 py-2 text-sm rounded border bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50",
+        children: uploading ? "Uploading..." : buttonText
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      upfiles.ImageManager,
+      {
+        open,
+        onOpenChange: setOpen,
+        clientOptions: {
+          baseUrl: upfilesConfig.baseUrl,
+          apiKey: upfilesConfig.apiKey,
+          apiKeyHeader: upfilesConfig.apiKeyHeader || "authorization",
+          presignUrl: upfilesConfig.presignUrl,
+          presignPath: upfilesConfig.presignPath
+        },
+        projectId: upfilesConfig.projectId,
+        folderPath: upfilesConfig.folderPath || "avatars/",
+        title: "Select Avatar",
+        description: "Upload a new avatar or select from existing images.",
+        mode: "full",
+        maxFileSize,
+        maxFiles: 1,
+        autoRecordToDb: true,
+        fetchThumbnails: true,
+        onSelect: handleSelect
+      }
+    )
+  ] });
+};
 var UserProfile = ({
   showAvatar = true,
   showEmailChange = true,
-  showPasswordChange = true
+  showPasswordChange = true,
+  upfilesConfig
 }) => {
   const { user, updateProfile, requestEmailChange } = useAuth2();
   const colors = useThemeColors();
   const [name, setName] = React2.useState(user?.name || "");
-  const [avatar, setAvatar] = React2.useState(user?.avatar || "");
   const [phoneNumber, setPhoneNumber] = React2.useState(user?.phoneNumber || "");
   const [newEmail, setNewEmail] = React2.useState("");
   const [isLoading, setIsLoading] = React2.useState(false);
@@ -4137,9 +4243,6 @@ var UserProfile = ({
       if (name !== user?.name) {
         updates.name = name;
       }
-      if (showAvatar && avatar !== user?.avatar) {
-        updates.avatar = avatar;
-      }
       if (phoneNumber !== user?.phoneNumber) {
         updates.phoneNumber = phoneNumber;
       }
@@ -4160,6 +4263,12 @@ var UserProfile = ({
       setIsLoading(false);
     }
   };
+  const handleAvatarUploadComplete = (avatarUrl) => {
+    setSuccess("Avatar updated successfully!");
+  };
+  const handleAvatarUploadError = (error2) => {
+    setError(error2.message || "Failed to upload avatar");
+  };
   const handleRequestEmailChange = async (e) => {
     e.preventDefault();
     setIsLoading(true);
@@ -4262,34 +4371,36 @@ var UserProfile = ({
             }
           )
         ] }),
-        showAvatar && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "avatar", style: {
+        showAvatar && upfilesConfig && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { style: {
             display: "block",
             marginBottom: "8px",
             fontWeight: 500,
             color: colors.textSecondary,
             fontSize: "14px"
-          }, children: "Avatar URL" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
+          }, children: "Avatar" }),
+          user?.avatar && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "12px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
             {
-              id: "avatar",
-              type: "url",
-              value: avatar,
-              onChange: (e) => setAvatar(e.target.value),
-              disabled: isLoading,
+              src: user.avatar,
+              alt: "Current avatar",
               style: {
-                width: "100%",
-                padding: "12px 16px",
-                border: `1px solid ${colors.borderSecondary}`,
-                borderRadius: "8px",
-                fontSize: "16px",
-                boxSizing: "border-box",
-                backgroundColor: colors.bgSecondary,
-                color: colors.textPrimary,
-                transition: "all 0.2s ease"
-              },
-              placeholder: "https://example.com/avatar.jpg"
+                width: "80px",
+                height: "80px",
+                borderRadius: "50%",
+                objectFit: "cover",
+                border: `2px solid ${colors.borderSecondary}`
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            AvatarUploader,
+            {
+              upfilesConfig,
+              onUploadComplete: handleAvatarUploadComplete,
+              onError: handleAvatarUploadError,
+              maxFileSize: 5 * 1024 * 1024,
+              accept: ["image/*"]
             }
           )
         ] }),
@@ -4401,63 +4512,6 @@ var UserProfile = ({
     ] })
   ] });
 };
-var AvatarUploader = ({
-  onUploadComplete,
-  onError,
-  className,
-  buttonClassName,
-  dropzoneClassName,
-  maxFileSize = 5 * 1024 * 1024,
-  // 5MB default
-  accept = ["image/*"],
-  upfilesConfig
-}) => {
-  const { uploadAndUpdateAvatar } = useAuth2();
-  const [uploading, setUploading] = React2.useState(false);
-  const handleUploadComplete = async (files) => {
-    if (files.length === 0)
-      return;
-    setUploading(true);
-    try {
-      const file = files[0];
-      const response = await uploadAndUpdateAvatar(file.file);
-      if (response.success && response.user?.avatar) {
-        onUploadComplete?.(response.user.avatar);
-      } else {
-        throw new Error(response.message || "Failed to update avatar");
-      }
-    } catch (error) {
-      const err = error instanceof Error ? error : new Error("Upload failed");
-      onError?.(err);
-    } finally {
-      setUploading(false);
-    }
-  };
-  const handleError = (error) => {
-    onError?.(error);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
-    upfiles.Uploader,
-    {
-      clientOptions: {
-        baseUrl: upfilesConfig.baseUrl,
-        apiKey: upfilesConfig.apiKey,
-        apiKeyHeader: upfilesConfig.apiKeyHeader || "authorization",
-        presignUrl: upfilesConfig.presignUrl,
-        presignPath: upfilesConfig.presignPath
-      },
-      multiple: false,
-      accept,
-      maxFileSize,
-      maxFiles: 1,
-      onComplete: handleUploadComplete,
-      onError: handleError,
-      buttonClassName,
-      dropzoneClassName,
-      children: uploading ? "Uploading..." : "Upload Avatar"
-    }
-  ) });
-};
 var AvatarManager = ({
   open,
   onOpenChange,