style login page

frontend/src/components/LoginPage.tsx

@@ -1,55 +1,64 @@
 import { useState } from "react";
-import Button from "./basics/Button";
+import Button, { ButtonType } 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";
+import PasswordField from "./basics/PasswordField";
 
-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);
-        }
+export default function LoginPage() {
+  const [userName, setUserName] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const navigate = useNavigate();
+
+  const executeLogin = async () => {
+    const dto: LoginRequestDto = {
+      userName,
+      password,
+    };
+
+    try {
+      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 in as " + loginResponse.userData?.userName);
+      setErrorMessage(null);
+      navigate(getRecipeListUrl());
+    } catch (err: any) {
+      console.error("Login failed:", err);
+      setErrorMessage("Login fehlgeschlagen! Bitte überprüfe Benutzername und Passwort.");
     }
-    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>
-    );
-}
+  };
+
+  return (
+    <div className="app-bg">
+      <div className="flex flex-col gap-3 max-w-sm w-full mx-auto p-6 bg-white rounded-2xl shadow-md">
+        <h2 className="content-title text-center mb-2">Anmeldung</h2>
+
+        <input
+          className="input-field"
+          placeholder="Benutzername"
+          value={userName}
+          onChange={(e) => setUserName(e.target.value)}
+        />
+
+        <PasswordField
+            onPasswordChanged = {setPassword}
+        />
+
+        {errorMessage && (
+          <p className="error-text text-center">{errorMessage}</p>
+        )}
+
+        <Button
+          buttonType={ButtonType.PrimaryButton}
+          text="Login"
+          onClick={executeLogin}
+        />
+      </div>
+    </div>
+  );
+}