Added frontend validation in the survey without backend

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)

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>
+    </>
+  );
+}

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("/api/protected/umfrage", {
-
-      authFetch("/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"