@availity/change-password 2.1.6 → 2.3.0

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+# [2.3.0](https://github.com/Availity/availity-react/compare/@availity/change-password@2.2.0...@availity/change-password@2.3.0) (2024-12-02)
+
+
+### Features
+
+* **change-password:** add initialFields prop ([ac01d42](https://github.com/Availity/availity-react/commit/ac01d42f3d589d0b2f3c5be4f8e51fe35ec36b3a))
+
+
+
+# [2.2.0](https://github.com/Availity/availity-react/compare/@availity/change-password@2.1.6...@availity/change-password@2.2.0) (2024-11-27)
+
+
+### Features
+
+* **change-password:** add additionalFields prop ([e8bf057](https://github.com/Availity/availity-react/commit/e8bf057826ba2bafbca732aaabcb3ffdb965c3b1))
+* **change-password:** add showCurrentPassword prop ([1cb9088](https://github.com/Availity/availity-react/commit/1cb9088ab92658b550bc7bc4c3be440b48e74c4f))
+* **change-password:** allow developer to use additionalFields in resource call ([ccf00bf](https://github.com/Availity/availity-react/commit/ccf00bf410780c58d59cdad00bead1cb6f0faf28))
+
+
+
 ## [2.1.6](https://github.com/Availity/availity-react/compare/@availity/change-password@2.1.5...@availity/change-password@2.1.6) (2024-11-12)
 
 ### Dependency Updates

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/change-password",
-  "version": "2.1.6",
+  "version": "2.3.0",
   "description": "Easy to use change-password components",
   "keywords": [
     "react",

package/src/ChangePasswordForm.js

@@ -14,9 +14,11 @@ const ChangePasswordForm = ({
   onHandleSubmit,
   onError,
   additionalButtons,
+  additionalFields,
   header,
   maxLength = 30,
   currentPasswordProps,
+  showCurrentPassword = true,
   newPasswordProps,
   confirmNewPasswordProps,
 }) => {
@@ -29,6 +31,7 @@ const ChangePasswordForm = ({
     setSuccess,
     resource,
     schema,
+    initialValues,
     currentPasswordIconRef,
     newPasswordIconRef,
     confirmNewPasswordIconRef,
@@ -41,11 +44,11 @@ const ChangePasswordForm = ({
     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 });
@@ -72,7 +75,7 @@ const ChangePasswordForm = ({
   return (
     <BlockUI blocking={loading}>
       <Form
-        initialValues={{ currentPassword: '', newPassword: '', confirmNewPassword: '' }}
+        initialValues={{ currentPassword: '', newPassword: '', confirmNewPassword: '', ...initialValues }}
         validationSchema={schema}
         onSubmit={handleSubmit}
       >
@@ -86,37 +89,42 @@ const ChangePasswordForm = ({
               <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 +191,7 @@ const ChangePasswordForm = ({
                   ref={confirmNewPasswordIconRef}
                 />
               </div>
+              {additionalFields}
             </Col>
             <Col>
               <ChangePasswordFeedback />
@@ -208,11 +217,14 @@ ChangePasswordForm.propTypes = {
   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,
+  initialValues: PropTypes.object,
 };
 
 export default ChangePasswordForm;

package/types/ChangePasswordForm.d.ts

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