From ce457ffc0c51014292d873a818155c2889a2306c Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 15 Feb 2022 11:11:34 +0100
Subject: [PATCH 01/21] Toaster titles

---
 frontend/src/locales/de.json | 1 +
 frontend/src/locales/en.json | 1 +
 2 files changed, 2 insertions(+)

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index fbd9c8e91..ac2b22fc7 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -208,6 +208,7 @@
       "title": "Danke!"
     }
   },
+  "success": "Erfolg",
   "transaction": {
     "gdd-text": "Gradido Transaktionen",
     "gdt-text": "GradidoTransform Transaktionen",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 534aa25e8..a3fbe2ac7 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -208,6 +208,7 @@
       "title": "Thank you!"
     }
   },
+  "success": "Success",
   "transaction": {
     "gdd-text": "Gradido Transactions",
     "gdt-text": "GradidoTransform Transactions",

From df63d76a8619ce939a9a2c6ec1c3ae92f7606529 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 15 Feb 2022 11:18:50 +0100
Subject: [PATCH 02/21] global mixin for toasting error and success

---
 frontend/src/main.js           |  3 +++
 frontend/src/mixins/toaster.js | 24 ++++++++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 frontend/src/mixins/toaster.js

diff --git a/frontend/src/main.js b/frontend/src/main.js
index 0b47a7564..25e417359 100755
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -3,6 +3,7 @@ import DashboardPlugin from './plugins/dashboard-plugin'
 import App from './App.vue'
 import i18n from './i18n.js'
 import { loadAllRules } from './validation-rules'
+import { toasters } from './mixins/toaster'
 
 import 'regenerator-runtime'
 
@@ -18,6 +19,8 @@ import { apolloProvider } from './plugins/apolloProvider'
 Vue.use(DashboardPlugin)
 Vue.config.productionTip = false
 
+Vue.mixin(toasters)
+
 Vue.toasted.register(
   'error',
   (payload) => {
diff --git a/frontend/src/mixins/toaster.js b/frontend/src/mixins/toaster.js
new file mode 100644
index 000000000..ec1bcfc0a
--- /dev/null
+++ b/frontend/src/mixins/toaster.js
@@ -0,0 +1,24 @@
+export const toasters = {
+  methods: {
+    toastSuccess(message) {
+      this.toast(message, {
+        title: this.$t('success'),
+        variant: 'danger',
+      })
+    },
+    toastError(message) {
+      this.toast(message, {
+        title: this.$t('error.error'),
+        variant: 'success',
+      })
+    },
+    toast(message, options) {
+      this.$bvToast.toast(message, {
+        autoHideDelay: 5000,
+        appendToast: false,
+        solid: true,
+        ...options,
+      })
+    },
+  },
+}

From b9bbcb299821bf5a61864a37dbf7ef44408e6cbb Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 15 Feb 2022 11:52:07 +0100
Subject: [PATCH 03/21] add custom style classes to toaster

---
 frontend/src/App.vue           |  9 +++++++++
 frontend/src/mixins/toaster.js | 10 +++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 25b0eadc5..23d637de4 100755
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -41,6 +41,15 @@ export default {
 }
 </script>
 <style>
+.gdd-toaster-title {
+  color: #ffffff !important;
+}
+.gdd-toaster-body {
+  color: #ffffff !important;
+}
+.gdd-toaster {
+  color: #ffffff;
+}
 .btn-primary pim {
   background-color: #5a7b02;
   border-color: #5e72e4;
diff --git a/frontend/src/mixins/toaster.js b/frontend/src/mixins/toaster.js
index ec1bcfc0a..bc1e720dd 100644
--- a/frontend/src/mixins/toaster.js
+++ b/frontend/src/mixins/toaster.js
@@ -3,20 +3,24 @@ export const toasters = {
     toastSuccess(message) {
       this.toast(message, {
         title: this.$t('success'),
-        variant: 'danger',
+        variant: 'success',
       })
     },
     toastError(message) {
       this.toast(message, {
         title: this.$t('error.error'),
-        variant: 'success',
+        variant: 'danger',
       })
     },
     toast(message, options) {
       this.$bvToast.toast(message, {
-        autoHideDelay: 5000,
+        autoHideDelay: 50000,
         appendToast: false,
         solid: true,
+        toaster: 'b-toaster-top-right',
+        headerClass: 'gdd-toaster-title',
+        bodyClass: 'gdd-toaster-body',
+        toastClass: 'gdd-toaster',
         ...options,
       })
     },

From fcd89dd139aafaecdaaf39ab6da4fa01ead757b6 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 16 Feb 2022 07:38:41 +0100
Subject: [PATCH 04/21] use bv toaster on login and test it. Hack console warn
 to filter portal vue warnings

---
 frontend/src/mixins/getCommunityInfo.js |  2 +-
 frontend/src/mixins/toaster.js          |  2 +-
 frontend/src/views/Pages/Login.spec.js  | 14 ++++++--------
 frontend/src/views/Pages/Login.vue      |  2 +-
 frontend/test/testSetup.js              | 13 +++++++++++++
 5 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/frontend/src/mixins/getCommunityInfo.js b/frontend/src/mixins/getCommunityInfo.js
index 3ca1c74cc..c6c021f9c 100644
--- a/frontend/src/mixins/getCommunityInfo.js
+++ b/frontend/src/mixins/getCommunityInfo.js
@@ -13,7 +13,7 @@ export const getCommunityInfoMixin = {
             return result.data.getCommunityInfo
           })
           .catch((error) => {
-            this.$toasted.global.error(error.message)
+            this.toastError(error.message)
           })
       }
     },
diff --git a/frontend/src/mixins/toaster.js b/frontend/src/mixins/toaster.js
index bc1e720dd..28a61365c 100644
--- a/frontend/src/mixins/toaster.js
+++ b/frontend/src/mixins/toaster.js
@@ -14,7 +14,7 @@ export const toasters = {
     },
     toast(message, options) {
       this.$bvToast.toast(message, {
-        autoHideDelay: 50000,
+        autoHideDelay: 5000,
         appendToast: false,
         solid: true,
         toaster: 'b-toaster-top-right',
diff --git a/frontend/src/views/Pages/Login.spec.js b/frontend/src/views/Pages/Login.spec.js
index ccca848ba..464879da8 100644
--- a/frontend/src/views/Pages/Login.spec.js
+++ b/frontend/src/views/Pages/Login.spec.js
@@ -2,6 +2,8 @@ import { RouterLinkStub, mount } from '@vue/test-utils'
 import flushPromises from 'flush-promises'
 import Login from './Login'
 
+import { toasters } from '../../mixins/toaster'
+
 const localVue = global.localVue
 
 const apolloQueryMock = jest.fn().mockResolvedValue({
@@ -15,7 +17,6 @@ const apolloQueryMock = jest.fn().mockResolvedValue({
   },
 })
 
-const toastErrorMock = jest.fn()
 const mockStoreDispach = jest.fn()
 const mockStoreCommit = jest.fn()
 const mockRouterPush = jest.fn()
@@ -26,6 +27,8 @@ const spinnerMock = jest.fn(() => {
   }
 })
 
+const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
+
 describe('Login', () => {
   let wrapper
 
@@ -51,11 +54,6 @@ describe('Login', () => {
     $router: {
       push: mockRouterPush,
     },
-    $toasted: {
-      global: {
-        error: toastErrorMock,
-      },
-    },
     $apollo: {
       query: apolloQueryMock,
     },
@@ -96,7 +94,7 @@ describe('Login', () => {
       })
 
       it('toasts an error message', () => {
-        expect(toastErrorMock).toBeCalledWith('Failed to get communities')
+        expect(toastErrorSpy).toBeCalledWith('Failed to get communities')
       })
     })
 
@@ -249,7 +247,7 @@ describe('Login', () => {
           })
 
           it('toasts an error message', () => {
-            expect(toastErrorMock).toBeCalledWith('error.no-account')
+            expect(toastErrorSpy).toBeCalledWith('error.no-account')
           })
 
           describe('login fails with "User email not validated"', () => {
diff --git a/frontend/src/views/Pages/Login.vue b/frontend/src/views/Pages/Login.vue
index 4d2b75d2a..42bf7cc01 100755
--- a/frontend/src/views/Pages/Login.vue
+++ b/frontend/src/views/Pages/Login.vue
@@ -105,7 +105,7 @@ export default {
           loader.hide()
         })
         .catch((error) => {
-          this.$toasted.global.error(this.$t('error.no-account'))
+          this.toastError(this.$t('error.no-account'))
           if (error.message.includes('User email not validated')) {
             this.$router.push('/thx/login')
           } else if (error.message.includes('User has no password set yet')) {
diff --git a/frontend/test/testSetup.js b/frontend/test/testSetup.js
index cb50ccdb6..2bd15f43a 100644
--- a/frontend/test/testSetup.js
+++ b/frontend/test/testSetup.js
@@ -17,6 +17,8 @@ import { focus } from 'vue-focus'
 
 import { loadAllRules } from '../src/validation-rules'
 
+import { toasters } from '../src/mixins/toaster'
+
 Object.keys(rules).forEach((rule) => {
   extend(rule, {
     ...rules[rule], // copies rule configuration
@@ -47,6 +49,17 @@ global.localVue.component('validation-observer', ValidationObserver)
 // global.localVue.directive('click-outside', clickOutside)
 global.localVue.directive('focus', focus)
 
+global.localVue.mixin(toasters)
+
+// Filter the warnings for portal vue
+const consoleWarn = global.console.warn
+// eslint-disable-next-line no-console
+delete console.warn
+// eslint-disable-next-line no-console
+console.warn = (m) => {
+  if (!m.match(/^\[portal-vue\]: Target .+ already exists$/)) consoleWarn(m)
+}
+
 // throw errors for vue warnings to force the programmers to take care about warnings
 Vue.config.warnHandler = (w) => {
   throw new Error(w)

From abfae25c7b30571030c8f47602d040f4476d081f Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 16 Feb 2022 07:43:09 +0100
Subject: [PATCH 05/21] bv toaster in Dashboard Layout

---
 .../src/views/Layout/DashboardLayout_gdd.spec.js     | 12 +++++-------
 frontend/src/views/Layout/DashboardLayout_gdd.vue    |  2 +-
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
index 4ea2e86b2..cdb71e4e1 100644
--- a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
@@ -2,6 +2,8 @@ import { mount, RouterLinkStub } from '@vue/test-utils'
 import flushPromises from 'flush-promises'
 import DashboardLayoutGdd from './DashboardLayout_gdd'
 
+import { toasters } from '../../mixins/toaster'
+
 jest.useFakeTimers()
 
 jest.setTimeout(30000)
@@ -16,7 +18,8 @@ const apolloMock = jest.fn().mockResolvedValue({
     logout: 'success',
   },
 })
-const toasterMock = jest.fn()
+
+const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
 
 describe('DashboardLayoutGdd', () => {
   let wrapper
@@ -38,11 +41,6 @@ describe('DashboardLayoutGdd', () => {
         path: '/overview',
       },
     },
-    $toasted: {
-      global: {
-        error: toasterMock,
-      },
-    },
     $apollo: {
       query: apolloMock,
     },
@@ -220,7 +218,7 @@ describe('DashboardLayoutGdd', () => {
         })
 
         it('calls $toasted.global.error method', () => {
-          expect(toasterMock).toBeCalledWith('Ouch!')
+          expect(toastErrorSpy).toBeCalledWith('Ouch!')
         })
       })
 
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 5e566d3f8..8f2f17a5d 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -102,7 +102,7 @@ export default {
         .catch((error) => {
           this.pending = true
           this.transactionCount = -1
-          this.$toasted.global.error(error.message)
+          this.toastError(error.message)
           // what to do when loading balance fails?
         })
     },

From 66b9a822b2965075b1f1c87b868c3145cdaf26ca Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 16 Feb 2022 07:47:47 +0100
Subject: [PATCH 06/21] use bv toaster

---
 .../src/views/Layout/DashboardLayout_gdd.spec.js     |  2 +-
 .../Pages/AccountOverview/GdtTransactionList.spec.js | 12 +++++-------
 .../Pages/AccountOverview/GdtTransactionList.vue     |  2 +-
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
index cdb71e4e1..e779f5928 100644
--- a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
@@ -217,7 +217,7 @@ describe('DashboardLayoutGdd', () => {
           expect(wrapper.vm.pending).toBeTruthy()
         })
 
-        it('calls $toasted.global.error method', () => {
+        it('toasts the error message', () => {
           expect(toastErrorSpy).toBeCalledWith('Ouch!')
         })
       })
diff --git a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
index a03122527..16c9de309 100644
--- a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
+++ b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
@@ -2,6 +2,8 @@ import { mount } from '@vue/test-utils'
 import { GdtEntryType } from '../../../graphql/enums'
 import GdtTransactionList from './GdtTransactionList'
 
+import { toasters } from '../../../mixins/toaster'
+
 const localVue = global.localVue
 
 const apolloMock = jest.fn().mockResolvedValue({
@@ -13,9 +15,10 @@ const apolloMock = jest.fn().mockResolvedValue({
   },
 })
 
-const toastErrorMock = jest.fn()
 const windowScrollToMock = jest.fn()
 
+const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
+
 window.scrollTo = windowScrollToMock
 
 const state = {
@@ -36,11 +39,6 @@ describe('GdtTransactionList ', () => {
     $t: jest.fn((t) => t),
     $n: jest.fn((n) => n),
     $d: jest.fn((d) => d),
-    $toasted: {
-      global: {
-        error: toastErrorMock,
-      },
-    },
     $apollo: {
       query: apolloMock,
     },
@@ -152,7 +150,7 @@ describe('GdtTransactionList ', () => {
       })
 
       it('toasts an error message', () => {
-        expect(toastErrorMock).toBeCalledWith('Ouch!')
+        expect(toastErrorSpy).toBeCalledWith('Ouch!')
       })
     })
 
diff --git a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
index 9c8b51f5e..953a0e5e0 100644
--- a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
@@ -71,7 +71,7 @@ export default {
           window.scrollTo(0, 0)
         })
         .catch((error) => {
-          this.$toasted.global.error(error.message)
+          this.toastError(error.message)
         })
     },
   },

From 5aee9c3abec9709cc2958815e3d7d694a329dc6a Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 16 Feb 2022 07:53:03 +0100
Subject: [PATCH 07/21] adjust test to bv toast

---
 frontend/src/views/Pages/Register.spec.js | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/Pages/Register.spec.js b/frontend/src/views/Pages/Register.spec.js
index 1a966e5b6..7065f4638 100644
--- a/frontend/src/views/Pages/Register.spec.js
+++ b/frontend/src/views/Pages/Register.spec.js
@@ -1,8 +1,9 @@
 import { mount, RouterLinkStub } from '@vue/test-utils'
 import flushPromises from 'flush-promises'
-
 import Register from './Register'
 
+import { toasters } from '../../mixins/toaster'
+
 const localVue = global.localVue
 
 const apolloQueryMock = jest.fn().mockResolvedValue({
@@ -16,11 +17,12 @@ const apolloQueryMock = jest.fn().mockResolvedValue({
   },
 })
 
-const toastErrorMock = jest.fn()
 const mockStoreCommit = jest.fn()
 const registerUserMutationMock = jest.fn()
 const routerPushMock = jest.fn()
 
+const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
+
 describe('Register', () => {
   let wrapper
 
@@ -48,11 +50,6 @@ describe('Register', () => {
         publisherId: 12345,
       },
     },
-    $toasted: {
-      global: {
-        error: toastErrorMock,
-      },
-    },
   }
 
   const stubs = {
@@ -96,7 +93,7 @@ describe('Register', () => {
       })
 
       it('toasts an error message', () => {
-        expect(toastErrorMock).toBeCalledWith('Failed to get communities')
+        expect(toastErrorSpy).toBeCalledWith('Failed to get communities')
       })
     })
 

From b8edb6755819ca90ff69f2ce61b340b1b9da3e7d Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 16 Feb 2022 07:55:25 +0100
Subject: [PATCH 08/21] adjust test to bv toast

---
 frontend/src/views/Pages/RegisterCommunity.spec.js | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/Pages/RegisterCommunity.spec.js b/frontend/src/views/Pages/RegisterCommunity.spec.js
index 6d6574881..f29ea5386 100644
--- a/frontend/src/views/Pages/RegisterCommunity.spec.js
+++ b/frontend/src/views/Pages/RegisterCommunity.spec.js
@@ -1,6 +1,8 @@
 import { mount, RouterLinkStub } from '@vue/test-utils'
 import RegisterCommunity from './RegisterCommunity'
 
+import { toasters } from '../../mixins/toaster'
+
 const localVue = global.localVue
 
 const apolloQueryMock = jest.fn().mockResolvedValue({
@@ -13,9 +15,11 @@ const apolloQueryMock = jest.fn().mockResolvedValue({
     },
   },
 })
-const toastErrorMock = jest.fn()
+
 const mockStoreCommit = jest.fn()
 
+const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
+
 describe('RegisterCommunity', () => {
   let wrapper
 
@@ -36,11 +40,6 @@ describe('RegisterCommunity', () => {
         },
       },
     },
-    $toasted: {
-      global: {
-        error: toastErrorMock,
-      },
-    },
   }
 
   const stubs = {
@@ -78,7 +77,7 @@ describe('RegisterCommunity', () => {
       })
 
       it('toasts an error message', () => {
-        expect(toastErrorMock).toBeCalledWith('Failed to get communities')
+        expect(toastErrorSpy).toBeCalledWith('Failed to get communities')
       })
     })
 

From dd5aa62e5891c7ebbdf9e24107d4a0a1c7d5a4f4 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 16 Feb 2022 07:58:11 +0100
Subject: [PATCH 09/21] change to bv toaster

---
 .../views/Pages/RegisterSelectCommunity.spec.js    | 14 ++++++--------
 .../src/views/Pages/RegisterSelectCommunity.vue    |  2 +-
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/frontend/src/views/Pages/RegisterSelectCommunity.spec.js b/frontend/src/views/Pages/RegisterSelectCommunity.spec.js
index f4e980cd0..540f448cb 100644
--- a/frontend/src/views/Pages/RegisterSelectCommunity.spec.js
+++ b/frontend/src/views/Pages/RegisterSelectCommunity.spec.js
@@ -2,6 +2,8 @@ import { mount, RouterLinkStub } from '@vue/test-utils'
 import { communities, communityInfo } from '../../graphql/queries'
 import RegisterSelectCommunity from './RegisterSelectCommunity'
 
+import { toasters } from '../../mixins/toaster'
+
 const localVue = global.localVue
 
 const spinnerHideMock = jest.fn()
@@ -12,6 +14,8 @@ const spinnerMock = jest.fn(() => {
   }
 })
 
+const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
+
 const apolloQueryMock = jest
   .fn()
   .mockResolvedValueOnce({
@@ -52,7 +56,6 @@ const apolloQueryMock = jest
     },
   })
 
-const toasterMock = jest.fn()
 const mockStoreCommit = jest.fn()
 
 describe('RegisterSelectCommunity', () => {
@@ -78,11 +81,6 @@ describe('RegisterSelectCommunity', () => {
     $loading: {
       show: spinnerMock,
     },
-    $toasted: {
-      global: {
-        error: toasterMock,
-      },
-    },
   }
 
   const stubs = {
@@ -129,7 +127,7 @@ describe('RegisterSelectCommunity', () => {
       })
 
       it('toasts an error message', () => {
-        expect(toasterMock).toBeCalledWith('Failed to get communities')
+        expect(toastErrorSpy).toBeCalledWith('Failed to get communities')
       })
     })
 
@@ -208,7 +206,7 @@ describe('RegisterSelectCommunity', () => {
         })
 
         it('toast an error', () => {
-          expect(toasterMock).toBeCalledWith('Wrong thing')
+          expect(toastErrorSpy).toBeCalledWith('Wrong thing')
         })
 
         it('hides the spinner', () => {
diff --git a/frontend/src/views/Pages/RegisterSelectCommunity.vue b/frontend/src/views/Pages/RegisterSelectCommunity.vue
index ab46da03f..28b89e95f 100644
--- a/frontend/src/views/Pages/RegisterSelectCommunity.vue
+++ b/frontend/src/views/Pages/RegisterSelectCommunity.vue
@@ -76,7 +76,7 @@ export default {
           )
         })
         .catch((error) => {
-          this.$toasted.global.error(error.message)
+          this.toastError(error.message)
         })
       loader.hide()
       this.pending = false

From 72c5940e846fb5309d98b7b6f36a3344aba38937 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 16 Feb 2022 08:00:41 +0100
Subject: [PATCH 10/21] change to bv toast

---
 frontend/src/views/Pages/ResetPassword.spec.js | 16 +++++++---------
 frontend/src/views/Pages/ResetPassword.vue     |  2 +-
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/frontend/src/views/Pages/ResetPassword.spec.js b/frontend/src/views/Pages/ResetPassword.spec.js
index da8b4bc4f..eb04d2c05 100644
--- a/frontend/src/views/Pages/ResetPassword.spec.js
+++ b/frontend/src/views/Pages/ResetPassword.spec.js
@@ -2,15 +2,18 @@ import { mount, RouterLinkStub } from '@vue/test-utils'
 import ResetPassword from './ResetPassword'
 import flushPromises from 'flush-promises'
 
+import { toasters } from '../../mixins/toaster'
+
 // validation is tested in src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js
 
 const localVue = global.localVue
 
 const apolloMutationMock = jest.fn()
 
-const toasterMock = jest.fn()
 const routerPushMock = jest.fn()
 
+const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
+
 const stubs = {
   RouterLink: RouterLinkStub,
 }
@@ -29,11 +32,6 @@ const mocks = {
       includes: jest.fn((t) => t === mocks.$route.path.mock),
     },
   },
-  $toasted: {
-    global: {
-      error: toasterMock,
-    },
-  },
   $router: {
     push: routerPushMock,
   },
@@ -65,7 +63,7 @@ describe('ResetPassword', () => {
       })
 
       it.skip('toasts an error when no valid optin is given', () => {
-        expect(toasterMock).toHaveBeenCalledWith('error')
+        expect(toastErrorSpy).toHaveBeenCalledWith('error')
       })
 
       it.skip('has a message suggesting to contact the support', () => {
@@ -157,7 +155,7 @@ describe('ResetPassword', () => {
           })
 
           it('toasts an error message', () => {
-            expect(toasterMock).toHaveBeenCalledWith('...Code is older than 10 minutes')
+            expect(toastErrorSpy).toHaveBeenCalledWith('...Code is older than 10 minutes')
           })
 
           it('router pushes to /password/reset', () => {
@@ -174,7 +172,7 @@ describe('ResetPassword', () => {
           })
 
           it('toasts an error message', () => {
-            expect(toasterMock).toHaveBeenCalledWith('Error')
+            expect(toastErrorSpy).toHaveBeenCalledWith('Error')
           })
         })
 
diff --git a/frontend/src/views/Pages/ResetPassword.vue b/frontend/src/views/Pages/ResetPassword.vue
index 0023c3838..e4adeda9f 100644
--- a/frontend/src/views/Pages/ResetPassword.vue
+++ b/frontend/src/views/Pages/ResetPassword.vue
@@ -99,7 +99,7 @@ export default {
           }
         })
         .catch((error) => {
-          this.$toasted.global.error(error.message)
+          this.toastError(error.message)
           if (error.message.includes('Code is older than 10 minutes'))
             this.$router.push('/password/reset')
         })

From fec442ba5104417a6e5a508f667938a9b39cfbbe Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 16 Feb 2022 08:05:35 +0100
Subject: [PATCH 11/21] switch to bv toast

---
 .../UserCard_CoinAnimation.spec.js            | 19 ++++++++-----------
 .../UserProfile/UserCard_CoinAnimation.vue    |  4 ++--
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.spec.js b/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.spec.js
index 64455a3e8..e2824308c 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.spec.js
+++ b/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.spec.js
@@ -2,14 +2,17 @@ import { mount } from '@vue/test-utils'
 import UserCardCoinAnimation from './UserCard_CoinAnimation'
 import { updateUserInfos } from '../../../graphql/mutations'
 
+import { toasters } from '../../../mixins/toaster'
+
 const localVue = global.localVue
 
 const mockAPIcall = jest.fn()
 
-const toastErrorMock = jest.fn()
-const toastSuccessMock = jest.fn()
 const storeCommitMock = jest.fn()
 
+const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
+const toastSuccessSpy = jest.spyOn(toasters.methods, 'toastSuccess')
+
 describe('UserCard_CoinAnimation', () => {
   let wrapper
 
@@ -22,12 +25,6 @@ describe('UserCard_CoinAnimation', () => {
       },
       commit: storeCommitMock,
     },
-    $toasted: {
-      success: toastSuccessMock,
-      global: {
-        error: toastErrorMock,
-      },
-    },
     $apollo: {
       mutate: mockAPIcall,
     },
@@ -78,7 +75,7 @@ describe('UserCard_CoinAnimation', () => {
       })
 
       it('toasts a success message', () => {
-        expect(toastSuccessMock).toBeCalledWith('settings.coinanimation.True')
+        expect(toastSuccessSpy).toBeCalledWith('settings.coinanimation.True')
       })
     })
 
@@ -109,7 +106,7 @@ describe('UserCard_CoinAnimation', () => {
       })
 
       it('toasts a success message', () => {
-        expect(toastSuccessMock).toBeCalledWith('settings.coinanimation.False')
+        expect(toastSuccessSpy).toBeCalledWith('settings.coinanimation.False')
       })
     })
 
@@ -126,7 +123,7 @@ describe('UserCard_CoinAnimation', () => {
       })
 
       it('toasts an error message', () => {
-        expect(toastErrorMock).toBeCalledWith('Ouch')
+        expect(toastErrorSpy).toBeCalledWith('Ouch')
       })
     })
   })
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.vue b/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.vue
index 99d46ae9b..8f68224a9 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.vue
@@ -50,7 +50,7 @@ export default {
         })
         .then(() => {
           this.$store.commit('coinanimation', this.CoinAnimationStatus)
-          this.$toasted.success(
+          this.toastSuccess(
             this.CoinAnimationStatus
               ? this.$t('settings.coinanimation.True')
               : this.$t('settings.coinanimation.False'),
@@ -58,7 +58,7 @@ export default {
         })
         .catch((error) => {
           this.CoinAnimationStatus = this.$store.state.coinanimation
-          this.$toasted.global.error(error.message)
+          this.toastError(error.message)
         })
     },
   },

From cb0edbd46e26e6f5fa484eb7b5f19b83e52bf629 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 16 Feb 2022 08:08:23 +0100
Subject: [PATCH 12/21] use bv toast

---
 .../UserProfile/UserCard_FormUserData.spec.js   | 17 +++++++----------
 .../Pages/UserProfile/UserCard_FormUserData.vue |  4 ++--
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.spec.js b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.spec.js
index 7b83f405b..11807614c 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.spec.js
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.spec.js
@@ -2,14 +2,17 @@ import { mount } from '@vue/test-utils'
 import UserCardFormUserData from './UserCard_FormUserData'
 import flushPromises from 'flush-promises'
 
+import { toasters } from '../../../mixins/toaster'
+
 const localVue = global.localVue
 
 const mockAPIcall = jest.fn()
 
-const toastErrorMock = jest.fn()
-const toastSuccessMock = jest.fn()
 const storeCommitMock = jest.fn()
 
+const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
+const toastSuccessSpy = jest.spyOn(toasters.methods, 'toastSuccess')
+
 describe('UserCard_FormUserData', () => {
   let wrapper
 
@@ -22,12 +25,6 @@ describe('UserCard_FormUserData', () => {
       },
       commit: storeCommitMock,
     },
-    $toasted: {
-      success: toastSuccessMock,
-      global: {
-        error: toastErrorMock,
-      },
-    },
     $apollo: {
       mutate: mockAPIcall,
     },
@@ -126,7 +123,7 @@ describe('UserCard_FormUserData', () => {
         })
 
         it('toasts a success message', () => {
-          expect(toastSuccessMock).toBeCalledWith('settings.name.change-success')
+          expect(toastSuccessSpy).toBeCalledWith('settings.name.change-success')
         })
 
         it('has an edit button again', () => {
@@ -159,7 +156,7 @@ describe('UserCard_FormUserData', () => {
         })
 
         it('toasts an error message', () => {
-          expect(toastErrorMock).toBeCalledWith('Error')
+          expect(toastErrorSpy).toBeCalledWith('Error')
         })
       })
     })
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
index 7ae84eb10..33fcccaab 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
@@ -108,10 +108,10 @@ export default {
           this.$store.commit('firstName', this.form.firstName)
           this.$store.commit('lastName', this.form.lastName)
           this.showUserData = true
-          this.$toasted.success(this.$t('settings.name.change-success'))
+          this.toastSuccess(this.$t('settings.name.change-success'))
         })
         .catch((error) => {
-          this.$toasted.global.error(error.message)
+          this.toastError(error.message)
         })
     },
   },

From 051446f526a7d8a2d62f5dae47d6bde4c184da42 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 16 Feb 2022 08:11:26 +0100
Subject: [PATCH 13/21] use bv toast

---
 .../UserCard_FormUserPasswort.spec.js            | 16 ++++++----------
 .../UserProfile/UserCard_FormUserPasswort.vue    |  4 ++--
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js b/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js
index 1057f71f1..cf870f179 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js
@@ -2,25 +2,21 @@ import { mount } from '@vue/test-utils'
 import UserCardFormPasswort from './UserCard_FormUserPasswort'
 import flushPromises from 'flush-promises'
 
+import { toasters } from '../../../mixins/toaster'
+
 const localVue = global.localVue
 
 const changePasswordProfileMock = jest.fn()
 changePasswordProfileMock.mockReturnValue({ success: true })
 
-const toastSuccessMock = jest.fn()
-const toastErrorMock = jest.fn()
+const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
+const toastSuccessSpy = jest.spyOn(toasters.methods, 'toastSuccess')
 
 describe('UserCard_FormUserPasswort', () => {
   let wrapper
 
   const mocks = {
     $t: jest.fn((t) => t),
-    $toasted: {
-      success: toastSuccessMock,
-      global: {
-        error: toastErrorMock,
-      },
-    },
     $apollo: {
       mutate: changePasswordProfileMock,
     },
@@ -196,7 +192,7 @@ describe('UserCard_FormUserPasswort', () => {
           })
 
           it('toasts a success message', () => {
-            expect(toastSuccessMock).toBeCalledWith('site.thx.reset')
+            expect(toastSuccessSpy).toBeCalledWith('site.thx.reset')
           })
 
           it('cancels the edit process', () => {
@@ -217,7 +213,7 @@ describe('UserCard_FormUserPasswort', () => {
           })
 
           it('toasts an error message', () => {
-            expect(toastErrorMock).toBeCalledWith('error')
+            expect(toastErrorSpy).toBeCalledWith('error')
           })
         })
       })
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
index 5d63e9832..d1608d72e 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
@@ -89,11 +89,11 @@ export default {
           },
         })
         .then(() => {
-          this.$toasted.success(this.$t('site.thx.reset'))
+          this.toastSuccess(this.$t('site.thx.reset'))
           this.cancelEdit()
         })
         .catch((error) => {
-          this.$toasted.global.error(error.message)
+          this.toastError(error.message)
         })
     },
   },

From f67ac41389264f8028cbceb7fa769ce78e994cd4 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 16 Feb 2022 08:14:02 +0100
Subject: [PATCH 14/21] use bv toast

---
 .../Pages/UserProfile/UserCard_Language.spec.js | 17 +++++++----------
 .../Pages/UserProfile/UserCard_Language.vue     |  4 ++--
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js b/frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js
index dab5a4945..74ed9f73f 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js
+++ b/frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js
@@ -1,6 +1,8 @@
 import { mount } from '@vue/test-utils'
 import UserCardLanguage from './UserCard_Language'
 
+import { toasters } from '../../../mixins/toaster'
+
 const localVue = global.localVue
 
 const mockAPIcall = jest.fn().mockResolvedValue({
@@ -11,10 +13,11 @@ const mockAPIcall = jest.fn().mockResolvedValue({
   },
 })
 
-const toastErrorMock = jest.fn()
-const toastSuccessMock = jest.fn()
 const storeCommitMock = jest.fn()
 
+const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
+const toastSuccessSpy = jest.spyOn(toasters.methods, 'toastSuccess')
+
 describe('UserCard_Language', () => {
   let wrapper
 
@@ -26,12 +29,6 @@ describe('UserCard_Language', () => {
       },
       commit: storeCommitMock,
     },
-    $toasted: {
-      success: toastSuccessMock,
-      global: {
-        error: toastErrorMock,
-      },
-    },
     $apollo: {
       mutate: mockAPIcall,
     },
@@ -143,7 +140,7 @@ describe('UserCard_Language', () => {
             })
 
             it('toasts a success message', () => {
-              expect(toastSuccessMock).toBeCalledWith('settings.language.success')
+              expect(toastSuccessSpy).toBeCalledWith('settings.language.success')
             })
           })
 
@@ -159,7 +156,7 @@ describe('UserCard_Language', () => {
             })
 
             it('toasts an error message', () => {
-              expect(toastErrorMock).toBeCalledWith('Ouch!')
+              expect(toastErrorSpy).toBeCalledWith('Ouch!')
             })
           })
         })
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_Language.vue b/frontend/src/views/Pages/UserProfile/UserCard_Language.vue
index 0c363f2fe..9109dde60 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_Language.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_Language.vue
@@ -97,11 +97,11 @@ export default {
         .then(() => {
           this.$store.commit('language', this.language)
           this.cancelEdit()
-          this.$toasted.success(this.$t('settings.language.success'))
+          this.toastSuccess(this.$t('settings.language.success'))
         })
         .catch((error) => {
           this.language = this.$store.state.language
-          this.$toasted.global.error(error.message)
+          this.toastError(error.message)
         })
     },
     buildTagFromLanguageString() {

From 84d2b9459dd1b1cb6a9bde55addf56a75f96e94e Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 16 Feb 2022 08:18:29 +0100
Subject: [PATCH 15/21] use bv toast

---
 .../UserProfile/UserCard_Newsletter.spec.js   | 19 ++++++++-----------
 .../Pages/UserProfile/UserCard_Newsletter.vue |  4 ++--
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/frontend/src/views/Pages/UserProfile/UserCard_Newsletter.spec.js b/frontend/src/views/Pages/UserProfile/UserCard_Newsletter.spec.js
index 766e13ce5..b5a014b51 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_Newsletter.spec.js
+++ b/frontend/src/views/Pages/UserProfile/UserCard_Newsletter.spec.js
@@ -2,14 +2,17 @@ import { mount } from '@vue/test-utils'
 import UserCardNewsletter from './UserCard_Newsletter'
 import { unsubscribeNewsletter, subscribeNewsletter } from '../../../graphql/mutations'
 
+import { toasters } from '../../../mixins/toaster'
+
 const localVue = global.localVue
 
 const mockAPIcall = jest.fn()
 
-const toastErrorMock = jest.fn()
-const toastSuccessMock = jest.fn()
 const storeCommitMock = jest.fn()
 
+const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
+const toastSuccessSpy = jest.spyOn(toasters.methods, 'toastSuccess')
+
 describe('UserCard_Newsletter', () => {
   let wrapper
 
@@ -23,12 +26,6 @@ describe('UserCard_Newsletter', () => {
       },
       commit: storeCommitMock,
     },
-    $toasted: {
-      success: toastSuccessMock,
-      global: {
-        error: toastErrorMock,
-      },
-    },
     $apollo: {
       mutate: mockAPIcall,
     },
@@ -77,7 +74,7 @@ describe('UserCard_Newsletter', () => {
       })
 
       it('toasts a success message', () => {
-        expect(toastSuccessMock).toBeCalledWith('settings.newsletter.newsletterFalse')
+        expect(toastSuccessSpy).toBeCalledWith('settings.newsletter.newsletterFalse')
       })
     })
 
@@ -107,7 +104,7 @@ describe('UserCard_Newsletter', () => {
       })
 
       it('toasts a success message', () => {
-        expect(toastSuccessMock).toBeCalledWith('settings.newsletter.newsletterTrue')
+        expect(toastSuccessSpy).toBeCalledWith('settings.newsletter.newsletterTrue')
       })
     })
 
