@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
77 lines (76 loc) • 5.71 kB
JavaScript
import React, { useState, useCallback, useEffect } from 'react';
import PasswordRequirements from './PasswordRequirements';
import { HelperText } from 'react-native-paper';
import { useScreenDimensions } from '../../hooks/useScreenDimensions';
import { StyleSheet } from 'react-native';
import { defaultPasswordRequirements } from '../../constants';
import { useTranslation } from 'react-i18next';
import { PasswordTextField } from './PasswordTextField';
import { useExtendedTheme } from '@brightlayer-ui/react-native-themes';
const makeStyles = (isTablet, theme) => StyleSheet.create({
passwordRequirementContainer: {
marginTop: 8,
marginBottom: isTablet ? 32 : 24,
},
errorHelperText: { marginBottom: 8 },
successHelperText: { marginBottom: 8, color: theme.colors.success },
});
/**
* 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 = 'Password', initialNewPasswordValue = '', confirmPasswordLabel = 'Confirm', initialConfirmPasswordValue = '', passwordRequirements, onPasswordChange, children, passwordRef, confirmRef, passwordNotMatchError, onSubmit, passwordTextFieldProps, confirmPasswordTextFieldProps, } = props;
const { t } = useTranslation();
// Local State
const [passwordInput, setPasswordInput] = useState(initialNewPasswordValue);
const [confirmInput, setConfirmInput] = useState(initialConfirmPasswordValue);
const { isTablet } = useScreenDimensions();
const theme = useExtendedTheme();
const defaultStyle = makeStyles(isTablet, theme);
useEffect(() => {
setPasswordInput(initialNewPasswordValue);
setConfirmInput(initialConfirmPasswordValue);
}, [initialNewPasswordValue, initialConfirmPasswordValue]);
const onPassChange = useCallback((newPassword) => {
setPasswordInput(newPassword);
onPasswordChange === null || onPasswordChange === void 0 ? void 0 : onPasswordChange({ password: newPassword, confirm: confirmInput });
}, [setPasswordInput, onPasswordChange, confirmInput]);
const onConfirmChange = useCallback((newConfirm) => {
setConfirmInput(newConfirm);
onPasswordChange === null || onPasswordChange === void 0 ? void 0 : onPasswordChange({ password: passwordInput, confirm: newConfirm });
}, [setConfirmInput, onPasswordChange, passwordInput]);
const hasConfirmPasswordError = useCallback(() => passwordInput.length !== 0 && confirmInput.length !== 0 && confirmInput !== passwordInput, [confirmInput, passwordInput]);
const isValidPassword = useCallback(() => {
const requirementsToCheck = passwordRequirements !== null && passwordRequirements !== void 0 ? passwordRequirements : defaultPasswordRequirements(t);
for (const req of requirementsToCheck) {
if (!new RegExp(req.regex).test(passwordInput))
return false;
}
return true;
}, [passwordRequirements, t, passwordInput]);
return (React.createElement(React.Fragment, null,
children,
React.createElement(PasswordTextField, Object.assign({ testID: "blui-set-password-password-text-field", label: newPasswordLabel, value: passwordInput, ref: passwordRef, error: passwordInput !== '' && !isValidPassword() }, passwordTextFieldProps, { onChangeText: (text) => {
var _a;
(_a = passwordTextFieldProps === null || passwordTextFieldProps === void 0 ? void 0 : passwordTextFieldProps.onChangeText) === null || _a === void 0 ? void 0 : _a.call(passwordTextFieldProps, text);
onPassChange(text);
}, returnKeyType: "next" // Show "next" button on keyboard
, onSubmitEditing: () => { var _a; return (_a = confirmRef === null || confirmRef === void 0 ? void 0 : confirmRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } })),
React.createElement(PasswordRequirements, { passwordText: passwordInput, passwordRequirements: passwordRequirements, style: defaultStyle.passwordRequirementContainer }),
React.createElement(PasswordTextField, Object.assign({ testID: "blui-set-password-confirm-password-text-field", label: confirmPasswordLabel, value: confirmInput, ref: confirmRef, error: hasConfirmPasswordError() }, confirmPasswordTextFieldProps, { onChangeText: (text) => {
var _a;
(_a = confirmPasswordTextFieldProps === null || confirmPasswordTextFieldProps === void 0 ? void 0 : confirmPasswordTextFieldProps.onChangeText) === null || _a === void 0 ? void 0 : _a.call(confirmPasswordTextFieldProps, text);
onConfirmChange(text);
}, returnKeyType: "done" // Show "next" button on keyboard
, onSubmitEditing: () => {
if (!hasConfirmPasswordError() && isValidPassword() && onSubmit)
onSubmit();
} })),
hasConfirmPasswordError() && (React.createElement(HelperText, { type: "error", visible: hasConfirmPasswordError(), style: defaultStyle.errorHelperText }, passwordNotMatchError !== null && passwordNotMatchError !== void 0 ? passwordNotMatchError : t('bluiCommon:FORMS.PASS_MATCH_ERROR'))),
!hasConfirmPasswordError() && confirmInput !== '' && confirmInput === passwordInput && (React.createElement(HelperText, { type: "info", visible: !hasConfirmPasswordError() && confirmInput !== '' && confirmInput === passwordInput, style: defaultStyle.successHelperText }, t('bluiCommon:FORMS.PASS_MATCH')))));
};