From 0a61d2750b46be8befe23df7a8e43cc726978ea2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Thu, 9 May 2019 03:31:43 +0200
Subject: [PATCH] snackbar with colors, close button text

---
 frontend/src/components/forms/FormDialog.vue | 35 ++++++++++----------
 frontend/src/components/forms/Login.vue      |  3 +-
 frontend/src/components/forms/Register.vue   |  4 +--
 3 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/forms/FormDialog.vue b/frontend/src/components/forms/FormDialog.vue
index e03ef5b..306a179 100644
--- a/frontend/src/components/forms/FormDialog.vue
+++ b/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)
     }
   },
 
diff --git a/frontend/src/components/forms/Login.vue b/frontend/src/components/forms/Login.vue
index 69c2d41..160c6e5 100644
--- a/frontend/src/components/forms/Login.vue
+++ b/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')
           }
         })
     }
diff --git a/frontend/src/components/forms/Register.vue b/frontend/src/components/forms/Register.vue
index 3631768..79a8e8a 100644
--- a/frontend/src/components/forms/Register.vue
+++ b/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')
           }
         })
     }