From ddb4ba676ba0450655d575036f75c1fd0aecbcfb Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 10 Jun 2021 16:45:28 +0200
Subject: [PATCH 1/6] try to implement toasters

---
 frontend/package.json                       |   1 +
 frontend/src/plugins/dashboard-plugin.js    |   3 +-
 frontend/src/views/Pages/ForgotPassword.vue |  47 +++---
 frontend/src/views/Pages/ResetPassword.vue  | 156 ++++++++++----------
 4 files changed, 108 insertions(+), 99 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 34ce37b76..2a41bea56 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -51,6 +51,7 @@
     "nouislider": "^12.1.0",
     "particles-bg-vue": "1.2.3",
     "perfect-scrollbar": "^1.3.0",
+    "portal-vue": "^2.1.7",
     "prettier": "^2.2.1",
     "qrcode": "^1.4.4",
     "quill": "^1.3.6",
diff --git a/frontend/src/plugins/dashboard-plugin.js b/frontend/src/plugins/dashboard-plugin.js
index b7c0ea06c..aa4bf200f 100755
--- a/frontend/src/plugins/dashboard-plugin.js
+++ b/frontend/src/plugins/dashboard-plugin.js
@@ -12,7 +12,7 @@ import GlobalDirectives from './globalDirectives'
 import SideBar from '@/components/SidebarPlugin'
 
 // vue-bootstrap
-import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+import { BootstrapVue, IconsPlugin, ToastPlugin } from 'bootstrap-vue'
 
 // asset imports
 import '@/assets/scss/argon.scss'
