From 0a706d1b45710b5e9ec6f040335020680dd3c6a6 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 26 May 2018 14:50:38 -0700
Subject: [PATCH] Add custom flash library that works as expected

---
 package.json                                  |  1 -
 resources/assets/scripts/app.js               |  6 +-
 resources/assets/scripts/components/Flash.vue | 92 +++++++++++++++++++
 .../components/auth/ForgotPassword.vue        | 14 +--
 .../assets/scripts/components/auth/Login.vue  |  5 +-
 .../scripts/components/auth/LoginForm.vue     | 14 +--
 .../scripts/components/auth/ResetPassword.vue | 12 +--
 .../scripts/components/auth/TwoFactorForm.vue |  5 +-
 resources/assets/scripts/mixins/flash.js      | 62 +++++++++++++
 .../assets/styles/components/animations.css   |  8 ++
 .../styles/components/notifications.css       | 46 ++++++++++
 resources/assets/styles/main.css              |  1 +
 yarn.lock                                     |  4 -
 13 files changed, 233 insertions(+), 37 deletions(-)
 create mode 100644 resources/assets/scripts/components/Flash.vue
 create mode 100644 resources/assets/scripts/mixins/flash.js
 create mode 100644 resources/assets/styles/components/notifications.css

diff --git a/package.json b/package.json
index 45825c2ab..a790e437f 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,6 @@
         "vue-template-compiler": "^2.5.16",
         "vueify-insert-css": "^1.0.0",
         "vuex": "^3.0.1",
-        "vuex-flash": "^1.0.0",
         "vuex-i18n": "^1.10.5",
         "webpack": "^4.4.1",
         "webpack-stream": "^4.0.3",
diff --git a/resources/assets/scripts/app.js b/resources/assets/scripts/app.js
index 0c5dd17e1..f53781c09 100644
--- a/resources/assets/scripts/app.js
+++ b/resources/assets/scripts/app.js
@@ -1,19 +1,19 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import vuexI18n from 'vuex-i18n';
-import VuexFlash from 'vuex-flash';
 import { createFlashStore } from 'vuex-flash';
 import VueRouter from 'vue-router';
 
 // Helpers
 import { Ziggy } from './helpers/ziggy';
 import Locales from './../../../resources/lang/locales';
+import { flash } from './mixins/flash';
 
 // Base Vuejs Templates
 import Login from './components/auth/Login';
 import ResetPassword from './components/auth/ResetPassword';
 
-// Used for the route() helper.
+window.events = new Vue;
 window.Ziggy = Ziggy;
 
 Vue.use(Vuex);
@@ -23,10 +23,10 @@ const route = require('./../../../vendor/tightenco/ziggy/src/js/route').default;
 
 Vue.config.productionTip = false;
 Vue.mixin({ methods: { route } });
+Vue.mixin(flash);
 
 Vue.use(VueRouter);
 Vue.use(vuexI18n.plugin, store);
-Vue.use(VuexFlash, { mixin: true, template: require('./components/errors/Flash.template') });
 
 Vue.i18n.add('en', Locales.en);
 Vue.i18n.set('en');
