Pr/invalid session

packages/apps/admin/src/components/Admin/Admin.js

@@ -14,6 +14,7 @@ import EntitiesRoute from '../../routes/entities'
 import Settings from '../../routes/settings'
 import ErrorView from '../ErrorView'
 import Header from '../Header'
+import InvalidSession from '../InvalidSession'
 import Navigation from '../Navigation'
 import navigationStrategy from './../../routes/entities/utils/navigationStrategy'
 import {burgerMenuStyles, StyledContent, StyledMenu, StyledWrapper} from './StyledComponents'
@@ -105,16 +106,21 @@ const Admin = ({
   )
 
   return (
-    <LoadMask required={[history !== null]}>
-      <Router history={history || {}}>
-        <GlobalStyles />
-        <notification.Notifications navigationStrategy={navigationStrategy()} />
-        <StyledWrapper width={useWindowWidth()}>
-          <Header />
-          {adminAllowedContent || adminForbiddenContent}
-        </StyledWrapper>
-      </Router>
-    </LoadMask>
+    <>
+      <errorLogging.ErrorBoundary>
+        <InvalidSession />
+      </errorLogging.ErrorBoundary>
+      <LoadMask required={[history !== null]}>
+        <Router history={history || {}}>
+          <GlobalStyles />
+          <notification.Notifications navigationStrategy={navigationStrategy()} />
+          <StyledWrapper width={useWindowWidth()}>
+            <Header />
+            {adminAllowedContent || adminForbiddenContent}
+          </StyledWrapper>
+        </Router>
+      </LoadMask>
+    </>
   )
 }
 
@@ -128,7 +134,7 @@ Admin.propTypes = {
   initializeNavigation: PropTypes.func.isRequired,
   loadSettingsAndPreferences: PropTypes.func.isRequired,
   theme: PropTypes.object.isRequired,
-  adminAllowed: PropTypes.bool.isRequired
+  adminAllowed: PropTypes.bool
 }
 
 export default withTheme(Admin)

packages/apps/admin/src/components/InvalidSession/InvalidSession.js

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types'
+import ReactDOM from 'react-dom'
+import {FormattedMessage} from 'react-intl'
+import styled from 'styled-components'
+import {notification} from 'tocco-app-extensions'
+import {Typography} from 'tocco-ui'
+
+import Login from '../Login'
+
+const StyledLoginHolder = styled(notification.StyledModalHolder)`
+  // higher than StyledModalHolder
+  // higher than StyledToasterBox
+  z-index: 100000;
+`
+
+const InvalidSession = ({invalidSession, intl}) => {
+  const msg = id => intl.formatMessage({id})
+
+  const Content = () => (
+    <>
+      <Typography.P>
+        <div dangerouslySetInnerHTML={{__html: msg('client.admin.invalidSession.description')}} />
+      </Typography.P>
+      <Login />
+    </>
+  )
+
+  if (!invalidSession) {
+    return null
+  }
+
+  return ReactDOM.createPortal(
+    <StyledLoginHolder>
+      <notification.ModalContent
+        id="invalid-session"
+        title={<FormattedMessage id="client.admin.invalidSession.title" />}
+        component={() => <Content />}
+        onClose={() => {}}
+        onCancel={() => {}}
+      />
+      <notification.StyledPageOverlay />
+    </StyledLoginHolder>,
+    document.body
+  )
+}
+
+InvalidSession.propTypes = {
+  intl: PropTypes.object.isRequired,
+  invalidSession: PropTypes.bool
+}
+
+export default InvalidSession

packages/apps/admin/src/components/InvalidSession/InvalidSessionContainer.js

@@ -0,0 +1,12 @@
+import {injectIntl} from 'react-intl'
+import {connect} from 'react-redux'
+
+import InvalidSession from './InvalidSession'
+
+const mapActionCreators = {}
+
+const mapStateToProps = (state, props) => ({
+  invalidSession: state.session.invalidSession
+})
+
+export default connect(mapStateToProps, mapActionCreators)(injectIntl(InvalidSession))

packages/apps/admin/src/components/InvalidSession/index.js

@@ -0,0 +1 @@
+export {default} from './InvalidSessionContainer'

packages/apps/admin/src/components/Login/Login.js

@@ -5,18 +5,7 @@ import {FormattedMessage} from 'react-intl'
 import ToccoLogin from 'tocco-login/src/main'
 import SsoLogin from 'tocco-sso-login/src/main'
 
