dauth-context-react 6.3.0 → 6.4.0

package/dist/index.d.mts

@@ -79,13 +79,14 @@ interface IDauthState {
     getPasskeyCredentials: () => Promise<IPasskeyCredential[]>;
     registerPasskey: (name?: string) => Promise<IPasskeyCredential | null>;
     deletePasskeyCredential: (credentialId: string) => Promise<boolean>;
+    uploadAvatar: (file: File) => Promise<boolean>;
 }
 interface DauthProfileModalProps {
     open: boolean;
     onClose: () => void;
-    /** Optional: provide a function to handle avatar upload.
+    /** Optional override for avatar upload.
      *  Receives a File, should return the URL string.
-     *  If not provided, the avatar edit button is hidden. */
+     *  If not provided, uses the built-in upload via the auth proxy. */
     onAvatarUpload?: (file: File) => Promise<string>;
 }
 interface IDauthProviderProps {

package/dist/index.d.ts

@@ -79,13 +79,14 @@ interface IDauthState {
     getPasskeyCredentials: () => Promise<IPasskeyCredential[]>;
     registerPasskey: (name?: string) => Promise<IPasskeyCredential | null>;
     deletePasskeyCredential: (credentialId: string) => Promise<boolean>;
+    uploadAvatar: (file: File) => Promise<boolean>;
 }
 interface DauthProfileModalProps {
     open: boolean;
     onClose: () => void;
-    /** Optional: provide a function to handle avatar upload.
+    /** Optional override for avatar upload.
      *  Receives a File, should return the URL string.
-     *  If not provided, the avatar edit button is hidden. */
+     *  If not provided, uses the built-in upload via the auth proxy. */
     onAvatarUpload?: (file: File) => Promise<string>;
 }
 interface IDauthProviderProps {

package/dist/index.js

@@ -43,7 +43,8 @@ var initialDauthState = {
   deleteAccount: () => Promise.resolve(false),
   getPasskeyCredentials: () => Promise.resolve([]),
   registerPasskey: () => Promise.resolve(null),
-  deletePasskeyCredential: () => Promise.resolve(false)
+  deletePasskeyCredential: () => Promise.resolve(false),
+  uploadAvatar: () => Promise.resolve(false)
 };
 var initialDauthState_default = initialDauthState;
 
@@ -205,6 +206,18 @@ async function deletePasskeyCredentialAPI(basePath, credentialId) {
   const data = await response.json();
   return { response, data };
 }
+async function uploadAvatarAPI(basePath, file) {
+  const formData = new FormData();
+  formData.append("avatar", file);
+  const response = await fetch(`${basePath}/avatar`, {
+    method: "POST",
+    headers: { "X-CSRF-Token": getCsrfToken() },
+    credentials: "include",
+    body: formData
+  });
+  const data = await response.json();
+  return { response, data };
+}
 
 // src/webauthn.ts
 function base64urlToBuffer(base64url) {
@@ -460,6 +473,30 @@ async function deletePasskeyCredentialAction(ctx, credentialId) {
     return false;
   }
 }
+async function uploadAvatarAction(ctx, file) {
+  const { dispatch, authProxyPath, onError } = ctx;
+  try {
+    const result = await uploadAvatarAPI(authProxyPath, file);
+    if (result.response.status === 200) {
+      dispatch({
+        type: UPDATE_USER,
+        payload: result.data.user
+      });
+      return true;
+    }
+    onError(
+      new Error(
+        "Avatar upload error: " + result.data.message
+      )
+    );
+    return false;
+  } catch (error) {
+    onError(
+      error instanceof Error ? error : new Error("Avatar upload error")
+    );
+    return false;
+  }
+}
 var resetUser = (dispatch) => {
   return dispatch({
     type: LOGIN,
@@ -763,7 +800,8 @@ function DauthProfileModal({
     logout,
     getPasskeyCredentials,
     registerPasskey,
-    deletePasskeyCredential
+    deletePasskeyCredential,
+    uploadAvatar
   } = useDauth();
   const isDesktop = useMediaQuery("(min-width: 641px)");
   const phase = useModalAnimation(open);
@@ -971,19 +1009,21 @@ function DauthProfileModal({
     [deletePasskeyCredential]
   );
   const handleAvatarClick = (0, import_react.useCallback)(() => {
-    if (onAvatarUpload) {
-      avatarInputRef.current?.click();
-    }
-  }, [onAvatarUpload]);
+    avatarInputRef.current?.click();
+  }, []);
   const handleAvatarChange = (0, import_react.useCallback)(
     async (e) => {
       const file = e.target.files?.[0];
-      if (!file || !onAvatarUpload) return;
+      if (!file) return;
       setUploadingAvatar(true);
       try {
-        const url = await onAvatarUpload(file);
-        if (url) {
-          await updateUser({ avatar: url });
+        if (onAvatarUpload) {
+          const url = await onAvatarUpload(file);
+          if (url) {
+            await updateUser({ avatar: url });
+          }
+        } else {
+          await uploadAvatar(file);
         }
       } catch {
       }
@@ -992,7 +1032,7 @@ function DauthProfileModal({
         avatarInputRef.current.value = "";
       }
     },
-    [onAvatarUpload, updateUser]
+    [onAvatarUpload, updateUser, uploadAvatar]
   );
   const handleSignOut = (0, import_react.useCallback)(() => {
     logout();
@@ -1134,7 +1174,7 @@ function DauthProfileModal({
                         {
                           style: {
                             ...avatarCircle,
-                            cursor: onAvatarUpload ? "pointer" : "default",
+                            cursor: "pointer",
                             position: "relative"
                           },
                           onClick: handleAvatarClick,
@@ -1151,12 +1191,12 @@ function DauthProfileModal({
                                 }
                               }
                             ) : avatarInitial,
-                            onAvatarUpload && !uploadingAvatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: avatarOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconCamera, {}) })
+                            !uploadingAvatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: avatarOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconCamera, {}) })
                           ]
                         }
                       ),
                       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: emailText, children: user.email }),
-                      onAvatarUpload && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                         "input",
                         {
                           ref: avatarInputRef,
@@ -2226,6 +2266,10 @@ var DauthProvider = (props) => {
     (credentialId) => deletePasskeyCredentialAction(ctx, credentialId),
     [ctx]
   );
+  const uploadAvatar = (0, import_react2.useCallback)(
+    (file) => uploadAvatarAction(ctx, file),
+    [ctx]
+  );
   const memoProvider = (0, import_react2.useMemo)(
     () => ({
       ...dauthState,
@@ -2235,7 +2279,8 @@ var DauthProvider = (props) => {
       deleteAccount,
       getPasskeyCredentials,
       registerPasskey,
-      deletePasskeyCredential
+      deletePasskeyCredential,
+      uploadAvatar
     }),
     [
       dauthState,
@@ -2245,7 +2290,8 @@ var DauthProvider = (props) => {
       deleteAccount,
       getPasskeyCredentials,
       registerPasskey,
-      deletePasskeyCredential
+      deletePasskeyCredential,
+      uploadAvatar
     ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DauthContext.Provider, { value: memoProvider, children });