Updated (un)authentication handling

Author: ewoutp

dashboard/assets.go

@@ -4,8 +4,9 @@ import DeploymentOperator from './deployment/DeploymentOperator.js';
 import StorageOperator from './storage/StorageOperator.js';
 import NoOperator from './NoOperator.js';
 import Loading from './util/Loading.js';
-import api from './api/api.js';
+import api, { IsUnauthorized } from './api/api.js';
 import { Container, Segment, Message } from 'semantic-ui-react';
+import { withAuth } from './auth/Auth.js';
 
 const PodInfoView = ({pod, namespace}) => (
   <Segment basic>
@@ -46,25 +47,33 @@ class App extends Component {
   reloadOperators = async() => {
     try {
       const operators = await api.get('/api/operators');
-      this.setState({operators, error: undefined});
+      this.setState({
+        operators,
+        error: undefined
+      });
     } catch (e) {
-      this.setState({error: e.message});
+      this.setState({
+        error: e.message
+      });
+      if (IsUnauthorized(e)) {
+        this.props.doLogout();
+      }
     }
     this.props.setTimeout(this.reloadOperators, 10000);
   }
 
   render() {
     if (this.state.operators) {
-      return <OperatorsView 
+      return <OperatorsView
         error={this.state.error}
-        deployment={this.state.operators.deployment} 
-        storage={this.state.operators.storage} 
-        pod={this.state.operators.pod} 
-        namespace={this.state.operators.namespace} 
-      />;
+        deployment={this.state.operators.deployment}
+        storage={this.state.operators.storage}
+        pod={this.state.operators.pod}
+        namespace={this.state.operators.namespace}
+        />;
     }
     return (<LoadingView/>);
   }
 }
 
-export default ReactTimeout(App);
+export default ReactTimeout(withAuth(App));

dashboard/src/App.js

@@ -1,13 +1,22 @@
+export function IsUnauthorized(e) { 
+    return (e.status === 401);
+}
+
 export default {
     token: '',
 
     async decodeResults(result) {
         const decoded = await result.json();
-        if (result.status === 401) {
-            throw Error(decoded.error || "Unauthorized")
-        }
         if (result.status !== 200) {
-            throw Error(`Unexpected status ${result.status}`);
+            let message = decoded.error;
+            if (!message) {
+                if (result.status === 401) {
+                    message = "Unauthorized";
+                } else {
+                    message = `Unexpected status ${result.status}`;
+                }
+            }
+            throw Object.assign(new Error(message), { status: result.status });
         }
         return decoded;
     },

dashboard/src/App.test.js

@@ -7,6 +7,18 @@ import { getSessionItem, setSessionItem } from "../util/Storage.js";
 
 const tokenSessionKey = "auth-token";
 
+
+// withAuth adds a doLogout property to the given component.
+export function withAuth(WrappedComponent) {
+  return function AuthAwareComponent(props) {
+      return (
+        <LogoutContext.Consumer>
+          {doLogout => <WrappedComponent {...props} doLogout={doLogout} />}
+        </LogoutContext.Consumer>
+      );
+  }
+}
+
 class Auth extends Component {
   state = {
     authenticated: false,

dashboard/src/api/api.js

@@ -1,10 +1,11 @@
 import ReactTimeout from 'react-timeout';
 import React, { Component } from 'react';
-import api from '../api/api.js';
+import api, { IsUnauthorized } from '../api/api.js';
 import Loading from '../util/Loading.js';
 import MemberList from './MemberList.js';
 import styled from 'react-emotion';
 import { Loader } from 'semantic-ui-react';
+import { withAuth } from '../auth/Auth.js';
 
 const LoaderBox = styled('span')`
   float: right;
@@ -39,7 +40,9 @@ class DeploymentDetails extends Component {
 
   reloadDeployment = async() => {
     try {
-      this.setState({loading:true});
+      this.setState({
+        loading: true
+      });
       const result = await api.get(`/api/deployment/${this.props.name}`);
       this.setState({
         deployment: result,
@@ -51,6 +54,10 @@ class DeploymentDetails extends Component {
         loading: false,
         error: e.message
       });
+      if (IsUnauthorized(e)) {
+        this.props.doLogout();
+        return;
+      }
     }
     this.props.setTimeout(this.reloadDeployment, 5000);
   }
@@ -65,8 +72,8 @@ class DeploymentDetails extends Component {
         <LoaderBox><Loader size="mini" active={this.state.loading} inline/></LoaderBox>
         <MemberGroupsView memberGroups={d.member_groups} namespace={d.namespace}/>
       </div>
-    );
+      );
   }
 }
 
-export default ReactTimeout(DeploymentDetails);
+export default ReactTimeout(withAuth(DeploymentDetails));

dashboard/src/auth/Auth.js

@@ -1,11 +1,12 @@
 import { Icon, Loader, Popup, Table } from 'semantic-ui-react';
 import { Link } from "react-router-dom";
-import api from '../api/api.js';
+import api, { IsUnauthorized } from '../api/api.js';
 import CommandInstruction from '../util/CommandInstruction.js';
 import Loading from '../util/Loading.js';
 import React, { Component } from 'react';
 import ReactTimeout from 'react-timeout';
 import styled from 'react-emotion';
+import { withAuth } from '../auth/Auth.js';
 
 const LoaderBox = styled('span')`
   float: right;
@@ -172,6 +173,10 @@ class DeploymentList extends Component {
       });
     } catch (e) {
       this.setState({error: e.message, loading: false});
+      if (IsUnauthorized(e)) {
+        this.props.doLogout();
+        return;
+      }
     }
     this.props.setTimeout(this.reloadDeployments, 5000);
   }
@@ -188,4 +193,4 @@ class DeploymentList extends Component {
   }
 }
 
