Merge pull request 'frontend/refactoring' (#172) from frontend/refactoring into main
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #172
This commit is contained in:
commit
20da4043a8
9 changed files with 91 additions and 58 deletions
|
@ -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() {
|
|||
<Route path="/register" component={Register} />
|
||||
<Route path="/manual" component={Manual} />
|
||||
<Route path="/ueber" component={Ueber} />
|
||||
<PrivateRoute path="/behavior" component={BehaviorNormal} />
|
||||
<PrivateRoute path="/study" component={Study} />
|
||||
<PrivateRoute path="/secret" component={Secret} />
|
||||
<PrivateRoute path="/umfrage" component={Umfrage} />
|
||||
</Switch>
|
||||
|
|
16
frontend/src/components/BehaviorNormal.js
Normal file
16
frontend/src/components/BehaviorNormal.js
Normal 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 />
|
||||
</>
|
||||
);
|
||||
}
|
20
frontend/src/components/BehaviorStudyInfo.js
Normal file
20
frontend/src/components/BehaviorStudyInfo.js
Normal 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>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
29
frontend/src/components/GeneratedPassword.js
Normal file
29
frontend/src/components/GeneratedPassword.js
Normal 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>
|
||||
</>
|
||||
);
|
||||
}
|
|
@ -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
|
||||
</Button>
|
||||
|
@ -53,5 +53,3 @@ function HeroSection() {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HeroSection;
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -70,7 +70,7 @@ export default function Login() {
|
|||
</form>
|
||||
) : (
|
||||
<>
|
||||
<Redirect to="/behavior" />
|
||||
<Redirect to="/study" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
@ -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 (
|
||||
<>
|
||||
<div className="sitePage">
|
||||
<h1>Studie</h1>
|
||||
<button onClick={handleOn}>LOGGER StaRTEN</button>
|
||||
<BehaviorStudyInfo />
|
||||
<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>
|
||||
<p onCopy={handleOnCopyEvent}>
|
||||
Das Passwort für diese Situation lautet:{" "}
|
||||
<span className="generated-password">{genPassword}</span>
|
||||
</p>
|
||||
<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"
|
||||
|
@ -112,7 +97,6 @@ export default function BehaviorNormal() {
|
|||
InputType="text"
|
||||
InputName="Benutzername"
|
||||
InputPlaceHolder="Benutzername"
|
||||
onCopy={handleOnCopyEvent}
|
||||
onPaste={handleOnPasteEvent}
|
||||
/>
|
||||
<InputField
|
||||
|
@ -121,7 +105,6 @@ export default function BehaviorNormal() {
|
|||
InputType="password"
|
||||
InputName="Passwort"
|
||||
InputPlaceHolder="Benutzername"
|
||||
onCopy={handleOnCopyEvent}
|
||||
onPaste={handleOnPasteEvent}
|
||||
/>
|
||||
<SubmitField
|
||||
|
@ -132,7 +115,7 @@ export default function BehaviorNormal() {
|
|||
onClick={onSubmitClick}
|
||||
/>
|
||||
</form>
|
||||
<button onClick={handleOff}>STOP THAT FUCKING LOGGER</button>
|
||||
<button onClick={handleLoggerOff}>STOP THAT FUCKING LOGGER</button>
|
||||
</div>
|
||||
<Footer />
|
||||
</>
|
|
@ -219,7 +219,7 @@ export default function Umfrage() {
|
|||
{!isSurveyValidBackend ? (
|
||||
<ErrorMessage message={backendErrorMessage} />
|
||||
) : (
|
||||
<Redirect to="/behavior" />
|
||||
<Redirect to="/study" />
|
||||
)}
|
||||
</div>
|
||||
<Footer />
|
||||
|
|
Loading…
Reference in a new issue