feat: display error messages on settings

frontend/src/i18n/en.json

@@ -215,6 +215,7 @@
     "settingsUpdated": "Settings updated!",
     "shareDuration": "Share Duration",
     "shareManagement": "Share Management",
+    "shareDeleted": "Share deleted!",
     "singleClick": "Use single clicks to open files and directories",
     "themes": {
       "dark": "Dark",

frontend/src/views/settings/Global.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="row" v-if="!loading">
+  <errors v-if="error" :errorCode="error.message" />
+  <div class="row" v-else-if="!loading">
     <div class="column">
       <form class="card" @submit.prevent="save">
         <div class="card-title">
@@ -172,10 +173,11 @@
 <script>
 import { mapState, mapMutations } from "vuex";
 import { settings as api } from "@/api";
+import { enableExec } from "@/utils/constants";
 import UserForm from "@/components/settings/UserForm";
 import Rules from "@/components/settings/Rules";
 import Themes from "@/components/settings/Themes";
-import { enableExec } from "@/utils/constants";
+import Errors from "@/views/Errors";
 
 export default {
   name: "settings",
@@ -183,9 +185,11 @@ export default {
     Themes,
     UserForm,
     Rules,
+    Errors,
   },
   data: function () {
     return {
+      error: null,
       originalSettings: null,
       settings: null,
     };
@@ -212,10 +216,10 @@ export default {
 
       this.originalSettings = original;
       this.settings = settings;
-
-      this.setLoading(false);
     } catch (e) {
-      this.$showError(e);
+      this.error = e;
+    } finally {
+      this.setLoading(false);
     }
   },
   methods: {

frontend/src/views/settings/Shares.vue

@@ -1,12 +1,13 @@
 <template>
-  <div class="row" v-if="!loading">
+  <errors v-if="error" :errorCode="error.message" />
+  <div class="row" v-else-if="!loading">
     <div class="column">
       <div class="card">
         <div class="card-title">
           <h2>{{ $t("settings.shareManagement") }}</h2>
         </div>
 
-        <div class="card-content full">
+        <div class="card-content full" v-if="links.length > 0">
           <table>
             <tr>
               <th>{{ $t("settings.path") }}</th>
@@ -52,6 +53,10 @@
             </tr>
           </table>
         </div>
+        <h2 class="message" v-else>
+          <i class="material-icons">sentiment_dissatisfied</i>
+          <span>{{ $t("files.lonely") }}</span>
+        </h2>
       </div>
     </div>
   </div>
@@ -59,16 +64,21 @@
 
 <script>
 import { share as api, users } from "@/api";
-import moment from "moment";
 import { baseURL } from "@/utils/constants";
-import Clipboard from "clipboard";
 import { mapState, mapMutations } from "vuex";
+import moment from "moment";
+import Clipboard from "clipboard";
+import Errors from "@/views/Errors";
 
 export default {
   name: "shares",
+  components: {
+    Errors,
+  },
   computed: mapState(["user", "loading"]),
   data: function () {
     return {
+      error: null,
       links: [],
       clip: null,
     };
@@ -88,10 +98,10 @@ export default {
             : "";
       }
       this.links = links;
-
-      this.setLoading(false);
     } catch (e) {
-      this.$showError(e);
+      this.error = e;
+    } finally {
+      this.setLoading(false);
     }
   },
   mounted() {
@@ -113,8 +123,13 @@ export default {
         confirm: () => {
           this.$store.commit("closeHovers");
 
-          api.remove(link.hash);
-          this.links = this.links.filter((item) => item.hash !== link.hash);
+          try {
+            api.remove(link.hash);
+            this.links = this.links.filter((item) => item.hash !== link.hash);
+            this.$showSuccess(this.$t("settings.shareDeleted"));
+          } catch (e) {
+            this.$showError(e);
+          }
         },
       });
     },

frontend/src/views/settings/User.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="row" v-if="!loading">
+  <errors v-if="error" :errorCode="error.message" />
+  <div class="row" v-else-if="!loading">
     <div class="column">
       <form @submit="save" class="card">
         <div class="card-title">
@@ -58,15 +59,18 @@
 import { mapState, mapMutations } from "vuex";
 import { users as api, settings } from "@/api";
 import UserForm from "@/components/settings/UserForm";
+import Errors from "@/views/Errors";
 import deepClone from "lodash.clonedeep";
 
 export default {
   name: "user",
   components: {
     UserForm,
+    Errors,
   },
   data: () => {
     return {
+      error: null,
       originalUser: null,
       user: {},
     };
@@ -107,10 +111,10 @@ export default {
           const id = this.$route.params.pathMatch;
           this.user = { ...(await api.get(id)) };
         }
-
-        this.setLoading(false);
       } catch (e) {
-        this.$router.push({ path: "/settings/users/new" });
+        this.error = e;
+      } finally {
+        this.setLoading(false);
       }
     },
     deletePrompt() {

frontend/src/views/settings/Users.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="row" v-if="!loading">
+  <errors v-if="error" :errorCode="error.message" />
+  <div class="row" v-else-if="!loading">
     <div class="column">
       <div class="card">
         <div class="card-title">
@@ -43,11 +44,16 @@
 <script>
 import { mapState, mapMutations } from "vuex";
 import { users as api } from "@/api";
+import Errors from "@/views/Errors";
 
 export default {
   name: "users",
+  components: {
+    Errors,
+  },
   data: function () {
     return {
+      error: null,
       users: [],
     };
   },
@@ -56,9 +62,10 @@ export default {
 
     try {
       this.users = await api.getAll();
-      this.setLoading(false);
     } catch (e) {
-      this.$showError(e);
+      this.error = e;
+    } finally {
+      this.setLoading(false);
     }
   },
   computed: {