-export default ReactTimeout(DeploymentList);
+export default ReactTimeout(withAuth(DeploymentList));

dashboard/src/deployment/DeploymentDetails.js

@@ -1,11 +1,12 @@
 import { Accordion, Header, Icon, Loader, Popup, Table } from 'semantic-ui-react';
-import api from '../api/api.js';
+import api, { IsUnauthorized } from '../api/api.js';
 import CommandInstruction from '../util/CommandInstruction.js';
 import VolumeList from './VolumeList.js';
 import Loading from '../util/Loading.js';
 import React, { Component } from 'react';
 import ReactTimeout from 'react-timeout';
 import styled from 'react-emotion';
+import { withAuth } from '../auth/Auth.js';
 
 const LoaderBox = styled('span')`
   float: right;
@@ -170,29 +171,38 @@ class StorageList extends Component {
 
   reloadStorages = async() => {
     try {
-      this.setState({loading: true});
+      this.setState({
+        loading: true
+      });
       const result = await api.get('/api/storage');
       this.setState({
         items: result.storages,
         loading: false,
         error: undefined
       });
     } catch (e) {
-      this.setState({error: e.message, loading: false});
+      this.setState({
+        error: e.message,
+        loading: false
+      });
+      if (IsUnauthorized(e)) {
+        this.props.doLogout();
+        return;
+      }
     }
     this.props.setTimeout(this.reloadStorages, 5000);
   }
 
   render() {
     const items = this.state.items;
     if (!items) {
-      return (<Loading/>);
+      return (<Loading />);
     }
     if (items.length === 0) {
-      return (<EmptyView/>);
+      return (<EmptyView />);
     }
-    return (<ListView items={items} loading={this.state.loading}/>);
+    return (<ListView items={items} loading={this.state.loading} />);
   }
 }
 
-export default ReactTimeout(StorageList);
+export default ReactTimeout(withAuth(StorageList));

dashboard/src/deployment/DeploymentList.js

@@ -1,10 +1,11 @@
 import { Icon, Loader, Popup, Table } from 'semantic-ui-react';
-import api from '../api/api.js';
+import api, { IsUnauthorized } from '../api/api.js';
 import CommandInstruction from '../util/CommandInstruction.js';
 import Loading from '../util/Loading.js';
 import React, { Component } from 'react';
 import ReactTimeout from 'react-timeout';
 import styled from 'react-emotion';
+import { withAuth } from '../auth/Auth.js';
 
 const LoaderBox = styled('span')`
   float: right;
@@ -123,15 +124,24 @@ class VolumeList extends Component {
 
   reloadVolumes = async() => {
     try {
-      this.setState({loading: true});
+      this.setState({
+        loading: true
+      });
       const result = await api.get(`/api/storage/${this.props.storageName}`);
       this.setState({
         items: result.volumes,
         loading: false,
         error: undefined
       });
     } catch (e) {
-      this.setState({error: e.message, loading: false});
+      this.setState({
+        error: e.message,
+        loading: false
+      });
+      if (IsUnauthorized(e)) {
+        this.props.doLogout();
+        return;
+      }
     }
     this.props.setTimeout(this.reloadVolumes, 5000);
   }
@@ -148,4 +158,4 @@ class VolumeList extends Component {
   }
 }
 
-export default ReactTimeout(VolumeList);
+export default ReactTimeout(withAuth(VolumeList));