dauth-context-react 6.2.0 → 6.4.0

package/dist/index.mjs

@@ -24,7 +24,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;
 
@@ -186,6 +187,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) {
@@ -441,6 +454,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,
@@ -750,7 +787,8 @@ function DauthProfileModal({
     logout,
     getPasskeyCredentials,
     registerPasskey,
-    deletePasskeyCredential
+    deletePasskeyCredential,
+    uploadAvatar
   } = useDauth();
   const isDesktop = useMediaQuery("(min-width: 641px)");
   const phase = useModalAnimation(open);
@@ -762,6 +800,10 @@ function DauthProfileModal({
   const [lastname, setLastname] = useState("");
   const [nickname, setNickname] = useState("");
   const [country, setCountry] = useState("");
+  const [telPrefix, setTelPrefix] = useState("");
+  const [telSuffix, setTelSuffix] = useState("");
+  const [birthDate, setBirthDate] = useState("");
+  const [customFieldValues, setCustomFieldValues] = useState({});
   const [populated, setPopulated] = useState(false);
   const [saving, setSaving] = useState(false);
   const [status, setStatus] = useState(null);
@@ -781,6 +823,16 @@ function DauthProfileModal({
       setLastname(user.lastname || "");
       setNickname(user.nickname || "");
       setCountry(user.country || "");
+      setTelPrefix(user.telPrefix || "");
+      setTelSuffix(user.telSuffix || "");
+      setBirthDate(
+        user.birthDate ? new Date(user.birthDate).toISOString().split("T")[0] : ""
+      );
+      const cf = {};
+      for (const f of domain.customFields ?? []) {
+        cf[f.key] = user.customFields?.[f.key] ?? "";
+      }
+      setCustomFieldValues(cf);
       setPopulated(true);
     }
     if (!open) {
@@ -830,8 +882,23 @@ function DauthProfileModal({
   );
   const hasChanges = useMemo(() => {
     if (!user?._id) return false;
-    return name !== (user.name || "") || lastname !== (user.lastname || "") || nickname !== (user.nickname || "") || country !== (user.country || "");
-  }, [name, lastname, nickname, country, user]);
+    const origBirthDate = user.birthDate ? new Date(user.birthDate).toISOString().split("T")[0] : "";
+    const cfChanged = (domain.customFields ?? []).some(
+      (f) => (customFieldValues[f.key] ?? "") !== (user.customFields?.[f.key] ?? "")
+    );
+    return name !== (user.name || "") || lastname !== (user.lastname || "") || nickname !== (user.nickname || "") || country !== (user.country || "") || telPrefix !== (user.telPrefix || "") || telSuffix !== (user.telSuffix || "") || birthDate !== origBirthDate || cfChanged;
+  }, [
+    name,
+    lastname,
+    nickname,
+    country,
+    telPrefix,
+    telSuffix,
+    birthDate,
+    customFieldValues,
+    user,
+    domain.customFields
+  ]);
   const canSave = name.trim().length > 0 && hasChanges && !saving;
   const handleSave = useCallback(async () => {
     setSaving(true);
@@ -840,6 +907,14 @@ function DauthProfileModal({
     if (hasField("lastname")) fields.lastname = lastname;
     if (hasField("nickname")) fields.nickname = nickname;
     if (hasField("country")) fields.country = country;
+    if (hasField("tel_prefix"))
+      fields.telPrefix = telPrefix;
+    if (hasField("tel_suffix"))
+      fields.telSuffix = telSuffix;
+    if (hasField("birth_date") && birthDate)
+      fields.birthDate = birthDate;
+    if ((domain.customFields ?? []).length > 0)
+      fields.customFields = customFieldValues;
     const ok = await updateUser(fields);
     setSaving(false);
     if (ok) {
@@ -853,7 +928,19 @@ function DauthProfileModal({
         message: "Something went wrong. Please try again."
       });
     }
-  }, [name, lastname, nickname, country, hasField, updateUser]);
+  }, [
+    name,
+    lastname,
+    nickname,
+    country,
+    telPrefix,
+    telSuffix,
+    birthDate,
+    customFieldValues,
+    hasField,
+    updateUser,
+    domain.customFields
+  ]);
   const handleDelete = useCallback(async () => {
     setDeleting(true);
     const ok = await deleteAccount();
@@ -909,19 +996,21 @@ function DauthProfileModal({
     [deletePasskeyCredential]
   );
   const handleAvatarClick = useCallback(() => {
-    if (onAvatarUpload) {
-      avatarInputRef.current?.click();
-    }
-  }, [onAvatarUpload]);
+    avatarInputRef.current?.click();
+  }, []);
   const handleAvatarChange = 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 {
       }
@@ -930,7 +1019,7 @@ function DauthProfileModal({
         avatarInputRef.current.value = "";
       }
     },
-    [onAvatarUpload, updateUser]
+    [onAvatarUpload, updateUser, uploadAvatar]
   );
   const handleSignOut = useCallback(() => {
     logout();
@@ -1072,7 +1161,7 @@ function DauthProfileModal({
                         {
                           style: {
                             ...avatarCircle,
-                            cursor: onAvatarUpload ? "pointer" : "default",
+                            cursor: "pointer",
                             position: "relative"
                           },
                           onClick: handleAvatarClick,
@@ -1089,12 +1178,12 @@ function DauthProfileModal({
                                 }
                               }
                             ) : avatarInitial,
-                            onAvatarUpload && !uploadingAvatar && /* @__PURE__ */ jsx("div", { style: avatarOverlay, children: /* @__PURE__ */ jsx(IconCamera, {}) })
+                            !uploadingAvatar && /* @__PURE__ */ jsx("div", { style: avatarOverlay, children: /* @__PURE__ */ jsx(IconCamera, {}) })
                           ]
                         }
                       ),
                       /* @__PURE__ */ jsx("div", { style: emailText, children: user.email }),
-                      onAvatarUpload && /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx(
                         "input",
                         {
                           ref: avatarInputRef,
@@ -1219,6 +1308,127 @@ function DauthProfileModal({
                             onBlur: inputBlurHandler
                           }
                         )
+                      ] }),
+                      (hasField("tel_prefix") || hasField("tel_suffix")) && /* @__PURE__ */ jsxs("div", { style: fieldGroup, children: [
+                        /* @__PURE__ */ jsxs("div", { style: label, children: [
+                          "Phone",
+                          isRequired("tel_prefix") || isRequired("tel_suffix") ? " *" : ""
+                        ] }),
+                        /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              gap: 8
+                            },
+                            children: [
+                              hasField("tel_prefix") && /* @__PURE__ */ jsx(
+                                "input",
+                                {
+                                  id: "dauth-tel-prefix",
+                                  type: "text",
+                                  value: telPrefix,
+                                  onChange: (e) => setTelPrefix(e.target.value),
+                                  placeholder: "+34",
+                                  disabled: saving,
+                                  style: {
+                                    ...input,
+                                    width: 80,
+                                    flexShrink: 0
+                                  },
+                                  onFocus: inputFocusHandler,
+                                  onBlur: inputBlurHandler,
+                                  "aria-label": "Phone prefix"
+                                }
+                              ),
+                              hasField("tel_suffix") && /* @__PURE__ */ jsx(
+                                "input",
+                                {
+                                  id: "dauth-tel-suffix",
+                                  type: "tel",
+                                  value: telSuffix,
+                                  onChange: (e) => setTelSuffix(e.target.value),
+                                  placeholder: "612 345 678",
+                                  disabled: saving,
+                                  style: {
+                                    ...input,
+                                    flex: 1
+                                  },
+                                  onFocus: inputFocusHandler,
+                                  onBlur: inputBlurHandler,
+                                  "aria-label": "Phone number"
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ] }),
+                      hasField("birth_date") && /* @__PURE__ */ jsxs("div", { style: fieldGroup, children: [
+                        /* @__PURE__ */ jsxs(
+                          "label",
+                          {
+                            htmlFor: "dauth-birthdate",
+                            style: label,
+                            children: [
+                              "Birth date",
+                              isRequired("birth_date") ? " *" : ""
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            id: "dauth-birthdate",
+                            type: "date",
+                            value: birthDate,
+                            onChange: (e) => setBirthDate(e.target.value),
+                            disabled: saving,
+                            style: input,
+                            onFocus: inputFocusHandler,
+                            onBlur: inputBlurHandler
+                          }
+                        )
+                      ] }),
+                      (domain.customFields ?? []).length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx("hr", { style: separator }),
+                        domain.customFields.map((cf) => /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            style: fieldGroup,
+                            children: [
+                              /* @__PURE__ */ jsxs(
+                                "label",
+                                {
+                                  htmlFor: `dauth-cf-${cf.key}`,
+                                  style: label,
+                                  children: [
+                                    cf.label,
+                                    cf.required ? " *" : ""
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                "input",
+                                {
+                                  id: `dauth-cf-${cf.key}`,
+                                  type: "text",
+                                  value: customFieldValues[cf.key] ?? "",
+                                  onChange: (e) => setCustomFieldValues(
+                                    (prev) => ({
+                                      ...prev,
+                                      [cf.key]: e.target.value
+                                    })
+                                  ),
+                                  disabled: saving,
+                                  style: input,
+                                  onFocus: inputFocusHandler,
+                                  onBlur: inputBlurHandler
+                                }
+                              )
+                            ]
+                          },
+                          cf.key
+                        ))
                       ] })
                     ] }),
                     /* @__PURE__ */ jsx("hr", { style: separator }),
@@ -2043,6 +2253,10 @@ var DauthProvider = (props) => {
     (credentialId) => deletePasskeyCredentialAction(ctx, credentialId),
     [ctx]
   );
+  const uploadAvatar = useCallback2(
+    (file) => uploadAvatarAction(ctx, file),
+    [ctx]
+  );
   const memoProvider = useMemo2(
     () => ({
       ...dauthState,
@@ -2052,7 +2266,8 @@ var DauthProvider = (props) => {
       deleteAccount,
       getPasskeyCredentials,
       registerPasskey,
-      deletePasskeyCredential
+      deletePasskeyCredential,
+      uploadAvatar
     }),
     [
       dauthState,
@@ -2062,7 +2277,8 @@ var DauthProvider = (props) => {
       deleteAccount,
       getPasskeyCredentials,
       registerPasskey,
-      deletePasskeyCredential
+      deletePasskeyCredential,
+      uploadAvatar
     ]
   );
   return /* @__PURE__ */ jsx2(DauthContext.Provider, { value: memoProvider, children });