@@ -49,6 +49,7 @@ export default {
     Vue.use(Notifications)
     Vue.use(BootstrapVue)
     Vue.use(IconsPlugin)
+    Vue.use(ToastPlugin)
     Vue.use(VueGoodTablePlugin)
     Vue.use(VueMoment)
     Vue.use(VueQrcodeReader)
diff --git a/frontend/src/views/Pages/ForgotPassword.vue b/frontend/src/views/Pages/ForgotPassword.vue
index 32331d080..ecbd870c3 100644
--- a/frontend/src/views/Pages/ForgotPassword.vue
+++ b/frontend/src/views/Pages/ForgotPassword.vue
@@ -46,28 +46,31 @@
   </div>
 </template>
 <script>
-import loginAPI from '../../apis/loginAPI.js'
+ import loginAPI from '../../apis/loginAPI.js'
 
-export default {
-  name: 'password',
-  data() {
-    return {
-      disable: 'disabled',
-      form: {
-        email: '',
-      },
-    }
-  },
-  methods: {
-    async onSubmit() {
-      const result = await loginAPI.sendEmail(this.form.email)
-      if (result.success) {
-        this.$router.push('/thx/password')
-      } else {
-        alert(result.result)
-      }
-    },
-  },
-}
+ export default {
+   name: 'password',
+   data() {
+     return {
+       disable: 'disabled',
+       form: {
+         email: '',
+       },
+     }
+   },
+   methods: {
+     async onSubmit() {
+       const result = await loginAPI.sendEmail(this.form.email)
+       if (result.success) {
+         this.$router.push('/thx/password')
+       } else {
+         this.$bvToast.toast(result.result.message, {
+           title: this.$t('error.error'),
+           noAutoHide: true,
+         })
+       }
+     },
+   },
+ }
 </script>
 <style></style>
diff --git a/frontend/src/views/Pages/ResetPassword.vue b/frontend/src/views/Pages/ResetPassword.vue
index 99892612c..29aa015d9 100644
--- a/frontend/src/views/Pages/ResetPassword.vue
+++ b/frontend/src/views/Pages/ResetPassword.vue
@@ -85,82 +85,86 @@
   </div>
 </template>
 <script>
-import loginAPI from '../../apis/loginAPI'
-export default {
-  name: 'reset',
-  data() {
-    return {
-      password: '',
-      checkPassword: '',
-      passwordVisible: false,
-      submitted: false,
-      authenticated: false,
-      sessionId: null,
-      email: null,
-    }
-  },
-  methods: {
-    togglePasswordVisibility() {
-      this.passwordVisible = !this.passwordVisible
-    },
-    async onSubmit() {
-      const result = await loginAPI.changePassword(this.sessionId, this.email, this.password)
-      if (result.success) {
-        this.password = ''
-        /*
-         this.$store.dispatch('login', {
-           sessionId: result.result.data.session_id,
-           email: result.result.data.user.email,
+ import loginAPI from '../../apis/loginAPI'
+ export default {
+   name: 'reset',
+   data() {
+     return {
+       password: '',
+       checkPassword: '',
+       passwordVisible: false,
+       submitted: false,
+       authenticated: false,
+       sessionId: null,
+       email: null,
+     }
+   },
+   methods: {
+     togglePasswordVisibility() {
+       this.passwordVisible = !this.passwordVisible
+     },
+     async onSubmit() {
+       const result = await loginAPI.changePassword(this.sessionId, this.email, this.password)
+       if (result.success) {
+         this.password = ''
+         /*
+            this.$store.dispatch('login', {
+            sessionId: result.result.data.session_id,
+            email: result.result.data.user.email,
+            })
+          */
+         this.$router.push('/thx/reset')
+       } else {
+         this.$bvToast.toast(result.result.message, {
+           title: this.$t('error.error'),
          })
-         */
-        this.$router.push('/thx/reset')
-      } else {
-        alert(result.result.message)
-      }
-    },
-    async authenticate() {
-      const optin = this.$route.params.optin
-      const result = await loginAPI.loginViaEmailVerificationCode(optin)
-      if (result.success) {
-        this.authenticated = true
-        this.sessionId = result.result.data.session_id
-        this.email = result.result.data.user.email
-      } else {
-        alert(result.result.message)
-      }
-    },
-  },
-  computed: {
-    samePasswords() {
-      return this.password === this.checkPassword
-    },
-    passwordsFilled() {
-      return this.password !== '' && this.checkPassword !== ''
-    },
-    rules() {
-      return [
-        { message: this.$t('site.signup.lowercase'), regex: /[a-z]+/ },
-        { message: this.$t('site.signup.uppercase'), regex: /[A-Z]+/ },
-        { message: this.$t('site.signup.minimum'), regex: /.{8,}/ },
-        { message: this.$t('site.signup.one_number'), regex: /[0-9]+/ },
-      ]
-    },
-    passwordValidation() {
-      const errors = []
-      for (const condition of this.rules) {
-        if (!condition.regex.test(this.password)) {
-          errors.push(condition.message)
-        }
-      }
-      if (errors.length === 0) {
-        return { valid: true, errors }
-      }
-      return { valid: false, errors }
-    },
-  },
-  async created() {
-    this.authenticate()
-  },
-}
+       }
+     },
+     async authenticate() {
+       const optin = this.$route.params.optin
+       const result = await loginAPI.loginViaEmailVerificationCode(optin)
+       if (result.success) {
+         this.authenticated = true
+         this.sessionId = result.result.data.session_id
+         this.email = result.result.data.user.email
+       } else {
+         this.$bvToast.toast(result.result.message, {
+           title: this.$t('error.error'),
+         })
+       }
+     },
+   },
+   computed: {
+     samePasswords() {
+       return this.password === this.checkPassword
+     },
+     passwordsFilled() {
+       return this.password !== '' && this.checkPassword !== ''
+     },
+     rules() {
+       return [
+         { message: this.$t('site.signup.lowercase'), regex: /[a-z]+/ },
+         { message: this.$t('site.signup.uppercase'), regex: /[A-Z]+/ },
+         { message: this.$t('site.signup.minimum'), regex: /.{8,}/ },
+         { message: this.$t('site.signup.one_number'), regex: /[0-9]+/ },
+       ]
+     },
+     passwordValidation() {
+       const errors = []
+       for (const condition of this.rules) {
+         if (!condition.regex.test(this.password)) {
+           errors.push(condition.message)
+         }
+       }
+       if (errors.length === 0) {
+         return { valid: true, errors }
+       }
+       return { valid: false, errors }
+     },
+   },
+   async created() {
+     this.authenticate()
+   },
+ }
 </script>
 <style></style>

From 552b31f77a451247f983a271c6db02413de733e2 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 10 Jun 2021 18:04:48 +0200
Subject: [PATCH 2/6] trying to fix the scss

---
 frontend/src/assets/scss/argon.scss         | 107 ++++++++++----
 frontend/src/plugins/dashboard-plugin.js    |   3 +
 frontend/src/views/Pages/ForgotPassword.vue |  50 +++----
 frontend/src/views/Pages/ResetPassword.vue  | 152 ++++++++++----------
 4 files changed, 186 insertions(+), 126 deletions(-)

diff --git a/frontend/src/assets/scss/argon.scss b/frontend/src/assets/scss/argon.scss
index 01a002691..1fa663a5f 100644
--- a/frontend/src/assets/scss/argon.scss
+++ b/frontend/src/assets/scss/argon.scss
@@ -23,38 +23,95 @@
 
 // Bootstrap (4.1.3) components
 
