Compare commits

..

49 commits

Author SHA1 Message Date
3b83ebf3fb Merge pull request 'survey-end' (#211) from survey-end into main
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #211
2021-07-30 09:04:42 +00:00
a626e32cbe Remove apiurl so that no longer the data will get logged
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing
2021-07-30 11:01:19 +02:00
4c01e68264 Make a box that the study is finished 2021-07-30 11:00:02 +02:00
7026909c61 Merge pull request 'Remove logging of password and update privacy(fix #203)' (#210) from frontend/remove-log into main
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #210
2021-07-25 21:36:41 +00:00
d01a70f925 Updated licenses and privacy
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing
2021-07-25 23:36:05 +02:00
41143c361b Remove logging of password
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing
2021-07-25 23:27:49 +02:00
3f6b622088 Merge pull request 'backend/update-requirements' (#209) from backend/update-requirements into main
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #209
2021-07-24 22:19:50 +00:00
d5c6aad834 Updated dockerfile
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing
2021-07-25 00:19:26 +02:00
fe5b563139 Updated python requirements
All checks were successful
continuous-integration/drone/push Build is passing
2021-07-25 00:15:05 +02:00
ae82024e94 Merge pull request 'infra/bumpversion' (#208) from infra/bumpversion into main
Some checks failed
continuous-integration/drone/push Build is failing
Reviewed-on: #208
2021-07-24 22:07:26 +00:00
c5b595ad40 Updated some things for infrastructure
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing
2021-07-25 00:05:11 +02:00
8bb37bbc21 Updated to upstream
All checks were successful
continuous-integration/drone/push Build is passing
2021-07-24 02:11:17 +02:00
74ca8d8973 Merge branch 'main' into infra/bumpversion 2021-07-24 02:08:39 +02:00
deecf9ccad Removed unused function
All checks were successful
continuous-integration/drone/pr Build is passing
continuous-integration/drone/push Build is passing
2021-07-24 01:16:39 +02:00
94070d8f75 Merge pull request 'Update logger config and create a session usermapping (fix #178 and fix #188)' (#206) from frontend/logger-update into main
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #206
2021-07-23 23:15:34 +00:00
c52308e623 Update logger config and create a session usermapping
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing
2021-07-24 01:14:25 +02:00
d220f86cb8 Remove the input if someone typed the wrong password
All checks were successful
continuous-integration/drone/pr Build is passing
continuous-integration/drone/push Build is passing
2021-07-24 01:10:40 +02:00
a97c95f762 Bumped version of mongodb 2021-07-24 01:08:17 +02:00
5816d4f914 Remove unused fontawesome usages
All checks were successful
continuous-integration/drone/pr Build is passing
continuous-integration/drone/push Build is passing
2021-07-23 03:46:43 +02:00
617741218c Add things about privacy for the user
All checks were successful
continuous-integration/drone/pr Build is passing
continuous-integration/drone/push Build is passing
2021-07-23 03:35:09 +02:00
a373ad4dce Merge pull request 'Fix various issues in the frontend (fix #197 & fix #192)' (#200) from frontend/fix-paste-errormessage into main
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #200
2021-07-22 23:07:18 +00:00
9f4e097e27 Merge branch 'main' into frontend/fix-paste-errormessage
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing
2021-07-23 01:05:32 +02:00
8e6a74d30c Added a bugfix in the backend
All checks were successful
continuous-integration/drone/push Build is passing
2021-07-22 23:05:13 +00:00
d168b0c87e Add errormessage if username or password are not correct
All checks were successful
continuous-integration/drone/push Build is passing
2021-07-23 01:00:14 +02:00
1d0f898fc9 Do not allow copy and paste in survey (fix #197) 2021-07-23 00:59:39 +02:00
90e77bf450 Clean up some things 2021-07-23 00:58:34 +02:00
31513f4824 Make it not possible to copy the password with css 2021-07-23 00:54:29 +02:00
a1a719088d Added some more options to requests-script
All checks were successful
continuous-integration/drone/pr Build is passing
continuous-integration/drone/push Build is passing
2021-07-23 00:51:28 +02:00
85e484bf0b Renaming and autoformatting
All checks were successful
continuous-integration/drone/pr Build is passing
continuous-integration/drone/push Build is passing
- renamed the react files to jsx
- autoformat with vscode
2021-07-22 20:18:01 +02:00
e762032f00 Merge pull request 'frontend/refactoring' (#195) from frontend/refactoring into main
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #195
2021-07-22 18:03:20 +00:00
dcd4215efa Renamed lizenzen.js to Lizenzen.js
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing
2021-07-22 20:02:35 +02:00
52131aa3dd Refactoring..
All checks were successful
continuous-integration/drone/push Build is passing
- use STATES instead of multiple different variables
- add check if password is correct
-
2021-07-22 19:55:06 +02:00
fd205273fc Added content in license page
All checks were successful
continuous-integration/drone/pr Build is passing
continuous-integration/drone/push Build is passing
2021-07-22 19:01:40 +02:00
9cf2c50d01 Added study button
All checks were successful
continuous-integration/drone/pr Build is passing
continuous-integration/drone/push Build is passing
2021-07-22 17:10:35 +02:00
47166c6345 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
2021-07-22 14:55:26 +00:00
396b45df67 Add text at the end of the study
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing
2021-07-22 16:54:24 +02:00
eaa4d8937a use property to show the value of the actual password 2021-07-22 16:53:57 +02:00
2f7d733591 Receive password and check if it's the same 2021-07-22 16:53:08 +02:00
f5e58ccb09 Merge branch 'main' into frontend/check-username-pw-survey
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing
2021-07-22 07:31:17 +02:00
ca49c0d0f1 Merge pull request 'Added content' (#187) from content into main
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #187
2021-07-22 05:30:32 +00:00
d1bc91bcb7 Added content
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing
2021-07-22 07:29:54 +02:00
58bd327377 Update some change password things..
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing
2021-07-22 05:20:37 +02:00
a6346d7496 Password validation works but password is not shown in generated password thing
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing
2021-07-22 04:44:31 +02:00
c1fce5bf4a Change api for random password
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing
2021-07-22 03:24:31 +02:00
7a930c20b6 Permissions for requests.sh
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing
2021-07-22 03:11:50 +02:00
130088756d Check if username is the same as in the current session 2021-07-22 03:11:28 +02:00
770e3e0285 Started implementing username and password check 2021-07-22 02:41:24 +02:00
e7407fd40b Refactoring and removing unused things 2021-07-22 02:40:58 +02:00
959912bd9b Refactored so that the studyEnd also has its own component 2021-07-22 02:40:17 +02:00
43 changed files with 523 additions and 246 deletions

View file

@ -4,6 +4,9 @@ WORKDIR /app
COPY requirements.txt .
RUN apt-get -y update
RUN apt-get -y install sqlite3
RUN pip install -r requirements.txt
COPY /src .

View file

@ -6,6 +6,8 @@ RUN apt-get -y update && apt-get -y upgrade
COPY requirements.txt .
RUN apt-get -y install sqlite3
RUN pip install -r requirements.txt
COPY /src .

View file

@ -1,3 +1,4 @@
autopep8==1.5.7
blinker==1.4
click==7.1.2
Deprecated==1.2.12
@ -16,11 +17,13 @@ MarkupSafe==1.1.1
passlib==1.7.4
pendulum==2.1.2
py-buzz==1.0.3
pycodestyle==2.7.0
PyJWT==2.1.0
python-dateutil==2.8.1
python-dotenv==0.17.1
pytzdata==2020.1
six==1.16.0
SQLAlchemy==1.4.15
toml==0.10.2
Werkzeug==1.0.1
wrapt==1.12.1

View file

@ -113,12 +113,20 @@ def refresh():
$ curl http://localhost:5000/api/refresh -X GET \
-H "Authorization: Bearer <your_token>"
"""
old_token = request.get_data()
old_token = flask.request.get_data()
new_token = guard.refresh_jwt_token(old_token)
ret = {'access_token': new_token}
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')
@flask_praetorian.auth_required
def protected():
@ -133,11 +141,10 @@ def protected():
return {'message': f'protected endpoint (allowed user {flask_praetorian.current_user().username})'}
@app.route('/api/protected/rcv_pw', methods=['GET'])
# @flask_praetorian.auth_required
@app.route('/api/rcv_pw', methods=['GET'])
def get_password():
pw = get_random_password()
ret = {'password': pw}
ret = {'random_password': pw}
return ret, 200

View file

@ -8,6 +8,8 @@ services:
backend-prod:
image: caminsha/bt-backend
container_name: backend-prod
volumes:
- "./database.db:/app/database.db:z"
environment:
DEBUG: "no"
PORT: 5050
@ -20,6 +22,6 @@ services:
environment:
- MONGO_URI=mongodb://mongodb:27017/behametrics
mongodb:
image: mongo:4.0.1
image: mongo:4.0.25
container_name: "behametrics-mongo"
command: mongod --smallfiles

View file

@ -35,6 +35,6 @@ services:
environment:
- MONGO_URI=mongodb://mongodb:27017/behametrics
mongodb:
image: mongo:4.0.1
image: mongo:4.0.25
container_name: "behametrics-mongo"
command: mongod --smallfiles

View file

@ -31,7 +31,10 @@
<title>BA - Marco Camenzind</title>
</head>
<body>
<noscript>Diese Anwendung funktioniert leider nur mit JavaScript. Bitte aktivieren JavaScript in den Einstellungen</noscript>
<noscript
>Diese Anwendung funktioniert leider nur mit JavaScript. Bitte aktivieren
JavaScript in den Einstellungen</noscript
>
<div id="root"></div>
<!--
This HTML file is a template.

View file

@ -40,6 +40,10 @@
color: var(--primary);
}
a {
text-decoration: none;
}
a:hover:not(.navbar-logo) {
border-bottom: 4px dotted var(--secondary);
}
@ -51,21 +55,32 @@ a:hover:not(.navbar-logo) {
}
h1 {
font-size: 5em;
font-size: 4.5em;
margin: 0.7em auto;
text-align: center;
}
.sitePage h2 {
font-size: 3.75em;
font-size: 3.7em;
margin: 0.7em auto;
}
.sitePage h3 {
font-size: 2em;
margin: 0.5em auto;
}
.sitePage p {
font-size: 1.5em;
max-width: 60%;
margin-bottom: 4vh;
}
.sitePage ul li {
font-size: 1.5em;
margin-bottom: 0.7em;
}
.errorMessage {
color: var(--error);
max-width: 60%;
@ -80,4 +95,15 @@ h1 {
.generated-password {
font-weight: bold;
user-select: none;
}
.study-finished {
background-color: var(--primary);
padding: 0.5em;
}
.study-finished > p {
color: var(--error);
font-size: 2em;
}

View file

@ -4,15 +4,15 @@ import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./components/pages/Home";
import Ueber from "./components/pages/Ueber";
import Lizenzen from "./components/pages/lizenzen";
import Lizenzen from "./components/pages/Lizenzen";
import Privacy from "./components/pages/Privacy";
import Login from "./components/pages/Login";
import Register from "./components/pages/Register";
import Manual from "./components/pages/Manual";
import Secret from "./components/pages/Secret";
import Umfrage from "./components/pages/Umfrage";
import PrivateRoute from "./auth/PrivateRoute";
import Study from "./components/pages/Study";
import Secret from "./components/pages/Secret";
function App() {
return (

View file

@ -92,45 +92,6 @@
color: #b1b1b1;
}
/* Social Icons */
.social-icon-link {
color: var(--forth);
font-size: 24px;
}
.social-media {
max-width: 1000px;
width: 100%;
}
.social-media-wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 99%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.social-icons {
display: flex;
justify-content: space-between;
align-items: center;
width: 240px;
}
.social-logo {
color: var(--forth);
justify-self: start;
margin-left: 20px;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
display: flex;
align-self: center;
margin-bottom: 16px;
}
@media screen and (max-width: 820px) {
.footer-links {
padding-top: 2rem;
@ -148,7 +109,4 @@
flex-direction: column;
}
.social-media-wrap {
flex-direction: column;
}
}

View file

@ -1,7 +1,6 @@
import React from "react";
import { Link } from "react-router-dom";
import "./Footer.css";
import "@fortawesome/fontawesome-free/css/all.css";
function Footer() {
return (

View file

@ -1,7 +0,0 @@
import React from "react";
function AuthorDate() {
return <div></div>;
}
export default AuthorDate;

View file

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

View file

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

View file

@ -1,14 +0,0 @@
import React from "react";
import "../App.css";
import GeneratedPassword from "./GeneratedPassword"
export default function BehaviorStanding() {
return (
<>
<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.
</p>
<GeneratedPassword />
</>
);
}

View file

@ -0,0 +1,16 @@
import React from "react";
import "../App.css";
import GeneratedPassword from "./GeneratedPassword";
export default function BehaviorStanding(props) {
return (
<>
<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.
</p>
<GeneratedPassword genPassword={props.genPassword} />
</>
);
}

View file

@ -0,0 +1,18 @@
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

@ -14,7 +14,6 @@ export default function BehaviorStudyInfo() {
Bitte klicken Sie auf weiter, um mit der Studie zu beginnen. Bitte lesen
Sie die jeweilige Aufgabe jeweils genau.
</p>
</>
);
}

View file

@ -31,7 +31,7 @@
font-size: 1.3em;
}
.btn--full{
.btn--full {
padding: 12px 26px;
margin: 0 auto;
font-size: 1.5em;
@ -44,4 +44,3 @@
color: var(--secondary);
transition: 250ms;
}

View file

@ -1,29 +0,0 @@
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

@ -0,0 +1,13 @@
import React from "react";
import "../App.css";
export default function GeneratedPassword(props) {
return (
<>
<p>
Das Passwort für diese Situation lautet:{" "}
<span className="generated-password">{props.genPassword}</span>
</p>
</>
);
}

View file

@ -2,8 +2,8 @@ import React from "react";
import "../App.css";
import { Button } from "./Button";
import "./HeroSection.css";
import "@fortawesome/fontawesome-free/css/all.css";
import { useAuth } from "../auth/AuthProvider";
import StudyFinished from "./StudyFinished";
export default function HeroSection() {
const [isLoggedIn] = useAuth();
@ -11,6 +11,7 @@ export default function HeroSection() {
return (
<div className="hero-container">
<h1>Herzlich Willkommen</h1>
<StudyFinished />
<div className="hero-btns">
{isLoggedIn ? (
<Button

View file

@ -44,6 +44,17 @@ function Navbar() {
Startseite
</Link>
</li>
{isLoggedIn && (
<li className="nav-item">
<Link
to="/study"
className="nav-links"
onClick={closeMobileMenu}
>
Studie
</Link>
</li>
)}
<li className="nav-item">
<Link to="/Ueber" className="nav-links" onClick={closeMobileMenu}>
Über

View file

@ -0,0 +1,11 @@
import React from "react";
import "../App.css"
export default function StudyFinished() {
return (
<div className="study-finished">
<p>Die Studie wurde beendet.</p>
<p>Vielen Dank für die Teilnahme an der Studie</p>
</div>
);
}

View file

@ -0,0 +1,95 @@
import React from "react";
import "../../App.css";
import Footer from "../../Footer";
export default function Lizenzen() {
return (
<>
<div className="sitePage license">
<h1>Lizenzen und Bildnachweise</h1>
<p>
Nachfolgend sollen die verwendeten Bibliotheken inklusive der Lizenz
aufgeführt werden. Neben den Bibliotheken sollen vorallem auch
Bildnachweise notiert werden.
</p>
<h2>Verwendete Bibliotheken</h2>
<h3>Frontend</h3>
<ul>
<li>
ReactJS (MIT-Lizenz):{" "}
<a href="https://github.com/facebook/react">
https://github.com/facebook/react
</a>{" "}
</li>
<li>
Behametrics Web-Logger (MIT-Lizenz):{" "}
<a href="https://gitlab.com/behametrics/logger-web">
https://gitlab.com/behametrics/logger-web
</a>
</li>
<li>
Fortawesome Icons (CC-BY-4.0):{" "}
<a href="https://github.com/FortAwesome/Font-Awesome">
https://github.com/FortAwesome/Font-Awesome
</a>
</li>
<li>
React-Token-Auth (ISC-Lizenz):{" "}
<a href="https://github.com/obabichev/react-token-auth">
https://github.com/obabichev/react-token-auth
</a>
</li>
<li>
react-router-dom (MIT-Lizenz)
<a href="https://github.com/ReactTraining/react-router">
https://github.com/ReactTraining/react-router
</a>
</li>
</ul>
<h3>Backend</h3>
<ul>
<li>
Flask (BSD-3-Lizenz):{" "}
<a href="https://github.com/pallets/flask/">
https://github.com/pallets/flask/
</a>
</li>
<li>
flask-sqlalchemy (BSD-3-Lizenz):{" "}
<a href="https://github.com/pallets/flask-sqlalchemy">
https://github.com/pallets/flask-sqlalchemy
</a>
</li>
<li>
flask-praetorian (MIT-Lizenz):{" "}
<a href="https://github.com/dusktreader/flask-praetorian">
https://github.com/dusktreader/flask-praetorian
</a>
</li>
<li>
Flask-CORS (MIT-Lizenz):{" "}
<a href="https://github.com/corydolphin/flask-cors">
https://github.com/corydolphin/flask-cors
</a>
</li>
<li>
Behametrics Serverimplementierung (MIT-Lizenz):{" "}
<a href="https://gitlab.com/behametrics/server">
https://gitlab.com/behametrics/server
</a>
</li>
</ul>
<h2>Bildnachweise</h2>
<ul className="bildnachweise">
<li>
Originalbild für die Startseite:{" "}
<a href="https://pixabay.com/illustrations/virtual-identity-digital-identity-69996/">
https://pixabay.com/illustrations/virtual-identity-digital-identity-69996/
</a>
</li>
</ul>
</div>
<Footer />
</>
);
}

View file

@ -1,14 +0,0 @@
import React from "react";
import "../../App.css";
import Footer from "../../Footer";
export default function Manual() {
return (
<>
<div className="sitePage">
<h1> Anleitung / Bedienungshinweise</h1>
</div>
<Footer />
</>
);
}

View file

@ -0,0 +1,58 @@
import React from "react";
import { Link } from "react-router-dom";
import "../../App.css";
import Footer from "../../Footer";
export default function Manual() {
return (
<>
<div className="sitePage">
<h1> Anleitung / Bedienungshinweise</h1>
<p>
Vielen Dank für Ihr Interesse an meiner Bachelorthesis. Falls Sie noch
grundlegende Informationen benötigen, können Sie diese{" "}
<Link to="ueber">hier</Link> genauer anschauen. Hier geht es darum,
dass ich Ihnen eine kurze Anleitung zur Verfügung stelle und erkäre
wie das ganze funktioniert.
</p>
<h2>Neu hier</h2>
<p>
Bei Besuchern, die das erste Mal hier sind, geht es um zwei Dinge.
Erstens müssen sich diese registrieren und zweitens sollte eine
Umfrage durchgeführt werden. Diese Umfrage dient dazu, dass ich eine
grobe Übersicht habe, welche Personengruppen teilgenommen haben. Für
die Registrierung klicken Sie oben rechts einfach auf registieren. Sie
müssen dann einen Nutzernamen und ein Passwort eingeben. Schauen Sie
darauf, dass Sie sich den Benutzernamen und das Passwort merken
können. Es gibt keine Möglichkeit, das Passwort oder den Benutzernamen
zurückzusetzen. Nach der Registrierung landen Sie auf einer
Umfrageseite. Füllen Sie die Fragen wahrheitsgemäss aus und klicken
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.
</p>
<h2>War schon einmal hier</h2>
<p>Wenn Sie schon einmal hier waren, gibt es zwei mögliche Zustände:</p>
<ul>
<li>Sie sind noch eingeloggt</li>
<li>Sie sind nicht mehr eingeloggt</li>
</ul>
<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".
</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.
</p>
</div>
<Footer />
</>
);
}

View file

@ -1,15 +0,0 @@
import React from "react";
import "../../App.css";
import Footer from "../../Footer";
export default function Privacy() {
return (
<>
<div className="sitePage">
<h1>Datenschutz</h1>
</div>
"
<Footer />
</>
);
}

View file

@ -0,0 +1,97 @@
import React from "react";
import "../../App.css";
import Footer from "../../Footer";
export default function Privacy() {
return (
<>
<div className="sitePage">
<h1>Datenschutz</h1>
<p>
Nachfolgend werden Sie informiert, welche Daten ich von Ihnen erfasse
und erhebe. Grundsätzlich gilt, dass ich sämtliche Daten nach der
Bachelorthesis wieder lösche. Ausserdem gebe ich keine
personenbezogenen Daten an Dritte weiter. Nachfolgend werden die Daten
in folgende drei Kategorien eingeteilt:
</p>
<ul>
<li>Daten des Webservers</li>
<li>Anmelde- und Umfragedaten</li>
<li>Daten zu biometrischen Verhaltensmerkmalen</li>
</ul>
<h2>Daten des Webservers</h2>
<p>
Diese Webanwendung wird auf einem virtuellen Server bei{" "}
<a href="https://netcup.de">netcup</a> betrieben. Um diese
Webanwendung grundsätzlich bereitzustellen, werden die folgenden Daten
erhoben:{" "}
</p>
<ul>
<li>IP-Adresse der Anfrage</li>
<li>URL der Anfrage</li>
<li>
User-Agent der Anfrage (also z.B. der verwendete Browser usw.)
</li>
<li>Status der Antwort</li>
</ul>
<p>
Diese Informationen werden verwendet, um den reibungslosen Betrieb der
Webseit zu gewährleisten.{" "}
</p>
<h2>Anmelde- und Umfragedaten</h2>
<p>
Im Rahmen der Bachelorthesis erfasse ich einige Merkmale über Sie.
Hierzu zählen einerseits die Logindaten, welche erfasst werden müssen,
damit Sie sich einloggen können. Ausserdem erfasse ich die folgenden
Daten mit einer Umfrage:{" "}
</p>
<ul>
<li>Alter </li>
<li>Geschlecht </li>
<li>Höchster Bildungsstand </li>
<li>Geschätzte Anwenderkenntnisse im Informatikbereich</li>
</ul>
<p>
Die Anmeldedaten werden verwendet, damit Sie sich auf der Webseite
einloggen können. Damit Sie sich nicht jedes Mal anmelden müssen,
verwende ich die Methode von LocalStorage. Im Localstorage wird der
Wert REACT_TOKEN_AUTH_KEY gespeichert, welcher einen Zugangscode
enthält. Die Umfragedaten werden ausgewertet, damit ich die
Teilnehmenden einordnen kann. Die Daten werst sonst nicht
weiterverwertet.
</p>
<h2>Daten zu biometrischen Verhaltensmerkmalen</h2>
<p>
Während der Studie werden biometirsche Daten gesammelt. Zu den
biometrischen Daten gehören Mausbewegungen und Tastaturanschläge.
Diese Daten werden lediglich im Rahmen der Bachelorthesis verwendet
und ausgewertet. Nachdem die Bachelorthesis beendet ist, werden
sämtliche Daten gelöscht. Es erfolgt keine Auswertung der
biometrischen Daten im Zusammenhang mit den Daten der Umfrage.
Allerdings kann der Benutzername, welchen Sie bei der Anmeldung
angegeben haben, verwendet werden.
</p>
<h2>Weitergabe der Daten</h2>
<p>
Grundsätzlich werden die Daten nicht an Dritte weitergegeben. Folgende
Ausnahmen gibt es:
</p>
<ul>
<li>
Der Fernfachhochschule Schweiz werden die Daten falls notwendig
weitergegeben.
</li>
<li>
Sofern es eine gesetzliche Grundlage gibt, werden die Daten auch
weitergegeben.
</li>
<li>
Wie bereits oben erwähnt, läuft die Webanwendung auf einem
virtuellen Server bei <a href="https://netcup.de">netcup</a>. Hierbei gelten die Datenschutzbestimmungen von netcup, welche <a href="https://www.netcup.de/kontakt/datenschutzerklaerung.php">hier</a> eingesehen werden können.
</li>
</ul>
</div>
<Footer />
</>
);
}

View file

@ -3,25 +3,46 @@ import "../../App.css";
import Footer from "../../Footer";
import InputField from "../InputField";
import SubmitField from "../SubmitField";
import ErrorMessage from "../ErrorMessage";
import { Logger } from "@behametrics/logger-web";
import { Button } from "../Button";
import BehaviorStudyInfo from "../BehaviorStudyInfo";
import BehaviorNormal from "../BehaviorNormal";
import { Button } from "../Button";
import BehaviorPhone from "../BehaviorPhone";
import BehaviorStanding from "../BehaviorStanding";
import BehaviorStudyEnd from "../BehaviorStudyEnd";
import { authFetch } from "../../auth/AuthProvider";
import StudyFinished from "../StudyFinished";
export default function Study() {
const _logger = useRef(0);
const [serverUsername, setServerUsername] = useState("");
const [genPassword, setGenPassword] = useState("");
const STATES = {
START: "start",
NORMAL: "normal",
PHONE: "phone",
STANDING: "standing",
END: "end",
};
const [state, setState] = useState(STATES.START);
const [isInputCorrect, setIsInputCorrect] = useState(true);
const errorText =
"Das Passwort und der Benutzername stimmen nicht überein. Bitte prüfen Sie, dass Sie das Passwort richtig abgetippt und den Benutzernamen richtig eingegeben haben.";
useEffect(() => {
_logger.current = new Logger({
//inputs: ["cursor", "wheel", "keyboard", "touch"],
inputs: ["keyboard"],
// apiUrl: "https://behavior.marcocamenzind.ch",
apiUrl: "http://localhost:5000",
logToConsole: true,
inputs: ["keyboard", "wheel", "cursor", "custom"],
});
_logger.current.init();
authFetch("/api/username", {
method: "get",
}).then((response) => {
response.json().then((resp) => {
setServerUsername(resp.username);
});
});
}, []);
let username = "";
@ -34,12 +55,6 @@ export default function Study() {
password = tmp_password;
};
const [isStepStart, setIsStepStart] = useState(true);
const [isStepNormal, setIsStepNormal] = useState(false);
const [isStepPhone, setIsStepPhone] = useState(false);
const [isStepStanding, setIsStepStanding] = useState(false);
const [isStepEnd, setIsStepEnd] = useState(false);
const handleLoggerOff = () => {
_logger.current.stop();
console.log("Logger ausgeschaltet");
@ -62,52 +77,83 @@ export default function Study() {
e.preventDefault();
return false;
};
const handleOnCopyEvent = (e) => {
e.preventDefault();
return false;
};
const checkIfUsernameIsCorrect = () => {
return serverUsername === username;
};
const receiveRandomPassword = () => {
fetch("/api/rcv_pw", {
method: "get",
}).then((response) => {
response.json().then((resp) => {
setGenPassword(resp.random_password);
});
});
};
const checkIfPasswordIsCorrect = () => {
return genPassword === password;
};
const checkIfValuesAreCorrect = () => {
return checkIfPasswordIsCorrect() && checkIfUsernameIsCorrect();
};
const handleClickAtStepStart = () => {
setIsStepStart(false);
setIsStepNormal(true);
receiveRandomPassword();
setState(STATES.NORMAL);
handleLoggerOn();
// forceUpdate();
// map username and session with the logs
_logger.current.logCustomEvent({
name: serverUsername,
});
};
const resetInputValues = () => {
let inputElements = document.querySelectorAll(
'div input:not([type="submit"])'
);
for (let i = 0; i < inputElements.length; i++) {
inputElements[i].value = "";
}
};
const handleClickAtStepNormal = () => {
setIsStepNormal(false);
setIsStepPhone(true);
if (checkIfValuesAreCorrect()) {
receiveRandomPassword();
setIsInputCorrect(true);
setState(STATES.PHONE);
} else {
setIsInputCorrect(false);
resetInputValues();
}
};
const handleClickAtStepPhone = () => {
setIsStepPhone(false);
setIsStepStanding(true);
if (checkIfValuesAreCorrect()) {
receiveRandomPassword();
setIsInputCorrect(true);
setState(STATES.STANDING);
} else {
setIsInputCorrect(false);
resetInputValues();
}
};
const handleClickAtStepStanding = () => {
setIsStepStanding(false);
setIsStepEnd(true);
if (checkIfValuesAreCorrect()) {
setIsInputCorrect(true);
setState(STATES.END);
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 :-)");
});
setIsInputCorrect(false);
resetInputValues();
}
});
};
const study_start = (
@ -120,15 +166,16 @@ export default function Study() {
onClick={handleClickAtStepStart}
newTo="study"
>
Starten mit der Studie
Studie starten
</Button>
</>
);
const study_normal = (
<>
<BehaviorNormal />
<form id="behaviorNormal">
<BehaviorNormal onCopy={handleOnCopyEvent} genPassword={genPassword} />
{!isInputCorrect && <ErrorMessage message={errorText} />}
<div>
<InputField
LabelName="Benutzername"
onChange={handleUsernameChange}
@ -142,7 +189,7 @@ export default function Study() {
onChange={handlePasswordChange}
InputType="password"
InputName="Passwort"
InputPlaceHolder="Benutzername"
InputPlaceHolder="Passwort"
onPaste={handleOnPasteEvent}
/>
<SubmitField
@ -151,14 +198,15 @@ export default function Study() {
InputName="Weiter"
onClick={handleClickAtStepNormal}
/>
</form>
</div>
</>
);
const study_phone = (
<>
<BehaviorPhone />
<form id="behaviorPhone">
<BehaviorPhone genPassword={genPassword} />
{!isInputCorrect && <ErrorMessage message={errorText} />}
<div>
<InputField
LabelName="Benutzername"
onChange={handleUsernameChange}
@ -172,7 +220,7 @@ export default function Study() {
onChange={handlePasswordChange}
InputType="password"
InputName="Passwort"
InputPlaceHolder="Benutzername"
InputPlaceHolder="Passwort"
onPaste={handleOnPasteEvent}
/>
<SubmitField
@ -181,14 +229,15 @@ export default function Study() {
InputName="Weiter"
onClick={handleClickAtStepPhone}
/>
</form>
</div>
</>
);
const study_standing = (
<>
<BehaviorStanding />
<form id="behaviorPhone">
<BehaviorStanding genPassword={genPassword} />
{!isInputCorrect && <ErrorMessage message={errorText} />}
<div>
<InputField
LabelName="Benutzername"
onChange={handleUsernameChange}
@ -202,7 +251,7 @@ export default function Study() {
onChange={handlePasswordChange}
InputType="password"
InputName="Passwort"
InputPlaceHolder="Benutzername"
InputPlaceHolder="Passwort"
onPaste={handleOnPasteEvent}
/>
<SubmitField
@ -211,21 +260,22 @@ export default function Study() {
InputName="quit"
onClick={handleClickAtStepStanding}
/>
</form>
</div>
</>
);
const study_end = <p>Merci :-)</p>;
const study_end = <BehaviorStudyEnd />;
return (
<>
<div className="sitePage">
<h1>Studie</h1>
{isStepStart ? study_start : null}
{isStepNormal ? study_normal : null}
{isStepPhone ? study_phone : null}
{isStepStanding ? study_standing : null}
{isStepEnd ? study_end : null}
<StudyFinished />
{state === STATES.START ? study_start : null}
{state === STATES.NORMAL ? study_normal : null}
{state === STATES.PHONE ? study_phone : null}
{state === STATES.STANDING ? study_standing : null}
{state === STATES.END ? study_end : null}
</div>
<Footer />
</>

View file

@ -9,10 +9,10 @@ export default function Ueber() {
<h1>Über das Projekt</h1>
<p>
Im Rahmen meiner Bachelorthesis an der Fernfachhochschule Schweiz
möchte ich der Frage nachgehen, wie sich die Verhaltensmerkmale in
möchte ich der Frage nachgehen, wie sich die Verhaltensmerkmale (also zum Beispiel Tastaturanschläge und Mausbewegungen) in
unterschiedlichen Situationen unterscheiden. Hierfür habe ich eine
Webanwendung entwickelt, welche die Nutzerinnen und Nutzer möglichst
einfach durch die Studie führt.
einfach durch die Studie führt. Damit ich ein paar Personen respektive deren Verhalten erfassen kann, ist es natürlich wichtig, dass mehrere Personen an der Studie teilnehmen. Ausserdem ist es wichtig, dass die teilnehmenden Personen mehrere Male teilnehmen, so dass ich mögliche Unterschiede während des Tagesverlauf bewerten kann.
</p>
<p>
Falls Sie Fragen haben, können Sie diese jederzeit per Mail stellen.

View file

@ -51,8 +51,8 @@ export default function Umfrage() {
if (!Number(age)) {
setAgeErrorMessage("Das Alter muss als Zahl angegeben werden.");
//setIsSurveyValid(false);
// setIsAgeOk(false);
setIsSurveyValid(false);
setIsAgeOk(false);
}
if (gender === "DEFAULT" || gender === "") {
setGenderErrorMessage(

View file

@ -1,31 +0,0 @@
import React from "react";
import "../../App.css";
import Footer from "../../Footer";
export default function Lizenzen() {
return (
<>
<div className="sitePage">
<h1>Lizenzen und Bildnachweise</h1>
<p>
Nachfolgend sollen die verwendeten Bibliotheken inklusive der Lizenz
aufgeführt werden. Neben den Bibliotheken sollen vorallem auch
Bildnachweise notiert werden.
</p>
<h2>Verwendete Bibliotheken</h2>
<h3>Backend</h3>
<h3>Frontend</h3>
<h2>Bildnachweise</h2>
<ul className="bildnachweise">
<li>
Originalbild für die Startseite:
<a href="https://pixabay.com/illustrations/virtual-identity-digital-identity-69996/">
https://pixabay.com/illustrations/virtual-identity-digital-identity-69996/
</a>
</li>
</ul>
</div>
<Footer />
</>
);
}

24
requests.sh Normal file → Executable file
View file

@ -1,11 +1,11 @@
#!/bin/bash
ACTION=$1
TOKEN=$2
ACTIONS=(login register rcvpw username)
VALUE=$2
ACTIONS=(login register rcvpw username data csv prod_data prod_csv)
print_help(){
echo "Usage: $0 ACTION [TOKEN]"
echo "Usage: $0 ACTION [TOKEN|INPUT_TYPE]"
echo
echo "available actions:"
for el in "${ACTIONS[@]}"; do
@ -34,7 +34,23 @@ case $ACTION in
;;
"${ACTIONS[3]}") # get current username
echo "get username action"
curl localhost:5050/api/username -X GET -H "Authorization: Bearer $TOKEN"
curl localhost:5050/api/username -X GET -H "Authorization: Bearer $VALUE"
;;
"${ACTIONS[4]}") # get all data from behametricsserver
echo "get data action"
curl localhost:5000/data
;;
"${ACTIONS[5]}") # get all data from behametricsserver
echo "get csv from input action"
curl localhost:5000/data/csv/"${VALUE}"
;;
"${ACTIONS[6]}") # get all data from behametricsserver
echo "get prod data action"
curl behavior.marcocamenzind.ch:5000/data
;;
"${ACTIONS[7]}") # get all data from behametricsserver
echo "get prod csv from input action"
curl behavior.marcocamenzind.ch:5000/data/csv/"${VALUE}"
;;
*)
echo "Error: Action not available"