From fc0ce811c53e324d6fb8ec027a623cf3dd59cf66 Mon Sep 17 00:00:00 2001
From: br0kenpixel <23280129+br0kenpixel@users.noreply.github.com>
Date: Wed, 5 Nov 2025 09:10:42 +0100
Subject: [PATCH] refactor: put alerts into separate components

---
 frontend/app/components/ErrorAlert.vue        | 21 +++++++++++++++++++
 frontend/app/components/InfoAlert.vue         | 20 ++++++++++++++++++
 .../components/InternshipDocumentEditor.vue   | 16 ++++++--------
 .../components/InternshipDocumentViewer.vue   | 13 ++++++------
 frontend/app/components/InternshipEditor.vue  |  6 ++----
 .../app/components/InternshipStatusEditor.vue | 10 ++++-----
 .../InternshipStatusHistoryView.vue           |  6 ++----
 frontend/app/components/LoadingAlert.vue      |  5 +++++
 frontend/app/components/SuccessAlert.vue      | 20 ++++++++++++++++++
 frontend/app/components/WarningAlert.vue      | 21 +++++++++++++++++++
 .../app/pages/account/activation/[token].vue  | 11 ++++------
 .../app/pages/account/change-password.vue     |  8 ++-----
 .../dashboard/admin/companies/edit/[id].vue   |  8 ++-----
 .../pages/dashboard/admin/companies/index.vue |  7 ++-----
 .../dashboard/admin/internships/edit/[id].vue |  9 +++-----
 .../dashboard/admin/internships/index.vue     |  5 ++---
 .../dashboard/admin/students/edit/[id].vue    |  8 ++-----
 .../pages/dashboard/admin/students/index.vue  | 10 +++------
 .../company/internships/edit/[id].vue         | 15 ++++++-------
 .../dashboard/company/internships/index.vue   |  3 +--
 .../app/pages/dashboard/student/companies.vue |  3 +--
 .../app/pages/dashboard/student/index.vue     |  3 +--
 .../dashboard/student/internship/create.vue   |  6 ++----
 .../student/internship/edit/[id].vue          | 15 ++++++-------
 frontend/app/pages/login.vue                  |  6 ++----
 frontend/app/pages/register/company.vue       |  6 ++----
 frontend/app/pages/register/student.vue       |  6 ++----
 frontend/app/pages/reset_psw/index.vue        |  6 ++----
 frontend/app/pages/reset_psw/request_sent.vue |  3 +--
 29 files changed, 153 insertions(+), 123 deletions(-)
 create mode 100644 frontend/app/components/ErrorAlert.vue
 create mode 100644 frontend/app/components/InfoAlert.vue
 create mode 100644 frontend/app/components/LoadingAlert.vue
 create mode 100644 frontend/app/components/SuccessAlert.vue
 create mode 100644 frontend/app/components/WarningAlert.vue

