From f36ae794f3eaaf5a4b791ac704620f3b15d7639c Mon Sep 17 00:00:00 2001
From: Alexis SOUQUIERE <alexis.souquiere@gmail.com>
Date: Mon, 31 Jul 2023 22:38:25 +0200
Subject: [PATCH] fix(core): fix permissions issues (#1533)

* Fix wrong connector permissions display conditions on screens
* Storing token in local storage to share it between browser tabs
* Handle auth issue for auth with bearer
---
 client/src/components/Root/Root.jsx                      | 4 ++--
 .../ConnectDetail/ConnectConfigs/ConnectConfigs.jsx      | 4 ++--
 .../Connect/ConnectDetail/ConnectTasks/ConnectTasks.jsx  | 5 +++--
 .../src/containers/Connect/ConnectList/ConnectList.jsx   | 6 +++---
 client/src/containers/Header/Header.jsx                  | 2 +-
 client/src/containers/Login/Login.jsx                    | 9 ++++++++-
 client/src/containers/Tail/Tail.jsx                      | 4 ++--
 .../src/containers/Topic/Topic/TopicData/TopicData.jsx   | 4 ++--
 8 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Root/Root.jsx b/client/src/components/Root/Root.jsx
index 907e4b350..317275801 100644
--- a/client/src/components/Root/Root.jsx
+++ b/client/src/components/Root/Root.jsx
@@ -43,9 +43,9 @@ class Root extends Component {
     let config = new Map();
     config.cancelToken = this.cancel.token;
 
-    if (sessionStorage.getItem('jwtToken')) {
+    if (localStorage.getItem('jwtToken')) {
       config.headers = {};
-      config.headers['Authorization'] = 'Bearer ' + sessionStorage.getItem('jwtToken');
+      config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('jwtToken');
     }
 
     return config;
diff --git a/client/src/containers/Connect/ConnectDetail/ConnectConfigs/ConnectConfigs.jsx b/client/src/containers/Connect/ConnectDetail/ConnectConfigs/ConnectConfigs.jsx
index cc962c908..e31144bd8 100644
--- a/client/src/containers/Connect/ConnectDetail/ConnectConfigs/ConnectConfigs.jsx
+++ b/client/src/containers/Connect/ConnectDetail/ConnectConfigs/ConnectConfigs.jsx
@@ -189,7 +189,7 @@ class ConnectConfigs extends Form {
             disabled={
               plugin.name === 'name' ||
               plugin.name === 'connector.class' ||
-              !(roles.CONNECT && roles.CONNECT.includes('UPDATE'))
+              !(roles.CONNECTOR && roles.CONNECTOR.includes('UPDATE'))
             }
             placeholder={plugin.defaultValue > 0 ? plugin.defaultValue : ''}
             onChange={({ currentTarget: input }) => {
@@ -332,7 +332,7 @@ class ConnectConfigs extends Form {
                   <tbody>{display}</tbody>
                 </table>
               </div>
-              {roles.CONNECT && roles.CONNECT.include('UPDATE') && (
+              {roles.CONNECTOR && roles.CONNECTOR.includes('UPDATE') && (
                 <div style={{ left: 0, width: '100%' }} className="khq-submit">
                   <button
                     type={'submit'}
diff --git a/client/src/containers/Connect/ConnectDetail/ConnectTasks/ConnectTasks.jsx b/client/src/containers/Connect/ConnectDetail/ConnectTasks/ConnectTasks.jsx
index 0c729b6d2..64d349102 100644
--- a/client/src/containers/Connect/ConnectDetail/ConnectTasks/ConnectTasks.jsx
+++ b/client/src/containers/Connect/ConnectDetail/ConnectTasks/ConnectTasks.jsx
@@ -246,14 +246,15 @@ class ConnectTasks extends Root {
               this.setState({ tableData: data });
             }}
             actions={
-              roles.CONNECT && roles.CONNECT.includes('UPDATE_STATE') && [constants.TABLE_RESTART]
+              roles.CONNECTOR &&
+              roles.CONNECTOR.includes('UPDATE_STATE') && [constants.TABLE_RESTART]
             }
             onRestart={row => {
               this.handleAction(this.definitionState.RESTART_TASK, row.id);
             }}
           />
         </div>
-        {roles.CONNECT && roles.CONNECT.includes('UPDATE_STATE') && (
+        {roles.CONNECTOR && roles.CONNECTOR.includes('UPDATE_STATE') && (
           <aside>
             {definition.paused ? (
               <li className="aside-button">
diff --git a/client/src/containers/Connect/ConnectList/ConnectList.jsx b/client/src/containers/Connect/ConnectList/ConnectList.jsx
index a32d447e3..54e10dcea 100644
--- a/client/src/containers/Connect/ConnectList/ConnectList.jsx
+++ b/client/src/containers/Connect/ConnectList/ConnectList.jsx
@@ -137,10 +137,10 @@ class ConnectList extends Root {
     const roles = this.state.roles || {};
     let actions = [];
 
-    if (roles.CONNECT && roles.CONNECT.includes('READ')) {
+    if (roles.CONNECTOR && roles.CONNECTOR.includes('READ')) {
       actions.push(constants.TABLE_DETAILS);
     }
-    if (roles.CONNECT && roles.CONNECT.includes('DELETE')) {
+    if (roles.CONNECTOR && roles.CONNECTOR.includes('DELETE')) {
       actions.push(constants.TABLE_DELETE);
     }
 
@@ -356,7 +356,7 @@ class ConnectList extends Root {
           }}
           noContent={'No connectors available'}
         />
-        {roles.CONNECT && roles.CONNECT.includes('CREATE') && (
+        {roles.CONNECTOR && roles.CONNECTOR.includes('CREATE') && (
           <aside>
             <Link to={`/ui/${clusterId}/connect/${connectId}/create`} className="btn btn-primary">
               Create a definition
diff --git a/client/src/containers/Header/Header.jsx b/client/src/containers/Header/Header.jsx
index 332d4bac7..f852f2f80 100644
--- a/client/src/containers/Header/Header.jsx
+++ b/client/src/containers/Header/Header.jsx
@@ -39,7 +39,7 @@ class Header extends Root {
       sessionStorage.setItem('login', currentUserData.logged);
       sessionStorage.setItem('user', 'default');
       sessionStorage.setItem('roles', organizeRoles(currentUserData.roles));
-      sessionStorage.removeItem('jwtToken');
+      localStorage.removeItem('jwtToken');
       this.setState({ login: currentUserData.logged }, () => {
         this.props.history.replace({
           pathname: '/ui/login',
diff --git a/client/src/containers/Login/Login.jsx b/client/src/containers/Login/Login.jsx
index 26e85fa5d..9e9f0deea 100644
--- a/client/src/containers/Login/Login.jsx
+++ b/client/src/containers/Login/Login.jsx
@@ -39,11 +39,17 @@ class Login extends Form {
       };
 
       login(uriLogin(), body).then(res => {
+        // Handle login failed for bearer auth
+        if (res.status === 500) {
+          toast.error('Wrong Username or Password!');
+          return;
+        }
+
         if (res.body) {
           res.json().then(r => {
             // Support JWT authentication through access_token
             if (r.access_token) {
-              sessionStorage.setItem('jwtToken', r.access_token);
+              localStorage.setItem('jwtToken', r.access_token);
               this.getData();
             }
           });
@@ -52,6 +58,7 @@ class Login extends Form {
         }
       });
     } catch (err) {
+      // Handle login failed for cookie auth
       toast.error('Wrong Username or Password!');
     }
   }
diff --git a/client/src/containers/Tail/Tail.jsx b/client/src/containers/Tail/Tail.jsx
index 8eccdbe3b..acc929a56 100644
--- a/client/src/containers/Tail/Tail.jsx
+++ b/client/src/containers/Tail/Tail.jsx
@@ -89,10 +89,10 @@ class Tail extends Root {
     const { search, selectedTopics, maxRecords } = this.state;
     this.eventSource = new EventSourcePolyfill(
       uriLiveTail(clusterId, search, selectedTopics, JSON.stringify(maxRecords)),
-      sessionStorage.getItem('jwtToken')
+      localStorage.getItem('jwtToken')
         ? {
             headers: {
-              Authorization: 'Bearer ' + sessionStorage.getItem('jwtToken')
+              Authorization: 'Bearer ' + localStorage.getItem('jwtToken')
             }
           }
         : {}
diff --git a/client/src/containers/Topic/Topic/TopicData/TopicData.jsx b/client/src/containers/Topic/Topic/TopicData/TopicData.jsx
index f88597a09..a8866223b 100644
--- a/client/src/containers/Topic/Topic/TopicData/TopicData.jsx
+++ b/client/src/containers/Topic/Topic/TopicData/TopicData.jsx
@@ -183,10 +183,10 @@ class TopicData extends Root {
             filters,
             changePage ? nextPage : undefined
           ),
-          sessionStorage.getItem('jwtToken')
+          localStorage.getItem('jwtToken')
             ? {
                 headers: {
-                  Authorization: 'Bearer ' + sessionStorage.getItem('jwtToken')
+                  Authorization: 'Bearer ' + localStorage.getItem('jwtToken')
                 }
               }
             : {}