Renaming some files.
This commit is contained in:
parent
966304ac3a
commit
213dcc9197
5 changed files with 65 additions and 153 deletions
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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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 />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Loading…
Reference in a new issue