Refactored some things in the frontend

- use button insted of inputfield
- make use of conditional rendering

frontend/src/components/Button.css

@@ -31,6 +31,12 @@
   font-size: 1.3em;
 }
 
+.btn--full{
+  padding: 12px 26px;
+  margin: 0 auto;
+  font-size: 1.5em;
+}
+
 .btn--large:hover,
 .btn--medium:hover {
   transition: all 0.3s ease-out;
@@ -38,3 +44,4 @@
   color: var(--secondary);
   transition: 250ms;
 }
+

frontend/src/components/Button.js

@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 
 const STYLES = ["btn--primary", "btn--outline"];
 
-const SIZES = ["btn--medium", "btn--large"];
+const SIZES = ["btn--medium", "btn--large", "btn--full"];
 export const Button = ({
   children,
   type,

frontend/src/components/pages/Study.js

@@ -6,6 +6,7 @@ import SubmitField from "../SubmitField";
 import { Logger } from "@behametrics/logger-web";
 import BehaviorStudyInfo from "../BehaviorStudyInfo";
 import BehaviorNormal from "../BehaviorNormal";
+import { Button } from "../Button";
 
 export default function Study() {
   let username = "";
@@ -18,6 +19,16 @@ 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"],
@@ -51,6 +62,13 @@ export default function Study() {
     return false;
   };
 
+  const handleIsStepStart = () => {
+    setIsStepStart(false);
+    console.log("isStepStar", isStepStart)
+    setIsStepNormal(true);
+    console.log("isStepStar", isStepNormal)
+  };
+
   const onSubmitClick = (e) => {
     e.preventDefault();
     let opts = {
@@ -75,47 +93,65 @@ 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>
-        <BehaviorStudyInfo />{" "}
-        <form id="behaviorNormal" action="#">
-          <SubmitField
-            LabelName="Starten mit der Studie"
-            InputValue="next-situation"
-            InputName="Weiter"
-            onClick={handleLoggerOn}
-          />
-        </form>{" "}
-        <BehaviorNormal />
-        <form id="behaviorNormal" action="#">
-          <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
-            LabelNa
-            me="Weiter zur nächsten Situation"
-            InputValue="next-situation"
-            InputName="Weiter"
-            onClick={onSubmitClick}
-          />
-        </form>
-        <button onClick={handleLoggerOff}>STOP THAT FUCKING LOGGER</button>
+        {isStepStart ? (
+          <>
+            <BehaviorStudyInfo />
+            <Button
+              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}
       </div>
       <Footer />
     </>