@@ -124,7 +121,7 @@ describe('UserCard_Newsletter', () => {
       })
 
       it('toasts an error message', () => {
-        expect(toastErrorMock).toBeCalledWith('Ouch')
+        expect(toastErrorSpy).toBeCalledWith('Ouch')
       })
     })
   })
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_Newsletter.vue b/frontend/src/views/Pages/UserProfile/UserCard_Newsletter.vue
index 2499671cf..23834523e 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_Newsletter.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_Newsletter.vue
@@ -48,7 +48,7 @@ export default {
         })
         .then(() => {
           this.$store.commit('newsletterState', this.newsletterState)
-          this.$toasted.success(
+          this.toastSuccess(
             this.newsletterState
               ? this.$t('settings.newsletter.newsletterTrue')
               : this.$t('settings.newsletter.newsletterFalse'),
@@ -56,7 +56,7 @@ export default {
         })
         .catch((error) => {
           this.newsletterState = this.$store.state.newsletterState
-          this.$toasted.global.error(error.message)
+          this.toastError(error.message)
         })
     },
   },

From b4d0f5cbed50470d827b12714adcd6162ede3c9c Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 16 Feb 2022 08:21:39 +0100
Subject: [PATCH 16/21] remove vue toasted

---
 frontend/src/plugins/dashboard-plugin.js      | 12 -----------
 frontend/src/plugins/dashboard-plugin.test.js | 20 -------------------
 2 files changed, 32 deletions(-)

diff --git a/frontend/src/plugins/dashboard-plugin.js b/frontend/src/plugins/dashboard-plugin.js
index e48da4e9e..4825377c7 100755
--- a/frontend/src/plugins/dashboard-plugin.js
+++ b/frontend/src/plugins/dashboard-plugin.js
@@ -1,7 +1,6 @@
 import GlobalComponents from './globalComponents'
 import GlobalDirectives from './globalDirectives'
 
-import Toasted from 'vue-toasted'
 import PortalVue from 'portal-vue'
 
 // vue-bootstrap
@@ -30,16 +29,5 @@ export default {
     Vue.use(FlatPickr)
     Vue.use(Loading)
     Vue.use(VueApollo)
-    Vue.use(Toasted, {
-      position: 'top-center',
-      duration: 5000,
-      fullWidth: true,
-      action: {
-        text: 'x',
-        onClick: (e, toastObject) => {
-          toastObject.goAway(0)
-        },
-      },
-    })
   },
 }
