import React, { useEffect, useRef, 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 { Button } from "../Button";
import BehaviorStudyInfo from "../BehaviorStudyInfo";
import BehaviorNormal from "../BehaviorNormal";
import BehaviorPhone from "../BehaviorPhone";
import BehaviorStanding from "../BehaviorStanding";
import BehaviorStudyEnd from "../BehaviorStudyEnd";
import { authFetch } from "../../auth/AuthProvider";
export default function Study() {
const _logger = useRef(0);
const [serverUsername, setServerUsername] = useState("");
useEffect(() => {
_logger.current = new Logger({
//inputs: ["cursor", "wheel", "keyboard", "touch"],
inputs: ["keyboard"],
// apiUrl: "https://behavior.marcocamenzind.ch",
apiUrl: "http://localhost:5000",
logToConsole: true,
});
_logger.current.init();
authFetch("/api/username", {
method: "get",
}).then((response) => {
response.json().then((resp) => {
setServerUsername(resp.username);
});
});
}, []);
let username = "";
const setUsername = (tmp_username) => {
username = tmp_username;
};
let password = "";
const setPassword = (tmp_password) => {
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");
};
const handleLoggerOn = () => {
_logger.current.start();
console.log("start logging ");
};
const handlePasswordChange = (e) => {
setPassword(e.target.value);
};
const handleUsernameChange = (e) => {
setUsername(e.target.value);
};
const handleOnPasteEvent = (e) => {
e.preventDefault();
console.log("paste not allowed");
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 = () => {
receiveRandomPassword();
setIsStepStart(false);
setIsStepNormal(true);
handleLoggerOn();
};
const handleClickAtStepNormal = () => {
if (checkIfValuesAreCorrect()) {
receiveRandomPassword();
setIsStepNormal(false);
setIsStepPhone(true);
}
};
const handleClickAtStepPhone = () => {
if (checkIfValuesAreCorrect()){
receiveRandomPassword();
setIsStepPhone(false);
setIsStepStanding(true);
}
else {
console.log("Passwort und Benutzername stimmen nicht.")
}
};
const handleClickAtStepStanding = () => {
if (checkIfValuesAreCorrect()){
setIsStepStanding(false);
setIsStepEnd(true);
handleLoggerOff();
}
else {
console.log("Passwort und Benutzername stimmen nicht.")
}
};
const study_start = (
<>