Finish auth migration, now to make it work

resources/assets/scripts/components/Flash.ts

@@ -0,0 +1,89 @@
+import Vue from 'vue';
+import MessageBox from "./MessageBox";
+
+export default Vue.component('flash', {
+    components: {
+        MessageBox
+    },
+    props: {
+        container: {type: String, default: ''},
+        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: any) {
+            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.
+         */
+        flash: function (message: string, title: string, severity: string) {
+            this.$data.notifications.push({
+                message, severity, title, class: this.$props.types[severity] || this.$props.types.base,
+            });
+
+            if (this.$props.timeout > 0) {
+                setTimeout(this.hide, this.$props.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.
+         */
+        hide: function (item?: number) {
+            let key = this.$data.notifications.indexOf(item || this.$data.notifications[0]);
+            this.$data.notifications.splice(key, 1);
+        },
+    },
+    template: `
+        <div v-if="notifications.length > 0" :class="this.container">
+            <transition-group tag="div" name="fade">
+                <div v-for="(item, index) in notifications" :key="index">
+                    <message-box
+                            :class="[item.class, {'mb-2': index < notifications.length - 1}]"
+                            :title="item.title"
+                            :message="item.message"
+                    />
+                </div>
+            </transition-group>
+        </div>
+    `,
+})