refactor(manager): improve totps component

- change errors div by the global toast component

site/components/totps.vue

@@ -4,28 +4,27 @@
       <Totp :service="service"></Totp>
     </div>
   </draggable>
-  <div v-if="errorMessage" class="alert alert-danger mt-3" role="alert">
-    {{ errorMessage }}
-  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onBeforeMount } from "vue";
+import { ref, onBeforeMount, inject } from "vue";
 import { VueDraggableNext } from "vue-draggable-next";
 import Totp from "~/components/totp.vue";
 import ESP32MFAAuthenticatorClient from "@/api/esp32-mfa-authenticator-client";
 
 const name = "totps";
 
 const services = ref([]);
-const errorMessage = ref(null);
+
+const showToast = inject("showToast") as Function;
 
 onBeforeMount(async () => {
   try {
     const client = new ESP32MFAAuthenticatorClient();
     services.value = await client.fetchServices();
   } catch (error) {
-    errorMessage.value = "Could not fetch services";
+    console.error("Error while fetching services:", error);
+    showToast("Could not load services");
   }
 });
 const draggable = VueDraggableNext;