frontend/src/components/pages/BehaviorNormal.js

@@ -1,48 +1,23 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import "../../App.css";
 import Footer from "../../Footer";
+import { logout, useAuth } from "../../auth/AuthProvider";
 import InputField from "../InputField";
 import SubmitField from "../SubmitField";
 import { Logger } from "@behametrics/logger-web";
 
 export default function BehaviorNormal() {
-  let username = "";
-  const setUsername = (tmp_username) => {
-    username = tmp_username;
-  };
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
 
-  let password = "";
-  const setPassword = (tmp_password) => {
-    password = tmp_password;
-  };
-
-  let logger = new Logger({
-    //inputs: ["cursor", "wheel", "keyboard", "touch"],
-    inputs: ["keyboard"],
-    logToConsole: true,
-  });
-
-  logger.init();
-
-  const handleOff = () => {
-    logger.stop();
-    console.log("Logger ausgeschaltet");
-  };
-
-  const handleOn = () => {
-    logger.start();
-    console.log("start logging ");
-  };
-
-  const handlePasswordChange = (e) => {
-    console.log("handlePasswordChange");
-    setPassword(e.target.value);
-  };
+  const [isLoggedIn] = useAuth();
 
   const handleUsernameChange = (e) => {
-    console.log("handleUsernamechange");
     setUsername(e.target.value);
   };
+  const handlePasswordChange = (e) => {
+    setPassword(e.target.value);
+  };
 
   const handleOnCopyEvent = (e) => {
     e.preventDefault();
@@ -67,6 +42,7 @@ export default function BehaviorNormal() {
       body: JSON.stringify(opts),
     }).then((response) => {
       console.log(response.status);
+      console.log(isLoggedIn);
       if (response.status === 401) {
         response.json().then((resp) => {
           console.log("nicht so wirklich gut");
@@ -80,11 +56,27 @@ export default function BehaviorNormal() {
     });
   };
 
+  let logger = new Logger({
+    //inputs: ["cursor", "wheel", "keyboard", "touch"],
+    inputs: ["keyboard"],
+    logToConsole: true,
+  });
+
+  const handleOff = () => {
+    logger.stop();
+    logout();
+    console.log("Logger ausgeschaltet");
+  };
+
+  useEffect(() => {
+    logger.init().then(() => logger.start());
+    console.log("start logging");
+  }, []);
+
   return (
     <>
       <div className="sitePage">
         <h1>Studie</h1>
-        <button onClick={handleOn}>LOGGER StaRTEN</button>
         <p>
           Nachfolgend werden Sie einige Schritte durchlaufen, um ihre
           Nutzerinteraktion messen zu können. Verwenden Sie hierbei jeweils