Index: imaps-frontend/src/pages/Login/Login.jsx
===================================================================
--- imaps-frontend/src/pages/Login/Login.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/Login/Login.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,88 +1,120 @@
-import React, { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import React, {useContext, useState} from "react";
+import {Link, useLocation, useNavigate} from "react-router-dom";
 import styles from "./Login.module.css";
 import illustration from "../../assets/illustration_img.png";
+import Logo from "../../components/Logo/Logo.jsx";
+import HttpService from "../../scripts/net/HttpService.js";
+import {useAppContext} from "../../components/AppContext/AppContext.jsx";
+import config from "../../scripts/net/netconfig.js";
 
-const LoginPage = ({onLogin}) => {
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState(null);
-  const navigate = useNavigate();
+const LoginPage = () => {
+    const [formUsername, setFormUsername] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState(null);
+    const navigate = useNavigate();
+    const location = useLocation();
 
-  const payload = {
-    username: username,
-    password: password
-  };
+    const {setUsername, setIsAuthenticated} = useAppContext();
 
-  const handleLogin = (e) => {
-    e.preventDefault();
+    const {targetPath} = location.state || {targetPath: {pathname: "/"}};
 
-    fetch("http://localhost:8080/api/auth/login", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(payload),
-    })
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error("Login failed: resp = " + response.statusText); 
-        }
-        return response.json();
-      })
-      .then((data) => {
-        if (data.token) {
-          navigate("/Maps/FinkiMaps/Draw");
-          onLogin(data.token)
-        } else {
-          setError("Invalid username or password.");
-        }
-      })
-      .catch((error) => {
-        console.error("Login failed", error);
-        setError("Login failed. Please try again.");
-      });
-    
-  };
+    const payload = {
+        username: formUsername,
+        password: password,
+    };
 
-  return (
-    <div className={styles.wrapper}>
-      <div className={styles.illustration}>
-        <img src={illustration} alt="illustration" />
-      </div>
-      <div className={styles.form}>
-        <div className={styles.heading}>LOGIN</div>
-        <form onSubmit={handleLogin}>
-          <div>
-            <label htmlFor="username">Username</label>
-            <input
-              type="text"
-              id="name"
-              placeholder="Enter your username"
-              onChange={(e) => setUsername(e.target.value)}
-              value={username}
-              required
-            />
-          </div>
-          <div>
-            <label htmlFor="password">Password</label>
-            <input
-              type="password"
-              id="password"
-              placeholder="Enter your password"
-              onChange={(e) => setPassword(e.target.value)}
-              value={password}
-              required
-            />
-          </div>
-          {error && <p className={styles.error}>{error}</p>}
-          <button type="submit">Submit</button>
-        </form>
-        <p>
-          Don't have an account? <Link to="/Signup"> Sign Up </Link>
-        </p>
-      </div>
-    </div>
-  );
+    const handleLogin = async () => {
+        const httpService = new HttpService();
+        return httpService.post(config.auth.login, payload)
+
+    };
+
+
+    const login = async (e) => {
+        e.preventDefault();
+
+        handleLogin()
+            .then(resp => {
+                if (resp.token) {
+                    navigate(targetPath)
+                    localStorage.setItem("token", resp.token);
+                    setUsername(resp.username);
+                    setIsAuthenticated(true);
+                    console.log("ROLES",resp.roles)
+                } else {
+                    setError("Invalid username or password.");
+                }
+            }).catch(reason => {
+            console.error("Login failed", reason);
+            setError("Login failed. Please try again.")
+        })
+
+        // fetch("http://localhost:8080/api/auth/login", {
+        //   method: "POST",
+        //   headers: {
+        //     "Content-Type": "application/json",
+        //   },
+        //   body: JSON.stringify(payload),
+        // })
+        //   .then((response) => {
+        //     if (!response.ok) {
+        //       throw new Error("Login failed: resp = " + response.statusText);
+        //     }
+        //     return response.json();
+        //   })
+        //   .then((data) => {
+        //     if (data.token) {
+        //       navigate(targetPath);
+        //       handleLogin(data);
+        //     } else {
+        //       setError("Invalid username or password.");
+        //     }
+        //   })
+        //   .catch((error) => {
+        //     console.error("Login failed", error);
+        //     setError("Login failed. Please try again.");
+        //   });
+    };
+
+    return (
+        <div className={styles.wrapper}>
+            <Logo></Logo>
+            <div className={styles.illustration}>
+                <img src={illustration} alt="illustration"/>
+            </div>
+            <div className={styles.form}>
+                <div className={styles.heading}>LOGIN</div>
+                <form onSubmit={login}>
+                    <div>
+                        <label htmlFor="username">Username</label>
+                        <input
+                            type="text"
+                            id="name"
+                            placeholder="Enter your username"
+                            onChange={(e) => setFormUsername(e.target.value)}
+                            value={formUsername}
+                            required
+                        />
+                    </div>
+                    <div>
+                        <label htmlFor="password">Password</label>
+                        <input
+                            type="password"
+                            id="password"
+                            placeholder="Enter your password"
+                            onChange={(e) => setPassword(e.target.value)}
+                            value={password}
+                            required
+                        />
+                    </div>
+                    {error && <p className={styles.error}>{error}</p>}
+                    <button type="submit">Submit</button>
+                </form>
+                <p>
+                    Don't have an account? <Link to="/Signup"> Sign Up </Link>
+                </p>
+            </div>
+        </div>
+    );
 };
 
