Automatically log out from inactive user sessions

This patch adds the `IdleTimer` component to the main App component,
which will be configured to time out if the user is inactive on the
app pages. On timeout, the user gets automatically logged out.

This functionality is disabled by default, and can be configured using
the `inactiveSessionTimeout` configuration option.

config.ts

@@ -31,6 +31,9 @@ const conf: Config = {
   // The timeout between polling requests
   requestPollTimeout: 5000,
 
+  // The timeout for an inactive user session (in ms). Set 0 to disable.
+  inactiveSessionTimeout: 0,
+
   // - Specifies the `limit` for each provider when listing all its VMs for pagination.
   // - If the provider is not in this list, the 'default' value will be used.
   // - If the `default` value is lower than the number of instances that

package.json

@@ -93,6 +93,7 @@
     "react-datetime": "^3.1.1",
     "react-dom": "^16.13.1",
     "react-hot-loader": "^4.12.17",
+    "react-idle-timer": "^4.3.6",
     "react-modal": "^3.11.2",
     "react-motion": "^0.5.2",
     "react-notification-system": "^0.4.0",

src/@types/Config.ts

@@ -43,4 +43,5 @@ export type Config = {
   servicesUrls: Services;
   maxMinionPoolEventsPerPage: number;
   bareMetalEndpointName: string;
+  inactiveSessionTimeout: number;
 };

src/components/App.tsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { hot } from "react-hot-loader/root";
 import React from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import IdleTimer from "react-idle-timer";
 import styled, { createGlobalStyle } from "styled-components";
 import { observe } from "mobx";
 
@@ -87,6 +88,10 @@ class App extends React.Component<Record<string, unknown>, State> {
     isConfigReady: false,
   };
 
+  onIdle() {
+    userStore.logout();
+  }
+
   async componentDidMount() {
     observe(userStore, "loggedUser", () => {
       this.setState({});
@@ -195,6 +200,13 @@ class App extends React.Component<Record<string, unknown>, State> {
     return (
       <Wrapper>
         <GlobalStyle />
+        {configLoader.config.inactiveSessionTimeout > 0 ? (
+          <IdleTimer
+            timeout={configLoader.config.inactiveSessionTimeout}
+            throttle={500}
+            onIdle={this.onIdle}
+          />
+        ) : null}
         <Router>
           <Switch>
             {configLoader.isFirstLaunch ? (