validation added, theme bug fixed

README.md

@@ -1,6 +1,14 @@
 # Uboard - a web application to find partners for campus events
 IT5007 Project
 
+## Video demo
+[Video demo]()
+<br/>
+
+## Access via public IP address
+http://54.149.15.71:3000/
+<br/>
+
 ## Run on your local machine   
 
 0. Make sure you have installed node and npm
@@ -26,9 +34,9 @@ IT5007 Project
     ```
 
     Go to `localhost:5050/browser`, password: admin   
-    Add a new server with properties:  
-    Port: 5432, Database: postgres, Username: postgres, Password: changeme   
-    Run the sql query in `sql/activity.sql` to initialize the database  
+    Add a new server with properties `Name: Uboard, Port: 5432`  
+    Add a new database with properties `Database: postgres, Username: postgres, Password: changeme`   
+    Using query tool and run the sql query in `sql/activity.sql` to initialize the database  
     <br/>
 
 3. Start back-end server
@@ -59,10 +67,8 @@ IT5007 Project
     npm start
     ```
 
-    The web app should pop up, if not, enter `localhost:3000` in your browser (Chrome is recommended)
+    The web app should pop up, if not, enter `localhost:3000` in your browser
+
 
-## Video
 
-[Presentation video]()
 
-[Set up tutorial]()

frontend/src/Pages/ActivityCreated/ActivityCreated.js

@@ -73,7 +73,7 @@ const Home = () => {
             }
             await setData1(Array.from(activitys))
             await setIsLoading(false);
-        },500)
+        },700)
     }, []);
 
   const dataToHome = (dataFromHeader) => {

frontend/src/Pages/ActivityJoined/ActivityJoined.js

@@ -73,7 +73,7 @@ const Home = () => {
             }
             await setData1(Array.from(activitys))
             await setIsLoading(false);
-        },500)
+        },700)
     }, []);
 
 

frontend/src/Pages/Details/Details.jsx

@@ -87,7 +87,7 @@ const Details = () => {
       }
       await setIsLoading(false);
       console.log(detailCharacter);
-    },500)
+    },700)
   }, []);
 
   // join an activity, create a new application and send to data base
@@ -97,28 +97,33 @@ const Details = () => {
     const applicantId = user
     const activityId = detailCharacter.activityId
 
-    const query =  `mutation createApplication($applicationCreateInput: ApplicationCreateInput, $applicantId: Int, $activityId: Int){
-        createApplication(applicationCreateInput: $applicationCreateInput,
-        applicantId: $applicantId
-        activityId: $activityId
-        ){
-          applicant{
-            userId
-            userName
-          }
-          activity{
-            activityName
-            activityId
+    if(!applicationCreateInput.comments){
+      alert('Comments required!')
+      return
+    } else {
+      const query =  `mutation createApplication($applicationCreateInput: ApplicationCreateInput, $applicantId: Int, $activityId: Int){
+          createApplication(applicationCreateInput: $applicationCreateInput,
+          applicantId: $applicantId
+          activityId: $activityId
+          ){
+            applicant{
+              userId
+              userName
+            }
+            activity{
+              activityName
+              activityId
+            }
           }
-        }
-      }`;
-    const response = await fetch('http://localhost:8080/graphql', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json'},
-      body: JSON.stringify({ query, variables: { applicationCreateInput, applicantId, activityId} })
-    });
-    window.alert("Request sent!")
-    goToHome(navigate)
+        }`;
+      const response = await fetch('http://localhost:8080/graphql', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json'},
+        body: JSON.stringify({ query, variables: { applicationCreateInput, applicantId, activityId} })
+      });
+      window.alert("Request sent!")
+      goToHome(navigate)
+    }
   };
 
   // data to be shown on page, to be passed as props to header component

frontend/src/Pages/create/create.js

@@ -84,9 +84,22 @@ export default function CreateActivity() {
             funds: inputCost,
             requirements: inputRequirements
         }
-        activityCreate(activityCreateInput, userId)
-        window.alert('Successfully created!')
-        goToHome(navigate)
+        // input validation
+        if (!activityCreateInput.activityName ||
+            !activityCreateInput.imageUrl ||
+            !activityCreateInput.startTime ||
+            !activityCreateInput.endTime ||
+            !activityCreateInput.location ||
+            !activityCreateInput.description ||
+            !activityCreateInput.numOfParticipants ||
+            !activityCreateInput.requirements){
+            alert('All information is required!')
+            return
+        } else {
+            activityCreate(activityCreateInput, userId)
+            window.alert('Successfully created!')
+            goToHome(navigate)
+        }    
     };
 
     // data to be shown on page, to be passed as props to header component

frontend/src/Pages/home/Home.jsx

@@ -68,7 +68,7 @@ const Home = () => {
             }
             await setData1(Array.from(activitys))
             await setIsLoading(false);
-        },500)
+        },700)
     }, []);
 
   // load data after searching

frontend/src/Pages/message/message.js

@@ -92,7 +92,7 @@ export default function Message() {
             }
             await setData1(Array.from(applications))
             await setIsLoading(false);
