implement basic login

frontend/src/components/LoginPage.tsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import Button from "./basics/Button";
+import type { LoginRequestDto } from "../api/dtos/LoginRequestDto";
+import type { LoginResponseDto } from "../api/dtos/LoginResponseDto";
+import { login } from "../api/points/AuthPoint";
+import { getRecipeListUrl } from "../routes";
+import { useNavigate } from "react-router-dom";
+
+export default function LoginPage(){
+    const [userName, setUserName] = useState<string>("");
+    const [password, setPassword] = useState<string>("");
+    const navigate = useNavigate();
+    const executeLogin = async () =>{
+        const dto : LoginRequestDto = {
+            userName: userName, 
+            password: password
+        }
+        try{
+            // @todo move to auth handler
+            console.log("trying to log in with " + dto.userName)
+            const loginResponse : LoginResponseDto = await login(dto);
+            localStorage.setItem("session", JSON.stringify(loginResponse));
+            console.log("Successfully logged on with user " + loginResponse.userData?.userName)
+            navigate(getRecipeListUrl());
+        } catch(err){
+            // @todo show error in GUI
+            console.error(err);
+        }
+    }
+    return(
+        <div className="p-6 max-w-2xl mx-auto">
+            <input
+                className="input-field"
+                placeholder="Benutzername"
+                value = {userName}
+                onChange={e => {
+                    setUserName(e.target.value)
+                }}
+            />
+            {/* @todo Password mode!!! */}
+            <input
+                className="input-field"
+                placeholder="Passwort"
+                value = {password}                
+                onChange={e => {
+                    setPassword(e.target.value)
+                }}
+            />
+            <Button
+                text="Login" 
+                onClick= {executeLogin}
+            />
+        </div>
+    );
+}