-@import "~bootstrap/scss/root";
-@import "~bootstrap/scss/reboot";
-@import "~bootstrap/scss/type";
-@import "~bootstrap/scss/images";
-@import "~bootstrap/scss/code";
-@import "~bootstrap/scss/grid";
-@import "~bootstrap/scss/tables";
-@import "~bootstrap/scss/forms";
-@import "~bootstrap/scss/buttons";
-@import "~bootstrap/scss/transitions";
-@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/breadcrumb";
 @import "~bootstrap/scss/button-group";
-@import "~bootstrap/scss/input-group";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/carousel";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/code";
 @import "~bootstrap/scss/custom-forms";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/input-group";
+@import "~bootstrap/scss/jumbotron";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/media";
+@import "~bootstrap/scss/modal";
 @import "~bootstrap/scss/nav";
 @import "~bootstrap/scss/navbar";
-@import "~bootstrap/scss/card";
-@import "~bootstrap/scss/breadcrumb";
 @import "~bootstrap/scss/pagination";
-@import "~bootstrap/scss/badge";
-@import "~bootstrap/scss/jumbotron";
-@import "~bootstrap/scss/alert";
-@import "~bootstrap/scss/progress";
-@import "~bootstrap/scss/media";
-@import "~bootstrap/scss/list-group";
-@import "~bootstrap/scss/close";
-@import "~bootstrap/scss/modal";
-@import "~bootstrap/scss/tooltip";
 @import "~bootstrap/scss/popover";
-@import "~bootstrap/scss/carousel";
-@import "~bootstrap/scss/utilities";
 @import "~bootstrap/scss/print";
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/utilities";
+@import "~bootstrap/scss/variables";
+
+// Utilities
+
+@import "~bootstrap/scss/utilities/align";
+@import "~bootstrap/scss/utilities/background";
+@import "~bootstrap/scss/utilities/borders";
+@import "~bootstrap/scss/utilities/clearfix";
+@import "~bootstrap/scss/utilities/display";
+@import "~bootstrap/scss/utilities/embed";
+@import "~bootstrap/scss/utilities/flex";
+@import "~bootstrap/scss/utilities/float";
+@import "~bootstrap/scss/utilities/overflow";
+@import "~bootstrap/scss/utilities/position";
+@import "~bootstrap/scss/utilities/screenreaders";
+@import "~bootstrap/scss/utilities/shadows";
+@import "~bootstrap/scss/utilities/sizing";
+@import "~bootstrap/scss/utilities/spacing";
+@import "~bootstrap/scss/utilities/stretched-link";
+@import "~bootstrap/scss/utilities/text";
+@import "~bootstrap/scss/utilities/visibility";
+
+
+// Mixins
+
+@import "~bootstrap/scss/mixins/alert";
+@import "~bootstrap/scss/mixins/badge";
+@import "~bootstrap/scss/mixins/border-radius";
+@import "~bootstrap/scss/mixins/box-shadow";
+@import "~bootstrap/scss/mixins/breakpoints";
+@import "~bootstrap/scss/mixins/buttons";
+@import "~bootstrap/scss/mixins/caret";
+@import "~bootstrap/scss/mixins/clearfix";
+@import "~bootstrap/scss/mixins/deprecate";
+@import "~bootstrap/scss/mixins/float";
+@import "~bootstrap/scss/mixins/forms";
+@import "~bootstrap/scss/mixins/gradients";
+@import "~bootstrap/scss/mixins/grid-framework";
+@import "~bootstrap/scss/mixins/grid";
+@import "~bootstrap/scss/mixins/hover";
+@import "~bootstrap/scss/mixins/image";
+@import "~bootstrap/scss/mixins/list-group";
+@import "~bootstrap/scss/mixins/lists";
+@import "~bootstrap/scss/mixins/nav-divider";
+@import "~bootstrap/scss/mixins/pagination";
+@import "~bootstrap/scss/mixins/reset-text";
+@import "~bootstrap/scss/mixins/resize";
+@import "~bootstrap/scss/mixins/screen-reader";
+@import "~bootstrap/scss/mixins/size";
+@import "~bootstrap/scss/mixins/table-row";
+@import "~bootstrap/scss/mixins/text-emphasis";
+@import "~bootstrap/scss/mixins/text-hide";
+@import "~bootstrap/scss/mixins/text-truncate";
+@import "~bootstrap/scss/mixins/transition";
+@import "~bootstrap/scss/mixins/visibility";
+
 
 // Argon utilities and components
 
diff --git a/frontend/src/plugins/dashboard-plugin.js b/frontend/src/plugins/dashboard-plugin.js
index aa4bf200f..7b245ef23 100755
--- a/frontend/src/plugins/dashboard-plugin.js
+++ b/frontend/src/plugins/dashboard-plugin.js
@@ -11,6 +11,8 @@ import GlobalDirectives from './globalDirectives'
 // Sidebar on the right. Used as a local plugin in DashboardLayout.vue
 import SideBar from '@/components/SidebarPlugin'
 
