Merge pull request 'Add multiple subpages for the survey...' (#177) from frontend/survey-multiple-sites into main

Reviewed-on: #177

frontend/src/components/BehaviorPhone.js

@@ -0,0 +1,17 @@
+import React from "react";
+import "../App.css";
+import GeneratedPassword from "./GeneratedPassword";
+
+export default function BehaviorPhone() {
+  return (
+    <>
+      <p>
+        Im nächsten Schritt geht es darum, dass Sie während der Passworteingabe
+        telefonieren. Nehmen Sie hierzu Ihr Smartphone oder Telefon und stellen
+        Sie sich vor, dass Sie gerade am Telefonieren sind. Verwenden Sie bitte
+        kein Headset oder Ähnliches.
+      </p>
+      <GeneratedPassword />
+    </>
+  );
+}

frontend/src/components/BehaviorStanding.js

@@ -0,0 +1,14 @@
+import React from "react";
+import "../App.css";
+import GeneratedPassword from "./GeneratedPassword"
+
+export default function BehaviorStanding() {
+  return (
+    <>
+      <p>
+        In dieser Situation geht es darum, dass Sie das Passwort im Stehen eingeben. Stehen Sie also vor den Computer und geben Sie den Benutzernamen und das Passwort wie gewohnt ein.
+      </p>
+      <GeneratedPassword />
+    </>
+  );
+}

frontend/src/components/pages/Study.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import "../../App.css";
 import Footer from "../../Footer";
 import InputField from "../InputField";
@@ -7,8 +7,23 @@ import { Logger } from "@behametrics/logger-web";
 import BehaviorStudyInfo from "../BehaviorStudyInfo";
 import BehaviorNormal from "../BehaviorNormal";
 import { Button } from "../Button";
+import BehaviorPhone from "../BehaviorPhone";
+import BehaviorStanding from "../BehaviorStanding";
 
 export default function Study() {
+  const _logger = useRef(0);
+
+  useEffect(() => {
+    _logger.current = new Logger({
+      //inputs: ["cursor", "wheel", "keyboard", "touch"],
+      inputs: ["keyboard"],
+      // apiUrl: "https://behavior.marcocamenzind.ch",
+      apiUrl: "http://localhost:5000",
+      logToConsole: true,
+    });
+    _logger.current.init();
+  }, []);
+
   let username = "";
   const setUsername = (tmp_username) => {
     username = tmp_username;
@@ -19,33 +34,19 @@ export default function Study() {
     password = tmp_password;
   };
 
-  let isStepStart = true;
-  const setIsStepStart = (tmp) => {
-    isStepStart = tmp;
-  };
-
-  let isStepNormal = false;
-  const setIsStepNormal = (tmp) => {
-    isStepNormal = tmp;
-  };
-
-  let logger = new Logger({
-    //inputs: ["cursor", "wheel", "keyboard", "touch"],
-    inputs: ["keyboard"],
-    // apiUrl: "https://behavior.marcocamenzind.ch",
-    apiUrl: "http://localhost:5000",
-    logToConsole: true,
-  });
-
-  logger.init();
+  const [isStepStart, setIsStepStart] = useState(true);
+  const [isStepNormal, setIsStepNormal] = useState(false);
+  const [isStepPhone, setIsStepPhone] = useState(false);
+  const [isStepStanding, setIsStepStanding] = useState(false);
+  const [isStepEnd, setIsStepEnd] = useState(false);
 
   const handleLoggerOff = () => {
-    logger.stop();
+    _logger.current.stop();
     console.log("Logger ausgeschaltet");
   };
 
   const handleLoggerOn = () => {
-    logger.start();
+    _logger.current.start();
     console.log("start logging ");
   };
 
@@ -62,11 +63,27 @@ export default function Study() {
     return false;
   };
 
-  const handleIsStepStart = () => {
+  const handleClickAtStepStart = () => {
     setIsStepStart(false);
-    console.log("isStepStar", isStepStart)
     setIsStepNormal(true);
-    console.log("isStepStar", isStepNormal)
+    handleLoggerOn();
+    // forceUpdate();
+  };
+
+  const handleClickAtStepNormal = () => {
+    setIsStepNormal(false);
+    setIsStepPhone(true);
+  };
+
+  const handleClickAtStepPhone = () => {
+    setIsStepPhone(false);
+    setIsStepStanding(true);
+  };
+
+  const handleClickAtStepStanding = () => {
+    setIsStepStanding(false);
+    setIsStepEnd(true);
+    handleLoggerOff();
   };
 
   const onSubmitClick = (e) => {
@@ -93,37 +110,22 @@ export default function Study() {
     });
   };
 
-  /*
-  useEffect(() => {
-    if (isStepStart) {
-      handleIsStepStart();
-      console.log("useEffect; normal");
-    } else if (isStepNormal) {
-      console.log("useEffect; normal");
-    }
-  });
-  */
-
-  return (
-    <>
-      <div className="sitePage">
-        <h1>Studie</h1>
-        <button onClick={handleLoggerOn}>LOGGER StaRTEN</button>
-        {isStepStart ? (
+  const study_start = (
     <>
       <BehaviorStudyInfo />
       <Button
         className="btns"
         buttonStyle="btn--primary"
         buttonSize="btn--full"
-              onClick={handleIsStepStart}
+        onClick={handleClickAtStepStart}
         newTo="study"
       >
         Starten mit der Studie
       </Button>
     </>
-        ) : null}
-        {isStepNormal ? (
+  );
+
+  const study_normal = (
     <>
       <BehaviorNormal />
       <form id="behaviorNormal">
@@ -147,11 +149,83 @@ export default function Study() {
           LabelName="Weiter zur nächsten Situation"
           InputValue="next-situation"
           InputName="Weiter"
-                onClick={onSubmitClick}
+          onClick={handleClickAtStepNormal}
         />
       </form>
     </>
-        ) : null}
+  );
+
+  const study_phone = (
+    <>
+      <BehaviorPhone />
+      <form id="behaviorPhone">
+        <InputField
+          LabelName="Benutzername"
+          onChange={handleUsernameChange}
+          InputType="text"
+          InputName="Benutzername"
+          InputPlaceHolder="Benutzername"
+          onPaste={handleOnPasteEvent}
+        />
+        <InputField
+          LabelName="Passwort"
+          onChange={handlePasswordChange}
+          InputType="password"
+          InputName="Passwort"
+          InputPlaceHolder="Benutzername"
+          onPaste={handleOnPasteEvent}
+        />
+        <SubmitField
+          LabelName="Weiter zur nächsten Situation"
+          InputValue="next-situation"
+          InputName="Weiter"
+          onClick={handleClickAtStepPhone}
+        />
+      </form>
+    </>
+  );
+
+  const study_standing = (
+    <>
+      <BehaviorStanding />
+      <form id="behaviorPhone">
+        <InputField
+          LabelName="Benutzername"
+          onChange={handleUsernameChange}
+          InputType="text"
+          InputName="Benutzername"
+          InputPlaceHolder="Benutzername"
+          onPaste={handleOnPasteEvent}
+        />
+        <InputField
+          LabelName="Passwort"
+          onChange={handlePasswordChange}
+          InputType="password"
+          InputName="Passwort"
+          InputPlaceHolder="Benutzername"
+          onPaste={handleOnPasteEvent}
+        />
+        <SubmitField
+          LabelName="Studie beenden"
+          InputValue="stopStudy"
+          InputName="quit"
+          onClick={handleClickAtStepStanding}
+        />
+      </form>
+    </>
+  );
+
+  const study_end = <p>Merci :-)</p>;
+
+  return (
+    <>
+      <div className="sitePage">
+        <h1>Studie</h1>
+        {isStepStart ? study_start : null}
+        {isStepNormal ? study_normal : null}
+        {isStepPhone ? study_phone : null}
+        {isStepStanding ? study_standing : null}
+        {isStepEnd ? study_end : null}
       </div>
       <Footer />
     </>