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