+import PortalVue from 'portal-vue'
+
 // vue-bootstrap
 import { BootstrapVue, IconsPlugin, ToastPlugin } from 'bootstrap-vue'
 
@@ -47,6 +49,7 @@ export default {
     Vue.use(GlobalDirectives)
     Vue.use(SideBar)
     Vue.use(Notifications)
+    Vue.use(PortalVue)
     Vue.use(BootstrapVue)
     Vue.use(IconsPlugin)
     Vue.use(ToastPlugin)
diff --git a/frontend/src/views/Pages/ForgotPassword.vue b/frontend/src/views/Pages/ForgotPassword.vue
index ecbd870c3..6e4ea422a 100644
--- a/frontend/src/views/Pages/ForgotPassword.vue
+++ b/frontend/src/views/Pages/ForgotPassword.vue
@@ -46,31 +46,31 @@
   </div>
 </template>
 <script>
- import loginAPI from '../../apis/loginAPI.js'
+import loginAPI from '../../apis/loginAPI.js'
 
- export default {
-   name: 'password',
-   data() {
-     return {
-       disable: 'disabled',
-       form: {
-         email: '',
-       },
-     }
-   },
-   methods: {
-     async onSubmit() {
-       const result = await loginAPI.sendEmail(this.form.email)
-       if (result.success) {
-         this.$router.push('/thx/password')
-       } else {
-         this.$bvToast.toast(result.result.message, {
-           title: this.$t('error.error'),
-           noAutoHide: true,
-         })
-       }
-     },
-   },
- }
+export default {
+  name: 'password',
+  data() {
+    return {
+      disable: 'disabled',
+      form: {
+        email: '',
+      },
+    }
+  },
+  methods: {
+    async onSubmit() {
+      const result = await loginAPI.sendEmail(this.form.email)
+      if (result.success) {
+        this.$router.push('/thx/password')
+      } else {
+        this.$bvToast.toast(result.result.message, {
+          title: this.$t('error.error'),
+          noAutoHide: true,
+        })
+      }
+    },
+  },
+}
 </script>
 <style></style>
diff --git a/frontend/src/views/Pages/ResetPassword.vue b/frontend/src/views/Pages/ResetPassword.vue
index 29aa015d9..de8f8cad8 100644
--- a/frontend/src/views/Pages/ResetPassword.vue
+++ b/frontend/src/views/Pages/ResetPassword.vue
@@ -85,86 +85,86 @@
   </div>
 </template>
 <script>
- import loginAPI from '../../apis/loginAPI'
- export default {
-   name: 'reset',
-   data() {
-     return {
-       password: '',
-       checkPassword: '',
-       passwordVisible: false,
-       submitted: false,
-       authenticated: false,
-       sessionId: null,
-       email: null,
-     }
-   },
-   methods: {
-     togglePasswordVisibility() {
-       this.passwordVisible = !this.passwordVisible
-     },
-     async onSubmit() {
-       const result = await loginAPI.changePassword(this.sessionId, this.email, this.password)
-       if (result.success) {
-         this.password = ''
-         /*
+import loginAPI from '../../apis/loginAPI'
+export default {
+  name: 'reset',
+  data() {
+    return {
+      password: '',
+      checkPassword: '',
+      passwordVisible: false,
+      submitted: false,
+      authenticated: false,
+      sessionId: null,
+      email: null,
+    }
+  },
+  methods: {
+    togglePasswordVisibility() {
+      this.passwordVisible = !this.passwordVisible
+    },
+    async onSubmit() {
+      const result = await loginAPI.changePassword(this.sessionId, this.email, this.password)
+      if (result.success) {
+        this.password = ''
+        /*
             this.$store.dispatch('login', {
             sessionId: result.result.data.session_id,
             email: result.result.data.user.email,
             })
           */
-         this.$router.push('/thx/reset')
-       } else {
-         this.$bvToast.toast(result.result.message, {
-           title: this.$t('error.error'),
-         })
-       }
-     },
-     async authenticate() {
-       const optin = this.$route.params.optin
-       const result = await loginAPI.loginViaEmailVerificationCode(optin)
-       if (result.success) {
-         this.authenticated = true
-         this.sessionId = result.result.data.session_id
-         this.email = result.result.data.user.email
-       } else {
-         this.$bvToast.toast(result.result.message, {
-           title: this.$t('error.error'),
-         })
-       }
-     },
-   },
-   computed: {
-     samePasswords() {
-       return this.password === this.checkPassword
-     },
-     passwordsFilled() {
-       return this.password !== '' && this.checkPassword !== ''
-     },
-     rules() {
-       return [
-         { message: this.$t('site.signup.lowercase'), regex: /[a-z]+/ },
-         { message: this.$t('site.signup.uppercase'), regex: /[A-Z]+/ },
-         { message: this.$t('site.signup.minimum'), regex: /.{8,}/ },
-         { message: this.$t('site.signup.one_number'), regex: /[0-9]+/ },
-       ]
-     },
-     passwordValidation() {
-       const errors = []
-       for (const condition of this.rules) {
-         if (!condition.regex.test(this.password)) {
-           errors.push(condition.message)
-         }
-       }
-       if (errors.length === 0) {
-         return { valid: true, errors }
-       }
-       return { valid: false, errors }
-     },
-   },
-   async created() {
-     this.authenticate()
-   },
- }
+        this.$router.push('/thx/reset')
+      } else {
+        this.$bvToast.toast(result.result.message, {
+          title: this.$t('error.error'),
+        })
+      }
+    },
+    async authenticate() {
+      const optin = this.$route.params.optin
+      const result = await loginAPI.loginViaEmailVerificationCode(optin)
+      if (result.success) {
+        this.authenticated = true
+        this.sessionId = result.result.data.session_id
+        this.email = result.result.data.user.email
+      } else {
+        this.$bvToast.toast(result.result.message, {
+          title: this.$t('error.error'),
+        })
+      }
+    },
+  },
+  computed: {
+    samePasswords() {
+      return this.password === this.checkPassword
+    },
+    passwordsFilled() {
+      return this.password !== '' && this.checkPassword !== ''
+    },
+    rules() {
+      return [
+        { message: this.$t('site.signup.lowercase'), regex: /[a-z]+/ },
+        { message: this.$t('site.signup.uppercase'), regex: /[A-Z]+/ },
+        { message: this.$t('site.signup.minimum'), regex: /.{8,}/ },
+        { message: this.$t('site.signup.one_number'), regex: /[0-9]+/ },
+      ]
+    },
+    passwordValidation() {
+      const errors = []
+      for (const condition of this.rules) {
+        if (!condition.regex.test(this.password)) {
+          errors.push(condition.message)
+        }
+      }
+      if (errors.length === 0) {
+        return { valid: true, errors }
+      }
+      return { valid: false, errors }
+    },
+  },
+  async created() {
+    this.authenticate()
+  },
+}
 </script>
 <style></style>

