diff --git a/frontend/toolkit-webapp/package-lock.json b/frontend/toolkit-webapp/package-lock.json
index 2059a66..74dc39a 100644
--- a/frontend/toolkit-webapp/package-lock.json
+++ b/frontend/toolkit-webapp/package-lock.json
@@ -15989,7 +15989,8 @@
},
"ssri": {
"version": "6.0.1",
- "resolved": "",
+ "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
+ "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
"requires": {
"figgy-pudding": "^3.5.1"
}
diff --git a/frontend/toolkit-webapp/src/components/AdminCategoriesTab.js b/frontend/toolkit-webapp/src/components/AdminCategoriesTab.js
index ab18571..f765750 100644
--- a/frontend/toolkit-webapp/src/components/AdminCategoriesTab.js
+++ b/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) => {
+
);
}
diff --git a/frontend/toolkit-webapp/src/components/AdminCoursesTab.js b/frontend/toolkit-webapp/src/components/AdminCoursesTab.js
index deea2a5..ffca51e 100644
--- a/frontend/toolkit-webapp/src/components/AdminCoursesTab.js
+++ b/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) => {
+
);
}
diff --git a/frontend/toolkit-webapp/src/components/AdminUsersTab.js b/frontend/toolkit-webapp/src/components/AdminUsersTab.js
index b0e1c0e..eda078a 100644
--- a/frontend/toolkit-webapp/src/components/AdminUsersTab.js
+++ b/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) => {
+
);
}
diff --git a/frontend/toolkit-webapp/src/components/DialogComponent.js b/frontend/toolkit-webapp/src/components/DialogComponent.js
new file mode 100644
index 0000000..02b4328
--- /dev/null
+++ b/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 ?
+
+
+
+
+
+ : null}
+ >
+ )
+
+}
\ No newline at end of file
diff --git a/frontend/toolkit-webapp/src/components/QuizCreatorModule.js b/frontend/toolkit-webapp/src/components/QuizCreatorModule.js
index 540a4ab..b39b7ce 100644
--- a/frontend/toolkit-webapp/src/components/QuizCreatorModule.js
+++ b/frontend/toolkit-webapp/src/components/QuizCreatorModule.js
@@ -4,6 +4,8 @@ import useStyles from '../styles/moduleStyle'
import { Delete, Edit, ArrowUpward, ArrowDownward } from '@material-ui/icons'
import MultipleChoice from '../components/MultipleChoiceCreator'
import TorF from '../components/TrueOrFalseCreator'
+import dialogStyles from '../styles/dialogStyle'
+import DialogComponent from '../components/DialogComponent'
var questions = {
@@ -24,6 +26,11 @@ const QuizCreator = (props) => {
const [open, setOpen] = React.useState(false)
const [editOpen, setEdit] = React.useState(false)
const [selected, setSelected] = React.useState([]);
+ const [dialogText, setDialogText] = useState('')
+ const [openDialog, setOpenDialog] = useState(false);
+
+ const classes = useStyles()
+ const dialogClasses = dialogStyles()
sessionStorage.setItem('editing', '')
@@ -34,7 +41,12 @@ const QuizCreator = (props) => {
}
}, []);
- const classes = useStyles()
+ const handleOpenDialog = () => {
+ setOpenDialog(true);
+ }
+ const handleCloseDialog = () => {
+ setOpenDialog(false);
+ };
const isSelected = (question) => selected.indexOf(question) !== -1
@@ -49,11 +61,17 @@ const QuizCreator = (props) => {
}
if (type === '') {
- alert("Select a question type")
+ setDialogText("Select a question type")
+ handleOpenDialog()
+ //alert("Select a question type")
} else if (questions.question === '' || questions.answers[0].answerText === '') {
- alert("Requires a question and an answer.")
+ setDialogText("Requires a question and an answer.")
+ handleOpenDialog()
+ //alert("Requires a question and an answer.")
} else if (dup === 1) {
- alert("No Duplicate questions")
+ setDialogText("No duplicate questions allowed.")
+ handleOpenDialog()
+ //alert("No Duplicate questions")
} else {
quiz.push(questions)
@@ -99,9 +117,13 @@ const QuizCreator = (props) => {
const handleUp = () => {
if (selected.length > 1) {
- alert("Select only one question.")
+ setDialogText("Please select only one question at a time.")
+ handleOpenDialog()
+ //alert("Select only one question.")
} else if (selected.length < 1) {
- alert("Please select a question.")
+ setDialogText("Please make a question selection.")
+ handleOpenDialog()
+ //alert("Please select a question.")
} else {
for (var i = 0; i < quiz.length; i++) {
if (isSelected(quiz[i].question)) {
@@ -119,9 +141,13 @@ const QuizCreator = (props) => {
const handleDown = () => {
if (selected.length > 1) {
- alert("Select only one question.")
+ setDialogText("Please select only one question.")
+ handleOpenDialog()
+ //alert("Select only one question.")
} else if (selected.length < 1) {
- alert("Please select a question.")
+ setDialogText("Please make a question selection.")
+ handleOpenDialog()
+ //alert("Please select a question.")
} else {
for (var i = 0; i < quiz.length; i++) {
if (isSelected(quiz[i].question)) {
@@ -140,9 +166,13 @@ const QuizCreator = (props) => {
const handleEdit = () => {
sessionStorage.setItem('editing', 'yes')
if (selected.length > 1) {
- alert("Select only one question.")
+ setDialogText("Please select only one question.")
+ handleOpenDialog()
+ //alert("Select only one question.")
} else if (selected.length < 1) {
- alert("Please select a question.")
+ setDialogText("Please make a question selection.")
+ handleOpenDialog()
+ //alert("Please select a question.")
} else {
for (var i = 0; i < quiz.length; i++) {
if (isSelected(quiz[i].question)) {
@@ -169,9 +199,13 @@ const QuizCreator = (props) => {
}
if (questions.question === '' || questions.answers[0].answerText === '') {
- alert('Ensure there is a question and an Answer.')
+ setDialogText("Please ensure that there is both a question and an answer.")
+ handleOpenDialog()
+ //alert('Ensure there is a question and an Answer.')
} else if (dup === 1 && check !== parseInt(sessionStorage.getItem('index'))) {
- alert('No Duplicate Questions')
+ setDialogText("No duplicate questions allowed.")
+ handleOpenDialog()
+ //alert('No Duplicate Questions')
} else {
for (i = 0; i < quiz.length; i++) {
if (isSelected(quiz[i].question)) {
@@ -403,6 +437,14 @@ const QuizCreator = (props) => {
+
)
}
diff --git a/frontend/toolkit-webapp/src/components/TopNavBar.js b/frontend/toolkit-webapp/src/components/TopNavBar.js
index 972e735..bc073c3 100644
--- a/frontend/toolkit-webapp/src/components/TopNavBar.js
+++ b/frontend/toolkit-webapp/src/components/TopNavBar.js
@@ -41,9 +41,40 @@ const useStyles = makeStyles((theme) => ({
},
+ dialogPaper:
+ {
+ border: '1.8px solid black',
+ borderRadius: '8px',
+ width: '380px',
+ boxShadow: 'none'
+ },
+
dialogContent:
{
- width: '40vh'
+ width: '100%',
+ textAlign: 'center',
+ },
+
+ dialogButton1:
+ {
+ backgroundColor: 'black',
+ color: 'white',
+ "&:hover": {
+ backgroundColor: 'grey',
+ color: 'white'
+ },
+ marginRight: '10px'
+ },
+
+ dialogButton2:
+ {
+ backgroundColor: 'black',
+ color: 'white',
+ "&:hover": {
+ backgroundColor: 'grey',
+ color: 'white'
+ },
+ marginLeft: '10px'
},
divider:
@@ -376,6 +407,7 @@ export default function TopNavBar(props) {
return
}
+
if (!window.confirm("Are you sure you would like to save your changes?")) {
setOpenDialog(false)
return
@@ -959,17 +991,17 @@ export default function TopNavBar(props) {
-
)
}
diff --git a/frontend/toolkit-webapp/src/pages/CourseCreatorNewCourse.js b/frontend/toolkit-webapp/src/pages/CourseCreatorNewCourse.js
index b34712b..f52d8fd 100644
--- a/frontend/toolkit-webapp/src/pages/CourseCreatorNewCourse.js
+++ b/frontend/toolkit-webapp/src/pages/CourseCreatorNewCourse.js
@@ -6,11 +6,14 @@ import Chip from '@material-ui/core/Chip';
import config from '../config.json'
import TopNavBar from '../components/TopNavBar'
import courseStyles from '../styles/courseCreatorStyle'
+import dialogStyles from '../styles/dialogStyle'
+import DialogComponent from '../components/DialogComponent'
import '../css/Login.css';
function NewCourse(props) {
const classes = courseStyles()
+ const dialogClasses = dialogStyles()
const [courseTitle, setCourseTitle] = useState('')
const [categories, setCategories] = useState([])
@@ -20,14 +23,26 @@ function NewCourse(props) {
const [prerequisite, setPrerequisite] = useState('')
const [image, setImage] = useState()
const [dialogData, setDialogData] = useState([]);
+ const [dialogText, setDialogText] = useState('')
+ const [openDialog, setOpenDialog] = useState(false);
const filter = createFilterOptions();
let validImageTypes = ["PNG", "JPEG", "GIF", "TIF", "RAW", "JPG"]
+ const handleOpenDialog = () => {
+ setOpenDialog(true);
+ }
+ const handleCloseDialog = () => {
+ setOpenDialog(false);
+ }
+
const onSubmit = (e) => {
e.preventDefault()
+
if (!courseTitle || !categories || !description || !intendedAudience || !prerequisite) {
- alert('Please enter all required fields')
+ setDialogText("Please enter all required fields.")
+ handleOpenDialog()
+ //alert('Please enter all required fields')
return
}
// console.log("categories on submit: " + categories)
@@ -48,7 +63,9 @@ function NewCourse(props) {
// If it isn't, return and allow user to input valid image
if (!validInput) {
- alert('Invalid file type. Please upload an image with a proper image extension')
+ setDialogText("Invalid file type. Please upload an image with the proper file extension.")
+ handleOpenDialog()
+ //alert('Invalid file type. Please upload an image with a proper image extension')
return
}
@@ -59,7 +76,9 @@ function NewCourse(props) {
// Input contains non-alphanumeric values so we must alert the user to rename the file
if (isValid === false) {
- alert('Invalid file type. Please upload an image for which name is alphanumeric.')
+ setDialogText("Invalid file type. Please upload an image for which the name is alphanumeric.")
+ handleOpenDialog()
+ //alert('Invalid file type. Please upload an image for which name is alphanumeric.')
return
}
@@ -375,6 +394,14 @@ function NewCourse(props) {
+
)
}
diff --git a/frontend/toolkit-webapp/src/pages/ForgotPassword.js b/frontend/toolkit-webapp/src/pages/ForgotPassword.js
index 3ee2974..2800aba 100644
--- a/frontend/toolkit-webapp/src/pages/ForgotPassword.js
+++ b/frontend/toolkit-webapp/src/pages/ForgotPassword.js
@@ -7,12 +7,24 @@ import resetPassStyle from '../styles/registerStyle'
// import '../css/Registration.css';
import TopNavBar from '../components/TopNavBar'
import videoSource from '../img/PEOSTRI.mp4'
+import dialogStyles from '../styles/dialogStyle'
+import DialogComponent from '../components/DialogComponent'
const ForgotPassword = (props) => {
const [email, setEmail] = useState('')
+ const [dialogText, setDialogText] = useState('')
+ const [openDialog, setOpenDialog] = useState(false);
+ const dialogClasses = dialogStyles()
const classes = resetPassStyle()
+ const handleOpenDialog = () => {
+ setOpenDialog(true);
+ }
+ const handleCloseDialog = () => {
+ setOpenDialog(false);
+ }
+
const onLogin = (e) => {
props.history.push('login');
}
@@ -22,7 +34,9 @@ const ForgotPassword = (props) => {
if(email == '')
{
- alert('Please enter an email in the text box.')
+ setDialogText("Please enter an email in the text box.")
+ handleOpenDialog()
+ //alert('Please enter an email in the text box.')
return
}
@@ -35,7 +49,9 @@ const ForgotPassword = (props) => {
})
const data = await res.json()
- alert('An email has been sent to the email listed, if registered.')
+ setDialogText("An email has been sent to the email listed, if registered.")
+ handleOpenDialog()
+ //alert('An email has been sent to the email listed, if registered.')
setEmail('')
}
@@ -81,6 +97,14 @@ const ForgotPassword = (props) => {
+
>
)
diff --git a/frontend/toolkit-webapp/src/pages/Login.js b/frontend/toolkit-webapp/src/pages/Login.js
index c4e213c..71806eb 100644
--- a/frontend/toolkit-webapp/src/pages/Login.js
+++ b/frontend/toolkit-webapp/src/pages/Login.js
@@ -6,12 +6,24 @@ import TopNavBar from '../components/TopNavBar'
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Avatar from '@material-ui/core/Avatar';
import videoSource from '../img/PEOSTRI.mp4'
+import dialogStyles from '../styles/dialogStyle'
+import DialogComponent from '../components/DialogComponent'
function Login(props) {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
+ const [dialogText, setDialogText] = useState('')
+ const [openDialog, setOpenDialog] = useState(false);
const classes = loginStyles()
+ const dialogClasses = dialogStyles()
+
+ const handleOpenDialog = () => {
+ setOpenDialog(true);
+ }
+ const handleCloseDialog = () => {
+ setOpenDialog(false);
+ }
const onRegister = (e) => {
props.history.push('registration');
@@ -23,7 +35,9 @@ function Login(props) {
const onSubmit = (e) => {
e.preventDefault()
if (!email || !password) {
- alert('Please enter Email and Password')
+ setDialogText("Please enter both email and password.")
+ handleOpenDialog()
+ //alert('Please enter Email and Password')
return
}
onLogin({ email, password })
@@ -47,7 +61,9 @@ function Login(props) {
props.history.push('dashboard')
} else if (data.message === "wrong email or password") {
- alert("Wrong email or password, please try again.");
+ setDialogText("Wrong email or password, please try again or recover password.")
+ handleOpenDialog()
+ //alert("Wrong email or password, please try again.");
} else { // this is to check if there are errors not being addressed already
console.log(data)
}
@@ -115,6 +131,14 @@ function Login(props) {
+
)
diff --git a/frontend/toolkit-webapp/src/pages/ManageMyCourses.js b/frontend/toolkit-webapp/src/pages/ManageMyCourses.js
index 61288fd..a0c2789 100644
--- a/frontend/toolkit-webapp/src/pages/ManageMyCourses.js
+++ b/frontend/toolkit-webapp/src/pages/ManageMyCourses.js
@@ -3,15 +3,20 @@ import { Button, Card, CardActions, Container, CssBaseline, Divider, makeStyles,
import config from '../config.json'
import TopNavBar from '../components/TopNavBar'
// import Pagination from '@material-ui/lab/Pagination'
+import { Dialog, DialogTitle, DialogActions, DialogContent } from '@material-ui/core'
import myCoursesStyles from '../styles/myCoursesStyle'
+import dialogStyles from '../styles/dialogStyle'
+import DialogComponent from '../components/DialogComponent'
import jwt_decode from "jwt-decode";
import { Link } from '@material-ui/core';
const ManageMyCourses = (props) => {
const [courses, setCourses] = useState([])
const [searchQuery, setSearchQuery] = useState('')
+ const [openDialog, setOpenDialog] = useState(false);
const classes = myCoursesStyles()
+ const dialogClasses = dialogStyles()
// function that will run when page is loaded
useEffect(() => {
@@ -57,7 +62,15 @@ const ManageMyCourses = (props) => {
}
}
- const deleteCourse = async (id) => {
+ const handleOpenDialog = () => {
+ setOpenDialog(true);
+ }
+ const handleCloseDialog = () => {
+ setOpenDialog(false);
+ };
+
+ const deleteCourse = async (id) =>
+ {
let res = undefined
const token = localStorage.getItem("token");
@@ -80,9 +93,8 @@ const ManageMyCourses = (props) => {
// This splits the array correctly and updates courses array with courses the user is still enrolled in
// const newVal = courses.filter((courses) => courses._id !== id);
// setCourses(newVal)
-
- // window.location.reload()
-
+
+ window.location.reload()
}
@@ -134,17 +146,21 @@ const ManageMyCourses = (props) => {
-
- {/* TODO: Figure out a way to reload the page without simply linking back to the same page. */}
-
-
-
- { if (window.confirm('Are you sure you wish to delete this course permanently?')) deleteCourse(course._id) }}>
- Remove Course
-
-
-
-
+
+
+ Delete Course
+
+
+
+ deleteCourse(course._id)},
+ {text: "No", style: dialogClasses.dialogButton2, onClick: handleCloseDialog}
+ ]}
+ />
))}
diff --git a/frontend/toolkit-webapp/src/pages/ModuleCreator.js b/frontend/toolkit-webapp/src/pages/ModuleCreator.js
index 463589a..99915d9 100644
--- a/frontend/toolkit-webapp/src/pages/ModuleCreator.js
+++ b/frontend/toolkit-webapp/src/pages/ModuleCreator.js
@@ -5,6 +5,8 @@ import { Button, FormControl, Container, TextField, Typography, Box, Select, Inp
import config from '../config.json'
import TopNavBar from '../components/TopNavBar'
import useStyles from '../styles/moduleStyle'
+import dialogStyles from '../styles/dialogStyle'
+import DialogComponent from '../components/DialogComponent'
import '../css/Login.css';
import QuizCreator from '../components/QuizCreatorModule'
import VideoCreator from '../components/VideoCreatorModule'
@@ -17,8 +19,11 @@ function ModuleCreator(props) {
const [description, setDescription] = useState('')
const [courseID, setCourseID] = useState('')
const [gradeToPass, setGradeToPass] = useState('')
+ const [dialogText, setDialogText] = useState('')
+ const [openDialog, setOpenDialog] = useState(false);
const classes = useStyles()
+ const dialogClasses = dialogStyles()
const [file, setFile] = useState()
const [video, setVideo] = useState()
const [pdf, setPDF] = useState()
@@ -28,6 +33,13 @@ function ModuleCreator(props) {
// handleDisplayedContent(type)
//}
+ const handleOpenDialog = () => {
+ setOpenDialog(true);
+ }
+ const handleCloseDialog = () => {
+ setOpenDialog(false);
+ }
+
function getExtention(filename) {
var parts = filename.split('.');
return parts[parts.length - 1]
@@ -102,7 +114,9 @@ function ModuleCreator(props) {
const onSubmit = (e) => {
e.preventDefault()
if (!title || !type || !description) {
- alert('Please enter all required fields')
+ setDialogText("Please enter all required fields.")
+ handleOpenDialog()
+ //alert('Please enter all required fields')
return
}
@@ -113,9 +127,11 @@ function ModuleCreator(props) {
quiz = JSON.parse(sessionStorage.getItem("quiz"))
sessionStorage.clear()
onFinish({ title, type, description, quiz })
- } else if (type === 'PDF' && pdf !== null && typeof (pdf) !== 'undefined') {
- if (isPDF(pdf.name) === false) {
- alert("File must be a PDF")
+ } else if(type === 'PDF' && pdf !== null && typeof(pdf) !== 'undefined'){
+ if(isPDF(pdf.name) === false){
+ setDialogText("File must be a PDF.")
+ handleOpenDialog()
+ //alert("File must be a PDF")
} else {
console.log('works for PDF')
onFinish({ title, type, description, pdf })
@@ -123,10 +139,12 @@ function ModuleCreator(props) {
} else if (type === 'File' && file !== null && typeof (file) !== 'undefined') {
console.log('works for File')
onFinish({ title, type, description, file })
-
- } else if (type === 'Video' && video !== null && typeof (video) !== 'undefined') {
- if (isVideo(video.name) === false) {
- alert("File must be a video")
+
+ } else if(type === 'Video' && video !== null && typeof(video) !== 'undefined'){
+ if(isVideo(video.name) === false){
+ setDialogText("File must be a video.")
+ handleOpenDialog()
+ //alert("File must be a video")
} else {
console.log('works for Video')
onFinish({ title, type, description, video })
@@ -136,7 +154,9 @@ function ModuleCreator(props) {
onFinish({ title, type, description })
}
else {
- alert("Please upload file for the respective module type selected.")
+ setDialogText("Please upload file for the respective module type selected.")
+ handleOpenDialog()
+ //alert("Please upload file for the respective module type selected.")
}
}
@@ -176,16 +196,20 @@ function ModuleCreator(props) {
// Input contains non-alphanumeric values so we must alert the user to rename the file
if (isValid === false) {
- alert('Invalid file type. Please upload a PDF for which name is alphanumeric and has no spaces.')
+ setDialogText("Invalid file type. Please upload a PDF for which name is alphanumeric and has no spaces.")
+ handleOpenDialog()
+ //alert('Invalid file type. Please upload a PDF for which name is alphanumeric and has no spaces.')
return
}
- // if (data.message === "unauthorized") {
- // props.history.push('dashboard');
- // } else {
- // alert("Successfully added PDF module")
- // props.history.push('/course/' + courseID)
- // }
+ if (data.message === "unauthorized") {
+ props.history.push('dashboard');
+ } else {
+ setDialogText("Succesfully added Quiz module.")
+ handleOpenDialog()
+ //alert("Successfully added Quiz module")
+ props.history.push('/course/' + courseID)
+ }
const newFile = new FormData();
newFile.append('file', module.pdf)
@@ -221,7 +245,9 @@ function ModuleCreator(props) {
if (data2.message === "unauthorized") {
props.history.push('dashboard');
} else if (data2.status === 'Success') {
- alert("Successfully added PDF module")
+ setDialogText("Successfully added PDF module.")
+ handleOpenDialog()
+ //alert("Successfully added PDF module")
props.history.push('/course/' + courseID)
} //else need to do something, not sure what rn
} else { // this is to check if there are errors not being addressed already
@@ -238,7 +264,9 @@ function ModuleCreator(props) {
// Input contains non-alphanumeric values so we must alert the user to rename the file
if (isValid === false) {
- alert('Invalid file type. Please upload a file for which name is alphanumeric and has no spaces.')
+ setDialogText("Invalid file type. Please upload a file for which name is alphanumeric and has no spaces.")
+ handleOpenDialog()
+ //alert('Invalid file type. Please upload a file for which name is alphanumeric and has no spaces.')
return
}
@@ -276,7 +304,9 @@ function ModuleCreator(props) {
if (data2.message === "unauthorized") {
props.history.push('dashboard');
} else if (data2.status === 'Success') {
- alert("Successfully added File module")
+ setDialogText("Successfully added File module.")
+ handleOpenDialog()
+ //alert("Successfully added File module")
props.history.push('/course/' + courseID)
} //else need to do something, not sure what rn
} else { // this is to check if there are errors not being addressed already
@@ -294,7 +324,9 @@ function ModuleCreator(props) {
// Input contains non-alphanumeric values so we must alert the user to rename the file
if (isValid === false) {
- alert('Invalid file type. Please upload a video for which name is alphanumeric and has no spaces.')
+ setDialogText("Invalid file type. Please upload a video for which name is alphanumeric and has no spaces.")
+ handleOpenDialog()
+ //alert('Invalid file type. Please upload a video for which name is alphanumeric and has no spaces.')
return
}
@@ -333,7 +365,9 @@ function ModuleCreator(props) {
if (data2.message === "unauthorized") {
props.history.push('dashboard');
} else if (data2.status === 'Success') {
- alert("Successfully added video module")
+ setDialogText("Successfully added video module.")
+ handleOpenDialog()
+ //alert("Successfully added video module")
props.history.push('/course/' + courseID)
} //else need to do something, not sure what rn
} else { // this is to check if there are errors not being addressed already
@@ -358,7 +392,9 @@ function ModuleCreator(props) {
if (data.message === "unauthorized") {
props.history.push('dashboard');
} else if (data.message === undefined) {
- alert('worked')
+ setDialogText("Successfully completed action.")
+ handleOpenDialog()
+ //alert('worked')
props.history.push('/course/' + courseID)
}
else { // this is to check if there are errors not being addressed already
@@ -445,6 +481,15 @@ function ModuleCreator(props) {
+
)
diff --git a/frontend/toolkit-webapp/src/pages/ModuleEditor.js b/frontend/toolkit-webapp/src/pages/ModuleEditor.js
index dce8812..46f6b55 100644
--- a/frontend/toolkit-webapp/src/pages/ModuleEditor.js
+++ b/frontend/toolkit-webapp/src/pages/ModuleEditor.js
@@ -10,6 +10,8 @@ import QuizCreator from '../components/QuizCreatorModule'
import VideoCreator from '../components/VideoCreatorModule'
import PDFCreator from '../components/PDFCreatorModule'
import FileCreator from '../components/FileCreatorModule'
+import dialogStyles from '../styles/dialogStyle'
+import DialogComponent from '../components/DialogComponent'
function ModuleEditor(props) {
@@ -20,12 +22,22 @@ function ModuleEditor(props) {
const [description, setDescription] = useState(module.description)
const [courseID, setCourseID] = useState('')
const [gradeToPass, setGradeToPass] = useState(module.gradeToPass)
+ const [dialogText, setDialogText] = useState('')
+ const [openDialog, setOpenDialog] = useState(false);
const classes = useStyles()
+ const dialogClasses = dialogStyles()
const [file, setFile] = useState()
const [video, setVideo] = useState()
const [pdf, setPDF] = useState()
+ const handleOpenDialog = () => {
+ setOpenDialog(true);
+ }
+ const handleCloseDialog = () => {
+ setOpenDialog(false);
+ }
+
function getExtention(filename) {
var parts = filename.split('.');
return parts[parts.length - 1]
@@ -79,7 +91,9 @@ function ModuleEditor(props) {
const onSubmit = (e) => {
e.preventDefault()
if (!title || !type || !description) {
- alert('Please enter all required fields')
+ setDialogText("Please enter all required fields.")
+ handleOpenDialog()
+ //alert('Please enter all required fields')
return
}
@@ -90,9 +104,11 @@ function ModuleEditor(props) {
quiz = JSON.parse(sessionStorage.getItem("quiz"))
sessionStorage.clear()
onFinish({ title, type, description, quiz, gradeToPass })
- } else if (type === 'PDF' && pdf !== null && typeof (pdf) !== 'undefined') {
- if (isPDF(pdf.name) === false) {
- alert("File must be a PDF")
+ }else if(type === 'PDF' && pdf !== null && typeof(pdf) !== 'undefined'){
+ if(isPDF(pdf.name) === false){
+ setDialogText("File must be a PDF")
+ handleOpenDialog()
+ //alert("File must be a PDF")
} else {
console.log('works for PDF')
onFinish({ title, type, description, pdf })
@@ -100,10 +116,12 @@ function ModuleEditor(props) {
} else if (type === 'File' && file !== null && typeof (file) !== 'undefined') {
console.log('works for File')
onFinish({ title, type, description, file })
-
- } else if (type === 'Video' && video !== null && typeof (video) !== 'undefined') {
- if (isVideo(video.name) === false) {
- alert("File must be a video")
+
+ }else if(type === 'Video' && video !== null && typeof(video) !== 'undefined'){
+ if(isVideo(video.name) === false){
+ setDialogText("File must be a video.")
+ handleOpenDialog()
+ //alert("File must be a video")
} else {
console.log('works for Video')
onFinish({ title, type, description, video })
@@ -113,7 +131,9 @@ function ModuleEditor(props) {
onFinish({ title, type, description })
}
else {
- alert("Please attach proper file corresponding to module type.")
+ setDialogText("Please attach proper file corresponding to module type.")
+ handleOpenDialog()
+ //alert("Please attach proper file corresponding to module type.")
}
}
@@ -160,7 +180,9 @@ function ModuleEditor(props) {
// Input contains non-alphanumeric values so we must alert the user to rename the file
if (isValid === false) {
- alert('Invalid file type. Please upload a PDF for which name is alphanumeric and has no spaces.')
+ setDialogText("Invalid file type. Please upload a PDF for which name is alphanumeric and has no spaces.")
+ handleOpenDialog()
+ //alert('Invalid file type. Please upload a PDF for which name is alphanumeric and has no spaces.')
return
}
@@ -216,7 +238,9 @@ function ModuleEditor(props) {
// Input contains non-alphanumeric values so we must alert the user to rename the file
if (isValid === false) {
- alert('Invalid file type. Please upload a file for which name is alphanumeric and has no spaces.')
+ setDialogText("Invalid file type. Please upload a file for which name is alphanumeric and has no spaces.")
+ handleOpenDialog()
+ //alert('Invalid file type. Please upload a file for which name is alphanumeric and has no spaces.')
return
}
@@ -271,7 +295,9 @@ function ModuleEditor(props) {
// Input contains non-alphanumeric values so we must alert the user to rename the file
if (isValid === false) {
- alert('Invalid file type. Please upload a video for which name is alphanumeric and has no spaces.')
+ setDialogText("Invalid file type. Please upload a video for which name is alphanumeric and has no spaces.")
+ handleOpenDialog()
+ //alert('Invalid file type. Please upload a video for which name is alphanumeric and has no spaces.')
return
}
@@ -311,7 +337,7 @@ function ModuleEditor(props) {
if (data2.message === "unauthorized") {
props.history.push('dashboard');
} else if (data2.status === 'Success') {
- alert("Successfully Edited video module")
+ alert("Successfully Edited video module.")
props.history.push('/course/' + courseID)
} //else need to do something, not sure what rn
} else { // this is to check if there are errors not being addressed already
@@ -336,7 +362,7 @@ function ModuleEditor(props) {
if (data.message === "unauthorized") {
props.history.push('dashboard');
} else if (data.message === undefined) {
- alert('worked')
+ alert('Success.')
props.history.push('/course/' + courseID)
}
else { // this is to check if there are errors not being addressed already
@@ -423,6 +449,14 @@ function ModuleEditor(props) {
+
)
}
diff --git a/frontend/toolkit-webapp/src/pages/MyCourses.js b/frontend/toolkit-webapp/src/pages/MyCourses.js
index 98ac52c..415ceca 100644
--- a/frontend/toolkit-webapp/src/pages/MyCourses.js
+++ b/frontend/toolkit-webapp/src/pages/MyCourses.js
@@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react'
import { Button, Card, CardActions, Container, CssBaseline, Divider, makeStyles, Grid, CardMedia, CardContent, Typography } from '@material-ui/core'
+import { Dialog, DialogTitle, DialogActions, DialogContent } from '@material-ui/core'
import config from '../config.json'
import TopNavBar from '../components/TopNavBar'
// import Pagination from '@material-ui/lab/Pagination'
@@ -10,6 +11,7 @@ import { Link } from '@material-ui/core';
const MyCourses = (props) => {
const [courses, setCourses] = useState([])
const [searchQuery, setSearchQuery] = useState('')
+ const [openDialog, setOpenDialog] = useState(false);
const classes = myCoursesStyles()
@@ -54,7 +56,16 @@ const MyCourses = (props) => {
}
}
- const removeEnrollment = async (id) => {
+ const handleOpenDialog = () => {
+ setOpenDialog(true);
+ }
+ const handleCloseDialog = () => {
+ setOpenDialog(false);
+ };
+
+
+ const removeEnrollment = async (id) =>
+ {
let res = undefined
const token = localStorage.getItem("token");
@@ -131,11 +142,35 @@ const MyCourses = (props) => {
- { if (window.confirm('Are you sure you wish to disenroll? Your progress may be lost.')) removeEnrollment(course._id) }}>
+
Disenroll Course
+ {openDialog === true ?
+
+
+
+
+
+ Are you sure you wish to disenroll from this course? Your progress may be lost.
+
+