Merge pull request 'Fix various issues in the frontend (fix #197 & fix #192)' (#200) from frontend/fix-paste-errormessage into main

Reviewed-on: #200

frontend/src/App.css

@@ -95,4 +95,5 @@ h1 {
 
 .generated-password {
   font-weight: bold;
+  user-select: none;
 }

frontend/src/components/BehaviorNormal.jsx

@@ -10,7 +10,6 @@ export default function BehaviorNormal(props) {
         Passwort eingeben. Verhalten Sie sich einfach so, als ob Sie sich
         normalerweise anmelden.
       </p>
-      {console.log("props", props)}
       <GeneratedPassword genPassword={props.genPassword} />
     </>
   );

frontend/src/components/GeneratedPassword.jsx

@@ -9,9 +9,8 @@ export default function GeneratedPassword(props) {
 
   return (
     <>
-      <p onCopy={handleOnCopyEvent}>
+      <p>
         Das Passwort für diese Situation lautet:{" "}
-        {console.log("component genpw, genpassword", props.genPassword)}
         <span className="generated-password">{props.genPassword}</span>
       </p>
     </>

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({
@@ -73,7 +78,10 @@ export default function Study() {
 
   const handleOnPasteEvent = (e) => {
     e.preventDefault();
-    console.log("paste not allowed");
+    return false;
+  };
+  const handleOnCopyEvent = (e) => {
+    e.preventDefault();
     return false;
   };
 
@@ -88,7 +96,6 @@ export default function Study() {
       response.json().then((resp) => {
         console.log(resp.random_password);
         setGenPassword(resp.random_password);
-        console.log("rcv pw; print genPassword", genPassword);
       });
     });
   };
@@ -98,7 +105,6 @@ export default function Study() {
   };
 
   const checkIfValuesAreCorrect = () => {
-    console.log(checkIfPasswordIsCorrect());
     return checkIfPasswordIsCorrect() && checkIfUsernameIsCorrect();
   };
 
@@ -108,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();
     }
   };
 
@@ -150,8 +172,9 @@ export default function Study() {
 
   const study_normal = (
     <>
-      <BehaviorNormal genPassword={genPassword} />
-      <form id="behaviorNormal">
+      <BehaviorNormal onCopy={handleOnCopyEvent} genPassword={genPassword} />
+      {!isInputCorrect && <ErrorMessage message={errorText} />}
+      <div>
         <InputField
           LabelName="Benutzername"
           onChange={handleUsernameChange}
@@ -165,7 +188,7 @@ export default function Study() {
           onChange={handlePasswordChange}
           InputType="password"
           InputName="Passwort"
-          InputPlaceHolder="Benutzername"
+          InputPlaceHolder="Passwort"
           onPaste={handleOnPasteEvent}
         />
         <SubmitField
@@ -174,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}
@@ -195,7 +219,7 @@ export default function Study() {
           onChange={handlePasswordChange}
           InputType="password"
           InputName="Passwort"
-          InputPlaceHolder="Benutzername"
+          InputPlaceHolder="Passwort"
           onPaste={handleOnPasteEvent}
         />
         <SubmitField
@@ -204,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}
@@ -234,7 +259,7 @@ export default function Study() {
           InputName="quit"
           onClick={handleClickAtStepStanding}
         />
-      </form>
+      </div>
     </>
   );