@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
140 lines (139 loc) • 8.08 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());
});
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { WorkflowCard } from '../../components/WorkflowCard';
import { WorkflowCardBody } from '../../components/WorkflowCard/WorkflowCardBody';
import { Image, View, StyleSheet } from 'react-native';
import { Button, Text } from 'react-native-paper';
import { useExtendedTheme } from '@brightlayer-ui/react-native-themes';
import { useScreenDimensions } from '../../hooks/useScreenDimensions';
const makeStyles = (isTablet) => StyleSheet.create({
container: {
display: 'flex',
flex: 1,
flexDirection: 'column',
justifyContent: 'space-around',
},
projectImageWrapper: {
display: 'flex',
maxWidth: '100%',
marginBottom: isTablet ? 24 : 16,
},
loginButtonWrapper: {
display: 'flex',
justifyContent: 'flex-end',
flexDirection: 'row',
marginTop: isTablet ? 72 : 60,
marginBottom: isTablet ? 80 : 72,
},
loginButton: {
width: '100%',
},
bottomBodyWrapper: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-around',
flex: 1,
},
forgotPasswordWrapper: {
display: 'flex',
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
marginBottom: isTablet ? 32 : 24,
},
selfRegisterWrapper: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
marginTop: 16,
alignContent: 'center',
marginBottom: isTablet ? 32 : 24,
},
contactSupportWrapper: {
display: 'flex',
justifyContent: 'center',
marginTop: 8,
alignContent: 'center',
alignItems: 'center',
marginBottom: isTablet ? 52 : 24,
},
footerWrapper: { display: 'flex', justifyContent: 'center' },
cyberSecurityBadgeWrapper: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
marginTop: 8,
},
});
/**
* Component that renders a login screen that prompts user to login via Okta.
*
* @param {OktaLoginScreenProps} props - Props of Login Screen component
*
* @category Component
*/
export const OktaRedirectLoginScreenBase = (props) => {
const { loginButtonLabel, onLogin, showForgotPassword, forgotPasswordLabel, onForgotPassword, showSelfRegistration, selfRegisterButtonLabel, selfRegisterInstructions, onSelfRegister, showContactSupport, contactSupportLabel, onContactSupport, showCyberSecurityBadge, cyberSecurityBadgeSize, projectImage, header, footer } = props, otherProps = __rest(props, ["loginButtonLabel", "onLogin", "showForgotPassword", "forgotPasswordLabel", "onForgotPassword", "showSelfRegistration", "selfRegisterButtonLabel", "selfRegisterInstructions", "onSelfRegister", "showContactSupport", "contactSupportLabel", "onContactSupport", "showCyberSecurityBadge", "cyberSecurityBadgeSize", "projectImage", "header", "footer"]);
const theme = useExtendedTheme();
const { isTablet } = useScreenDimensions();
const defaultStyles = makeStyles(isTablet);
const handleSelfRegister = () => {
if (onSelfRegister)
onSelfRegister();
};
const handleContactSupport = () => {
if (onContactSupport)
onContactSupport();
};
const handleLoginWrapper = () => __awaiter(void 0, void 0, void 0, function* () {
if (onLogin)
yield onLogin();
});
// Synchronous wrapper for the asynchronous handleLogin function
const handleLogin = () => {
handleLoginWrapper().catch((error) => {
console.error('Login failed:', error);
});
};
const handleForgotPassword = () => {
if (onForgotPassword)
onForgotPassword();
};
return (React.createElement(WorkflowCard, Object.assign({ testID: "blui-okta-login-workflow-card" }, otherProps),
React.createElement(WorkflowCardBody, null,
header,
React.createElement(View, { style: defaultStyles.projectImageWrapper, testID: "blui-okta-login-project-image-wrapper" }, projectImage),
React.createElement(View, { style: [defaultStyles.loginButtonWrapper, { width: '100%' }], testID: 'blui-okta-login-login-button-wrapper' },
React.createElement(Button, { testID: 'blui-okta-login-login-button', onPress: handleLogin, disabled: !onLogin, mode: "contained", style: defaultStyles.loginButton }, loginButtonLabel !== null && loginButtonLabel !== void 0 ? loginButtonLabel : 'Sign In with Okta')),
React.createElement(View, { style: defaultStyles.bottomBodyWrapper, testID: 'blui-okta-login-bottom-body-wrapper' },
showForgotPassword && (React.createElement(View, { style: defaultStyles.forgotPasswordWrapper, testID: 'blui-okta-login-forgot-password-wrapper' },
React.createElement(Text, { variant: "labelLarge", style: { color: theme.colors.primary }, onPress: handleForgotPassword, testID: 'blui-login-forgot-password-label' }, forgotPasswordLabel !== null && forgotPasswordLabel !== void 0 ? forgotPasswordLabel : 'Forgot your password?'))),
showSelfRegistration && (React.createElement(View, { style: defaultStyles.selfRegisterWrapper, testID: 'blui-okta-login-self-register-wrapper' },
React.createElement(Text, { variant: "bodyMedium", testID: 'blui-okta-login-self-register-instruction-label' }, selfRegisterInstructions !== null && selfRegisterInstructions !== void 0 ? selfRegisterInstructions : 'Need an account?'),
React.createElement(Text, { variant: "labelLarge", style: { color: theme.colors.primary }, onPress: handleSelfRegister, testID: 'blui-okta-login-self-register-label' }, selfRegisterButtonLabel !== null && selfRegisterButtonLabel !== void 0 ? selfRegisterButtonLabel : 'Register now!'))),
showContactSupport && (React.createElement(View, { style: defaultStyles.contactSupportWrapper, testID: 'blui-okta-login-contact-support-wrapper' },
React.createElement(Text, { variant: "labelLarge", style: { color: theme.colors.primary }, onPress: handleContactSupport, testID: 'blui-okta-login-contact-support-label' }, contactSupportLabel !== null && contactSupportLabel !== void 0 ? contactSupportLabel : 'Contact Support'))),
React.createElement(View, { testID: 'blui-okta-login-footer', style: defaultStyles.footerWrapper }, footer),
showCyberSecurityBadge && (React.createElement(View, { style: defaultStyles.cyberSecurityBadgeWrapper, testID: 'blui-okta-login-cyber-security-badge-wrapper' },
React.createElement(Image, { testID: 'blui-okta-login-cyber-security-badge-image', style: cyberSecurityBadgeSize, resizeMode: "contain", source: require('../../assets/images/cybersecurity_certified.png') })))))));
};