From 5ae484fcb88b3b0907eaf05169b7e475b4fde16a Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Fri, 11 Jun 2021 09:35:40 +0200
Subject: [PATCH 3/6] import VueBootstrapToasts test

---
 frontend/package.json                       | 1 +
 frontend/src/App.vue                        | 1 +
 frontend/src/plugins/dashboard-plugin.js    | 6 ++++--
 frontend/src/views/Pages/ForgotPassword.vue | 6 ++----
 frontend/yarn.lock                          | 5 +++++
 5 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 2a41bea56..910644e2c 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -59,6 +59,7 @@
     "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",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a6613bec1..500a7b2e1 100755
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -3,6 +3,7 @@
     <div class="">
       <particles-bg type="custom" :config="config" :bg="true" />
       <component :is="$route.meta.requiresAuth ? 'DashboardLayout' : 'AuthLayoutGDD'" />
+      <Toasts></Toasts>
     </div>
   </div>
 </template>
diff --git a/frontend/src/plugins/dashboard-plugin.js b/frontend/src/plugins/dashboard-plugin.js
index 7b245ef23..013ded702 100755
--- a/frontend/src/plugins/dashboard-plugin.js
+++ b/frontend/src/plugins/dashboard-plugin.js
@@ -13,8 +13,10 @@ import SideBar from '@/components/SidebarPlugin'
 
 import PortalVue from 'portal-vue'
 
+import VueBootstrapToasts from 'vue-bootstrap-toasts'
+
 // vue-bootstrap
-import { BootstrapVue, IconsPlugin, ToastPlugin } from 'bootstrap-vue'
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 
 // asset imports
 import '@/assets/scss/argon.scss'
@@ -52,7 +54,7 @@ export default {
     Vue.use(PortalVue)
     Vue.use(BootstrapVue)
     Vue.use(IconsPlugin)
-    Vue.use(ToastPlugin)
+    Vue.use(VueBootstrapToasts)
     Vue.use(VueGoodTablePlugin)
     Vue.use(VueMoment)
     Vue.use(VueQrcodeReader)
diff --git a/frontend/src/views/Pages/ForgotPassword.vue b/frontend/src/views/Pages/ForgotPassword.vue
index 6e4ea422a..37077064c 100644
--- a/frontend/src/views/Pages/ForgotPassword.vue
+++ b/frontend/src/views/Pages/ForgotPassword.vue
@@ -58,16 +58,14 @@ export default {
       },
     }
   },
