Clean up css

frontend/src/components/LoginPage.tsx

@@ -1,81 +1,80 @@
-import { useState } from "react";
+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";
+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";
-import { ButtonType } from "./basics/BasicButtonDefinitions";
+import {ButtonType} from "./basics/BasicButtonDefinitions";
 
 export default function LoginPage() {
-  const [userName, setUserName] = useState<string>("");
-  const [password, setPassword] = useState<string>("");
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+    const [userName, setUserName] = useState<string>("");
+    const [password, setPassword] = useState<string>("");
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
-  const navigate = useNavigate();
+    const navigate = useNavigate();
 
-  /**
-   * Login
-   */
-  const executeLogin = async () => {
-    const dto: LoginRequestDto = {
-      userName,
-      password,
+    /**
+     * Login
+     */
+    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 to recipe list after successful login
+            navigate(getRecipeListUrl());
+        } catch (err: any) {
+            console.error("Login failed:", err);
+            setErrorMessage("Login fehlgeschlagen! Bitte überprüfe Benutzername und Passwort.");
+        }
     };
 
-    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 to recipe list after successful login
-      navigate(getRecipeListUrl());
-    } catch (err: any) {
-      console.error("Login failed:", err);
-      setErrorMessage("Login fehlgeschlagen! Bitte überprüfe Benutzername und Passwort.");
-    }
-  };
+    /**
+     * Catch key events in order to trigger login on enter
+     */
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            executeLogin();
+        }
+    };
 
-  /**
-   * Catch key events in order to trigger login on enter
-   */
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === "Enter") {
-      executeLogin();
-    }
-  };
+    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">
+                <h1 className="text-center mb-2">Anmeldung</h1>
 
-  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
+                    placeholder="Benutzername"
+                    value={userName}
+                    onChange={(e) => setUserName(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                />
 
-        <input
-          className="input-field"
-          placeholder="Benutzername"
-          value={userName}
-          onChange={(e) => setUserName(e.target.value)}
-          onKeyDown={handleKeyDown}
-        />
+                <PasswordField
+                    onPasswordChanged={setPassword}
+                    onKeyDown={handleKeyDown}
+                />
 
-        <PasswordField
-            onPasswordChanged = {setPassword}
-            onKeyDown={handleKeyDown}
-        />
+                {/* error message */}
+                {errorMessage && (
+                    <p className="error-text text-center">{errorMessage}</p>
+                )}
 
-        {/* error message */}
-        {errorMessage && (
-          <p className="error-text text-center">{errorMessage}</p>
-        )}
-
-        <Button
-          buttonType={ButtonType.PrimaryButton}
-          text="Login"
-          onClick={executeLogin}
-        />
-      </div>
-    </div>
-  );
+                <Button
+                    buttonType={ButtonType.PrimaryButton}
+                    text="Login"
+                    onClick={executeLogin}
+                />
+            </div>
+        </div>
+    );
 }