dauth-context-react 6.2.0 → 6.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/index.d.mts +8 -1
  2. package/dist/index.d.ts +8 -1
  3. package/dist/index.js +173 -3
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +173 -3
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
  8. package/src/DauthProfileModal.tsx +194 -4
  9. package/src/index.tsx +2 -0
  10. package/src/interfaces.ts +8 -0
package/dist/index.d.mts CHANGED
@@ -18,6 +18,7 @@ interface IDauthUser {
18
18
  birthDate?: Date;
19
19
  country?: string;
20
20
  metadata?: Record<string, unknown>;
21
+ customFields?: Record<string, string>;
21
22
  createdAt: Date;
22
23
  updatedAt: Date;
23
24
  lastLogin: Date;
@@ -34,6 +35,11 @@ interface IFormField {
34
35
  field: string;
35
36
  required: boolean;
36
37
  }
38
+ interface ICustomField {
39
+ key: string;
40
+ label: string;
41
+ required: boolean;
42
+ }
37
43
  interface IModalTheme {
38
44
  accent?: string;
39
45
  accentHover?: string;
@@ -50,6 +56,7 @@ interface IDauthDomainState {
50
56
  allowedOrigins: string[];
51
57
  authMethods?: IDauthAuthMethods;
52
58
  formFields?: IFormField[];
59
+ customFields?: ICustomField[];
53
60
  modalTheme?: IModalTheme;
54
61
  }
55
62
  interface IPasskeyCredential {
@@ -97,4 +104,4 @@ declare function DauthProfileModal({ open, onClose, onAvatarUpload, }: DauthProf
97
104
  declare const DauthProvider: React$1.FC<IDauthProviderProps>;
98
105
  declare const useDauth: () => IDauthState;
99
106
 
100
- export { DauthProfileModal, type DauthProfileModalProps, DauthProvider, type IDauthAuthMethods, type IDauthProviderProps, type IFormField, type IModalTheme, type IPasskeyCredential, useDauth };
107
+ export { DauthProfileModal, type DauthProfileModalProps, DauthProvider, type ICustomField, type IDauthAuthMethods, type IDauthProviderProps, type IFormField, type IModalTheme, type IPasskeyCredential, useDauth };
package/dist/index.d.ts CHANGED
@@ -18,6 +18,7 @@ interface IDauthUser {
18
18
  birthDate?: Date;
19
19
  country?: string;
20
20
  metadata?: Record<string, unknown>;
21
+ customFields?: Record<string, string>;
21
22
  createdAt: Date;
22
23
  updatedAt: Date;
23
24
  lastLogin: Date;
@@ -34,6 +35,11 @@ interface IFormField {
34
35
  field: string;
35
36
  required: boolean;
36
37
  }
38
+ interface ICustomField {
39
+ key: string;
40
+ label: string;
41
+ required: boolean;
42
+ }
37
43
  interface IModalTheme {
38
44
  accent?: string;
39
45
  accentHover?: string;
@@ -50,6 +56,7 @@ interface IDauthDomainState {
50
56
  allowedOrigins: string[];
51
57
  authMethods?: IDauthAuthMethods;
52
58
  formFields?: IFormField[];
59
+ customFields?: ICustomField[];
53
60
  modalTheme?: IModalTheme;
54
61
  }
55
62
  interface IPasskeyCredential {
@@ -97,4 +104,4 @@ declare function DauthProfileModal({ open, onClose, onAvatarUpload, }: DauthProf
97
104
  declare const DauthProvider: React$1.FC<IDauthProviderProps>;
98
105
  declare const useDauth: () => IDauthState;
99
106
 
100
- export { DauthProfileModal, type DauthProfileModalProps, DauthProvider, type IDauthAuthMethods, type IDauthProviderProps, type IFormField, type IModalTheme, type IPasskeyCredential, useDauth };
107
+ export { DauthProfileModal, type DauthProfileModalProps, DauthProvider, type ICustomField, type IDauthAuthMethods, type IDauthProviderProps, type IFormField, type IModalTheme, type IPasskeyCredential, useDauth };
package/dist/index.js CHANGED
@@ -775,6 +775,10 @@ function DauthProfileModal({
775
775
  const [lastname, setLastname] = (0, import_react.useState)("");
776
776
  const [nickname, setNickname] = (0, import_react.useState)("");
777
777
  const [country, setCountry] = (0, import_react.useState)("");
778
+ const [telPrefix, setTelPrefix] = (0, import_react.useState)("");
779
+ const [telSuffix, setTelSuffix] = (0, import_react.useState)("");
780
+ const [birthDate, setBirthDate] = (0, import_react.useState)("");
781
+ const [customFieldValues, setCustomFieldValues] = (0, import_react.useState)({});
778
782
  const [populated, setPopulated] = (0, import_react.useState)(false);
779
783
  const [saving, setSaving] = (0, import_react.useState)(false);
780
784
  const [status, setStatus] = (0, import_react.useState)(null);
@@ -794,6 +798,16 @@ function DauthProfileModal({
794
798
  setLastname(user.lastname || "");
795
799
  setNickname(user.nickname || "");
796
800
  setCountry(user.country || "");
801
+ setTelPrefix(user.telPrefix || "");
802
+ setTelSuffix(user.telSuffix || "");
803
+ setBirthDate(
804
+ user.birthDate ? new Date(user.birthDate).toISOString().split("T")[0] : ""
805
+ );
806
+ const cf = {};
807
+ for (const f of domain.customFields ?? []) {
808
+ cf[f.key] = user.customFields?.[f.key] ?? "";
809
+ }
810
+ setCustomFieldValues(cf);
797
811
  setPopulated(true);
798
812
  }
799
813
  if (!open) {
@@ -843,8 +857,23 @@ function DauthProfileModal({
843
857
  );
844
858
  const hasChanges = (0, import_react.useMemo)(() => {
845
859
  if (!user?._id) return false;
846
- return name !== (user.name || "") || lastname !== (user.lastname || "") || nickname !== (user.nickname || "") || country !== (user.country || "");
847
- }, [name, lastname, nickname, country, user]);
860
+ const origBirthDate = user.birthDate ? new Date(user.birthDate).toISOString().split("T")[0] : "";
861
+ const cfChanged = (domain.customFields ?? []).some(
862
+ (f) => (customFieldValues[f.key] ?? "") !== (user.customFields?.[f.key] ?? "")
863
+ );
864
+ return name !== (user.name || "") || lastname !== (user.lastname || "") || nickname !== (user.nickname || "") || country !== (user.country || "") || telPrefix !== (user.telPrefix || "") || telSuffix !== (user.telSuffix || "") || birthDate !== origBirthDate || cfChanged;
865
+ }, [
866
+ name,
867
+ lastname,
868
+ nickname,
869
+ country,
870
+ telPrefix,
871
+ telSuffix,
872
+ birthDate,
873
+ customFieldValues,
874
+ user,
875
+ domain.customFields
876
+ ]);
848
877
  const canSave = name.trim().length > 0 && hasChanges && !saving;
849
878
  const handleSave = (0, import_react.useCallback)(async () => {
850
879
  setSaving(true);
@@ -853,6 +882,14 @@ function DauthProfileModal({
853
882
  if (hasField("lastname")) fields.lastname = lastname;
854
883
  if (hasField("nickname")) fields.nickname = nickname;
855
884
  if (hasField("country")) fields.country = country;
885
+ if (hasField("tel_prefix"))
886
+ fields.telPrefix = telPrefix;
887
+ if (hasField("tel_suffix"))
888
+ fields.telSuffix = telSuffix;
889
+ if (hasField("birth_date") && birthDate)
890
+ fields.birthDate = birthDate;
891
+ if ((domain.customFields ?? []).length > 0)
892
+ fields.customFields = customFieldValues;
856
893
  const ok = await updateUser(fields);
857
894
  setSaving(false);
858
895
  if (ok) {
@@ -866,7 +903,19 @@ function DauthProfileModal({
866
903
  message: "Something went wrong. Please try again."
867
904
  });
868
905
  }
869
- }, [name, lastname, nickname, country, hasField, updateUser]);
906
+ }, [
907
+ name,
908
+ lastname,
909
+ nickname,
910
+ country,
911
+ telPrefix,
912
+ telSuffix,
913
+ birthDate,
914
+ customFieldValues,
915
+ hasField,
916
+ updateUser,
917
+ domain.customFields
918
+ ]);
870
919
  const handleDelete = (0, import_react.useCallback)(async () => {
871
920
  setDeleting(true);
872
921
  const ok = await deleteAccount();
@@ -1232,6 +1281,127 @@ function DauthProfileModal({
1232
1281
  onBlur: inputBlurHandler
1233
1282
  }
1234
1283
  )
1284
+ ] }),
1285
+ (hasField("tel_prefix") || hasField("tel_suffix")) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
1286
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: label, children: [
1287
+ "Phone",
1288
+ isRequired("tel_prefix") || isRequired("tel_suffix") ? " *" : ""
1289
+ ] }),
1290
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1291
+ "div",
1292
+ {
1293
+ style: {
1294
+ display: "flex",
1295
+ gap: 8
1296
+ },
1297
+ children: [
1298
+ hasField("tel_prefix") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1299
+ "input",
1300
+ {
1301
+ id: "dauth-tel-prefix",
1302
+ type: "text",
1303
+ value: telPrefix,
1304
+ onChange: (e) => setTelPrefix(e.target.value),
1305
+ placeholder: "+34",
1306
+ disabled: saving,
1307
+ style: {
1308
+ ...input,
1309
+ width: 80,
1310
+ flexShrink: 0
1311
+ },
1312
+ onFocus: inputFocusHandler,
1313
+ onBlur: inputBlurHandler,
1314
+ "aria-label": "Phone prefix"
1315
+ }
1316
+ ),
1317
+ hasField("tel_suffix") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1318
+ "input",
1319
+ {
1320
+ id: "dauth-tel-suffix",
1321
+ type: "tel",
1322
+ value: telSuffix,
1323
+ onChange: (e) => setTelSuffix(e.target.value),
1324
+ placeholder: "612 345 678",
1325
+ disabled: saving,
1326
+ style: {
1327
+ ...input,
1328
+ flex: 1
1329
+ },
1330
+ onFocus: inputFocusHandler,
1331
+ onBlur: inputBlurHandler,
1332
+ "aria-label": "Phone number"
1333
+ }
1334
+ )
1335
+ ]
1336
+ }
1337
+ )
1338
+ ] }),
1339
+ hasField("birth_date") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
1340
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1341
+ "label",
1342
+ {
1343
+ htmlFor: "dauth-birthdate",
1344
+ style: label,
1345
+ children: [
1346
+ "Birth date",
1347
+ isRequired("birth_date") ? " *" : ""
1348
+ ]
1349
+ }
1350
+ ),
1351
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1352
+ "input",
1353
+ {
1354
+ id: "dauth-birthdate",
1355
+ type: "date",
1356
+ value: birthDate,
1357
+ onChange: (e) => setBirthDate(e.target.value),
1358
+ disabled: saving,
1359
+ style: input,
1360
+ onFocus: inputFocusHandler,
1361
+ onBlur: inputBlurHandler
1362
+ }
1363
+ )
1364
+ ] }),
1365
+ (domain.customFields ?? []).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
1366
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { style: separator }),
1367
+ domain.customFields.map((cf) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1368
+ "div",
1369
+ {
1370
+ style: fieldGroup,
1371
+ children: [
1372
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1373
+ "label",
1374
+ {
1375
+ htmlFor: `dauth-cf-${cf.key}`,
1376
+ style: label,
1377
+ children: [
1378
+ cf.label,
1379
+ cf.required ? " *" : ""
1380
+ ]
1381
+ }
1382
+ ),
1383
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1384
+ "input",
1385
+ {
1386
+ id: `dauth-cf-${cf.key}`,
1387
+ type: "text",
1388
+ value: customFieldValues[cf.key] ?? "",
1389
+ onChange: (e) => setCustomFieldValues(
1390
+ (prev) => ({
1391
+ ...prev,
1392
+ [cf.key]: e.target.value
1393
+ })
1394
+ ),
1395
+ disabled: saving,
1396
+ style: input,
1397
+ onFocus: inputFocusHandler,
1398
+ onBlur: inputBlurHandler
1399
+ }
1400
+ )
1401
+ ]
1402
+ },
1403
+ cf.key
1404
+ ))
1235
1405
  ] })
1236
1406
  ] }),
1237
1407
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { style: separator }),