function SignInModal()

in frontend/src/auth/SignInModal.js [6:84]
76 lines of code
2 McCabe index (conditional complexity)

function SignInModal({
    onHideModal
}) {
    const modalRef = React.useRef(null);
    useOutsideClick(modalRef, onHideModal);

    const handleAuthStateChange = (state) => {
        if (state === 'signedIn') {
            onHideModal();
        }
    }

    const MyTheme = {
        sectionHeaderContent: {
            fontSize: '2.4rem',
            fontWeight: 'bold',
        },
        sectionBody: {
            'width': '100%',
            'margin': '2rem 0',
            'display': 'flex',
            flexDirection: 'column',
            flexGrow: '1',
        },
        formField: {
            'margin': '0.5rem 0',
        },
        input: {
            'width': '100%',
        },
        a: {
            fontWeight: 'bold',
            'cursor': 'pointer',
            paddingLeft: '0.5rem',
        },
        sectionFooter: {
            'width': '100%',
        },
        sectionFooterPrimaryContent: {
            'display': 'flex',
        },
        button: {
            'display': 'flex',
            'width': '100%',
            alignItems: 'center',
            alignContent: 'center',
            justifyContent: 'center',
            fontWeight: 'bold',
            'color': 'var(--color-text-inverted)',
            'background': 'var(--color-bg-button-primary-default)',
        },
        selectInput: {
            'display': 'grid',
            gridTemplateColumns: 'auto 1fr',
            'gridGap': '1rem',
        },
        sectionFooterSecondaryContent: {
            'display': 'flex',
            'margin': '1rem 0 0 0',
        },
    }

    return (
        <div className="modal">
            <div className="modal__el modal__el--auth" ref={modalRef}>
                <div className="modal_icon" onClick={onHideModal}>
                    <img src="/close_icon.svg" />
                </div>
                <Authenticator theme={MyTheme} hideDefault={true} onStateChange={handleAuthStateChange}>
                    <SignIn/>
                    <SignUp/>
                    <ConfirmSignUp/>
                    <Greetings/>
                </Authenticator>
            </div>
            <div className="modal__overlay"></div>
        </div>
    )
}