+  created() {},
   methods: {
     async onSubmit() {
       const result = await loginAPI.sendEmail(this.form.email)
       if (result.success) {
         this.$router.push('/thx/password')
       } else {
-        this.$bvToast.toast(result.result.message, {
-          title: this.$t('error.error'),
-          noAutoHide: true,
-        })
+        this.$toast.success(this.$t('error.error'))
       }
     },
   },
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index a3a835813..65f3ff71d 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -13268,6 +13268,11 @@ 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"

From 40458424359992e70562bf534021bd40408e9c1a Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Mon, 14 Jun 2021 15:15:01 +0200
Subject: [PATCH 4/6] update user profile data toats messages. Removed TestData
 fragments. removed unused components

---
 frontend/src/apis/loginAPI.js                 |  1 -
 frontend/src/locales/de.json                  |  5 ++-
 frontend/src/locales/en.json                  |  5 ++-
 .../src/views/Layout/DashboardLayout_gdd.vue  |  6 ---
 frontend/src/views/Pages/ForgotPassword.vue   |  9 ++---
 frontend/src/views/Pages/UserProfile.spec.js  | 23 -----------
 frontend/src/views/Pages/UserProfile.vue      | 28 -------------
 .../UserProfile/UserCard_FormUserData.vue     | 40 ++++++++++---------
 .../UserProfile/UserCard_FormUsername.vue     |  3 --
 .../src/views/Pages/UserProfileOverview.vue   |  3 +-
 10 files changed, 34 insertions(+), 89 deletions(-)
 delete mode 100644 frontend/src/views/Pages/UserProfile.spec.js
 delete mode 100644 frontend/src/views/Pages/UserProfile.vue

diff --git a/frontend/src/apis/loginAPI.js b/frontend/src/apis/loginAPI.js
index 2eeec754e..3453bd296 100644
--- a/frontend/src/apis/loginAPI.js
+++ b/frontend/src/apis/loginAPI.js
@@ -98,7 +98,6 @@ const loginAPI = {
     }
     return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)
   },