diff --git a/resources/assets/scripts/components/Flash.vue b/resources/assets/scripts/components/Flash.vue
new file mode 100644
index 000000000..ac41e4dd9
--- /dev/null
+++ b/resources/assets/scripts/components/Flash.vue
@@ -0,0 +1,92 @@
+<template>
+    <div v-if="notifications.length > 0">
+        <transition-group tag="div" class="mb-2" name="fade">
+            <div :class="item.class" class="lg:inline-flex mb-2" role="alert" :key="index" v-for="(item, index) in notifications">
+                <span class="title" v-html="item.title" v-if="item.title.length > 0"></span>
+                <span class="message" v-html="item.message"></span>
+            </div>
+        </transition-group>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'flash',
+        props: {
+            timeout: {
+                type: Number,
+                default: 0,
+            },
+            types: {
+                type: Object,
+                default: function () {
+                    return {
+                        base: 'alert',
+                        success: 'alert success',
+                        info: 'alert info',
+                        warning: 'alert warning',
+                        error: 'alert error',
+                    }
+                }
+            }
+        },
+
+        data: function () {
+            return {
+                notifications: [],
+            };
+        },
+
+        /**
+         * Listen for flash events.
+         */
+        created: function () {
+            const self = this;
+            window.events.$on('flash', function (data) {
+                self.flash(data.message, data.title, data.severity);
+            });
+
+            window.events.$on('clear-flashes', function () {
+                self.clear();
+            });
+        },
+
+        methods: {
+            /**
+             * Flash a message to the screen when a flash event is emitted over
+             * the global event stream.
+             *
+             * @param {string} message
+             * @param {string} title
+             * @param {string} severity
+             */
+            flash: function (message, title, severity) {
+                this.notifications.push({
+                    message, severity, title, class: this.types[severity] || this.types.base,
+                });
+
+                if (this.timeout > 0) {
+                    setTimeout(this.hide, this.timeout);
+                }
+            },
+
+            /**
+             * Clear all of the flash messages from the screen.
+             */
+            clear: function () {
+                this.notifications = [];
+                window.events.$emit('flashes-cleared');
+            },
+
+            /**
+             * Hide a notification after a given amount of time.
+             *
+             * @param {int} item
+             */
+            hide: function (item = this.notifications[0]) {
+                let key = this.notifications.indexOf(item);
+                this.notifications.splice(key, 1);
+            },
+        }
+    };
+</script>
diff --git a/resources/assets/scripts/components/auth/ForgotPassword.vue b/resources/assets/scripts/components/auth/ForgotPassword.vue
index 97029e1ce..e06fa40b4 100644
--- a/resources/assets/scripts/components/auth/ForgotPassword.vue
+++ b/resources/assets/scripts/components/auth/ForgotPassword.vue
@@ -1,12 +1,5 @@
 <template>
     <div>
-        <div class="pb-4" v-for="error in errors">
-            <div class="p-2 bg-red-dark border-red-darker border items-center text-red-lightest leading-normal rounded flex lg:inline-flex w-full text-sm"
-                 role="alert">
-                <span class="flex rounded-full bg-red uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Error</span>
-                <span class="mr-2 text-left flex-auto">{{ error }}</span>
-            </div>
-        </div>
         <form class="bg-white shadow-lg rounded-lg pt-10 px-8 pb-6 mb-4 animate fadein" method="post"
               v-on:submit.prevent="submitForm"
         >
@@ -70,13 +63,14 @@
                 this.$data.showSpinner = true;
                 this.$data.errors = [];
 
+                this.clearFlashes();
                 window.axios.post(this.route('auth.forgot-password'), {
                     email: this.$props.email,
                 })
                     .then(function (response) {
                         self.$data.submitDisabled = false;
                         self.$data.showSpinner = false;
-                        self.flash({message: response.data.status, variant: 'success'});
+                        self.success(response.data.status);
                         self.$router.push({name: 'login'});
                     })
                     .catch(function (err) {
@@ -87,7 +81,9 @@
 
                         const response = err.response;
                         if (response.data && _.isObject(response.data.errors)) {
-                            self.$data.errors.push(response.data.errors[0].detail);
+                            response.data.errors.forEach(function (error) {
+                                self.error(error.detail);
+                            });
                         }
                     });
             }
diff --git a/resources/assets/scripts/components/auth/Login.vue b/resources/assets/scripts/components/auth/Login.vue
index c027841e3..efda62d2e 100644
--- a/resources/assets/scripts/components/auth/Login.vue
+++ b/resources/assets/scripts/components/auth/Login.vue
@@ -1,5 +1,6 @@
 <template>
     <div>
+        <flash/>
         <login-form
                 v-if="this.$route.name === 'login'"
                 v-bind:user="user"
@@ -15,8 +16,9 @@
 </template>
 
 <script>
-    import LoginForm from "./LoginForm";
+    import Flash from '../Flash';
     import ForgotPassword from "./ForgotPassword";
