@availity/change-password 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+# 0.1.0 (2023-07-20)
+
+
+### Bug Fixes
+
+* **change-password:** documentation fixes ([7cfa372](https://github.com/Availity/availity-react/commit/7cfa372ec65c002ecfa0e57c1025207e6bac2d05))
+* rename confirmPassword to confirmNewPassword, fix icon styling ([75b8167](https://github.com/Availity/availity-react/commit/75b8167416adecea2ef0b9db73875906c93a851a))
+
+
+### Features
+
+* add change password component ([47e7041](https://github.com/Availity/availity-react/commit/47e70411c459a0651e60c605bffe2ccfc6d0e872))
+
+
+
+# Changelog

package/README.md

@@ -0,0 +1,26 @@
+# @availity/change-password
+
+> Easy to use change password component
+
+[![Version](https://img.shields.io/npm/v/@availity/change-password.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/change-password)
+[![NPM Downloads](https://img.shields.io/npm/dt/@availity/change-password.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/change-password)
+[![Dependecy Status](https://img.shields.io/librariesio/release/npm/@availity/change-password?style=for-the-badge)](https://github.com/Availity/availity-react/blob/master/packages/change-password/package.json)
+
+## Installation
+
+### NPM
+
+```bash
+npm install @availity/change-password
+```
+
+### Yarn
+
+```bash
+yarn add @availity/change-password
+```
+
+## Documentation
+
+Check out more documentation at [availity.github.io](https://availity.github.io/availity-react/components/change-password/index)
+

package/index.d.ts

@@ -0,0 +1,10 @@
+import ChangePassword, { useChangePasswordContext, ChangePasswordContext } from './types/ChangePassword';
+import ChangePasswordForm from './types/ChangePasswordForm';
+
+export default ChangePassword;
+
+export {
+  ChangePasswordForm,
+  useChangePasswordContext,
+  ChangePasswordContext,
+};

package/index.js

@@ -0,0 +1,10 @@
+import ChangePassword, { useChangePasswordContext, ChangePasswordContext } from './src/ChangePassword';
+import ChangePasswordForm from './src/ChangePasswordForm';
+
+export default ChangePassword;
+
+export {
+  useChangePasswordContext,
+  ChangePasswordContext,
+  ChangePasswordForm,
+};

package/jest.config.js

@@ -0,0 +1,8 @@
+const global = require('../../jest/global-config');
+
+module.exports = {
+  ...global,
+  displayName: 'change-password',
+  coverageDirectory: '../../coverage/change-password',
+};
+

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@availity/change-password",
+  "version": "0.1.0",
+  "description": "Easy to use change-password components",
+  "keywords": [
+    "react",
+    "availity",
+    "change-password"
+  ],
+  "homepage": "https://availity.github.io/availity-react/components/change-password/index",
+  "bugs": {
+    "url": "https://github.com/Availity/availity-react/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/availity-react.git",
+    "directory": "packages/change-password"
+  },
+  "license": "MIT",
+  "author": "Tyson Warner <tyson.warner@availity.com>",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "publish": "yarn npm publish --tolerate-republish --access public",
+    "publish:canary": "yarn npm publish --access public --tag canary"
+  },
+  "dependencies": {
+    "@availity/form": "1.7.3",
+    "@availity/icon": "0.11.3",
+    "classnames": "^2.3.1",
+    "dayjs": "^1.11.2",
+    "lodash": "^4.17.21",
+    "prop-types": "^15.8.1"
+  },
+  "devDependencies": {
+    "@availity/api-axios": "^7.0.1",
+    "axios": "^0.21.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "reactstrap": "^8.10.1"
+  },
+  "peerDependencies": {
+    "@availity/api-axios": "^6.0.0 || ^7.0.0",
+    "axios": "^0.21.1",
+    "react": ">=16.8.6",
+    "react-query": "^3.29.0",
+    "reactstrap": "^8.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/project.json

@@ -0,0 +1,36 @@
+{
+  "root": "packages/change-password",
+  "projectType": "library",
+  "targets": {
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/change-password"],
+      "options": { "jestConfig": "packages/change-password/jest.config.js", "passWithNoTests": true }
+    },
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "preset": "angular",
+        "commitMessageFormat": "chore(${projectName}): release version ${version} [skip ci]",
+        "tagPrefix": "@availity/${projectName}@",
+        "baseBranch": "master"
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "eslintConfig": ".eslintrc.yaml",
+        "lintFilePatterns": ["packages/change-password/**/*.{js,ts}"],
+        "silent": false,
+        "fix": false,
+        "cache": true,
+        "cacheLocation": "./node_modules/.cache/change-password/.eslintcache",
+        "maxWarnings": -1,
+        "quiet": false,
+        "noEslintrc": false,
+        "hasTypeAwareRules": true,
+        "cacheStrategy": "metadata"
+      }
+    }
+  }
+}

package/src/ChangePassword.js

@@ -0,0 +1,57 @@
+import React, { createContext, useContext, useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import AvApi, { AvMicroserviceApi } from '@availity/api-axios';
+
+export const ChangePasswordContext = createContext();
+
+export const useChangePasswordContext = () => useContext(ChangePasswordContext);
+
+const ChangePassword = ({ resource, schema, conditions, children }) => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(null);
+
+  const currentPasswordIconRef = useRef(null);
+  const newPasswordIconRef = useRef(null);
+  const confirmNewPasswordIconRef = useRef(null);
+
+  const [currentPasswordVisible, setCurrentPasswordVisible] = useState(false);
+  const [newPasswordVisible, setNewPasswordVisible] = useState(false);
+  const [confirmNewPasswordVisible, setConfirmNewPasswordVisible] = useState(false);
+
+  return (
+    <ChangePasswordContext.Provider
+      value={{
+        loading,
+        setLoading,
+        error,
+        setError,
+        success,
+        setSuccess,
+        resource,
+        schema,
+        conditions,
+        currentPasswordIconRef,
+        newPasswordIconRef,
+        confirmNewPasswordIconRef,
+        currentPasswordVisible,
+        setCurrentPasswordVisible,
+        newPasswordVisible,
+        setNewPasswordVisible,
+        confirmNewPasswordVisible,
+        setConfirmNewPasswordVisible,
+      }}
+    >
+      {children}
+    </ChangePasswordContext.Provider>
+  );
+};
+
+ChangePassword.propTypes = {
+  resource: PropTypes.oneOfType([PropTypes.instanceOf(AvApi), PropTypes.instanceOf(AvMicroserviceApi)]).isRequired,
+  schema: PropTypes.object,
+  conditions: PropTypes.arrayOf(PropTypes.shape({ message: PropTypes.string, passes: PropTypes.func })),
+  children: PropTypes.node,
+};
+
+export default ChangePassword;

package/src/ChangePasswordFeedback.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import Icon from '@availity/icon';
+import { useFormikContext } from 'formik';
+import { useChangePasswordContext } from './ChangePassword';
+import './ChangePasswordFeedback.scss';
+
+const ChangePasswordFeedback = () => {
+  const { conditions = [] } = useChangePasswordContext();
+
+  const { values, touched } = useFormikContext();
+  const { currentPassword, newPassword, confirmNewPassword } = values;
+
+  return (
+    <div>
+      <strong>Your new password must contain</strong>
+      <div>
+        {conditions.map(({ message, passes }) => {
+          const conditionPasses = passes({
+            currentPassword,
+            newPassword,
+            confirmNewPassword,
+            currentPasswordTouched: currentPassword || touched.currentPassword === true,
+            newPasswordTouched: newPassword || touched.newPassword === true,
+            confirmNewPasswordTouched: confirmNewPassword || touched.confirmNewPassword === true,
+          });
+          return (
+            <div key={message} className="passwordElement pt-3">
+              {conditionPasses === true ? (
+                <Icon data-testid={`ok-circle-${message}`} name="ok-circle" className="complies" />
+              ) : conditionPasses === false ? (
+                <Icon data-testid={`cancel-circle-${message}`} name="cancel-circle" className="text-danger" />
+              ) : (
+                <Icon data-testid={`circle-empty-${message}`} name="circle-empty" />
+              )}
+              {message}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default ChangePasswordFeedback;

package/src/ChangePasswordFeedback.scss

@@ -0,0 +1,43 @@
+.passwordElement {
+  padding-bottom: 3px;
+}
+.complies {
+  color: #29a232;
+  vertical-align: middle;
+}
+
+.password-input {
+  background-image: none !important;
+}
+.password-with-icon {
+  position: relative;
+  .icon {
+    position: absolute;
+    top: 27px;
+    right: 0;
+    margin: 0.5rem 0.75rem;
+    padding: 1px;
+    outline: none;
+  }
+}
+// get rid of Edge browser's show/hide password eye it adds automatically
+::-ms-reveal {
+  display: none;
+}
+
+#current-password-eye::before,
+#new-password-eye::before,
+#confirm-new-password-eye::before {
+  border: solid 1px rgb(255, 255, 255, 0);
+  border-radius: 15%;
+  padding: 2px;
+  cursor: pointer;
+}
+#current-password-eye:focus::before,
+#new-password-eye:focus::before,
+#confirm-new-password-eye:focus::before {
+  border: solid 1px rgb(116, 116, 116);
+  border-radius: 15%;
+  padding: 2px;
+  cursor: pointer;
+}

package/src/ChangePasswordForm.js

@@ -0,0 +1,203 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import BlockUI from 'react-block-ui';
+import Icon from '@availity/icon';
+import { Alert, Button, CardBody, CardFooter, Col, Row } from 'reactstrap';
+import { Form, Field } from '@availity/form';
+import { useChangePasswordContext } from './ChangePassword';
+import ChangePasswordFeedback from './ChangePasswordFeedback';
+import './ChangePasswordForm.scss';
+
+const ChangePasswordForm = ({
+  onHandleSubmit,
+  onError,
+  additionalButtons,
+  header,
+  maxLength = 30,
+  currentPasswordProps,
+  newPasswordProps,
+  confirmNewPasswordProps,
+}) => {
+  const {
+    loading,
+    setLoading,
+    error,
+    setError,
+    success,
+    setSuccess,
+    resource,
+    schema,
+    currentPasswordIconRef,
+    newPasswordIconRef,
+    confirmNewPasswordIconRef,
+    currentPasswordVisible,
+    setCurrentPasswordVisible,
+    newPasswordVisible,
+    setNewPasswordVisible,
+    confirmNewPasswordVisible,
+    setConfirmNewPasswordVisible,
+  } = useChangePasswordContext();
+
+  const handleSubmit = async ({ currentPassword, newPassword }) => {
+    setLoading(true);
+    try {
+      const result = await resource.changePassword({ currentPassword, newPassword });
+      setSuccess('Your password was successfully changed');
+      if (onHandleSubmit) {
+        await onHandleSubmit({ result });
+      }
+      setLoading(false);
+    } catch (error) {
+      setError('An error occurred changing your password');
+      if (onError) {
+        await onError({ error });
+      }
+      setLoading(false);
+    }
+  };
+
+  return (
+    <BlockUI blocking={loading}>
+      <Form
+        initialValues={{ currentPassword: '', newPassword: '', confirmNewPassword: '' }}
+        validationSchema={schema}
+        onSubmit={handleSubmit}
+      >
+        <CardBody>
+          {header}
+          <Row>
+            <Col>
+              <Alert isOpen={!!error} color="danger" toggle={() => setError(null)}>
+                {error}
+              </Alert>
+              <Alert isOpen={!!success} color="success" toggle={() => setSuccess(null)}>
+                {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>
+
+              <div className="password-with-icon">
+                <Field
+                  name="newPassword"
+                  data-testid="new-password-input"
+                  label="New Password"
+                  maxLength={maxLength}
+                  placeholder="Input your new password"
+                  className="password-input"
+                  type={newPasswordVisible ? 'text' : 'password'}
+                  {...newPasswordProps}
+                />
+                <Icon
+                  name={`eye${newPasswordVisible ? '' : '-off'}`}
+                  data-testid="new-password-icon"
+                  id="new-password-eye"
+                  role="button"
+                  label="password-visibility"
+                  onMouseDown={(e) => {
+                    newPasswordIconRef?.current?.focus();
+                    e.preventDefault();
+                    setNewPasswordVisible(!newPasswordVisible);
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.keyCode === 13 || e.keyCode === 32) {
+                      setNewPasswordVisible(!newPasswordVisible);
+                    }
+                  }}
+                  tabIndex={0}
+                  aria-label={newPasswordVisible ? 'Hide Password' : 'Show Password'}
+                  ref={newPasswordIconRef}
+                />
+              </div>
+
+              <div className="password-with-icon">
+                <Field
+                  name="confirmNewPassword"
+                  data-testid="confirm-new-password-input"
+                  label="Confirm New Password"
+                  maxLength={maxLength}
+                  placeholder="Confirm your new password"
+                  className="password-input"
+                  type={confirmNewPasswordVisible ? 'text' : 'password'}
+                  {...confirmNewPasswordProps}
+                />
+                <Icon
+                  name={`eye${confirmNewPasswordVisible ? '' : '-off'}`}
+                  data-testid="confirm-new-password-icon"
+                  id="confirm-new-password-eye"
+                  role="button"
+                  label="password-visibility"
+                  onMouseDown={(e) => {
+                    confirmNewPasswordIconRef?.current?.focus();
+                    e.preventDefault();
+                    setConfirmNewPasswordVisible(!confirmNewPasswordVisible);
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.keyCode === 13 || e.keyCode === 32) {
+                      setConfirmNewPasswordVisible(!confirmNewPasswordVisible);
+                    }
+                  }}
+                  tabIndex={0}
+                  aria-label={confirmNewPasswordVisible ? 'Hide Password' : 'Show Password'}
+                  ref={confirmNewPasswordIconRef}
+                />
+              </div>
+            </Col>
+            <Col>
+              <ChangePasswordFeedback />
+            </Col>
+          </Row>
+        </CardBody>
+        <CardFooter>
+          <div className="text-left">
+            <Button className="mx-3" color="primary" type="submit" data-testid="submit-btn">
+              Submit
+            </Button>
+            {additionalButtons}
+          </div>
+        </CardFooter>
+      </Form>
+    </BlockUI>
+  );
+};
+
+ChangePasswordForm.propTypes = {
+  onHandleSubmit: PropTypes.func,
+  onError: PropTypes.func,
+  additionalButtons: PropTypes.node,
+  header: PropTypes.node,
+  maxLength: PropTypes.number,
+  currentPasswordProps: PropTypes.object,
+  newPasswordProps: PropTypes.object,
+  confirmNewPasswordProps: PropTypes.object,
+};
+
+export default ChangePasswordForm;

package/src/ChangePasswordForm.scss

@@ -0,0 +1,44 @@
+.passwordElement {
+  padding-bottom: 3px;
+}
+.complies {
+  color: #29a232;
+  vertical-align: middle;
+}
+
+.password-input {
+  background-image: none !important;
+}
+.password-with-icon {
+  position: relative;
+  .icon {
+    position: absolute;
+    top: 27px;
+    right: 0;
+    margin: 0.5rem 0.75rem;
+    padding: 1px;
+    outline: none;
+  }
+}
+// get rid of Edge browser's show/hide password eye it adds automatically
+::-ms-reveal {
+  display: none;
+}
+
+#current-password-eye::before,
+#new-password-eye::before,
+#confirm-new-password-eye::before {
+  border: solid 1px rgb(255, 255, 255, 0);
+  border-radius: 15%;
+  padding: 2px;
+  cursor: pointer;
+}
+#current-password-eye:focus::before,
+#new-password-eye:focus::before,
+#confirm-new-password-eye:focus::before {
+  border: solid 1px rgb(116, 116, 116);
+  border-radius: 15%;
+  padding: 2px;
+  cursor: pointer;
+}
+

package/stories/change-password.stories.tsx

@@ -0,0 +1,186 @@
+import React, { useState } from 'react';
+import { Story, Meta } from '@storybook/react';
+import { ArgsTable } from '@storybook/addon-docs';
+import * as yup from 'yup';
+import AvApi from '@availity/api-axios';
+import ChangePassword, { ChangePasswordForm } from '..';
+
+export default {
+  title: 'Components/Change Password',
+  parameters: {
+    docs: {
+      description: {
+        component: `This is the provider component needed for @availity/change-password components to work. 
+        All @availity/change-password components must be children of a ChangePassword provider. 
+        The change-password provider is used manage state surrounding the change-password component`,
+      },
+    },
+  },
+} as Meta;
+
+const me = { userId: 'youguessedme' };
+
+class AvChangePasswordApi extends AvApi {
+  constructor(config) {
+    super({
+      name: 'change-password',
+      ...config,
+    });
+  }
+
+  changePassword() {
+    window.alert('Your password change was submitted');
+  }
+}
+
+export const Default: Story = () => {
+  const resource = new AvChangePasswordApi();
+
+  const [submitted, setSubmitted] = useState(false);
+
+  const onHandleSubmit = () => {
+    setSubmitted(true);
+  };
+
+  const changePasswordSchema = yup.object().shape({
+    currentPassword: yup.string().required('Input your current password'),
+    newPassword: yup
+      .string()
+      .min(8, 'Your password must be between 8 and 15 characters')
+      .max(15, 'Your password must be between 8 and 15 characters')
+      .required('Input your current password')
+      .matches(
+        /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?!.*\s)(?=.*[!"#$%&'()*+,./:;<=>?@[\\\]^_`{|}~-])[\w!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]{8,15}$/,
+        'Input your current password'
+      )
+      .test('passDoesntContainUserId', 'Input your current password', (value) => {
+        const passDoesntContainUserId = new RegExp(`^((?!${me.userId}).)*$`).test(value); // true when password doesnt contain userId
+        // fail test with false when the userId is blank, since we cant really check if the pass contains it if its not there yet
+        return me.userId ? passDoesntContainUserId : false;
+      }),
+    confirmNewPassword: yup
+      .string()
+      .test('passMatches', 'Passwords do not match', function (value) {
+        const { resolve } = this;
+        const password = resolve(yup.ref('newPassword'));
+        const passwordsMatch = password === value; // true when confirmNewPassword === password
+        return password ? passwordsMatch : false;
+      })
+      .min(8, 'Input your current password')
+      .max(15, 'Input your current password')
+      .required('Input your current password')
+      .matches(
+        /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?!.*\s)(?=.*[!"#$%&'()*+,./:;<=>?@[\\\]^_`{|}~-])[\w!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]{8,15}$/,
+        'Input your current password'
+      )
+      .test('passDoesntContainUserId', 'Input your current password', (value) => {
+        const passDoesntContainUserId = new RegExp(`^((?!${me.userId}).)*$`).test(value); // true when password doesnt contain userId
+        // fail test with false when the userId is blank, since we cant really check if the pass contains it if its not there yet
+        return me.userId ? passDoesntContainUserId : false;
+      }),
+  });
+
+  const conditions = [
+    {
+      message: 'Have 8 to 15 characters',
+      passes: ({ newPassword, newPasswordTouched }) => {
+        if (new RegExp(/^.{8,15}$/).test(newPassword)) {
+          if (newPasswordTouched) return true;
+          return null;
+        }
+        if (submitted) return false;
+        return null;
+      },
+    },
+    {
+      message: 'Have a number',
+      passes: ({ newPassword, newPasswordTouched }) => {
+        if (new RegExp(/\d/).test(newPassword)) {
+          if (newPasswordTouched) return true;
+          return null;
+        }
+        if (submitted) return false;
+        return null;
+      },
+    },
+    {
+      message: 'Have an uppercase letter',
+      passes: ({ newPassword, newPasswordTouched }) => {
+        if (new RegExp('[A-Z]').test(newPassword)) {
+          if (newPasswordTouched) return true;
+          return null;
+        }
+        if (submitted) return false;
+        return null;
+      },
+    },
+    {
+      message: 'Have a lowercase letter',
+      passes: ({ newPassword, newPasswordTouched }) => {
+        if (new RegExp('[a-z]').test(newPassword)) {
+          if (newPasswordTouched) return true;
+          return null;
+        }
+        if (submitted) return false;
+        return null;
+      },
+    },
+    {
+      message: 'Have a special character',
+      passes: ({ newPassword, newPasswordTouched }) => {
+        if (new RegExp(/[!"#$%&'()*+,./:;<=>?@[\\\]^_`{|}~-]/).test(newPassword)) {
+          if (newPasswordTouched) return true;
+          return null;
+        }
+        if (submitted) return false;
+        return null;
+      },
+    },
+    {
+      message: 'Not contain your user Id',
+      passes: ({ newPassword, newPasswordTouched }) => {
+        if (new RegExp(`^((?!${me.userId}).)*$`).test(newPassword)) {
+          if (newPasswordTouched) return true;
+          return null;
+        }
+        if (submitted) return false;
+        return null;
+      },
+    },
+    {
+      message: 'Not contain spaces',
+      passes: ({ newPassword, newPasswordTouched }) => {
+        if (new RegExp('^\\S*$').test(newPassword)) {
+          if (newPasswordTouched) return true;
+          return null;
+        }
+        if (submitted) return false;
+        return null;
+      },
+    },
+  ];
+
+  return (
+    <ChangePassword resource={resource} schema={changePasswordSchema} conditions={conditions}>
+      <ChangePasswordForm onHandleSubmit={onHandleSubmit} />
+    </ChangePassword>
+  );
+};
+
+Default.storyName = 'default';
+
+export const ChangePasswordProps: Story = () => (
+  <>
+    <h4>Availity Props</h4>
+    <h5>ChangePassword</h5>
+    <ArgsTable of={ChangePassword} />
+  </>
+);
+
+export const ChangePasswordFormProps: Story = () => (
+  <>
+    <h4>Availity Props</h4>
+    <h5>ChangePasswordForm</h5>
+    <ArgsTable of={ChangePasswordForm} />
+  </>
+);

package/tests/ChangePasswordFeedback.test.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { render, fireEvent, cleanup } from '@testing-library/react';
+import ChangePassword, { ChangePasswordForm } from '..';
+
+jest.mock('@availity/api-axios');
+
+afterEach(() => {
+  jest.clearAllMocks();
+  cleanup();
+});
+
+describe('ChangePasswordFeedback', () => {
+  it('renders change password feedback', async () => {
+    const me = { userId: 'twarner' };
+    const conditions = [
+      {
+        message: 'Have 8 to 16 characters',
+        passes: ({ newPassword }) => new RegExp(/^.{8,16}$/).test(newPassword),
+      },
+      {
+        message: 'Have a number',
+        passes: ({ newPassword }) => new RegExp(/\d/).test(newPassword),
+      },
+      {
+        message: 'Have an uppercase letter',
+        passes: ({ newPassword }) => new RegExp('[A-Z]').test(newPassword),
+      },
+      {
+        message: 'Have a lowercase letter',
+        passes: ({ newPassword }) => new RegExp('[a-z]').test(newPassword),
+      },
+      {
+        message: 'Have a special character',
+        passes: ({ newPassword }) => new RegExp(/[!"#$%&'()*+,./:;<=>?@[\\\]^_`{|}~-]/).test(newPassword),
+      },
+      {
+        message: 'Not contain your user Id',
+        passes: ({ newPassword }) => new RegExp(`^((?!${me.userId}).)*$`).test(newPassword),
+      },
+      {
+        message: 'Not contain spaces',
+        passes: ({ newPassword }) => new RegExp('^\\S*$').test(newPassword),
+      },
+      {
+        message: 'This one should always display the empty circle',
+        passes: () => null,
+      },
+    ];
+
+    const resource = { changePassword: jest.fn() };
+    const { getByTestId } = render(
+      <ChangePassword resource={resource} conditions={conditions}>
+        <ChangePasswordForm />
+      </ChangePassword>
+    );
+
+    const newPasswordInput = getByTestId('new-password-input');
+
+    await fireEvent.change(newPasswordInput, {
+      target: {
+        name: 'newPassword',
+        value: 'twarnerpassword1',
+      },
+    });
+
+    // Ensure appropriate circles render
+    expect(getByTestId('ok-circle-Have 8 to 16 characters')).toBeDefined();
+    expect(getByTestId('ok-circle-Have a number')).toBeDefined();
+    expect(getByTestId('cancel-circle-Have an uppercase letter')).toBeDefined();
+    expect(getByTestId('ok-circle-Have a lowercase letter')).toBeDefined();
+    expect(getByTestId('cancel-circle-Have a special character')).toBeDefined();
+    expect(getByTestId('cancel-circle-Not contain your user Id')).toBeDefined();
+    expect(getByTestId('ok-circle-Not contain spaces')).toBeDefined();
+    expect(getByTestId('circle-empty-This one should always display the empty circle')).toBeDefined();
+  });
+});

package/tests/ChangePasswordForm.test.js

@@ -0,0 +1,272 @@
+import React from 'react';
+import { render, waitFor, fireEvent, cleanup } from '@testing-library/react';
+import ChangePassword, { ChangePasswordForm, useChangePasswordContext } from '..';
+
+jest.mock('@availity/api-axios');
+
+afterEach(() => {
+  jest.clearAllMocks();
+  cleanup();
+});
+
+describe('ChangePasswordForm', () => {
+  it('renders custom header', async () => {
+    const header = 'This is a custom header';
+    const { getByText } = render(
+      <ChangePassword>
+        <ChangePasswordForm header={header} />
+      </ChangePassword>
+    );
+
+    expect(getByText('This is a custom header')).toBeDefined();
+  });
+
+  it('submits api request with new password', async () => {
+    const resource = {
+      changePassword: jest.fn().mockResolvedValue('Your password was successfully updated'),
+    };
+
+    const onHandleSubmit = jest.fn();
+
+    const { getByTestId, getByText } = render(
+      <ChangePassword resource={resource}>
+        <ChangePasswordForm onHandleSubmit={onHandleSubmit} />
+      </ChangePassword>
+    );
+
+    const currentPasswordInput = getByTestId('current-password-input');
+    const newPasswordInput = getByTestId('new-password-input');
+    const confirmNewPasswordInput = getByTestId('confirm-new-password-input');
+
+    await fireEvent.change(currentPasswordInput, {
+      target: {
+        name: 'currentPassword',
+        value: 'my_current_password',
+      },
+    });
+
+    await fireEvent.change(newPasswordInput, {
+      target: {
+        name: 'newPassword',
+        value: 'my_new_password',
+      },
+    });
+
+    await fireEvent.change(confirmNewPasswordInput, {
+      target: {
+        name: 'confirmNewPassword',
+        value: 'my_new_password',
+      },
+    });
+
+    await fireEvent.click(getByTestId('submit-btn'));
+
+    await waitFor(() => {
+      // Test that resource was called
+      expect(resource.changePassword).toHaveBeenCalledTimes(1);
+      expect(resource.changePassword.mock.calls[0][0].currentPassword).toBe('my_current_password');
+      expect(resource.changePassword.mock.calls[0][0].newPassword).toBe('my_new_password');
+
+      // Test that onHandleSubmit was called
+      expect(onHandleSubmit).toHaveBeenCalledTimes(1);
+      expect(onHandleSubmit.mock.calls[0][0].result).toBe('Your password was successfully updated');
+
+      expect(getByText('Your password was successfully changed')).toBeDefined();
+    });
+  });
+
+  it('renders custom on success message', async () => {
+    const resource = {
+      changePassword: jest.fn().mockResolvedValue('Your password was successfully updated'),
+    };
+
+    const CustomPasswordComponent = () => {
+      const { setSuccess } = useChangePasswordContext();
+
+      const onHandleSubmit = () => {
+        setSuccess('Congratulations! Your password was successfully changed.');
+      };
+
+      return <ChangePasswordForm onHandleSubmit={onHandleSubmit} />;
+    };
+
+    const { getByTestId, getByText } = render(
+      <ChangePassword resource={resource}>
+        <CustomPasswordComponent />
+      </ChangePassword>
+    );
+
+    const currentPasswordInput = getByTestId('current-password-input');
+    const newPasswordInput = getByTestId('new-password-input');
+    const confirmNewPasswordInput = getByTestId('confirm-new-password-input');
+
+    await fireEvent.change(currentPasswordInput, {
+      target: {
+        name: 'currentPassword',
+        value: 'my_current_password',
+      },
+    });
+
+    await fireEvent.change(newPasswordInput, {
+      target: {
+        name: 'newPassword',
+        value: 'my_new_password',
+      },
+    });
+
+    await fireEvent.change(confirmNewPasswordInput, {
+      target: {
+        name: 'confirmNewPassword',
+        value: 'my_new_password',
+      },
+    });
+
+    await fireEvent.click(getByTestId('submit-btn'));
+
+    await waitFor(() => {
+      // Test that resource was called
+      expect(resource.changePassword).toHaveBeenCalledTimes(1);
+      expect(resource.changePassword.mock.calls[0][0].currentPassword).toBe('my_current_password');
+      expect(resource.changePassword.mock.calls[0][0].newPassword).toBe('my_new_password');
+
+      expect(getByText('Congratulations! Your password was successfully changed.')).toBeDefined();
+    });
+  });
+
+  it('renders error message', async () => {
+    const resource = {
+      changePassword: jest.fn().mockRejectedValue('Failed to change password'),
+    };
+
+    const { getByTestId, getByText } = render(
+      <ChangePassword resource={resource}>
+        <ChangePasswordForm />
+      </ChangePassword>
+    );
+
+    const currentPasswordInput = getByTestId('current-password-input');
+    const newPasswordInput = getByTestId('new-password-input');
+    const confirmNewPasswordInput = getByTestId('confirm-new-password-input');
+
+    await fireEvent.change(currentPasswordInput, {
+      target: {
+        name: 'currentPassword',
+        value: 'my_current_password',
+      },
+    });
+
+    await fireEvent.change(newPasswordInput, {
+      target: {
+        name: 'newPassword',
+        value: 'my_new_password',
+      },
+    });
+
+    await fireEvent.change(confirmNewPasswordInput, {
+      target: {
+        name: 'confirmNewPassword',
+        value: 'my_new_password',
+      },
+    });
+
+    await fireEvent.click(getByTestId('submit-btn'));
+
+    await waitFor(() => {
+      // Test that resource was called
+      expect(resource.changePassword).toHaveBeenCalledTimes(1);
+      expect(resource.changePassword.mock.calls[0][0].currentPassword).toBe('my_current_password');
+      expect(resource.changePassword.mock.calls[0][0].newPassword).toBe('my_new_password');
+
+      expect(getByText('An error occurred changing your password')).toBeDefined();
+    });
+  });
+
+  it('renders custom error message', async () => {
+    const resource = {
+      changePassword: jest.fn().mockRejectedValue('Failed to change password'),
+    };
+
+    const CustomPasswordComponent = () => {
+      const { setError } = useChangePasswordContext();
+
+      const onError = () => {
+        setError('Whoopsies! We were unable to update your password.');
+      };
+
+      return <ChangePasswordForm onError={onError} />;
+    };
+
+    const { getByTestId, getByText } = render(
+      <ChangePassword resource={resource}>
+        <CustomPasswordComponent />
+      </ChangePassword>
+    );
+
+    const currentPasswordInput = getByTestId('current-password-input');
+    const newPasswordInput = getByTestId('new-password-input');
+    const confirmNewPasswordInput = getByTestId('confirm-new-password-input');
+
+    await fireEvent.change(currentPasswordInput, {
+      target: {
+        name: 'currentPassword',
+        value: 'my_current_password',
+      },
+    });
+
+    await fireEvent.change(newPasswordInput, {
+      target: {
+        name: 'newPassword',
+        value: 'my_new_password',
+      },
+    });
+
+    await fireEvent.change(confirmNewPasswordInput, {
+      target: {
+        name: 'confirmNewPassword',
+        value: 'my_new_password',
+      },
+    });
+
+    await fireEvent.click(getByTestId('submit-btn'));
+
+    await waitFor(() => {
+      // Test that resource was called
+      expect(resource.changePassword).toHaveBeenCalledTimes(1);
+      expect(resource.changePassword.mock.calls[0][0].currentPassword).toBe('my_current_password');
+      expect(resource.changePassword.mock.calls[0][0].newPassword).toBe('my_new_password');
+
+      expect(getByText('Whoopsies! We were unable to update your password.')).toBeDefined();
+    });
+  });
+
+  it('toggles whether passwords are visible', async () => {
+    const resource = {
+      changePassword: jest.fn(),
+    };
+
+    const { getByTestId } = render(
+      <ChangePassword resource={resource}>
+        <ChangePasswordForm />
+      </ChangePassword>
+    );
+
+    const currentPasswordInput = getByTestId('current-password-input');
+    const newPasswordInput = getByTestId('new-password-input');
+    const confirmNewPasswordInput = getByTestId('confirm-new-password-input');
+    const currentPasswordIcon = getByTestId('current-password-icon');
+    const newPasswordIcon = getByTestId('new-password-icon');
+    const confirmNewPasswordIcon = getByTestId('confirm-new-password-icon');
+
+    expect(currentPasswordInput.type).toBe('password');
+    expect(newPasswordInput.type).toBe('password');
+    expect(confirmNewPasswordInput.type).toBe('password');
+
+    await fireEvent.mouseDown(currentPasswordIcon);
+    await fireEvent.mouseDown(newPasswordIcon);
+    await fireEvent.mouseDown(confirmNewPasswordIcon);
+
+    expect(currentPasswordInput.type).toBe('text');
+    expect(newPasswordInput.type).toBe('text');
+    expect(confirmNewPasswordInput.type).toBe('text');
+  });
+});

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "@testing-library/jest-dom"],
+    "allowJs": true
+  },
+  "include": ["**/*.test.js", "**/*.test.ts", "**/*.d.ts"]
+}

package/types/ChangePassword.d.ts

@@ -0,0 +1,45 @@
+export interface Condition {
+  message: string;
+  passes: (passwords: {
+    currentPassword: string;
+    newPassword: string;
+    confirmNewPassword: string;
+    currentPasswordTouched: boolean;
+    newPasswordTouched: boolean;
+    confirmNewPasswordTouched: boolean;
+  }) => boolean;
+}
+
+export interface ChangePasswordProps {
+  resource: any;
+  schema?: object;
+  conditions?: Condition[];
+  children?: React.ReactNode;
+}
+
+export interface ChangePasswordContext {
+  loading: boolean;
+  setLoading: () => boolean;
+  error: () => boolean;
+  setError: () => boolean;
+  success: () => boolean;
+  setSuccess: () => boolean;
+  resource: any;
+  schema: object;
+  conditions: Condition[];
+  currentPasswordIconRef: React.Ref;
+  newPasswordIconRef: React.Ref;
+  confirmNewPasswordIconRef: React.Ref;
+  currentPasswordVisible: boolean;
+  setCurrentPasswordVisible: () => boolean;
+  newPasswordVisible: boolean;
+  setNewPasswordVisible: () => boolean;
+  confirmNewPasswordVisible: boolean;
+  setConfirmNewPasswordVisible: () => boolean;
+}
+
+declare function useChangePasswordContext(): ChangePasswordContext;
+
+declare const ChangePassword: React.FC<ChangePasswordProps>;
+
+export default ChangePassword;

package/types/ChangePasswordFeedback.d.ts

@@ -0,0 +1,4 @@
+declare const ChangePasswordFeedback: React.FC<>;
+
+export default ChangePasswordFeedback;
+

package/types/ChangePasswordForm.d.ts

@@ -0,0 +1,14 @@
+export interface ChangePasswordFormProps {
+  onHandleSubmit?: (arg: { result: any }) => void;
+  onError?: (arg: { error: Error }) => void;
+  additionalButtons?: React.ReactNode;
+  header?: React.ReactNode;
+  maxLength?: number;
+  currentPasswordProps?: any;
+  newPasswordProps?: any;
+  confirmNewPasswordProps?: any;
+}
+
+declare const ChangePasswordForm: React.FC<ChangePasswordFormProps>;
+
+export default ChangePasswordForm;