@nyris/nyris-webapp 0.3.41 → 0.3.43

package/src/components/FooterMobile.tsx

@@ -6,11 +6,17 @@ import { ReactComponent as Home } from 'common/assets/icons/home.svg';
 import { NavLink, useHistory } from 'react-router-dom';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { ReactComponent as IconInfo } from 'common/assets/icons/info-tooltip.svg';
+import { ReactComponent as IconLogout } from 'common/assets/icons/logout.svg';
+import { ReactComponent as CloseIcon } from 'common/assets/icons/close.svg';
+import { ReactComponent as PoweredByNyrisImage } from 'common/assets/images/powered_by_nyris.svg';
+
 import {
   reset,
   setImageCaptureHelpModal,
   setPreFilter,
 } from 'Store/search/Search';
+import { useAuth0 } from '@auth0/auth0-react';
+import DefaultModal from './modal/DefaultModal';
 
 interface Props {
   onLoadingMobile?: any;
@@ -24,8 +30,99 @@ function FooterMobile(props: Props): JSX.Element {
   } = useAppSelector(state => state);
   const dispatch = useAppDispatch();
 
+  const { settings } = useAppSelector(state => state);
+  const { user, isAuthenticated, logout } = useAuth0();
+  const auth0 = settings.auth0;
+
+  const [showLogoutModal, setShowLogoutModal] = useState(false);
+
   return (
     <>
+      <DefaultModal
+        openModal={showLogoutModal}
+        handleClose={() => {
+          setShowLogoutModal(false);
+        }}
+      >
+        <div
+          style={{
+            backgroundColor: 'white',
+            width: '360px',
+            padding: '24px',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+            }}
+            onClick={() => setShowLogoutModal(false)}
+          >
+            <CloseIcon
+              width={'16px'}
+              height={'16px'}
+              fontSize={'16px'}
+              color="black"
+            />
+          </div>
+          <p style={{ fontSize: '36px', fontWeight: 'bold', color: '#2B2C46' }}>
+            Logout
+          </p>
+          <p style={{ fontSize: '13px', color: '#2B2C46', paddingTop: '16px' }}>
+            Are you sure you want to log out? Your session will be securely
+            closed.
+          </p>
+          <p style={{ fontSize: '13px', color: '#2B2C46', paddingTop: '16px' }}>
+            Email
+          </p>
+          <div
+            style={{
+              backgroundColor: '#FAFAFA',
+              height: '32px',
+              paddingLeft: '16px',
+              paddingRight: '16px',
+              marginTop: '8px',
+            }}
+          >
+            {user?.email}
+          </div>
+          <div style={{ display: 'flex', width: '100%', marginTop: '16px' }}>
+            <div
+              style={{
+                width: '50%',
+                backgroundColor: '#2B2C46',
+                color: 'white',
+                padding: '16px',
+              }}
+              onClick={() => {
+                logout({
+                  logoutParams: { returnTo: window.location.origin },
+                });
+              }}
+            >
+              Confirm log out
+            </div>
+          </div>
+        </div>
+      </DefaultModal>
+      {history.location?.pathname === '/' && settings.showPoweredByNyris && (
+        <div
+          style={{
+            backgroundColor: '#fff',
+            display: 'flex',
+            justifyContent: 'center',
+            padding: '16px 0px 16px 0px',
+          }}
+        >
+          <PoweredByNyrisImage
+            style={{ cursor: 'pointer' }}
+            onClick={() => {
+              window.open('https://www.nyris.io', '_blank');
+            }}
+            color="#AAABB5"
+          />
+        </div>
+      )}
       <Box
         className="box-footer-mobile"
         display={'flex'}
@@ -33,7 +130,7 @@ function FooterMobile(props: Props): JSX.Element {
         alignItems={'center'}
         height={'100%'}
         justifyContent={'space-between'}
-        style={{ paddingLeft: '40px', paddingRight: '40px', height: '64px' }}
+        style={{ paddingLeft: '16px', paddingRight: '16px', height: '64px' }}
       >
         <NavLink
           style={{
@@ -76,29 +173,45 @@ function FooterMobile(props: Props): JSX.Element {
             </Button>
           </Box>
         )}
-        {history.location?.pathname !== '/' && (
-          <div
-            style={{
-              width: '48px',
-              height: '48px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              borderRadius: '100%',
-              backgroundColor: imageCaptureHelpModal ? `#E0E0E0` : '',
-            }}
-            onClick={() => {
-              dispatch(setImageCaptureHelpModal(!imageCaptureHelpModal));
-            }}
-          >
-            <IconInfo
-              fontSize={24}
-              width={24}
-              height={24}
-              color={imageCaptureHelpModal ? '#2B2C46' : '#AAABB5'}
-            />
-          </div>
-        )}
+        <div style={{ display: 'flex', gap: '24px' }}>
+          {history.location?.pathname !== '/' && (
+            <div
+              style={{
+                width: '48px',
+                height: '48px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: '100%',
+                backgroundColor: imageCaptureHelpModal ? `#E0E0E0` : '',
+              }}
+              onClick={() => {
+                dispatch(setImageCaptureHelpModal(!imageCaptureHelpModal));
+              }}
+            >
+              <IconInfo
+                fontSize={24}
+                width={24}
+                height={24}
+                color={imageCaptureHelpModal ? '#2B2C46' : '#AAABB5'}
+              />
+            </div>
+          )}
+          {auth0.enabled && isAuthenticated && (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+              onClick={() => {
+                setShowLogoutModal(true);
+              }}
+            >
+              <IconLogout fontSize={24} width={24} height={24} />
+            </div>
+          )}
+        </div>
       </Box>
       <Box className="box-screenshot-camera">
         <CameraCustom

package/src/components/Header.tsx

@@ -1,13 +1,65 @@
-import { Box } from '@material-ui/core';
+import { Box, Menu, MenuProps, withStyles } from '@material-ui/core';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import './common.scss';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { reset, setPreFilter } from 'Store/search/Search';
+import { useAuth0 } from '@auth0/auth0-react';
+import { ReactComponent as AvatarIcon } from 'common/assets/icons/avatar.svg';
+import MenuItem from '@material-ui/core/MenuItem';
 
 function Header(): JSX.Element {
   const dispatch = useAppDispatch();
   const { settings } = useAppSelector(state => state);
+  const { user, isAuthenticated, logout } = useAuth0();
+  const auth0 = settings.auth0;
+
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleClick = (event: any) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const StyledMenu = withStyles({
+    root: {},
+    paper: {
+      border: '0px',
+      boxShadow: '0px 0px 8px 0px rgba(0, 0, 0, 0.20)',
+      top: '58px !important',
+      borderRadius: '0px !important',
+    },
+  })((props: MenuProps) => (
+    <Menu
+      elevation={0}
+      getContentAnchorEl={null}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'center',
+      }}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'center',
+      }}
+      {...props}
+    />
+  ));
+
+  const StyledMenuItem = withStyles(theme => ({
+    root: {
+      '&:focus': {
+        backgroundColor: theme.palette.primary.main,
+        '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
+          color: theme.palette.common.white,
+        },
+      },
+      padding: '0px',
+    },
+  }))(MenuItem);
+
   return (
     <Box className="box-content" display={'flex'}>
       <NavLink
@@ -28,6 +80,73 @@ function Header(): JSX.Element {
           }}
         />
       </NavLink>
