Index: ReserveNGo-frontend/src/components/Project/Auth/login_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Auth/login_.vue	(revision d90601f3d2e204d572e6f170033a5bd483473ee4)
+++ ReserveNGo-frontend/src/components/Project/Auth/login_.vue	(revision a6fc8cd1c38d61d4273a7ea72cac1600ef75ab03)
@@ -1,71 +1,72 @@
-<script>
-import { userStore } from '@/PiniaStores/UserStore.js';
-import { useRouter } from 'vue-router';
-import router from '@/router/index.js';
+<script lang="ts">
+import { userStore } from '@/PiniaStores/UserStore.js'
+import { useRouter } from 'vue-router'
+import router from '@/router/index.js'
+import LoadingIcon from '@/components/Project/Utility/LoadingIcon.vue'
+import { useLocalManager } from '@/repository/LocalManager.ts'
+import { useAuth } from '@/repository/Authentication.ts'
 
 export default {
+  components: { LoadingIcon },
   data() {
     return {
       form_info: {
         email: '',
-        password: ''
+        password: '',
       },
       url: 'http://localhost:8080/api/auth/login',
       userStore_: userStore(),
       router: useRouter(),
-      managerLocalId: "",
-    };
+      managerLocalId: '',
+
+
+      isLoading: false,
+      errorMessage: '',
+    }
   },
   methods: {
     async makeLogin() {
+      this.isLoading = true
+
       try {
-        const response = await fetch(this.url, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            email: this.form_info.email,
-            password: this.form_info.password,
-          }),
-        });
+        const json = await useAuth.makeLogin(this.form_info.email, this.form_info.password)
 
-        const json = await response.json();
+        console.log('Priting the json object to help me with profile picture.', json)
 
-        console.log("Priting the json object to help me with profile picture.", json);
-
-        this.userStore_.setLocalStorage(json);
+        this.userStore_.setLocalStorage(json)
 
         if (this.userStore_ && this.userStore_.data.role === 'ROLE_ADMIN') {
-          router.push('/admin-dashboard');
-        } else if(this.userStore_ && this.userStore_.data.role === "ROLE_LOCAL_MANAGER"){
-          this.fetchLocalForManager();
+          router.push('/admin-dashboard')
+        } else if (this.userStore_ && this.userStore_.data.role === 'ROLE_LOCAL_MANAGER') {
+          this.fetchLocalForManager()
         } else {
-          router.push('/');
+          router.push('/')
         }
       } catch (error) {
-        console.error('Login error:', error);
+        if (error.status === 401) {
+          this.errorMessage = "Oops! That password seems to be incorrect."
+        }
+
+      }
+      finally {
+        this.isLoading = false
       }
     },
-    fetchLocalForManager(){
-      fetch("http://localhost:8080/api/local-manager/my-local",{
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: this.userStore_.getToken
-        },
-      }).then((res) => res.json())
+    fetchLocalForManager() {
+      useLocalManager.getLocal()
         .then((data) => (this.managerLocalId = data.id))
-        .then(()=>router.push(`/more_details/${this.managerLocalId}`))
-        .catch((err) => {console.log("LOCALE NOT ASSIGNED", err);
-                        router.push('/more_details/')});
-
-    }
-
-  }
-};
+        .then(() => router.push(`/more_details/${this.managerLocalId}`))
+        .catch((err) => {
+          console.log('LOCALE NOT ASSIGNED', err)
+          router.push('/more_details/')
+        })
+    },
+  },
+}
 </script>
 
 <template>
-  <div class="container-xxl d-flex  justify-content-center mt-3 ">
-    <div class="card shadow p-4" style="max-width: 400px; width: 100%;">
+  <div class="container-xxl d-flex justify-content-center mt-3">
+    <div class="card shadow p-4" style="max-width: 400px; width: 100%">
       <h3 class="text-center mb-4">Login</h3>
       <form @submit.prevent="makeLogin">
@@ -79,5 +80,5 @@
             placeholder="Enter your email"
             required
-          >
+          />
         </div>
 
@@ -91,8 +92,12 @@
             placeholder="Enter your password"
             required
-          >
+          />
         </div>
+        <div style="color: red; margin-bottom: 1rem">{{errorMessage}}</div>
 
-        <button type="submit" class="btn btn-dark w-100">Login</button>
+        <button :disabled="isLoading" type="submit" class="btn btn-dark w-100">
+          <span v-if="!isLoading">Login</span>
+          <LoadingIcon v-else></LoadingIcon>
+        </button>
       </form>
     </div>
@@ -100,5 +105,3 @@
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
Index: ReserveNGo-frontend/src/components/Project/Auth/register_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Auth/register_.vue	(revision d90601f3d2e204d572e6f170033a5bd483473ee4)
+++ ReserveNGo-frontend/src/components/Project/Auth/register_.vue	(revision a6fc8cd1c38d61d4273a7ea72cac1600ef75ab03)
@@ -1,12 +1,14 @@
 <script>
