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
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #200
This commit is contained in:
commit
a373ad4dce
4 changed files with 41 additions and 17 deletions
|
@ -95,4 +95,5 @@ h1 {
|
|||
|
||||
.generated-password {
|
||||
font-weight: bold;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
|
@ -10,7 +10,6 @@ export default function BehaviorNormal(props) {
|
|||
Passwort eingeben. Verhalten Sie sich einfach so, als ob Sie sich
|
||||
normalerweise anmelden.
|
||||
</p>
|
||||
{console.log("props", props)}
|
||||
<GeneratedPassword genPassword={props.genPassword} />
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -9,9 +9,8 @@ export default function GeneratedPassword(props) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<p onCopy={handleOnCopyEvent}>
|
||||
<p>
|
||||
Das Passwort für diese Situation lautet:{" "}
|
||||
{console.log("component genpw, genpassword", props.genPassword)}
|
||||
<span className="generated-password">{props.genPassword}</span>
|
||||
</p>
|
||||
</>
|
||||
|
|
|
@ -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({
|
||||
|
@ -73,7 +78,10 @@ export default function Study() {
|
|||
|
||||
const handleOnPasteEvent = (e) => {
|
||||
e.preventDefault();
|
||||
console.log("paste not allowed");
|
||||
return false;
|
||||
};
|
||||
const handleOnCopyEvent = (e) => {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
};
|
||||
|
||||
|
@ -88,7 +96,6 @@ export default function Study() {
|
|||
response.json().then((resp) => {
|
||||
console.log(resp.random_password);
|
||||
setGenPassword(resp.random_password);
|
||||
console.log("rcv pw; print genPassword", genPassword);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
@ -98,7 +105,6 @@ export default function Study() {
|
|||
};
|
||||
|
||||
const checkIfValuesAreCorrect = () => {
|
||||
console.log(checkIfPasswordIsCorrect());
|
||||
return checkIfPasswordIsCorrect() && checkIfUsernameIsCorrect();
|
||||
};
|
||||
|
||||
|
@ -108,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();
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -150,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}
|
||||
|
@ -165,7 +188,7 @@ export default function Study() {
|
|||
onChange={handlePasswordChange}
|
||||
InputType="password"
|
||||
InputName="Passwort"
|
||||
InputPlaceHolder="Benutzername"
|
||||
InputPlaceHolder="Passwort"
|
||||
onPaste={handleOnPasteEvent}
|
||||
/>
|
||||
<SubmitField
|
||||
|
@ -174,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}
|
||||
|
@ -195,7 +219,7 @@ export default function Study() {
|
|||
onChange={handlePasswordChange}
|
||||
InputType="password"
|
||||
InputName="Passwort"
|
||||
InputPlaceHolder="Benutzername"
|
||||
InputPlaceHolder="Passwort"
|
||||
onPaste={handleOnPasteEvent}
|
||||
/>
|
||||
<SubmitField
|
||||
|
@ -204,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}
|
||||
|
@ -234,7 +259,7 @@ export default function Study() {
|
|||
InputName="quit"
|
||||
onClick={handleClickAtStepStanding}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
|
|
Loading…
Reference in a new issue