refactor: enhance login, company, and student registration forms with error and loading alerts

frontend/app/pages/login.vue

@@ -1,9 +1,51 @@
+<script setup lang="ts">
+import { FetchError } from 'ofetch';
+
+const rules = {
+    required: (v: string) => (!!v && v.trim().length > 0) || 'Povinné pole',
+    email: (v: string) => /.+@.+\..+/.test(v) || 'Zadajte platný email',
+};
+
+const isValid = ref(false);
+const showPassword = ref(false);
+const form = reactive({
+    email: '',
+    password: '',
+});
+
+const loading = ref(false);
+const error = ref(null as null | string);
+
+async function handleLogin() {
+    error.value = null;
+    loading.value = true;
+
+    try {
+        // TODO: implement
+    } catch (e) {
+        if (e instanceof FetchError && e.response?.status === 422) {
+            error.value = e.response?._data.message;
+        }
+    } finally {
+        loading.value = false;
+    }
+}
+</script>
+
 <template>
     <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">
+            <!-- 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>
+
+            <!-- Č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>
+
+            <v-form v-model="isValid" @submit.prevent="handleLogin">
                 <v-text-field v-model="form.email" :rules="[rules.required, rules.email]" label="Email:"
                     variant="outlined" density="comfortable" />
 
@@ -12,7 +54,7 @@
                     :append-inner-icon="showPassword ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
                     @click:append-inner="showPassword = !showPassword" />
 
-                <div class="actions-row">
+                <div class="actions-row" to="/reset_psw">
                     <v-spacer />
                     <v-btn type="button" variant="tonal" color="success" size="small" class="forgot-btn" dense
                         to="/reset_psw">
@@ -28,31 +70,6 @@
     </v-container>
 </template>
 
