Show error notifications when API calls return an error

components/authentication/AuthenticationForm.vue

@@ -56,7 +56,6 @@ type Form = {
   confirm_password: string
 }
 
-const config = useRuntimeConfig();
 const rest = useRestApi();
 const authModalOpen = useAuthenticationModal();
 const settings = useSettings();
@@ -120,8 +119,8 @@ function login () {
       notify({
         group: "error",
         title: "Error",
-        text: err.message
-      }, 4000); // 4s
+        text: `Login failed. ${err.message}.`
+      }, 10000);
     });
 }
 
@@ -143,8 +142,8 @@ function signup () {
       notify({
         group: "error",
         title: "Error",
-        text: err.message
-      }, 4000); // 4s
+        text: `Registration failed. ${err.message}.`
+      }, 10000);
     });
 }
 </script>

components/torrent/TorrentActionCard.vue

@@ -150,6 +150,7 @@
 import { LinkIcon, CalendarIcon, CircleStackIcon, UserCircleIcon, HashtagIcon, TagIcon } from "@heroicons/vue/24/solid";
 import { PropType } from "vue";
 import { TorrentResponse } from "torrust-index-types-lib";
+import { notify } from "notiwind-ts";
 import {
   fileSize,
   downloadTorrent,
@@ -199,6 +200,13 @@ function deleteTorrent () {
   rest.value.torrent.deleteTorrent(props.torrent.info_hash)
     .then(() => {
       emit("deleted");
+    })
+    .catch((err) => {
+      notify({
+        group: "error",
+        title: "Error",
+        text: `Trying to delete the torrent. ${err.message}.`
+      }, 10000);
     });
 }
 </script>

components/torrent/TorrentListTorrentDetails.vue

@@ -17,10 +17,9 @@
 <script setup lang="ts">
 import { Ref } from "vue";
 import { TorrentResponse } from "torrust-index-types-lib";
-import { useRuntimeConfig } from "#app";
+import { notify } from "notiwind-ts";
 import { onMounted, ref, useRestApi } from "#imports";
 
-const config = useRuntimeConfig();
 const rest = useRestApi();
 
 const torrent: Ref<TorrentResponse> = ref(null);
@@ -36,6 +35,13 @@ onMounted(() => {
   rest.value.torrent.getTorrentInfo(props.infoHash)
     .then((data) => {
       torrent.value = data;
+    })
+    .catch((err) => {
+      notify({
+        group: "error",
+        title: "Error",
+        text: `Trying to get the torrent information. ${err.message}.`
+      }, 10000);
     });
 });
 </script>

composables/states.ts

@@ -1,6 +1,7 @@
 import { PublicSettings, Category, TokenResponse, TorrentTag } from "torrust-index-types-lib";
 import { Rest } from "torrust-index-api-lib";
 import { useRuntimeConfig, useState } from "#app";
+import { notify } from "notiwind-ts";
 
 export const useRestApi = () => useState<Rest>("rest-api", () => new Rest(useRuntimeConfig().public.apiBase));
 export const useCategories = () => useState<Array<Category>>("categories", () => new Array<Category>());
@@ -13,20 +14,41 @@ export function getSettings () {
   useRestApi().value.settings.getPublicSettings()
     .then((publicSettings) => {
       useSettings().value = publicSettings;
+    })
+    .catch((err) => {
+      notify({
+        group: "error",
+        title: "Error",
+        text: `Trying to get public settings. ${err.message}.`
+      }, 10000);
     });
 }
 
 export function getCategories () {
   useRestApi().value.category.getCategories()
     .then((res) => {
       useCategories().value = res;
+    })
+    .catch((err) => {
+      notify({
+        group: "error",
+        title: "Error",
+        text: `Trying to get categories. ${err.message}.`
+      }, 10000);
     });
 }
 
 export function getTags () {
   useRestApi().value.tag.getTags()
     .then((res) => {
       useTags().value = res;
+    })
+    .catch((err) => {
+      notify({
+        group: "error",
+        title: "Error",
+        text: `Trying to get tags. ${err.message}.`
+      }, 10000);
     });
 }
 
@@ -37,6 +59,13 @@ export async function loginUser (login: string, password: string) {
   })
     .then((user) => {
       useUser().value = user;
+    })
+    .catch((err) => {
+      notify({
+        group: "error",
+        title: "Error",
+        text: `Trying to login. ${err.message}.`
+      }, 10000);
     });
 }
 
