TMSS-462: Button disabled while refreshing page issue solved. Direct access to...

TMSS-462: Button disabled while refreshing page issue solved. Direct access to URL when don't have permissions is restricted.

SAS/TMSS/frontend/tmss_webapp/src/App.js

@@ -26,6 +26,8 @@ import { CustomDialog } from './layout/components/CustomDialog';
 
 import AuthStore from './authenticate/auth.store';
 import {Provider} from "react-redux";
+import AuthComponent from './components/AuthComponent';
+
 
 const {  publish, subscribe } = pubsub();
 
@@ -47,14 +49,14 @@ class App extends Component {
         mobileMenuActive: localStorage.getItem('mobileMenuActive') === 'true' ? true : false,
         authenticated: Auth.isAuthenticated(),
         findObjectPlaceholder: 'Sub Task',
-        redirect: (Auth.isAuthenticated() && window.location.pathname === "/login")?"/":window.location.pathname
+        redirect: (Auth.isAuthenticated() && window.location.pathname === "/login")?"/":window.location.pathname,
+        isLogin: true
         };
         this.onWrapperClick = this.onWrapperClick.bind(this);
         this.onToggleMenu = this.onToggleMenu.bind(this);
         this.onSidebarClick = this.onSidebarClick.bind(this);
         this.onMenuItemClick = this.onMenuItemClick.bind(this);
         this.setPageTitle = this.setPageTitle.bind(this);
-        this.loggedIn = this.loggedIn.bind(this);
         this.logout = this.logout.bind(this);
         this.validateAndLogout = this.validateAndLogout.bind(this);
         this.setSearchField = this.setSearchField.bind(this);
@@ -133,17 +135,13 @@ class App extends Component {
      * Callback function from login page to set the authentication state to true amd redirect to the 
      * original requested URL.
      */
-    loggedIn() {
-        const redirect = this.state.redirect;
-        this.setState({authenticated: true, redirect: redirect==="/login"?"/":redirect});
-    }
 
     /**
      * Logout and redirect to login page.
      */
     logout() {
         Auth.logout();
-        this.setState({authenticated: false, redirect:"/"});
+        this.setState({ redirect:"/", isLogin: false});
     }
 
     /**
@@ -253,10 +251,11 @@ class App extends Component {
                     <Provider store={AuthStore}>
                     {/* <div className={wrapperClass} onClick={this.onWrapperClick}> */}
                     <div className={wrapperClass}>
-                        
                         {/* Load main routes and application only if the application is authenticated */}
-                        {this.state.authenticated &&
                         <>
+                        {this.state.redirect &&
+                        // <AuthComponent isLogin = {this.state.isLogin}>
+                        <AuthComponent>
                             <AppTopbar 
                                 onToggleMenu={this.onToggleMenu} 
                                 isLoggedIn={this.state.authenticated} 
@@ -268,24 +267,17 @@ class App extends Component {
                                 <AppMenu model={this.menu} toggleDirtyDialog={this.toggleDirtyDialog} isEditDirty={this.state.isEditDirty} onMenuItemClick={this.onMenuItemClick} layoutMode={this.state.la} active={this.state.menuActive}/>
                                 <div className="layout-main">
                                     {this.state.redirect &&
-                                        <Redirect to={{pathname: this.state.redirect}} />}
+                                        <Redirect to={{pathname: this.state.redirect, state: {userrole: this.state.userrole}}} />}
                                     <AppBreadcrumb setPageTitle={this.setPageTitle} section={this.state.currentMenu} onBreadcrumbClick={this.onBreadcrumbClick} />
                                     <RoutedContent />
                                 </div>
                             </Router>   
+
                             <AppFooter></AppFooter>
-                        </>
+                            </AuthComponent>
     }
-
-                        {/* If not authenticated, show only login page */}
-                        {!this.state.authenticated &&
-                            <>
-                                <Router basename={ this.state.currentPath }>
-                                    <Redirect to={{pathname: "/login"}} />
-                                    <Login onLogin={this.loggedIn} />
-                                </Router>
                         </>
-                        }
+
                         <CustomDialog type="confirmation" visible={this.state.showDirtyDialog} width="40vw"
                             header={'Confirmation'} message={'Do you want to leave this page? Your changes may not be saved.'} 
                             content={''} onClose={this.close} onCancel={this.close} onSubmit={this.cancelEdit}>

SAS/TMSS/frontend/tmss_webapp/src/authenticate/auth.js

@@ -7,17 +7,17 @@ const axios = require('axios');
  */
 const Auth = {
     /** To check if user already logged in and the token is available in the browser local storage */
-    isAuthenticated: () => {
+    isAuthenticated: async () => {
         let user = localStorage.getItem("user");
         if (user) {
             user = JSON.parse(user);
             if (user.token) {
                 axios.defaults.headers.common['Authorization'] = `Token ${user.token}`;
-                PermissionStackUtil.getPermissions(true);
+                 await PermissionStackUtil.getPermissions(true);
                 return true;
             }
         }
-        PermissionStackUtil.getPermissions(false);
+        await PermissionStackUtil.getPermissions(false);
         return false;
     },
     /** Gets user details from browser local storage */

SAS/TMSS/frontend/tmss_webapp/src/components/AuthComponent.js

+import React, {Component} from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Redirect} from 'react-router-dom';
+import Auth from '../authenticate/auth'
+import { Login } from '../authenticate/login';
+
+class AuthComponent extends Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            authenticated: false,
+            isLoginProgress : true
+        }
+        this.loggedIn = this.loggedIn.bind(this);
+    }
+
+    async componentDidMount() {
+        const authenticate = await Auth.isAuthenticated();
+        this.setState({authenticated: authenticate, isLoginProgress: authenticate});
+    }
+
+    async componentDidUpdate(prevProp, prevState) {
+        const authenticate = await Auth.isAuthenticated();
+        if(prevState.authenticated != authenticate){
+        this.setState({authenticated: authenticate, isLogin: authenticate});
+        }
+    }
+    
+    loggedIn() {
+        this.setState({authenticated: true, redirect: "/", isLoginProgress: true});
+    }
+
+    render() {
+        return(
+            <>
+            { this.state.authenticated ? this.props.children:  
+            <>
+            {!this.state.isLoginProgress &&
+                                <Router basename={ "/" }>
+                                    <Redirect to={{pathname: "/login"}} />
+                                    <Login onLogin={this.loggedIn} />
+                                </Router>
+            };
+            </>
+            }
+            </>
+        )
+    }
+}
+
+export default AuthComponent;
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/components/ProtectedRouteComponent.js