-        },500)
+        },700)
     }, []);
 
     // accept an application

frontend/src/Pages/signIn/signIn.js

@@ -66,7 +66,7 @@ export default function SignInSide(props) {
         password : data.get('password'),
     }
 
-    // This is 2 admin user to test
+    // This is 2 admin users to test
     if (loginInput.email=='[email protected]'){
       setUser(111111)
       localStorage.setItem('user',111111)
@@ -124,7 +124,7 @@ export default function SignInSide(props) {
         <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
           <Box
             sx={{
-              my: 8,
+              my: 12,
               mx: 4,
               display: 'flex',
               flexDirection: 'column',
@@ -158,10 +158,6 @@ export default function SignInSide(props) {
                 id="password"
                 autoComplete="current-password"
               />
-              <FormControlLabel
-                control={<Checkbox value="remember" color="primary" />}
-                label="Remember me"
-              />
               <Button
                 type="submit"
                 fullWidth

frontend/src/Pages/signUp/signUp.js

@@ -27,6 +27,7 @@ const theme = createTheme({
 export default function SignUp() {
   const [isRegistered, setIsRegistered, isRegisteredRef] = useState(false); // state check if current email is registered
   const navigate = useNavigate();
+  var pattern = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/; // email validation regex
 
   // register query
   async function register(userRegisterInput) {
@@ -63,24 +64,38 @@ export default function SignUp() {
       phoneNumber : data.get('phoneNumber'),
       password : data.get('password'),
     }
-    register(userRegisterInput)
-    setTimeout(() => {
-      // check if email is already registered
-      if(isRegisteredRef.current) {
-        window.alert('Email has been already registered');
-        setIsRegistered(false);
-      } else {
-        window.alert('Register successful!');
-        goToSignIn(navigate);
-      }
+    if (!userRegisterInput.userName || 
+        !userRegisterInput.userSchool ||
+        !userRegisterInput.userGrade ||
+        !userRegisterInput.email ||
+        !userRegisterInput.phoneNumber ||
+        !userRegisterInput.password ){
+        alert("All information is required!") // check if all information is provided
+        return
+    } else if (!userRegisterInput.email.match(pattern)) { // email validation
+      alert('Wrong email format!')
       event.target.email.value = "";
-      event.target.phoneNumber.value = "";
-      event.target.password.value = "";
-      event.target.firstName.value = "";
-      event.target.lastName.value = "";
-      event.target.grade.value = ""
-      event.target.school.value = ""
-    }, 1000)
+      return
+    } else {
+      register(userRegisterInput)
+      setTimeout(() => {
+        // check if email is already registered
+        if(isRegisteredRef.current) {
+          window.alert('Email has been already registered!');
+          setIsRegistered(false);
+        } else {
+          window.alert('Register successful!');
+          goToSignIn(navigate);
+        }
+        event.target.email.value = "";
+        event.target.phoneNumber.value = "";
+        event.target.password.value = "";
+        event.target.firstName.value = "";
+        event.target.lastName.value = "";
+        event.target.grade.value = ""
+        event.target.school.value = ""
+      }, 1000)
+    }
   };
 
   return (

frontend/src/components/header.js

@@ -16,7 +16,7 @@ import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
 import Zoom from "@material-ui/core/Zoom";
 import logo from "./logo.png";
 import { useNavigate } from "react-router";
-import { goToHome, goToSignIn, goToCreate, goToMessage, goToActivityCreated, goToActivityJoined } from "../Router/coordenation";
+import { goToHome, goToActivityCreated, goToActivityJoined } from "../Router/coordenation";
 import { setUser } from "./Context";
 
 
@@ -97,6 +97,7 @@ export default function BackToTop({ props, dataToScreen, isDetail, dataToHome})
   return (
     <React.Fragment>
       <CssBaseline />
+
       <AppBar
         style={{
           display: "flex",
@@ -129,7 +130,7 @@ export default function BackToTop({ props, dataToScreen, isDetail, dataToHome})
 
           <IconButton
             color="inherit"
-            onClick={()=> goToCreate(navigate) }>
+            onClick={()=> {window.location.href = '/createActivity' }}> 
           <Avatar sx={{ m: 1, bgcolor: "#F3902F" }}>
             <AddIcon />
           </Avatar>
@@ -156,7 +157,7 @@ export default function BackToTop({ props, dataToScreen, isDetail, dataToHome})
 
           <IconButton
           color="inherit"
-          onClick={()=> goToMessage(navigate) }>
+          onClick={()=> {window.location.href = '/message' } }>
           <Typography variant="h6" color="inherit" component="div">
           Messages
           </Typography>
@@ -167,7 +168,7 @@ export default function BackToTop({ props, dataToScreen, isDetail, dataToHome})
           onClick={()=> {
             setUser(0)
             localStorage.setItem('user', 0)
-            goToSignIn(navigate)
+            window.location.replace('../signIn')
           }}>
           <Typography variant="h6" color="inherit" component="div">
           Log Out