-import { userStore } from '@/PiniaStores/UserStore.js';
-import { useRouter } from 'vue-router';
-import router from '@/router/index.js';
+import { userStore } from '@/PiniaStores/UserStore.js'
+import { useRouter } from 'vue-router'
+import router from '@/router/index.js'
+import LoadingIcon from '@/components/Project/Utility/LoadingIcon.vue'
+import { useAuth } from '@/repository/Authentication.ts'
 
 export default {
+  components: { LoadingIcon },
   data() {
     return {
       path: '',
-      url: 'http://localhost:8080/api/auth/register/',
       form_info: {
         firstName: '',
@@ -18,41 +20,35 @@
       userStore_: userStore(),
       router: useRouter(),
-    };
-  },
-  computed: {
-    wholeUrl() {
-      return this.url + this.path;
-    },
-    testJson() {
-      return JSON.stringify({
-        firstName: this.form_info.firstName,
-        lastName: this.form_info.lastName,
-        email: this.form_info.email,
-        password: this.form_info.password,
-        phoneNumber: this.form_info.phoneNumber,
-      });
-    },
+
+      isLoading: false,
+      errorMessage: '',
+    }
   },
   methods: {
     async register() {
-      await fetch(this.wholeUrl, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          firstName: this.form_info.firstName,
-          lastName: this.form_info.lastName,
-          email: this.form_info.email,
-          password: this.form_info.password,
-          phoneNumber: this.form_info.phoneNumber,
-        }),
-      })
-        .then((response) => response.json())
+      this.isLoading = true
+      await useAuth.makeRegister(
+          this.form_info.firstName,
+          this.form_info.lastName,
+          this.form_info.email,
+          this.form_info.phoneNumber,
+          this.form_info.password,
+          this.path,
+        )
         .then((json) => {
-          this.userStore_.setLocalStorage(json);
-          router.push('/');
-        });
+          this.userStore_.setLocalStorage(json)
+          router.push('/')
+        })
+        .catch((err) => {
+          if (err.status === 409) {
+            this.errorMessage = "It looks like an account already exists with that email address. Do you want to log in instead?"
+          }
+        })
+        .finally(() => {
+          this.isLoading = false
+        })
     },
   },
-};
+}
 </script>
 
@@ -67,5 +63,4 @@
                 <h3 class="mb-4 text-center">Register</h3>
                 <form @submit.prevent="register" method="POST">
-
                   <div class="mb-3">
                     <label for="name" class="form-label">First Name</label>
@@ -135,10 +130,5 @@
                   <div class="mb-4">
                     <label for="role" class="form-label">Role</label>
-                    <select
-                      class="form-select"
-                      id="role"
-                      v-model="path"
-                      required
-                    >
+                    <select class="form-select" id="role" v-model="path" required>
                       <option value="" disabled>Select a role</option>
                       <option value="customer">Customer</option>
@@ -147,7 +137,10 @@
                     </select>
                   </div>
-
+                  <div style="color: red;">{{errorMessage}}</div>
                   <div class="d-grid">
-                    <button type="submit" class="btn btn-dark">Register</button>
+                    <button :disabled="isLoading" type="submit" class="btn btn-dark">
+                      <span v-if="!isLoading">Register</span>
+                      <LoadingIcon v-else></LoadingIcon>
+                    </button>
                   </div>
 
@@ -163,5 +156,7 @@
 
 <style scoped>
-html, body, .register-page-wrapper {
+html,
+body,
+.register-page-wrapper {
   height: 100%;
   overflow: hidden;
Index: ReserveNGo-frontend/src/components/interface/interfejsi.js
===================================================================
--- ReserveNGo-frontend/src/components/interface/interfejsi.js	(revision a6fc8cd1c38d61d4273a7ea72cac1600ef75ab03)
+++ ReserveNGo-frontend/src/components/interface/interfejsi.js	(revision a6fc8cd1c38d61d4273a7ea72cac1600ef75ab03)
@@ -0,0 +1,14 @@
+/*
+
+class CustomError extends Error {
+
+
+
+  constructor(message) {
+    super(message)
+  }
+
+
+
+}
+a*/
Index: ReserveNGo-frontend/src/repository/Authentication.ts
===================================================================
--- ReserveNGo-frontend/src/repository/Authentication.ts	(revision a6fc8cd1c38d61d4273a7ea72cac1600ef75ab03)
+++ ReserveNGo-frontend/src/repository/Authentication.ts	(revision a6fc8cd1c38d61d4273a7ea72cac1600ef75ab03)
@@ -0,0 +1,29 @@
+import { ApiClient } from '@/Api_Classes/ApiClient'
+import { config } from '@/constants/Api_config'
+import { HttpClient } from '@/Api_Classes/HttpClient'
+
+const BASE_API_URL = config.API_BASE_URL
+
+class Authentication {
+  private readonly httpClient: HttpClient
+
+  constructor(baseUrl: string) {
+    this.httpClient = new HttpClient(baseUrl)
+  }
+
+  makeLogin(email: String, password: String) : Promise<any> {
+    return this.httpClient.post('login', { email, password })
+  }
+  makeRegister(
+    firstName: String,
+    lastName: String,
+    email: String,
+    phoneNumber: String,
+    password: String,
+    role: String,
+  ) {
+    return this.httpClient.post("register/" + role, { firstName, lastName, email, phoneNumber, password })
+  }
+}
+
+export const useAuth = new Authentication(BASE_API_URL + '/api/auth/')
Index: ReserveNGo-frontend/src/repository/LocalManager.ts
===================================================================
--- ReserveNGo-frontend/src/repository/LocalManager.ts	(revision d90601f3d2e204d572e6f170033a5bd483473ee4)
+++ ReserveNGo-frontend/src/repository/LocalManager.ts	(revision a6fc8cd1c38d61d4273a7ea72cac1600ef75ab03)
@@ -26,4 +26,7 @@
     return this.httpClient.delete('delete-photos', photoUrls)
   }
+  getLocal(): Promise<any> {
+    return this.httpClient.get('my-local');
+  }
 
 }