Add errormessage if username or password are not correct
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
1d0f898fc9
commit
d168b0c87e
1 changed files with 33 additions and 9 deletions
|
@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
|
|
Loading…
Reference in a new issue