+import React, { Component } from "react";
+import {
+    Route,
+    Redirect,
+} from 'react-router-dom';
+import AuthStore from '../authenticate/auth.store';
+import AuthUtil from "../utils/auth.util";
+
+class ProtectedRoute extends Component{
+
+    constructor(props){
+        super(props)
+        this.state={
+            permission_set: AuthStore.getState()
+        }
+    }
+
+    async componentDidMount() {
+        const permission = await AuthUtil.getUserRolePermission();
+        this.setState({permission_set: permission});
+    }
+    
+    hasPermission() {
+        const permission = this.props.permissions
+        if(typeof(permission[0]) !== undefined && permission[1] !== undefined) {
+            if(this.state.permission_set['userRolePermission'][permission[0]][permission[1]]) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+        else {
+            return true;
+         }
+    }
+
+    render() {
+        const { name, component, path, exact, permissions } = this.props;
+        if(permissions){
+            if(this.hasPermission()){
+                return <Route path={path} name={name} component={component} />
+            }
+            else {
+                return <Redirect to={{
+                    pathname: '/access-denied',
+                    state: { from: this.props.location }
+                }}/> 
+            }
+        } else {
+            return <Route path={path} name={name} component={component} />
+        }
+    }
+}
+
+export default ProtectedRoute;
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/index.js

@@ -7,6 +7,7 @@ import PageHeader from '../../layout/components/PageHeader';
 import { appGrowl } from '../../layout/components/AppGrowl';
 import { CustomDialog } from '../../layout/components/CustomDialog';
 import AuthUtil from '../../utils/auth.util';
+import AuthStore from '../../authenticate/auth.store';
 
 export class Scheduling extends Component {
      constructor(props){
@@ -17,7 +18,8 @@ export class Scheduling extends Component {
             isLoading:false,
             redirect: '',
             dialog: {header: 'Confirm', detail: 'Do you want to create blueprints for the selected drafts?'},
-            dialogVisible: false
+            dialogVisible: false,
+            userrole : AuthStore.getState()
         };
         this.access_dined_message = "Don't have permission";
         this.optionsMenu = React.createRef();
@@ -29,8 +31,7 @@ export class Scheduling extends Component {
    
     async componentDidMount() {
         const permission = await AuthUtil.getUserRolePermission();
-        this.setState({userrole: permission});
-        //this.getUserRolePermission()
+        this.setState({userrole: permission})
     }
     
     /**
@@ -72,13 +73,13 @@ export class Scheduling extends Component {
                 <PageHeader location={this.props.location} title={'Scheduling Unit - List'}
                             actions={[
                                 {icon: 'fa fa-plus-square', 
-                                        title: this.state.userrole && this.state.userrole.userRolePermission.scheduleunit && this.state.userrole.userRolePermission.scheduleunit.create?'Add New Scheduling Unit':this.access_dined_message,
-                                        disabled: this.state.userrole && this.state.userrole.userRolePermission.scheduleunit?!this.state.userrole.userRolePermission.scheduleunit.create:true, 
+                                        title: this.state.userrole.userRolePermission && this.state.userrole.userRolePermission.scheduleunit && this.state.userrole.userRolePermission.scheduleunit.create?'Add New Scheduling Unit':this.access_dined_message,
+                                         disabled: this.state.userrole.userRolePermission && this.state.userrole.userRolePermission.scheduleunit?!this.state.userrole.userRolePermission.scheduleunit.create:true, 
                                         props: {pathname: '/schedulingunit/create'}},
                                         
                                 {icon: 'fa fa-table',
-                                        title: this.state.userrole && this.state.userrole.userRolePermission.scheduleunit && this.state.userrole.userRolePermission.scheduleunit.excelview?'Add Scheduling Set':this.access_dined_message,
-                                        disabled: this.state.userrole && this.state.userrole.userRolePermission.scheduleunit?!this.state.userrole.userRolePermission.scheduleunit.excelview:true,
+                                        title: this.state.userrole.userRolePermission && this.state.userrole.userRolePermission.scheduleunit && this.state.userrole.userRolePermission.scheduleunit.excelview?'Add Scheduling Set':this.access_dined_message,
+                                        disabled: this.state.userrole.userRolePermission && this.state.userrole.userRolePermission.scheduleunit?!this.state.userrole.userRolePermission.scheduleunit.excelview:true,
                                         props: {pathname: '/schedulingset/schedulingunit/create'}},
                                 ]} />
                 {this.state.scheduleunit && 

SAS/TMSS/frontend/tmss_webapp/src/routes/index.js

@@ -25,6 +25,7 @@ import ReportHome from './Report';
 import { Growl } from 'primereact/components/growl/Growl';
 import { setAppGrowl } from '../layout/components/AppGrowl';
 import WorkflowList from './Workflow/workflow.list'
+import ProtectedRoute from '../components/ProtectedRouteComponent';
 
 export const routes = [
     {
@@ -32,7 +33,9 @@ export const routes = [
         component: NotFound,
     },{
         path: "/access-denied",
-        component: AccessDenied
+        component: AccessDenied,
+        name: 'Access Denied',
+        title: 'Access Denied'
     },{
         path: "/dashboard",
         component: Dashboard,
@@ -42,12 +45,13 @@ export const routes = [
         path: "/schedulingunit",
         component: Scheduling,
         name: 'Scheduling Unit',
-        title: 'Scheduling Unit - List'
+        title: 'Scheduling Unit - List',
     },{
         path: "/schedulingunit/create",
         component: SchedulingUnitCreate,
         name: 'Scheduling Unit Add',
-        title: 'Scheduling Unit - Add'
+        title: 'Scheduling Unit - Add',
+        permissions: ['scheduleunit', 'create']
     },{
         path: "/task",
         component: TaskList,
@@ -82,7 +86,9 @@ export const routes = [
         path: "/schedulingunit/edit/:id",
         component: EditSchedulingUnit,
         name: 'Scheduling Edit',
-        title: 'Scheduling Unit - Edit'
+        title: 'Scheduling Unit - Edit',
+        permissions: ['scheduleunit', 'edit']
+
     },{
         path: "/schedulingunit/view/:type/:id",
         component: ViewSchedulingUnit,
@@ -96,7 +102,8 @@ export const routes = [
         path: "/project/create",
         component: ProjectCreate,
         name: 'Project Add',
-        title: 'Project - Add'
+        title: 'Project - Add',
+        permissions: ['project', 'create']
     },{
         path: "/project/view/:id",
         component: ProjectView,
@@ -107,7 +114,8 @@ export const routes = [
         path: "/project/edit/:id",
         component: ProjectEdit,
         name: 'Project Edit',
-        title: 'Project Edit'
+        title: 'Project Edit',
+        permissions:['project', 'edit']
     },{
         path: "/project/:project/schedulingunit/create",
         component: SchedulingUnitCreate,
@@ -225,7 +233,7 @@ export const RoutedContent = () => {
         <Growl ref={(el) => setAppGrowl(el)} />
 	    <Switch>
             {/* <Redirect from="/" to="/" exact /> */}
-            {routes.map(routeProps => <Route {...routeProps} exact key={routeProps.path} />)}
+            {routes.map(routeProps => <ProtectedRoute {...routeProps} exact key={routeProps.path} />)}
         </Switch>
         </>
     );