Replace custom notifications with vue-notification package

package-lock.json

@@ -9315,6 +9315,11 @@
                 "vue-style-loader": "^4.1.0"
             }
         },
+        "vue-notification": {
+            "version": "1.3.20",
+            "resolved": "https://registry.npmjs.org/vue-notification/-/vue-notification-1.3.20.tgz",
+            "integrity": "sha512-vPj67Ah72p8xvtyVE8emfadqVWguOScAjt6OJDEUdcW5hW189NsqvfkOrctxHUUO9UYl9cTbIkzAEcPnHu+zBQ=="
+        },
         "vue-pull-refresh": {
             "version": "0.2.7",
             "resolved": "https://registry.npmjs.org/vue-pull-refresh/-/vue-pull-refresh-0.2.7.tgz",

package.json

@@ -33,6 +33,7 @@
         "vue": "^2.6.12",
         "vue-axios": "^2.1.5",
         "vue-i18n": "^8.21.1",
+        "vue-notification": "^1.3.20",
         "vue-pull-refresh": "^0.2.7",
         "vue-qrcode-reader": "^2.3.13",
         "vue-router": "^3.4.3",

resources/js/app.js

@@ -1,14 +1,17 @@
-import Vue          from 'vue'
+import Vue              from 'vue'
-import router       from './routes'
+import router           from './routes'
-import api          from './api'
+import api              from './api'
-import i18n         from './langs/i18n'
+import i18n             from './langs/i18n'
-import FontAwesome  from './packages/fontawesome'
+import FontAwesome      from './packages/fontawesome'
-import Clipboard    from './packages/clipboard'
+import Clipboard        from './packages/clipboard'
-import QrcodeReader from './packages/qrcodeReader'
+import QrcodeReader     from './packages/qrcodeReader'
-import App          from './components/App'
+import Notifications    from 'vue-notification'
+import App              from './components/App'
 
 import './components'
 
+Vue.use(Notifications)
+
 const app = new Vue({
     el: '#app',
     data: {

resources/js/components/App.vue

@@ -3,6 +3,7 @@
         <div v-if="$root.appSettings.isDemoApp" class="demo has-background-warning has-text-centered is-size-7-mobile">
             {{ $t('commons.demo_do_not_post_sensitive_data') }}
         </div>
+        <notifications width="100%" position="top" :duration="4000" :speed="0" :max="1" classes="notification" />
         <main class="main-section">
             <router-view></router-view>
         </main>

resources/js/components/FormWrapper.vue

@@ -3,10 +3,6 @@
         <div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
             <h1 class="title" v-html="title" v-if="title"></h1>
             <slot />
-            <p v-if="showTag">
-                <notification :message="fail" type="is-danger" :isFixed="hasFixedNotification" v-if="fail" />
-                <notification :message="success" type="is-success" :isFixed="hasFixedNotification" v-if="success" />
-            </p>
         </div>
     </div>    
 </template>
@@ -21,32 +17,11 @@
             }
         },
 
-        computed: {
-            showTag: function() {
-                return (this.fail || this.success) ? true : false
-            }
-        },
-
         props: {
             title: {
                 type: String,
                 default: ''
             },
-
-            fail: {
-                type: String,
-                default: ''
-            },
-
-            success: {
-                type: String,
-                default: ''
-            },
-
-            hasFixedNotification: {
-                type: Boolean,
-                default: false
-            },
         }
     }
 </script>

resources/js/components/Modal.vue

@@ -24,9 +24,11 @@
 <script>
 export default {
     name: 'Modal',
+
     props: {
         value: Boolean,
     },
+
     computed: {
         isActive: {
             get () {
@@ -37,10 +39,12 @@ export default {
             }
         }
     },
+
     methods: {
         closeModal: function(event) {
             if (event) {
                 this.isActive = false
+                this.$notify({ clean: true })
                 this.$parent.$emit('modalClose')
             }
         }

resources/js/components/Notification.vue

@@ -1,50 +0,0 @@
-<template>
-    <div class="notification" :class="[type, isFixed ? 'is-fixed' : '']" v-if="show">
-        <button class="delete" v-if="isDeletable" @click="close"></button>
-        {{ message }}
-    </div>
-</template>
-
-<script>
-    export default {
-        name: 'Notification',
-        
-        data() {
-            return {
-                show: true
-            }
-        },
-
-        props: {
-            type: {
-                type: String,
-                default: 'is-primary'
-            },
-
-            message: {
-                type: String,
-                default: '',
-            },
-
-            isDeletable: {
-                type: Boolean,
-                default: true,
-            },
-
-            isFixed: {
-                type: Boolean,
-                default: false
-            }
-        },
-
-        methods: {
-
-            close (event) {
-                if (event) {
-                    this.show = false
-                }
-                
-            }
-        }
-    }
-</script>

resources/js/components/QuickUploader.vue

@@ -31,9 +31,6 @@
                 <div class="column is-full quick-uploader-footer">
                     <router-link :to="{ name: 'create' }" class="is-link">{{ $t('twofaccounts.use_full_form') }}</router-link>
                 </div>
-                <div v-if="showError" class="column is-full quick-uploader-footer">
-                    <notification :message="errorText" :isDeletable="false" type="is-danger" />
-                </div>
             </div>
         </div>
         <!-- camera stream fullscreen scanner -->
@@ -77,17 +74,6 @@
             }
         },
 
-        computed: {
-
-            debugMode: function() {
-                return process.env.NODE_ENV
-            },
-
-            showError: function() {
-                return this.debugMode == 'development' && this.errorName == 'NotAllowedError'
-            },
-        },
-
         props: {
             showTrailer: {
                 type: Boolean,
@@ -180,6 +166,10 @@
                     this.$parent.$emit('cannotStream')
 
                     console.log('fail to stream : ' + this.errorText)
+
+                    if (this.errorName === 'NotAllowedError') {
+                        this.$notify({ type: 'is-danger', text: this.errorText })
+                    }
                 }
 
                 if( !this.errorName && !this.showStream ) {

resources/js/components/index.js

@@ -6,7 +6,6 @@ import FormField from './FormField'
 import FormSelect from './FormSelect'
 import FormSwitch from './FormSwitch'
 import FormButtons from './FormButtons'
-import Notification from './Notification'
 import VueFooter from './Footer'
 
 // Components that are registered globaly.
@@ -18,7 +17,6 @@ import VueFooter from './Footer'
     FormSelect,
     FormSwitch,
     FormButtons,
-    Notification,
     VueFooter,
 ].forEach(Component => {
 	Vue.component(Component.name, Component)

resources/js/routes.js

@@ -10,7 +10,7 @@ import Login            from './views/auth/Login'
 import Register         from './views/auth/Register'
 import PasswordRequest  from './views/auth/password/Request'
 import PasswordReset    from './views/auth/password/Reset'
-import Settings          from './views/settings/Index'
+import Settings         from './views/settings/Index'
 import Errors           from './views/Error'
 
 const router = new Router({

resources/js/views/settings/Account.vue

@@ -1,5 +1,5 @@
 <template>
-    <form-wrapper :fail="fail" :success="success">
+    <form-wrapper>
         <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
             <form-field :form="form" fieldName="name" :label="$t('auth.forms.name')" autofocus />
             <form-field :form="form" fieldName="email" inputType="email" :label="$t('auth.forms.email')" />
@@ -16,8 +16,6 @@
     export default {
         data(){
             return {
-                success: '',
-                fail: '',
                 form: new Form({
                     name : '',
                     email : '',
@@ -36,18 +34,15 @@
             handleSubmit(e) {
                 e.preventDefault()
 
-                this.fail = ''
-                this.success = ''
-
                 this.form.patch('/api/settings/account', {returnError: true})
                 .then(response => {
 
-                    this.success = response.data.message
+                    this.$notify({ type: 'is-success', text: response.data.message })
                 })
                 .catch(error => {
                     if( error.response.status === 400 ) {
 
-                        this.fail = error.response.data.message
+                        this.$notify({ type: 'is-danger', text: error.response.data.message })
                     }
                     else if( error.response.status !== 422 ) {
                         this.$router.push({ name: 'genericError', params: { err: error.response } });

resources/js/views/settings/Index.vue

@@ -17,7 +17,9 @@
         <vue-footer :showButtons="true">
             <!-- Cancel button -->
             <p class="control">
-                <router-link :to="{ name: 'accounts' }" class="button is-dark is-rounded">{{ $t('commons.close') }}</router-link>
+                <a class="button is-dark is-rounded" @click.stop="exitSettings">
+                    {{ $t('commons.close') }}
+                </a>
             </p>
         </vue-footer>
     </div>
@@ -64,6 +66,13 @@
                     	this.activeTab = selectedTab.name
                     }
                 });
+            },
+
+            exitSettings: function(event) {
+                if (event) {
+                    this.$notify({ clean: true })
+                    this.$router.push({ name: 'accounts' })
+                }
             }
         }
     };

resources/js/views/settings/Options.vue

@@ -1,5 +1,5 @@
 <template>
-    <form-wrapper :fail="fail" :success="success" :hasFixedNotification="true">
+    <form-wrapper>
         <div class="tags has-addons">
             <span class="tag is-dark">2FAuth</span>
             <span class="tag is-info">v{{ $root.appVersion }}</span>
@@ -21,8 +21,8 @@
     export default {
         data(){
             return {
-                success: '',
+                // success: '',
-                fail: '',
+                // fail: '',
                 form: new Form({
                     lang: this.$root.$i18n.locale,
                     showTokenAsDot: this.$root.appSettings.showTokenAsDot,
@@ -45,13 +45,10 @@
             handleSubmit(e) {
                 e.preventDefault()
 
-                this.fail = ''
-                this.success = ''
-
                 this.form.post('/api/settings/options', {returnError: true})
                 .then(response => {
 
-                    this.success = response.data.message
+                    this.$notify({ type: 'is-success', text: response.data.message })
 
                     if(response.data.settings.lang !== this.$root.$i18n.locale) {
                         this.$router.go()
@@ -62,7 +59,7 @@
                 })
                 .catch(error => {
                     
-                    this.fail = error.response.data.message
+                    this.$notify({ type: 'is-danger', text: error.response.data.message })
                 });
             }
         },

resources/js/views/settings/Password.vue

@@ -1,5 +1,5 @@
 <template>
-    <form-wrapper :fail="fail" :success="success">
+    <form-wrapper>
         <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
             <form-field :form="form" fieldName="password" inputType="password" :label="$t('auth.forms.new_password')" />
             <form-field :form="form" fieldName="password_confirmation" inputType="password" :label="$t('auth.forms.confirm_new_password')" />
@@ -16,8 +16,6 @@
     export default {
         data(){
             return {
-                success: '',
-                fail: '',
                 form: new Form({
                     currentPassword : '',
                     password : '',
@@ -30,19 +28,18 @@
             handleSubmit(e) {
                 e.preventDefault()
 
-                this.fail = ''
-                this.success = ''
-
                 this.form.patch('/api/settings/password', {returnError: true})
                 .then(response => {
 
-                    this.success = response.data.message
+                    this.$notify({ type: 'is-success', text: response.data.message })
                 })
                 .catch(error => {
                     if( error.response.status === 400 ) {
-                        this.fail = error.response.data.message
+
+                        this.$notify({ type: 'is-danger', text: error.response.data.message })
                     }
                     else if( error.response.status !== 422 ) {
+                        
                         this.$router.push({ name: 'genericError', params: { err: error.response } });
                     }
                 });

resources/sass/app.scss

@@ -314,13 +314,16 @@ footer .field.is-grouped {
   justify-content: center;
 }
 
-.notification.is-fixed {
+.notification {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
   border-radius: 0;
-  padding: 0.5rem 2.5rem 0.5rem 1.5rem;
+  padding: 0.75rem 1.5rem;
+}
+
+.notification .notification-title {
+  // Style for title line
+}
+
+.notification .notification-content {
   text-align: center;
 }