Add error message

aleksis/apps/maka/frontend/components/SharedSecret.vue

@@ -3,7 +3,7 @@
     <slot v-if="sharedSecretStatus" />
     <div class="d-flex justify-center align-center flex-column text-center" v-else>
       <h1 class="text-h5">{{ $t("maka.shared_secret.enter") }}</h1>
-      <v-text-field v-model="sharedSecret" :loading="loading" type="password">
+      <v-text-field v-model="sharedSecret" :loading="loading" type="password" :error-messages="errorMessages">
         <template #append>
           <v-btn
             :disabled="loading"
@@ -30,10 +30,12 @@
         sharedSecret: "",
         sharedSecretStatus: false,
         loading: false,
+        showError: false,
       };
     },
     methods: {
       submitSharedSecret() {
+        this.showError = false;
         this.loading = true;
         this.$apollo.mutate({
           mutation: gqlSubmitSharedSecret,
@@ -47,10 +49,24 @@
         });
       },
     },
+    computed: {
+      errorMessages() {
+        if (!this.loading && !this.sharedSecretStatus && this.showError) {
+          return [this.$t('maka.shared_secret.error')];
+        } else {
+          return [];
+        }
+      },
+    },
     apollo: {
       sharedSecretStatus: {
         query: gqlSharedSecretStatus,
         skip: true,
+        result ({ data, loading, networkStatus }) {
+          if (!loading && !data?.sharedSecretStatus) {
+            this.showError = true;
+          }
+        },
       },
     },
   };

aleksis/apps/maka/frontend/messages/en.json

@@ -3,7 +3,8 @@
     "menu_title": "AlekSIS-App-Maka",
     "shared_secret": {
       "title": "Shared secret",
-      "enter": "Shared secret needed for accessing page"
+      "enter": "Shared secret needed for accessing page",
+      "error": "Wrong shared secret entered. Please try again."
     }
   }
 }