@brightlayer-ui/react-auth-workflow/screens/OktaRedirectLoginScreen/OktaRedirectLoginScreen.js

Re-usable workflow components for Authentication and Registration within Eaton applications.

import React, { useEffect, useState } from 'react';
import { useOktaAuth } from '@okta/okta-react';
import { useTranslation } from 'react-i18next';
import { OktaRedirectLoginScreenBase } from './OktaRedirectLoginScreenBase.js';
import { useOktaAuthContext } from '../../contexts/index.js';
/**
 * Component that renders an okta login screen.
 *
 * @param {OktaRedirectLoginScreenProps} props - props of OktaRedirectLoginScreen
 *
 * @category Component
 */
export const OktaRedirectLoginScreen = (props) => {
    const { authState, oktaAuth } = useOktaAuth();
    const [isLoading, setIsLoading] = useState(!authState);
    const { t } = useTranslation();
    const { navigate, routeConfig } = useOktaAuthContext();
    const { loginButtonLabel = t('bluiCommon:ACTIONS.OKTA_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, ...otherProps } = props;
    useEffect(() => {
        setIsLoading(!authState);
    }, [authState]);
    const handleOnLogin = async () => {
        try {
            setIsLoading(true);
            await oktaAuth.signInWithRedirect();
            await props.onLogin?.();
        }
        catch (_error) {
            // eslint-disable-next-line no-console
            console.log(_error);
        }
        finally {
            setIsLoading(false);
        }
    };
    return (React.createElement(OktaRedirectLoginScreenBase, { loading: isLoading, loginButtonLabel: loginButtonLabel, onLogin: handleOnLogin, showForgotPassword: showForgotPassword, forgotPasswordLabel: forgotPasswordLabel, onForgotPassword: onForgotPassword, showSelfRegistration: showSelfRegistration, selfRegisterButtonLabel: selfRegisterButtonLabel, selfRegisterInstructions: selfRegisterInstructions, onSelfRegister: onSelfRegister, showContactSupport: showContactSupport, contactSupportLabel: contactSupportLabel, onContactSupport: onContactSupport, showCyberSecurityBadge: showCyberSecurityBadge, projectImage: projectImage, header: header, footer: footer, ...otherProps }));
};