+    import LoginForm from "./LoginForm";
     import TwoFactorForm from "./TwoFactorForm";
 
     export default {
@@ -34,6 +36,7 @@
             },
         },
         components: {
+            Flash,
             TwoFactorForm,
             ForgotPassword,
             LoginForm,
diff --git a/resources/assets/scripts/components/auth/LoginForm.vue b/resources/assets/scripts/components/auth/LoginForm.vue
index 160c8a3ad..07236d550 100644
--- a/resources/assets/scripts/components/auth/LoginForm.vue
+++ b/resources/assets/scripts/components/auth/LoginForm.vue
@@ -1,14 +1,5 @@
 <template>
     <div>
-        <flash-message variant="danger" />
-        <flash-message variant="success" />
-        <div class="pb-4" v-for="error in errors">
-            <div class="p-2 bg-red-dark border-red-darker border items-center text-red-lightest leading-normal rounded flex lg:inline-flex w-full text-sm"
-                 role="alert">
-                <span class="flex rounded-full bg-red uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Error</span>
-                <span class="mr-2 text-left flex-auto">{{ error }}</span>
-            </div>
-        </div>
         <form class="bg-white shadow-lg rounded-lg pt-10 px-8 pb-6 mb-4 animate fadein" method="post"
               v-on:submit.prevent="submitForm"
         >
@@ -84,6 +75,7 @@
                 const self = this;
                 this.$data.showSpinner = true;
 
+                this.clearFlashes();
                 axios.post(this.route('auth.login'), {
                     user: this.$props.user.email,
                     password: this.$props.user.password,
@@ -106,7 +98,9 @@
 
                         const response = err.response;
                         if (response.data && _.isObject(response.data.errors)) {
-                            self.$data.errors = [response.data.errors[0].detail];
+                            response.data.errors.forEach(function (error) {
+                                self.error(error.detail);
+                            });
                             self.$refs.password.focus();
                         }
                     });
diff --git a/resources/assets/scripts/components/auth/ResetPassword.vue b/resources/assets/scripts/components/auth/ResetPassword.vue
index 6e9940e17..588bf023e 100644
--- a/resources/assets/scripts/components/auth/ResetPassword.vue
+++ b/resources/assets/scripts/components/auth/ResetPassword.vue
@@ -1,12 +1,5 @@
 <template>
     <div>
-        <div class="pb-4" v-for="error in errors">
-            <div class="p-2 bg-red-dark border-red-darker border items-center text-red-lightest leading-normal rounded flex lg:inline-flex w-full text-sm"
-                 role="alert">
-                <span class="flex rounded-full bg-red uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Error</span>
-                <span class="mr-2 text-left flex-auto">{{ error }}</span>
-            </div>
-        </div>
         <form class="bg-white shadow-lg rounded-lg pt-10 px-8 pb-6 mb-4 animate fadein" method="post"
               v-on:submit.prevent="submitForm"
         >
@@ -90,6 +83,7 @@
                 const self = this;
                 this.$data.showSpinner = true;
 
+                this.clearFlashes();
                 window.axios.post(this.route('auth.reset-password'), {
                     email: this.$props.email,
                     password: this.$data.password,
@@ -107,7 +101,9 @@
 
                         const response = err.response;
                         if (response.data && _.isObject(response.data.errors)) {
-                            self.$data.errors = [response.data.errors[0].detail];
+                            response.data.errors.forEach(function (error) {
+                                self.error(error.detail);
+                            });
                             self.$refs.password.focus();
                         }
                     });
diff --git a/resources/assets/scripts/components/auth/TwoFactorForm.vue b/resources/assets/scripts/components/auth/TwoFactorForm.vue
index dbbe422b9..27d2b2282 100644
--- a/resources/assets/scripts/components/auth/TwoFactorForm.vue
+++ b/resources/assets/scripts/components/auth/TwoFactorForm.vue
@@ -43,6 +43,7 @@
             submitToken: function () {
                 const self = this;
 
+                self.clearFlashes();
                 axios.post(this.route('auth.login-checkpoint'), {
                     confirmation_token: this.$route.query.token,
                     authentication_code: this.$data.code,
@@ -57,7 +58,9 @@
 
                         const response = err.response;
                         if (response.data && _.isObject(response.data.errors)) {
-                            self.flash({message: response.data.errors[0].detail, variant: 'danger'});
+                            response.data.errors.forEach(function (error) {
+                                self.error(error.detail);
+                            });
                             self.$router.push({ name: 'login' });
                         }
                     });
diff --git a/resources/assets/scripts/mixins/flash.js b/resources/assets/scripts/mixins/flash.js
new file mode 100644
index 000000000..c7a0b5ea4
--- /dev/null
+++ b/resources/assets/scripts/mixins/flash.js
@@ -0,0 +1,62 @@
+export const flash = {
+    methods: {
+        /**
+         * Flash a message to the event stream in the browser.
+         *
+         * @param {string} message
+         * @param {string} title
+         * @param {string} severity
+         */
+        flash: function (message, title, severity = 'info') {
+            severity = severity || 'info';
+            if (['danger', 'fatal', 'error'].includes(severity)) {
+                severity = 'error';
+            }
+
+            window.events.$emit('flash', { message, title, severity });
+        },
+
+        /**
+         * Clear all of the flash messages from the screen.
+         */
+        clearFlashes: function () {
+            window.events.$emit('clear-flashes');
+        },
+
+        /**
+         * Helper function to flash a normal success message to the user.
+         *
+         * @param {string} message
+         */
+        success: function (message) {
+            this.flash(message, 'Success', 'success');
+        },
+
+        /**
+         * Helper function to flash a normal info message to the user.
+         *
+         * @param {string} message
+         */
+        info: function (message) {
+            this.flash(message, 'Info', 'info');
+        },
+
+        /**
+         * Helper function to flash a normal warning message to the user.
+         *
+         * @param {string} message
+         */
+        warning: function (message) {
+            this.flash(message, 'Warning', 'warning');
+        },
+
+        /**
+         * Helper function to flash a normal error message to the user.
+         *
+         * @param {string} message
+         */
+        error: function (message) {
+            this.flash(message, 'Error', 'danger');
+        },
+    }
+};
diff --git a/resources/assets/styles/components/animations.css b/resources/assets/styles/components/animations.css
index cac2b2474..854df8974 100644
--- a/resources/assets/styles/components/animations.css
+++ b/resources/assets/styles/components/animations.css
@@ -4,6 +4,14 @@
   }
 }
 
