Merge pull request 'Loginfunciton' (#39) from loginFunciton into main

frontend/src/App.js

@@ -8,8 +8,10 @@ import Ueber from "./components/pages/Ueber";
 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 Register from "./components/pages/Register";
 import Manual from "./components/pages/Manual";
+import Secret from "./components/pages/Secret";
+import PrivateRoute from "./auth/PrivateRoute";
 
 function App() {
   return (
@@ -25,6 +27,8 @@ function App() {
           <Route path="/login" component={Login} />
           <Route path="/register" component={Register} />
           <Route path="/manual" component={Manual} />
+          <Route path="/ueber" component={Ueber} />
+          <PrivateRoute path="/secret" component={Secret} />
         </Switch>
       </Router>
     </>

frontend/src/auth/PrivateRoute.js

@@ -0,0 +1,18 @@
+import { Component } from "react";
+import { Redirect, Route } from "react-router-dom";
+import { useAuth } from "./AuthProvider";
+
+const PrivateRoute = ({ component: Component, ...rest }) => {
+  const [logged] = useAuth();
+
+  return (
+    <Route
+      {...rest}
+      render={(props) =>
+        logged ? <Component {...props} /> : <Redirect to="/login" />
+      }
+    />
+  );
+};
+
+export default PrivateRoute

frontend/src/components/Navbar.js

@@ -66,7 +66,7 @@ function Navbar() {
             </li>
             <li>
               <Link
-                to="/sign-up"
+                to="/login"
                 className="nav-links-mobile"
                 onClick={closeMobileMenu}
               >

frontend/src/components/pages/Login.js

@@ -4,7 +4,8 @@ import "../../App.css";
 import Footer from "../../Footer";
 import InputField from "../InputField";
 import SubmitField from "../SubmitField";
-import { login, useAuth, logout } from "../../auth/AuthProvider";
+import { login, authFetch, useAuth, logout } from "../../auth/AuthProvider";
+import Secret from "./Secret";
 
 export default function Login() {
   const [username, setUsername] = useState("");
@@ -12,7 +13,6 @@ export default function Login() {
 
   const onSubmitClick = (e) => {
     e.preventDefault();
-    console.log("You pressed login");
     let opts = {
       username: username,
       password: password,
@@ -26,7 +26,6 @@ export default function Login() {
       .then((token) => {
         if (token.access_token) {
           login(token);
-          console.log(token);
         } else {
           console.log("Please type in the correct username / password");
         }
@@ -65,7 +64,10 @@ export default function Login() {
             <SubmitField onClick={onSubmitClick} LabelName="Einloggen" />
           </form>
         ) : (
+          <>
+          <Secret/>
           <button onClick={() => logout()}>Logout</button>
+          </>
         )}
       </div>
       <Footer />

frontend/src/components/pages/Secret.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react/cjs/react.development";
+import {authFetch} from "../../auth/AuthProvider.js"
+
+function Secret() {
+  const [message, setMessage] = useState("");
+
+  useEffect(() => {
+    authFetch("/api/protected")
+      .then((response) => {
+        if (response.status === 401) {
+          setMessage("Sorry, du bist nicht angemeldet");
+          return null;
+        }
+        return response.json();
+      })
+      .then((response) => {
+        if (response && response.message) {
+          setMessage(response.message);
+        }
+      });
+  }, []);
+  return <h2>Secret: {message}</h2>;
+}
+
+export default Secret;