Merge pull request 'Add behavior pages (fix #119)' (#130) from feature/behaviourpages into main

Reviewed-on: #130

backend/src/app.py

@@ -223,9 +223,16 @@ def survey():
         return ret, 400
 
 
-@app.route('/time')
-def get_current_time():
-    return {'time': time.time()}
+@app.route('/api/protected/behavior', methods=['GET'])
+@flask_praetorian.auth_required
+def get_randompassword():
+    print("Hallo")
+
+
+@app.route('/api/protected/behavior', methods=['POST'])
+@flask_praetorian.auth_required
+def check_password_username():
+    print("hallooo POST")
 
 
 # Run the example

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={Behavior} />
+          <PrivateRoute path="/behavior" component={BehaviorNormal} />
           <PrivateRoute path="/secret" component={Secret} />
           <PrivateRoute path="/umfrage" component={Umfrage} />
         </Switch>

frontend/src/components/InputField.js

@@ -10,6 +10,8 @@ function InputField(props) {
         onChange={props.onChange}
         type={props.InputType}
         placeholder={props.InputPlaceHolder}
+        onCopy={props.onCopy}
+        onPaste={props.onPaste}
       />
     </label>
   );

frontend/src/components/Navbar.js

@@ -6,7 +6,7 @@ import "@fortawesome/fontawesome-free/css/all.css";
 
 function Navbar() {
   const [click, setClick] = useState(false);
-  const [button, setButton] = useState(true);
+  const [button,setButton] = useState(true);
 
   const handleClick = () => setClick(!click);
   const closeMobileMenu = () => setClick(false);

frontend/src/components/pages/Behavior.js

@@ -1,36 +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";
-
-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

@@ -0,0 +1,121 @@
+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 />
+    </>
+  );
+}

frontend/src/components/pages/Register.js

@@ -13,7 +13,6 @@ export default function Login() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
 
-  const [message, setMessage] = useState("");
   const [errorMessage, setErrorMessage] = useState("");
 
   const [isStatusOk, setIsStatusOk] = useState("");
@@ -40,7 +39,6 @@ export default function Login() {
         });
       } else if (response.status === 200) {
         response.json().then((resp) => {
-          setMessage(resp.message);
           fetch("/api/login", {
             method: "post",
             body: JSON.stringify(opts),

frontend/src/components/pages/Umfrage.js

@@ -24,7 +24,6 @@ export default function Umfrage() {
   const [skillsErrorMessage, setSkillsErrorMessage] = useState("");
 
   const [backendErrorMessage, setBackendErrorMessage] = useState("");
-  const [backendSuccessMessage, setBackendSuccessMessage] = useState("");
   const [isSurveyValidBackend, setIsSurveyValidBackend] = useState("");
 
   /* boolean if the values are ok */
@@ -50,8 +49,6 @@ export default function Umfrage() {
     setIsEducationOk(true);
     setIsSkillsOk(true);
     setIsSurveyValid(true);
-    console.log("before valid");
-    console.log(isSurveyValid);
 
     if (!Number(age)) {
       setAgeErrorMessage("Das Alter muss als Zahl angegeben werden.");
@@ -80,8 +77,6 @@ export default function Umfrage() {
       setIsSkillsOk(false);
     }
 
-    console.log("after valid");
-    console.log(isSurveyValid);
     if (isSurveyValid === true) {
       authFetch("/api/protected/umfrage", {
         method: "post",
@@ -89,7 +84,6 @@ export default function Umfrage() {
       }).then((response) => {
         if (response.status === 200) {
           response.json().then((r) => {
-            setBackendSuccessMessage(r.message);
             setIsSurveyValidBackend(true);
           });
         } else {