diff --git a/frontend/src/plugins/dashboard-plugin.test.js b/frontend/src/plugins/dashboard-plugin.test.js
index 689855c12..6881cd0d4 100644
--- a/frontend/src/plugins/dashboard-plugin.test.js
+++ b/frontend/src/plugins/dashboard-plugin.test.js
@@ -4,13 +4,10 @@ import Vue from 'vue'
 import GlobalComponents from './globalComponents'
 import GlobalDirectives from './globalDirectives'
 
-import Toasted from 'vue-toasted'
-
 import './assets/scss/app.scss'
 
 jest.mock('./globalComponents')
 jest.mock('./globalDirectives')
-jest.mock('vue-toasted')
 
 jest.mock('vue')
 
@@ -27,21 +24,4 @@ describe('dashboard plugin', () => {
   it('installs the global directives', () => {
     expect(vueUseMock).toBeCalledWith(GlobalDirectives)
   })
-
-  describe('vue toasted', () => {
-    const toastedAction = vueUseMock.mock.calls[9][1].action.onClick
-    const goAwayMock = jest.fn()
-    const toastObject = {
-      goAway: goAwayMock,
-    }
-
-    it('installs vue toasted', () => {
-      expect(vueUseMock).toBeCalledWith(Toasted, expect.anything())
-    })
-
-    it('onClick calls goAway(0)', () => {
-      toastedAction({}, toastObject)
-      expect(goAwayMock).toBeCalledWith(0)
-    })
-  })
 })

