frontend/src/App.js

@@ -12,7 +12,7 @@ import Manual from "./components/pages/Manual";
 import Secret from "./components/pages/Secret";
 import Umfrage from "./components/pages/Umfrage";
 import PrivateRoute from "./auth/PrivateRoute";
-import Study from "./components/pages/Study";
+import BehaviorNormal from "./components/pages/BehaviorNormal";
 
 function App() {
   return (
@@ -28,7 +28,7 @@ function App() {
           <Route path="/register" component={Register} />
           <Route path="/manual" component={Manual} />
           <Route path="/ueber" component={Ueber} />
-          <PrivateRoute path="/study" component={Study} />
+          <PrivateRoute path="/behavior" component={BehaviorNormal} />
           <PrivateRoute path="/secret" component={Secret} />
           <PrivateRoute path="/umfrage" component={Umfrage} />
         </Switch>

frontend/src/components/BehaviorNormal.js

@@ -1,16 +0,0 @@
-import React from "react";
-import "../App.css";
-import GeneratedPassword from "./GeneratedPassword"
-
-export default function BehaviorNormal() {
-  return (
-    <>
-      <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>
-      <GeneratedPassword />
-    </>
-  );
-}

frontend/src/components/BehaviorStudyInfo.js

@@ -1,20 +0,0 @@
-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>
-      <p>
-        Bitte klicken Sie auf weiter, um mit der Studie zu beginnen. Bitte lesen
-        Sie die jeweilige Aufgabe jeweils genau.
-      </p>
-
-    </>
-  );
-}

frontend/src/components/GeneratedPassword.js

@@ -1,29 +0,0 @@
-import React, { useEffect, useState } from "react";
-import "../App.css";
-
-export default function GeneratedPassword() {
-  const [genPassword, setGenPassword] = useState("");
-
-  const handleOnCopyEvent = (e) => {
-    e.preventDefault();
-    return false;
-  };
-
-  useEffect(() => {
-    fetch("/api/protected/rcv_pw", {
-      method: "get",
-    }).then((response) => {
-      response.json().then((resp) => {
-        setGenPassword(resp.password);
-      });
-    });
-  }, []);
-  return (
-    <>
-      <p onCopy={handleOnCopyEvent}>
-        Das Passwort für diese Situation lautet:{" "}
-        <span className="generated-password">{genPassword}</span>
-      </p>
-    </>
-  );
-}

frontend/src/components/HeroSection.js

@@ -5,7 +5,7 @@ import "./HeroSection.css";
 import "@fortawesome/fontawesome-free/css/all.css";
 import { useAuth } from "../auth/AuthProvider";
 
-export default function HeroSection() {
+function HeroSection() {
   const [isLoggedIn] = useAuth();
 
   return (
@@ -17,7 +17,7 @@ export default function HeroSection() {
             className="btns"
             buttonStyle="btn--primary"
             buttonSize="btn--large"
-            newTo="study"
+            newTo="behavior"
           >
             Zur Studie
           </Button>
@@ -53,3 +53,5 @@ export default function HeroSection() {
     </div>
   );
 }
+
+export default HeroSection;

frontend/src/components/pages/BehaviorNormal.js

@@ -1,13 +1,12 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import "../../App.css";
 import Footer from "../../Footer";
 import InputField from "../InputField";
 import SubmitField from "../SubmitField";
 import { Logger } from "@behametrics/logger-web";
-import BehaviorStudyInfo from "../BehaviorStudyInfo";
+import BehaviorStudyInfo from "./BehaviorStudyInfo";
-import BehaviorNormal from "../BehaviorNormal";
 
-export default function Study() {
+export default function BehaviorNormal() {
   let username = "";
   const setUsername = (tmp_username) => {
     username = tmp_username;
@@ -18,22 +17,23 @@ export default function Study() {
     password = tmp_password;
   };
 
+  const [genPassword, setGenPassword] = useState("");
+
   let logger = new Logger({
     //inputs: ["cursor", "wheel", "keyboard", "touch"],
     inputs: ["keyboard"],
-    // apiUrl: "https://behavior.marcocamenzind.ch",
+    apiUrl: "https://behavior.marcocamenzind.ch",
-    apiUrl: "http://localhost:5000",
     logToConsole: true,
   });
 
   logger.init();
 
-  const handleLoggerOff = () => {
+  const handleOff = () => {
     logger.stop();
     console.log("Logger ausgeschaltet");
   };
 
-  const handleLoggerOn = () => {
+  const handleOn = () => {
     logger.start();
     console.log("start logging ");
   };
@@ -46,6 +46,11 @@ export default function Study() {
     setUsername(e.target.value);
   };
 
+  const handleOnCopyEvent = (e) => {
+    e.preventDefault();
+    return false;
+  };
+
   const handleOnPasteEvent = (e) => {
     e.preventDefault();
     return false;
@@ -75,21 +80,31 @@ export default function Study() {
     });
   };
 
+  useEffect(() => {
+    fetch("/api/protected/rcv_pw", {
+      method: "get",
+    }).then((response) => {
+      response.json().then((resp) => {
+        setGenPassword(resp.password);
+      });
+    });
+  }, []);
+
   return (
     <>
       <div className="sitePage">
         <h1>Studie</h1>
-        <button onClick={handleLoggerOn}>LOGGER StaRTEN</button>
+        <button onClick={handleOn}>LOGGER StaRTEN</button>
-        <BehaviorStudyInfo />{" "}
+        <BehaviorStudyInfo />
-        <form id="behaviorNormal" action="#">
+        <p>
-          <SubmitField
+          Zu Beginn geht es darum, dass Sie ganz normal den Benutzernamen und
-            LabelName="Starten mit der Studie"
+          das Passwort eingeben. Verhalten Sie sich einfach so, als ob Sie sich
-            InputValue="next-situation"
+          normalerweise anmelden.
-            InputName="Weiter"
+        </p>
-            onClick={handleLoggerOn}
+        <p onCopy={handleOnCopyEvent}>
-          />
+          Das Passwort für diese Situation lautet:{" "}
-        </form>{" "}
+          <span className="generated-password">{genPassword}</span>
-        <BehaviorNormal />
+        </p>
         <form id="behaviorNormal" action="#">
           <InputField
             LabelName="Benutzername"
@@ -97,6 +112,7 @@ export default function Study() {
             InputType="text"
             InputName="Benutzername"
             InputPlaceHolder="Benutzername"
+            onCopy={handleOnCopyEvent}
             onPaste={handleOnPasteEvent}
           />
           <InputField
@@ -105,6 +121,7 @@ export default function Study() {
             InputType="password"
             InputName="Passwort"
             InputPlaceHolder="Benutzername"
+            onCopy={handleOnCopyEvent}
             onPaste={handleOnPasteEvent}
           />
           <SubmitField
@@ -115,7 +132,7 @@ export default function Study() {
             onClick={onSubmitClick}
           />
         </form>
-        <button onClick={handleLoggerOff}>STOP THAT FUCKING LOGGER</button>
+        <button onClick={handleOff}>STOP THAT FUCKING LOGGER</button>
       </div>
       <Footer />
     </>

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

frontend/src/components/pages/Login.js

@@ -70,7 +70,7 @@ export default function Login() {
           </form>
         ) : (
           <>
-            <Redirect to="/study" />
+            <Redirect to="/behavior" />
           </>
         )}
       </div>

frontend/src/components/pages/Umfrage.js

@@ -219,7 +219,7 @@ export default function Umfrage() {
         {!isSurveyValidBackend ? (
           <ErrorMessage message={backendErrorMessage} />
         ) : (
-          <Redirect to="/study" />
+          <Redirect to="/behavior" />
         )}
       </div>
       <Footer />