Updated the Login.jsx page

src/pages/Login/Login.jsx

@@ -1,24 +1,32 @@
 import "./styles.sass";
+import Button from "@components/Button/index.js";
+import LoginHeader from "@/pages/Login/components/LoginHeader/index.js";
+import {useState} from "react";
+import LoginGroup from "@/pages/Login/components/LoginGroup/index.js";
 
 const Login = () => {
+
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+
+    const [loading, setLoading] = useState(false);
+
+    const login = () => {
+        setLoading(true);
+    }
+
     return (
-        <div className="center-page">
+        <div className="align-center">
             <div className="login-container">
-                <div className="login-header">
-                    <img src="/logo.png" alt="logo" />
-                    <h1>QuickByte</h1>
-                </div>
+                <LoginHeader />
+
                 <div className="login-body">
-                    <div className="login-group">
-                        <label htmlFor="username">Benutzername</label>
-                        <input type="text" name="username" id="username" />
-                    </div>
-                    <div className="login-group">
-                        <label htmlFor="password">Passwort</label>
-                        <input type="password" name="password" id="password" />
-                    </div>
+                    <LoginGroup id="username" text="Benutzername" state={username} setState={setUsername} />
+                    <LoginGroup id="password" text="Passwort" state={password} setState={setPassword} />
+
                     <a href="/forgot-password" className="text-right">Passwort vergessen?</a>
-                    <button className="btn btn-primary">Anmelden</button>
+
+                    <Button text="Anmelden" onClick={login} loading={loading} />
                 </div>
             </div>
         </div>