@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
69 lines (68 loc) • 5.49 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import React, { useEffect, useState } from 'react';
import { LoginScreenBase } from './LoginScreenBase';
import { useAuthContext } from '../../contexts';
import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager';
import { useTranslation } from 'react-i18next';
const EMAIL_REGEX = /^[A-Z0-9._%+'-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
/**
* Component that renders a login screen that prompts a user to enter a username and password to login.
*
* @param {LoginScreenProps} props - Props of Login Screen component
*
* @category Component
*/
export const LoginScreen = (props) => {
var _a, _b;
const { t } = useTranslation();
const auth = useAuthContext();
const { actions, navigate, routeConfig, rememberMeDetails } = auth;
const { triggerError, errorManagerConfig } = useErrorManager();
const [isLoading, setIsLoading] = useState(false);
const errorDisplayConfig = Object.assign(Object.assign(Object.assign({}, errorManagerConfig), props.errorDisplayConfig), { onClose: () => {
var _a;
if ((_a = props.errorDisplayConfig) === null || _a === void 0 ? void 0 : _a.onClose)
props.errorDisplayConfig.onClose();
if (errorManagerConfig.onClose)
errorManagerConfig.onClose();
} });
useEffect(() => {
void actions.initiateSecurity();
}, []);
const { usernameLabel = t('bluiCommon:LABELS.EMAIL'), usernameTextFieldProps, usernameValidator = (username) => {
if (!EMAIL_REGEX.test(username)) {
return t('bluiCommon:MESSAGES.EMAIL_ENTRY_ERROR');
}
return true;
}, initialUsernameValue = (_a = rememberMeDetails === null || rememberMeDetails === void 0 ? void 0 : rememberMeDetails.email) !== null && _a !== void 0 ? _a : '', passwordLabel = t('bluiCommon:LABELS.PASSWORD'), passwordTextFieldProps, passwordValidator = (password) => {
if (password.length < 1) {
return t('bluiCommon:MESSAGES.PASSWORD_REQUIRED_ERROR');
}
return true;
}, showRememberMe = true, rememberMeLabel = t('bluiCommon:ACTIONS.REMEMBER'), rememberMeInitialValue = (_b = rememberMeDetails === null || rememberMeDetails === void 0 ? void 0 : rememberMeDetails.rememberMe) !== null && _b !== void 0 ? _b : false, onRememberMeChanged = (value) => {
var _a;
(_a = props.onRememberMeChanged) === null || _a === void 0 ? void 0 : _a.call(props, value);
}, loginButtonLabel = t('bluiCommon:ACTIONS.LOG_IN'), showForgotPassword = true, forgotPasswordLabel = t('bluiCommon:LABELS.FORGOT_PASSWORD'), onForgotPassword = () => navigate(routeConfig.FORGOT_PASSWORD), showSelfRegistration = true, selfRegisterInstructions = t('bluiCommon:LABELS.NEED_ACCOUNT'), selfRegisterButtonLabel = t('bluiCommon:ACTIONS.CREATE_ACCOUNT'), onSelfRegister = () => navigate(routeConfig.REGISTER_SELF), showContactSupport = true, contactSupportLabel = t('bluiCommon:MESSAGES.CONTACT'), onContactSupport = () => navigate(routeConfig.SUPPORT), showCyberSecurityBadge = true, projectImage, header, footer, cyberSecurityBadgeSize, } = props;
return (React.createElement(LoginScreenBase, { loading: isLoading, usernameLabel: usernameLabel, usernameTextFieldProps: usernameTextFieldProps, usernameValidator: usernameValidator, initialUsernameValue: initialUsernameValue, passwordLabel: passwordLabel, passwordTextFieldProps: passwordTextFieldProps, passwordValidator: passwordValidator, showRememberMe: showRememberMe, rememberMeLabel: rememberMeLabel, rememberMeInitialValue: rememberMeInitialValue, onRememberMeChanged: onRememberMeChanged, loginButtonLabel: loginButtonLabel, onLogin: ((username, password, rememberMe) => __awaiter(void 0, void 0, void 0, function* () {
var _c;
try {
setIsLoading(true);
yield actions.logIn(username, password, rememberMe);
yield ((_c = props.onLogin) === null || _c === void 0 ? void 0 : _c.call(props, username, password, rememberMe));
}
catch (_error) {
triggerError(_error);
}
finally {
setIsLoading(false);
}
})), showForgotPassword: showForgotPassword, forgotPasswordLabel: forgotPasswordLabel, onForgotPassword: onForgotPassword, showSelfRegistration: showSelfRegistration, selfRegisterButtonLabel: selfRegisterButtonLabel, selfRegisterInstructions: selfRegisterInstructions, onSelfRegister: onSelfRegister, showContactSupport: showContactSupport, contactSupportLabel: contactSupportLabel, onContactSupport: onContactSupport, errorDisplayConfig: errorDisplayConfig, showCyberSecurityBadge: showCyberSecurityBadge, projectImage: projectImage, header: header, footer: footer, cyberSecurityBadgeSize: cyberSecurityBadgeSize }));
};