From 06c8dd0a108b15879405ef0c1e18427415d9fe35 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Fri, 25 Sep 2020 23:36:11 +0200
Subject: [PATCH] Replace custom notifications with vue-notification package

---
 package-lock.json                         |  5 +++
 package.json                              |  1 +
 resources/js/app.js                       | 19 +++++----
 resources/js/components/App.vue           |  1 +
 resources/js/components/FormWrapper.vue   | 25 ------------
 resources/js/components/Modal.vue         |  4 ++
 resources/js/components/Notification.vue  | 50 -----------------------
 resources/js/components/QuickUploader.vue | 18 ++------
 resources/js/components/index.js          |  2 -
 resources/js/routes.js                    |  2 +-
 resources/js/views/settings/Account.vue   | 11 ++---
 resources/js/views/settings/Index.vue     | 11 ++++-
 resources/js/views/settings/Options.vue   | 13 +++---
 resources/js/views/settings/Password.vue  | 13 +++---
 resources/sass/app.scss                   | 15 ++++---
 15 files changed, 59 insertions(+), 131 deletions(-)
 delete mode 100644 resources/js/components/Notification.vue

diff --git a/package-lock.json b/package-lock.json
index 31892797..4560edd2 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 0e3311c6..9c13ff8e 100644
--- a/package.json
+++ b/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",
diff --git a/resources/js/app.js b/resources/js/app.js
index 4b3a6fa7..f434af8f 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,14 +1,17 @@
-import Vue          from 'vue'
-import router       from './routes'
-import api          from './api'
-import i18n         from './langs/i18n'
-import FontAwesome  from './packages/fontawesome'
-import Clipboard    from './packages/clipboard'
-import QrcodeReader from './packages/qrcodeReader'
-import App          from './components/App'
+import Vue              from 'vue'
+import router           from './routes'
+import api              from './api'
+import i18n             from './langs/i18n'
+import FontAwesome      from './packages/fontawesome'
+import Clipboard        from './packages/clipboard'
+import QrcodeReader     from './packages/qrcodeReader'
+import Notifications    from 'vue-notification'
+import App              from './components/App'
 
 import './components'
 
+Vue.use(Notifications)
+
 const app = new Vue({
     el: '#app',
     data: {
diff --git a/resources/js/components/App.vue b/resources/js/components/App.vue
index 47ac18cd..4607861d 100644
--- a/resources/js/components/App.vue
+++ b/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>
diff --git a/resources/js/components/FormWrapper.vue b/resources/js/components/FormWrapper.vue
index 69d2e803..cdc001a0 100644
--- a/resources/js/components/FormWrapper.vue
+++ b/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>
\ No newline at end of file
diff --git a/resources/js/components/Modal.vue b/resources/js/components/Modal.vue
index ab31a3f0..9af992ba 100644
--- a/resources/js/components/Modal.vue
+++ b/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')
             }
         }
diff --git a/resources/js/components/Notification.vue b/resources/js/components/Notification.vue
deleted file mode 100644
index 08488781..00000000
--- a/resources/js/components/Notification.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/resources/js/components/QuickUploader.vue b/resources/js/components/QuickUploader.vue
index 291026da..695a74b0 100644
--- a/resources/js/components/QuickUploader.vue
+++ b/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 ) {
diff --git a/resources/js/components/index.js b/resources/js/components/index.js
index e778ae85..173d43de 100644
--- a/resources/js/components/index.js
+++ b/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)
diff --git a/resources/js/routes.js b/resources/js/routes.js
index fcff5c19..e37937aa 100644
--- a/resources/js/routes.js
+++ b/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({
diff --git a/resources/js/views/settings/Account.vue b/resources/js/views/settings/Account.vue
index 2ebcd641..06c3e9db 100644
--- a/resources/js/views/settings/Account.vue
+++ b/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 } });
diff --git a/resources/js/views/settings/Index.vue b/resources/js/views/settings/Index.vue
index 0da694b3..022c5bfe 100644
--- a/resources/js/views/settings/Index.vue
+++ b/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' })
+                }
             }
         }
     };
diff --git a/resources/js/views/settings/Options.vue b/resources/js/views/settings/Options.vue
index 1c0952ef..118a78e6 100644
--- a/resources/js/views/settings/Options.vue
+++ b/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: '',
-                fail: '',
+                // success: '',
+                // 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 })
                 });
             }
         },
diff --git a/resources/js/views/settings/Password.vue b/resources/js/views/settings/Password.vue
index eb8106b0..0ce83b9c 100644
--- a/resources/js/views/settings/Password.vue
+++ b/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 } });
                     }
                 });
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index b4932389..150ffb05 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -314,13 +314,16 @@ footer .field.is-grouped {
   justify-content: center;
 }
 
-.notification.is-fixed {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
+.notification {
   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;
 }