@@ -54,5 +83,12 @@ export async function getUser () {
   return await useRestApi().value.user.renewToken()
     .then((user) => {
       useUser().value = user;
+    })
+    .catch((err) => {
+      notify({
+        group: "error",
+        title: "Error",
+        text: `Trying to get user info. ${err.message}.`
+      }, 10000);
     });
 }

pages/admin/settings.vue

@@ -30,7 +30,8 @@
 <script setup lang="ts">
 import { Ref } from "vue";
 import { Settings } from "torrust-index-types-lib";
-import { getSettings, onMounted, ref, useRestApi, useRoute, watch } from "#imports";
+import { notify } from "notiwind-ts";
+import { onMounted, ref, useRestApi } from "#imports";
 
 const tabs = [
   "backend",
@@ -50,6 +51,13 @@ function getAdminSettings () {
   rest.value.settings.getSettings()
     .then((v) => {
       settings.value = v;
+    })
+    .catch((err) => {
+      notify({
+        group: "error",
+        title: "Error",
+        text: `Trying to get the backend settings. ${err.message}.`
+      }, 10000);
     });
 }
 

pages/admin/settings/categories.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="mx-auto flex flex-col gap-2 max-w-md">
+  <div class="flex flex-col max-w-md gap-2 mx-auto">
     <div class="flex flex-col gap-2">
       <template v-for="category in categories">
-        <div class="p-2 flex justify-between bg-base-100 rounded">
+        <div class="flex justify-between p-2 rounded bg-base-100">
           <span class="text-base-content">{{ category.name }} ({{ category.num_torrents }})</span>
           <button class="text-error-content hover:text-error" @click="deleteCategory(category.name)">
             Delete
@@ -11,7 +11,7 @@
       </template>
     </div>
     <div class="flex gap-2">
-      <input v-model="newCategory" class="input input-bordered w-full" type="text">
+      <input v-model="newCategory" class="w-full input input-bordered" type="text">
       <button class="btn btn-primary" :class="{ 'loading': addingCategory }" :disabled="addingCategory || !newCategory" @click="addCategory">
         Add category
       </button>
@@ -21,6 +21,7 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { notify } from "notiwind-ts";
 import { getCategories, useCategories, useRestApi } from "#imports";
 
 const categories = useCategories();
@@ -37,6 +38,13 @@ function addCategory () {
       .then(() => {
         getCategories();
       })
+      .catch((err) => {
+        notify({
+          group: "error",
+          title: "Error",
+          text: `Trying to add the category. ${err.message}.`
+        }, 10000);
+      })
       .finally(() => {
         addingCategory.value = false;
       });
@@ -48,6 +56,13 @@ function deleteCategory (category: string) {
     rest.category.deleteCategory(category)
       .then(() => {
         getCategories();
+      })
+      .catch((err) => {
+        notify({
+          group: "error",
+          title: "Error",
+          text: `Trying to delete the category. ${err.message}.`
+        }, 10000);
       });
   }
 }

pages/admin/settings/tags.vue

@@ -22,7 +22,8 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { TorrentTag } from "torrust-index-types-lib";
-import { computed, getTags, useRestApi, useTags } from "#imports";
+import { notify } from "notiwind-ts";
+import { getTags, useRestApi, useTags } from "#imports";
 
 const tags = useTags();
 const rest = useRestApi().value;
@@ -38,6 +39,13 @@ function addTag () {
       .then(() => {
         getTags();
       })
+      .catch((err) => {
+        notify({
+          group: "error",
+          title: "Error",
+          text: `Trying to add the tag. ${err.message}.`
+        }, 10000);
+      })
       .finally(() => {
         addingTag.value = false;
       });
@@ -49,6 +57,13 @@ function deleteTag (tag: TorrentTag) {
     rest.tag.deleteTag(tag.tag_id)
       .then(() => {
         getTags();
+      })
+      .catch((err) => {
+        notify({
+          group: "error",
+          title: "Error",
+          text: `Trying to delete the tag. ${err.message}.`
+        }, 10000);
       });
   }
 }

pages/torrent/[infoHash].vue

@@ -42,13 +42,13 @@ import { ChevronLeftIcon } from "@heroicons/vue/24/solid";
 import { Ref } from "vue";
 import { TorrentResponse } from "torrust-index-types-lib";
 import { useRoute, useRuntimeConfig } from "#app";
+import { notify } from "notiwind-ts";
 import TorrentActionCard from "~/components/torrent/TorrentActionCard.vue";
 import TorrentDescriptionTab from "~/components/torrent/TorrentDescriptionTab.vue";
 import TorrentFilesTab from "~/components/torrent/TorrentFilesTab.vue";
 import TorrentTrackersTab from "~/components/torrent/TorrentTrackersTab.vue";
 import { navigateTo, onMounted, ref, useRestApi } from "#imports";
 
-const config = useRuntimeConfig();
 const route = useRoute();
 const rest = useRestApi().value;
 
@@ -72,8 +72,13 @@ function getTorrentFromApi (infoHash: string) {
     .then((data) => {
       torrent.value = data;
     })
-    .catch(() => {
+    .catch((err) => {
       loadingTorrent.value = false;
+      notify({
+        group: "error",
+        title: "Error",
+        text: `Trying to get the torrent information. ${err.message}.`
+      }, 10000);
     });
 
   // TODO: Set torrent title in URL.

pages/torrent/edit/[infoHash].vue

@@ -148,6 +148,14 @@ function getTorrentFromApi (infoHash: string) {
         }
       });
     })
