Merge pull request #17 from MarvinBo44/frontend/login-sec

add frontend security / login and logout

frontend/package.json

@@ -10,19 +10,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "axios": "^1.4.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "reactjs-popup": "^2.0.5",
-    "uuid": "^9.0.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.7",
     "@material-ui/icons": "^4.11.3",
     "@mui/icons-material": "^5.14.3",
     "@mui/material": "^5.14.3",
     "@mui/styled-engine-sc": "^5.12.0",
-    "styled-components": "^5.3.11"
+    "axios": "^1.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.15.0",
+    "reactjs-popup": "^2.0.5",
+    "styled-components": "^5.3.11",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

frontend/src/App.tsx

@@ -1,34 +1,27 @@
 import './App.css'
 import './DayView.css'
-import WeatherData from "./WeatherAPI.tsx";
-import AddActivity from "./AddActivity.tsx";
-import CurrentDay from "./DayView.tsx";
-import {useEffect, useState} from "react";
-import axios from 'axios'
+import {Route, Routes} from 'react-router-dom'
+import LoginPage from "./LoginPage/LoginPage.tsx";
+import RegisterPage from "./Register/Register.tsx";
+import HomePage from "./HomePage.tsx";
 
 function App() {
 
-    const [weather, setWeather] = useState<undefined>();
-
-    useEffect(() => {
-        axios({
-            // url: "http://api.weatherapi.com/v1/forecast.json?key=6cc628764c7547e298d143025230108&q="+ort+"&days=3&aqi=yes&alerts=no",
-            url: "https://api.weatherapi.com/v1/forecast.json?key=6cc628764c7547e298d143025230108&q=Lemgo&days=3&aqi=yes&alerts=no",
-            method: "get"
-        }).then(function (response) {
-            setWeather(response.data);
-        });
-    }, []);
-
     return (
-        <>
-            <div>
-                <WeatherData weather={weather}/>
-                <AddActivity/>
-                <CurrentDay weather={weather}/>
+        // <>
+        //     <div>
+        //         <WeatherData weather={weather}/>
+        //         <AddActivity/>
+        //         <CurrentDay weather={weather}/>
+        //
+        //     </div>
+        // </>
 
-            </div>
-        </>
+        <Routes>
+            <Route path={"/"} element={<LoginPage/>}/>
+            <Route path={"/register"} element={<RegisterPage/>}/>
+            <Route path={"/home"} element={<HomePage/>}/>
+        </Routes>
     )
 }
 

frontend/src/HomePage.tsx

@@ -0,0 +1,41 @@
+import WeatherData from "./WeatherAPI.tsx";
+import AddActivity from "./AddActivity.tsx";
+import CurrentDay from "./DayView.tsx";
+import {FormEvent, useEffect, useState} from "react";
+import axios from "axios";
+import {useNavigate} from "react-router-dom";
+
+export default function HomePage(){
+
+    const [weather, setWeather] = useState<undefined>();
+
+    useEffect(() => {
+        axios({
+            // url: "http://api.weatherapi.com/v1/forecast.json?key=6cc628764c7547e298d143025230108&q="+ort+"&days=3&aqi=yes&alerts=no",
+            url: "https://api.weatherapi.com/v1/forecast.json?key=6cc628764c7547e298d143025230108&q=Lemgo&days=3&aqi=yes&alerts=no",
+            method: "get"
+        }).then(function (response) {
+            setWeather(response.data);
+        });
+    }, []);
+
+    const nav = useNavigate();
+    function logout(event:FormEvent<HTMLFormElement>){
+        event.preventDefault()
+        axios.post("/api/user/logout")
+            .then((response) => console.log(response.data))
+            .then(()=>nav("/"))
+            .catch((error) => console.log(error))
+    }
+
+    return (
+        <div>
+            <form onSubmit={logout}>
+                <button>logout</button>
+            </form>
+            <WeatherData weather={weather}/>
+            <AddActivity/>
+            <CurrentDay weather={weather}/>
+        </div>
+    )
+}

frontend/src/LoginPage/LoginPage.tsx

@@ -0,0 +1,38 @@
+import {ChangeEvent, FormEvent, useState} from "react";
+import axios from "axios";
+import {Link, useNavigate} from "react-router-dom";
+
+export default function LoginPage(){
+
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+
+    const nav = useNavigate()
+
+    function onChangeHandlerUsername(event:ChangeEvent<HTMLInputElement>){
+        setUsername(event.target.value)
+    }
+
+    function onChnageHandlerPassword(event:ChangeEvent<HTMLInputElement>){
+        setPassword(event.target.value)
+    }
+
+    function login(event:FormEvent<HTMLFormElement>){
+        event.preventDefault();
+        axios.post("/api/user/login", undefined, {auth: {username, password}})
+            .then(() => nav("/home"))
+            .catch((error) => console.log(error));
+    }
+
+    return(
+        <div>
+            <h1>LOGIN</h1>
+            <form onSubmit={login}>
+                <input type={"text"} id={"username"} placeholder={"enter your username"} required={true} onChange={onChangeHandlerUsername}/>
+                <input type={"password"} id={"password"} placeholder={"*****************"} required={true} onChange={onChnageHandlerPassword}/>
+                <button >Login</button>
+            </form>
+            <button><Link to={"/register"}>New here?</Link></button>
+        </div>
+    );
+}

frontend/src/Register/Register.tsx

@@ -0,0 +1,40 @@
+import {ChangeEvent, FormEvent, useState} from "react";
+import {Link, useNavigate} from "react-router-dom";
+import axios from "axios";
+
+
+export default function RegisterPage() {
+
+    const [username, setUsername] = useState("")
+    const [password, setPassword] = useState("")
+
+    const nav = useNavigate();
+
+    function onChangeHandlerUsername(event:ChangeEvent<HTMLInputElement>){
+        setUsername(event.target.value)
+    }
+
+    function onChnageHandlerPassword(event:ChangeEvent<HTMLInputElement>){
+        setPassword(event.target.value)
+    }
+
+    function registrieren(event:FormEvent<HTMLFormElement>){
+        event.preventDefault();
+        axios.post("/api/user/register", {username, password})
+            .then(() => nav("/home"))
+            .catch((error) => console.log(error));
+
+    }
+
+    return(
+        <div>
+            <h1>Registrieren</h1>
+            <form onSubmit={registrieren}>
+                <input type={"text"} id={"username"} placeholder={"enter your username"} required={true} onChange={onChangeHandlerUsername}/>
+                <input type={"password"} id={"password"} placeholder={"*****************"} required={true} onChange={onChnageHandlerPassword}/>
+                <button>Jetzt registrieren</button>
+            </form>
+            <button><Link to={"/"}>I have an login</Link></button>
+        </div>
+    );
+}

frontend/src/main.tsx

@@ -2,9 +2,12 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
+import {BrowserRouter} from "react-router-dom";
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+      <BrowserRouter>
+          <App/>
+      </BrowserRouter>
   </React.StrictMode>,
 )