frontend/refactoring #195

Merged
cami merged 2 commits from frontend/refactoring into main 2021-07-22 18:03:21 +00:00
5 changed files with 37 additions and 47 deletions

View file

@ -4,15 +4,15 @@ import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./components/pages/Home"; import Home from "./components/pages/Home";
import Ueber from "./components/pages/Ueber"; import Ueber from "./components/pages/Ueber";
import Lizenzen from "./components/pages/lizenzen"; import Lizenzen from "./components/pages/Lizenzen";
import Privacy from "./components/pages/Privacy"; import Privacy from "./components/pages/Privacy";
import Login from "./components/pages/Login"; import Login from "./components/pages/Login";
import Register from "./components/pages/Register"; import Register from "./components/pages/Register";
import Manual from "./components/pages/Manual"; import Manual from "./components/pages/Manual";
import Secret from "./components/pages/Secret";
import Umfrage from "./components/pages/Umfrage"; import Umfrage from "./components/pages/Umfrage";
import PrivateRoute from "./auth/PrivateRoute"; import PrivateRoute from "./auth/PrivateRoute";
import Study from "./components/pages/Study"; import Study from "./components/pages/Study";
import Secret from "./components/pages/Secret";
function App() { function App() {
return ( return (

View file

@ -44,11 +44,17 @@ function Navbar() {
Startseite Startseite
</Link> </Link>
</li> </li>
<li className="nav-item"> {isLoggedIn && (
<Link to="/study" className="nav-links" onClick={closeMobileMenu}> <li className="nav-item">
Studie <Link
</Link> to="/study"
</li> className="nav-links"
onClick={closeMobileMenu}
>
Studie
</Link>
</li>
)}
<li className="nav-item"> <li className="nav-item">
<Link to="/Ueber" className="nav-links" onClick={closeMobileMenu}> <Link to="/Ueber" className="nav-links" onClick={closeMobileMenu}>
Über Über

View file

@ -15,6 +15,15 @@ import { authFetch } from "../../auth/AuthProvider";
export default function Study() { export default function Study() {
const _logger = useRef(0); const _logger = useRef(0);
const [serverUsername, setServerUsername] = useState(""); const [serverUsername, setServerUsername] = useState("");
const [genPassword, setGenPassword] = useState("");
const STATES = {
START: "start",
NORMAL: "normal",
PHONE: "phone",
STANDING: "standing",
END: "end",
};
const [state, setState] = useState(STATES.START);
useEffect(() => { useEffect(() => {
_logger.current = new Logger({ _logger.current = new Logger({
@ -44,12 +53,6 @@ export default function Study() {
password = tmp_password; password = tmp_password;
}; };
const [isStepStart, setIsStepStart] = useState(true);
const [isStepNormal, setIsStepNormal] = useState(false);
const [isStepPhone, setIsStepPhone] = useState(false);
const [isStepStanding, setIsStepStanding] = useState(false);
const [isStepEnd, setIsStepEnd] = useState(false);
const handleLoggerOff = () => { const handleLoggerOff = () => {
_logger.current.stop(); _logger.current.stop();
console.log("Logger ausgeschaltet"); console.log("Logger ausgeschaltet");
@ -75,15 +78,9 @@ export default function Study() {
}; };
const checkIfUsernameIsCorrect = () => { const checkIfUsernameIsCorrect = () => {
if (serverUsername === username) { return serverUsername === username;
return true;
} else {
return false;
}
}; };
const [genPassword, setGenPassword] = useState("");
const receiveRandomPassword = () => { const receiveRandomPassword = () => {
fetch("/api/rcv_pw", { fetch("/api/rcv_pw", {
method: "get", method: "get",
@ -97,43 +94,31 @@ export default function Study() {
}; };
const checkIfPasswordIsCorrect = () => { const checkIfPasswordIsCorrect = () => {
if (genPassword === password) { return genPassword === password;
return true;
} else {
return false;
}
}; };
const checkIfValuesAreCorrect = () => { const checkIfValuesAreCorrect = () => {
console.log(checkIfPasswordIsCorrect()); console.log(checkIfPasswordIsCorrect());
if (checkIfPasswordIsCorrect() && checkIfUsernameIsCorrect()) { return checkIfPasswordIsCorrect() && checkIfUsernameIsCorrect();
return true;
} else {
alert("Passt nicht");
return false;
}
}; };
const handleClickAtStepStart = () => { const handleClickAtStepStart = () => {
receiveRandomPassword(); receiveRandomPassword();
setIsStepStart(false); setState(STATES.NORMAL);
setIsStepNormal(true);
handleLoggerOn(); handleLoggerOn();
}; };
const handleClickAtStepNormal = () => { const handleClickAtStepNormal = () => {
if (checkIfValuesAreCorrect()) { if (checkIfValuesAreCorrect()) {
receiveRandomPassword(); receiveRandomPassword();
setIsStepNormal(false); setState(STATES.PHONE);
setIsStepPhone(true);
} }
}; };
const handleClickAtStepPhone = () => { const handleClickAtStepPhone = () => {
if (checkIfValuesAreCorrect()) { if (checkIfValuesAreCorrect()) {
receiveRandomPassword(); receiveRandomPassword();
setIsStepPhone(false); setState(STATES.STANDING);
setIsStepStanding(true);
} else { } else {
console.log("Passwort und Benutzername stimmen nicht."); console.log("Passwort und Benutzername stimmen nicht.");
} }
@ -141,8 +126,7 @@ export default function Study() {
const handleClickAtStepStanding = () => { const handleClickAtStepStanding = () => {
if (checkIfValuesAreCorrect()) { if (checkIfValuesAreCorrect()) {
setIsStepStanding(false); setState(STATES.END);
setIsStepEnd(true);
handleLoggerOff(); handleLoggerOff();
} else { } else {
console.log("Passwort und Benutzername stimmen nicht."); console.log("Passwort und Benutzername stimmen nicht.");
@ -241,7 +225,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
@ -260,11 +244,11 @@ export default function Study() {
<> <>
<div className="sitePage"> <div className="sitePage">
<h1>Studie</h1> <h1>Studie</h1>
{isStepStart ? study_start : null} {state === STATES.START ? study_start : null}
{isStepNormal ? study_normal : null} {state === STATES.NORMAL ? study_normal : null}
{isStepPhone ? study_phone : null} {state === STATES.PHONE ? study_phone : null}
{isStepStanding ? study_standing : null} {state === STATES.STANDING ? study_standing : null}
{isStepEnd ? study_end : null} {state === STATES.END ? study_end : null}
</div> </div>
<Footer /> <Footer />
</> </>

View file

@ -51,8 +51,8 @@ export default function Umfrage() {
if (!Number(age)) { if (!Number(age)) {
setAgeErrorMessage("Das Alter muss als Zahl angegeben werden."); setAgeErrorMessage("Das Alter muss als Zahl angegeben werden.");
//setIsSurveyValid(false); setIsSurveyValid(false);
// setIsAgeOk(false); setIsAgeOk(false);
} }
if (gender === "DEFAULT" || gender === "") { if (gender === "DEFAULT" || gender === "") {
setGenderErrorMessage( setGenderErrorMessage(