snackbar with colors, close button text

frontend/src/components/forms/FormDialog.vue

@@ -5,9 +5,9 @@
     </v-btn>
 
     <v-card>
-      <v-snackbar v-model="hasError" :timeout="6000" absolute top>
-        {{ errorText }}
-        <v-btn fab flat icon @click.native="hasError = false">
+      <v-snackbar v-model="snackbar.visible" :timeout="6000" :color="snackbar.color" absolute top>
+        {{ snackbar.text }}
+        <v-btn @click.native="snackbar.visible = false" fab flat icon>
           <v-icon>close</v-icon>
         </v-btn>
       </v-snackbar>
@@ -30,7 +30,7 @@
           </v-btn>
 
           <v-btn color="error" @click.native="dialog = false">
-            Cancel
+            Close
           </v-btn>
         </v-card-actions>
       </v-form>
@@ -44,8 +44,11 @@ export default {
   data: () => ({
     dialog: false,
     valid: true,
-    hasError: false,
-    errorText: ''
+    snackbar: {
+      visible: false,
+      color: '',
+      text: ''
+    }
   }),
 
   props: {
@@ -59,18 +62,16 @@ export default {
       }
     },
 
-    showError(text) {
-      let actually = () => {
-        this.hasError = true
-        this.errorText = text
-      }
+    showSnackbar(text, color) {
+      if (text == '') return
 
-      if (this.hasError) {
-        this.hasError = false
-        window.setTimeout(actually, 100)
-      } else {
-        actually()
-      }
+      this.snackbar.visible = false
+
+      window.setTimeout(() => {
+        this.snackbar.text = text
+        this.snackbar.color = color
+        this.snackbar.visible = true
+      }, 100)
     }
   },
 

frontend/src/components/forms/Login.vue

@@ -55,9 +55,10 @@ export default {
           if (response.data.success) {
             let cookie_data = JSON.parse(response.data.message)
             Cookies.set('session', cookie_data.value, cookie_data.properties)
+            this.$refs.main.showSnackbar("Login successful!", 'success')
             this.$router.push('about')
           } else {
-            this.$refs.main.showError(response.data.message)
+            this.$refs.main.showSnackbar(response.data.message, 'error')
           }
         })
     }

frontend/src/components/forms/Register.vue

@@ -75,11 +75,11 @@ export default {
           password: this.password
         })
         .then(response => {
-          // this.$refs.form.reset()
           console.log('register', response.data)
           if (response.data.success) {
+            this.$refs.main.showSnackbar("Registration successful!", 'success')
           } else {
-            this.$refs.main.showError(response.data.message)
+            this.$refs.main.showSnackbar(response.data.message, 'error')
           }
         })
     }