diff --git a/frontend/src/App.js b/frontend/src/App.js index 20f00f1..415c951 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -12,7 +12,7 @@ import Manual from "./components/pages/Manual"; import Secret from "./components/pages/Secret"; import Umfrage from "./components/pages/Umfrage"; import PrivateRoute from "./auth/PrivateRoute"; -import BehaviorNormal from "./components/pages/BehaviorNormal"; +import Study from "./components/pages/Study"; function App() { return ( @@ -28,7 +28,7 @@ function App() { - + diff --git a/frontend/src/components/BehaviorNormal.js b/frontend/src/components/BehaviorNormal.js new file mode 100644 index 0000000..9f64ef9 --- /dev/null +++ b/frontend/src/components/BehaviorNormal.js @@ -0,0 +1,16 @@ +import React from "react"; +import "../App.css"; +import GeneratedPassword from "./GeneratedPassword" + +export default function BehaviorNormal() { + return ( + <> +

+ 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. +

+ + + ); +} diff --git a/frontend/src/components/BehaviorStudyInfo.js b/frontend/src/components/BehaviorStudyInfo.js new file mode 100644 index 0000000..eaea777 --- /dev/null +++ b/frontend/src/components/BehaviorStudyInfo.js @@ -0,0 +1,20 @@ +import React from "react"; +import "../App.css"; + +export default function BehaviorStudyInfo() { + return ( + <> +

+ 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. +

+

+ Bitte klicken Sie auf weiter, um mit der Studie zu beginnen. Bitte lesen + Sie die jeweilige Aufgabe jeweils genau. +

+ + + ); +} diff --git a/frontend/src/components/GeneratedPassword.js b/frontend/src/components/GeneratedPassword.js new file mode 100644 index 0000000..c963b5c --- /dev/null +++ b/frontend/src/components/GeneratedPassword.js @@ -0,0 +1,29 @@ +import React, { useEffect, useState } from "react"; +import "../App.css"; + +export default function GeneratedPassword() { + const [genPassword, setGenPassword] = useState(""); + + const handleOnCopyEvent = (e) => { + e.preventDefault(); + return false; + }; + + useEffect(() => { + fetch("/api/protected/rcv_pw", { + method: "get", + }).then((response) => { + response.json().then((resp) => { + setGenPassword(resp.password); + }); + }); + }, []); + return ( + <> +

+ Das Passwort für diese Situation lautet:{" "} + {genPassword} +

+ + ); +} diff --git a/frontend/src/components/HeroSection.js b/frontend/src/components/HeroSection.js index be197eb..93211d3 100644 --- a/frontend/src/components/HeroSection.js +++ b/frontend/src/components/HeroSection.js @@ -5,7 +5,7 @@ import "./HeroSection.css"; import "@fortawesome/fontawesome-free/css/all.css"; import { useAuth } from "../auth/AuthProvider"; -function HeroSection() { +export default function HeroSection() { const [isLoggedIn] = useAuth(); return ( @@ -17,7 +17,7 @@ function HeroSection() { className="btns" buttonStyle="btn--primary" buttonSize="btn--large" - newTo="behavior" + newTo="study" > Zur Studie @@ -53,5 +53,3 @@ function HeroSection() { ); } - -export default HeroSection; diff --git a/frontend/src/components/pages/BehaviorStudyInfo.js b/frontend/src/components/pages/BehaviorStudyInfo.js deleted file mode 100644 index 35e3b98..0000000 --- a/frontend/src/components/pages/BehaviorStudyInfo.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from "react"; -import "../../App.css"; - -export default function BehaviorStudyInfo() { - return ( -

- 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. -

- ); -} diff --git a/frontend/src/components/pages/Login.js b/frontend/src/components/pages/Login.js index 46dd4c5..c6ea7f8 100644 --- a/frontend/src/components/pages/Login.js +++ b/frontend/src/components/pages/Login.js @@ -70,7 +70,7 @@ export default function Login() { ) : ( <> - + )} diff --git a/frontend/src/components/pages/BehaviorNormal.js b/frontend/src/components/pages/Study.js similarity index 66% rename from frontend/src/components/pages/BehaviorNormal.js rename to frontend/src/components/pages/Study.js index 0bb4d67..a6bbeab 100644 --- a/frontend/src/components/pages/BehaviorNormal.js +++ b/frontend/src/components/pages/Study.js @@ -1,12 +1,13 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect } from "react"; import "../../App.css"; import Footer from "../../Footer"; import InputField from "../InputField"; import SubmitField from "../SubmitField"; import { Logger } from "@behametrics/logger-web"; -import BehaviorStudyInfo from "./BehaviorStudyInfo"; +import BehaviorStudyInfo from "../BehaviorStudyInfo"; +import BehaviorNormal from "../BehaviorNormal"; -export default function BehaviorNormal() { +export default function Study() { let username = ""; const setUsername = (tmp_username) => { username = tmp_username; @@ -17,23 +18,22 @@ export default function BehaviorNormal() { password = tmp_password; }; - const [genPassword, setGenPassword] = useState(""); - let logger = new Logger({ //inputs: ["cursor", "wheel", "keyboard", "touch"], inputs: ["keyboard"], - apiUrl: "https://behavior.marcocamenzind.ch", + // apiUrl: "https://behavior.marcocamenzind.ch", + apiUrl: "http://localhost:5000", logToConsole: true, }); logger.init(); - const handleOff = () => { + const handleLoggerOff = () => { logger.stop(); console.log("Logger ausgeschaltet"); }; - const handleOn = () => { + const handleLoggerOn = () => { logger.start(); console.log("start logging "); }; @@ -46,11 +46,6 @@ export default function BehaviorNormal() { setUsername(e.target.value); }; - const handleOnCopyEvent = (e) => { - e.preventDefault(); - return false; - }; - const handleOnPasteEvent = (e) => { e.preventDefault(); return false; @@ -80,31 +75,21 @@ export default function BehaviorNormal() { }); }; - useEffect(() => { - fetch("/api/protected/rcv_pw", { - method: "get", - }).then((response) => { - response.json().then((resp) => { - setGenPassword(resp.password); - }); - }); - }, []); - return ( <>

Studie

- - -

- 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. -

-

- Das Passwort für diese Situation lautet:{" "} - {genPassword} -

+ + {" "} +
+ + {" "} +
- +