From 6e9219fa7cbe7cfff5fa1a939d4e8bc5d3cd1920 Mon Sep 17 00:00:00 2001
From: cami <cami+giteaspcodes@mailbox.org>
Date: Mon, 5 Jul 2021 01:07:50 +0200
Subject: [PATCH 1/4] Added frontend validation in the survey without backend

---
 backend/src/app.py                       |  2 +-
 frontend/src/components/ErrorMessage.js  | 10 +++++
 frontend/src/components/pages/Umfrage.js | 49 +++++++++++++++++++-----
 3 files changed, 51 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/components/ErrorMessage.js

diff --git a/backend/src/app.py b/backend/src/app.py
index 822088c..4d73f8e 100644
--- a/backend/src/app.py
+++ b/backend/src/app.py
@@ -162,7 +162,7 @@ def register():
         return ret, 409
 
 
-@app.route('/umfrage', methods=['POST'])
+@app.route('/api/protected/umfrage', methods=['POST'])
 @flask_praetorian.auth_required
 def survey():
     req = flask.request.get_json(force=True)
diff --git a/frontend/src/components/ErrorMessage.js b/frontend/src/components/ErrorMessage.js
new file mode 100644
index 0000000..41c2798
--- /dev/null
+++ b/frontend/src/components/ErrorMessage.js
@@ -0,0 +1,10 @@
+import React from "react";
+import "../App.css";
+
+export default function ErrorMessage(props) {
+  return (
+    <>
+    <p className="errorMessage">{props.message}</p>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/pages/Umfrage.js b/frontend/src/components/pages/Umfrage.js
index c810ea1..24eb06e 100644
--- a/frontend/src/components/pages/Umfrage.js
+++ b/frontend/src/components/pages/Umfrage.js
@@ -6,15 +6,28 @@ import Footer from "../../Footer";
 import InputField from "../InputField";
 import SubmitField from "../SubmitField";
 import { authFetch } from "../../auth/AuthProvider";
+import ErrorMessage from "../ErrorMessage";
 
 export default function Umfrage() {
+  /* values from survey */
   const [age, setAge] = useState("");
   const [gender, setGender] = useState("");
   const [education, setEducation] = useState("");
   const [skills, setSkills] = useState("");
 
+  /* error messages */
+  const [ageErrorMessage, setAgeErrorMessage] = useState("");
+  const [genderErrorMessage, setGenderErrorMessage] = useState("");
+  const [educationErrorMessage, setEducationErrorMessage] = useState("");
+  const [skillsErrorMessage, setSkillsErrorMessage] = useState("");
+
+  /* boolean if the values are ok */
+  const [isAgeOk, setIsAgeOk] = useState("");
+  const [isGenderOk, setIsGenderOk] = useState("");
+  const [isEducationOk, setIsEducationOk] = useState("");
+  const [isSkillsOk, setIsSkillsOk] = useState("");
+
   let surveyIsValid = true;
-  let errorMessage = "";
 
   const onSubmitClick = (e) => {
     e.preventDefault();
@@ -25,32 +38,46 @@ export default function Umfrage() {
       skills: skills,
     };
 
+    setIsAgeOk(true)
+    setIsGenderOk(true)
+    setIsEducationOk(true)
+    setIsSkillsOk(true)
+
     if (!Number(age)) {
-      errorMessage += "age is not a number\n";
+      setAgeErrorMessage("Das Alter muss als Zahl angegeben werden.");
       surveyIsValid = false;
+      setIsAgeOk(false);
     }
     if (gender === "DEFAULT" || gender === "") {
-      errorMessage += "choose gender\n";
+      setGenderErrorMessage(
+        "Bitte wähle eine der Optionen für dein Geschlecht aus."
+      );
       surveyIsValid = false;
+      setIsGenderOk(false);
     }
     if (education === "DEFAULT" || education === "") {
-      errorMessage += "choose edu\n";
+      setEducationErrorMessage(
+        "Bitte wähle eine der Optionen zu deiner Ausbildung aus."
+      );
       surveyIsValid = false;
+      setIsEducationOk(false);
     }
     if (skills === "DEFAULT" || skills === "") {
-      errorMessage += "choose skills\n";
+      setSkillsErrorMessage(
+        "Bitte wähle eine der Optionen zu den Fähigkeiten aus"
+      );
       surveyIsValid = false;
+      setIsSkillsOk(false);
     }
 
     if (surveyIsValid === true) {
-      console.log(opts);
-
-      authFetch("/umfrage", {
+      authFetch("/api/protected/umfrage", {
         method: "post",
         body: JSON.stringify(opts),
       });
     } else {
-      console.log(errorMessage);
+      // TODO: Write what is wrong with the things
+      console.log(setAgeErrorMessage);
     }
   };
 
@@ -96,6 +123,7 @@ export default function Umfrage() {
             className="input-field"
             LabelName="Wie alt bist du? (Alter in Jahren)"
           />
+          {!isAgeOk && <ErrorMessage message={ageErrorMessage} />}
           <div className="input-field">
             <label htmlFor="gender">Welches Geschlecht hast du?</label> <br />
             <select
@@ -113,6 +141,7 @@ export default function Umfrage() {
               <option value="sex_na">Keine Angabe</option>
             </select>
           </div>
+          {!isGenderOk && <ErrorMessage message={genderErrorMessage} />}
           <div className="input-field">
             <label htmlFor="education">
               Welches ist deine höchste abgeschlossene Ausbildung?
@@ -135,6 +164,7 @@ export default function Umfrage() {
               <option>Keine Angabe</option>
             </select>
           </div>
+          {!isEducationOk && <ErrorMessage message={genderErrorMessage} />}
           <div className="input-field">
             <label htmlFor="itskills">
               Wie schätzt du deine Kompetenzen im Bereich der Informatik als
@@ -158,6 +188,7 @@ export default function Umfrage() {
               <option>Keine Angabe</option>
             </select>
           </div>
+          {!isSkillsOk && <ErrorMessage message={skillsErrorMessage} />}
           <SubmitField
             InputName="Umfrage abschicken"
             InputValue="Umfrage abschicken"

From 0ecb73cbe72477ede166b5085df55719be205582 Mon Sep 17 00:00:00 2001
From: cami <cami+giteaspcodes@mailbox.org>
Date: Mon, 5 Jul 2021 01:19:26 +0200
Subject: [PATCH 2/4] Use const for survey validity and change smaller things

---
 frontend/src/components/pages/Umfrage.js | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/pages/Umfrage.js b/frontend/src/components/pages/Umfrage.js
index 24eb06e..5538291 100644
--- a/frontend/src/components/pages/Umfrage.js
+++ b/frontend/src/components/pages/Umfrage.js
@@ -27,7 +27,8 @@ export default function Umfrage() {
   const [isEducationOk, setIsEducationOk] = useState("");
   const [isSkillsOk, setIsSkillsOk] = useState("");
 
-  let surveyIsValid = true;
+  /* genereal check if survey is valid */
+  const [isSurveyValid, setIsSurveyValid] = useState("");
 
   const onSubmitClick = (e) => {
     e.preventDefault();
@@ -38,39 +39,39 @@ export default function Umfrage() {
       skills: skills,
     };
 
-    setIsAgeOk(true)
-    setIsGenderOk(true)
-    setIsEducationOk(true)
-    setIsSkillsOk(true)
+    setIsAgeOk(true);
+    setIsGenderOk(true);
+    setIsEducationOk(true);
+    setIsSkillsOk(true);
 
     if (!Number(age)) {
       setAgeErrorMessage("Das Alter muss als Zahl angegeben werden.");
-      surveyIsValid = false;
+      setIsSurveyValid(false);
       setIsAgeOk(false);
     }
     if (gender === "DEFAULT" || gender === "") {
       setGenderErrorMessage(
         "Bitte wähle eine der Optionen für dein Geschlecht aus."
       );
-      surveyIsValid = false;
+      setIsSurveyValid(false);
       setIsGenderOk(false);
     }
     if (education === "DEFAULT" || education === "") {
       setEducationErrorMessage(
         "Bitte wähle eine der Optionen zu deiner Ausbildung aus."
       );
-      surveyIsValid = false;
+      setIsSurveyValid(false);
       setIsEducationOk(false);
     }
     if (skills === "DEFAULT" || skills === "") {
       setSkillsErrorMessage(
         "Bitte wähle eine der Optionen zu den Fähigkeiten aus"
       );
-      surveyIsValid = false;
+      setIsSurveyValid(false);
       setIsSkillsOk(false);
     }
 
-    if (surveyIsValid === true) {
+    if (isSurveyValid === true) {
       authFetch("/api/protected/umfrage", {
         method: "post",
         body: JSON.stringify(opts),
@@ -164,7 +165,7 @@ export default function Umfrage() {
               <option>Keine Angabe</option>
             </select>
           </div>
-          {!isEducationOk && <ErrorMessage message={genderErrorMessage} />}
+          {!isEducationOk && <ErrorMessage message={educationErrorMessage} />}
           <div className="input-field">
             <label htmlFor="itskills">
               Wie schätzt du deine Kompetenzen im Bereich der Informatik als

From 1ce5b467be8f67913d38b45f3c315115cbba85c5 Mon Sep 17 00:00:00 2001
From: cami <cami+giteaspcodes@mailbox.org>
Date: Mon, 5 Jul 2021 01:32:23 +0200
Subject: [PATCH 3/4] Removed unneccessary else statement

---
 frontend/src/components/pages/Umfrage.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend/src/components/pages/Umfrage.js b/frontend/src/components/pages/Umfrage.js
index 5538291..26aac1a 100644
--- a/frontend/src/components/pages/Umfrage.js
+++ b/frontend/src/components/pages/Umfrage.js
@@ -76,9 +76,6 @@ export default function Umfrage() {
         method: "post",
         body: JSON.stringify(opts),
       });
-    } else {
-      // TODO: Write what is wrong with the things
-      console.log(setAgeErrorMessage);
     }
   };
 

From 699b6fae522828a4cf43ac7494227388e13005c8 Mon Sep 17 00:00:00 2001
From: cami <cami+giteaspcodes@mailbox.org>
Date: Mon, 5 Jul 2021 17:51:49 +0200
Subject: [PATCH 4/4] Add backend validation if the survey input is correct

---
 backend/src/app.py                       | 64 +++++++++++++++++++++---
 frontend/src/components/pages/Umfrage.js | 48 +++++++++++++-----
 2 files changed, 91 insertions(+), 21 deletions(-)

diff --git a/backend/src/app.py b/backend/src/app.py
index 4d73f8e..49b4da4 100644
--- a/backend/src/app.py
+++ b/backend/src/app.py
@@ -172,18 +172,66 @@ def survey():
 
     # get data from the survey and write it to the database
 
+    # placeholder if the survey is valid
+    is_survey_valid = True
+
+    # Check age if it's numeric
     age = req.get('age', None)
+    if not age.isnumeric():
+        is_survey_valid = False
+
+    # check gender possibilites
     gender = req.get('gender', None)
+    possible_genders = [
+        "male",
+        "female",
+        "divers",
+        "sex_na"
+    ]
+    if gender not in possible_genders:
+        is_survey_valid = False
+
+    # check education possibilities
     education = req.get('education', None)
+    possible_education = [
+        "edu_lehre",
+        "edu_gymnasium",
+        "edu_berufsmatura",
+        "edu_bachelor",
+        "edu_Master",
+        "edu_na"
+    ]
+    if education not in possible_education:
+        is_survey_valid = False
+
+    # check skills values
     skills = req.get('skills', None)
-    user_db = User.query.filter_by(id=id_req).first()
-    user_db.age = age
-    user_db.gender = gender
-    user_db.education = education
-    user_db.skills = skills
-    db.session.commit()
-    ret = {'message': 'Umfrage freigestellt'}
-    return ret, 200
+    possible_skills = [
+        "skills_sehr_gut",
+        "skills_gut",
+        "skills_mittel",
+        "skills_nicht_so_good",
+        "skills_garnicht",
+        "skills_na"
+    ]
+
+    if skills not in possible_skills:
+        is_survey_valid = False
+
+    if is_survey_valid:
+        user_db = User.query.filter_by(id=id_req).first()
+        user_db.age = age
+        user_db.gender = gender
+        user_db.education = education
+        user_db.skills = skills
+        db.session.commit()
+        print(req)
+        ret = {'message': 'Vielen Dank für das Ausfüllen der Umfrage.'}
+        return ret, 200
+    else:
+        ret = {
+            'message': 'Einige der Felder stimmen nicht überein und müssen angepasst werden.'}
+        return ret, 400
 
 
 @app.route('/time')
diff --git a/frontend/src/components/pages/Umfrage.js b/frontend/src/components/pages/Umfrage.js
index 26aac1a..fc83439 100644
--- a/frontend/src/components/pages/Umfrage.js
+++ b/frontend/src/components/pages/Umfrage.js
@@ -21,6 +21,10 @@ export default function Umfrage() {
   const [educationErrorMessage, setEducationErrorMessage] = useState("");
   const [skillsErrorMessage, setSkillsErrorMessage] = useState("");
 
+  const [backendErrorMessage, setBackendErrorMessage] = useState("");
+  const [backendSuccessMessage, setBackendSuccessMessage] = useState("");
+  const [isSurveyValidBackend, setIsSurveyValidBackend] = useState("");
+
   /* boolean if the values are ok */
   const [isAgeOk, setIsAgeOk] = useState("");
   const [isGenderOk, setIsGenderOk] = useState("");
@@ -71,10 +75,23 @@ export default function Umfrage() {
       setIsSkillsOk(false);
     }
 
+    setIsSurveyValid(true);
     if (isSurveyValid === true) {
       authFetch("/api/protected/umfrage", {
         method: "post",
         body: JSON.stringify(opts),
+      }).then((response) => {
+        if (response.status === 200) {
+          response.json().then((r) => {
+            setBackendSuccessMessage(r.message);
+            setIsSurveyValidBackend(true);
+          });
+        } else {
+          response.json().then((r) => {
+            setBackendErrorMessage(r.message);
+            setIsSurveyValidBackend(false);
+          });
+        }
       });
     }
   };
@@ -135,7 +152,7 @@ export default function Umfrage() {
               </option>
               <option value="male">Männlich</option>
               <option value="female">Weiblich</option>
-              <option value="divers">divers</option>
+              <option value="divers">Divers</option>
               <option value="sex_na">Keine Angabe</option>
             </select>
           </div>
@@ -154,12 +171,12 @@ export default function Umfrage() {
               <option disabled value="DEFAULT">
                 -- Bitte wähle deine Ausbildung aus --
               </option>
-              <option>Berufslehre</option>
-              <option>Gymnasiale Maturität</option>
-              <option>Berufsmatura</option>
-              <option>Bachelor</option>
-              <option>Master oder höher</option>
-              <option>Keine Angabe</option>
+              <option value="edu_lehre">Berufslehre</option>
+              <option value="edu_gymnasium">Gymnasiale Maturität</option>
+              <option value="edu_berufsmatura">Berufsmatura</option>
+              <option value="edu_bachelor">Bachelor</option>
+              <option value="edu_Master">Master oder höher</option>
+              <option value="edu_na">Keine Angabe</option>
             </select>
           </div>
           {!isEducationOk && <ErrorMessage message={educationErrorMessage} />}
@@ -178,12 +195,12 @@ export default function Umfrage() {
               <option disabled value="DEFAULT">
                 -- Bitte wähle etwas aus --
               </option>
-              <option>Sehr gut</option>
-              <option>Gut</option>
-              <option>Mittel</option>
-              <option>Eher nicht so gut</option>
-              <option>Gar nicht gut</option>
-              <option>Keine Angabe</option>
+              <option value="skills_sehr_gut">Sehr gut</option>
+              <option value="skills_gut">Gut</option>
+              <option value="skills_mittel">Mittel</option>
+              <option value="skills_nicht_so_good">Eher nicht so gut</option>
+              <option value="skills_garnicht">Gar nicht gut</option>
+              <option value="skills_na">Keine Angabe</option>
             </select>
           </div>
           {!isSkillsOk && <ErrorMessage message={skillsErrorMessage} />}
@@ -194,6 +211,11 @@ export default function Umfrage() {
             onClick={onSubmitClick}
           />
         </form>
+        {!isSurveyValidBackend ? (
+          <ErrorMessage message={backendErrorMessage} />
+        ) : (
+          <p>{backendSuccessMessage}</p>
+        )}
       </div>
       <Footer />
     </>