Add errormessage if username or password are not correct

frontend/src/components/pages/Study.jsx

@@ -3,6 +3,7 @@ import "../../App.css";
 import Footer from "../../Footer";
 import InputField from "../InputField";
 import SubmitField from "../SubmitField";
+import ErrorMessage from "../ErrorMessage";
 import { Logger } from "@behametrics/logger-web";
 import { Button } from "../Button";
 import BehaviorStudyInfo from "../BehaviorStudyInfo";
@@ -24,6 +25,10 @@ export default function Study() {
     END: "end",
   };
   const [state, setState] = useState(STATES.START);
+  const [isInputCorrect, setIsInputCorrect] = useState(true);
+
+  const errorText =
+    "Das Passwort und der Benutzername stimmen nicht überein. Bitte prüfen Sie, dass Sie das Passwort richtig abgetippt und den Benutzernamen richtig eingegeben haben.";
 
   useEffect(() => {
     _logger.current = new Logger({
@@ -109,28 +114,44 @@ export default function Study() {
     handleLoggerOn();
   };
 
+  const resetInputValues = () => {
+    let inputElements = document.querySelectorAll('div input:not([type="submit"])');
+    for (let i=0; i < inputElements.length; i++){
+      inputElements[i].value = ""
+
+    }
+  };
+
   const handleClickAtStepNormal = () => {
     if (checkIfValuesAreCorrect()) {
       receiveRandomPassword();
+      setIsInputCorrect(true);
       setState(STATES.PHONE);
+    } else {
+      setIsInputCorrect(false);
+      resetInputValues();
     }
   };
 
   const handleClickAtStepPhone = () => {
     if (checkIfValuesAreCorrect()) {
       receiveRandomPassword();
+      setIsInputCorrect(true);
       setState(STATES.STANDING);
     } else {
-      console.log("Passwort und Benutzername stimmen nicht.");
+      setIsInputCorrect(false);
+      resetInputValues();
     }
   };
 
   const handleClickAtStepStanding = () => {
     if (checkIfValuesAreCorrect()) {
+      setIsInputCorrect(true);
       setState(STATES.END);
       handleLoggerOff();
     } else {
-      console.log("Passwort und Benutzername stimmen nicht.");
+      setIsInputCorrect(false);
+      resetInputValues();
     }
   };
 
@@ -151,8 +172,9 @@ export default function Study() {
 
   const study_normal = (
     <>
-      <BehaviorNormal genPassword={genPassword} />
+      <BehaviorNormal onCopy={handleOnCopyEvent} genPassword={genPassword} />
-      <form id="behaviorNormal">
+      {!isInputCorrect && <ErrorMessage message={errorText} />}
+      <div>
         <InputField
           LabelName="Benutzername"
           onChange={handleUsernameChange}
@@ -175,14 +197,15 @@ export default function Study() {
           InputName="Weiter"
           onClick={handleClickAtStepNormal}
         />
-      </form>
+      </div>
     </>
   );
 
   const study_phone = (
     <>
       <BehaviorPhone genPassword={genPassword} />
-      <form id="behaviorPhone">
+      {!isInputCorrect && <ErrorMessage message={errorText} />}
+      <div>
         <InputField
           LabelName="Benutzername"
           onChange={handleUsernameChange}
@@ -205,14 +228,15 @@ export default function Study() {
           InputName="Weiter"
           onClick={handleClickAtStepPhone}
         />
-      </form>
+      </div>
     </>
   );
 
   const study_standing = (
     <>
       <BehaviorStanding genPassword={genPassword} />
-      <form id="behaviorStanding">
+      {!isInputCorrect && <ErrorMessage message={errorText} />}
+      <div>
         <InputField
           LabelName="Benutzername"
           onChange={handleUsernameChange}
@@ -235,7 +259,7 @@ export default function Study() {
           InputName="quit"
           onClick={handleClickAtStepStanding}
         />
-      </form>
+      </div>
     </>
   );