frontend/src/App.js

@@ -12,8 +12,8 @@ import Manual from "./components/pages/Manual";
 import Secret from "./components/pages/Secret";
 import Umfrage from "./components/pages/Umfrage";
 import PrivateRoute from "./auth/PrivateRoute";
+import Behavior from "./components/pages/Behavior";
 import { useAuth } from "./auth/AuthProvider";
-import BehaviorNormal from "./components/pages/BehaviorNormal";
 
 function App() {
   const [isLoggedIn] = useAuth();
@@ -31,7 +31,7 @@ function App() {
           <Route path="/register" component={Register} />
           <Route path="/manual" component={Manual} />
           <Route path="/ueber" component={Ueber} />
-          <PrivateRoute path="/behavior" component={BehaviorNormal} />
+          <PrivateRoute path="/behavior" component={Behavior} />
           <PrivateRoute path="/secret" component={Secret} />
           <PrivateRoute path="/umfrage" component={Umfrage} />
         </Switch>

frontend/src/components/pages/Behavior.js

@@ -0,0 +1,36 @@
+import React, { useEffect } from "react";
+import "../../App.css";
+import Footer from "../../Footer";
+import { Logger } from "@behametrics/logger-web";
+import { useAuth } from "../../auth/AuthProvider";
+
+export default function Behavior() {
+  let logger = new Logger({
+    //inputs: ["cursor", "wheel", "keyboard", "touch"],
+    inputs: ["keyboard"],
+    // logToConsole: true,
+  });
+  logger.init();
+
+  let [isLoggedIn] = useAuth();
+
+  useEffect(() => {
+    document.title = `${isLoggedIn}`;
+    console.log(isLoggedIn);
+    if (isLoggedIn === false) {
+      logger.stop();
+      //console.log("stopped logger");
+    } else {
+      logger.start();
+      // console.log("start logger");
+    }
+  });
+  return (
+    <>
+      <div className="sitePage">
+        <h1>Studie Verhaltensmerkmale</h1>
+      </div>
+      <Footer />
+    </>
+  );
+}

frontend/src/components/pages/BehaviorNormal.js

@@ -1,121 +0,0 @@
-import React, { useEffect } from "react";
-import "../../App.css";
-import Footer from "../../Footer";
-import { Logger } from "@behametrics/logger-web";
-import { useAuth } from "../../auth/AuthProvider";
-import InputField from "../InputField";
-import { useState } from "react/cjs/react.development";
-import SubmitField from "../SubmitField";
-
-export default function BehaviorNormal() {
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-
-  const handleUsernameChange = (e) => {
-    setUsername(e.target.value);
-  };
-  const handlePasswordChange = (e) => {
-    setPassword(e.target.value);
-  };
-
-  const handleOnCopyEvent = (e) => {
-    e.preventDefault();
-    console.log("copy not allowed");
-    return false;
-  };
-
-  const handleOnPasteEvent = (e) => {
-    e.preventDefault();
-    console.log("paste not allowed");
-    return false;
-  };
-
-  const onSubmitClick = (e) => {
-    e.preventDefault();
-    let opts = {
-      username: username,
-      password: password,
-    };
-    fetch("/api/protected/behavior", {
-      method: "post",
-      body: JSON.stringify(opts),
-    }).then((response) => {
-      if (response.status === 401) {
-        response.json().then((resp) => {
-          console.log("nicht so wirklich gut");
-          // setErrorMessage(resp.message);
-        });
-      } else {
-        response.json().then((token) => {
-          console.log("Alles gut :-)");
-        });
-      }
-    });
-  };
-
-  let logger = new Logger({
-    //inputs: ["cursor", "wheel", "keyboard", "touch"],
-    inputs: ["keyboard"],
-    // logToConsole: true,
-  });
-  logger.init();
-
-  let [isLoggedIn] = useAuth();
-
-  useEffect(() => {
-    document.title = `${isLoggedIn}`;
-    if (isLoggedIn === false) {
-      logger.stop();
-    } else {
-      logger.start();
-    }
-  });
-  return (
-    <>
-      <div className="sitePage">
-        <h1>Studie</h1>
-        <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>
-          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: abcdefgeh
-        </p>
-        <form action="#">
-          <InputField
-            LabelName="Benutzername"
-            onChange={handleUsernameChange}
-            InputType="text"
-            InputName="Benutzername"
-            InputPlaceHolder="Benutzername"
-            onCopy={handleOnCopyEvent}
-            onPaste={handleOnPasteEvent}
-          />
-          <InputField
-            LabelName="Passwort"
-            onChange={handlePasswordChange}
-            InputType="password"
-            InputName="Passwort"
-            InputPlaceHolder="Benutzername"
-            onCopy={handleOnCopyEvent}
-            onPaste={handleOnPasteEvent}
-          />
-          <SubmitField
-            LabelName="Weiter zur nächsten Situation"
-            InputValue="next-situation"
-            InputName="Weiter"
-            onClick={onSubmitClick}
-          />
-        </form>
-      </div>
-      <Footer />
-    </>
-  );
-}