dauth-context-react 6.2.0 → 6.4.0

package/dist/index.d.mts

@@ -18,6 +18,7 @@ interface IDauthUser {
     birthDate?: Date;
     country?: string;
     metadata?: Record<string, unknown>;
+    customFields?: Record<string, string>;
     createdAt: Date;
     updatedAt: Date;
     lastLogin: Date;
@@ -34,6 +35,11 @@ interface IFormField {
     field: string;
     required: boolean;
 }
+interface ICustomField {
+    key: string;
+    label: string;
+    required: boolean;
+}
 interface IModalTheme {
     accent?: string;
     accentHover?: string;
@@ -50,6 +56,7 @@ interface IDauthDomainState {
     allowedOrigins: string[];
     authMethods?: IDauthAuthMethods;
     formFields?: IFormField[];
+    customFields?: ICustomField[];
     modalTheme?: IModalTheme;
 }
 interface IPasskeyCredential {
@@ -72,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 {
@@ -97,4 +105,4 @@ declare function DauthProfileModal({ open, onClose, onAvatarUpload, }: DauthProf
 declare const DauthProvider: React$1.FC<IDauthProviderProps>;
 declare const useDauth: () => IDauthState;
 
-export { DauthProfileModal, type DauthProfileModalProps, DauthProvider, type IDauthAuthMethods, type IDauthProviderProps, type IFormField, type IModalTheme, type IPasskeyCredential, useDauth };
+export { DauthProfileModal, type DauthProfileModalProps, DauthProvider, type ICustomField, type IDauthAuthMethods, type IDauthProviderProps, type IFormField, type IModalTheme, type IPasskeyCredential, useDauth };

package/dist/index.d.ts

@@ -18,6 +18,7 @@ interface IDauthUser {
     birthDate?: Date;
     country?: string;
     metadata?: Record<string, unknown>;
+    customFields?: Record<string, string>;
     createdAt: Date;
     updatedAt: Date;
     lastLogin: Date;
@@ -34,6 +35,11 @@ interface IFormField {
     field: string;
     required: boolean;
 }
+interface ICustomField {
+    key: string;
+    label: string;
+    required: boolean;
+}
 interface IModalTheme {
     accent?: string;
     accentHover?: string;
@@ -50,6 +56,7 @@ interface IDauthDomainState {
     allowedOrigins: string[];
     authMethods?: IDauthAuthMethods;
     formFields?: IFormField[];
+    customFields?: ICustomField[];
     modalTheme?: IModalTheme;
 }
 interface IPasskeyCredential {
@@ -72,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 {
@@ -97,4 +105,4 @@ declare function DauthProfileModal({ open, onClose, onAvatarUpload, }: DauthProf
 declare const DauthProvider: React$1.FC<IDauthProviderProps>;
 declare const useDauth: () => IDauthState;
 
-export { DauthProfileModal, type DauthProfileModalProps, DauthProvider, type IDauthAuthMethods, type IDauthProviderProps, type IFormField, type IModalTheme, type IPasskeyCredential, useDauth };
+export { DauthProfileModal, type DauthProfileModalProps, DauthProvider, type ICustomField, type IDauthAuthMethods, type IDauthProviderProps, type IFormField, type IModalTheme, type IPasskeyCredential, useDauth };

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);
@@ -775,6 +813,10 @@ function DauthProfileModal({
   const [lastname, setLastname] = (0, import_react.useState)("");
   const [nickname, setNickname] = (0, import_react.useState)("");
   const [country, setCountry] = (0, import_react.useState)("");
+  const [telPrefix, setTelPrefix] = (0, import_react.useState)("");
+  const [telSuffix, setTelSuffix] = (0, import_react.useState)("");
+  const [birthDate, setBirthDate] = (0, import_react.useState)("");
+  const [customFieldValues, setCustomFieldValues] = (0, import_react.useState)({});
   const [populated, setPopulated] = (0, import_react.useState)(false);
   const [saving, setSaving] = (0, import_react.useState)(false);
   const [status, setStatus] = (0, import_react.useState)(null);
@@ -794,6 +836,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) {
@@ -843,8 +895,23 @@ function DauthProfileModal({
   );
   const hasChanges = (0, import_react.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 = (0, import_react.useCallback)(async () => {
     setSaving(true);
@@ -853,6 +920,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) {
@@ -866,7 +941,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 = (0, import_react.useCallback)(async () => {
     setDeleting(true);
     const ok = await deleteAccount();
@@ -922,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 {
       }
@@ -943,7 +1032,7 @@ function DauthProfileModal({
         avatarInputRef.current.value = "";
       }
     },
-    [onAvatarUpload, updateUser]
+    [onAvatarUpload, updateUser, uploadAvatar]
   );
   const handleSignOut = (0, import_react.useCallback)(() => {
     logout();
@@ -1085,7 +1174,7 @@ function DauthProfileModal({
                         {
                           style: {
                             ...avatarCircle,
-                            cursor: onAvatarUpload ? "pointer" : "default",
+                            cursor: "pointer",
                             position: "relative"
                           },
                           onClick: handleAvatarClick,
@@ -1102,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,
@@ -1232,6 +1321,127 @@ function DauthProfileModal({
                             onBlur: inputBlurHandler
                           }
                         )
+                      ] }),
+                      (hasField("tel_prefix") || hasField("tel_suffix")) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: label, children: [
+                          "Phone",
+                          isRequired("tel_prefix") || isRequired("tel_suffix") ? " *" : ""
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              gap: 8
+                            },
+                            children: [
+                              hasField("tel_prefix") && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          "label",
+                          {
+                            htmlFor: "dauth-birthdate",
+                            style: label,
+                            children: [
+                              "Birth date",
+                              isRequired("birth_date") ? " *" : ""
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { style: separator }),
+                        domain.customFields.map((cf) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          "div",
+                          {
+                            style: fieldGroup,
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                "label",
+                                {
+                                  htmlFor: `dauth-cf-${cf.key}`,
+                                  style: label,
+                                  children: [
+                                    cf.label,
+                                    cf.required ? " *" : ""
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("hr", { style: separator }),
@@ -2056,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,
@@ -2065,7 +2279,8 @@ var DauthProvider = (props) => {
       deleteAccount,
       getPasskeyCredentials,
       registerPasskey,
-      deletePasskeyCredential
+      deletePasskeyCredential,
+      uploadAvatar
     }),
     [
       dauthState,
@@ -2075,7 +2290,8 @@ var DauthProvider = (props) => {
       deleteAccount,
       getPasskeyCredentials,
       registerPasskey,
-      deletePasskeyCredential
+      deletePasskeyCredential,
+      uploadAvatar
     ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DauthContext.Provider, { value: memoProvider, children });