156 replace alerts

frontend/toolkit-webapp/src/components/AdminCategoriesTab.js

@@ -13,6 +13,8 @@ import Link from '@material-ui/core/Link';
 import TextField from '@material-ui/core/TextField';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import SearchIcon from '@material-ui/icons/Search';
+import dialogStyles from '../styles/dialogStyle'
+import DialogComponent from '../components/DialogComponent'
 
 const columns = [
   { id: '_id', label: 'Id' },
@@ -58,14 +60,24 @@ const useStyles = makeStyles({
 
 const AdminCategoriesTab = (props) => {
   const classes = useStyles();
+  const dialogClasses = dialogStyles()
   const [categories, setCategories] = useState([]);
   const [search, setSearch] = useState([]);
+  const [dialogText, setDialogText] = useState('')
+  const [openDialog, setOpenDialog] = useState(false);
 
   // function that will run when page is loaded
   useEffect(() => {
     getCategories()
   }, []);
 
+    const handleOpenDialog = () => {
+        setOpenDialog(true);
+    }
+    const handleCloseDialog = () => {
+        setOpenDialog(false);
+    }
+
   const getCategories = async () => {
     const token = localStorage.getItem("token");
 
@@ -91,7 +103,10 @@ const AdminCategoriesTab = (props) => {
     } else if (data.message === "wrong token") {
       localStorage.removeItem('token');
       props.history.push('login');
-      // probably alert the user
+
+      // alert the user
+      setDialogText("Unauthorized access. Please contact your system administrator.")
+      handleOpenDialog()
     } else { // this is to check if there are errors not being addressed already
       console.log(data)
     }
@@ -122,7 +137,10 @@ const AdminCategoriesTab = (props) => {
     } else if (data.message === "wrong token") {
       localStorage.removeItem('token');
       props.history.push('login');
-      // probably alert the user
+
+      // alert the user
+      setDialogText("Unauthorized access. Please contact your system administrator.")
+      handleOpenDialog()
     } else { // this is to check if there are errors not being addressed already
       console.log(data)
     }
@@ -151,7 +169,10 @@ const AdminCategoriesTab = (props) => {
     } else if (data.message === "wrong token") {
       localStorage.removeItem('token');
       props.history.push('login');
-      // probably alert the user
+
+      // alert the user
+      setDialogText("Unauthorized access. Please contact your system administrator.")
+      handleOpenDialog()
     } else { // this is to check if there are errors not being addressed already
       console.log(data)
     }
@@ -224,6 +245,14 @@ const AdminCategoriesTab = (props) => {
           </Table>
         </TableContainer>
       </Paper>
+      <DialogComponent
+        open={openDialog}
+        text={dialogText}
+        onClose={handleCloseDialog}
+        buttons={[
+            {text: "Ok", style: dialogClasses.dialogButton1, onClick: handleCloseDialog}
+        ]}
+      />
     </div>
   );
 }

frontend/toolkit-webapp/src/components/AdminCoursesTab.js

@@ -13,6 +13,8 @@ import Link from '@material-ui/core/Link';
 import TextField from '@material-ui/core/TextField';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import SearchIcon from '@material-ui/icons/Search';
+import dialogStyles from '../styles/dialogStyle'
+import DialogComponent from '../components/DialogComponent'
 
 const columns = [
   { id: '_id', label: 'Id' },
@@ -62,14 +64,24 @@ const useStyles = makeStyles({
 
 const AdminCoursesTab = (props) => {
   const classes = useStyles();
+  const dialogClasses = dialogStyles()
   const [courses, setCourses] = useState([]);
   const [search, setSearch] = useState([]);
+  const [dialogText, setDialogText] = useState('')
+  const [openDialog, setOpenDialog] = useState(false);
 
   // function that will run when page is loaded
   useEffect(() => {
     getCourses()
   }, []);
 
+    const handleOpenDialog = () => {
+        setOpenDialog(true);
+    }
+    const handleCloseDialog = () => {
+        setOpenDialog(false);
+    }
+
   const getCourses = async () => {
     const token = localStorage.getItem("token");
 
@@ -93,7 +105,10 @@ const AdminCoursesTab = (props) => {
     } else if (data.message === "wrong token") {
       localStorage.removeItem('token');
       props.history.push('login');
-      // probably alert the user
+
+      // alert the user
+      setDialogText("Unauthorized access. Please contact your system administrator.")
+      handleOpenDialog()
     } else { // this is to check if there are errors not being addressed already
       console.log(data)
     }
@@ -125,7 +140,9 @@ const AdminCoursesTab = (props) => {
     } else if (data.message === "wrong token") {
       localStorage.removeItem('token');
       props.history.push('login');
-      // probably alert the user
+      // alert the user
+      setDialogText("Unauthorized access. Please contact your system administrator.")
+      handleOpenDialog()
     } else { // this is to check if there are errors not being addressed already
       console.log(data)
     }
@@ -154,7 +171,9 @@ const AdminCoursesTab = (props) => {
     } else if (data.message === "wrong token") {
       localStorage.removeItem('token');
       props.history.push('login');
-      // probably alert the user
+      // alert the user
+      setDialogText("Unauthorized access. Please contact your system administrator.")
+      handleOpenDialog()
     } else { // this is to check if there are errors not being addressed already
       console.log(data)
     }
@@ -233,6 +252,14 @@ const AdminCoursesTab = (props) => {
           </Table>
         </TableContainer>
       </Paper>
+      <DialogComponent
+        open={openDialog}
+        text={dialogText}
+        onClose={handleCloseDialog}
+        buttons={[
+            {text: "Ok", style: dialogClasses.dialogButton1, onClick: handleCloseDialog}
+        ]}
+      />
     </div>
   );
 }

frontend/toolkit-webapp/src/components/AdminUsersTab.js

@@ -16,6 +16,8 @@ import Link from '@material-ui/core/Link';
 import TextField from '@material-ui/core/TextField';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import SearchIcon from '@material-ui/icons/Search';
+import dialogStyles from '../styles/dialogStyle'
+import DialogComponent from '../components/DialogComponent'
 
 const columns = [
   { id: '_id', label: 'Id' },
@@ -59,14 +61,24 @@ const useStyles = makeStyles({
 
 const AdminUsersTab = (props) => {
   const classes = useStyles();
+  const dialogClasses = dialogStyles()
   const [users, setUsers] = useState([]);
   const [search, setSearch] = useState([]);
+  const [dialogText, setDialogText] = useState('')
+  const [openDialog, setOpenDialog] = useState(false);
 
   // function that will run when page is loaded
   useEffect(() => {
     getUsers()
   }, []);
 
+    const handleOpenDialog = () => {
+        setOpenDialog(true);
+    }
+    const handleCloseDialog = () => {
+        setOpenDialog(false);
+    }
+
   const getUsers = async () => {
     const token = localStorage.getItem("token");
 
@@ -89,8 +101,10 @@ const AdminUsersTab = (props) => {
       setUsers(data.users)
     } else if (data.message === "wrong token") {
       localStorage.removeItem('token');
+      // alert the user
+      setDialogText("Unauthorized access. Please contact your system administrator.")
+      handleOpenDialog()
       props.history.push('login');
-      // probably alert the user
     } else { // this is to check if there are errors not being addressed already
       console.log(data)
     }
@@ -120,8 +134,10 @@ const AdminUsersTab = (props) => {
       setUsers(data.users)
     } else if (data.message === "wrong token") {
       localStorage.removeItem('token');
+      // alert the user
+      setDialogText("Unauthorized access. Please contact your system administrator.")
+      handleOpenDialog()
       props.history.push('login');
-      // probably alert the user
     } else { // this is to check if there are errors not being addressed already
       console.log(data)
     }
@@ -150,8 +166,10 @@ const AdminUsersTab = (props) => {
       // alert(`Successfully deleted user`)
     } else if (data.message === "wrong token") {
       localStorage.removeItem('token');
+      // alert the user
+      setDialogText("Unauthorized access. Please contact your system administrator.")
+      handleOpenDialog()
       props.history.push('login');
-      // probably alert the user
     } else { // this is to check if there are errors not being addressed already
       console.log(data)
     }
@@ -179,6 +197,9 @@ const AdminUsersTab = (props) => {
       // localStorage.setItem("tab", 0);
     } else if (data.message === "wrong token") {
       localStorage.removeItem('token');
+      // alert the user
+      setDialogText("Unauthorized access. Please contact your system administrator.")
+      handleOpenDialog()
       props.history.push('login');
       // probably alert the user
     } else { // this is to check if there are errors not being addressed already
@@ -269,6 +290,14 @@ const AdminUsersTab = (props) => {
           </Table>
         </TableContainer>
       </Paper>
+      <DialogComponent
+        open={openDialog}
+        text={dialogText}
+        onClose={handleCloseDialog}
+        buttons={[
+            {text: "Ok", style: dialogClasses.dialogButton1, onClick: handleCloseDialog}
+        ]}
+      />
     </div>
   );
 }

frontend/toolkit-webapp/src/components/DialogComponent.js

@@ -0,0 +1,35 @@
+import { Dialog, DialogTitle, DialogActions, DialogContent, Button } from '@material-ui/core'
+import dialogStyles from '../styles/dialogStyle'
+
+export default function DialogComponent(props) {
+
+    const classes = dialogStyles()
+
+    return (
+        <>
+        { props.open === true ?
+
+            <div>
+                <Dialog onClose={props.onClose} aria-labelledby="customized-dialog-title" classes={{ paper: classes.dialogPaper }} BackdropProps={{ style: { backgroundColor: 'rgba(193, 193, 187, 0.2)' } }} open={props.open}>
+                    <div>
+                        <DialogTitle id="customized-dialog-title" onClose={props.onClose}>
+                            {props.text}
+                        </DialogTitle>
+                    </div>
+                    <DialogContent className={classes.dialogContent}>
+                        {props.buttons.map((obj) => {
+                            return (
+                                <Button className={obj.style} size="small" variant="contained" type='submit' onClick={obj.onClick}>
+                                    {obj.text}
+                                </Button>
+                            )
+                        })}
+                    </DialogContent>
+                </Dialog>
+            </div>
+
+            : null}
+        </>
+    )
+
+}