Added a logic to prevent the unauthorized user have acess to the admin area

src/Admin/Pages/Pages/Admin.js

@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public License
 along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
 
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
@@ -29,6 +29,8 @@ import MenuIcon from '@material-ui/icons/Menu';
 import Fab from '@material-ui/core/Fab';
 import { TabsItens } from '../AdminLabelTabs/LabelTabs';
 import DisplayContent from '../../Components/Components/DisplayContent';
+import { Store } from '../../../Store'; 
+import Unauthorized from '../../Components/Components/Unauthorized';
 
 const useStyles = makeStyles({
     list: {
@@ -50,10 +52,15 @@ const fab = {
 
 
 export default function Admin() {
+    const { state, dispatch } = useContext(Store);
+
     const classes = useStyles();
-    const [state, setState] = React.useState({
+
+    //State of the Drawer
+    const [State, setState] = React.useState({
         left: false
     });
+
     const [IndexIcon, setIndexIcon] = useState(0);
 
     {/**************** Controlls the state of the Drawer ****************/ }
@@ -62,7 +69,7 @@ export default function Admin() {
             return;
         }
 
-        setState({ ...state, [anchor]: open });
+        setState({ ...State, [anchor]: open });
     };
 
     {/**************** Dsiplay the itens of the Drawer ****************/ }
@@ -79,35 +86,71 @@ export default function Admin() {
                 {TabsItens.map((text, index) => (
                     <ListItem button key={text.label} onClick={() => setIndexIcon(index)}>
                         <IconButton>
-                            <DisplayIcon label={text.label} />
+                            <DisplayIcon i={index} />
                         </IconButton>
                         <ListItemText primary={text.label} />
                     </ListItem>
                 ))}
             </List>
         </div>
-    );
-
-    return (
-        <div>
-            {/**************** Begin of the Drawer ****************/}
-            <React.Fragment>
-                <Drawer anchor={'left'} open={state['left']} onClose={toggleDrawer('left', false)}>
-                    {list('left')}
-                </Drawer>
-            </React.Fragment>
-            {/**************** End of the Drawer****************/}
-
-            {/**************** Begin of the Content ****************/}
-            <div style={{ paddingTop: '2em', paddingLeft: '2em', paddingRight: '2em', paddingBottom: '2em', backgroundColor: '	#D3D3D3' }}>
-                <DisplayContent selectedIcon={IndexIcon} />
-            </div>
-            {/**************** End of the Content ****************/}
-
-            {/**************** FLoating action Button ****************/}
-            <Fab color="primary" aria-label="add" style={fab} onClick={toggleDrawer('left', true)}>
-                <MenuIcon />
-            </Fab>
-        </div>
-    );
+    ); 
+
+    // return (
+    //     <div>
+    //         {/**************** Begin of the Drawer ****************/}
+    //         <React.Fragment>
+    //             <Drawer anchor={'left'} open={State['left']} onClose={toggleDrawer('left', false)}>
+    //                 {list('left')}
+    //             </Drawer>
+    //         </React.Fragment>
+    //         {/**************** End of the Drawer****************/}
+
+    //         {/**************** Begin of the Content ****************/}
+    //         <div style={{ paddingTop: '2em', paddingLeft: '2em', paddingRight: '2em', paddingBottom: '2em', backgroundColor: '	#D3D3D3' }}>
+    //             <DisplayContent i={IndexIcon} />
+    //         </div>
+    //         {/**************** End of the Content ****************/}
+
+    //         {/**************** FLoating action Button ****************/}
+    //         <Fab color="primary" aria-label="add" style={fab} onClick={toggleDrawer('left', true)}>
+    //             <MenuIcon />
+    //         </Fab>
+    //     </div>
+    // );
+    
+    if (state.userIsLoggedIn) {
+        var obj = { ...(state.currentUser.roles)[0] }
+        if (obj.id === 3 || obj.id === 7) {
+            return (
+                <div>
+                    {/**************** Begin of the Drawer ****************/}
+                    <React.Fragment>
+                        <Drawer anchor={'left'} open={State['left']} onClose={toggleDrawer('left', false)}>
+                            {list('left')}
+                        </Drawer>
+                    </React.Fragment>
+                    {/**************** End of the Drawer****************/}
+
+                    {/**************** Begin of the Content ****************/}
+                    <div style={{ paddingTop: '2em', paddingLeft: '2em', paddingRight: '2em', paddingBottom: '2em', backgroundColor: '	#D3D3D3' }}>
+                        <DisplayContent i={IndexIcon} />
+                    </div>
+                    {/**************** End of the Content ****************/}
+
+                    {/**************** FLoating action Button ****************/}
+                    <Fab color="primary" aria-label="add" style={fab} onClick={toggleDrawer('left', true)}>
+                        <MenuIcon />
+                    </Fab>
+                </div>
+            );
+        } else {
+            return (
+                <Unauthorized/>
+            )
+        }
+    } else {
+        return (
+            <Unauthorized/>
+        )
+    }
 }