fix(core): fix permissions issues (#1533)

AlexisSouquiere · web-flow · commit f36ae794f3ea · 2023-07-31T22:38:25.000+02:00
* 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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')
                 }
               }
             : {}

Original file line number	Diff line number	Diff line change
`@@ -89,10 +89,10 @@ class Tail extends Root {`
`89`	`89`	`const { search, selectedTopics, maxRecords } = this.state;`
`90`	`90`	`this.eventSource = new EventSourcePolyfill(`
`91`	`91`	`uriLiveTail(clusterId, search, selectedTopics, JSON.stringify(maxRecords)),`
`92`		`- sessionStorage.getItem('jwtToken')`
	`92`	`+ localStorage.getItem('jwtToken')`
`93`	`93`	`? {`
`94`	`94`	`headers: {`
`95`		`- Authorization: 'Bearer ' + sessionStorage.getItem('jwtToken')`
	`95`	`+ Authorization: 'Bearer ' + localStorage.getItem('jwtToken')`
`96`	`96`	`}`
`97`	`97`	`}`
`98`	`98`	`: {}`
Original file line number	Diff line number	Diff line change
`@@ -183,10 +183,10 @@ class TopicData extends Root {`
`183`	`183`	`filters,`
`184`	`184`	`changePage ? nextPage : undefined`
`185`	`185`	`),`
`186`		`- sessionStorage.getItem('jwtToken')`
	`186`	`+ localStorage.getItem('jwtToken')`
`187`	`187`	`? {`
`188`	`188`	`headers: {`
`189`		`- Authorization: 'Bearer ' + sessionStorage.getItem('jwtToken')`
	`189`	`+ Authorization: 'Bearer ' + localStorage.getItem('jwtToken')`
`190`	`190`	`}`
`191`	`191`	`}`
`192`	`192`	`: {}`