-import ToccoSlogan from '../../assets/tocco_white.svg'
-import {
-  StyledSsoMsg,
-  StyledSsoError,
-  StyledSpanLogin,
-  StyledLogin,
-  StyledMobileSloganImg,
-  StyledSloganImg,
-  StyledLoginWrapper,
-  StyledHeadingLogin,
-  GlobalBodyStyle
-} from './StyledComponents'
+import {StyledSsoMsg, StyledSsoError, StyledSpanLogin} from './StyledComponents'
 
 const Login = ({ssoAvailable, loginSuccessful, checkSsoAvailable}) => {
   const [showError, setShowError] = useState(false)
@@ -27,14 +16,10 @@ const Login = ({ssoAvailable, loginSuccessful, checkSsoAvailable}) => {
     checkSsoAvailable()
   }, [checkSsoAvailable])
 
-  const loginSuccess = ({timeout}) => {
-    loginSuccessful(timeout)
-  }
-
   const ssoLoginCompleted = ({successful, provider, registration}) => {
     if (successful) {
       Cookies.set('sso-autologin', provider, {expires: 365})
-      loginSuccessful(30)
+      loginSuccessful()
     } else if (!successful && registration) {
       setShowRegistrationText(true)
     } else {
@@ -43,7 +28,7 @@ const Login = ({ssoAvailable, loginSuccessful, checkSsoAvailable}) => {
   }
 
   const SsoLoginPart = () => (
-    <>
+    <div>
       <SsoLogin ssoLoginEndpoint="/sso" loginCompleted={ssoLoginCompleted} autoLogin={autoLogin} />
       {showRegistrationText && (
         <StyledSsoMsg breakWords={true}>
@@ -58,23 +43,15 @@ const Login = ({ssoAvailable, loginSuccessful, checkSsoAvailable}) => {
       <StyledSpanLogin>
         <FormattedMessage id="client.admin.loginChoice" />
       </StyledSpanLogin>
-    </>
+    </div>
   )
 
   return (
     <>
-      <GlobalBodyStyle />
-      <StyledLogin>
-        <StyledMobileSloganImg src={ToccoSlogan} alt="Tocco Slogan" height="42.3" width="460" />
-        <StyledSloganImg src={ToccoSlogan} alt="Tocco Slogan" height="42.3" width="460" />
-        <StyledLoginWrapper>
-          <StyledHeadingLogin>
-            <FormattedMessage id="client.admin.welcomeTitle" />
-          </StyledHeadingLogin>
-          {ssoAvailable && <SsoLoginPart />}
-          <ToccoLogin loginSuccess={loginSuccess} showTitle={false} />
-        </StyledLoginWrapper>
-      </StyledLogin>
+      {ssoAvailable && <SsoLoginPart />}
+      <div>
+        <ToccoLogin loginSuccess={loginSuccessful} showTitle={false} />
+      </div>
     </>
   )
 }

packages/apps/admin/src/components/Login/StyledComponents.js

@@ -1,47 +1,6 @@
-import styled, {createGlobalStyle} from 'styled-components'
-import {scale, StyledH1, StyledSpan, theme} from 'tocco-ui'
+import styled from 'styled-components'
+import {scale, StyledSpan, theme} from 'tocco-ui'
 
-import ToccoLogo from '../../assets/tocco-circle.svg'
-
-// Overwrite index.html overflow which is hidden
-export const GlobalBodyStyle = createGlobalStyle`
-  @media (max-width: 1024px) {
-    body {
-      overflow: auto !important;
-    }
-  }
-`
-
-export const StyledLogin = styled.div`
-  height: 100vh;
-  width: 100vw;
-  background-image: url(${ToccoLogo});
-  background-repeat: no-repeat;
-  background-size: 61vw;
-  background-position-y: -25vw;
-  background-position-x: -41vw;
-
-  .tocco-sso-login {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 1.8rem;
-  }
-
-  @media (max-width: 1024px) {
-    background-size: 2000px;
-    background-position: 50% -1850px;
-  }
-
-  @media (max-width: 425px) {
-    background-position: 50% -1890px;
-  }
-`
-
-export const StyledHeadingLogin = styled(StyledH1)`
-  && {
-    font-size: ${scale.font(11)};
-  }
-`
 export const StyledSpanLogin = styled(StyledSpan)`
   && {
     text-align: center;
@@ -52,57 +11,6 @@ export const StyledSpanLogin = styled(StyledSpan)`
   }
 `
 
-export const StyledLoginWrapper = styled.div`
-  max-width: 410px;
-  margin: 6% 5% 0 28%;
-
-  && {
-    .tocco-login * {
-      font-size: ${scale.font(1.3)};
-    }
-
-    @media (max-width: 1024px) {
-      margin: 14rem auto 0;
-      padding-left: 2rem;
-      padding-right: 2rem;
-    }
-
-    @media (max-width: 425px) {
-      margin-top: 12rem;
-    }
-  }
-`
-
-export const StyledSloganImg = styled.img`
-  transform: rotate(270deg);
-  position: relative;
-  top: 12.5vw;
-  left: -8%;
-  width: 25vw;
-
-  @media (max-width: 1024px) {
-    display: none;
-  }
-`
-
-export const StyledMobileSloganImg = styled.img`
-  display: none;
-  max-width: 400px;
-  width: 95%;
-  height: auto;
-  position: relative;
-  margin: auto;
-  top: 45px;
-
-  @media (max-width: 1024px) {
-    display: block;
-  }
-
-  @media (max-width: 425px) {
-    max-width: 280px;
-  }
-`
-
 export const StyledSsoMsg = styled(StyledSpan)`
   && {
     display: inline-block;

packages/apps/admin/src/components/LoginGuard/LoginGuard.js

@@ -3,29 +3,31 @@ import {useEffect} from 'react'
 import {Helmet} from 'react-helmet'
 import {LoadMask} from 'tocco-ui'
 
-import Login from '../../components/Login'
+import LoginScreen from '../../components/LoginScreen'
 import Admin from '../Admin'
 
-const LoginGuard = ({doSessionCheck, loggedIn}) => {
+const LoginGuard = ({connectSocket, sessionHeartbeat, loggedIn}) => {
   useEffect(() => {
-    doSessionCheck()
-  }, [doSessionCheck])
+    connectSocket()
+    sessionHeartbeat()
+  }, [connectSocket, sessionHeartbeat])
 
   return (
     <div>
       <Helmet defer={false}>
         <title>Tocco</title>
       </Helmet>
       <LoadMask required={[loggedIn !== undefined]} loadingText="Logging in...">
-        <div>{!loggedIn ? <Login /> : <Admin />}</div>
+        <div>{!loggedIn ? <LoginScreen /> : <Admin />}</div>
       </LoadMask>
     </div>
   )
 }
 
 LoginGuard.propTypes = {
   loggedIn: PropTypes.bool,
-  doSessionCheck: PropTypes.func.isRequired
+  connectSocket: PropTypes.func.isRequired,
+  sessionHeartbeat: PropTypes.func.isRequired
 }
 
 export default LoginGuard

packages/apps/admin/src/components/LoginGuard/LoginGuardContainer.js

@@ -1,11 +1,13 @@
 import {injectIntl} from 'react-intl'
 import {connect} from 'react-redux'
-import {notification, login} from 'tocco-app-extensions'
+import {notification} from 'tocco-app-extensions'
 
+import {sessionHeartbeat} from '../../modules/session/actions'
 import LoginGuard from './LoginGuard'
 
 const mapActionCreators = {
-  doSessionCheck: login.doSessionCheck,
+  sessionHeartbeat,
+  connectSocket: notification.connectSocket,
   confirm: notification.confirm
 }
 

packages/apps/admin/src/components/LoginScreen/LoginScreen.js

@@ -0,0 +1,30 @@
+import {FormattedMessage} from 'react-intl'
+
+import ToccoSlogan from '../../assets/tocco_white.svg'
+import LoginForm from '../Login'
+import {
+  StyledLogin,
+  StyledMobileSloganImg,
+  StyledSloganImg,
+  StyledLoginWrapper,
+  StyledHeadingLogin,
+  GlobalBodyStyle
+} from './StyledComponents'
+
+const LoginScreen = () => (
+  <>
+    <GlobalBodyStyle />
+    <StyledLogin>
+      <StyledMobileSloganImg src={ToccoSlogan} alt="Tocco Slogan" height="42.3" width="460" />
+      <StyledSloganImg src={ToccoSlogan} alt="Tocco Slogan" height="42.3" width="460" />
+      <StyledLoginWrapper>
+        <StyledHeadingLogin>
+          <FormattedMessage id="client.admin.welcomeTitle" />
+        </StyledHeadingLogin>
+        <LoginForm />
+      </StyledLoginWrapper>
+    </StyledLogin>
+  </>
+)
+
+export default LoginScreen