dauth-context-react 6.2.0 → 6.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dauth-context-react",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "description": "React provider and hook for passwordless authentication via the Dauth service (BFF pattern with httpOnly cookies)",
   "license": "MIT",
   "author": "David T. Pizarro Frick",

package/src/DauthProfileModal.tsx

@@ -314,6 +314,12 @@ export 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<
+    Record<string, string>
+  >({});
   const [populated, setPopulated] = useState(false);
 
   // Status
@@ -352,6 +358,20 @@ export 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: Record<string, string> = {};
+      for (const f of domain.customFields ?? []) {
+        cf[f.key] = user.customFields?.[f.key] ?? '';
+      }
+      setCustomFieldValues(cf);
       setPopulated(true);
     }
     if (!open) {
@@ -414,13 +434,36 @@ export function DauthProfileModal({
 
   const hasChanges = useMemo(() => {
     if (!user?._id) return false;
+    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 || '')
+      country !== (user.country || '') ||
+      telPrefix !== (user.telPrefix || '') ||
+      telSuffix !== (user.telSuffix || '') ||
+      birthDate !== origBirthDate ||
+      cfChanged
     );
-  }, [name, lastname, nickname, country, user]);
+  }, [
+    name,
+    lastname,
+    nickname,
+    country,
+    telPrefix,
+    telSuffix,
+    birthDate,
+    customFieldValues,
+    user,
+    domain.customFields,
+  ]);
 
   const canSave =
     name.trim().length > 0 && hasChanges && !saving;
@@ -428,10 +471,18 @@ export function DauthProfileModal({
   const handleSave = useCallback(async () => {
     setSaving(true);
     setStatus(null);
-    const fields: Record<string, string> = { name };
+    const fields: Record<string, any> = { name };
     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) {
@@ -445,7 +496,19 @@ export 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);
@@ -862,6 +925,133 @@ export function DauthProfileModal({
                       />
                     </div>
                   )}
+
+                  {(hasField('tel_prefix') ||
+                    hasField('tel_suffix')) && (
+                    <div style={fieldGroup}>
+                      <div style={label}>
+                        Phone
+                        {isRequired('tel_prefix') ||
+                        isRequired('tel_suffix')
+                          ? ' *'
+                          : ''}
+                      </div>
+                      <div
+                        style={{
+                          display: 'flex',
+                          gap: 8,
+                        }}
+                      >
+                        {hasField('tel_prefix') && (
+                          <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') && (
+                          <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"
+                          />
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {hasField('birth_date') && (
+                    <div style={fieldGroup}>
+                      <label
+                        htmlFor="dauth-birthdate"
+                        style={label}
+                      >
+                        Birth date
+                        {isRequired('birth_date')
+                          ? ' *'
+                          : ''}
+                      </label>
+                      <input
+                        id="dauth-birthdate"
+                        type="date"
+                        value={birthDate}
+                        onChange={(e) =>
+                          setBirthDate(e.target.value)
+                        }
+                        disabled={saving}
+                        style={input}
+                        onFocus={inputFocusHandler}
+                        onBlur={inputBlurHandler}
+                      />
+                    </div>
+                  )}
+
+                  {(domain.customFields ?? []).length >
+                    0 && (
+                    <>
+                      <hr style={separator} />
+                      {domain.customFields!.map((cf) => (
+                        <div
+                          key={cf.key}
+                          style={fieldGroup}
+                        >
+                          <label
+                            htmlFor={`dauth-cf-${cf.key}`}
+                            style={label}
+                          >
+                            {cf.label}
+                            {cf.required ? ' *' : ''}
+                          </label>
+                          <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}
+                          />
+                        </div>
+                      ))}
+                    </>
+                  )}
                 </div>
 
                 {/* Language selector */}

package/src/index.tsx

@@ -17,6 +17,7 @@ import type {
   IDauthAuthMethods,
   IDauthUser,
   IFormField,
+  ICustomField,
   IModalTheme,
   IPasskeyCredential,
   DauthProfileModalProps,
@@ -27,6 +28,7 @@ export type {
   IDauthProviderProps,
   IDauthAuthMethods,
   IFormField,
+  ICustomField,
   IModalTheme,
   IPasskeyCredential,
   DauthProfileModalProps,

package/src/interfaces.ts

@@ -16,6 +16,7 @@ export interface IDauthUser {
   birthDate?: Date;
   country?: string;
   metadata?: Record<string, unknown>;
+  customFields?: Record<string, string>;
   createdAt: Date;
   updatedAt: Date;
   lastLogin: Date;
@@ -36,6 +37,12 @@ export interface IFormField {
   required: boolean;
 }
 
+export interface ICustomField {
+  key: string;
+  label: string;
+  required: boolean;
+}
+
 export interface IModalTheme {
   accent?: string;
   accentHover?: string;
@@ -53,6 +60,7 @@ export interface IDauthDomainState {
   allowedOrigins: string[];
   authMethods?: IDauthAuthMethods;
   formFields?: IFormField[];
+  customFields?: ICustomField[];
   modalTheme?: IModalTheme;
 }