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 { .generated-password {
font-weight: bold; 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 Passwort eingeben. Verhalten Sie sich einfach so, als ob Sie sich
normalerweise anmelden. normalerweise anmelden.
</p> </p>
{console.log("props", props)}
<GeneratedPassword genPassword={props.genPassword} /> <GeneratedPassword genPassword={props.genPassword} />
</> </>
); );

View file

@ -9,9 +9,8 @@ export default function GeneratedPassword(props) {
return ( return (
<> <>
<p onCopy={handleOnCopyEvent}> <p>
Das Passwort für diese Situation lautet:{" "} Das Passwort für diese Situation lautet:{" "}
{console.log("component genpw, genpassword", props.genPassword)}
<span className="generated-password">{props.genPassword}</span> <span className="generated-password">{props.genPassword}</span>
</p> </p>
</> </>

View file

@ -3,6 +3,7 @@ import "../../App.css";
import Footer from "../../Footer"; import Footer from "../../Footer";
import InputField from "../InputField"; import InputField from "../InputField";
import SubmitField from "../SubmitField"; import SubmitField from "../SubmitField";
import ErrorMessage from "../ErrorMessage";
import { Logger } from "@behametrics/logger-web"; import { Logger } from "@behametrics/logger-web";
import { Button } from "../Button"; import { Button } from "../Button";
import BehaviorStudyInfo from "../BehaviorStudyInfo"; import BehaviorStudyInfo from "../BehaviorStudyInfo";
@ -24,6 +25,10 @@ export default function Study() {
END: "end", END: "end",
}; };
const [state, setState] = useState(STATES.START); 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(() => { useEffect(() => {
_logger.current = new Logger({ _logger.current = new Logger({
@ -73,7 +78,10 @@ export default function Study() {
const handleOnPasteEvent = (e) => { const handleOnPasteEvent = (e) => {
e.preventDefault(); e.preventDefault();
console.log("paste not allowed"); return false;
};
const handleOnCopyEvent = (e) => {
e.preventDefault();
return false; return false;
}; };
@ -88,7 +96,6 @@ export default function Study() {
response.json().then((resp) => { response.json().then((resp) => {
console.log(resp.random_password); console.log(resp.random_password);
setGenPassword(resp.random_password); setGenPassword(resp.random_password);
console.log("rcv pw; print genPassword", genPassword);
}); });
}); });
}; };
@ -98,7 +105,6 @@ export default function Study() {
}; };
const checkIfValuesAreCorrect = () => { const checkIfValuesAreCorrect = () => {
console.log(checkIfPasswordIsCorrect());
return checkIfPasswordIsCorrect() && checkIfUsernameIsCorrect(); return checkIfPasswordIsCorrect() && checkIfUsernameIsCorrect();
}; };
@ -108,28 +114,44 @@ export default function Study() {
handleLoggerOn(); 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 = () => { const handleClickAtStepNormal = () => {
if (checkIfValuesAreCorrect()) { if (checkIfValuesAreCorrect()) {
receiveRandomPassword(); receiveRandomPassword();
setIsInputCorrect(true);
setState(STATES.PHONE); setState(STATES.PHONE);
} else {
setIsInputCorrect(false);
resetInputValues();
} }
}; };
const handleClickAtStepPhone = () => { const handleClickAtStepPhone = () => {
if (checkIfValuesAreCorrect()) { if (checkIfValuesAreCorrect()) {
receiveRandomPassword(); receiveRandomPassword();
setIsInputCorrect(true);
setState(STATES.STANDING); setState(STATES.STANDING);
} else { } else {
console.log("Passwort und Benutzername stimmen nicht."); setIsInputCorrect(false);
resetInputValues();
} }
}; };
const handleClickAtStepStanding = () => { const handleClickAtStepStanding = () => {
if (checkIfValuesAreCorrect()) { if (checkIfValuesAreCorrect()) {
setIsInputCorrect(true);
setState(STATES.END); setState(STATES.END);
handleLoggerOff(); handleLoggerOff();
} else { } else {
console.log("Passwort und Benutzername stimmen nicht."); setIsInputCorrect(false);
resetInputValues();
} }
}; };
@ -150,8 +172,9 @@ export default function Study() {
const study_normal = ( const study_normal = (
<> <>
<BehaviorNormal genPassword={genPassword} /> <BehaviorNormal onCopy={handleOnCopyEvent} genPassword={genPassword} />
<form id="behaviorNormal"> {!isInputCorrect && <ErrorMessage message={errorText} />}
<div>
<InputField <InputField
LabelName="Benutzername" LabelName="Benutzername"
onChange={handleUsernameChange} onChange={handleUsernameChange}
@ -165,7 +188,7 @@ export default function Study() {
onChange={handlePasswordChange} onChange={handlePasswordChange}
InputType="password" InputType="password"
InputName="Passwort" InputName="Passwort"
InputPlaceHolder="Benutzername" InputPlaceHolder="Passwort"
onPaste={handleOnPasteEvent} onPaste={handleOnPasteEvent}
/> />
<SubmitField <SubmitField
@ -174,14 +197,15 @@ export default function Study() {
InputName="Weiter" InputName="Weiter"
onClick={handleClickAtStepNormal} onClick={handleClickAtStepNormal}
/> />
</form> </div>
</> </>
); );
const study_phone = ( const study_phone = (
<> <>
<BehaviorPhone genPassword={genPassword} /> <BehaviorPhone genPassword={genPassword} />
<form id="behaviorPhone"> {!isInputCorrect && <ErrorMessage message={errorText} />}
<div>
<InputField <InputField
LabelName="Benutzername" LabelName="Benutzername"
onChange={handleUsernameChange} onChange={handleUsernameChange}
@ -195,7 +219,7 @@ export default function Study() {
onChange={handlePasswordChange} onChange={handlePasswordChange}
InputType="password" InputType="password"
InputName="Passwort" InputName="Passwort"
InputPlaceHolder="Benutzername" InputPlaceHolder="Passwort"
onPaste={handleOnPasteEvent} onPaste={handleOnPasteEvent}
/> />
<SubmitField <SubmitField
@ -204,14 +228,15 @@ export default function Study() {
InputName="Weiter" InputName="Weiter"
onClick={handleClickAtStepPhone} onClick={handleClickAtStepPhone}
/> />
</form> </div>
</> </>
); );
const study_standing = ( const study_standing = (
<> <>
<BehaviorStanding genPassword={genPassword} /> <BehaviorStanding genPassword={genPassword} />
<form id="behaviorStanding"> {!isInputCorrect && <ErrorMessage message={errorText} />}
<div>
<InputField <InputField
LabelName="Benutzername" LabelName="Benutzername"
onChange={handleUsernameChange} onChange={handleUsernameChange}
@ -234,7 +259,7 @@ export default function Study() {
InputName="quit" InputName="quit"
onClick={handleClickAtStepStanding} onClick={handleClickAtStepStanding}
/> />
</form> </div>
</> </>
); );