From c2723c614cb8cbae75adca7ed1fe447a72180844 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 16 Feb 2022 08:24:37 +0100
Subject: [PATCH 17/21] filter GraphQL error

---
 frontend/src/main.js           | 10 ----------
 frontend/src/mixins/toaster.js |  1 +
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/frontend/src/main.js b/frontend/src/main.js
index 25e417359..bcf80fbef 100755
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -21,16 +21,6 @@ Vue.config.productionTip = false
 
 Vue.mixin(toasters)
 
-Vue.toasted.register(
-  'error',
-  (payload) => {
-    return payload.replace(/^GraphQL error: /, '')
-  },
-  {
-    type: 'error',
-  },
-)
-
 loadAllRules(i18n)
 
 addNavigationGuards(router, store, apolloProvider.defaultClient)
diff --git a/frontend/src/mixins/toaster.js b/frontend/src/mixins/toaster.js
index 28a61365c..704eaf1a7 100644
--- a/frontend/src/mixins/toaster.js
+++ b/frontend/src/mixins/toaster.js
@@ -13,6 +13,7 @@ export const toasters = {
       })
     },
     toast(message, options) {
+      message = message.replace(/^GraphQL error: /, '')
       this.$bvToast.toast(message, {
         autoHideDelay: 5000,
         appendToast: false,

From 82c7725afc99b823322292d23aaa8a23af798324 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 16 Feb 2022 08:25:27 +0100
Subject: [PATCH 18/21] remove vue toasted from package

---
 frontend/package.json | 1 -
 frontend/yarn.lock    | 5 -----
 2 files changed, 6 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index d59c22672..cfeba5da4 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -62,7 +62,6 @@
     "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"
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 2ceb33065..296e0f01b 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -14256,11 +14256,6 @@ 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"

From 493ad9c6f70d35cf83e76cb2a8b03091efa69142 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 16 Feb 2022 08:47:10 +0100
Subject: [PATCH 19/21] use bv toast

---
 .../UserCard_FormUsername.spec.js.old           | 17 +++++++----------
 .../UserProfile/UserCard_FormUsername.vue.old   |  4 ++--
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.spec.js.old b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.spec.js.old
index 5a3ee8cd6..28451e781 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.spec.js.old
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.spec.js.old
@@ -3,6 +3,8 @@ import UserCardFormUsername from './UserCard_FormUsername'
 import flushPromises from 'flush-promises'
 import { extend } from 'vee-validate'
 
+import { toasters } from '../../../mixins/toaster'
+
 const localVue = global.localVue
 
 const mockAPIcall = jest.fn()
@@ -14,10 +16,11 @@ extend('gddUsernameUnique', {
   },
 })
 
-const toastErrorMock = jest.fn()
-const toastSuccessMock = jest.fn()
 const storeCommitMock = jest.fn()
 
+const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
+const toastSuccessSpy = jest.spyOn(toasters.methods, 'toastSuccess')
+
 describe('UserCard_FormUsername', () => {
   let wrapper
 
@@ -29,12 +32,6 @@ describe('UserCard_FormUsername', () => {
       },
       commit: storeCommitMock,
     },
-    $toasted: {
-      success: toastSuccessMock,
-      global: {
-        error: toastErrorMock,
-      },
-    },
     $apollo: {
       mutate: mockAPIcall,
     },
@@ -125,7 +122,7 @@ describe('UserCard_FormUsername', () => {
           })
 
           it('toasts an success message', () => {
-            expect(toastSuccessMock).toBeCalledWith('settings.name.change-success')
+            expect(toastSuccessSpy).toBeCalledWith('settings.name.change-success')
           })
 
           it('has no edit button anymore', () => {
@@ -155,7 +152,7 @@ describe('UserCard_FormUsername', () => {
           })
 
           it('toasts an error message', () => {
-            expect(toastErrorMock).toBeCalledWith('Ouch!')
+            expect(toastErrorSpy).toBeCalledWith('Ouch!')
           })
 
           it('renders an empty username', () => {
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue.old b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue.old
index 6bae1abb4..f54765be6 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue.old
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue.old
@@ -97,10 +97,10 @@ export default {
           this.$store.commit('username', this.form.username)
           this.username = this.form.username
           this.showUsername = true
-          this.$toasted.success(this.$t('settings.name.change-success'))
+          this.toastSuccess(this.$t('settings.name.change-success'))
         })
         .catch((error) => {
-          this.$toasted.global.error(error.message)
+          this.toastError(error.message)
           this.showUsername = true
           this.username = this.$store.state.username
           this.form.username = this.$store.state.username

From 1c3a3b6ee4fae3c5cc7546ad93dd215ed3f175dc Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 16 Feb 2022 11:07:08 +0100
Subject: [PATCH 20/21] global spy on toasters

---
 frontend/src/views/Layout/DashboardLayout_gdd.spec.js        | 4 +---
 .../views/Pages/AccountOverview/GdtTransactionList.spec.js   | 4 +---
 frontend/src/views/Pages/Login.spec.js                       | 4 +---
 frontend/src/views/Pages/Register.spec.js                    | 4 +---
 frontend/src/views/Pages/RegisterCommunity.spec.js           | 4 +---
 frontend/src/views/Pages/RegisterSelectCommunity.spec.js     | 4 +---
 frontend/src/views/Pages/ResetPassword.spec.js               | 4 +---
 .../views/Pages/UserProfile/UserCard_CoinAnimation.spec.js   | 5 +----
 .../views/Pages/UserProfile/UserCard_FormUserData.spec.js    | 5 +----
 .../Pages/UserProfile/UserCard_FormUserPasswort.spec.js      | 5 +----
 .../Pages/UserProfile/UserCard_FormUsername.spec.js.old      | 5 +----
 .../src/views/Pages/UserProfile/UserCard_Language.spec.js    | 5 +----
 .../src/views/Pages/UserProfile/UserCard_Newsletter.spec.js  | 5 +----
 frontend/test/testSetup.js                                   | 2 ++
 14 files changed, 15 insertions(+), 45 deletions(-)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
index e779f5928..d12c5e43e 100644
--- a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
@@ -2,7 +2,7 @@ import { mount, RouterLinkStub } from '@vue/test-utils'
 import flushPromises from 'flush-promises'
 import DashboardLayoutGdd from './DashboardLayout_gdd'
 
-import { toasters } from '../../mixins/toaster'
+import { toastErrorSpy } from '../../../test/testSetup'
 
 jest.useFakeTimers()
 
@@ -19,8 +19,6 @@ const apolloMock = jest.fn().mockResolvedValue({
   },
 })
 
-const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
-
 describe('DashboardLayoutGdd', () => {
   let wrapper
 
diff --git a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
index 16c9de309..42c03b8a3 100644
--- a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
+++ b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils'
 import { GdtEntryType } from '../../../graphql/enums'
 import GdtTransactionList from './GdtTransactionList'
 
-import { toasters } from '../../../mixins/toaster'
+import { toastErrorSpy } from '../../../../test/testSetup'
 
 const localVue = global.localVue
 
@@ -17,8 +17,6 @@ const apolloMock = jest.fn().mockResolvedValue({
 
 const windowScrollToMock = jest.fn()
 
-const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
-
 window.scrollTo = windowScrollToMock
 
 const state = {
diff --git a/frontend/src/views/Pages/Login.spec.js b/frontend/src/views/Pages/Login.spec.js
index 464879da8..3035c15eb 100644
--- a/frontend/src/views/Pages/Login.spec.js
+++ b/frontend/src/views/Pages/Login.spec.js
@@ -2,7 +2,7 @@ import { RouterLinkStub, mount } from '@vue/test-utils'
 import flushPromises from 'flush-promises'
 import Login from './Login'
 
-import { toasters } from '../../mixins/toaster'
+import { toastErrorSpy } from '../../../test/testSetup'
 
 const localVue = global.localVue
 
@@ -27,8 +27,6 @@ const spinnerMock = jest.fn(() => {
   }
 })
 
-const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
-
 describe('Login', () => {
   let wrapper
 
diff --git a/frontend/src/views/Pages/Register.spec.js b/frontend/src/views/Pages/Register.spec.js
index 7065f4638..4ec3cc0a2 100644
--- a/frontend/src/views/Pages/Register.spec.js
+++ b/frontend/src/views/Pages/Register.spec.js
@@ -2,7 +2,7 @@ import { mount, RouterLinkStub } from '@vue/test-utils'
 import flushPromises from 'flush-promises'
 import Register from './Register'
 
-import { toasters } from '../../mixins/toaster'
+import { toastErrorSpy } from '../../../test/testSetup'
 
 const localVue = global.localVue
 
@@ -21,8 +21,6 @@ const mockStoreCommit = jest.fn()
 const registerUserMutationMock = jest.fn()
 const routerPushMock = jest.fn()
 
-const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
-
 describe('Register', () => {
   let wrapper
 
diff --git a/frontend/src/views/Pages/RegisterCommunity.spec.js b/frontend/src/views/Pages/RegisterCommunity.spec.js
index f29ea5386..b1215a609 100644
--- a/frontend/src/views/Pages/RegisterCommunity.spec.js
+++ b/frontend/src/views/Pages/RegisterCommunity.spec.js
@@ -1,7 +1,7 @@
 import { mount, RouterLinkStub } from '@vue/test-utils'
 import RegisterCommunity from './RegisterCommunity'
 
-import { toasters } from '../../mixins/toaster'
+import { toastErrorSpy } from '../../../test/testSetup'
 
 const localVue = global.localVue
 
@@ -18,8 +18,6 @@ const apolloQueryMock = jest.fn().mockResolvedValue({
 
 const mockStoreCommit = jest.fn()
 
-const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
-
 describe('RegisterCommunity', () => {
   let wrapper
 
diff --git a/frontend/src/views/Pages/RegisterSelectCommunity.spec.js b/frontend/src/views/Pages/RegisterSelectCommunity.spec.js
index 540f448cb..d2a13fb4e 100644
--- a/frontend/src/views/Pages/RegisterSelectCommunity.spec.js
+++ b/frontend/src/views/Pages/RegisterSelectCommunity.spec.js
@@ -2,7 +2,7 @@ import { mount, RouterLinkStub } from '@vue/test-utils'
 import { communities, communityInfo } from '../../graphql/queries'
 import RegisterSelectCommunity from './RegisterSelectCommunity'
 
-import { toasters } from '../../mixins/toaster'
+import { toastErrorSpy } from '../../../test/testSetup'
 
 const localVue = global.localVue
 
@@ -14,8 +14,6 @@ const spinnerMock = jest.fn(() => {
   }
 })
 
-const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
-
 const apolloQueryMock = jest
   .fn()
   .mockResolvedValueOnce({
diff --git a/frontend/src/views/Pages/ResetPassword.spec.js b/frontend/src/views/Pages/ResetPassword.spec.js
index eb04d2c05..5ee2742f2 100644
--- a/frontend/src/views/Pages/ResetPassword.spec.js
+++ b/frontend/src/views/Pages/ResetPassword.spec.js
@@ -2,7 +2,7 @@ import { mount, RouterLinkStub } from '@vue/test-utils'
 import ResetPassword from './ResetPassword'
 import flushPromises from 'flush-promises'
 
-import { toasters } from '../../mixins/toaster'
+import { toastErrorSpy } from '../../../test/testSetup'
 
 // validation is tested in src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js
 
@@ -12,8 +12,6 @@ const apolloMutationMock = jest.fn()
 
 const routerPushMock = jest.fn()
 
-const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
-
 const stubs = {
   RouterLink: RouterLinkStub,
 }
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.spec.js b/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.spec.js
index e2824308c..4cc4477b1 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.spec.js
+++ b/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.spec.js
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils'
 import UserCardCoinAnimation from './UserCard_CoinAnimation'
 import { updateUserInfos } from '../../../graphql/mutations'
 
-import { toasters } from '../../../mixins/toaster'
+import { toastErrorSpy, toastSuccessSpy } from '../../../../test/testSetup'
 
 const localVue = global.localVue
 
@@ -10,9 +10,6 @@ const mockAPIcall = jest.fn()
 
 const storeCommitMock = jest.fn()
 
-const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
-const toastSuccessSpy = jest.spyOn(toasters.methods, 'toastSuccess')
-
 describe('UserCard_CoinAnimation', () => {
   let wrapper
 
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.spec.js b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.spec.js
index 11807614c..c86a335c7 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.spec.js
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.spec.js
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils'
 import UserCardFormUserData from './UserCard_FormUserData'
 import flushPromises from 'flush-promises'
 
-import { toasters } from '../../../mixins/toaster'
+import { toastErrorSpy, toastSuccessSpy } from '../../../../test/testSetup'
 
 const localVue = global.localVue
 
@@ -10,9 +10,6 @@ const mockAPIcall = jest.fn()
 
 const storeCommitMock = jest.fn()
 
-const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
-const toastSuccessSpy = jest.spyOn(toasters.methods, 'toastSuccess')
-
 describe('UserCard_FormUserData', () => {
   let wrapper
 
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js b/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js
index cf870f179..0299bdc1b 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js
@@ -2,16 +2,13 @@ import { mount } from '@vue/test-utils'
 import UserCardFormPasswort from './UserCard_FormUserPasswort'
 import flushPromises from 'flush-promises'
 
-import { toasters } from '../../../mixins/toaster'
+import { toastErrorSpy, toastSuccessSpy } from '../../../../test/testSetup'
 
 const localVue = global.localVue
 
 const changePasswordProfileMock = jest.fn()
 changePasswordProfileMock.mockReturnValue({ success: true })
 
-const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
-const toastSuccessSpy = jest.spyOn(toasters.methods, 'toastSuccess')
-
 describe('UserCard_FormUserPasswort', () => {
   let wrapper
 
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.spec.js.old b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.spec.js.old
index 28451e781..58ad2ecdd 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.spec.js.old
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.spec.js.old
@@ -3,7 +3,7 @@ import UserCardFormUsername from './UserCard_FormUsername'
 import flushPromises from 'flush-promises'
 import { extend } from 'vee-validate'
 
-import { toasters } from '../../../mixins/toaster'
+import { toastErrorSpy, toastSuccessSpy } from '../../../../test/testSetup'
 
 const localVue = global.localVue
 
@@ -18,9 +18,6 @@ extend('gddUsernameUnique', {
 
 const storeCommitMock = jest.fn()
 
-const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
-const toastSuccessSpy = jest.spyOn(toasters.methods, 'toastSuccess')
-
 describe('UserCard_FormUsername', () => {
   let wrapper
 
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js b/frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js
index 74ed9f73f..e30632cec 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js
+++ b/frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils'
 import UserCardLanguage from './UserCard_Language'
 
-import { toasters } from '../../../mixins/toaster'
+import { toastErrorSpy, toastSuccessSpy } from '../../../../test/testSetup'
 
 const localVue = global.localVue
 
@@ -15,9 +15,6 @@ const mockAPIcall = jest.fn().mockResolvedValue({
 
 const storeCommitMock = jest.fn()
 
-const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
-const toastSuccessSpy = jest.spyOn(toasters.methods, 'toastSuccess')
-
 describe('UserCard_Language', () => {
   let wrapper
 
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_Newsletter.spec.js b/frontend/src/views/Pages/UserProfile/UserCard_Newsletter.spec.js
index b5a014b51..1f552807f 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_Newsletter.spec.js
+++ b/frontend/src/views/Pages/UserProfile/UserCard_Newsletter.spec.js
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils'
 import UserCardNewsletter from './UserCard_Newsletter'
 import { unsubscribeNewsletter, subscribeNewsletter } from '../../../graphql/mutations'
 
-import { toasters } from '../../../mixins/toaster'
+import { toastErrorSpy, toastSuccessSpy } from '../../../../test/testSetup'
 
 const localVue = global.localVue
 
@@ -10,9 +10,6 @@ const mockAPIcall = jest.fn()
 
 const storeCommitMock = jest.fn()
 
-const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
-const toastSuccessSpy = jest.spyOn(toasters.methods, 'toastSuccess')
-
 describe('UserCard_Newsletter', () => {
   let wrapper
 
diff --git a/frontend/test/testSetup.js b/frontend/test/testSetup.js
index 2bd15f43a..3a4efd4c6 100644
--- a/frontend/test/testSetup.js
+++ b/frontend/test/testSetup.js
@@ -18,6 +18,8 @@ import { focus } from 'vue-focus'
 import { loadAllRules } from '../src/validation-rules'
 
 import { toasters } from '../src/mixins/toaster'
+export const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
+export const toastSuccessSpy = jest.spyOn(toasters.methods, 'toastSuccess')
 
 Object.keys(rules).forEach((rule) => {
   extend(rule, {

From 2c4406ee8186f8677809a79b2b8a5f193e0e6795 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 16 Feb 2022 11:23:26 +0100
Subject: [PATCH 21/21] add link to repo with portal vue warning

---
 frontend/test/testSetup.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/test/testSetup.js b/frontend/test/testSetup.js
index 3a4efd4c6..2e26db998 100644
--- a/frontend/test/testSetup.js
+++ b/frontend/test/testSetup.js
@@ -54,6 +54,7 @@ global.localVue.directive('focus', focus)
 global.localVue.mixin(toasters)
 
 // Filter the warnings for portal vue
+// https://github.com/BeniRupp/bug_portal-vue-target-already-exists
 const consoleWarn = global.console.warn
 // eslint-disable-next-line no-console
 delete console.warn