@thetechfossil/auth2 1.2.6 → 1.2.8

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import { UpfilesClient } from '@thetechfossil/upfiles';
+export { ConnectProjectDialog, ImageManager, ProjectFilesWidget, UpfilesClient, Uploader } from '@thetechfossil/upfiles';
 import React, { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -64,6 +66,15 @@ interface AuthConfig {
     localStorageKey?: string;
     token?: string;
     csrfEnabled?: boolean;
+    upfilesConfig?: UpfilesConfig;
+}
+interface UpfilesConfig {
+    baseUrl: string;
+    apiKey?: string;
+    apiKeyHeader?: 'authorization' | 'x-api-key' | 'x-up-api-key';
+    presignUrl?: string;
+    presignPath?: string;
+    folderPath?: string;
 }
 interface Session {
     id: string;
@@ -109,6 +120,7 @@ interface UseAuthReturn {
     refreshCsrfToken: () => Promise<void>;
     changePassword: (oldPassword: string, newPassword: string) => Promise<AuthResponse>;
     updateAvatar: (avatar: string) => Promise<AuthResponse>;
+    uploadAndUpdateAvatar: (file: File) => Promise<AuthResponse>;
     requestEmailChange: (newEmail: string) => Promise<AuthResponse>;
     verifyEmailChange: (token: string) => Promise<AuthResponse>;
     generate2FA: () => Promise<MFASetup>;
@@ -127,6 +139,7 @@ declare class AuthService {
     private httpClient;
     private config;
     private token;
+    private upfilesClient;
     constructor(config: AuthConfig);
     private loadTokenFromStorage;
     private saveTokenToStorage;
@@ -152,6 +165,8 @@ declare class AuthService {
     resetPassword(token: string, password: string): Promise<AuthResponse>;
     changePassword(oldPassword: string, newPassword: string): Promise<AuthResponse>;
     updateAvatar(avatar: string): Promise<AuthResponse>;
+    uploadAndUpdateAvatar(file: File): Promise<AuthResponse>;
+    getUpfilesClient(): UpfilesClient | null;
     requestEmailChange(newEmail: string): Promise<AuthResponse>;
     verifyEmailChange(token: string): Promise<AuthResponse>;
     generate2FA(): Promise<{
@@ -219,6 +234,7 @@ interface AuthContextValue {
     resetPassword: (token: string, password: string) => Promise<AuthResponse>;
     changePassword: (oldPassword: string, newPassword: string) => Promise<AuthResponse>;
     updateAvatar: (avatar: string) => Promise<AuthResponse>;
+    uploadAndUpdateAvatar: (file: File) => Promise<AuthResponse>;
     requestEmailChange: (newEmail: string) => Promise<AuthResponse>;
     verifyEmailChange: (token: string) => Promise<AuthResponse>;
     generate2FA: () => Promise<any>;
@@ -398,6 +414,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>;
 
@@ -412,6 +437,50 @@ interface PhoneInputProps {
 }
 declare const PhoneInput: React.FC<PhoneInputProps>;
 
+interface AvatarUploaderProps {
+    onUploadComplete?: (avatarUrl: string) => void;
+    onError?: (error: Error) => void;
+    className?: string;
+    buttonClassName?: string;
+    dropzoneClassName?: string;
+    maxFileSize?: number;
+    accept?: string[];
+    upfilesConfig: {
+        baseUrl: string;
+        apiKey?: string;
+        apiKeyHeader?: 'authorization' | 'x-api-key' | 'x-up-api-key';
+        presignUrl?: string;
+        presignPath?: string;
+        folderPath?: string;
+        projectId?: string;
+    };
+    buttonText?: string;
+}
+declare const AvatarUploader: React.FC<AvatarUploaderProps>;
+
+interface AvatarManagerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onAvatarUpdated?: (avatarUrl: string) => void;
+    onError?: (error: Error) => void;
+    title?: string;
+    description?: string;
+    className?: string;
+    gridClassName?: string;
+    maxFileSize?: number;
+    mode?: 'full' | 'browse' | 'upload';
+    showDelete?: boolean;
+    upfilesConfig: {
+        baseUrl: string;
+        apiKey?: string;
+        apiKeyHeader?: 'authorization' | 'x-api-key' | 'x-up-api-key';
+        presignUrl?: string;
+        presignPath?: string;
+        folderPath?: string;
+    };
+}
+declare const AvatarManager: React.FC<AvatarManagerProps>;
+
 interface UseAuthReturnBase {
     user: User | null;
     isAuthenticated: boolean;
@@ -425,6 +494,7 @@ interface UseAuthReturnBase {
     getProfile: () => Promise<User>;
     getAllUsers: () => Promise<User[]>;
     getUserById: (id: string) => Promise<User>;
+    uploadAndUpdateAvatar: (file: File) => Promise<AuthResponse>;
 }
 declare const useAuth: (config: AuthConfig) => UseAuthReturnBase;
 
@@ -441,6 +511,10 @@ declare function useAuthTheme(): ThemeContextType;
 declare const index$1_AuthFlow: typeof AuthFlow;
 declare const index$1_AuthProvider: typeof AuthProvider;
 declare const index$1_AuthThemeProvider: typeof AuthThemeProvider;
+declare const index$1_AvatarManager: typeof AvatarManager;
+type index$1_AvatarManagerProps = AvatarManagerProps;
+declare const index$1_AvatarUploader: typeof AvatarUploader;
+type index$1_AvatarUploaderProps = AvatarUploaderProps;
 declare const index$1_ChangePassword: typeof ChangePassword;
 declare const index$1_EmailVerificationPage: typeof EmailVerificationPage;
 declare const index$1_ForgotPassword: typeof ForgotPassword;
@@ -464,6 +538,10 @@ declare namespace index$1 {
     index$1_AuthFlow as AuthFlow,
     index$1_AuthProvider as AuthProvider,
     index$1_AuthThemeProvider as AuthThemeProvider,
+    index$1_AvatarManager as AvatarManager,
+    index$1_AvatarManagerProps as AvatarManagerProps,
+    index$1_AvatarUploader as AvatarUploader,
+    index$1_AvatarUploaderProps as AvatarUploaderProps,
     index$1_ChangePassword as ChangePassword,
     index$1_EmailVerificationPage as EmailVerificationPage,
     index$1_ForgotPassword as ForgotPassword,
@@ -507,4 +585,4 @@ declare namespace index {
   };
 }
 
-export { AuditLog, AuthConfig, AuthFlow, AuthProvider, AuthResponse, AuthService, ChangePassword, CsrfTokenResponse, EmailVerificationPage, ForgotPassword, HttpClient, LinkedAccount, LoginData, LoginForm, MFASetup, OAuthConfig, OAuthProvider, OtpForm, ProtectedRoute, PublicRoute, RegisterData, RegisterForm, ResetPassword, Session, SignIn, SignOut, SignUp, UpdateUserData, UseAuthReturn, User, UserButton, UserProfile, VerifyData, VerifyEmail, index as node, index$1 as react, useAuth$1 as useAuth };
+export { AuditLog, AuthConfig, AuthFlow, AuthProvider, AuthResponse, AuthService, AvatarManager, AvatarUploader, ChangePassword, CsrfTokenResponse, EmailVerificationPage, ForgotPassword, HttpClient, LinkedAccount, LoginData, LoginForm, MFASetup, OAuthConfig, OAuthProvider, OtpForm, ProtectedRoute, PublicRoute, RegisterData, RegisterForm, ResetPassword, Session, SignIn, SignOut, SignUp, UpdateUserData, UpfilesConfig, UseAuthReturn, User, UserButton, UserProfile, VerifyData, VerifyEmail, index as node, index$1 as react, useAuth$1 as useAuth };

package/dist/index.js

@@ -1,7 +1,7 @@
-"use client";
 'use strict';
 
 var axios = require('axios');
+var upfiles = require('@thetechfossil/upfiles');
 var React3 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var PhoneInputWithCountry = require('react-phone-number-input');
@@ -124,11 +124,10 @@ var HttpClient = class {
     }
   }
 };
-
-// src/core/auth-service.ts
 var AuthService = class {
   constructor(config) {
     this.token = null;
+    this.upfilesClient = null;
     this.config = {
       localStorageKey: "auth_token",
       csrfEnabled: true,
@@ -136,6 +135,15 @@ var AuthService = class {
     };
     this.httpClient = new HttpClient(this.config.baseUrl);
     this.loadTokenFromStorage();
+    if (this.config.upfilesConfig) {
+      this.upfilesClient = new upfiles.UpfilesClient({
+        baseUrl: this.config.upfilesConfig.baseUrl,
+        apiKey: this.config.upfilesConfig.apiKey,
+        apiKeyHeader: this.config.upfilesConfig.apiKeyHeader,
+        presignUrl: this.config.upfilesConfig.presignUrl,
+        presignPath: this.config.upfilesConfig.presignPath
+      });
+    }
     if (typeof window !== "undefined") {
       const frontendBaseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_APP_URL || window.location.origin;
       if (frontendBaseUrl) {
@@ -363,6 +371,28 @@ var AuthService = class {
     }
     return response;
   }
+  async uploadAndUpdateAvatar(file) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    if (!this.upfilesClient) {
+      throw new Error("Upfiles configuration is required. Please provide upfilesConfig in AuthConfig.");
+    }
+    try {
+      const folderPath = this.config.upfilesConfig?.folderPath || "avatars/";
+      const uploadResult = await this.upfilesClient.upload(file, {
+        folderPath,
+        fetchThumbnails: true
+      });
+      const response = await this.updateAvatar(uploadResult.publicUrl);
+      return response;
+    } catch (error) {
+      throw new Error(`Failed to upload avatar: ${error.message || "Unknown error"}`);
+    }
+  }
+  getUpfilesClient() {
+    return this.upfilesClient;
+  }
   async requestEmailChange(newEmail) {
     if (!this.token) {
       throw new Error("Not authenticated");
@@ -534,7 +564,8 @@ var AuthProvider = ({ children, config }) => {
   const authConfig = {
     baseUrl: config?.baseUrl || (typeof window !== "undefined" ? process.env.NEXT_PUBLIC_AUTH_API_URL || process.env.REACT_APP_AUTH_API_URL || "http://localhost:7000" : "http://localhost:7000"),
     localStorageKey: config?.localStorageKey || "auth_token",
-    csrfEnabled: config?.csrfEnabled !== void 0 ? config.csrfEnabled : true
+    csrfEnabled: config?.csrfEnabled !== void 0 ? config.csrfEnabled : true,
+    upfilesConfig: config?.upfilesConfig
   };
   const [authService] = React3.useState(() => new AuthService(authConfig));
   const [user, setUser] = React3.useState(null);
@@ -684,6 +715,18 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
+  const uploadAndUpdateAvatar = React3.useCallback(async (file) => {
+    setLoading(true);
+    try {
+      const response = await authService.uploadAndUpdateAvatar(file);
+      if (response.success && response.user) {
+        setUser(response.user);
+      }
+      return response;
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
   const requestEmailChange = React3.useCallback(async (newEmail) => {
     setLoading(true);
     try {
@@ -781,6 +824,7 @@ var AuthProvider = ({ children, config }) => {
     resetPassword,
     changePassword,
     updateAvatar,
+    uploadAndUpdateAvatar,
     requestEmailChange,
     verifyEmailChange,
     generate2FA,
@@ -916,6 +960,18 @@ var useAuth2 = (config) => {
       setLoading(false);
     }
   }, [authService]);
+  const uploadAndUpdateAvatar = React3.useCallback(async (file) => {
+    setLoading(true);
+    try {
+      const response = await authService.uploadAndUpdateAvatar(file);
+      if (response.success && response.user) {
+        setUser(response.user);
+      }
+      return response;
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
   return {
     user,
     isAuthenticated,
@@ -928,7 +984,8 @@ var useAuth2 = (config) => {
     updateProfile,
     getProfile,
     getAllUsers,
-    getUserById
+    getUserById,
+    uploadAndUpdateAvatar
   };
 };
 
@@ -4383,15 +4440,85 @@ var ChangePassword = ({ onSuccess, appearance }) => {
     )
   ] }) });
 };
+var AvatarUploader = ({
+  onUploadComplete,
+  onError,
+  className,
+  buttonClassName,
+  maxFileSize = 5 * 1024 * 1024,
+  // 5MB default
+  upfilesConfig,
+  buttonText = "Upload Avatar"
+}) => {
+  const { uploadAndUpdateAvatar } = useAuth();
+  const [open, setOpen] = React3.useState(false);
+  const [uploading, setUploading] = React3.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 } = useAuth();
   const colors = useThemeColors();
   const [name, setName] = React3.useState(user?.name || "");
-  const [avatar, setAvatar] = React3.useState(user?.avatar || "");
   const [phoneNumber, setPhoneNumber] = React3.useState(user?.phoneNumber || "");
   const [newEmail, setNewEmail] = React3.useState("");
   const [isLoading, setIsLoading] = React3.useState(false);
@@ -4407,9 +4534,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;
       }
@@ -4430,6 +4554,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);
@@ -4532,34 +4662,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/*"]
             }
           )
         ] }),
@@ -4671,6 +4803,65 @@ var UserProfile = ({
     ] })
   ] });
 };
+var AvatarManager = ({
+  open,
+  onOpenChange,
+  onAvatarUpdated,
+  onError,
+  title = "Select Avatar",
+  description = "Choose an existing image or upload a new one",
+  className,
+  gridClassName,
+  maxFileSize = 5 * 1024 * 1024,
+  // 5MB default
+  mode = "full",
+  showDelete = false,
+  upfilesConfig
+}) => {
+  const { updateProfile } = useAuth();
+  const [updating, setUpdating] = React3.useState(false);
+  const handleSelect = async (image) => {
+    setUpdating(true);
+    try {
+      const response = await updateProfile({ avatar: image.url });
+      if (response.success && response.user?.avatar) {
+        onAvatarUpdated?.(response.user.avatar);
+        onOpenChange(false);
+      } else {
+        throw new Error(response.message || "Failed to update avatar");
+      }
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error("Failed to update avatar");
+      onError?.(err);
+    } finally {
+      setUpdating(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    upfiles.ImageManager,
+    {
+      open,
+      onOpenChange,
+      clientOptions: {
+        baseUrl: upfilesConfig.baseUrl,
+        apiKey: upfilesConfig.apiKey,
+        apiKeyHeader: upfilesConfig.apiKeyHeader || "authorization",
+        presignUrl: upfilesConfig.presignUrl,
+        presignPath: upfilesConfig.presignPath
+      },
+      folderPath: upfilesConfig.folderPath || "avatars/",
+      title,
+      description,
+      className,
+      gridClassName,
+      onSelect: handleSelect,
+      maxFileSize,
+      mode,
+      showDelete,
+      fetchThumbnails: true
+    }
+  );
+};
 
 // src/react/index.ts
 var react_exports = {};
@@ -4678,6 +4869,8 @@ __export(react_exports, {
   AuthFlow: () => AuthFlow,
   AuthProvider: () => AuthProvider,
   AuthThemeProvider: () => AuthThemeProvider,
+  AvatarManager: () => AvatarManager,
+  AvatarUploader: () => AvatarUploader,
   ChangePassword: () => ChangePassword,
   EmailVerificationPage: () => EmailVerificationPage,
   ForgotPassword: () => ForgotPassword,
@@ -4783,9 +4976,31 @@ var AuthClient = class extends AuthService {
   }
 };
 
+Object.defineProperty(exports, 'ConnectProjectDialog', {
+  enumerable: true,
+  get: function () { return upfiles.ConnectProjectDialog; }
+});
+Object.defineProperty(exports, 'ImageManager', {
+  enumerable: true,
+  get: function () { return upfiles.ImageManager; }
+});
+Object.defineProperty(exports, 'ProjectFilesWidget', {
+  enumerable: true,
+  get: function () { return upfiles.ProjectFilesWidget; }
+});
+Object.defineProperty(exports, 'UpfilesClient', {
+  enumerable: true,
+  get: function () { return upfiles.UpfilesClient; }
+});
+Object.defineProperty(exports, 'Uploader', {
+  enumerable: true,
+  get: function () { return upfiles.Uploader; }
+});
 exports.AuthFlow = AuthFlow;
 exports.AuthProvider = AuthProvider;
 exports.AuthService = AuthService;
+exports.AvatarManager = AvatarManager;
+exports.AvatarUploader = AvatarUploader;
 exports.ChangePassword = ChangePassword;
 exports.EmailVerificationPage = EmailVerificationPage;
 exports.ForgotPassword = ForgotPassword;