Skip to main content

useChangePasswordContext

If you are using a function component, you can subscribe to the change password context by using this hook.

Example​

import React from 'react';
import { useChangePasswordContext } from '@availity/change-password';

const ChangePasswordComponent = () => {
  const {
    loading,
    setLoading,
    error,
    setError,
    success,
    setSuccess,
    submitted,
    setSubmitted,
    resource,
    schema,
    conditions,
    currentPasswordIconRef,
    newPasswordIconRef,
    confirmNewPasswordIconRef,
    currentPasswordVisible,
    setCurrentPasswordVisible,
    newPasswordVisible,
    setNewPasswordVisible,
    confirmNewPasswordVisible,
    setConfirmNewPasswordVisible,
  } = useChangePasswordContext();
};

Context Properties​

loading: boolean​

Whether or not the ChangePassword component is in a loading state

setLoading: () => void​

Toggle whether or not the ChangePassword component is in a loading state

error: any​

The error state of the ChangePassword component. The error will appear in a red reactstrap <Alert/>

setError: () => void​

Set the error state of the ChangePassword component

success: any​

The success state of the ChangePassword component. The success will appear in a green reactstrap <Alert/>

setSuccess: () => void​

Set the success state of the ChangePassword component

submitted: boolean​

Whether the ChangePasswordForm has been submitted.

setSubmitted: () => void​

Set whether the ChangePasswordForm has been submitted

resource: AvApi | AvMicroserviceApi​

The resource used to change the user's password. The changePassword method will be called on the resource.

schema: object​

The yup schema used to validate the inputs in the ChangePassword Form. The names of the inputs in the form are "currentPassword", "newPassword", and "confirmNewPassword". These names should correspond to the keys in your yup schema.

conditions?: { message: string, passes: func }[]​

The conditions that must be satisified in order for a password change to be submitted. Note, these are not used to validate the state of the form. They are used to give the user feedback as they type to let them know if their password is valid. The passes func is passed an object containing the user's currentPassword, newPassword, and confirmNewPassword as well as whether the input fields have been touched: currentPasswordTouched, newPasswordTouched, and confirmNewPasswordTouched, as well as whether or not the form has been submitted, submitted. If the passes func returns true, a green checkmark icon will be displayed. If the passes func returns false, a red checkmark icon will be displayed. If the passes func returns anything else, an empty circle will be displayed. An example of a condition to verify that a password contains an uppercase letter might be:

{
  message: 'Have an uppercase letter',
  passes: ({ newPassword, newPasswordTouched, submitted }) => {
    if (new RegExp('[A-Z]').test(newPassword)) {
      if (newPasswordTouched) return true;
      return null;
    }
    if (submitted) return false;
    return null;
  }
}

currentPasswordIconRef React.ReactRef​

The ref to the current password icon

newPasswordIconRef React.ReactRef​

The ref to the new password icon

confirmNewPasswordIconRef React.ReactRef​

The ref to to the confirm new password icon

currentPasswordVisible boolean​

Whether the current password input field's value is visible. When visible, the input field is of type "text". When not visible, the input field is of type "password"

setCurrentPasswordVisible () => void​

Set whether the current password input field's value is visible

newPasswordVisible boolean​

Whether the new password input field's value is visible. When visible, the input field is of type "text". When not visible, the input field is of type "password"

setNewPasswordVisible () => void​

Set whether the new password input field's value is visible

confirmNewPasswordVisible boolean​

Whether the confirm new password input field's value is visible. When visible, the input field is of type "text". When not visible, the input field is of type "password"

setConfirmNewPasswordVisible () => void​

Set whether the confirm new password input field's value is visible