Merge pull request 'frontend/refactoring' (#172) from frontend/refactoring into main
All checks were successful
continuous-integration/drone/push Build is passing

Reviewed-on: #172
This commit is contained in:
cami 2021-07-21 00:23:40 +00:00
commit 20da4043a8
9 changed files with 91 additions and 58 deletions

View file

@ -12,7 +12,7 @@ import Manual from "./components/pages/Manual";
import Secret from "./components/pages/Secret"; import Secret from "./components/pages/Secret";
import Umfrage from "./components/pages/Umfrage"; import Umfrage from "./components/pages/Umfrage";
import PrivateRoute from "./auth/PrivateRoute"; import PrivateRoute from "./auth/PrivateRoute";
import BehaviorNormal from "./components/pages/BehaviorNormal"; import Study from "./components/pages/Study";
function App() { function App() {
return ( return (
@ -28,7 +28,7 @@ function App() {
<Route path="/register" component={Register} /> <Route path="/register" component={Register} />
<Route path="/manual" component={Manual} /> <Route path="/manual" component={Manual} />
<Route path="/ueber" component={Ueber} /> <Route path="/ueber" component={Ueber} />
<PrivateRoute path="/behavior" component={BehaviorNormal} /> <PrivateRoute path="/study" component={Study} />
<PrivateRoute path="/secret" component={Secret} /> <PrivateRoute path="/secret" component={Secret} />
<PrivateRoute path="/umfrage" component={Umfrage} /> <PrivateRoute path="/umfrage" component={Umfrage} />
</Switch> </Switch>

View file

@ -0,0 +1,16 @@
import React from "react";
import "../App.css";
import GeneratedPassword from "./GeneratedPassword"
export default function BehaviorNormal() {
return (
<>
<p>
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.
</p>
<GeneratedPassword />
</>
);
}

View file

@ -0,0 +1,20 @@
import React from "react";
import "../App.css";
export default function BehaviorStudyInfo() {
return (
<>
<p>
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.
</p>
<p>
Bitte klicken Sie auf weiter, um mit der Studie zu beginnen. Bitte lesen
Sie die jeweilige Aufgabe jeweils genau.
</p>
</>
);
}

View file

@ -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 (
<>
<p onCopy={handleOnCopyEvent}>
Das Passwort für diese Situation lautet:{" "}
<span className="generated-password">{genPassword}</span>
</p>
</>
);
}

View file

@ -5,7 +5,7 @@ import "./HeroSection.css";
import "@fortawesome/fontawesome-free/css/all.css"; import "@fortawesome/fontawesome-free/css/all.css";
import { useAuth } from "../auth/AuthProvider"; import { useAuth } from "../auth/AuthProvider";
function HeroSection() { export default function HeroSection() {
const [isLoggedIn] = useAuth(); const [isLoggedIn] = useAuth();
return ( return (
@ -17,7 +17,7 @@ function HeroSection() {
className="btns" className="btns"
buttonStyle="btn--primary" buttonStyle="btn--primary"
buttonSize="btn--large" buttonSize="btn--large"
newTo="behavior" newTo="study"
> >
Zur Studie Zur Studie
</Button> </Button>
@ -53,5 +53,3 @@ function HeroSection() {
</div> </div>
); );
} }
export default HeroSection;

View file

@ -1,13 +0,0 @@
import React from "react";
import "../../App.css";
export default function BehaviorStudyInfo() {
return (
<p>
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.
</p>
);
}

View file

@ -70,7 +70,7 @@ export default function Login() {
</form> </form>
) : ( ) : (
<> <>
<Redirect to="/behavior" /> <Redirect to="/study" />
</> </>
)} )}
</div> </div>

View file

@ -1,12 +1,13 @@
import React, { useEffect, useState } from "react"; import React, { useEffect } from "react";
import "../../App.css"; import "../../App.css";
import Footer from "../../Footer"; import Footer from "../../Footer";
import InputField from "../InputField"; import InputField from "../InputField";
import SubmitField from "../SubmitField"; import SubmitField from "../SubmitField";
import { Logger } from "@behametrics/logger-web"; 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 = ""; let username = "";
const setUsername = (tmp_username) => { const setUsername = (tmp_username) => {
username = tmp_username; username = tmp_username;
@ -17,23 +18,22 @@ export default function BehaviorNormal() {
password = tmp_password; password = tmp_password;
}; };
const [genPassword, setGenPassword] = useState("");
let logger = new Logger({ let logger = new Logger({
//inputs: ["cursor", "wheel", "keyboard", "touch"], //inputs: ["cursor", "wheel", "keyboard", "touch"],
inputs: ["keyboard"], inputs: ["keyboard"],
apiUrl: "https://behavior.marcocamenzind.ch", // apiUrl: "https://behavior.marcocamenzind.ch",
apiUrl: "http://localhost:5000",
logToConsole: true, logToConsole: true,
}); });
logger.init(); logger.init();
const handleOff = () => { const handleLoggerOff = () => {
logger.stop(); logger.stop();
console.log("Logger ausgeschaltet"); console.log("Logger ausgeschaltet");
}; };
const handleOn = () => { const handleLoggerOn = () => {
logger.start(); logger.start();
console.log("start logging "); console.log("start logging ");
}; };
@ -46,11 +46,6 @@ export default function BehaviorNormal() {
setUsername(e.target.value); setUsername(e.target.value);
}; };
const handleOnCopyEvent = (e) => {
e.preventDefault();
return false;
};
const handleOnPasteEvent = (e) => { const handleOnPasteEvent = (e) => {
e.preventDefault(); e.preventDefault();
return false; 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 ( return (
<> <>
<div className="sitePage"> <div className="sitePage">
<h1>Studie</h1> <h1>Studie</h1>
<button onClick={handleOn}>LOGGER StaRTEN</button> <button onClick={handleLoggerOn}>LOGGER StaRTEN</button>
<BehaviorStudyInfo /> <BehaviorStudyInfo />{" "}
<p> <form id="behaviorNormal" action="#">
Zu Beginn geht es darum, dass Sie ganz normal den Benutzernamen und <SubmitField
das Passwort eingeben. Verhalten Sie sich einfach so, als ob Sie sich LabelName="Starten mit der Studie"
normalerweise anmelden. InputValue="next-situation"
</p> InputName="Weiter"
<p onCopy={handleOnCopyEvent}> onClick={handleLoggerOn}
Das Passwort für diese Situation lautet:{" "} />
<span className="generated-password">{genPassword}</span> </form>{" "}
</p> <BehaviorNormal />
<form id="behaviorNormal" action="#"> <form id="behaviorNormal" action="#">
<InputField <InputField
LabelName="Benutzername" LabelName="Benutzername"
@ -112,7 +97,6 @@ export default function BehaviorNormal() {
InputType="text" InputType="text"
InputName="Benutzername" InputName="Benutzername"
InputPlaceHolder="Benutzername" InputPlaceHolder="Benutzername"
onCopy={handleOnCopyEvent}
onPaste={handleOnPasteEvent} onPaste={handleOnPasteEvent}
/> />
<InputField <InputField
@ -121,7 +105,6 @@ export default function BehaviorNormal() {
InputType="password" InputType="password"
InputName="Passwort" InputName="Passwort"
InputPlaceHolder="Benutzername" InputPlaceHolder="Benutzername"
onCopy={handleOnCopyEvent}
onPaste={handleOnPasteEvent} onPaste={handleOnPasteEvent}
/> />
<SubmitField <SubmitField
@ -132,7 +115,7 @@ export default function BehaviorNormal() {
onClick={onSubmitClick} onClick={onSubmitClick}
/> />
</form> </form>
<button onClick={handleOff}>STOP THAT FUCKING LOGGER</button> <button onClick={handleLoggerOff}>STOP THAT FUCKING LOGGER</button>
</div> </div>
<Footer /> <Footer />
</> </>

View file

@ -219,7 +219,7 @@ export default function Umfrage() {
{!isSurveyValidBackend ? ( {!isSurveyValidBackend ? (
<ErrorMessage message={backendErrorMessage} /> <ErrorMessage message={backendErrorMessage} />
) : ( ) : (
<Redirect to="/behavior" /> <Redirect to="/study" />
)} )}
</div> </div>
<Footer /> <Footer />