From 6a70d45b31a936b7be3d0cf109e2fbbb4f7f6dec Mon Sep 17 00:00:00 2001
From: br0kenpixel <23280129+br0kenpixel@users.noreply.github.com>
Date: Tue, 21 Oct 2025 14:13:00 +0200
Subject: [PATCH] feat: implement login functionality and enhance alert styling
 in login page

---
 frontend/app/pages/login.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/app/pages/login.vue b/frontend/app/pages/login.vue
index 831f7ce..cd2ca31 100644
--- a/frontend/app/pages/login.vue
+++ b/frontend/app/pages/login.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { FetchError } from 'ofetch';
+const { login } = useSanctumAuth();
 
 useSeoMeta({
     title: "Prihlásenie | ISOP",
@@ -15,7 +16,7 @@ const rules = {
 
 const isValid = ref(false);
 const showPassword = ref(false);
-const form = reactive({
+const form = ref({
     email: '',
     password: '',
 });
@@ -28,7 +29,7 @@ async function handleLogin() {
     loading.value = true;
 
     try {
-        // TODO: implement
+        await login(form.value);
     } catch (e) {
         if (e instanceof FetchError && e.response?.status === 422) {
             error.value = e.response?._data.message;
@@ -46,11 +47,11 @@ async function handleLogin() {
 
             <!-- Chybová hláška -->
             <v-alert v-if="error !== null" density="compact" :text="error" title="Chyba" type="error"
-                id="login-error-alert" class="mx-auto"></v-alert>
+                id="login-error-alert" class="mx-auto alert"></v-alert>
 
             <!-- Čakajúca hláška -->
             <v-alert v-if="loading" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
-                id="login-error-alert" class="mx-auto"></v-alert>
+                id="login-error-alert" class="mx-auto alert"></v-alert>
 
             <v-form v-else v-model="isValid" @submit.prevent="handleLogin">
                 <v-text-field v-model="form.email" :rules="[rules.required, rules.email]" label="Email:"
@@ -78,6 +79,10 @@ async function handleLogin() {
 </template>
 
 <style scoped>
+.alert {
+    margin-bottom: 10px;
+}
+
 .page-container {
     max-width: 1120px;
     margin: 0 auto;