feat(change-password): add additionalFields prop

docusaurus/docs/components/change-password/change-password-form.md

@@ -26,6 +26,10 @@ Function to call when an error occurs calling the `changePassword` method on the
 
 Additional Buttons to render to the right of the Submit button.
 
+#### `additionalFields?: React.ReactNode`
+
+Additional Fields to render in the `<Form />`
+
 #### `header?: React.ReactNode`
 
 The header to render above the form inputs
@@ -38,6 +42,10 @@ The maximum length of the user's password
 
 Additional props to spread onto the current password input field
 
+#### `showCurrentPassword?: boolean`
+
+Conditionally render the current password input field. Defaults to `true`
+
 #### `newPasswordProps?: object`
 
 Additional props to spread onto the new password input field

packages/change-password/src/ChangePasswordForm.js

@@ -14,9 +14,11 @@
   onHandleSubmit,
   onError,
   additionalButtons,
+  additionalFields,
   header,
   maxLength = 30,
   currentPasswordProps,
+  showCurrentPassword = true,
   newPasswordProps,
   confirmNewPasswordProps,
 }) => {
@@ -41,11 +43,11 @@
     setSubmitted,
   } = useChangePasswordContext();
 
-  const handleSubmit = async ({ currentPassword, newPassword }) => {
+  const handleSubmit = async ({ ...formFields }) => {
     setLoading(true);
     setSubmitted(true);
     try {
-      const result = await resource.changePassword({ currentPassword, newPassword });
+      const result = await resource.changePassword({ ...formFields });
       setSuccess('Your password was successfully changed');
       if (onHandleSubmit) {
         await onHandleSubmit({ result, setSuccess, setError });
@@ -86,37 +88,42 @@
               <Alert isOpen={!!success} color="success" toggle={_onSuccessToggle}>
                 {success}
               </Alert>
-              <div className="password-with-icon">
-                <Field
-                  name="currentPassword"
-                  data-testid="current-password-input"
-                  label="Current Password"
-                  maxLength={maxLength}
-                  placeholder="Input your current password"
-                  type={currentPasswordVisible ? 'text' : 'password'}
-                  {...currentPasswordProps}
-                />
-                <Icon
-                  name={`eye${currentPasswordVisible ? '' : '-off'}`}
-                  data-testid="current-password-icon"
-                  id="current-password-eye"
-                  role="button"
-                  label="password-visibility"
-                  onMouseDown={(e) => {
-                    currentPasswordIconRef?.current?.focus();
-                    e.preventDefault();
-                    setCurrentPasswordVisible(!currentPasswordVisible);
-                  }}
-                  onKeyDown={(e) => {
-                    if (e.keyCode === 13 || e.keyCode === 32) {
-                      setCurrentPasswordVisible(!currentPasswordVisible);
-                    }
-                  }}
-                  tabIndex={0}
-                  aria-label={currentPasswordVisible ? 'Hide Password' : 'Show Password'}
-                  ref={currentPasswordIconRef}
-                />
-              </div>
+
+              {
+                showCurrentPassword ? (
+                  <div className="password-with-icon">
+                    <Field
+                      name="currentPassword"
+                      data-testid="current-password-input"
+                      label="Current Password"
+                      maxLength={maxLength}
+                      placeholder="Input your current password"
+                      type={currentPasswordVisible ? 'text' : 'password'}
+                      {...currentPasswordProps}
+                    />
+                    <Icon
+                      name={`eye${currentPasswordVisible ? '' : '-off'}`}
+                      data-testid="current-password-icon"
+                      id="current-password-eye"
+                      role="button"
+                      label="password-visibility"
+                      onMouseDown={(e) => {
+                        currentPasswordIconRef?.current?.focus();
+                        e.preventDefault();
+                        setCurrentPasswordVisible(!currentPasswordVisible);
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.keyCode === 13 || e.keyCode === 32) {
+                          setCurrentPasswordVisible(!currentPasswordVisible);
+                        }
+                      }}
+                      tabIndex={0}
+                      aria-label={currentPasswordVisible ? 'Hide Password' : 'Show Password'}
+                      ref={currentPasswordIconRef}
+                    />
+                  </div>
+                ) : null
+              }
 
               <div className="password-with-icon">
                 <Field
@@ -183,6 +190,7 @@
                   ref={confirmNewPasswordIconRef}
                 />
               </div>
+              {additionalFields}
             </Col>
             <Col>
               <ChangePasswordFeedback />
@@ -208,9 +216,11 @@
   onHandleSubmit: PropTypes.func,
   onError: PropTypes.func,
   additionalButtons: PropTypes.node,
+  additionalFields: PropTypes.node,
   header: PropTypes.node,
   maxLength: PropTypes.number,
   currentPasswordProps: PropTypes.object,
+  showCurrentPassword: PropTypes.bool,
   newPasswordProps: PropTypes.object,
   confirmNewPasswordProps: PropTypes.object,
 };

packages/change-password/types/ChangePasswordForm.d.ts

@@ -2,9 +2,11 @@ export interface ChangePasswordFormProps {
   onHandleSubmit?: (arg: { result: any }) => void;
   onError?: (arg: { error: Error }) => void;
   additionalButtons?: React.ReactNode;
+  additionalFields?: React.ReactNode;
   header?: React.ReactNode;
   maxLength?: number;
   currentPasswordProps?: any;
+  showCurrentPassword?: boolean;
   newPasswordProps?: any;
   confirmNewPasswordProps?: any;
 }