+.fade-enter-active {
+  animation: fadein 500ms;
+}
+
+.fade-leave-active {
+  animation: fadein 500ms reverse;
+}
+
 @keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
diff --git a/resources/assets/styles/components/notifications.css b/resources/assets/styles/components/notifications.css
new file mode 100644
index 000000000..dc4ebc684
--- /dev/null
+++ b/resources/assets/styles/components/notifications.css
@@ -0,0 +1,46 @@
+/**
+ * Styling to control alert boxes.
+ */
+.alert {
+    @apply .p-2 .border .items-center .leading-normal .rounded .flex .w-full .text-sm;
+
+    & > .title {
+        @apply .flex .rounded-full .uppercase .px-2 .py-1 .text-xs .font-bold .mr-3 .leading-none;
+    }
+
+    & > .message {
+        @apply .mr-2 .text-left .flex-auto;
+    }
+
+    &.error {
+        @apply .bg-red-dark .border-red-darker .text-red-lightest;
+
+        & > .title {
+            @apply .bg-red;
+        }
+    }
+
+    &.info {
+        @apply .bg-blue-dark .border-blue-darker .text-blue-lightest;
+
+        & > .title {
+            @apply .bg-blue;
+        }
+    }
+
+    &.success {
+        @apply .bg-green-dark .border-green-darker .text-green-lightest;
+
+        & > .title {
+            @apply .bg-green;
+        }
+    }
+
+    &.warning {
+        @apply .bg-yellow-dark .border-yellow-darker .text-yellow-lightest;
+
+        & > .title {
+            @apply .bg-yellow;
+        }
+    }
+}
diff --git a/resources/assets/styles/main.css b/resources/assets/styles/main.css
index a9a309f9d..49d8d52df 100644
--- a/resources/assets/styles/main.css
+++ b/resources/assets/styles/main.css
@@ -10,6 +10,7 @@
 @import "components/animations.css";
 @import "components/authentication.css";
 @import "components/buttons.css";
+@import "components/notifications.css";
 @import "components/spinners.css";
 
 /**
diff --git a/yarn.lock b/yarn.lock
index 1746d4655..5041d118f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6004,10 +6004,6 @@ vueify-insert-css@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/vueify-insert-css/-/vueify-insert-css-1.0.0.tgz#57e5d791907e8c9d87ae6de099a2174bd0a7f990"
 
-vuex-flash@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/vuex-flash/-/vuex-flash-1.0.0.tgz#4bbeb2093d4857ddef45a6c50f10243539acee6e"
-
 vuex-i18n@^1.10.5:
   version "1.10.5"
   resolved "https://registry.yarnpkg.com/vuex-i18n/-/vuex-i18n-1.10.5.tgz#635ea2204e0aa3f8fd512f0fab7f6b994d3f666c"