feat(core): add custom password field and text field for update setti…

…ngs form
bigcommerce · Aug 7, 2024 · 1ef848c · 1ef848c
1 parent 818559d
commit 1ef848c
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 4 deletions.
diff --git a/.../[locale]/(default)/account/[tab]/_components/addresses-content/address-field-handlers.ts b/.../[locale]/(default)/account/[tab]/_components/addresses-content/address-field-handlers.ts
@@ -161,10 +161,16 @@ const createRadioButtonsValidationHandler =
 
 const createDatesValidationHandler =
   (dateStateSetter: FieldStateSetFn<FieldState>, dateFieldState: FieldState) =>
-  (e: React.ChangeEvent<HTMLInputElement>) => {
+  (e: React.ChangeEvent<HTMLInputElement> & { nativeEvent: { inputType: string } }) => {
     const fieldId = Number(e.target.id.split('-')[2]);
     const validationStatus = e.target.validity.valueMissing;
 
+    // cancel validation on attempt to delete input content via keyboard since
+    // DayPicker won't allow the user to unselect the selected date when it's required
+    if (e.nativeEvent.inputType === 'deleteContentBackward') {
+      return;
+    }
+
     dateStateSetter({ ...dateFieldState, [fieldId]: !validationStatus });
   };
 

diff --git a/core/app/[locale]/(default)/account/[tab]/_components/update-settings-form/index.tsx b/core/app/[locale]/(default)/account/[tab]/_components/update-settings-form/index.tsx
@@ -13,6 +13,7 @@ import {
   getPreviouslySubmittedValue,
   MultilineText,
   NumbersOnly,
+  Password,
   Picklist,
   RadioButtons,
 } from '~/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields';
@@ -26,9 +27,11 @@ import {
   createDatesValidationHandler,
   createMultilineTextValidationHandler,
   createNumbersInputValidationHandler,
+  createPasswordValidationHandler,
   createPreSubmitCheckboxesValidationHandler,
   createPreSubmitPicklistValidationHandler,
   createRadioButtonsValidationHandler,
+  createTextInputValidationHandler,
 } from '../addresses-content/address-field-handlers';
 
 import { updateCustomer } from './_actions/update-customer';
@@ -115,6 +118,7 @@ export const UpdateSettingsForm = ({
   const [picklistValid, setPicklistValid] = useState<Record<string, boolean>>({});
   const [checkboxesValid, setCheckboxesValid] = useState<Record<string, boolean>>({});
   const [datesValid, setDatesValid] = useState<Record<string, boolean>>({});
+  const [passwordValid, setPasswordValid] = useState<Record<string, boolean>>({});
 
   const reCaptchaRef = useRef<ReCaptcha>(null);
   const [reCaptchaToken, setReCaptchaToken] = useState('');
@@ -151,6 +155,14 @@ export const UpdateSettingsForm = ({
     customerFields,
     setCheckboxesValid,
   );
+  const handlePasswordValidation = createPasswordValidationHandler(
+    setPasswordValid,
+    customerFields,
+  );
+  const handleCustomTextValidation = createTextInputValidationHandler(
+    setTextInputValid,
+    textInputValid,
+  );
   const preSubmitFieldsValidation = (
     e: MouseEvent<HTMLFormElement> & { target: HTMLButtonElement },
   ) => {
@@ -369,20 +381,37 @@ export const UpdateSettingsForm = ({
                     <FieldWrapper fieldId={fieldId} key={fieldId}>
                       <Text
                         defaultValue={submittedValue}
-                        entityId={FieldNameToFieldId.email}
+                        entityId={fieldId}
                         isRequired={field.isRequired}
                         isValid={textInputValid[fieldId]}
                         label={
                           customerFields.find(({ entityId: id }) => id === fieldId)?.label ?? ''
                         }
                         name={fieldName}
-                        onChange={handleTextInputValidation}
+                        onChange={handleCustomTextValidation}
                         type="text"
                       />
                     </FieldWrapper>
                   );
                 }
 
+                case 'PasswordFormField': {
+                  const submittedValue =
+                    getPreviouslySubmittedValue(previouslySubmittedField).PasswordFormField;
+
+                  return (
+                    <FieldWrapper fieldId={fieldId} key={fieldId}>
+                      <Password
+                        defaultValue={submittedValue}
+                        field={field}
+                        isValid={passwordValid[fieldId]}
+                        name={fieldName}
+                        onChange={handlePasswordValidation}
+                      />
+                    </FieldWrapper>
+                  );
+                }
+
                 default:
                   return null;
               }

diff --git a/...ale]/(default)/login/register-customer/_components/register-customer-form/fields/date.tsx b/...ale]/(default)/login/register-customer/_components/register-customer-form/fields/date.tsx
@@ -34,7 +34,7 @@ interface DateProps {
   defaultValue?: Date | string;
   field: DateType;
   isValid?: boolean;
-  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+  onChange?: (e: ChangeEvent<HTMLInputElement> & { nativeEvent: { inputType: string } }) => void;
   onValidate?: (
     state:
       | Record<string, boolean>