refactor: Use Vue-Toasted Instead of Vue-Bootstrap-Toasts

frontend/package.json

@@ -59,7 +59,6 @@
     "sweetalert2": "^9.5.4",
     "vee-validate": "^3.4.5",
     "vue": "^2.6.11",
-    "vue-bootstrap-toasts": "^1.0.7",
     "vue-bootstrap-typeahead": "^0.2.6",
     "vue-chartjs": "^3.5.0",
     "vue-cli-plugin-i18n": "^1.0.1",
@@ -75,6 +74,7 @@
     "vue-qrcode": "^0.3.5",
     "vue-qrcode-reader": "^2.3.16",
     "vue-router": "^3.0.6",
+    "vue-toasted": "^1.1.28",
     "vue2-transitions": "^0.2.3",
     "vuex": "^3.6.0",
     "vuex-persistedstate": "^4.0.0-beta.3"

frontend/src/App.vue

@@ -3,7 +3,6 @@
     <div class="">
       <particles-bg type="custom" :config="config" :bg="true" />
       <component :is="$route.meta.requiresAuth ? 'DashboardLayout' : 'AuthLayoutGDD'" />
-      <Toasts></Toasts>
     </div>
   </div>
 </template>

frontend/src/plugins/dashboard-plugin.js

@@ -5,7 +5,7 @@ import SideBar from '@/components/SidebarPlugin'
 
 import PortalVue from 'portal-vue'
 
-import VueBootstrapToasts from 'vue-bootstrap-toasts'
+import Toasted from 'vue-toasted'
 
 // vue-bootstrap
 import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
@@ -33,11 +33,15 @@ export default {
     Vue.use(PortalVue)
     Vue.use(BootstrapVue)
     Vue.use(IconsPlugin)
-    Vue.use(VueBootstrapToasts)
     Vue.use(VueMoment)
     Vue.use(VueQrcodeReader)
     Vue.use(VueQrcode)
     Vue.use(FlatPickr)
     Vue.use(Loading)
+    Vue.use(Toasted, {
+      position: 'top-center',
+      duration: 2500,
+      fullWidth: true,
+    })
   },
 }

frontend/src/views/Pages/Login.spec.js

@@ -49,7 +49,7 @@ describe('Login', () => {
     $router: {
       push: mockRouterPush,
     },
-    $toast: {
+    $toasted: {
       error: toastErrorMock,
     },
   }

frontend/src/views/Pages/Login.vue

@@ -91,7 +91,7 @@ export default {
         loader.hide()
       } else {
         loader.hide()
-        this.$toast.error(this.$t('error.no-account'))
+        this.$toasted.error(this.$t('error.no-account'))
       }
     },
   },

frontend/src/views/Pages/ResetPassword.spec.js

@@ -53,7 +53,7 @@ describe('ResetPassword', () => {
         optin: '123',
       },
     },
-    $toast: {
+    $toasted: {
       error: toasterMock,
     },
     $router: {

frontend/src/views/Pages/ResetPassword.vue

@@ -80,7 +80,7 @@ export default {
           */
         this.$router.push('/thx/reset')
       } else {
-        this.$toast.error(result.result.message)
+        this.$toasted.error(result.result.message)
       }
     },
     async authenticate() {
@@ -94,7 +94,7 @@ export default {
         this.sessionId = result.result.data.session_id
         this.email = result.result.data.user.email
       } else {
-        this.$toast.error(result.result.message)
+        this.$toasted.error(result.result.message)
       }
       loader.hide()
       this.pending = false

frontend/src/views/Pages/UserProfile/UserCard_FormUserData.spec.js

@@ -32,7 +32,7 @@ describe('UserCard_FormUsername', () => {
       },
       commit: storeCommitMock,
     },
-    $toast: {
+    $toasted: {
       success: toastSuccessMock,
       error: toastErrorMock,
     },

frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue

@@ -135,9 +135,9 @@ export default {
         this.$store.commit('lastName', this.form.lastName)
         this.$store.commit('description', this.form.description)
         this.showUserData = true
-        this.$toast.success(this.$t('site.profil.user-data.change-success'))
+        this.$toasted.success(this.$t('site.profil.user-data.change-success'))
       } else {
-        this.$toast.error(result.result.message)
+        this.$toasted.error(result.result.message)
       }
     },
   },

frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js

@@ -26,7 +26,7 @@ describe('UserCardFormUserPasswort', () => {
         email: 'user@example.org',
       },
     },
-    $toast: {
+    $toasted: {
       success: toastSuccessMock,
       error: toastErrorMock,
     },

frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue

@@ -83,10 +83,10 @@ export default {
         this.form.newPassword.password,
       )
       if (result.success) {
-        this.$toast.success(this.$t('site.thx.reset'))
+        this.$toasted.success(this.$t('site.thx.reset'))
         this.cancelEdit()
       } else {
-        this.$toast.error(result.result.message)
+        this.$toasted.error(result.result.message)
       }
     },
   },

frontend/src/views/Pages/UserProfile/UserCard_FormUsername.spec.js

@@ -38,7 +38,7 @@ describe('UserCard_FormUsername', () => {
       },
       commit: storeCommitMock,
     },
-    $toast: {
+    $toasted: {
       success: toastSuccessMock,
       error: toastErrorMock,
     },

frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue

@@ -95,9 +95,9 @@ export default {
         this.$store.commit('username', this.form.username)
         this.username = this.form.username
         this.showUsername = true
-        this.$toast.success(this.$t('site.profil.user-data.change-success'))
+        this.$toasted.success(this.$t('site.profil.user-data.change-success'))
       } else {
-        this.$toast.error(result.result.message)
+        this.$toasted.error(result.result.message)
         this.showUsername = true
         this.username = this.$store.state.username
         this.form.username = this.$store.state.username

frontend/yarn.lock

@@ -13268,11 +13268,6 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
-vue-bootstrap-toasts@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/vue-bootstrap-toasts/-/vue-bootstrap-toasts-1.0.7.tgz#111c38855941e8eb0538e21f41c173e2af67dd53"
-  integrity sha512-JhurJOAwdNcINQ/QlT701sx0r447YTGpvtxtmZNC9pwDvEqp2I0Pyv15jS4neWwYHkA1gXB42nBsDRcWcj1hlg==
-
 vue-bootstrap-typeahead@^0.2.6:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/vue-bootstrap-typeahead/-/vue-bootstrap-typeahead-0.2.6.tgz#8c1999a00bf4bf9fc906bae3a462482482cbc297"
@@ -13475,6 +13470,11 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue-toasted@^1.1.28:
+  version "1.1.28"
+  resolved "https://registry.yarnpkg.com/vue-toasted/-/vue-toasted-1.1.28.tgz#dbabb83acc89f7a9e8765815e491d79f0dc65c26"
+  integrity sha512-UUzr5LX51UbbiROSGZ49GOgSzFxaMHK6L00JV8fir/CYNJCpIIvNZ5YmS4Qc8Y2+Z/4VVYRpeQL2UO0G800Raw==
+
 vue2-transitions@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/vue2-transitions/-/vue2-transitions-0.2.3.tgz#69c9d75b1db05f231b80980c03459d68490ba27d"