Merge pull request 'Check in the frontend if the username and password in the survey are correct (fix #179)' (#185) from frontend/check-username-pw-survey into main
All checks were successful
continuous-integration/drone/push Build is passing

Reviewed-on: #185
This commit is contained in:
cami 2021-07-22 14:55:26 +00:00
commit 47166c6345
9 changed files with 129 additions and 64 deletions

View file

@ -119,6 +119,14 @@ def refresh():
return ret, 200 return ret, 200
@app.route('/api/username', methods=['GET'])
@flask_praetorian.auth_required
def get_username():
username = flask_praetorian.current_user().username
ret = {'username': username}
return ret, 200
@app.route('/api/protected') @app.route('/api/protected')
@flask_praetorian.auth_required @flask_praetorian.auth_required
def protected(): def protected():
@ -133,11 +141,10 @@ def protected():
return {'message': f'protected endpoint (allowed user {flask_praetorian.current_user().username})'} return {'message': f'protected endpoint (allowed user {flask_praetorian.current_user().username})'}
@app.route('/api/protected/rcv_pw', methods=['GET']) @app.route('/api/rcv_pw', methods=['GET'])
# @flask_praetorian.auth_required
def get_password(): def get_password():
pw = get_random_password() pw = get_random_password()
ret = {'password': pw} ret = {'random_password': pw}
return ret, 200 return ret, 200

View file

@ -1,8 +1,8 @@
import React from "react"; import React from "react";
import "../App.css"; import "../App.css";
import GeneratedPassword from "./GeneratedPassword" import GeneratedPassword from "./GeneratedPassword";
export default function BehaviorNormal() { export default function BehaviorNormal(props) {
return ( return (
<> <>
<p> <p>
@ -10,7 +10,8 @@ export default function BehaviorNormal() {
Passwort eingeben. Verhalten Sie sich einfach so, als ob Sie sich Passwort eingeben. Verhalten Sie sich einfach so, als ob Sie sich
normalerweise anmelden. normalerweise anmelden.
</p> </p>
<GeneratedPassword /> {console.log("props", props)}
<GeneratedPassword genPassword={props.genPassword} />
</> </>
); );
} }

View file

@ -2,7 +2,7 @@ import React from "react";
import "../App.css"; import "../App.css";
import GeneratedPassword from "./GeneratedPassword"; import GeneratedPassword from "./GeneratedPassword";
export default function BehaviorPhone() { export default function BehaviorPhone(props) {
return ( return (
<> <>
<p> <p>
@ -11,7 +11,7 @@ export default function BehaviorPhone() {
Sie sich vor, dass Sie gerade am Telefonieren sind. Verwenden Sie bitte Sie sich vor, dass Sie gerade am Telefonieren sind. Verwenden Sie bitte
kein Headset oder Ähnliches. kein Headset oder Ähnliches.
</p> </p>
<GeneratedPassword /> <GeneratedPassword genPassword={props.genPassword}/>
</> </>
); );
} }

View file

@ -2,13 +2,13 @@ import React from "react";
import "../App.css"; import "../App.css";
import GeneratedPassword from "./GeneratedPassword" import GeneratedPassword from "./GeneratedPassword"
export default function BehaviorStanding() { export default function BehaviorStanding(props) {
return ( return (
<> <>
<p> <p>
In dieser Situation geht es darum, dass Sie das Passwort im Stehen eingeben. Stehen Sie also vor den Computer und geben Sie den Benutzernamen und das Passwort wie gewohnt ein. In dieser Situation geht es darum, dass Sie das Passwort im Stehen eingeben. Stehen Sie also vor den Computer und geben Sie den Benutzernamen und das Passwort wie gewohnt ein.
</p> </p>
<GeneratedPassword /> <GeneratedPassword genPassword={props.genPassword}/>
</> </>
); );
} }

View file

@ -0,0 +1,15 @@
import React from "react";
import "../App.css";
export default function BehaviorStudyEnd() {
return (
<>
<p>
Vielen Dank, dass Sie an der Studie teilgenommen haben. Sie helfen mir mit Ihrer Teilnahme enorm für die Bachelorthesis weiter.
</p>
<p>
Damit ich möglichst aussagekräftige Ergebnisse erhalte, ist es für mich wichtig, dass Sie mehrmals an der Studie teilnehmen. Daher bitte ich Sie, dass Sie zu einem anderen Zeitpunkt die Studie wiederholen.
</p>
</>
);
}

View file

@ -1,28 +1,20 @@
import React, { useEffect, useState } from "react"; import React from "react";
import "../App.css"; import "../App.css";
export default function GeneratedPassword() { export default function GeneratedPassword(props) {
const [genPassword, setGenPassword] = useState("");
const genPassword = "PASSWORT_MANUELL"
const handleOnCopyEvent = (e) => { const handleOnCopyEvent = (e) => {
e.preventDefault(); e.preventDefault();
return false; return false;
}; };
useEffect(() => {
fetch("/api/protected/rcv_pw", {
method: "get",
}).then((response) => {
response.json().then((resp) => {
setGenPassword(resp.password);
});
});
}, []);
return ( return (
<> <>
<p onCopy={handleOnCopyEvent}> <p onCopy={handleOnCopyEvent}>
Das Passwort für diese Situation lautet:{" "} Das Passwort für diese Situation lautet:{" "}
<span className="generated-password">{genPassword}</span> {console.log("component genpw, genpassword", props.genPassword)}
<span className="generated-password">{props.genPassword}</span>
</p> </p>
</> </>
); );

View file

@ -28,7 +28,9 @@ export default function Manual() {
zurückzusetzen. Nach der Registrierung landen Sie auf einer zurückzusetzen. Nach der Registrierung landen Sie auf einer
Umfrageseite. Füllen Sie die Fragen wahrheitsgemäss aus und klicken Umfrageseite. Füllen Sie die Fragen wahrheitsgemäss aus und klicken
Sie danach auf "Umfrage abschicken". Nachdem die Umfrage durchgeführt Sie danach auf "Umfrage abschicken". Nachdem die Umfrage durchgeführt
wurde, können Sie an der Studie teilnehmen, indem Sie auf den Button "Studie starten" klicken. Folgen Sie danach den Anweisungen gemäss der Studie. wurde, können Sie an der Studie teilnehmen, indem Sie auf den Button
"Studie starten" klicken. Folgen Sie danach den Anweisungen gemäss der
Studie.
</p> </p>
<h2>War schon einmal hier</h2> <h2>War schon einmal hier</h2>
<p> <p>
@ -39,10 +41,17 @@ export default function Manual() {
</ul> </ul>
</p> </p>
<p> <p>
Sofern Sie noch nicht eingeloggt sind, können Sie sich anmelden mit ihrem gewählten Benutzernamen und dem Passwort. Sie landen dann direkt auf der Seite, welche ich für meine Studie benötige. Führen Sie dort die Studie die Studie wie gewohnt durch und beenden Sie diese am Schluss der Studie mit dem Button "Studie beenden". Sofern Sie noch nicht eingeloggt sind, können Sie sich anmelden mit
ihrem gewählten Benutzernamen und dem Passwort. Sie landen dann direkt
auf der Seite, welche ich für meine Studie benötige. Führen Sie dort
die Studie die Studie wie gewohnt durch und beenden Sie diese am
Schluss der Studie mit dem Button "Studie beenden".
</p> </p>
<p> <p>
Wenn Sie bereits eingeloggt sind, dann landen Sie auf der Startseite. Sie finden in der Mitte einen Button mit der Überschrift "Zur Studie". Klicken Sie bitte auf diesen Button und führen Sie dann die Studie durch. Wenn Sie bereits eingeloggt sind, dann landen Sie auf der Startseite.
Sie finden in der Mitte einen Button mit der Überschrift "Zur Studie".
Klicken Sie bitte auf diesen Button und führen Sie dann die Studie
durch.
</p> </p>
</div> </div>
<Footer /> <Footer />

View file

@ -4,14 +4,17 @@ 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 { Button } from "../Button";
import BehaviorStudyInfo from "../BehaviorStudyInfo"; import BehaviorStudyInfo from "../BehaviorStudyInfo";
import BehaviorNormal from "../BehaviorNormal"; import BehaviorNormal from "../BehaviorNormal";
import { Button } from "../Button";
import BehaviorPhone from "../BehaviorPhone"; import BehaviorPhone from "../BehaviorPhone";
import BehaviorStanding from "../BehaviorStanding"; import BehaviorStanding from "../BehaviorStanding";
import BehaviorStudyEnd from "../BehaviorStudyEnd";
import { authFetch } from "../../auth/AuthProvider";
export default function Study() { export default function Study() {
const _logger = useRef(0); const _logger = useRef(0);
const [serverUsername, setServerUsername] = useState("");
useEffect(() => { useEffect(() => {
_logger.current = new Logger({ _logger.current = new Logger({
@ -22,6 +25,13 @@ export default function Study() {
logToConsole: true, logToConsole: true,
}); });
_logger.current.init(); _logger.current.init();
authFetch("/api/username", {
method: "get",
}).then((response) => {
response.json().then((resp) => {
setServerUsername(resp.username);
});
});
}, []); }, []);
let username = ""; let username = "";
@ -60,54 +70,85 @@ export default function Study() {
const handleOnPasteEvent = (e) => { const handleOnPasteEvent = (e) => {
e.preventDefault(); e.preventDefault();
console.log("paste not allowed");
return false; return false;
}; };
const checkIfUsernameIsCorrect = () => {
if (serverUsername === username) {
return true;
} else {
return false;
}
};
const [genPassword, setGenPassword] = useState("");
const receiveRandomPassword = () => {
fetch("/api/rcv_pw", {
method: "get",
}).then((response) => {
response.json().then((resp) => {
console.log(resp.random_password);
setGenPassword(resp.random_password);
console.log("rcv pw; print genPassword", genPassword);
});
});
};
const checkIfPasswordIsCorrect = () => {
if (genPassword === password) {
return true;
} else {
return false;
}
};
const checkIfValuesAreCorrect = () => {
console.log(checkIfPasswordIsCorrect());
if (checkIfPasswordIsCorrect() && checkIfUsernameIsCorrect()) {
return true;
} else {
alert("Passt nicht");
return false;
}
};
const handleClickAtStepStart = () => { const handleClickAtStepStart = () => {
receiveRandomPassword();
setIsStepStart(false); setIsStepStart(false);
setIsStepNormal(true); setIsStepNormal(true);
handleLoggerOn(); handleLoggerOn();
// forceUpdate();
}; };
const handleClickAtStepNormal = () => { const handleClickAtStepNormal = () => {
if (checkIfValuesAreCorrect()) {
receiveRandomPassword();
setIsStepNormal(false); setIsStepNormal(false);
setIsStepPhone(true); setIsStepPhone(true);
}
}; };
const handleClickAtStepPhone = () => { const handleClickAtStepPhone = () => {
if (checkIfValuesAreCorrect()){
receiveRandomPassword();
setIsStepPhone(false); setIsStepPhone(false);
setIsStepStanding(true); setIsStepStanding(true);
}
else {
console.log("Passwort und Benutzername stimmen nicht.")
}
}; };
const handleClickAtStepStanding = () => { const handleClickAtStepStanding = () => {
if (checkIfValuesAreCorrect()){
setIsStepStanding(false); setIsStepStanding(false);
setIsStepEnd(true); setIsStepEnd(true);
handleLoggerOff(); handleLoggerOff();
};
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 :-)");
});
} }
}); else {
console.log("Passwort und Benutzername stimmen nicht.")
}
}; };
const study_start = ( const study_start = (
@ -127,7 +168,7 @@ export default function Study() {
const study_normal = ( const study_normal = (
<> <>
<BehaviorNormal /> <BehaviorNormal genPassword={genPassword} />
<form id="behaviorNormal"> <form id="behaviorNormal">
<InputField <InputField
LabelName="Benutzername" LabelName="Benutzername"
@ -157,7 +198,7 @@ export default function Study() {
const study_phone = ( const study_phone = (
<> <>
<BehaviorPhone /> <BehaviorPhone genPassword={genPassword} />
<form id="behaviorPhone"> <form id="behaviorPhone">
<InputField <InputField
LabelName="Benutzername" LabelName="Benutzername"
@ -187,8 +228,8 @@ export default function Study() {
const study_standing = ( const study_standing = (
<> <>
<BehaviorStanding /> <BehaviorStanding genPassword={genPassword} />
<form id="behaviorPhone"> <form id="behaviorStanding">
<InputField <InputField
LabelName="Benutzername" LabelName="Benutzername"
onChange={handleUsernameChange} onChange={handleUsernameChange}
@ -215,7 +256,7 @@ export default function Study() {
</> </>
); );
const study_end = <p>Merci :-)</p>; const study_end = <BehaviorStudyEnd />;
return ( return (
<> <>

0
requests.sh Normal file → Executable file
View file