Add behavior pages (fix #119) #130

Merged
cami merged 6 commits from feature/behaviourpages into main 2021-07-11 23:29:58 +00:00
8 changed files with 136 additions and 50 deletions

View file

@ -234,9 +234,16 @@ def survey():
return ret, 400
@app.route('/time')
def get_current_time():
return {'time': time.time()}
@app.route('/api/protected/behavior', methods=['GET'])
@flask_praetorian.auth_required
def get_randompassword():
print("Hallo")
@app.route('/api/protected/behavior', methods=['POST'])
@flask_praetorian.auth_required
def check_password_username():
print("hallooo POST")
# Run the example

View file

@ -12,8 +12,8 @@ import Manual from "./components/pages/Manual";
import Secret from "./components/pages/Secret";
import Umfrage from "./components/pages/Umfrage";
import PrivateRoute from "./auth/PrivateRoute";
import Behavior from "./components/pages/Behavior";
import { useAuth } from "./auth/AuthProvider";
import BehaviorNormal from "./components/pages/BehaviorNormal";
function App() {
const [isLoggedIn] = useAuth();
@ -31,7 +31,7 @@ function App() {
<Route path="/register" component={Register} />
<Route path="/manual" component={Manual} />
<Route path="/ueber" component={Ueber} />
<PrivateRoute path="/behavior" component={Behavior} />
<PrivateRoute path="/behavior" component={BehaviorNormal} />
<PrivateRoute path="/secret" component={Secret} />
<PrivateRoute path="/umfrage" component={Umfrage} />
</Switch>

View file

@ -10,6 +10,8 @@ function InputField(props) {
onChange={props.onChange}
type={props.InputType}
placeholder={props.InputPlaceHolder}
onCopy={props.onCopy}
onPaste={props.onPaste}
/>
</label>
);

View file

@ -6,7 +6,7 @@ import "@fortawesome/fontawesome-free/css/all.css";
function Navbar() {
const [click, setClick] = useState(false);
const [button, setButton] = useState(true);
const [button,setButton] = useState(true);
const handleClick = () => setClick(!click);
const closeMobileMenu = () => setClick(false);

View file

@ -1,36 +0,0 @@
import React, { useEffect } from "react";
import "../../App.css";
import Footer from "../../Footer";
import { Logger } from "@behametrics/logger-web";
import { useAuth } from "../../auth/AuthProvider";
export default function Behavior() {
let logger = new Logger({
//inputs: ["cursor", "wheel", "keyboard", "touch"],
inputs: ["keyboard"],
// logToConsole: true,
});
logger.init();
let [isLoggedIn] = useAuth();
useEffect(() => {
document.title = `${isLoggedIn}`;
console.log(isLoggedIn);
if (isLoggedIn === false) {
logger.stop();
//console.log("stopped logger");
} else {
logger.start();
// console.log("start logger");
}
});
return (
<>
<div className="sitePage">
<h1>Studie Verhaltensmerkmale</h1>
</div>
<Footer />
</>
);
}

View file

@ -0,0 +1,121 @@
import React, { useEffect } from "react";
import "../../App.css";
import Footer from "../../Footer";
import { Logger } from "@behametrics/logger-web";
import { useAuth } from "../../auth/AuthProvider";
import InputField from "../InputField";
import { useState } from "react/cjs/react.development";
import SubmitField from "../SubmitField";
export default function BehaviorNormal() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const handleUsernameChange = (e) => {
setUsername(e.target.value);
};
const handlePasswordChange = (e) => {
setPassword(e.target.value);
};
const handleOnCopyEvent = (e) => {
e.preventDefault();
console.log("copy not allowed");
return false;
};
const handleOnPasteEvent = (e) => {
e.preventDefault();
console.log("paste not allowed");
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) => {
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 :-)");
});
}
});
};
let logger = new Logger({
//inputs: ["cursor", "wheel", "keyboard", "touch"],
inputs: ["keyboard"],
// logToConsole: true,
});
logger.init();
let [isLoggedIn] = useAuth();
useEffect(() => {
document.title = `${isLoggedIn}`;
if (isLoggedIn === false) {
logger.stop();
} else {
logger.start();
}
});
return (
<>
<div className="sitePage">
<h1>Studie</h1>
<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>
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: abcdefgeh
</p>
<form 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
LabelName="Weiter zur nächsten Situation"
InputValue="next-situation"
InputName="Weiter"
onClick={onSubmitClick}
/>
</form>
</div>
<Footer />
</>
);
}

View file

@ -13,7 +13,6 @@ export default function Login() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [message, setMessage] = useState("");
const [errorMessage, setErrorMessage] = useState("");
const [isStatusOk, setIsStatusOk] = useState("");
@ -40,7 +39,6 @@ export default function Login() {
});
} else if (response.status === 200) {
response.json().then((resp) => {
setMessage(resp.message);
fetch("/api/login", {
method: "post",
body: JSON.stringify(opts),

View file

@ -24,7 +24,6 @@ export default function Umfrage() {
const [skillsErrorMessage, setSkillsErrorMessage] = useState("");
const [backendErrorMessage, setBackendErrorMessage] = useState("");
const [backendSuccessMessage, setBackendSuccessMessage] = useState("");
const [isSurveyValidBackend, setIsSurveyValidBackend] = useState("");
/* boolean if the values are ok */
@ -50,8 +49,6 @@ export default function Umfrage() {
setIsEducationOk(true);
setIsSkillsOk(true);
setIsSurveyValid(true);
console.log("before valid");
console.log(isSurveyValid);
if (!Number(age)) {
setAgeErrorMessage("Das Alter muss als Zahl angegeben werden.");
@ -80,8 +77,6 @@ export default function Umfrage() {
setIsSkillsOk(false);
}
console.log("after valid");
console.log(isSurveyValid);
if (isSurveyValid === true) {
authFetch("/api/protected/umfrage", {
method: "post",
@ -89,7 +84,6 @@ export default function Umfrage() {
}).then((response) => {
if (response.status === 200) {
response.json().then((r) => {
setBackendSuccessMessage(r.message);
setIsSurveyValidBackend(true);
});
} else {