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 65 additions and 153 deletions
Showing only changes of commit 213dcc9197 - Show all commits

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

@ -1,140 +0,0 @@
import React, { useEffect, useState } 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";
export default function BehaviorNormal() {
let username = "";
const setUsername = (tmp_username) => {
username = tmp_username;
};
let password = "";
const setPassword = (tmp_password) => {
password = tmp_password;
};
const [genPassword, setGenPassword] = useState("");
let logger = new Logger({
//inputs: ["cursor", "wheel", "keyboard", "touch"],
inputs: ["keyboard"],
apiUrl: "https://behavior.marcocamenzind.ch",
logToConsole: true,
});
logger.init();
const handleOff = () => {
logger.stop();
console.log("Logger ausgeschaltet");
};
const handleOn = () => {
logger.start();
console.log("start logging ");
};
const handlePasswordChange = (e) => {
setPassword(e.target.value);
};
const handleUsernameChange = (e) => {
setUsername(e.target.value);
};
const handleOnCopyEvent = (e) => {
e.preventDefault();
return false;
};
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 :-)");
});
}
});
};
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>
<form id="behaviorNormal" action="#">
<InputField
LabelName="Benutzername"
onChange={handleUsernameChange}
InputType="text"
InputName="Benutzername"
InputPlaceHolder="Benutzername"
onCopy={handleOnCopyEvent}
onPaste={handleOnPasteEvent}
/>
<InputField
LabelName="Passwort"
onChange={handlePasswordChange}
InputType="password"
InputName="Passwort"
InputPlaceHolder="Benutzername"
onCopy={handleOnCopyEvent}
onPaste={handleOnPasteEvent}
/>
<SubmitField
LabelNa
me="Weiter zur nächsten Situation"
InputValue="next-situation"
InputName="Weiter"
onClick={onSubmitClick}
/>
</form>
<button onClick={handleOff}>STOP THAT FUCKING LOGGER</button>
</div>
<Footer />
</>
);
}

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>
);
}