frontend/refactoring #172

Merged
cami merged 3 commits from frontend/refactoring into main 2021-07-21 00:23:45 +00:00
5 changed files with 128 additions and 5 deletions
Showing only changes of commit a56e8ccb5c - Show all commits

View file

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

View file

@ -17,7 +17,7 @@ function HeroSection() {
className="btns"
buttonStyle="btn--primary"
buttonSize="btn--large"
newTo="behavior"
newTo="study"
>
Zur Studie
</Button>

View file

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

View file

@ -0,0 +1,123 @@
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 BehaviorNormal from "../BehaviorNormal";
export default function Study() {
let username = "";
const setUsername = (tmp_username) => {
username = tmp_username;
};
let password = "";
const setPassword = (tmp_password) => {
password = tmp_password;
};
let logger = new Logger({
//inputs: ["cursor", "wheel", "keyboard", "touch"],
inputs: ["keyboard"],
// apiUrl: "https://behavior.marcocamenzind.ch",
apiUrl: "http://localhost:5000",
logToConsole: true,
});
logger.init();
const handleLoggerOff = () => {
logger.stop();
console.log("Logger ausgeschaltet");
};
const handleLoggerOn = () => {
logger.start();
console.log("start logging ");
};
const handlePasswordChange = (e) => {
setPassword(e.target.value);
};
const handleUsernameChange = (e) => {
setUsername(e.target.value);
};
const handleOnPasteEvent = (e) => {
e.preventDefault();
return false;
};
const onSubmitClick = (e) => {
e.preventDefault();
let opts = {
username: username,
password: password,
};
fetch("/api/protected/behavior", {
method: "post",
body: JSON.stringify(opts),
}).then((response) => {
console.log(response.status);
if (response.status === 401) {
response.json().then((resp) => {
console.log("nicht so wirklich gut");
// setErrorMessage(resp.message);
});
} else {
response.json().then((token) => {
console.log("Alles gut :-)");
});
}
});
};
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>
</div>
<Footer />
</>
);
}

View file

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