-
   changePassword: async (sessionId, email, password) => {
     const payload = {
       session_id: sessionId,
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index f47493aea..f358d3169 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -109,7 +109,10 @@
         "chart":"Gemeinschaftsstunden Chart",
         "new":"Neue Gemeinschaftsstunden eintragen",
         "list":"Meine Gemeinschaftsstunden Liste"
-      }      
+      },
+      "user-data": {
+        "change-success": "Deine Daten wurden gespeichert."
+      }
     },
     "navbar" : {
       "my-profil":"Mein Profil",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index dbb9b445c..edee8c8c3 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -110,7 +110,10 @@
         "chart":"Community Hours Chart",
         "new":"Register new community hours",
         "list":"My Community Hours List"
-      }      
+      },
+      "user-data": {
+        "change-success": "Your data has been saved."
+      }
     },
     "navbar" : {
       "my-profil":"My profile",
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 564b4e430..66814b733 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -34,7 +34,6 @@
             :transactions="transactions"
             :transactionCount="transactionCount"
             :pending="pending"
-            :UserProfileTestData="UserProfileTestData"
             @update-balance="updateBalance"
             @update-transactions="updateTransactions"
           ></router-view>
@@ -86,11 +85,6 @@ export default {
       bookedBalance: 0,
       transactionCount: 0,
       pending: true,
-      UserProfileTestData: {
-        username: 'Mustermax',
-        desc:
-          'Max Mustermann seine Beschreibung. Max Mustermann seine Beschreibung. Max Mustermann seine Beschreibung. Max Mustermann seine Beschreibung. ',
-      },
     }
   },
   methods: {
diff --git a/frontend/src/views/Pages/ForgotPassword.vue b/frontend/src/views/Pages/ForgotPassword.vue
index 37077064c..75fc65048 100644
--- a/frontend/src/views/Pages/ForgotPassword.vue
+++ b/frontend/src/views/Pages/ForgotPassword.vue
@@ -61,12 +61,9 @@ export default {
   created() {},
   methods: {
     async onSubmit() {
-      const result = await loginAPI.sendEmail(this.form.email)
-      if (result.success) {
-        this.$router.push('/thx/password')
-      } else {
-        this.$toast.success(this.$t('error.error'))
-      }
+      await loginAPI.sendEmail(this.form.email)
+      // always give success to avoid email spying
+      this.$router.push('/thx/password')
     },
   },
 }
diff --git a/frontend/src/views/Pages/UserProfile.spec.js b/frontend/src/views/Pages/UserProfile.spec.js
deleted file mode 100644
index 7716be9cf..000000000
--- a/frontend/src/views/Pages/UserProfile.spec.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-
-import UserProfile from './UserProfile'
-
-const localVue = global.localVue
-
-describe('UserProfile', () => {
-  let wrapper
-
-  const Wrapper = () => {
-    return shallowMount(UserProfile, { localVue })
-  }
-
-  describe('shallowMount', () => {
-    beforeEach(() => {
-      wrapper = Wrapper()
-    })
-
-    it('renders the component', () => {
-      expect(wrapper.findComponent({ name: 'user-card' }).exists()).toBeTruthy()
-    })
-  })
-})
diff --git a/frontend/src/views/Pages/UserProfile.vue b/frontend/src/views/Pages/UserProfile.vue
deleted file mode 100644
index 882b52e78..000000000
--- a/frontend/src/views/Pages/UserProfile.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <div>
-    <div class="header pb-8 pt-5 pt-lg-8 d-flex align-items-center profile-header">
-      <b-container fluid></b-container>
-    </div>
-
-    <b-container fluid class="mt--6">
-      <b-row>
-        <b-col xl="12" class="order-xl-2 mb-5">
-          <user-card :balance="balance"></user-card>
-        </b-col>
-      </b-row>
-    </b-container>
-  </div>
-</template>
-<script>
-import UserCard from './UserProfile/UserCard.vue'
-
-export default {
-  components: {
-    UserCard,
-  },
-  props: {
-    balance: { type: Number, default: 0 },
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
index e07313c96..1fa26b5e0 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
@@ -9,8 +9,8 @@
         <b-row class="text-right">
           <b-col class="mb-3">
             <b-icon
-              v-if="editUserdata"
-              @click="editUserdata = !editUserdata"
+              v-if="showUserData"
+              @click="showUserData = !showUserData"
               class="pointer"
               icon="pencil"
             >
@@ -19,7 +19,7 @@
 
             <b-icon
               v-else
-              @click="editUserdata = !editUserdata"
+              @click="cancelEdit"
               class="pointer"
               icon="x-circle"
               variant="danger"
@@ -34,8 +34,8 @@
             <b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
               <small>{{ $t('form.firstname') }}</small>
             </b-col>
-            <b-col v-if="editUserdata" class="col-sm-10 col-md-9">
-              {{ $store.state.firstName }}
+            <b-col v-if="showUserData" class="col-sm-10 col-md-9">
+              {{ form.firstName }}
             </b-col>
             <b-col v-else class="col-md-9 col-sm-10">
               <b-input type="text" v-model="form.firstName"></b-input>
@@ -45,8 +45,8 @@
             <b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
               <small>{{ $t('form.lastname') }}</small>
             </b-col>
-            <b-col v-if="editUserdata" class="col-sm-10 col-md-9">
-              {{ $store.state.lastName }}
+            <b-col v-if="showUserData" class="col-sm-10 col-md-9">
+              {{ form.lastName }}
             </b-col>
             <b-col v-else class="col-md-9 col-sm-10">
               <b-input type="text" v-model="form.lastName"></b-input>
@@ -56,15 +56,15 @@
             <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
               <small>{{ $t('form.description') }}</small>
             </b-col>
-            <b-col v-if="editUserdata" class="col-sm-10 col-md-9">
-              {{ $store.state.description }}
+            <b-col v-if="showUserData" class="col-sm-10 col-md-9">
+              {{ form.description }}
             </b-col>
             <b-col v-else class="col-sm-10 col-md-9">
               <b-textarea rows="3" max-rows="6" v-model="form.description"></b-textarea>
             </b-col>
           </b-row>
 
-          <b-row class="text-right" v-if="!editUserdata">
+          <b-row class="text-right" v-if="!showUserData">
             <b-col>
               <div class="text-right" ref="submitButton">
                 <b-button
@@ -89,12 +89,9 @@ import loginAPI from '../../../apis/loginAPI'
 
 export default {
   name: 'FormUserData',
-  props: {
-    UserProfileTestData: { type: Object },
-  },
   data() {
     return {
-      editUserdata: true,
+      showUserData: true,
       sessionId: this.$store.state.sessionId,
       form: {
         firstName: this.$store.state.firstName,
@@ -105,6 +102,12 @@ export default {
     }
   },
   methods: {
+    cancelEdit() {
+      this.form.firstName = this.$store.state.firstName
+      this.form.lastName = this.$store.state.lastName
+      this.form.description = this.$store.state.description
+      this.showUserData = true
+    },
     loadSubmitButton() {
       if (
         this.form.firstName !== this.$store.state.firstName ||
@@ -116,7 +119,8 @@ export default {
         this.loading = true
       }
     },
-    async onSubmit() {
+    async onSubmit(event) {
+      event.preventDefault()
       const result = await loginAPI.updateUserInfos(
         this.$store.state.sessionId,
         this.$store.state.email,
@@ -130,10 +134,10 @@ export default {
         this.$store.commit('firstName', this.form.firstName)
         this.$store.commit('lastName', this.form.lastName)
         this.$store.commit('description', this.form.description)
-        this.editUserdata = true
-        alert('Deine Daten wurden gespeichert und sind geändert.')
+        this.showUserData = true
+        this.$toast.success(this.$t('site.profil.user-data.change-success'))
       } else {
-        alert(result.result.message)
+        this.$toast.error(result.result.message)
       }
     },
   },
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
index 38738e54a..2b3b451fe 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
@@ -73,9 +73,6 @@ export default {
       },
     }
   },
-  props: {
-    UserProfileTestData: { type: Object },
-  },
   methods: {
     async onSubmit() {
       const result = await loginAPI.changeUsernameProfile(
diff --git a/frontend/src/views/Pages/UserProfileOverview.vue b/frontend/src/views/Pages/UserProfileOverview.vue
index def5289cb..0708a2329 100644
--- a/frontend/src/views/Pages/UserProfileOverview.vue
+++ b/frontend/src/views/Pages/UserProfileOverview.vue
@@ -1,7 +1,7 @@
 <template>
   <b-container fluid>
     <user-card :balance="balance" :transactionCount="transactionCount"></user-card>
-    <form-user-data :UserProfileTestData="UserProfileTestData" />
+    <form-user-data />
     <form-username />
     <form-user-passwort />
   </b-container>
@@ -22,7 +22,6 @@ export default {
   props: {
     balance: { type: Number, default: 0 },
     transactionCount: { type: Number, default: 0 },
-    UserProfileTestData: { type: Object },
   },
 }
 </script>

From 9f5edda4662940ad37ecbb2fb056887403cb94ea Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Mon, 14 Jun 2021 15:24:09 +0200
Subject: [PATCH 5/6] toast errors on password reset

---
 frontend/src/views/Pages/ResetPassword.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/Pages/ResetPassword.vue b/frontend/src/views/Pages/ResetPassword.vue
index de8f8cad8..2647e8fa0 100644
--- a/frontend/src/views/Pages/ResetPassword.vue
+++ b/frontend/src/views/Pages/ResetPassword.vue
@@ -115,9 +115,7 @@ export default {
           */
         this.$router.push('/thx/reset')
       } else {
-        this.$bvToast.toast(result.result.message, {
-          title: this.$t('error.error'),
-        })
+        this.$toast.error(result.result.message)
       }
     },
     async authenticate() {
@@ -128,9 +126,7 @@ export default {
         this.sessionId = result.result.data.session_id
         this.email = result.result.data.user.email
       } else {
-        this.$bvToast.toast(result.result.message, {
-          title: this.$t('error.error'),
-        })
+        this.$toast.error(result.result.message)
       }
     },
   },

From be242518aed49916067350bc66799cd7163540ae Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Mon, 14 Jun 2021 15:46:13 +0200
Subject: [PATCH 6/6] test user profile overview

---
 .../views/Pages/UserProfileOverview.spec.js   | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 frontend/src/views/Pages/UserProfileOverview.spec.js

diff --git a/frontend/src/views/Pages/UserProfileOverview.spec.js b/frontend/src/views/Pages/UserProfileOverview.spec.js
new file mode 100644
index 000000000..617e0ade0
--- /dev/null
+++ b/frontend/src/views/Pages/UserProfileOverview.spec.js
@@ -0,0 +1,38 @@
+import { shallowMount } from '@vue/test-utils'
+import UserProfileOverview from './UserProfileOverview'
+
+const localVue = global.localVue
+
+describe('UserProfileOverview', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+  }
+
+  const Wrapper = () => {
+    return shallowMount(UserProfileOverview, { localVue, mocks })
+  }
+
+  describe('shallow Mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a user card', () => {
+      expect(wrapper.findComponent({ name: 'UserCard' }).exists()).toBeTruthy()
+    })
+
+    it('has a user data form', () => {
+      expect(wrapper.findComponent({ name: 'FormUserData' }).exists()).toBeTruthy()
+    })
+
+    it('has a user name form', () => {
+      expect(wrapper.findComponent({ name: 'FormUsername' }).exists()).toBeTruthy()
+    })
+
+    it('has a user password form', () => {
+      expect(wrapper.findComponent({ name: 'FormUserPasswort' }).exists()).toBeTruthy()
+    })
+  })
+})