frontend/refactoring #195
5 changed files with 37 additions and 47 deletions
|
@ -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 (
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 />
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -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(
|
||||||
|
|
Loading…
Reference in a new issue