refactor: implement loading and error alerts in password reset form

frontend/app/pages/reset_psw.vue

@@ -1,9 +1,55 @@
+<script setup lang="ts">
+import { FetchError } from 'ofetch';
+
+useSeoMeta({
+    title: "Reset hesla | ISOP",
+    ogTitle: "Reset hesla",
+    description: "Reset hesla ISOP",
+    ogDescription: "Reset hesla",
+});
+
+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 email = ref('');
+const snackbar = ref(false);
+
+const loading = ref(false);
+const error = ref(null as null | string);
+
+async function handleReset() {
+    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">Reset hesla</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-else v-model="isValid" @submit.prevent="handleReset">
                 <v-text-field v-model="email" :rules="[rules.required, rules.email]" label="Email:" variant="outlined"
                     density="comfortable" />
 
@@ -19,23 +65,6 @@
     </v-container>
 </template>
 
-<script setup>
-import { ref } from 'vue'
-
-const isValid = ref(false)
-const email = ref('')
-const snackbar = ref(false)
-
-const rules = {
-    required: v => (!!v && String(v).trim().length > 0) || 'Povinné pole',
-    email: v => /.+@.+\..+/.test(v) || 'Zadajte platný email',
-}
-
-function onSubmit() {
-    snackbar.value = true
-}
-</script>
-
 <style scoped>
 .page-container {
     max-width: 1120px;