@brightlayer-ui/react-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
70 lines (69 loc) • 4.79 kB
JavaScript
/* eslint-disable @typescript-eslint/no-unused-expressions */
import React, { useState, useCallback } from 'react';
import CheckCircleOutlined from '@mui/icons-material/CheckCircleOutlined';
import { PasswordTextField } from '../PasswordTextField/index.js';
import { PasswordRequirements } from '../PasswordRequirements/index.js';
/**
* Component that renders a change password form with a new password and confirm password inputs.
* It includes callbacks so you can respond to changes in the inputs.
*
* @param {SetPasswordProps} props - props of setPassword component
*
* @category Component
*/
export const SetPassword = (props) => {
const { newPasswordLabel, initialNewPasswordValue = '', confirmPasswordLabel, initialConfirmPasswordValue = '', passwordRequirements, onPasswordChange, children, passwordRef, confirmRef, passwordNotMatchError, onSubmit, passwordTextFieldProps, confirmPasswordTextFieldProps, } = props;
// Local State
const [passwordInput, setPasswordInput] = useState(initialNewPasswordValue);
const [confirmInput, setConfirmInput] = useState(initialConfirmPasswordValue);
const [shouldValidateConfirmPassword, setShouldValidateConfirmPassword] = useState(initialConfirmPasswordValue ? true : false);
const [shouldValidatePassword, setShouldValidatePassword] = useState(initialNewPasswordValue ? true : false);
const onPassChange = useCallback((newPassword) => {
setPasswordInput(newPassword);
onPasswordChange?.({ password: newPassword, confirm: confirmInput });
}, [setPasswordInput, onPasswordChange, confirmInput]);
const onConfirmChange = useCallback((newConfirm) => {
setConfirmInput(newConfirm);
onPasswordChange?.({ password: passwordInput, confirm: newConfirm });
}, [setConfirmInput, onPasswordChange, passwordInput]);
const hasConfirmPasswordError = useCallback(() => shouldValidateConfirmPassword && confirmInput.length !== 0 && confirmInput !== passwordInput, [shouldValidateConfirmPassword, confirmInput, passwordInput]);
const isValidPassword = useCallback(() => {
if (passwordRequirements?.length) {
for (const requirement of passwordRequirements) {
if (!new RegExp(requirement.regex).test(passwordInput))
return false;
}
}
return true;
}, [passwordRequirements, passwordInput]);
return (React.createElement(React.Fragment, null,
children,
React.createElement(PasswordTextField, { id: "password", "data-testid": "password", name: "password", inputRef: passwordRef, label: newPasswordLabel, value: passwordInput, error: shouldValidatePassword && !isValidPassword(), sx: {
mt: { md: 4, sm: 3 },
}, ...passwordTextFieldProps, onChange: (evt) => {
// eslint-disable-next-line no-unused-expressions
passwordTextFieldProps?.onChange && passwordTextFieldProps.onChange(evt);
onPassChange(evt.target.value);
}, onKeyUp: (e) => {
if (e.key === 'Enter' && confirmRef?.current) {
confirmRef.current.focus();
}
}, onBlur: (e) => {
// eslint-disable-next-line no-unused-expressions
passwordTextFieldProps?.onBlur && passwordTextFieldProps.onBlur(e);
setShouldValidatePassword(true);
} }),
passwordRequirements && passwordRequirements.length > 0 && (React.createElement(PasswordRequirements, { sx: { mt: { xs: 2 }, mb: { xs: 2 } }, passwordText: passwordInput, passwordRequirements: passwordRequirements })),
React.createElement(PasswordTextField, { id: "confirm", "data-testid": "confirm", name: "confirm", inputRef: confirmRef, label: confirmPasswordLabel, value: confirmInput, error: hasConfirmPasswordError(), helperText: hasConfirmPasswordError() ? passwordNotMatchError : '', icon: confirmInput.length !== 0 && isValidPassword() && confirmInput === passwordInput ? (React.createElement(CheckCircleOutlined, { "data-testid": "check", color: "success" })) : undefined, ...confirmPasswordTextFieldProps, onChange: (evt) => {
// eslint-disable-next-line no-unused-expressions
confirmPasswordTextFieldProps?.onChange && confirmPasswordTextFieldProps.onChange(evt);
onConfirmChange(evt.target.value);
}, onKeyUp: (e) => {
if (e.key === 'Enter' && onSubmit)
onSubmit();
}, onBlur: (e) => {
// eslint-disable-next-line no-unused-expressions
confirmPasswordTextFieldProps?.onBlur && confirmPasswordTextFieldProps.onBlur(e);
setShouldValidateConfirmPassword(true);
} })));
};