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 ( + <> +

{props.message}

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

+ {!isGenderOk && }
+ {!isEducationOk && }
+ {!isSkillsOk && }