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,26 +110,22 @@ export default function Study() {
     });
   };
 
-  return (
+  const study_start = (
-    <>
-      <div className="sitePage">
-        <h1>Studie</h1>
-        <button onClick={handleLoggerOn}>LOGGER StaRTEN</button>
-        {isStepStart ? (
     <>
       <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">
@@ -134,12 +149,83 @@ export default function Study() {
           LabelName="Weiter zur nächsten Situation"
           InputValue="next-situation"
           InputName="Weiter"
-                onClick={onSubmitClick}
+          onClick={handleClickAtStepNormal}
         />
       </form>
     </>
-        ) : null}
+  );
-        <button onClick={handleLoggerOff}>LOGGER STOPPEN</button>
+
+  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 />
     </>