Fix various issues in the frontend (fix #197 & fix #192) #200

Merged
cami merged 5 commits from frontend/fix-paste-errormessage into main 2021-07-22 23:07:21 +00:00
4 changed files with 41 additions and 17 deletions

View file

@ -95,4 +95,5 @@ h1 {
.generated-password {
font-weight: bold;
user-select: none;
}

View file

@ -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} />
</>
);

View file

@ -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>
</>

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({
@ -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>
</>
);