@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
49 lines (48 loc) • 3.18 kB
JavaScript
import React from 'react';
import { StyleSheet } from 'react-native';
import { PasswordTextField, SetPassword } from '../../components/SetPassword';
import { SuccessScreenBase } from '..';
import { WorkflowCard, WorkflowCardActions, WorkflowCardBody, WorkflowCardHeader } from '../../components/WorkflowCard';
import { ErrorManager } from '../../components/Error';
const makeStyles = () => StyleSheet.create({
textInput: {
marginBottom: 24,
},
});
/**
* Base Component that renders a textField to enter current password and 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 {ChangePasswordScreenProps} props - props of Change Password Base component
*
* @category Component
*/
export const ChangePasswordScreenBase = (props) => {
var _a;
const { currentPasswordLabel, errorDisplayConfig, currentPasswordTextInputProps, currentPasswordChange, showSuccessScreen, slotProps, slots, } = props;
const styles = makeStyles();
const cardBaseProps = props.WorkflowCardBaseProps || {};
const headerProps = props.WorkflowCardHeaderProps || {};
const cardBodyProps = props.WorkflowCardBodyProps || {};
const actionsProps = props.WorkflowCardActionsProps || {};
const passwordProps = props.PasswordProps || { onPasswordChange: () => { } };
const getSuccessScreen = (_props,
// eslint-disable-next-line
SuccessScreen) => (SuccessScreen ? SuccessScreen(_props) : React.createElement(SuccessScreenBase, Object.assign({}, _props)));
const handleChange = (text) => {
currentPasswordChange === null || currentPasswordChange === void 0 ? void 0 : currentPasswordChange(text);
};
return showSuccessScreen ? (getSuccessScreen((_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.SuccessScreen) !== null && _a !== void 0 ? _a : {}, slots === null || slots === void 0 ? void 0 : slots.SuccessScreen)) : (React.createElement(WorkflowCard, Object.assign({}, cardBaseProps),
React.createElement(WorkflowCardHeader, Object.assign({}, headerProps)),
React.createElement(WorkflowCardBody, Object.assign({}, cardBodyProps),
React.createElement(ErrorManager, Object.assign({}, errorDisplayConfig),
React.createElement(SetPassword, Object.assign({}, passwordProps),
React.createElement(PasswordTextField, Object.assign({ testID: "blui-change-password-current-password-text-field", style: [styles.textInput], label: currentPasswordLabel }, currentPasswordTextInputProps, { onChangeText: (text) => {
if (currentPasswordTextInputProps === null || currentPasswordTextInputProps === void 0 ? void 0 : currentPasswordTextInputProps.onChangeText) {
currentPasswordTextInputProps.onChangeText(text);
}
handleChange(text);
}, returnKeyType: "done" // Show "next" button on keyboard
}))))),
React.createElement(WorkflowCardActions, Object.assign({ totalSteps: 0 }, actionsProps))));
};