frontend/src/components/pages/BehaviorNormal.js

@@ -4,6 +4,7 @@ import Footer from "../../Footer";
 import InputField from "../InputField";
 import SubmitField from "../SubmitField";
 import { Logger } from "@behametrics/logger-web";
+import BehaviorStudyInfo from "./BehaviorStudyInfo";
 
 export default function BehaviorNormal() {
   let username = "";
@@ -16,12 +17,12 @@ export default function BehaviorNormal() {
     password = tmp_password;
   };
 
-  const [genPassword, setGenPassword] = useState("")
+  const [genPassword, setGenPassword] = useState("");
 
   let logger = new Logger({
     //inputs: ["cursor", "wheel", "keyboard", "touch"],
     inputs: ["keyboard"],
-    apiUrl: "http://localhost:5000",
+    // apiUrl: "http://localhost:5000",
     logToConsole: true,
   });
 
@@ -84,8 +85,8 @@ export default function BehaviorNormal() {
       method: "get",
     }).then((response) => {
       response.json().then((resp) => {
-        setGenPassword(resp.password)
+        setGenPassword(resp.password);
-      })
+      });
     });
   }, []);
 
@@ -94,19 +95,15 @@ export default function BehaviorNormal() {
       <div className="sitePage">
         <h1>Studie</h1>
         <button onClick={handleOn}>LOGGER StaRTEN</button>
-        <p>
+        <BehaviorStudyInfo />
-          Nachfolgend werden Sie einige Schritte durchlaufen, um ihre
-          Nutzerinteraktion messen zu können. Verwenden Sie hierbei jeweils
-          ihren Benutzernamen, welchen Sie bereits zuvor genutzt haben. Das
-          Passwort wird jeweils generiert.
-        </p>
         <p>
           Zu Beginn geht es darum, dass Sie ganz normal den Benutzernamen und
           das Passwort eingeben. Verhalten Sie sich einfach so, als ob Sie sich
           normalerweise anmelden.
         </p>
         <p onCopy={handleOnCopyEvent}>
-          Das Passwort für diese Situation lautet: <span className="generated-password">{genPassword}</span>
+          Das Passwort für diese Situation lautet:{" "}
+          <span className="generated-password">{genPassword}</span>
         </p>
         <form id="behaviorNormal" action="#">
           <InputField

frontend/src/components/pages/BehaviorStudyInfo.js

@@ -0,0 +1,13 @@
+import React from "react";
+import "../../App.css";
+
+export default function BehaviorStudyInfo() {
+  return (
+    <p>
+      Nachfolgend werden Sie einige Schritte durchlaufen, um ihre
+      Nutzerinteraktion messen zu können. Verwenden Sie hierbei jeweils ihren
+      Benutzernamen, welchen Sie bereits zuvor genutzt haben. Das Passwort wird
+      jeweils generiert.
+    </p>
+  );
+}