FormDialog error message (snackbar)

frontend/src/components/forms/FormDialog.vue

@@ -5,6 +5,13 @@
     </v-btn>
 
     <v-card>
+      <v-snackbar v-model="hasError" :timeout="6000" absolute top>
+        {{ errorText }}
+        <v-btn fab flat icon @click.native="hasError = false">
+          <v-icon>close</v-icon>
+        </v-btn>
+      </v-snackbar>
+
       <v-form
         ref="form"
         v-model="valid"
@@ -36,7 +43,9 @@ export default {
   name: 'FormDialog',
   data: () => ({
     dialog: false,
-    valid: true
+    valid: true,
+    hasError: false,
+    errorText: ''
   }),
 
   props: {
@@ -48,6 +57,20 @@ export default {
       if (this.$refs.form.validate()) {
         this.$emit('confirm')
       }
+    },
+
+    showError(text) {
+      let actually = () => {
+        this.hasError = true
+        this.errorText = text
+      }
+
+      if (this.hasError) {
+        this.hasError = false
+        window.setTimeout(actually, 100)
+      } else {
+        actually()
+      }
     }
   },
 

frontend/src/components/forms/Login.vue

@@ -1,5 +1,5 @@
 <template>
-  <FormDialog buttonText="Login" @confirm="doLogin">
+  <FormDialog ref="main" buttonText="Login" @confirm="doLogin">
     <v-card-title class="headline">
       Log In
     </v-card-title>
@@ -56,6 +56,8 @@ export default {
             let cookie_data = JSON.parse(response.data.message)
             Cookies.set('session', cookie_data.value, cookie_data.properties)
             this.$router.push('about')
+          } else {
+            this.$refs.main.showError(response.data.message)
           }
         })
     }

frontend/src/components/forms/Register.vue

@@ -1,5 +1,5 @@
 <template>
-  <FormDialog buttonText="Register" @confirm="doRegister">
+  <FormDialog ref="main" buttonText="Register" @confirm="doRegister">
     <v-card-title class="headline">
       Register
     </v-card-title>
@@ -77,6 +77,10 @@ export default {
         .then(response => {
           // this.$refs.form.reset()
           console.log('register', response.data)
+          if (response.data.success) {
+          } else {
+            this.$refs.main.showError(response.data.message)
+          }
         })
     }
   }