feat(ui): disabled login button if security is not enabled (#532)

Changed call to auths api to Routes.js. Put result on session storage. Use the storage data in Login Page and Header to enable login. close #507
tchiotludo · Dec 22, 2020 · c9aef71 · c9aef71
1 parent 470d1de
commit c9aef71
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 67 deletions.
diff --git a/client/src/containers/Header/Header.jsx b/client/src/containers/Header/Header.jsx
@@ -12,6 +12,7 @@ class Header extends Root {
   state = {
     login: sessionStorage.getItem('login'),
     username: sessionStorage.getItem('user'),
+    auths: JSON.parse(sessionStorage.getItem('auths')),
     goBack: true
   };
 
@@ -49,9 +50,38 @@ class Header extends Root {
     });
   }
 
+  _renderLogin() {
+    const { login, username, auths } = this.state;
+    if(auths && auths.loginEnabled) {
+        return (login === 'false' || !login ? (
+            <Link to="/ui/login">
+              <button className="btn btn-primary">
+                {' '}
+                <i className="fa fa-fw fa-sign-in" aria-hidden="true"/>
+                Login
+              </button>
+            </Link>
+        ) : (
+            <Link to="#">
+              <button
+                  className="btn btn-primary"
+                  onClick={() => {
+                    this.logout();
+                  }}
+              >
+                {' '}
+                <i className="fa fa-fw fa-sign-in" aria-hidden="true"/>
+                {username} (Logout)
+              </button>
+            </Link>
+        ));
+    } else {
+      return (<></>);
+    }
+  }
+
   render() {
     const { title, children } = this.props;
-    const { login, username } = this.state;
     return (
       <React.Fragment>
         <div
@@ -61,28 +91,7 @@ class Header extends Root {
           {' '}
           <h1>{title}</h1>{' '}
           <div>
-            {login === 'false' || !login ? (
-              <Link to="/ui/login">
-                <button className="btn btn-primary">
-                  {' '}
-                  <i className="fa fa-fw fa-sign-in" aria-hidden="true" />
-                  Login
-                </button>
-              </Link>
-            ) : (
-              <Link to="#">
-                <button
-                  className="btn btn-primary"
-                  onClick={() => {
-                    this.logout();
-                  }}
-                >
-                  {' '}
-                  <i className="fa fa-fw fa-sign-in" aria-hidden="true" />
-                  {username} (Logout)
-                </button>
-              </Link>
-            )}
+            {this._renderLogin()}
             {children}
           </div>
         </div>

diff --git a/client/src/containers/Login/Login.jsx b/client/src/containers/Login/Login.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import logo from '../../images/logo.svg';
-import {uriAuths, uriCurrentUser, uriLogin, uriOidc} from '../../utils/endpoints';
+import {uriCurrentUser, uriLogin, uriOidc} from '../../utils/endpoints';
 import { organizeRoles } from '../../utils/converters';
 import { login } from '../../utils/api';
 import Form from '../../components/Form/Form';
@@ -68,21 +68,15 @@ class Login extends Form {
     }
   }
 
-  async componentDidMount() {
-    try {
-      const response = await this.getApi(uriAuths());
-      if (response.status === 200) {
-        const {loginEnabled, ...config} = response.data;
-        if (!loginEnabled) {
-          this.props.history.push({
-            pathname: '/ui',
-          });
-          return;
-        }
-        this.setState({config});
-      }
-    } catch (e) {
-      // cannot load auth config, use default
+  componentDidMount() {
+    const auths = JSON.parse(sessionStorage.getItem('auths'));
+    if(auths && auths.loginEnabled) {
+      const {loginEnabled, ...config} = auths;
+      this.setState({config});
+    } else {
+      this.props.history.push({
+        pathname: '/ui',
+      });
     }
   }
 

diff --git a/client/src/utils/Routes.js b/client/src/utils/Routes.js
@@ -25,7 +25,7 @@ import AclDetails from '../containers/Acl/AclDetail';
 import Login from '../containers/Login';
 import Settings from "../containers/Settings/Settings";
 import { organizeRoles } from './converters';
-import {uriClusters, uriCurrentUser} from './endpoints';
+import {uriAuths, uriClusters, uriCurrentUser} from './endpoints';
 import Root from "../components/Root";
 
 class Routes extends Root {
@@ -64,33 +64,44 @@ class Routes extends Root {
     }
   };
 
-  getCurrentUser() {
+  _initUserAndAuth() {
+    const requests = [this.getApi(uriCurrentUser()), this.getApi(uriAuths())];
+    Promise.all(requests)
+        .then(data => {
+            this._setAuths(data[1]);
+            this._setCurrentUser(data[0].data);
+        })
+        .catch(err => {
+            console.error('Error:', err);
+        });
+  }
+
+  _setAuths(response) {
+    if (response.status === 200) {
+        sessionStorage.setItem('auths', JSON.stringify(response.data));
+    }
+  }
+
+  _setCurrentUser(currentUserData) {
     sessionStorage.setItem('user', '');
-    this.getApi(uriCurrentUser())
-      .then(res => {
-        let currentUserData = res.data;
-        if (currentUserData.logged) {
-          sessionStorage.setItem('login', true);
-          sessionStorage.setItem('user', currentUserData.username);
-          sessionStorage.setItem('roles', organizeRoles(currentUserData.roles));
-          this.setState({ user: currentUserData.username });
-        } else {
-          sessionStorage.setItem('login', false);
-          if (currentUserData.roles) {
-            sessionStorage.setItem('user', 'default');
-            sessionStorage.setItem('roles', organizeRoles(currentUserData.roles));
-            this.setState({ user: 'default' });
-          } else {
-            sessionStorage.setItem('user', '');
-            sessionStorage.setItem('roles', JSON.stringify({}));
-            this.setState({ user: 'not_logged' });
-          }
-        }
-        this.setState({ loading: false });
-      })
-      .catch(err => {
-        console.error('Error:', err);
-      });
+    if (currentUserData.logged) {
+      sessionStorage.setItem('login', true);
+      sessionStorage.setItem('user', currentUserData.username);
+      sessionStorage.setItem('roles', organizeRoles(currentUserData.roles));
+      this.setState({ user: currentUserData.username });
+    } else {
+      sessionStorage.setItem('login', false);
+      if (currentUserData.roles) {
+        sessionStorage.setItem('user', 'default');
+        sessionStorage.setItem('roles', organizeRoles(currentUserData.roles));
+        this.setState({ user: 'default' });
+      } else {
+        sessionStorage.setItem('user', '');
+        sessionStorage.setItem('roles', JSON.stringify({}));
+        this.setState({ user: 'not_logged' });
+      }
+    }
+    this.setState({ loading: false });
   }
 
   handleRedirect() {
@@ -113,7 +124,7 @@ class Routes extends Root {
     let clusterId = this.state.clusterId;
 
     if (this.state.user.length <= 0) {
-      this.getCurrentUser();
+      this._initUserAndAuth();
       return <></>;
     }