@brightlayer-ui/react-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
88 lines (87 loc) • 5.88 kB
JavaScript
import React from 'react';
import { WorkflowCard } from '../../components/WorkflowCard/index.js';
import { WorkflowCardBody } from '../../components/WorkflowCard/WorkflowCardBody.js';
import { Box, Button, Typography, unstable_composeClasses as composeClasses } from '@mui/material';
import { LinkStyles } from '../../styles/index.js';
import cyberSecurityBadge from '../../assets/images/cybersecurity_certified.png';
import { getOktaRedirectLoginScreenUtilityClass } from './utilityClasses.js';
const useUtilityClasses = (ownerState) => {
const { classes } = ownerState;
const slots = {
root: ['root'],
projectImageWrapper: ['projectImageWrapper'],
loginButtonWrapper: ['loginButtonWrapper'],
loginButton: ['loginButton'],
forgotPasswordWrapper: ['forgotPasswordWrapper'],
forgotPasswordLabel: ['forgotPasswordLabel'],
selfRegisterWrapper: ['selfRegisterWrapper'],
selfRegisterInstructionLabel: ['selfRegisterInstructionLabel'],
selfRegisterLabel: ['selfRegisterLabel'],
contactSupportWrapper: ['contactSupportWrapper'],
contactSupportLabel: ['contactSupportLabel'],
cyberSecurityBadgeWrapper: ['cyberSecurityBadgeWrapper'],
cyberSecurityBadge: ['cyberSecurityBadge'],
};
return composeClasses(slots, getOktaRedirectLoginScreenUtilityClass, classes);
};
/**
* Component that renders an okta login screen.
*
* @param {OktaRedirectLoginScreenProps} props - props of OktaRedirectLoginScreen base component
*
* @category Component
*/
export const OktaRedirectLoginScreenBase = (props) => {
const defaultClasses = useUtilityClasses(props);
const { header, projectImage, loginButtonLabel, onLogin, showForgotPassword, forgotPasswordLabel, onForgotPassword, showContactSupport, showCyberSecurityBadge, showSelfRegistration, selfRegisterButtonLabel, selfRegisterInstructions, onSelfRegister, contactSupportLabel, footer, onContactSupport, ...otherProps } = props;
const handleOnLogin = async () => {
if (onLogin)
await onLogin();
};
const handleForgotPassword = () => {
if (onForgotPassword)
onForgotPassword();
};
const handleSelfRegister = () => {
if (onSelfRegister)
onSelfRegister();
};
const handleContactSupport = () => {
if (onContactSupport)
onContactSupport();
};
return (React.createElement(WorkflowCard, { className: defaultClasses.root, "data-testid": defaultClasses.root, ...otherProps },
React.createElement(WorkflowCardBody, { sx: {
py: { xs: 4, sm: 4, md: 4 },
px: { xs: 4, sm: 8, md: 8 },
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-around',
} },
header,
React.createElement(Box, { sx: { display: 'flex', maxWidth: '100%', mb: 6 }, className: defaultClasses.projectImageWrapper, "data-testid": defaultClasses.projectImageWrapper }, projectImage),
React.createElement(Box, { sx: {
my: 5,
}, className: defaultClasses.loginButtonWrapper, "data-testid": defaultClasses.loginButtonWrapper },
React.createElement(Button, { className: defaultClasses.loginButton, "data-testid": defaultClasses.loginButton, onClick: () => {
void handleOnLogin();
}, variant: "contained", color: "primary", sx: {
width: '100%',
} }, loginButtonLabel || 'Sign In With Okta')),
showForgotPassword && (React.createElement(Box, { sx: { display: 'flex', justifyContent: 'center', textAlign: 'center' }, className: defaultClasses.forgotPasswordWrapper, "data-testid": defaultClasses.forgotPasswordWrapper },
React.createElement(Typography, { variant: "body2", sx: LinkStyles, onClick: handleForgotPassword, className: defaultClasses.forgotPasswordLabel, "data-testid": defaultClasses.forgotPasswordLabel }, forgotPasswordLabel || 'Forgot your password?'))),
showSelfRegistration && (React.createElement(Box, { sx: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
textAlign: 'center',
}, className: defaultClasses.selfRegisterWrapper, "data-testid": defaultClasses.selfRegisterWrapper },
React.createElement(Typography, { variant: "body2", className: defaultClasses.selfRegisterInstructionLabel, "data-testid": defaultClasses.selfRegisterInstructionLabel }, selfRegisterInstructions || 'Need an account?'),
React.createElement(Typography, { variant: "body2", sx: LinkStyles, onClick: handleSelfRegister, className: defaultClasses.selfRegisterLabel, "data-testid": defaultClasses.selfRegisterLabel }, selfRegisterButtonLabel || 'Register now!'))),
showContactSupport && (React.createElement(Box, { sx: { display: 'flex', justifyContent: 'center', textAlign: 'center' }, className: defaultClasses.contactSupportWrapper, "data-testid": defaultClasses.contactSupportWrapper },
React.createElement(Typography, { variant: "body2", sx: LinkStyles, onClick: handleContactSupport }, contactSupportLabel || 'Contact Support'))),
footer && React.createElement(Box, { sx: { display: 'flex', justifyContent: 'center' } }, footer),
showCyberSecurityBadge && (React.createElement(Box, { sx: { display: 'flex', justifyContent: 'center' }, className: defaultClasses.cyberSecurityBadgeWrapper, "data-testid": defaultClasses.cyberSecurityBadgeWrapper },
React.createElement("img", { src: cyberSecurityBadge, alt: "Cyber Security Badge", style: { width: '100px' } }))))));
};