+
+      {auth0.enabled && isAuthenticated && (
+        <div style={{ position: 'relative' }}>
+          <div
+            style={{
+              display: 'flex',
+              columnGap: '16px',
+              alignItems: 'center',
+              paddingRight: '24px',
+              cursor: 'pointer',
+            }}
+            aria-controls="simple-menu"
+            aria-haspopup="true"
+            onClick={handleClick}
+          >
+            <p style={{ color: '#2B2C46' }}>{user?.email}</p>
+            <AvatarIcon />
+          </div>
+          <StyledMenu
+            id="simple-menu"
+            anchorEl={anchorEl}
+            keepMounted
+            open={Boolean(anchorEl)}
+            onClose={handleClose}
+          >
+            <StyledMenuItem>
+              <div
+                style={{
+                  display: 'flex',
+                  width: '152px',
+                  paddingLeft: '8px',
+                  paddingRight: '8px',
+                  flexDirection: 'column',
+                  alignItems: 'flex-start',
+                  gap: '8px',
+                  boxShadow: '0px 0px 8px 0px rgba(0, 0, 0, 0.20)',
+                  // position: 'absolute',
+                  // zIndex: 99,
+                  // top: '50px',
+                  backgroundColor: '#fff',
+                }}
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    width: '75px',
+                    height: '24px',
+                    padding: '4px 8px',
+                    alignItems: 'center',
+                    backgroundColor: '#2B2C46',
+                    color: '#fff',
+                    fontSize: '10px',
+                    cursor: 'pointer',
+                  }}
+                  onClick={() => {
+                    logout({
+                      logoutParams: { returnTo: window.location.origin },
+                    });
+                  }}
+                >
+                  Sign out
+                </div>
+              </div>
+            </StyledMenuItem>
+          </StyledMenu>
+        </div>
+      )}
     </Box>
   );
 }