From d26d51c71d1666f8d5041fb9e63d99cb2281ee0f Mon Sep 17 00:00:00 2001
From: br0kenpixel <23280129+br0kenpixel@users.noreply.github.com>
Date: Mon, 20 Oct 2025 18:26:33 +0200
Subject: [PATCH] refactor: restructure login page layout with container and
 card components

---
 frontend/app/pages/login.vue | 48 ++++++++++++++++++++----------------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/frontend/app/pages/login.vue b/frontend/app/pages/login.vue
index b6c95fc..fe0e943 100644
--- a/frontend/app/pages/login.vue
+++ b/frontend/app/pages/login.vue
@@ -1,29 +1,31 @@
 <template>
-    <div class="page-container form-wrap">
-        <h2 class="page-title">Prihlásenie</h2>
+    <v-container fluid class="page-container form-wrap">
+        <v-card id="page-container-card">
+            <h2 class="page-title">Prihlásenie</h2>
 
-        <v-form v-model="isValid" @submit.prevent="onSubmit">
-            <v-text-field v-model="form.email" :rules="[rules.required, rules.email]" label="Email:" variant="outlined"
-                density="comfortable" />
+            <v-form v-model="isValid" @submit.prevent="onSubmit">
+                <v-text-field v-model="form.email" :rules="[rules.required, rules.email]" label="Email:"
+                    variant="outlined" density="comfortable" />
 
-            <v-text-field v-model="form.password" :rules="[rules.required]" :type="showPassword ? 'text' : 'password'"
-                label="Heslo:" variant="outlined" density="comfortable"
-                :append-inner-icon="showPassword ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
-                @click:append-inner="showPassword = !showPassword" />
+                <v-text-field v-model="form.password" :rules="[rules.required]"
+                    :type="showPassword ? 'text' : 'password'" label="Heslo:" variant="outlined" density="comfortable"
+                    :append-inner-icon="showPassword ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+                    @click:append-inner="showPassword = !showPassword" />
 
-            <div class="actions-row">
-                <v-spacer />
-                <v-btn type="button" variant="tonal" color="success" size="small" class="forgot-btn" dense
-                    to="/reset_psw">
-                    Zabudnuté heslo...
+                <div class="actions-row">
+                    <v-spacer />
+                    <v-btn type="button" variant="tonal" color="success" size="small" class="forgot-btn" dense
+                        to="/reset_psw">
+                        Zabudnuté heslo...
+                    </v-btn>
+                </div>
+
+                <v-btn type="submit" color="success" size="large" block :disabled="!isValid">
+                    Prihlásiť
                 </v-btn>
-            </div>
-
-            <v-btn type="submit" color="success" size="large" block :disabled="!isValid">
-                Prihlásiť
-            </v-btn>
-        </v-form>
-    </div>
+            </v-form>
+        </v-card>
+    </v-container fluid>
 </template>
 
 <script setup>
@@ -59,6 +61,10 @@ function onForgot() {
     padding-right: 24px;
 }
 
+#page-container-card {
+    padding: 10px;
+}
+
 .form-wrap {
     max-width: 640px;
 }