Merge pull request 'frontend/refactoring' (#195) from frontend/refactoring into main

Reviewed-on: #195

frontend/src/App.js

@@ -4,15 +4,15 @@ import "./App.css";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import Home from "./components/pages/Home";
 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 Login from "./components/pages/Login";
 import Register from "./components/pages/Register";
 import Manual from "./components/pages/Manual";
-import Secret from "./components/pages/Secret";
 import Umfrage from "./components/pages/Umfrage";
 import PrivateRoute from "./auth/PrivateRoute";
 import Study from "./components/pages/Study";
+import Secret from "./components/pages/Secret";
 
 function App() {
   return (

frontend/src/components/Navbar.js

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

frontend/src/components/pages/Study.js

@@ -15,6 +15,15 @@ import { authFetch } from "../../auth/AuthProvider";
 export default function Study() {
   const _logger = useRef(0);
   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(() => {
     _logger.current = new Logger({
@@ -44,12 +53,6 @@ export default function Study() {
     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 = () => {
     _logger.current.stop();
     console.log("Logger ausgeschaltet");
@@ -75,15 +78,9 @@ export default function Study() {
   };
 
   const checkIfUsernameIsCorrect = () => {
-    if (serverUsername === username) {
+    return serverUsername === username;
-      return true;
-    } else {
-      return false;
-    }
   };
 
-  const [genPassword, setGenPassword] = useState("");
-
   const receiveRandomPassword = () => {
     fetch("/api/rcv_pw", {
       method: "get",
@@ -97,43 +94,31 @@ export default function Study() {
   };
 
   const checkIfPasswordIsCorrect = () => {
-    if (genPassword === password) {
+    return genPassword === password;
-      return true;
-    } else {
-      return false;
-    }
   };
 
   const checkIfValuesAreCorrect = () => {
     console.log(checkIfPasswordIsCorrect());
-    if (checkIfPasswordIsCorrect() && checkIfUsernameIsCorrect()) {
+    return checkIfPasswordIsCorrect() && checkIfUsernameIsCorrect();
-      return true;
-    } else {
-      alert("Passt nicht");
-      return false;
-    }
   };
 
   const handleClickAtStepStart = () => {
     receiveRandomPassword();
-    setIsStepStart(false);
+    setState(STATES.NORMAL);
-    setIsStepNormal(true);
     handleLoggerOn();
   };
 
   const handleClickAtStepNormal = () => {
     if (checkIfValuesAreCorrect()) {
       receiveRandomPassword();
-      setIsStepNormal(false);
+      setState(STATES.PHONE);
-      setIsStepPhone(true);
     }
   };
 
   const handleClickAtStepPhone = () => {
     if (checkIfValuesAreCorrect()) {
       receiveRandomPassword();
-      setIsStepPhone(false);
+      setState(STATES.STANDING);
-      setIsStepStanding(true);
     } else {
       console.log("Passwort und Benutzername stimmen nicht.");
     }
@@ -141,8 +126,7 @@ export default function Study() {
 
   const handleClickAtStepStanding = () => {
     if (checkIfValuesAreCorrect()) {
-      setIsStepStanding(false);
+      setState(STATES.END);
-      setIsStepEnd(true);
       handleLoggerOff();
     } else {
       console.log("Passwort und Benutzername stimmen nicht.");
@@ -241,7 +225,7 @@ export default function Study() {
           onChange={handlePasswordChange}
           InputType="password"
           InputName="Passwort"
-          InputPlaceHolder="Benutzername"
+          InputPlaceHolder="Passwort"
           onPaste={handleOnPasteEvent}
         />
         <SubmitField
@@ -260,11 +244,11 @@ export default function Study() {
     <>
       <div className="sitePage">
         <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>
       <Footer />
     </>

frontend/src/components/pages/Umfrage.js

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