@state-less/leap-frontend/dist/components/LoggedInGoogleButton.js

A collection of open source fullstack services powered by React Server

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Avatar, Button, useMediaQuery, useTheme, IconButton, } from '@mui/material';
import { authContext } from '@state-less/react-client';
import { useContext, useState } from 'react';
import GoogleLogin from 'react-google-login';
import { Google as GoogleIcon } from '@mui/icons-material';
import { stateContext } from '../provider/StateProvider.js';
import { Menu, MenuItem } from '@mui/material';
const logError = () => { };
const isGoogleLoginResponse = (val) => {
    return val?.tokenId !== undefined && val.accessToken !== undefined;
};
export const LoggedInGoogleButton = () => {
    const { session, logout } = useContext(authContext);
    const { state } = useContext(stateContext);
    const [anchorEl, setAnchorEl] = useState(null);
    const open = Boolean(anchorEl);
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };
    if (session.strategy !== 'google') {
        return null;
    }
    const decoded = session.strategies?.google?.decoded;
    const theme = useTheme();
    const lessThanSmall = useMediaQuery(theme.breakpoints.down('sm'));
    const MDButton = lessThanSmall ? IconButton : Button;
    return (_jsxs(_Fragment, { children: [_jsxs(MDButton, { id: "basic-button", "aria-controls": open ? 'basic-menu' : undefined, "aria-haspopup": "true", "aria-expanded": open ? 'true' : undefined, onClick: handleClick, color: state.animatedBackground ? 'info' : 'info', children: [_jsx(Avatar, { src: decoded?.picture, sx: { width: 24, height: 24, mr: 1 } }), !lessThanSmall && decoded?.name] }), _jsx(Menu, { id: "basic-menu", anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: {
                    'aria-labelledby': 'basic-button',
                }, children: _jsx(MenuItem, { onClick: logout, children: "Logout" }) })] }));
};
export const GoogleLoginButton = ({ clientId }) => {
    const { session, authenticate } = useContext(authContext);
    const { state } = useContext(stateContext);
    return session?.strategy === 'google' ? (_jsx(LoggedInGoogleButton, {})) : (_jsx(GoogleLogin, { clientId: clientId, buttonText: "Login", onSuccess: (response) => {
            if (!isGoogleLoginResponse(response)) {
                return;
            }
            const { tokenId, accessToken } = response;
            authenticate({
                strategy: 'google',
                data: { accessToken, idToken: tokenId },
            });
        }, render: (props) => {
            return (_jsxs(Button, { color: state.animatedBackground ? 'info' : 'info', style: {
                    backgroundColor: '#001f3f',
                    backgroundImage: 'linear-gradient(to bottom, #001f3f, #0F9D58)',
                    color: '#fff',
                    fontSize: '14px',
                }, ...props, children: [_jsx(GoogleIcon, { sx: { mr: 1 } }), "Login"] }));
        }, onFailure: logError, cookiePolicy: 'single_host_origin' }));
};