import React, { useEffect, useRef, useState } from "react";
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 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("");
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: ["keyboard", "wheel", "cursor", "custom"],
apiUrl: "https://behavior.marcocamenzind.ch",
});
_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 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();
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) => {
console.log(resp.random_password);
setGenPassword(resp.random_password);
});
});
};
const checkIfPasswordIsCorrect = () => {
return genPassword === password;
};
const checkIfValuesAreCorrect = () => {
return checkIfPasswordIsCorrect() && checkIfUsernameIsCorrect();
};
const handleClickAtStepStart = () => {
receiveRandomPassword();
setState(STATES.NORMAL);
handleLoggerOn();
// 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 = () => {
if (checkIfValuesAreCorrect()) {
receiveRandomPassword();
setIsInputCorrect(true);
setState(STATES.PHONE);
} else {
setIsInputCorrect(false);
resetInputValues();
}
};
const handleClickAtStepPhone = () => {
if (checkIfValuesAreCorrect()) {
receiveRandomPassword();
setIsInputCorrect(true);
setState(STATES.STANDING);
} else {
setIsInputCorrect(false);
resetInputValues();
}
};
const handleClickAtStepStanding = () => {
if (checkIfValuesAreCorrect()) {
setIsInputCorrect(true);
setState(STATES.END);
handleLoggerOff();
} else {
setIsInputCorrect(false);
resetInputValues();
}
};
const study_start = (
<>