Added frontend validation in the survey without backend

This commit is contained in:
cami 2021-07-05 01:07:50 +02:00
parent 8ca90625b7
commit 6e9219fa7c
3 changed files with 51 additions and 10 deletions

View file

@ -162,7 +162,7 @@ def register():
return ret, 409 return ret, 409
@app.route('/umfrage', methods=['POST']) @app.route('/api/protected/umfrage', methods=['POST'])
@flask_praetorian.auth_required @flask_praetorian.auth_required
def survey(): def survey():
req = flask.request.get_json(force=True) req = flask.request.get_json(force=True)

View file

@ -0,0 +1,10 @@
import React from "react";
import "../App.css";
export default function ErrorMessage(props) {
return (
<>
<p className="errorMessage">{props.message}</p>
</>
);
}

View file

@ -6,15 +6,28 @@ import Footer from "../../Footer";
import InputField from "../InputField"; import InputField from "../InputField";
import SubmitField from "../SubmitField"; import SubmitField from "../SubmitField";
import { authFetch } from "../../auth/AuthProvider"; import { authFetch } from "../../auth/AuthProvider";
import ErrorMessage from "../ErrorMessage";
export default function Umfrage() { export default function Umfrage() {
/* values from survey */
const [age, setAge] = useState(""); const [age, setAge] = useState("");
const [gender, setGender] = useState(""); const [gender, setGender] = useState("");
const [education, setEducation] = useState(""); const [education, setEducation] = useState("");
const [skills, setSkills] = 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 surveyIsValid = true;
let errorMessage = "";
const onSubmitClick = (e) => { const onSubmitClick = (e) => {
e.preventDefault(); e.preventDefault();
@ -25,32 +38,46 @@ export default function Umfrage() {
skills: skills, skills: skills,
}; };
setIsAgeOk(true)
setIsGenderOk(true)
setIsEducationOk(true)
setIsSkillsOk(true)
if (!Number(age)) { if (!Number(age)) {
errorMessage += "age is not a number\n"; setAgeErrorMessage("Das Alter muss als Zahl angegeben werden.");
surveyIsValid = false; surveyIsValid = false;
setIsAgeOk(false);
} }
if (gender === "DEFAULT" || gender === "") { if (gender === "DEFAULT" || gender === "") {
errorMessage += "choose gender\n"; setGenderErrorMessage(
"Bitte wähle eine der Optionen für dein Geschlecht aus."
);
surveyIsValid = false; surveyIsValid = false;
setIsGenderOk(false);
} }
if (education === "DEFAULT" || education === "") { if (education === "DEFAULT" || education === "") {
errorMessage += "choose edu\n"; setEducationErrorMessage(
"Bitte wähle eine der Optionen zu deiner Ausbildung aus."
);
surveyIsValid = false; surveyIsValid = false;
setIsEducationOk(false);
} }
if (skills === "DEFAULT" || skills === "") { if (skills === "DEFAULT" || skills === "") {
errorMessage += "choose skills\n"; setSkillsErrorMessage(
"Bitte wähle eine der Optionen zu den Fähigkeiten aus"
);
surveyIsValid = false; surveyIsValid = false;
setIsSkillsOk(false);
} }
if (surveyIsValid === true) { if (surveyIsValid === true) {
console.log(opts); authFetch("/api/protected/umfrage", {
authFetch("/umfrage", {
method: "post", method: "post",
body: JSON.stringify(opts), body: JSON.stringify(opts),
}); });
} else { } 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" className="input-field"
LabelName="Wie alt bist du? (Alter in Jahren)" LabelName="Wie alt bist du? (Alter in Jahren)"
/> />
{!isAgeOk && <ErrorMessage message={ageErrorMessage} />}
<div className="input-field"> <div className="input-field">
<label htmlFor="gender">Welches Geschlecht hast du?</label> <br /> <label htmlFor="gender">Welches Geschlecht hast du?</label> <br />
<select <select
@ -113,6 +141,7 @@ export default function Umfrage() {
<option value="sex_na">Keine Angabe</option> <option value="sex_na">Keine Angabe</option>
</select> </select>
</div> </div>
{!isGenderOk && <ErrorMessage message={genderErrorMessage} />}
<div className="input-field"> <div className="input-field">
<label htmlFor="education"> <label htmlFor="education">
Welches ist deine höchste abgeschlossene Ausbildung? Welches ist deine höchste abgeschlossene Ausbildung?
@ -135,6 +164,7 @@ export default function Umfrage() {
<option>Keine Angabe</option> <option>Keine Angabe</option>
</select> </select>
</div> </div>
{!isEducationOk && <ErrorMessage message={genderErrorMessage} />}
<div className="input-field"> <div className="input-field">
<label htmlFor="itskills"> <label htmlFor="itskills">
Wie schätzt du deine Kompetenzen im Bereich der Informatik als Wie schätzt du deine Kompetenzen im Bereich der Informatik als
@ -158,6 +188,7 @@ export default function Umfrage() {
<option>Keine Angabe</option> <option>Keine Angabe</option>
</select> </select>
</div> </div>
{!isSkillsOk && <ErrorMessage message={skillsErrorMessage} />}
<SubmitField <SubmitField
InputName="Umfrage abschicken" InputName="Umfrage abschicken"
InputValue="Umfrage abschicken" InputValue="Umfrage abschicken"