Added multiple situations so the survey is more complete

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

@@ -7,6 +7,8 @@ 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);
@@ -34,6 +36,9 @@ export default function Study() {
 
   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.current.stop();
@@ -58,15 +63,29 @@ export default function Study() {
     return false;
   };
 
-  const handleIsStepStart = () => {
+  const handleClickAtStepStart = () => {
     setIsStepStart(false);
-    console.log("isStepStar", isStepStart);
     setIsStepNormal(true);
-    console.log("isStepNormal", 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) => {
     e.preventDefault();
     let opts = {
@@ -91,55 +110,122 @@ export default function Study() {
     });
   };
 
+  const study_start = (
+    <>
+      <BehaviorStudyInfo />
+      <Button
+        className="btns"
+        buttonStyle="btn--primary"
+        buttonSize="btn--full"
+        onClick={handleClickAtStepStart}
+        newTo="study"
+      >
+        Starten mit der Studie
+      </Button>
+    </>
+  );
+
+  const study_normal = (
+    <>
+      <BehaviorNormal />
+      <form id="behaviorNormal">
+        <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={handleClickAtStepNormal}
+        />
+      </form>
+    </>
+  );
+
+  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>
-        <button onClick={handleLoggerOn}>LOGGER StaRTEN</button>
+        {isStepStart ? study_start : null}
-        {isStepStart ? (
+        {isStepNormal ? study_normal : null}
-          <>
+        {isStepPhone ? study_phone : null}
-            <BehaviorStudyInfo />
+        {isStepStanding ? study_standing : null}
-            <Button
+        {isStepEnd ? study_end : null}
-              className="btns"
-              buttonStyle="btn--primary"
-              buttonSize="btn--full"
-              onClick={handleIsStepStart}
-              newTo="study"
-            >
-              Starten mit der Studie
-            </Button>
-          </>
-        ) : null}
-        {isStepNormal ? (
-          <>
-            <BehaviorNormal />
-            <form id="behaviorNormal">
-              <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={onSubmitClick}
-              />
-            </form>
-          </>
-        ) : null}
-        <button onClick={handleLoggerOff}>LOGGER STOPPEN</button>
       </div>
       <Footer />
     </>