text: import React, { Component } from 'react'
  import { Switch, Route, Redirect, withRouter, History } from 'react-router-dom'
  import { Container } from 'reactstrap'
  import { connect } from 'react-redux'
  
  import Header from '../../components/Header/'
  import Sidebar from '../../components/Sidebar/'
  import Breadcrumb from '../../components/Breadcrumb/'
  import Aside from '../../components/Aside/'
  import Footer from '../../components/Footer/'
  
  import Dashboard from '../../views/Dashboard/'
  import Webapps from '../../views/Webapps/'
  import Apps from '../../views/appstore/Apps/'
  import Configuration from '../../views/Configuration'
  import Login from '../../views/security/Login'
  import SecuritySettings from '../../views/security/Settings'
  import Users from '../../views/security/Users'
  import Devices from '../../views/security/Devices'
  import Register from '../../views/security/Register'
  import AccessRequests from '../../views/security/AccessRequests'
  import VesselConfiguration from '../../views/ServerConfig/VesselConfiguration'
  import ProvidersConfiguration from '../../views/ServerConfig/ProvidersConfiguration'
  import Settings from '../../views/ServerConfig/Settings'
  import Logging from '../../views/ServerConfig/Logging'
  import ServerUpdate from '../../views/ServerConfig/ServerUpdate'
  
  import {
    fetchLoginStatus,
    fetchAllData,
    openServerEventsConnection
  } from '../../actions'
  
  class Full extends Component {
    componentDidMount () {
      const { dispatch } = this.props
      fetchAllData(dispatch)
      openServerEventsConnection(dispatch)
    }
  
    render () {
      return (
        <div className='app'>
          <Header />
          <div className='app-body'>
            <Sidebar {...this.props} />
            <main className='main'>
              <Breadcrumb />
              <Container fluid>
                <Switch>
                  <Route
                    path='/dashboard'
                    name='Dashboard'
                    component={loginOrOriginal(Dashboard, true)}
                  />
                  <Route
                    path='/webapps'
                    name='Webapps'
                    component={loginOrOriginal(Webapps, true)}
                  />
                  <Route
                    path='/appstore/:view'
                    component={loginOrOriginal(Apps)}
                  />
                  <Route
                    path='/serverConfiguration/plugins/:pluginid'
                    component={loginOrOriginal(Configuration)}
                  />
                  <Route
                    path='/serverConfiguration/settings'
                    component={loginOrOriginal(Settings)}
                  />
                  <Route
                    path='/serverConfiguration/vessel'
                    component={loginOrOriginal(VesselConfiguration)}
                  />
                  <Route
                    path='/serverConfiguration/providers'
                    component={loginOrOriginal(ProvidersConfiguration)}
                  />
                  <Route
                    path='/serverConfiguration/datalogs'
                    component={loginOrOriginal(Logging)}
                  />
                  <Route
                    path='/serverConfiguration/update'
                    component={loginOrOriginal(ServerUpdate)}
                  />
                  <Route path='/security/settings' component={loginOrOriginal(SecuritySettings)} />
                  <Route path='/security/users' component={loginOrOriginal(Users)} />
                  <Route path='/security/devices' component={loginOrOriginal(Devices)} />
                  <Route path='/security/access/requests' component={loginOrOriginal(AccessRequests)} />
                  <Route path='/login' component={Login} />
                  <Route path='/register' component={Register} />
                  <Redirect from='/' to='/dashboard' />
                </Switch>
              </Container>
            </main>
            <Aside />
          </div>
          <Footer />
        </div>
      )
    }
  }
  
  export default connect()(Full)
  
  const loginOrOriginal = (BaseComponent, componentSupportsReadOnly) => {
    class Restricted extends Component {
      render () {
        if (loginRequired(this.props.loginStatus, componentSupportsReadOnly)) {
          return <Login />
        } else {
          return <BaseComponent {...this.props} />
        }
      }
    }
    return connect(({ loginStatus }) => ({ loginStatus }))(withRouter(Restricted))
  }
  
  function loginRequired (loginStatus, componentSupportsReadOnly) {
    // component works with read only access and
    // server loginStatus allows read only access
    if (componentSupportsReadOnly && loginStatus.readOnlyAccess) {
      return false
    }
  
    // require login when server requires authentication AND
    // user is not logged
    return (
      loginStatus.authenticationRequired && loginStatus.status === 'notLoggedIn'
    )
  }
  