-<script setup>
-import { reactive, ref } from 'vue'
-
-const isValid = ref(false)
-const showPassword = ref(false)
-
-const form = reactive({
-    email: '',
-    password: '',
-})
-
-const rules = {
-    required: v => (!!v && String(v).trim().length > 0) || 'Povinné pole',
-    email: v => /.+@.+\..+/.test(v) || 'Zadajte platný email',
-}
-
-function onSubmit() {
-
-}
-
-function onForgot() {
-
-}
-</script>
-
 <style scoped>
 .page-container {
     max-width: 1120px;

frontend/app/pages/register/company.vue

@@ -1,9 +1,56 @@
+<script setup lang="ts">
+import { FetchError } from 'ofetch';
+
+const rules = {
+    required: (v: string) => (!!v && v.trim().length > 0) || 'Povinné pole',
+    email: (v: string) => /.+@.+\..+/.test(v) || 'Zadajte platný email',
+    phone: (v: string) => (!v || /^[0-9 +()-]{6,}$/.test(v)) || 'Zadajte platné telefónne číslo',
+    mustAgree: (v: boolean) => v === true || 'Je potrebné súhlasiť',
+};
+
+const isValid = ref(false);
+const form = reactive({
+    companyName: '',
+    companyAddress: '',
+    contactName: '',
+    contactEmail: '',
+    contactPhone: '',
+    consent: false,
+});
+
+const loading = ref(false);
+const error = ref(null as null | string);
+
+async function handleRegistration() {
+    error.value = null;
+    loading.value = true;
+
+    try {
+        // TODO: implement
+    } catch (e) {
+        if (e instanceof FetchError && e.response?.status === 422) {
+            error.value = e.response?._data.message;
+        }
+    } finally {
+        loading.value = false;
+    }
+}
+</script>
+
 <template>
     <v-container fluid class="page-container form-wrap">
         <v-card id="page-container-card">
             <h4 class="page-title">Registrácia firmy</h4>
 
-            <v-form v-model="isValid" @submit.prevent="onSubmit">
+            <!-- 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>
+
+            <!-- Č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>
+
+            <v-form v-else v-model="isValid" @submit.prevent="handleRegistration">
                 <v-text-field v-model="form.companyName" :rules="[rules.required]" label="Názov firmy:"
                     variant="outlined" density="comfortable" />
                 <v-text-field v-model="form.companyAddress" :rules="[rules.required]" label="Adresa:" variant="outlined"
@@ -29,32 +76,6 @@
     </v-container>
 </template>
 
-<script setup>
-import { reactive, ref } from 'vue'
-
-const isValid = ref(false)
-
-const form = reactive({
-    companyName: '',
-    companyAddress: '',
-    contactName: '',
-    contactEmail: '',
-    contactPhone: '',
-    consent: false,
-})
-
-const rules = {
-    required: v => (!!v && String(v).trim().length > 0) || 'Povinné pole',
-    email: v => /.+@.+\..+/.test(v) || 'Zadajte platný email',
-    phone: v => (!v || /^[0-9 +()-]{6,}$/.test(v)) || 'Zadajte platné telefónne číslo',
-    mustAgree: v => v === true || 'Je potrebné súhlasiť',
-}
-
-function onSubmit() {
-
-}
-</script>
-
 <style scoped>
 .page-container {
     max-width: 1120px;

frontend/app/pages/register/student.vue

@@ -1,8 +1,66 @@
+<script setup lang="ts">
+import { FetchError } from 'ofetch';
+
+const rules = {
+    required: (v: string) => (!!v && v.trim().length > 0) || 'Povinné pole',
+    email: (v: string) =>
+        /.+@.+\..+/.test(v) || 'Zadajte platný email',
+    optionalEmail: (v: string) =>
+        (!v || /.+@.+\..+/.test(v)) || 'Zadajte platný email',
+    phone: (v: string) =>
+        (!v || /^[0-9 +()-]{6,}$/.test(v)) || 'Zadajte platné telefónne číslo',
+    mustAgree: (v: boolean) => v === true || 'Je potrebné súhlasiť',
+};
+const programs = [
+    'Aplikovaná informatika',
+];
+
+const isValid = ref(false);
+const form = reactive({
+    title: '',
+    firstName: '',
+    lastName: '',
+    address: '',
+    studentEmail: '',
+    altEmail: '',
+    phone: '',
+    studyProgram: null,
+    consent: false,
+});
+
+const loading = ref(false);
+const error = ref(null as null | string);
+
+async function handleRegistration() {
+    error.value = null;
+    loading.value = true;
+
+    try {
+        // TODO: implement
+    } catch (e) {
+        if (e instanceof FetchError && e.response?.status === 422) {
+            error.value = e.response?._data.message;
+        }
+    } finally {
+        loading.value = false;
+    }
+}
+</script>
+
 <template>
     <v-container fluid class="page-container form-wrap">
         <v-card id="page-container-card">
             <h4 class="page-title">Registrácia študenta</h4>
-            <v-form v-model="isValid" @submit.prevent="onSubmit">
+
+            <!-- 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>
+
+            <!-- Č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>
+
+            <v-form v-model="isValid" @submit.prevent="handleRegistration">
                 <v-text-field v-model="form.title" label="Tituly pred:" variant="outlined" density="comfortable" />
 
                 <v-text-field v-model="form.firstName" :rules="[rules.required]" label="Meno:" variant="outlined"
@@ -36,43 +94,6 @@
     </v-container>
 </template>
 
-<script setup>
-import { reactive, ref } from 'vue'
-
-const isValid = ref(false)
-
-const form = reactive({
-    title: '',
-    firstName: '',
-    lastName: '',
-    address: '',
-    studentEmail: '',
-    altEmail: '',
-    phone: '',
-    studyProgram: null,
-    consent: false,
-})
-
-const programs = [
-    'Aplikovaná informatika',
-]
-
-const rules = {
-    required: v => (!!v && String(v).trim().length > 0) || 'Povinné pole',
-    email: v =>
-        /.+@.+\..+/.test(v) || 'Zadajte platný email',
-    optionalEmail: v =>
-        (!v || /.+@.+\..+/.test(v)) || 'Zadajte platný email',
-    phone: v =>
-        (!v || /^[0-9 +()-]{6,}$/.test(v)) || 'Zadajte platné telefónne číslo',
-    mustAgree: v => v === true || 'Je potrebné súhlasiť',
-}
-
-function onSubmit() {
-
-}
-</script>
-
 <style scoped>
 .page-container {
     max-width: 1120px;