Add errormessage if username or password are not correct
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
cami 2021-07-23 01:00:14 +02:00
parent 1d0f898fc9
commit d168b0c87e

View file

@ -3,6 +3,7 @@ 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";
@ -24,6 +25,10 @@ export default function Study() {
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({
@ -109,28 +114,44 @@ export default function Study() {
handleLoggerOn();
};
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 {
console.log("Passwort und Benutzername stimmen nicht.");
setIsInputCorrect(false);
resetInputValues();
}
};
const handleClickAtStepStanding = () => {
if (checkIfValuesAreCorrect()) {
setIsInputCorrect(true);
setState(STATES.END);
handleLoggerOff();
} else {
console.log("Passwort und Benutzername stimmen nicht.");
setIsInputCorrect(false);
resetInputValues();
}
};
@ -151,8 +172,9 @@ export default function Study() {
const study_normal = (
<>
<BehaviorNormal genPassword={genPassword} />
<form id="behaviorNormal">
<BehaviorNormal onCopy={handleOnCopyEvent} genPassword={genPassword} />
{!isInputCorrect && <ErrorMessage message={errorText} />}
<div>
<InputField
LabelName="Benutzername"
onChange={handleUsernameChange}
@ -175,14 +197,15 @@ export default function Study() {
InputName="Weiter"
onClick={handleClickAtStepNormal}
/>
</form>
</div>
</>
);
const study_phone = (
<>
<BehaviorPhone genPassword={genPassword} />
<form id="behaviorPhone">
{!isInputCorrect && <ErrorMessage message={errorText} />}
<div>
<InputField
LabelName="Benutzername"
onChange={handleUsernameChange}
@ -205,14 +228,15 @@ export default function Study() {
InputName="Weiter"
onClick={handleClickAtStepPhone}
/>
</form>
</div>
</>
);
const study_standing = (
<>
<BehaviorStanding genPassword={genPassword} />
<form id="behaviorStanding">
{!isInputCorrect && <ErrorMessage message={errorText} />}
<div>
<InputField
LabelName="Benutzername"
onChange={handleUsernameChange}
@ -235,7 +259,7 @@ export default function Study() {
InputName="quit"
onClick={handleClickAtStepStanding}
/>
</form>
</div>
</>
);