+    .catch((err) => {
+      loadingTorrent.value = false;
+      notify({
+        group: "error",
+        title: "Error",
+        text: `Trying to get the torrent info. ${err.message}.`
+      }, 10000);
+    })
     .finally(() => {
       loadingTorrent.value = false;
     });
@@ -182,11 +190,12 @@ function submitForm () {
       navigateTo(`/torrent/${infoHash}`, { replace: true });
     })
     .catch((err) => {
+      loadingTorrent.value = false;
       notify({
         group: "error",
         title: "Error",
-        text: err.message
-      }, 4000); // 4s
+        text: `Trying to update torrent info. ${err.message}.`
+      }, 10000);
     })
     .finally(() => {
       updatingTorrent.value = false;

pages/torrents.vue

@@ -63,6 +63,7 @@
 import { useRuntimeConfig, useRoute, useRouter } from "nuxt/app";
 import { TorrentListing } from "torrust-index-types-lib";
 import { Ref } from "vue";
+import { notify } from "notiwind-ts";
 import { computed, onMounted, ref, useTags, watch } from "#imports";
 import { useCategories, useRestApi } from "~/composables/states";
 import { TorrustSelectOption } from "~/components/TorrustSelect.vue";
@@ -77,7 +78,6 @@ const sortingOptions: Array<TorrustSelectOption> = [
 
 const route = useRoute();
 const router = useRouter();
-const config = useRuntimeConfig();
 const categories = useCategories();
 const tags = useTags();
 const rest = useRestApi();
@@ -147,6 +147,13 @@ function loadTorrents () {
     .then((v) => {
       torrentsTotal.value = v.total;
       torrents.value = v.results;
+    })
+    .catch((err) => {
+      notify({
+        group: "error",
+        title: "Error",
+        text: `Trying to get the information for the torrents. ${err.message}.`
+      }, 10000);
     });
 }
 </script>

pages/upload.vue

@@ -89,7 +89,6 @@ import {
   onMounted,
   ref, toRaw,
   useRestApi,
-  useRuntimeConfig,
   useTags,
   useUser
 } from "#imports";
@@ -103,7 +102,6 @@ type FormUploadTorrent = {
   torrentFile: any;
 }
 
-const config = useRuntimeConfig();
 const categories = useCategories();
 const tags = useTags();
 const user = useUser();
@@ -168,8 +166,8 @@ function submitForm () {
       notify({
         group: "error",
         title: "Error",
-        text: err
-      }, 4000);
+        text: `Trying to upload the torrent. ${err.message}.`
+      }, 10000);
     });
 }