diff --git a/frontend/app/components/ErrorAlert.vue b/frontend/app/components/ErrorAlert.vue
new file mode 100644
index 0000000..140fa48
--- /dev/null
+++ b/frontend/app/components/ErrorAlert.vue
@@ -0,0 +1,21 @@
+<template>
+    <div>
+        <v-alert density="compact" :text="error" :title="error || 'Chyba'" type="error" class="mb-2 mt-2"></v-alert>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    props: {
+        title: {
+            type: String,
+            required: false,
+            default: "Chyba"
+        },
+        error: {
+            type: String,
+            required: true,
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/frontend/app/components/InfoAlert.vue b/frontend/app/components/InfoAlert.vue
new file mode 100644
index 0000000..ae6ef21
--- /dev/null
+++ b/frontend/app/components/InfoAlert.vue
@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <v-alert density="compact" :text="text" :title="title" type="info" class="mb-2 mt-2"></v-alert>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    props: {
+        title: {
+            type: String,
+            required: true,
+        },
+        text: {
+            type: String,
+            required: true,
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/frontend/app/components/InternshipDocumentEditor.vue b/frontend/app/components/InternshipDocumentEditor.vue
index 903a9ce..6f383ed 100644
--- a/frontend/app/components/InternshipDocumentEditor.vue
+++ b/frontend/app/components/InternshipDocumentEditor.vue
@@ -80,26 +80,23 @@ async function onSubmit() {
 <template>
     <div>
         <!-- Čakajúca hláška -->
-        <v-alert v-if="loading" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
-            class="mx-auto mb-2"></v-alert>
+        <LoadingAlert v-if="loading" />
 
         <!-- Chybová hláška -->
-        <v-alert v-if="error" density="compact" :text="error" title="Chyba" type="error" class="mx-auto mb-2"></v-alert>
+        <ErrorAlert v-if="error" :error="error" />
 
         <v-form @submit.prevent="onSubmit" :disabled="loading">
             <div>
                 <h4 class="mb-2">Podpísaná zmluva / dohoda</h4>
 
-                <v-alert v-if="props.internship.agreement" class="mb-2" type="warning" variant="tonal"
-                    title="Existujúci dokument"
+                <WarningAlert v-if="props.internship.agreement" title="Existujúci dokument"
                     text="V systéme je už nahratá zmluva/dohoda. Ak chcete nahradiť existujúcu verziu, vyberte súbor, alebo v opačnom prípade nechajte toto pole nevyplnené.">
-
                     <br />
 
                     <v-btn prepend-icon="mdi-download" color="blue" class="mr-2 mt-2" @click="downloadAgreement">
                         Stiahnuť
                     </v-btn>
-                </v-alert>
+                </WarningAlert>
 
                 <v-file-input v-model="agreement" :rules="[rules.isPdf, rules.maxSize]" accept=".pdf,application/pdf"
                     prepend-icon="mdi-handshake" label="Nahrať PDF zmluvu" variant="outlined" show-size clearable
@@ -111,8 +108,7 @@ async function onSubmit() {
             <div>
                 <h4 class="mb-2">Výkaz</h4>
 
-                <v-alert v-if="props.internship.report" class="mb-2" type="warning" variant="tonal"
-                    title="Existujúci dokument"
+                <WarningAlert v-if="props.internship.agreement" title="Existujúci dokument"
                     text="V systéme je už nahratý výkaz. Ak chcete nahradiť existujúcu verziu, vyberte súbor, alebo v opačnom prípade nechajte toto pole nevyplnené.">
 
                     <br />
@@ -120,7 +116,7 @@ async function onSubmit() {
                     <v-btn prepend-icon="mdi-download" color="blue" class="mr-2 mt-2" @click="downloadReport">
                         Stiahnuť
                     </v-btn>
-                </v-alert>
+                </WarningAlert>
 
                 <v-file-input v-model="report" :rules="[rules.isPdf, rules.maxSize]" accept=".pdf,application/pdf"
                     prepend-icon="mdi-chart-box-outline" label="Nahrať PDF výkaz" variant="outlined" show-size clearable
diff --git a/frontend/app/components/InternshipDocumentViewer.vue b/frontend/app/components/InternshipDocumentViewer.vue
index a517b78..0c99e1a 100644
--- a/frontend/app/components/InternshipDocumentViewer.vue
+++ b/frontend/app/components/InternshipDocumentViewer.vue
@@ -39,11 +39,11 @@ async function downloadReport() {
                         Podpísaná zmluva / dohoda
                     </v-card-title>
                     <v-card-text>
-                        <v-alert v-if="!props.internship.agreement" type="warning" variant="tonal" title="Neodovzdané"
+                        <WarningAlert v-if="!props.internship.agreement" title="Neodovzdané"
                             text="Zmluva zatiaľ nebola nahratá." />
 
                         <div v-else>
-                            <v-alert type="success" variant="tonal" title="Odovzdané" text="Zmluva bola nahratá." />
+                            <SuccessAlert title="Odovzdané" text="Zmluva bola nahratá." />
 
                             <v-btn prepend-icon="mdi-download" color="blue" class="mr-2 mt-2" block
                                 @click="downloadAgreement">
@@ -62,15 +62,14 @@ async function downloadReport() {
                         Výkaz
                     </v-card-title>
                     <v-card-text>
-                        <v-alert v-if="!props.internship.report" type="info" variant="tonal" title="Neodovzdané"
+                        <InfoAlert v-if="!props.internship.report" title="Neodovzdané"
                             text="Výkaz zatiaľ nebol nahratý." />
 
                         <div v-else>
-                            <v-alert v-if="!props.internship.report_confirmed" type="error" variant="tonal"
-                                title="Nepotvrdené" text="Výkaz bol nahratý, ale zatiaľ nebol potvrdený firmou." />
+                            <ErrorAlert v-if="!props.internship.report_confirmed" title="Nepotvrdené"
+                                error="Výkaz bol nahratý, ale zatiaľ nebol potvrdený firmou." />
 
-                            <v-alert v-else type="success" variant="tonal" title="Potvrdené"
-                                text="Výkaz bol nahratý, aj potvrdený firmou." />
+                            <SuccessAlert v-else title="Potvrdené" text="Výkaz bol nahratý, aj potvrdený firmou." />
 
                             <v-btn prepend-icon="mdi-download" color="blue" class="mr-2 mt-2" block
                                 @click="downloadReport">
diff --git a/frontend/app/components/InternshipEditor.vue b/frontend/app/components/InternshipEditor.vue
index 2cdccbb..885ff71 100644
--- a/frontend/app/components/InternshipEditor.vue
+++ b/frontend/app/components/InternshipEditor.vue
@@ -113,12 +113,10 @@ const { data, error } = await useSanctumFetch<CompanyData[]>('/api/companies/sim
         <!-- Výber firmy -->
 
         <!-- Čakajúca hláška -->
-        <v-alert v-if="!data && !error" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
-            id="data-error-alert" class="mx-auto alert"></v-alert>
+        <LoadingAlert v-if="!data && !error" />
 
         <!-- Chybová hláška -->
-        <v-alert v-else-if="error" density="compact" :text="error.message" title="Chyba" type="error"
-            id="data-error-alert" class="mx-auto alert"></v-alert>
+        <ErrorAlert v-else-if="error" :error="error.message" />
 
         <v-select v-else v-model="form.company_id" clearable label="Firma" :items="data" :item-props="companyListProps"
             item-value="id" :rules="[rules.required]"></v-select>
diff --git a/frontend/app/components/InternshipStatusEditor.vue b/frontend/app/components/InternshipStatusEditor.vue
index 0716630..20d06e2 100644
--- a/frontend/app/components/InternshipStatusEditor.vue
+++ b/frontend/app/components/InternshipStatusEditor.vue
@@ -23,7 +23,7 @@ const loading = ref(false);
 const save_error = ref(null as null | string);
 
 const client = useSanctumClient();
-const { data, refresh } = await useSanctumFetch(`/api/internships/${props.internship.id}/next-statuses`, undefined, {
+const { data, error: load_error, refresh } = await useSanctumFetch(`/api/internships/${props.internship.id}/next-statuses`, undefined, {
     transform: (statuses: InternshipStatus[]) => statuses.map((state) => ({
         title: prettyInternshipStatus(state),
         value: state
@@ -62,14 +62,12 @@ async function submit() {
 <template>
     <div>
         <!-- Chybová hláška -->
-        <v-alert v-if="save_error !== null" density="compact" :text="`Nepodarilo uložiť: ${save_error}`" title="Chyba"
-            type="error" class="mx-auto alert"></v-alert>
+        <ErrorAlert v-if="save_error" :error="`Nepodarilo uložiť: ${save_error}`" />
 
         <!-- Chybová hláška -->
-        <v-alert v-if="save_error !== null" density="compact" :text="`Nepodarilo sa načítať stavy: ${save_error}`"
-            title="Chyba" type="error" class="mx-auto alert"></v-alert>
+        <ErrorAlert v-if="load_error" :error="`Nepodarilo sa načítať stavy: ${save_error}`" />
 
-        <v-form v-model="isValid" @submit.prevent="submit" :disabled="loading">
+        <v-form v-else v-model="isValid" @submit.prevent="submit" :disabled="loading">
             <v-select v-model="new_state" label="Stav" :items="data" item-value="value"></v-select>
             <v-text-field v-model="note" :rules="[rules.required]" label="Poznámka"></v-text-field>
 
diff --git a/frontend/app/components/InternshipStatusHistoryView.vue b/frontend/app/components/InternshipStatusHistoryView.vue
index 47f09e7..e8b7156 100644
--- a/frontend/app/components/InternshipStatusHistoryView.vue
+++ b/frontend/app/components/InternshipStatusHistoryView.vue
@@ -23,12 +23,10 @@ watch(() => props.internship, () => {
 <template>
     <div>
         <!-- Čakajúca hláška -->
-        <v-alert v-if="pending" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
-            class="mx-auto alert"></v-alert>
+        <LoadingAlert v-if="pending" />
 
         <!-- Chybová hláška -->
-        <v-alert v-if="error" density="compact" :text="error?.message" title="Chyba" type="error"
-            class="mx-auto alert"></v-alert>
+        <ErrorAlert v-if="error" :error="error?.message" />
 
         <v-table v-else>
             <thead>
diff --git a/frontend/app/components/LoadingAlert.vue b/frontend/app/components/LoadingAlert.vue
new file mode 100644
index 0000000..bd70a36
--- /dev/null
+++ b/frontend/app/components/LoadingAlert.vue
@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <v-alert density="compact" text="Prosím čakajte..." title="Spracovávam" type="info" class="mb-2 mt-2"></v-alert>
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/app/components/SuccessAlert.vue b/frontend/app/components/SuccessAlert.vue
new file mode 100644
index 0000000..4415e19
--- /dev/null
+++ b/frontend/app/components/SuccessAlert.vue
@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <v-alert density="compact" :text="text" :title="title" type="success" class="mb-2 mt-2"></v-alert>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    props: {
+        title: {
+            type: String,
+            required: true,
+        },
+        text: {
+            type: String,
+            required: true,
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/frontend/app/components/WarningAlert.vue b/frontend/app/components/WarningAlert.vue
new file mode 100644
index 0000000..66cb579
--- /dev/null
+++ b/frontend/app/components/WarningAlert.vue
@@ -0,0 +1,21 @@
+<template>
+    <div>
+        <v-alert density="compact" :text="text" :title="title" type="warning" class="mb-2 mt-2"></v-alert>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    props: {
+        title: {
+            type: String,
+            required: false,
+            default: "Upozornenie"
+        },
+        text: {
+            type: String,
+            required: true,
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/frontend/app/pages/account/activation/[token].vue b/frontend/app/pages/account/activation/[token].vue
index b7e09c5..925d1a0 100644
--- a/frontend/app/pages/account/activation/[token].vue
+++ b/frontend/app/pages/account/activation/[token].vue
@@ -57,20 +57,17 @@ async function handleLogin() {
         <v-card id="page-container-card">
             <h2 class="page-title">Aktivácia účtu</h2>
 
-            <!-- Chybová hláška -->
-            <v-alert v-show="success" density="compact" title="Aktivácia ukončená" type="success" class="mx-auto alert">
+            <SuccessAlert v-show="success" title="Aktivácia ukončená">
                 <p>Váš účet bol úspešne aktivovaný! Prihláste sa <NuxtLink to="/login">tu</NuxtLink>.
                 </p>
-            </v-alert>
+            </SuccessAlert>
 
             <div v-show="!success">
                 <!-- Chybová hláška -->
-                <v-alert v-if="error !== null" density="compact" :text="error" title="Chyba" type="error"
-                    class="mx-auto alert"></v-alert>
+                <ErrorAlert v-if="error" :error="error" />
 
                 <!-- Čakajúca hláška -->
-                <v-alert v-if="loading" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
-                    class="mx-auto alert"></v-alert>
+                <LoadingAlert v-if="loading" />
 
                 <v-form v-else v-model="isValid" @submit.prevent="handleLogin">
                     <v-text-field v-model="password" :rules="[rules.required]"
diff --git a/frontend/app/pages/account/change-password.vue b/frontend/app/pages/account/change-password.vue
index b5a6c79..7037cb5 100644
--- a/frontend/app/pages/account/change-password.vue
+++ b/frontend/app/pages/account/change-password.vue
@@ -55,14 +55,10 @@ const changePassword = async () => {
             <h1>Zmena hesla</h1>
 
             <!-- Error alert -->
-            <v-alert v-if="error" type="error" density="compact" class="mb-3">
-                {{ error }}
-            </v-alert>
+            <ErrorAlert v-if="error" :error="error" />
 
             <!-- Success alert -->
-            <v-alert v-else-if="success" type="success" density="compact" class="mb-3">
-                Heslo bolo úspešne zmenené.
-            </v-alert>
+            <SuccessAlert v-else-if="success" text=" Heslo bolo úspešne zmenené." />
 
             <v-form v-else :disabled="loading" @submit.prevent="changePassword">
                 <!-- Nové heslo -->
diff --git a/frontend/app/pages/dashboard/admin/companies/edit/[id].vue b/frontend/app/pages/dashboard/admin/companies/edit/[id].vue
index 5885350..b4b8f2c 100644
--- a/frontend/app/pages/dashboard/admin/companies/edit/[id].vue
+++ b/frontend/app/pages/dashboard/admin/companies/edit/[id].vue
@@ -202,14 +202,10 @@ const deleteCompany = async () => {
                     </p>
 
                     <!-- Error message -->
-                    <v-alert v-if="deleteError" type="error" density="compact" class="mt-3">
-                        {{ deleteError }}
-                    </v-alert>
+                    <ErrorAlert v-if="deleteError" :error="deleteError" />
 
                     <!-- Success message -->
-                    <v-alert v-if="deleteSuccess" type="success" density="compact" class="mt-3">
-                        Firma bola úspešne vymazaná. Presmerovanie...
-                    </v-alert>
+                    <SuccessAlert v-if="deleteSuccess" text="Firma bola úspešne vymazaná" />
                 </v-card-text>
                 <v-card-actions>
                     <v-spacer></v-spacer>
diff --git a/frontend/app/pages/dashboard/admin/companies/index.vue b/frontend/app/pages/dashboard/admin/companies/index.vue
index 13c3dc8..1740929 100644
--- a/frontend/app/pages/dashboard/admin/companies/index.vue
+++ b/frontend/app/pages/dashboard/admin/companies/index.vue
@@ -83,8 +83,7 @@ const deleteCompany = async () => {
             <div style="height: 40px;"></div>
 
             <!-- Chybová hláška -->
-            <v-alert v-if="error" density="compact" :text="error?.message" title="Chyba" type="error"
-                id="login-error-alert" class="mx-auto alert"></v-alert>
+            <ErrorAlert v-if="error" :error="error?.message" />
 
             <div v-else>
                 <p>Aktuálne spolupracujeme s {{ data?.length }} firmami.</p>
@@ -135,9 +134,7 @@ const deleteCompany = async () => {
                     </p>
 
                     <!-- Error message -->
-                    <v-alert v-if="deleteError" type="error" density="compact" class="mt-3">
-                        {{ deleteError }}
-                    </v-alert>
+                    <ErrorAlert v-if="deleteError" :error="error" />
                 </v-card-text>
                 <v-card-actions>
                     <v-spacer></v-spacer>
diff --git a/frontend/app/pages/dashboard/admin/internships/edit/[id].vue b/frontend/app/pages/dashboard/admin/internships/edit/[id].vue
index df93096..6b9c4cc 100644
--- a/frontend/app/pages/dashboard/admin/internships/edit/[id].vue
+++ b/frontend/app/pages/dashboard/admin/internships/edit/[id].vue
@@ -53,17 +53,14 @@ const { data, error, refresh } = await useSanctumFetch<Internship>(`/api/interns
             <div style="height: 40px;"></div>
 
             <!-- Čakajúca hláška -->
-            <v-alert v-if="loading" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
-                class="mx-auto alert"></v-alert>
+            <LoadingAlert v-if="loading" />
 
             <!-- Chybová hláška -->
-            <v-alert v-if="action_error !== null" density="compact" :text="action_error" title="Chyba" type="error"
-                class="mx-auto alert"></v-alert>
+            <ErrorAlert v-if="action_error" :error="action_error" />
 
             <div v-else>
                 <!-- Chybová hláška -->
-                <v-alert v-if="error" density="compact" :text="error?.message" title="Chyba" type="error"
-                    class="mx-auto alert"></v-alert>
+                <ErrorAlert v-if="error" :error="error?.message" />
 
                 <div v-else>
                     <div>
diff --git a/frontend/app/pages/dashboard/admin/internships/index.vue b/frontend/app/pages/dashboard/admin/internships/index.vue
index 99912c3..eba92a8 100644
--- a/frontend/app/pages/dashboard/admin/internships/index.vue
+++ b/frontend/app/pages/dashboard/admin/internships/index.vue
@@ -36,9 +36,8 @@ const { data, error } = await useSanctumFetch<Internship[]>('/api/internships');
             <div style="height: 40px;"></div>
 
             <!-- Chybová hláška -->
-            <v-alert v-if="error" density="compact" :text="error?.message" title="Chyba" type="error"
-                id="login-error-alert" class="mx-auto alert"></v-alert>
-            
+            <ErrorAlert v-if="error" :error="error?.message" />
+
             <v-table v-else>
                 <thead>
                     <tr>
diff --git a/frontend/app/pages/dashboard/admin/students/edit/[id].vue b/frontend/app/pages/dashboard/admin/students/edit/[id].vue
index a78d4fb..3214a4f 100644
--- a/frontend/app/pages/dashboard/admin/students/edit/[id].vue
+++ b/frontend/app/pages/dashboard/admin/students/edit/[id].vue
@@ -199,14 +199,10 @@ const deleteStudent = async () => {
                     </p>
 
                     <!-- Error message -->
-                    <v-alert v-if="deleteError" type="error" density="compact" class="mt-3">
-                        {{ deleteError }}
-                    </v-alert>
+                    <ErrorAlert v-if="deleteError" :error="deleteError" />
 
                     <!-- Success message -->
-                    <v-alert v-if="deleteSuccess" type="success" density="compact" class="mt-3">
-                        Študent bol úspešne vymazaný. Presmerovanie...
-                    </v-alert>
+                    <SuccessAlert v-if="deleteSuccess" text="Študent bol úspešne vymazaný." />
                 </v-card-text>
                 <v-card-actions>
                     <v-spacer></v-spacer>
diff --git a/frontend/app/pages/dashboard/admin/students/index.vue b/frontend/app/pages/dashboard/admin/students/index.vue
index 9f706e7..f5fb329 100644
--- a/frontend/app/pages/dashboard/admin/students/index.vue
+++ b/frontend/app/pages/dashboard/admin/students/index.vue
@@ -83,8 +83,7 @@ const deleteStudent = async () => {
             <div style="height: 40px;"></div>
 
             <!-- Chybová hláška -->
-            <v-alert v-if="error" density="compact" :text="error?.message" title="Chyba" type="error"
-                id="login-error-alert" class="mx-auto alert"></v-alert>
+            <ErrorAlert v-if="error" :error="error?.message" />
 
             <div v-else>
                 <p>Aktuálne evidujeme {{ students?.length || 0 }} študentov.</p>
@@ -117,8 +116,7 @@ const deleteStudent = async () => {
                     </tbody>
                 </v-table>
 
-                <v-alert v-else density="compact" text="Zatiaľ nie sú zaregistrovaní žiadni študenti." type="info"
-                    class="mt-4"></v-alert>
+                <InfoAlert v-else text="Zatiaľ nie sú zaregistrovaní žiadni študenti." />
             </div>
         </v-card>
 
@@ -138,9 +136,7 @@ const deleteStudent = async () => {
                     </p>
 
                     <!-- Error message -->
-                    <v-alert v-if="deleteError" type="error" density="compact" class="mt-3">
-                        {{ deleteError }}
-                    </v-alert>
+                    <ErrorAlert v-if="deleteError" :error="deleteError" />
                 </v-card-text>
                 <v-card-actions>
                     <v-spacer></v-spacer>
diff --git a/frontend/app/pages/dashboard/company/internships/edit/[id].vue b/frontend/app/pages/dashboard/company/internships/edit/[id].vue
index 74cac5d..89337f6 100644
--- a/frontend/app/pages/dashboard/company/internships/edit/[id].vue
+++ b/frontend/app/pages/dashboard/company/internships/edit/[id].vue
@@ -53,18 +53,15 @@ async function handleUpdateOfBasicInfo(internship: NewInternship) {
             <div style="height: 40px;"></div>
 
             <!-- Čakajúca hláška -->
-            <v-alert v-if="loading" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
-                class="mx-auto alert"></v-alert>
+            <LoadingAlert />
 
             <!-- Chybová hláška -->
-            <v-alert v-if="action_error !== null" density="compact" :text="action_error" title="Chyba" type="error"
-                class="mx-auto alert"></v-alert>
+            <ErrorAlert v-if="action_error" :error="action_error" />
 
             <div>
                 <h2>Základné informácie</h2>
-                <v-alert v-if="data?.status.status !== InternshipStatus.SUBMITTED" density="compact"
-                    text='Vaša prax nie je v stave "Zadaná" a teda nemôžete meniť údaje.' title="Blokované" type="error"
-                    class="mx-auto alert"></v-alert>
+                <ErrorAlert v-if="data?.status.status !== InternshipStatus.SUBMITTED" title="Blokované"
+                    error='Vaša prax nie je v stave "Zadaná" a teda nemôžete meniť údaje' />
                 <InternshipEditor v-else :internship="data!" :submit="handleUpdateOfBasicInfo" />
             </div>
 
@@ -93,8 +90,8 @@ async function handleUpdateOfBasicInfo(internship: NewInternship) {
             <div>
                 <h2>Nahratie dokumentov</h2>
 
-                <v-alert v-if="data?.status.status !== InternshipStatus.CONFIRMED" type="error" variant="tonal"
-                    title="Blokované" text='Vaša prax nie je v stave "Schválená" a teda nemôžete nahrať dokumenty.' />
+                <ErrorAlert v-if="data?.status.status !== InternshipStatus.CONFIRMED" title="Blokované"
+                    error='Vaša prax nie je v stave "Schválená" a teda nemôžete nahrať dokumenty.' />
 
                 <InternshipDocumentEditor v-else :internship="data!" @successful-submit="refresh" />
             </div>
diff --git a/frontend/app/pages/dashboard/company/internships/index.vue b/frontend/app/pages/dashboard/company/internships/index.vue
index 7ff86fd..4379328 100644
--- a/frontend/app/pages/dashboard/company/internships/index.vue
+++ b/frontend/app/pages/dashboard/company/internships/index.vue
@@ -35,8 +35,7 @@ const { data, error } = await useSanctumFetch<Internship[]>('/api/internships/my
             <div style="height: 40px;"></div>
 
             <!-- Chybová hláška -->
-            <v-alert v-if="error" density="compact" :text="error?.message" title="Chyba" type="error"
-                id="login-error-alert" class="mx-auto alert"></v-alert>
+            <ErrorAlert v-if="error" :error="error?.message" />
 
             <v-table v-else>
                 <thead>
diff --git a/frontend/app/pages/dashboard/student/companies.vue b/frontend/app/pages/dashboard/student/companies.vue
index 3ff5777..e41ff15 100644
--- a/frontend/app/pages/dashboard/student/companies.vue
+++ b/frontend/app/pages/dashboard/student/companies.vue
@@ -34,8 +34,7 @@ const { data, error } = await useSanctumFetch<CompanyData[]>('/api/companies/sim
             <div style="height: 40px;"></div>
 
             <!-- Chybová hláška -->
-            <v-alert v-if="error" density="compact" :text="error?.message" title="Chyba" type="error"
-                id="login-error-alert" class="mx-auto alert"></v-alert>
+            <ErrorAlert v-if="error" :error="error?.message" />
 
             <div v-else>
                 <p>Aktuálne spolupracujeme s {{ data?.length }} firmami.</p>
diff --git a/frontend/app/pages/dashboard/student/index.vue b/frontend/app/pages/dashboard/student/index.vue
index b4f36f9..adeb061 100644
--- a/frontend/app/pages/dashboard/student/index.vue
+++ b/frontend/app/pages/dashboard/student/index.vue
@@ -54,8 +54,7 @@ const { data, error } = await useSanctumFetch<Internship[]>('/api/internships/my
             <h3>Moje praxe</h3>
 
             <!-- Chybová hláška -->
-            <v-alert v-if="error" density="compact" :text="error?.message" title="Chyba" type="error"
-                id="login-error-alert" class="mx-auto alert"></v-alert>
+            <ErrorAlert v-if="error" :error="error?.message" />
 
             <v-table v-else>
                 <thead>
diff --git a/frontend/app/pages/dashboard/student/internship/create.vue b/frontend/app/pages/dashboard/student/internship/create.vue
index c58f787..a0fccf8 100644
--- a/frontend/app/pages/dashboard/student/internship/create.vue
+++ b/frontend/app/pages/dashboard/student/internship/create.vue
@@ -41,12 +41,10 @@ async function handleInternshipRegistration(internship: NewInternship) {
             <br />
 
             <!-- Čakajúca hláška -->
-            <v-alert v-show="loading" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
-                id="data-error-alert" class="mx-auto alert"></v-alert>
+            <LoadingAlert />
 
             <!-- Chybová hláška -->
-            <v-alert v-if="error" density="compact" :text="error" title="Chyba" type="error" id="data-error-alert"
-                class="mx-auto alert"></v-alert>
+            <ErrorAlert v-if="error" :error="error" />
 
             <InternshipEditor v-show="!loading" :submit="handleInternshipRegistration" />
         </v-card>
diff --git a/frontend/app/pages/dashboard/student/internship/edit/[id].vue b/frontend/app/pages/dashboard/student/internship/edit/[id].vue
index f330165..28019a6 100644
--- a/frontend/app/pages/dashboard/student/internship/edit/[id].vue
+++ b/frontend/app/pages/dashboard/student/internship/edit/[id].vue
@@ -52,18 +52,15 @@ async function handleUpdateOfBasicInfo(internship: NewInternship) {
             <div style="height: 40px;"></div>
 
             <!-- Čakajúca hláška -->
-            <v-alert v-if="loading" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
-                class="mx-auto alert"></v-alert>
+            <LoadingAlert />
 
             <!-- Chybová hláška -->
-            <v-alert v-if="action_error !== null" density="compact" :text="action_error" title="Chyba" type="error"
-                class="mx-auto alert"></v-alert>
+            <ErrorAlert v-if="action_error" :error="action_error" />
 
             <div>
                 <h2>Základné informácie</h2>
-                <v-alert v-if="data?.status.status !== InternshipStatus.SUBMITTED" density="compact"
-                    text='Vaša prax nie je v stave "Zadaná" a teda nemôžete meniť údaje.' title="Blokované" type="error"
-                    class="mx-auto alert"></v-alert>
+                <ErrorAlert v-if="data?.status.status !== InternshipStatus.SUBMITTED"
+                    error='Vaša prax nie je v stave "Zadaná" a teda nemôžete meniť údaje.' />
                 <InternshipEditor v-else :internship="data!" :submit="handleUpdateOfBasicInfo" />
             </div>
 
@@ -87,8 +84,8 @@ async function handleUpdateOfBasicInfo(internship: NewInternship) {
             <div>
                 <h2>Nahratie dokumentov</h2>
 
-                <v-alert v-if="data?.status.status !== InternshipStatus.CONFIRMED" type="error" variant="tonal"
-                    title="Blokované" text='Vaša prax nie je v stave "Schválená" a teda nemôžete nahrať dokumenty.' />
+                <ErrorAlert v-if="data?.status.status !== InternshipStatus.CONFIRMED"
+                    text='Vaša prax nie je v stave "Schválená" a teda nemôžete nahrať dokumenty.' />
 
                 <InternshipDocumentEditor v-else :internship="data!" @successful-submit="refresh" />
             </div>
diff --git a/frontend/app/pages/login.vue b/frontend/app/pages/login.vue
index 571a48c..d079505 100644
--- a/frontend/app/pages/login.vue
+++ b/frontend/app/pages/login.vue
@@ -50,12 +50,10 @@ async function handleLogin() {
             <h2 class="page-title">Prihlásenie</h2>
 
             <!-- Chybová hláška -->
-            <v-alert v-if="error !== null" density="compact" :text="error" title="Chyba" type="error"
-                id="login-error-alert" class="mx-auto alert"></v-alert>
+            <ErrorAlert v-if="error" :error="error" />
 
             <!-- Č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 alert"></v-alert>
+            <LoadingAlert v-if="loading" />
 
             <v-form v-else v-model="isValid" @submit.prevent="handleLogin">
                 <v-text-field v-model="form.email" :rules="[rules.required, rules.email]" label="Email:"
diff --git a/frontend/app/pages/register/company.vue b/frontend/app/pages/register/company.vue
index b922075..8137aad 100644
--- a/frontend/app/pages/register/company.vue
+++ b/frontend/app/pages/register/company.vue
@@ -77,12 +77,10 @@ async function handleRegistration() {
             <h4 class="page-title">Registrácia firmy</h4>
 
             <!-- 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>
+            <ErrorAlert v-if=error :error="error" />
 
             <!-- Č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>
+            <LoadingAlert v-if="loading" />
 
             <v-form v-else v-model="isValid" @submit.prevent="handleRegistration">
                 <v-text-field v-model="form.name" :rules="[rules.required]" label="Názov firmy:" variant="outlined"
diff --git a/frontend/app/pages/register/student.vue b/frontend/app/pages/register/student.vue
index 3c50f94..9b47696 100644
--- a/frontend/app/pages/register/student.vue
+++ b/frontend/app/pages/register/student.vue
@@ -85,12 +85,10 @@ async function handleRegistration() {
             <h4 class="page-title">Registrácia študenta</h4>
 
             <!-- Chybová hláška -->
-            <v-alert v-if="error !== null" density="compact" :text="error" title="Chyba" type="error"
-                id="login-error-alert" class="mx-auto alert"></v-alert>
+            <ErrorAlert v-if="error" :error="error" />
 
             <!-- Č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 alert"></v-alert>
+            <LoadingAlert v-if="loading" />
 
             <v-form v-else v-model="isValid" @submit.prevent="handleRegistration">
                 <v-text-field v-model="form.firstName" :rules="[rules.required]" label="Meno:" variant="outlined"
diff --git a/frontend/app/pages/reset_psw/index.vue b/frontend/app/pages/reset_psw/index.vue
index b8f5029..644736e 100644
--- a/frontend/app/pages/reset_psw/index.vue
+++ b/frontend/app/pages/reset_psw/index.vue
@@ -50,12 +50,10 @@ async function handleReset() {
             <h2 class="page-title">Reset hesla</h2>
 
             <!-- Chybová hláška -->
-            <v-alert v-if="error !== null" density="compact" :text="error" title="Chyba" type="error"
-                id="login-error-alert" class="alert mx-auto"></v-alert>
+            <ErrorAlert v-if="error" :error="error" />
 
             <!-- Č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="alert mx-auto"></v-alert>
+            <LoadingAlert v-if="loading" />
 
             <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"
diff --git a/frontend/app/pages/reset_psw/request_sent.vue b/frontend/app/pages/reset_psw/request_sent.vue
index 794c98e..9517848 100644
--- a/frontend/app/pages/reset_psw/request_sent.vue
+++ b/frontend/app/pages/reset_psw/request_sent.vue
@@ -16,8 +16,7 @@ useSeoMeta({
         <v-card id="page-container-card">
             <h2 class="page-title">Reset hesla</h2>
 
-            <v-alert density="compact" text="Nové heslo vám bolo zaslané na e-mail" title="Reset hesla" type="info"
-                class="mx-auto"></v-alert>
+            <InfoAlert title="Reset hesla" text="Nové heslo vám bolo zaslané na e-mail" />
         </v-card>
     </v-container>
 </template>