From 3c4eeda891abde8ba122ca87d3c1340d45d6e5c1 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Fri, 11 Jun 2021 11:25:11 +0200
Subject: [PATCH 01/27] kill BaseHeader

---
 frontend/src/components/BaseHeader.vue   | 22 ----------
 frontend/src/plugins/globalComponents.js |  6 +--
 frontend/test/testSetup.js               | 51 ------------------------
 3 files changed, 1 insertion(+), 78 deletions(-)
 delete mode 100644 frontend/src/components/BaseHeader.vue
 delete mode 100644 frontend/test/testSetup.js

diff --git a/frontend/src/components/BaseHeader.vue b/frontend/src/components/BaseHeader.vue
deleted file mode 100644
index 90e8a1a5a..000000000
--- a/frontend/src/components/BaseHeader.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div class="header" :class="{ [`bg-${type}`]: type }">
-    <b-container fluid>
-      <div class="header-body">
-        <slot></slot>
-      </div>
-    </b-container>
-  </div>
-</template>
-<script>
-export default {
-  name: 'base-header',
-  props: {
-    type: {
-      type: String,
-      default: 'success',
-      description: 'Header background type',
-    },
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/plugins/globalComponents.js b/frontend/src/plugins/globalComponents.js
index 312f19296..8e8410435 100755
--- a/frontend/src/plugins/globalComponents.js
+++ b/frontend/src/plugins/globalComponents.js
@@ -11,11 +11,8 @@ import BaseProgress from '@/components/BaseProgress'
 import BasePagination from '@/components/BasePagination'
 import BaseAlert from '@/components/BaseAlert'
 import BaseNav from '@/components/Navbar/BaseNav'
-import BaseHeader from '@/components/BaseHeader'
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
-/**
- * You can register global components here and use them as a plugin in your main Vue instance
- */
+
 
 const GlobalComponents = {
   install(Vue) {
@@ -23,7 +20,6 @@ const GlobalComponents = {
     Vue.component(BaseAlert.name, BaseAlert)
     Vue.component(BaseButton.name, BaseButton)
     Vue.component(BaseCheckbox.name, BaseCheckbox)
-    Vue.component(BaseHeader.name, BaseHeader)
     Vue.component(BaseInput.name, BaseInput)
     Vue.component(BaseDropdown.name, BaseDropdown)
     Vue.component(BaseNav.name, BaseNav)
diff --git a/frontend/test/testSetup.js b/frontend/test/testSetup.js
deleted file mode 100644
index 7af8631ea..000000000
--- a/frontend/test/testSetup.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { createLocalVue } from '@vue/test-utils'
-import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
-import Vuex from 'vuex'
-import { ValidationProvider, ValidationObserver, extend } from 'vee-validate'
-import * as rules from 'vee-validate/dist/rules'
-
-import { messages } from 'vee-validate/dist/locale/en.json'
-import BaseInput from '@/components/Inputs/BaseInput.vue'
-import BaseButton from '@/components/BaseButton.vue'
-import RegeneratorRuntime from 'regenerator-runtime'
-import Notifications from '@/components/NotificationPlugin'
-import SideBar from '@/components/SidebarPlugin'
-import VueRouter from 'vue-router'
-import BaseDropdown from '@/components/BaseDropdown.vue'
-import VueQrcode from 'vue-qrcode'
-import BaseHeader from '@/components/BaseHeader'
-import StatsCard from '@/components/Cards/StatsCard.vue'
-
-import VueMoment from 'vue-moment'
-
-import clickOutside from '@/directives/click-ouside.js'
-import { focus } from 'vue-focus'
-
-global.localVue = createLocalVue()
-
-Object.keys(rules).forEach((rule) => {
-  extend(rule, {
-    ...rules[rule], // copies rule configuration
-    message: messages[rule], // assign message
-  })
-})
-
-global.localVue.use(BootstrapVue)
-global.localVue.use(Vuex)
-global.localVue.use(IconsPlugin)
-global.localVue.use(RegeneratorRuntime)
-global.localVue.use(Notifications)
-global.localVue.use(SideBar)
-global.localVue.use(VueRouter)
-global.localVue.use(VueQrcode)
-global.localVue.use(VueMoment)
-global.localVue.component(BaseInput.name, BaseInput)
-global.localVue.component('validation-provider', ValidationProvider)
-global.localVue.component('validation-observer', ValidationObserver)
-global.localVue.component(BaseButton.name, BaseButton)
-global.localVue.component(BaseDropdown.name, BaseDropdown)
-global.localVue.component(BaseHeader.name, BaseHeader)
-global.localVue.component(StatsCard.name, StatsCard)
-
-global.localVue.directive('click-outside', clickOutside)
-global.localVue.directive('focus', focus)

From 812842c5b585a4c13bb90c1e885facc351a2cc2f Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Fri, 11 Jun 2021 11:34:06 +0200
Subject: [PATCH 02/27] kill BaseAlert

---
 frontend/src/components/BaseAlert.vue    | 75 ------------------------
 frontend/src/components/index.js         |  2 -
 frontend/src/plugins/globalComponents.js |  2 -
 3 files changed, 79 deletions(-)
 delete mode 100644 frontend/src/components/BaseAlert.vue

diff --git a/frontend/src/components/BaseAlert.vue b/frontend/src/components/BaseAlert.vue
deleted file mode 100644
index fe17428a2..000000000
--- a/frontend/src/components/BaseAlert.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <fade-transition>
-    <b-alert
-      v-model="visible"
-      :variant="type"
-      :class="[{ 'alert-dismissible': dismissible }]"
-      role="alert"
-    >
-      <slot v-if="!dismissible"></slot>
-      <template v-else>
-        <template v-if="icon || $slots.icon">
-          <slot name="icon">
-            <span class="alert-icon" data-notify="icon">
-              <i :class="icon"></i>
-            </span>
-          </slot>
-        </template>
-
-        <span class="alert-text"><slot></slot></span>
-
-        <slot name="dismiss-icon">
-          <button
-            type="button"
-            class="close"
-            data-dismiss="alert"
-            aria-label="Close"
-            @click="dismissAlert"
-          >
-            <span aria-hidden="true">×</span>
-          </button>
-        </slot>
-      </template>
-    </b-alert>
-  </fade-transition>
-</template>
-<script>
-import { FadeTransition } from 'vue2-transitions'
-
-export default {
-  name: 'base-alert',
-  components: {
-    FadeTransition,
-  },
-  created() {
-    // console.log('base-alert gesetzt in =>', this.$route.path)
-  },
-  props: {
-    type: {
-      type: String,
-      default: 'default',
-      description: 'Alert type',
-    },
-    dismissible: {
-      type: Boolean,
-      default: false,
-      description: 'Whether alert is dismissible (closeable)',
-    },
-    icon: {
-      type: String,
-      default: '',
-      description: 'Alert icon to display',
-    },
-  },
-  data() {
-    return {
-      visible: true,
-    }
-  },
-  methods: {
-    dismissAlert() {
-      this.visible = false
-    },
-  },
-}
-</script>
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
index c75b2a8fa..151d25dbb 100755
--- a/frontend/src/components/index.js
+++ b/frontend/src/components/index.js
@@ -1,5 +1,4 @@
 import BaseCheckbox from './Inputs/BaseCheckbox.vue'
-import BaseAlert from './BaseAlert.vue'
 import BaseRadio from './Inputs/BaseRadio.vue'
 import BaseInput from './Inputs/BaseInput.vue'
 import Badge from './Badge'
@@ -28,7 +27,6 @@ import SidebarPlugin from './SidebarPlugin'
 export {
   BaseCheckbox,
   Badge,
-  BaseAlert,
   BaseProgress,
   BasePagination,
   BaseRadio,
diff --git a/frontend/src/plugins/globalComponents.js b/frontend/src/plugins/globalComponents.js
index 8e8410435..dad554f42 100755
--- a/frontend/src/plugins/globalComponents.js
+++ b/frontend/src/plugins/globalComponents.js
@@ -9,7 +9,6 @@ import BaseCheckbox from '@/components/Inputs/BaseCheckbox.vue'
 import BaseRadio from '@/components/Inputs/BaseRadio'
 import BaseProgress from '@/components/BaseProgress'
 import BasePagination from '@/components/BasePagination'
-import BaseAlert from '@/components/BaseAlert'
 import BaseNav from '@/components/Navbar/BaseNav'
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 
@@ -17,7 +16,6 @@ import { ValidationProvider, ValidationObserver } from 'vee-validate'
 const GlobalComponents = {
   install(Vue) {
     Vue.component(Badge.name, Badge)
-    Vue.component(BaseAlert.name, BaseAlert)
     Vue.component(BaseButton.name, BaseButton)
     Vue.component(BaseCheckbox.name, BaseCheckbox)
     Vue.component(BaseInput.name, BaseInput)

From 8b7c2e7eea525ec7144c033bbaa89046bcfb6922 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Fri, 11 Jun 2021 11:38:54 +0200
Subject: [PATCH 03/27] kill BasePagination

---
 frontend/src/components/BasePagination.vue | 67 ----------------------
 frontend/src/components/index.js           |  2 -
 frontend/src/plugins/globalComponents.js   |  2 -
 3 files changed, 71 deletions(-)
 delete mode 100755 frontend/src/components/BasePagination.vue

diff --git a/frontend/src/components/BasePagination.vue b/frontend/src/components/BasePagination.vue
deleted file mode 100755
index 9fc633481..000000000
--- a/frontend/src/components/BasePagination.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <div>
-    <b-pagination
-      first-number
-      last-number
-      :per-page="perPage"
-      :size="size"
-      :value="value"
-      @change="(val) => $emit('change', val)"
-      :align="align"
-      :total-rows="total"
-    >
-      <template v-slot:prev-text>
-        <a class="page-link" aria-label="Previous">
-          <span aria-hidden="true">
-            <i class="fa fa-angle-left" aria-hidden="true"></i>
-          </span>
-        </a>
-      </template>
-      <template v-slot:next-text>
-        <a class="page-link" aria-label="Next">
-          <span aria-hidden="true">
-            <i class="fa fa-angle-right" aria-hidden="true"></i>
-          </span>
-        </a>
-      </template>
-    </b-pagination>
-  </div>
-</template>
-<script>
-export default {
-  name: 'base-pagination',
-  props: {
-    pageCount: {
-      type: Number,
-      default: 0,
-      description: 'Pagination page count. This should be specified in combination with perPage',
-    },
-    perPage: {
-      type: Number,
-      default: 10,
-      description: 'Pagination per page. Should be specified with total or pageCount',
-    },
-    total: {
-      type: Number,
-      default: 0,
-      description:
-        'Can be specified instead of pageCount. The page count in this case will be total/perPage',
-    },
-    value: {
-      type: Number,
-      default: 1,
-      description: 'Pagination value',
-    },
-    size: {
-      type: String,
-      default: '',
-      description: 'Pagination size',
-    },
-    align: {
-      type: String,
-      default: '',
-      description: 'Pagination alignment (e.g center|start|end)',
-    },
-  },
-}
-</script>
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
index 151d25dbb..94bbba682 100755
--- a/frontend/src/components/index.js
+++ b/frontend/src/components/index.js
@@ -20,7 +20,6 @@ import CollapseItem from './Collapse/CollapseItem.vue'
 import Modal from './Modal.vue'
 import BaseSlider from './BaseSlider.vue'
 
-import BasePagination from './BasePagination.vue'
 
 import SidebarPlugin from './SidebarPlugin'
 
@@ -28,7 +27,6 @@ export {
   BaseCheckbox,
   Badge,
   BaseProgress,
-  BasePagination,
   BaseRadio,
   BaseInput,
   Card,
diff --git a/frontend/src/plugins/globalComponents.js b/frontend/src/plugins/globalComponents.js
index dad554f42..cd16f3c61 100755
--- a/frontend/src/plugins/globalComponents.js
+++ b/frontend/src/plugins/globalComponents.js
@@ -8,7 +8,6 @@ import Badge from '@/components/Badge.vue'
 import BaseCheckbox from '@/components/Inputs/BaseCheckbox.vue'
 import BaseRadio from '@/components/Inputs/BaseRadio'
 import BaseProgress from '@/components/BaseProgress'
-import BasePagination from '@/components/BasePagination'
 import BaseNav from '@/components/Navbar/BaseNav'
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 
@@ -21,7 +20,6 @@ const GlobalComponents = {
     Vue.component(BaseInput.name, BaseInput)
     Vue.component(BaseDropdown.name, BaseDropdown)
     Vue.component(BaseNav.name, BaseNav)
-    Vue.component(BasePagination.name, BasePagination)
     Vue.component(BaseProgress.name, BaseProgress)
     Vue.component(BaseRadio.name, BaseRadio)
     Vue.component(Card.name, Card)

From 7eab86357ea971145fe8cdba5002661f781302b4 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Fri, 11 Jun 2021 11:54:38 +0200
Subject: [PATCH 04/27] kill BaseProgress

---
 frontend/src/components/BaseProgress.vue | 79 ------------------------
 frontend/src/components/index.js         |  2 -
 frontend/src/plugins/globalComponents.js |  2 -
 3 files changed, 83 deletions(-)
 delete mode 100755 frontend/src/components/BaseProgress.vue

diff --git a/frontend/src/components/BaseProgress.vue b/frontend/src/components/BaseProgress.vue
deleted file mode 100755
index c2f44bf2c..000000000
--- a/frontend/src/components/BaseProgress.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <div class="wrapper">
-    <div :class="`progress-${type}`" v-if="showLabel">
-      <div class="progress-label">
-        <slot name="label">
-          <span>{{ label }}</span>
-        </slot>
-      </div>
-      <div class="progress-percentage">
-        <slot>
-          <span>{{ value }}%</span>
-        </slot>
-      </div>
-    </div>
-    <b-progress :size="size" :class="[progressClasses]" :style="`height: ${height}px`">
-      <b-progress-bar :class="computedClasses" :value="value"></b-progress-bar>
-    </b-progress>
-  </div>
-</template>
-<script>
-export default {
-  name: 'base-progress',
-  props: {
-    striped: {
-      type: Boolean,
-      description: 'Whether progress is striped',
-    },
-    animated: {
-      type: Boolean,
-      description: 'Whether progress is animated (works only with `striped` prop together)',
-    },
-    label: {
-      type: String,
-      description: 'Progress label (shown on the left above progress)',
-    },
-    height: {
-      type: Number,
-      default: 3,
-      description: 'Progress line height',
-    },
-    type: {
-      type: String,
-      default: 'default',
-      description: 'Progress type (e.g danger, primary etc)',
-    },
-    showLabel: {
-      type: Boolean,
-      default: false,
-    },
-    progressClasses: {
-      type: [Array, String],
-      default: '',
-      description: 'Progress css classes',
-    },
-    size: {
-      type: String,
-      default: '',
-    },
-    value: {
-      type: Number,
-      default: 0,
-      validator: (value) => {
-        return value >= 0 && value <= 100
-      },
-      description: 'Progress value',
-    },
-  },
-  computed: {
-    computedClasses() {
-      return [
-        { 'progress-bar-striped': this.striped },
-        { 'progress-bar-animated': this.animated },
-        { [`bg-${this.type}`]: this.type },
-      ]
-    },
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
index 94bbba682..eccd28455 100755
--- a/frontend/src/components/index.js
+++ b/frontend/src/components/index.js
@@ -2,7 +2,6 @@ import BaseCheckbox from './Inputs/BaseCheckbox.vue'
 import BaseRadio from './Inputs/BaseRadio.vue'
 import BaseInput from './Inputs/BaseInput.vue'
 import Badge from './Badge'
-import BaseProgress from './BaseProgress.vue'
 import BaseButton from './BaseButton.vue'
 
 import BaseDropdown from './BaseDropdown.vue'
@@ -26,7 +25,6 @@ import SidebarPlugin from './SidebarPlugin'
 export {
   BaseCheckbox,
   Badge,
-  BaseProgress,
   BaseRadio,
   BaseInput,
   Card,
diff --git a/frontend/src/plugins/globalComponents.js b/frontend/src/plugins/globalComponents.js
index cd16f3c61..c6531ef13 100755
--- a/frontend/src/plugins/globalComponents.js
+++ b/frontend/src/plugins/globalComponents.js
@@ -7,7 +7,6 @@ import BaseButton from '@/components/BaseButton.vue'
 import Badge from '@/components/Badge.vue'
 import BaseCheckbox from '@/components/Inputs/BaseCheckbox.vue'
 import BaseRadio from '@/components/Inputs/BaseRadio'
-import BaseProgress from '@/components/BaseProgress'
 import BaseNav from '@/components/Navbar/BaseNav'
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 
@@ -20,7 +19,6 @@ const GlobalComponents = {
     Vue.component(BaseInput.name, BaseInput)
     Vue.component(BaseDropdown.name, BaseDropdown)
     Vue.component(BaseNav.name, BaseNav)
-    Vue.component(BaseProgress.name, BaseProgress)
     Vue.component(BaseRadio.name, BaseRadio)
     Vue.component(Card.name, Card)
     Vue.component(Modal.name, Modal)

From 6b5a65525a3f37914d73fda7fd7c682bdf3356ab Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Fri, 11 Jun 2021 12:11:35 +0200
Subject: [PATCH 05/27] kill BaseCheckbox

---
 .../src/components/Inputs/BaseCheckbox.vue    | 78 -------------------
 frontend/src/components/Inputs/BaseRadio.vue  | 64 ---------------
 frontend/src/components/index.js              |  4 -
 frontend/src/plugins/globalComponents.js      |  4 -
 4 files changed, 150 deletions(-)
 delete mode 100755 frontend/src/components/Inputs/BaseCheckbox.vue
 delete mode 100755 frontend/src/components/Inputs/BaseRadio.vue

diff --git a/frontend/src/components/Inputs/BaseCheckbox.vue b/frontend/src/components/Inputs/BaseCheckbox.vue
deleted file mode 100755
index 2aaa06fba..000000000
--- a/frontend/src/components/Inputs/BaseCheckbox.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <div
-    class="custom-control custom-checkbox"
-    :class="[{ disabled: disabled }, { [`custom-checkbox-${type}`]: type }, inlineClass]"
-  >
-    <input
-      :id="cbId"
-      class="custom-control-input"
-      :class="inputClasses"
-      type="checkbox"
-      :disabled="disabled"
-      v-model="model"
-    />
-    <label :for="cbId" class="custom-control-label">
-      <slot>
-        <span v-if="inline">&nbsp;</span>
-      </slot>
-    </label>
-  </div>
-</template>
-<script>
-export default {
-  name: 'base-checkbox',
-  model: {
-    prop: 'checked',
-  },
-  props: {
-    checked: {
-      type: [Array, Boolean],
-      description: 'Whether checkbox is checked',
-    },
-    disabled: {
-      type: Boolean,
-      description: 'Whether checkbox is disabled',
-    },
-    inline: {
-      type: Boolean,
-      description: 'Whether checkbox is inline',
-    },
-    inputClasses: {
-      type: [String, Object, Array],
-      description: 'Checkbox input classes',
-    },
-    type: {
-      type: String,
-      description: 'Checkbox type (e.g info, danger etc)',
-    },
-  },
-  data() {
-    return {
-      cbId: '',
-      touched: false,
-    }
-  },
-  computed: {
-    model: {
-      get() {
-        return this.checked
-      },
-      set(check) {
-        if (!this.touched) {
-          this.touched = true
-        }
-        this.$emit('input', check)
-      },
-    },
-    inlineClass() {
-      if (this.inline) {
-        return `form-check-inline`
-      }
-      return ''
-    },
-  },
-  created() {
-    this.cbId = Math.random().toString(16).slice(2)
-  },
-}
-</script>
diff --git a/frontend/src/components/Inputs/BaseRadio.vue b/frontend/src/components/Inputs/BaseRadio.vue
deleted file mode 100755
index 697812698..000000000
--- a/frontend/src/components/Inputs/BaseRadio.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <div class="custom-control custom-radio" :class="[inlineClass, { disabled: disabled }]">
-    <input
-      :id="cbId"
-      class="custom-control-input"
-      type="radio"
-      :disabled="disabled"
-      :value="name"
-      v-model="model"
-    />
-    <label :for="cbId" class="custom-control-label">
-      <slot>
-        <span v-if="inline">&nbsp;</span>
-      </slot>
-    </label>
-  </div>
-</template>
-<script>
-export default {
-  name: 'base-radio',
-  props: {
-    name: {
-      type: [String, Number],
-      description: 'Radio label',
-    },
-    disabled: {
-      type: Boolean,
-      description: 'Whether radio is disabled',
-    },
-    value: {
-      type: [String, Boolean],
-      description: 'Radio value',
-    },
-    inline: {
-      type: Boolean,
-      description: 'Whether radio is inline',
-    },
-  },
-  data() {
-    return {
-      cbId: '',
-    }
-  },
-  computed: {
-    model: {
-      get() {
-        return this.value
-      },
-      set(value) {
-        this.$emit('input', value)
-      },
-    },
-    inlineClass() {
-      if (this.inline) {
-        return `form-check-inline`
-      }
-      return ''
-    },
-  },
-  created() {
-    this.cbId = Math.random().toString(16).slice(2)
-  },
-}
-</script>
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
index eccd28455..c03fae690 100755
--- a/frontend/src/components/index.js
+++ b/frontend/src/components/index.js
@@ -1,5 +1,3 @@
-import BaseCheckbox from './Inputs/BaseCheckbox.vue'
-import BaseRadio from './Inputs/BaseRadio.vue'
 import BaseInput from './Inputs/BaseInput.vue'
 import Badge from './Badge'
 import BaseButton from './BaseButton.vue'
@@ -23,9 +21,7 @@ import BaseSlider from './BaseSlider.vue'
 import SidebarPlugin from './SidebarPlugin'
 
 export {
-  BaseCheckbox,
   Badge,
-  BaseRadio,
   BaseInput,
   Card,
   StatsCard,
diff --git a/frontend/src/plugins/globalComponents.js b/frontend/src/plugins/globalComponents.js
index c6531ef13..6162d98ed 100755
--- a/frontend/src/plugins/globalComponents.js
+++ b/frontend/src/plugins/globalComponents.js
@@ -5,8 +5,6 @@ import Modal from '@/components/Modal.vue'
 import StatsCard from '@/components/Cards/StatsCard.vue'
 import BaseButton from '@/components/BaseButton.vue'
 import Badge from '@/components/Badge.vue'
-import BaseCheckbox from '@/components/Inputs/BaseCheckbox.vue'
-import BaseRadio from '@/components/Inputs/BaseRadio'
 import BaseNav from '@/components/Navbar/BaseNav'
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 
@@ -15,11 +13,9 @@ const GlobalComponents = {
   install(Vue) {
     Vue.component(Badge.name, Badge)
     Vue.component(BaseButton.name, BaseButton)
-    Vue.component(BaseCheckbox.name, BaseCheckbox)
     Vue.component(BaseInput.name, BaseInput)
     Vue.component(BaseDropdown.name, BaseDropdown)
     Vue.component(BaseNav.name, BaseNav)
-    Vue.component(BaseRadio.name, BaseRadio)
     Vue.component(Card.name, Card)
     Vue.component(Modal.name, Modal)
     Vue.component(StatsCard.name, StatsCard)

From 36b6d8625ae9ab883d1ca9c8598215f3bae282fe Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Fri, 11 Jun 2021 12:42:50 +0200
Subject: [PATCH 06/27] kill     Vue.component(BaseDropdown.name, BaseDropdown)

---
 frontend/src/components/BaseDropdown.vue |  97 -----------------
 frontend/src/components/Modal-OLD.vue    | 127 -----------------------
 frontend/src/components/Modal.vue        |  80 --------------
 frontend/src/components/index.js         |   4 -
 frontend/src/plugins/globalComponents.js |   4 -
 frontend/src/store/store.js              |   1 -
 6 files changed, 313 deletions(-)
 delete mode 100644 frontend/src/components/BaseDropdown.vue
 delete mode 100644 frontend/src/components/Modal-OLD.vue
 delete mode 100644 frontend/src/components/Modal.vue

diff --git a/frontend/src/components/BaseDropdown.vue b/frontend/src/components/BaseDropdown.vue
deleted file mode 100644
index 8db496992..000000000
--- a/frontend/src/components/BaseDropdown.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    :class="[{ show: isOpen }, `drop${direction}`]"
-    @click="toggleDropDown"
-    v-click-outside="closeDropDown"
-  >
-    <slot name="title-container" :is-open="isOpen">
-      <component
-        :is="titleTag"
-        class="btn-rotate"
-        :class="[{ 'dropdown-toggle': hasToggle }, titleClasses]"
-        :aria-expanded="isOpen"
-        data-toggle="dropdown"
-      >
-        <slot name="title" :is-open="isOpen">
-          <i :class="icon"></i>
-          {{ title }}
-        </slot>
-      </component>
-    </slot>
-    <ul
-      class="dropdown-menu"
-      :class="[{ show: isOpen }, { 'dropdown-menu-right': menuOnRight }, menuClasses]"
-    >
-      <slot></slot>
-    </ul>
-  </component>
-</template>
-<script>
-export default {
-  name: 'base-dropdown',
-  props: {
-    tag: {
-      type: String,
-      default: 'div',
-      description: 'Dropdown html tag (e.g div, ul etc)',
-    },
-    titleTag: {
-      type: String,
-      default: 'button',
-      description: 'Dropdown title (toggle) html tag',
-    },
-    title: {
-      type: String,
-      description: 'Dropdown title',
-    },
-    direction: {
-      type: String,
-      default: 'down', // up | down
-      description: 'Dropdown menu direction (up|down)',
-    },
-    icon: {
-      type: String,
-      description: 'Dropdown icon',
-    },
-    titleClasses: {
-      type: [String, Object, Array],
-      description: 'Title css classes',
-    },
-    menuClasses: {
-      type: [String, Object],
-      description: 'Menu css classes',
-    },
-    menuOnRight: {
-      type: Boolean,
-      description: 'Whether menu should appear on the right',
-    },
-    hasToggle: {
-      type: Boolean,
-      description: 'Whether dropdown has arrow icon shown',
-      default: true,
-    },
-  },
-  data() {
-    return {
-      isOpen: false,
-    }
-  },
-  methods: {
-    toggleDropDown() {
-      this.isOpen = !this.isOpen
-      this.$emit('change', this.isOpen)
-    },
-    closeDropDown() {
-      this.isOpen = false
-      this.$emit('change', false)
-    },
-  },
-}
-</script>
-<style lang="scss" scoped>
-.dropdown {
-  cursor: pointer;
-  user-select: none;
-}
-</style>
diff --git a/frontend/src/components/Modal-OLD.vue b/frontend/src/components/Modal-OLD.vue
deleted file mode 100644
index 515b510a0..000000000
--- a/frontend/src/components/Modal-OLD.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-  <slide-y-up-transition :duration="animationDuration">
-    <b-modal
-      class="modal fade"
-      ref="app-modal"
-      :size="size"
-      :hide-header="!$slots.header"
-      :modal-class="[{ 'modal-mini': type === 'mini' }, ...modalClasses]"
-      @mousedown.self="closeModal"
-      tabindex="-1"
-      role="dialog"
-      centered
-      @close="closeModal"
-      @hide="closeModal"
-      :header-class="headerClasses"
-      :footer-class="footerClasses"
-      :content-class="[gradient ? `bg-gradient-${gradient}` : '', ...modalContentClasses]"
-      :body-class="bodyClasses"
-      :aria-hidden="!show"
-    >
-      <template v-slot:modal-header>
-        <slot name="header"></slot>
-        <slot name="close-button">
-          <button
-            type="button"
-            class="close"
-            v-if="showClose"
-            @click="closeModal"
-            data-dismiss="modal"
-            aria-label="Close"
-          >
-            <span :aria-hidden="!show">×</span>
-          </button>
-        </slot>
-      </template>
-
-      <slot />
-
-      <template v-slot:modal-footer>
-        <slot name="footer"></slot>
-      </template>
-    </b-modal>
-  </slide-y-up-transition>
-</template>
-<script>
-import { SlideYUpTransition } from 'vue2-transitions'
-
-export default {
-  name: 'modal',
-  components: {
-    SlideYUpTransition,
-  },
-  props: {
-    show: Boolean,
-    showClose: {
-      type: Boolean,
-      default: true,
-    },
-    type: {
-      type: String,
-      default: '',
-      validator(value) {
-        const acceptedValues = ['', 'notice', 'mini']
-        return acceptedValues.indexOf(value) !== -1
-      },
-      description: 'Modal type (notice|mini|"") ',
-    },
-    modalClasses: {
-      type: [Object, String],
-      description: 'Modal dialog css classes',
-    },
-    size: {
-      type: String,
-      description: 'Modal size',
-      validator(value) {
-        const acceptedValues = ['', 'sm', 'lg']
-        return acceptedValues.indexOf(value) !== -1
-      },
-    },
-    modalContentClasses: {
-      type: [Object, String],
-      description: 'Modal dialog content css classes',
-    },
-    gradient: {
-      type: String,
-      description: 'Modal gradient type (danger, primary etc)',
-    },
-    headerClasses: {
-      type: [Object, String],
-      description: 'Modal Header css classes',
-    },
-    bodyClasses: {
-      type: [Object, String],
-      description: 'Modal Body css classes',
-    },
-    footerClasses: {
-      type: [Object, String],
-      description: 'Modal Footer css classes',
-    },
-    animationDuration: {
-      type: Number,
-      default: 500,
-      description: 'Modal transition duration',
-    },
-  },
-  methods: {
-    closeModal() {
-      this.$emit('update:show', false)
-      this.$emit('close')
-    },
-  },
-  watch: {
-    show(val) {
-      if (val) {
-        this.$refs['app-modal'].show()
-      } else {
-        this.$refs['app-modal'].hide()
-      }
-    },
-  },
-}
-</script>
-<style>
-.modal-backdrop {
-  background-color: rgba(0, 0, 0, 0.6) !important;
-}
-</style>
diff --git a/frontend/src/components/Modal.vue b/frontend/src/components/Modal.vue
deleted file mode 100644
index c43bf6c67..000000000
--- a/frontend/src/components/Modal.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <!--Notice modal-->
-  <modal
-    :show.sync="$store.state.modals"
-    modal-classes="modal-danger"
-    modal-content-classes="bg-gradient-danger"
-  >
-    <h6 slot="header" class="modal-title">Your attention is required</h6>
-
-    <div class="py-3 text-center">
-      <form ref="form" @submit.stop.prevent="handleSubmit">
-        <b-form-group
-          label="Name"
-          label-for="name-input"
-          invalid-feedback="Name is required"
-          :state="nameState"
-        >
-          <b-form-input id="name-input" v-model="name" :state="nameState" required></b-form-input>
-        </b-form-group>
-      </form>
-    </div>
-
-    <template slot="footer">
-      <base-button type="white">Ok</base-button>
-      <base-button type="link" class="ml-auto" @click="$store.state.modals = false">
-        abbrechen
-      </base-button>
-    </template>
-  </modal>
-</template>
-
-<script>
-export default {
-  name: 'modal',
-  data() {
-    return {
-      name: '',
-      nameState: null,
-      submittedNames: [],
-    }
-  },
-  /* Modal */
-  checkFormValidity() {
-    const valid = this.$refs.form.checkValidity()
-    this.nameState = valid
-    return valid
-  },
-  resetModal() {
-    this.name = ''
-    this.nameState = null
-  },
-  handleOk(bvModalEvt) {
-    // Prevent modal from closing
-    bvModalEvt.preventDefault()
-    // Trigger submit handler
-    this.handleSubmit()
-  },
-  handleSubmit() {
-    // Exit when the form isn't valid
-    if (!this.checkFormValidity()) {
-      return
-    }
-    // Push the name to submitted names
-    this.submittedNames.push(this.name)
-    this.$store.state.modals = false
-    this.$store.commit('loginAsAdmin')
-    this.$router.push('/AdminOverview')
-
-    // Hide the modal manually
-    this.$nextTick(() => {
-      this.$bvModal.hide('modal-prevent-closing')
-    })
-  },
-}
-</script>
-<style>
-.modal-backdrop {
-  background-color: rgba(0, 0, 0, 0.6) !important;
-}
-</style>
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
index c03fae690..2eb0be846 100755
--- a/frontend/src/components/index.js
+++ b/frontend/src/components/index.js
@@ -2,7 +2,6 @@ import BaseInput from './Inputs/BaseInput.vue'
 import Badge from './Badge'
 import BaseButton from './BaseButton.vue'
 
-import BaseDropdown from './BaseDropdown.vue'
 import BaseTable from './BaseTable.vue'
 
 import Card from './Cards/Card.vue'
@@ -14,7 +13,6 @@ import TabPane from './Tabs/Tab.vue'
 import Tabs from './Tabs/Tabs.vue'
 import Collapse from './Collapse/Collapse.vue'
 import CollapseItem from './Collapse/CollapseItem.vue'
-import Modal from './Modal.vue'
 import BaseSlider from './BaseSlider.vue'
 
 
@@ -26,13 +24,11 @@ export {
   Card,
   StatsCard,
   BaseTable,
-  BaseDropdown,
   SidebarPlugin,
   BaseNav,
   NavbarToggleButton,
   TabPane,
   Tabs,
-  Modal,
   BaseSlider,
   BaseButton,
   Collapse,
diff --git a/frontend/src/plugins/globalComponents.js b/frontend/src/plugins/globalComponents.js
index 6162d98ed..06bf20ae6 100755
--- a/frontend/src/plugins/globalComponents.js
+++ b/frontend/src/plugins/globalComponents.js
@@ -1,7 +1,5 @@
 import BaseInput from '@/components/Inputs/BaseInput.vue'
-import BaseDropdown from '@/components/BaseDropdown.vue'
 import Card from '@/components/Cards/Card.vue'
-import Modal from '@/components/Modal.vue'
 import StatsCard from '@/components/Cards/StatsCard.vue'
 import BaseButton from '@/components/BaseButton.vue'
 import Badge from '@/components/Badge.vue'
@@ -14,10 +12,8 @@ const GlobalComponents = {
     Vue.component(Badge.name, Badge)
     Vue.component(BaseButton.name, BaseButton)
     Vue.component(BaseInput.name, BaseInput)
-    Vue.component(BaseDropdown.name, BaseDropdown)
     Vue.component(BaseNav.name, BaseNav)
     Vue.component(Card.name, Card)
-    Vue.component(Modal.name, Modal)
     Vue.component(StatsCard.name, StatsCard)
     Vue.component('validation-provider', ValidationProvider)
     Vue.component('validation-observer', ValidationObserver)
diff --git a/frontend/src/store/store.js b/frontend/src/store/store.js
index 4c7e10a87..9b98645bd 100644
--- a/frontend/src/store/store.js
+++ b/frontend/src/store/store.js
@@ -58,7 +58,6 @@ export const store = new Vuex.Store({
     sessionId: null,
     email: '',
     language: null,
-    modals: false,
     firstName: '',
     lastName: '',
     username: '',

From 8d26296248a5fa0e4546b29f1899b6b2c06ed852 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Fri, 11 Jun 2021 20:02:52 +0200
Subject: [PATCH 07/27] remove base-input, validation from bootstrap

---
 frontend/src/components/BaseButton.vue   |  75 ----------------
 frontend/src/components/index.js         |   3 -
 frontend/src/plugins/dashboard-plugin.js |  26 +++---
 frontend/src/plugins/globalComponents.js |   3 -
 frontend/src/views/Pages/Login.vue       | 105 ++++++++++++++++-------
 frontend/test/testSetup.js               |  44 ++++++++++
 6 files changed, 133 insertions(+), 123 deletions(-)
 delete mode 100644 frontend/src/components/BaseButton.vue
 create mode 100644 frontend/test/testSetup.js

diff --git a/frontend/src/components/BaseButton.vue b/frontend/src/components/BaseButton.vue
deleted file mode 100644
index 009add59b..000000000
--- a/frontend/src/components/BaseButton.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <b-button
-    :type="nativeType"
-    :disabled="disabled || loading"
-    @click="handleClick"
-    class="base-button"
-    :variant="!outline ? type : `outline-${type}`"
-    :size="size"
-    :block="block"
-    :class="[
-      { 'rounded-circle': round },
-      { 'btn-wd': wide },
-      { 'btn-icon btn-fab': icon },
-      { 'btn-link': link },
-      { disabled: disabled },
-    ]"
-  >
-    <slot name="loading">
-      <i v-if="loading" class="fas fa-spinner fa-spin"></i>
-    </slot>
-    <slot></slot>
-  </b-button>
-</template>
-<script>
-export default {
-  name: 'base-button',
-  props: {
-    round: Boolean,
-    icon: Boolean,
-    block: Boolean,
-    loading: Boolean,
-    wide: Boolean,
-    disabled: Boolean,
-    type: {
-      type: String,
-      default: 'default',
-      description: 'Button type (primary|secondary|danger etc)',
-    },
-    nativeType: {
-      type: String,
-      default: 'button',
-      description: 'Button native type (e.g button, input etc)',
-    },
-    size: {
-      type: String,
-      default: '',
-      description: 'Button size (sm|lg)',
-    },
-    outline: {
-      type: Boolean,
-      description: 'Whether button is outlined (only border has color)',
-    },
-    link: {
-      type: Boolean,
-      description: 'Whether button is a link (no borders or background)',
-    },
-  },
-  methods: {
-    handleClick(evt) {
-      this.$emit('click', evt)
-    },
-  },
-}
-</script>
-<style lang="scss">
-.base-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  i {
-    padding: 0 3px;
-  }
-}
-</style>
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
index 2eb0be846..6e3e3f01c 100755
--- a/frontend/src/components/index.js
+++ b/frontend/src/components/index.js
@@ -1,6 +1,5 @@
 import BaseInput from './Inputs/BaseInput.vue'
 import Badge from './Badge'
-import BaseButton from './BaseButton.vue'
 
 import BaseTable from './BaseTable.vue'
 
@@ -15,7 +14,6 @@ import Collapse from './Collapse/Collapse.vue'
 import CollapseItem from './Collapse/CollapseItem.vue'
 import BaseSlider from './BaseSlider.vue'
 
-
 import SidebarPlugin from './SidebarPlugin'
 
 export {
@@ -30,7 +28,6 @@ export {
   TabPane,
   Tabs,
   BaseSlider,
-  BaseButton,
   Collapse,
   CollapseItem,
 }
diff --git a/frontend/src/plugins/dashboard-plugin.js b/frontend/src/plugins/dashboard-plugin.js
index b7c0ea06c..211b02895 100755
--- a/frontend/src/plugins/dashboard-plugin.js
+++ b/frontend/src/plugins/dashboard-plugin.js
@@ -3,7 +3,7 @@ import '@/polyfills'
 // Notifications plugin. Used on Notifications page
 import Notifications from '@/components/NotificationPlugin'
 // Validation plugin used to validate forms
-import { configure, extend } from 'vee-validate'
+import { /* configure, */ extend, localize } from 'vee-validate'
 // A plugin file where you could register global components used across the app
 import GlobalComponents from './globalComponents'
 // A plugin file where you could register global directives
@@ -11,14 +11,11 @@ import GlobalDirectives from './globalDirectives'
 // Sidebar on the right. Used as a local plugin in DashboardLayout.vue
 import SideBar from '@/components/SidebarPlugin'
 
-// vue-bootstrap
-import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
-
 // asset imports
 import '@/assets/scss/argon.scss'
 import '@/assets/vendor/nucleo/css/nucleo.css'
 import * as rules from 'vee-validate/dist/rules'
-import { messages } from 'vee-validate/dist/locale/en.json'
+import en, { messages } from 'vee-validate/dist/locale/en.json'
 
 import VueQrcodeReader from 'vue-qrcode-reader'
 import VueQrcode from 'vue-qrcode'
@@ -35,6 +32,11 @@ import Loading from 'vue-loading-overlay'
 // import the styles
 import 'vue-loading-overlay/dist/vue-loading.css'
 
+// vue-bootstrap
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+
+localize('en', en)
+
 Object.keys(rules).forEach((rule) => {
   extend(rule, {
     ...rules[rule], // copies rule configuration
@@ -55,12 +57,12 @@ export default {
     Vue.use(VueQrcode)
     Vue.use(VueFlatPickr)
     Vue.use(Loading)
-    configure({
-      classes: {
-        valid: 'is-valid',
-        invalid: 'is-invalid',
-        dirty: ['is-dirty', 'is-dirty'], // multiple classes per flag!
-      },
-    })
+    // configure({
+    //  classes: {
+    //    valid: 'is-valid',
+    //    invalid: 'is-invalid',
+    //    dirty: ['is-dirty', 'is-dirty'], // multiple classes per flag!
+    //  },
+    // })
   },
 }
diff --git a/frontend/src/plugins/globalComponents.js b/frontend/src/plugins/globalComponents.js
index 06bf20ae6..bea56050b 100755
--- a/frontend/src/plugins/globalComponents.js
+++ b/frontend/src/plugins/globalComponents.js
@@ -1,16 +1,13 @@
 import BaseInput from '@/components/Inputs/BaseInput.vue'
 import Card from '@/components/Cards/Card.vue'
 import StatsCard from '@/components/Cards/StatsCard.vue'
-import BaseButton from '@/components/BaseButton.vue'
 import Badge from '@/components/Badge.vue'
 import BaseNav from '@/components/Navbar/BaseNav'
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 
-
 const GlobalComponents = {
   install(Vue) {
     Vue.component(Badge.name, Badge)
-    Vue.component(BaseButton.name, BaseButton)
     Vue.component(BaseInput.name, BaseInput)
     Vue.component(BaseNav.name, BaseNav)
     Vue.component(Card.name, Card)
diff --git a/frontend/src/views/Pages/Login.vue b/frontend/src/views/Pages/Login.vue
index a6d795bb1..ce9d8d247 100755
--- a/frontend/src/views/Pages/Login.vue
+++ b/frontend/src/views/Pages/Login.vue
@@ -22,34 +22,68 @@
               <div class="text-center text-muted mb-4">
                 <small>{{ $t('login') }}</small>
               </div>
-              <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
-                <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
-                  <base-input
-                    alternative
-                    class="mb-3"
+
+              <validation-observer ref="observer" v-slot="{ handleSubmit }">
+                <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
+                  <validation-provider
                     name="Email"
                     :rules="{ required: true, email: true }"
-                    prepend-icon="ni ni-email-83"
-                    placeholder="Email"
-                    v-model="model.email"
-                  ></base-input>
+                    v-slot="validationContext"
+                  >
+                    <b-form-group
+                      class="mb-3"
+                      id="example-input-group-1"
+                      label="Email"
+                      label-for="example-input-1"
+                    >
+                      <b-form-input
+                        id="example-input-1"
+                        name="example-input-1"
+                        v-model="model.email"
+                        placeholder="Email"
+                        :state="getValidationState(validationContext)"
+                        aria-describedby="input-1-live-feedback"
+                      ></b-form-input>
 
-                  <b-input-group>
-                    <b-form-input
-                      class="mb-0"
-                      v-model="model.password"
-                      name="Password"
-                      :type="passwordVisible ? 'text' : 'password'"
-                      prepend-icon="ni ni-lock-circle-open"
-                      :placeholder="$t('form.password')"
-                    ></b-form-input>
+                      <b-form-invalid-feedback id="input-1-live-feedback">
+                        {{ validationContext.errors[0] }}
+                      </b-form-invalid-feedback>
+                    </b-form-group>
+                  </validation-provider>
 
-                    <b-input-group-append>
-                      <b-button variant="outline-primary" @click="togglePasswordVisibility">
-                        <b-icon :icon="passwordVisible ? 'eye' : 'eye-slash'" />
-                      </b-button>
-                    </b-input-group-append>
-                  </b-input-group>
+                  <validation-provider
+                    :name="$t('form.password')"
+                    :rules="{ required: true }"
+                    v-slot="validationContext"
+                  >
+                  <b-form-group
+                      class="mb-5"
+                      id="example-input-group-1"
+                      :label="$t('form.password')"
+                      label-for="example-input-1"
+                    >
+                    <b-input-group >
+                      <b-form-input
+                        id="input-pwd"
+                        name="input-pwd"
+                        v-model="model.password"
+                        :placeholder="$t('form.password')"
+                        :type="passwordVisible ? 'text' : 'password'"
+                        :state="getValidationState(validationContext)"
+                        aria-describedby="input-2-live-feedback"
+                      ></b-form-input>
+
+                      <b-input-group-append>
+                        <b-button variant="outline-primary" @click="togglePasswordVisibility">
+                          <b-icon :icon="passwordVisible ? 'eye' : 'eye-slash'" />
+                        </b-button>
+                      </b-input-group-append>
+                    </b-input-group>
+                    <b-form-invalid-feedback id="input-2-live-feedback">
+                      {{ validationContext.errors[0] }}
+                    </b-form-invalid-feedback>
+                  </b-form-group>
+                  </validation-provider>
 
                   <b-alert v-show="loginfail" show dismissible variant="warning">
                     <span class="alert-text bv-example-row">
@@ -62,12 +96,9 @@
                       </b-row>
                     </span>
                   </b-alert>
-
-                  <!-- <b-form-checkbox v-model="model.rememberMe">{{ $t('site.login.remember')}}</b-form-checkbox> -->
-                  <div class="text-center" ref="submitButton">
-                    <base-button type="secondary" native-type="submit" class="my-4">
-                      {{ $t('site.login.signin') }}
-                    </base-button>
+                  <div class="text-center">
+                      <b-button class="ml-2" @click="resetForm()">{{ $t('form.reset')}}</b-button>
+                  <b-button type="submit" variant="primary" >{{ $t('form.save')}}</b-button>                
                   </div>
                 </b-form>
               </validation-observer>
@@ -109,6 +140,20 @@ export default {
     }
   },
   methods: {
+    getValidationState({ dirty, validated, valid = null }) {
+      return dirty || validated ? valid : null
+    },
+    resetForm() {
+      this.model = {
+        email: null,
+        password: null,
+      }
+
+      this.$nextTick(() => {
+        this.$refs.observer.reset()
+      })
+    },
+
     togglePasswordVisibility() {
       this.passwordVisible = !this.passwordVisible
     },
diff --git a/frontend/test/testSetup.js b/frontend/test/testSetup.js
new file mode 100644
index 000000000..fb3ff5542
--- /dev/null
+++ b/frontend/test/testSetup.js
@@ -0,0 +1,44 @@
+import { createLocalVue } from '@vue/test-utils'
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+import Vuex from 'vuex'
+import { ValidationProvider, ValidationObserver, extend } from 'vee-validate'
+import * as rules from 'vee-validate/dist/rules'
+
+import { messages } from 'vee-validate/dist/locale/en.json'
+import BaseInput from '@/components/Inputs/BaseInput.vue'
+import RegeneratorRuntime from 'regenerator-runtime'
+import Notifications from '@/components/NotificationPlugin'
+import SideBar from '@/components/SidebarPlugin'
+import VueRouter from 'vue-router'
+import VueQrcode from 'vue-qrcode'
+import StatsCard from '@/components/Cards/StatsCard.vue'
+
+import VueMoment from 'vue-moment'
+
+import clickOutside from '@/directives/click-ouside.js'
+import { focus } from 'vue-focus'
+
+global.localVue = createLocalVue()
+
+Object.keys(rules).forEach((rule) => {
+  extend(rule, {
+    ...rules[rule], // copies rule configuration
+    message: messages[rule], // assign message
+  })
+})
+
+global.localVue.use(BootstrapVue)
+global.localVue.use(Vuex)
+global.localVue.use(IconsPlugin)
+global.localVue.use(RegeneratorRuntime)
+global.localVue.use(Notifications)
+global.localVue.use(SideBar)
+global.localVue.use(VueRouter)
+global.localVue.use(VueQrcode)
+global.localVue.use(VueMoment)
+global.localVue.component(BaseInput.name, BaseInput)
+global.localVue.component('validation-provider', ValidationProvider)
+global.localVue.component('validation-observer', ValidationObserver)
+global.localVue.component(StatsCard.name, StatsCard)
+global.localVue.directive('click-outside', clickOutside)
+global.localVue.directive('focus', focus)

From c60d3b68b9851f66100dcd3632d3a06eac5e5d54 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Fri, 11 Jun 2021 20:19:42 +0200
Subject: [PATCH 08/27] change locations fix-lint

---
 frontend/src/plugins/dashboard-plugin.js | 16 ++++-----
 frontend/src/views/Pages/Login.vue       | 46 ++++++++++++------------
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/frontend/src/plugins/dashboard-plugin.js b/frontend/src/plugins/dashboard-plugin.js
index 211b02895..269fa7a84 100755
--- a/frontend/src/plugins/dashboard-plugin.js
+++ b/frontend/src/plugins/dashboard-plugin.js
@@ -3,7 +3,7 @@ import '@/polyfills'
 // Notifications plugin. Used on Notifications page
 import Notifications from '@/components/NotificationPlugin'
 // Validation plugin used to validate forms
-import { /* configure, */ extend, localize } from 'vee-validate'
+import { configure, extend, localize } from 'vee-validate'
 // A plugin file where you could register global components used across the app
 import GlobalComponents from './globalComponents'
 // A plugin file where you could register global directives
@@ -57,12 +57,12 @@ export default {
     Vue.use(VueQrcode)
     Vue.use(VueFlatPickr)
     Vue.use(Loading)
-    // configure({
-    //  classes: {
-    //    valid: 'is-valid',
-    //    invalid: 'is-invalid',
-    //    dirty: ['is-dirty', 'is-dirty'], // multiple classes per flag!
-    //  },
-    // })
+    configure({
+      classes: {
+        valid: 'is-valid',
+        invalid: 'is-invalid',
+        dirty: ['is-dirty', 'is-dirty'], // multiple classes per flag!
+      },
+    })
   },
 }
diff --git a/frontend/src/views/Pages/Login.vue b/frontend/src/views/Pages/Login.vue
index ce9d8d247..9d0cca6da 100755
--- a/frontend/src/views/Pages/Login.vue
+++ b/frontend/src/views/Pages/Login.vue
@@ -56,33 +56,33 @@
                     :rules="{ required: true }"
                     v-slot="validationContext"
                   >
-                  <b-form-group
+                    <b-form-group
                       class="mb-5"
                       id="example-input-group-1"
                       :label="$t('form.password')"
                       label-for="example-input-1"
                     >
-                    <b-input-group >
-                      <b-form-input
-                        id="input-pwd"
-                        name="input-pwd"
-                        v-model="model.password"
-                        :placeholder="$t('form.password')"
-                        :type="passwordVisible ? 'text' : 'password'"
-                        :state="getValidationState(validationContext)"
-                        aria-describedby="input-2-live-feedback"
-                      ></b-form-input>
+                      <b-input-group>
+                        <b-form-input
+                          id="input-pwd"
+                          name="input-pwd"
+                          v-model="model.password"
+                          :placeholder="$t('form.password')"
+                          :type="passwordVisible ? 'text' : 'password'"
+                          :state="getValidationState(validationContext)"
+                          aria-describedby="input-2-live-feedback"
+                        ></b-form-input>
 
-                      <b-input-group-append>
-                        <b-button variant="outline-primary" @click="togglePasswordVisibility">
-                          <b-icon :icon="passwordVisible ? 'eye' : 'eye-slash'" />
-                        </b-button>
-                      </b-input-group-append>
-                    </b-input-group>
-                    <b-form-invalid-feedback id="input-2-live-feedback">
-                      {{ validationContext.errors[0] }}
-                    </b-form-invalid-feedback>
-                  </b-form-group>
+                        <b-input-group-append>
+                          <b-button variant="outline-primary" @click="togglePasswordVisibility">
+                            <b-icon :icon="passwordVisible ? 'eye' : 'eye-slash'" />
+                          </b-button>
+                        </b-input-group-append>
+                      </b-input-group>
+                      <b-form-invalid-feedback id="input-2-live-feedback">
+                        {{ validationContext.errors[0] }}
+                      </b-form-invalid-feedback>
+                    </b-form-group>
                   </validation-provider>
 
                   <b-alert v-show="loginfail" show dismissible variant="warning">
@@ -97,8 +97,8 @@
                     </span>
                   </b-alert>
                   <div class="text-center">
-                      <b-button class="ml-2" @click="resetForm()">{{ $t('form.reset')}}</b-button>
-                  <b-button type="submit" variant="primary" >{{ $t('form.save')}}</b-button>                
+                    <b-button class="ml-2" @click="resetForm()">{{ $t('form.reset') }}</b-button>
+                    <b-button type="submit" variant="primary">{{ $t('login') }}</b-button>
                   </div>
                 </b-form>
               </validation-observer>

From 9d00b96c5fa2afdd5182b160b2e754287c6642d1 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Sat, 12 Jun 2021 08:47:42 +0200
Subject: [PATCH 09/27] remove base-input from ForgotPasswort.vue

---
 frontend/src/views/Pages/ForgotPassword.vue | 33 +++++++++++++------
 frontend/src/views/Pages/Login.vue          | 35 +++++++++------------
 2 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/frontend/src/views/Pages/ForgotPassword.vue b/frontend/src/views/Pages/ForgotPassword.vue
index 32331d080..857278908 100644
--- a/frontend/src/views/Pages/ForgotPassword.vue
+++ b/frontend/src/views/Pages/ForgotPassword.vue
@@ -17,19 +17,31 @@
         <b-col lg="6" md="8">
           <b-card no-body class="border-0" style="background-color: #ebebeba3 !important">
             <b-card-body class="p-4">
-              <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
+              <validation-observer ref="observer" v-slot="{ handleSubmit }">
                 <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
-                  <base-input
-                    alternative
-                    class="mb-3"
-                    prepend-icon="ni ni-email-83"
-                    :placeholder="$t('form.email')"
+                  <validation-provider
                     name="Email"
                     :rules="{ required: true, email: true }"
-                    v-model="form.email"
-                  ></base-input>
+                    v-slot="validationContext"
+                  >
+                    <b-form-group class="mb-3" label="Email" label-for="input-reset-pwd">
+                      <b-form-input
+                        id="input-reset-pwd"
+                        name="input-reset-pwd"
+                        v-model="form.email"
+                        placeholder="Email"
+                        :state="getValidationState(validationContext)"
+                        aria-describedby="reset-pwd--live-feedback"
+                      ></b-form-input>
+
+                      <b-form-invalid-feedback id="reset-pwd--live-feedback">
+                        {{ validationContext.errors[0] }}
+                      </b-form-invalid-feedback>
+                    </b-form-group>
+                  </validation-provider>
+
                   <div class="text-center">
-                    <b-button type="submit" outline variant="secondary" class="mt-4">
+                    <b-button type="submit" variant="primary">
                       {{ $t('site.password.reset_now') }}
                     </b-button>
                   </div>
@@ -59,6 +71,9 @@ export default {
     }
   },
   methods: {
+    getValidationState({ dirty, validated, valid = null }) {
+      return dirty || validated ? valid : null
+    },
     async onSubmit() {
       const result = await loginAPI.sendEmail(this.form.email)
       if (result.success) {
diff --git a/frontend/src/views/Pages/Login.vue b/frontend/src/views/Pages/Login.vue
index 9d0cca6da..d388bea5f 100755
--- a/frontend/src/views/Pages/Login.vue
+++ b/frontend/src/views/Pages/Login.vue
@@ -30,22 +30,17 @@
                     :rules="{ required: true, email: true }"
                     v-slot="validationContext"
                   >
-                    <b-form-group
-                      class="mb-3"
-                      id="example-input-group-1"
-                      label="Email"
-                      label-for="example-input-1"
-                    >
+                    <b-form-group class="mb-3" label="Email" label-for="input-login-email">
                       <b-form-input
-                        id="example-input-1"
+                        id="input-login-email"
                         name="example-input-1"
                         v-model="model.email"
                         placeholder="Email"
                         :state="getValidationState(validationContext)"
-                        aria-describedby="input-1-live-feedback"
+                        aria-describedby="login-email-live-feedback"
                       ></b-form-input>
 
-                      <b-form-invalid-feedback id="input-1-live-feedback">
+                      <b-form-invalid-feedback id="login-email-live-feedback">
                         {{ validationContext.errors[0] }}
                       </b-form-invalid-feedback>
                     </b-form-group>
@@ -97,7 +92,7 @@
                     </span>
                   </b-alert>
                   <div class="text-center">
-                    <b-button class="ml-2" @click="resetForm()">{{ $t('form.reset') }}</b-button>
+                    <!--<b-button class="ml-2" @click="resetForm()">{{ $t('form.reset') }}</b-button>-->
                     <b-button type="submit" variant="primary">{{ $t('login') }}</b-button>
                   </div>
                 </b-form>
@@ -143,16 +138,16 @@ export default {
     getValidationState({ dirty, validated, valid = null }) {
       return dirty || validated ? valid : null
     },
-    resetForm() {
-      this.model = {
-        email: null,
-        password: null,
-      }
-
-      this.$nextTick(() => {
-        this.$refs.observer.reset()
-      })
-    },
+    //resetForm() {
+    //  this.model = {
+    //    email: null,
+    //    password: null,
+    //  }
+    //
+    //  this.$nextTick(() => {
+    //    this.$refs.observer.reset()
+    //  })
+    //},
 
     togglePasswordVisibility() {
       this.passwordVisible = !this.passwordVisible

From 259fd5404d175c0b3d753b50ebfcd2fbfeb9446f Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Sat, 12 Jun 2021 10:52:10 +0200
Subject: [PATCH 10/27] remove base-input from register.vue

---
 frontend/src/views/Pages/Login.vue    |  16 +-
 frontend/src/views/Pages/Register.vue | 240 +++++++++++++++++++-------
 2 files changed, 178 insertions(+), 78 deletions(-)

diff --git a/frontend/src/views/Pages/Login.vue b/frontend/src/views/Pages/Login.vue
index d388bea5f..23e5741f2 100755
--- a/frontend/src/views/Pages/Login.vue
+++ b/frontend/src/views/Pages/Login.vue
@@ -30,9 +30,9 @@
                     :rules="{ required: true, email: true }"
                     v-slot="validationContext"
                   >
-                    <b-form-group class="mb-3" label="Email" label-for="input-login-email">
+                    <b-form-group class="mb-3" label="Email" label-for="login-email">
                       <b-form-input
-                        id="input-login-email"
+                        id="login-email"
                         name="example-input-1"
                         v-model="model.email"
                         placeholder="Email"
@@ -92,7 +92,6 @@
                     </span>
                   </b-alert>
                   <div class="text-center">
-                    <!--<b-button class="ml-2" @click="resetForm()">{{ $t('form.reset') }}</b-button>-->
                     <b-button type="submit" variant="primary">{{ $t('login') }}</b-button>
                   </div>
                 </b-form>
@@ -138,16 +137,7 @@ export default {
     getValidationState({ dirty, validated, valid = null }) {
       return dirty || validated ? valid : null
     },
-    //resetForm() {
-    //  this.model = {
-    //    email: null,
-    //    password: null,
-    //  }
-    //
-    //  this.$nextTick(() => {
-    //    this.$refs.observer.reset()
-    //  })
-    //},
+    
 
     togglePasswordVisibility() {
       this.passwordVisible = !this.passwordVisible
diff --git a/frontend/src/views/Pages/Register.vue b/frontend/src/views/Pages/Register.vue
index d7b9ab8f0..f427c5a8c 100755
--- a/frontend/src/views/Pages/Register.vue
+++ b/frontend/src/views/Pages/Register.vue
@@ -23,65 +23,146 @@
               <div class="text-center text-muted mb-4">
                 <small>{{ $t('signup') }}</small>
               </div>
-              <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
+      
+ 
+                   <validation-observer ref="observer" v-slot="{ handleSubmit }">
                 <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
-                  <base-input
-                    :label="$t('form.firstname')"
-                    alternative
-                    class="mb-3"
-                    name="firstname"
+
+                   <validation-provider
+                    :name="$t('form.firstname')"
                     :rules="{ required: true, min: 3 }"
-                    v-model="model.firstname"
-                  ></base-input>
-                  <base-input
-                    :label="$t('form.lastname')"
-                    alternative
-                    class="mb-3"
-                    name="lastname"
-                    :rules="{ required: true, min: 2 }"
-                    v-model="model.lastname"
-                  ></base-input>
+                    v-slot="validationContext"
+                  >
 
-                  <base-input
-                    :label="$t('form.email')"
-                    alternative
-                    class="mb-3"
-                    name="Email"
-                    :rules="{ required: true, email: true }"
-                    v-model="model.email"
-                  ></base-input>
-
-                  <hr />
-                  <b-form-group :label="$t('form.password')">
-                    <b-input-group>
+                   <b-form-group class="mb-3" :label="$t('form.firstname')" label-for="register-firstname">
                       <b-form-input
-                        class="mb-0"
-                        v-model="password"
-                        name="password"
-                        :class="{ valid: passwordValidation.valid }"
-                        :type="passwordVisible ? 'text' : 'password'"
-                        prepend-icon="ni ni-lock-circle-open"
-                        :placeholder="$t('form.password')"
+                        id="register-firstname"
+                        :name="$t('form.firstname')"
+                        v-model="model.firstname"
+                        :placeholder="$t('form.firstname')"
+                        :state="getValidationState(validationContext)"
+                        aria-describedby="register-firstname-live-feedback"
                       ></b-form-input>
 
-                      <b-input-group-append>
-                        <b-button variant="outline-primary" @click="togglePasswordVisibility">
-                          <b-icon :icon="passwordVisible ? 'eye' : 'eye-slash'" />
-                        </b-button>
-                      </b-input-group-append>
-                    </b-input-group>
-                  </b-form-group>
+                      <b-form-invalid-feedback id="register-firstname-live-feedback">
+                        {{ validationContext.errors[0] }}
+                      </b-form-invalid-feedback>
+                    </b-form-group>
 
-                  <base-input
-                    :label="$t('form.password_repeat')"
-                    type="password"
-                    name="password-repeat"
-                    :placeholder="$t('form.password_repeat')"
-                    prepend-icon="ni ni-lock-circle-open"
-                    v-model.lazy="checkPassword"
-                    :class="{ valid: passwordValidation.valid }"
-                  />
 
+                   </validation-provider>
+
+  
+
+                  <validation-provider
+                    :name="$t('form.lastname')"
+                    :rules="{ required: true, min: 2 }"
+                    v-slot="validationContext"
+                  >
+
+                   <b-form-group class="mb-3" :label="$t('form.lastname')" label-for="register-lastname">
+                      <b-form-input
+                        id="register-lastname"
+                        :name="$t('form.lastname')"
+                        v-model="model.lastname"
+                        :placeholder="$t('form.lastname')"
+                        :state="getValidationState(validationContext)"
+                        aria-describedby="register-lastname-live-feedback"
+                      ></b-form-input>
+
+                      <b-form-invalid-feedback id="register-lastname-live-feedback">
+                        {{ validationContext.errors[0] }}
+                      </b-form-invalid-feedback>
+                    </b-form-group>
+
+
+                   </validation-provider>
+
+
+                    <validation-provider
+                    name="Email"
+                    :rules="{ required: true, email: true }"
+                    v-slot="validationContext"
+                  >
+                    <b-form-group class="mb-3" label="Email" label-for="input-login-email">
+                      <b-form-input
+                        id="input-login-email"
+                        name="example-input-1"
+                        v-model="model.email"
+                        placeholder="Email"
+                        :state="getValidationState(validationContext)"
+                        aria-describedby="login-email-live-feedback"
+                      ></b-form-input>
+
+                      <b-form-invalid-feedback id="login-email-live-feedback">
+                        {{ validationContext.errors[0] }}
+                      </b-form-invalid-feedback>
+                    </b-form-group>
+                  </validation-provider>
+ 
+                  <hr />
+
+
+
+
+                  <validation-provider
+                    :name="$t('form.password')"
+                    :rules="{ required: true }"
+                    v-slot="validationContext"
+                  >
+                    <b-form-group
+                      class="mb-5"                     
+                      :label="$t('form.password')"
+                      label-for="input-password"
+                    >
+                      <b-input-group>
+                        <b-form-input
+                          id="input-password"
+                          :name="$t('form.password')"
+                          v-model="password"
+                          :placeholder="$t('form.password')"
+                          :type="passwordVisible ? 'text' : 'password'"
+                          :state="getValidationState(validationContext)"
+                          aria-describedby="register-password-live-feedback"
+                        ></b-form-input>
+
+                        <b-input-group-append>
+                          <b-button variant="outline-primary" @click="togglePasswordVisibility">
+                            <b-icon :icon="passwordVisible ? 'eye' : 'eye-slash'" />
+                          </b-button>
+                        </b-input-group-append>
+                      </b-input-group>
+                      <b-form-invalid-feedback id="register-password-live-feedback">
+                        {{ validationContext.errors[0] }}
+                      </b-form-invalid-feedback>
+                    </b-form-group>
+                  </validation-provider>
+
+                   <b-form-group
+                      class="mb-5"                     
+                      :label="$t('form.password_repeat')"
+                      label-for="input-password_repeat"
+                    >
+                      <b-input-group>
+                        <b-form-input
+                          id="input-password_repeat"
+                          :name="$t('form.password_repeat')"
+                          v-model.lazy="passwordRepeat"
+                          :placeholder="$t('form.password_repeat')"
+                          :type="passwordVisibleRepeat ? 'text' : 'password'"
+                          
+                          aria-describedby="register-password-repeat-live-feedback"
+                        ></b-form-input>
+
+                        <b-input-group-append>
+                          <b-button variant="outline-primary" @click="togglePasswordRepeatVisibility">
+                            <b-icon :icon="passwordVisibleRepeat ? 'eye' : 'eye-slash'" />
+                          </b-button>
+                        </b-input-group-append>
+                      </b-input-group>
+                   </b-form-group>
+                 
+                     
                   <transition name="hint" appear>
                     <div v-if="passwordValidation.errors.length > 0 && !submitted" class="hints">
                       <ul>
@@ -99,14 +180,18 @@
                   </transition>
                   <b-row class="my-4">
                     <b-col cols="12">
-                      <base-input
-                        :rules="{ required: { allowFalse: false } }"
-                        name="Privacy Policy"
-                      >
-                        <b-form-checkbox v-model="model.agree">
-                          <span class="text-muted" v-html="$t('site.signup.agree')"></span>
-                        </b-form-checkbox>
-                      </base-input>
+                     
+
+                       <b-form-checkbox
+      id="register-checkbox"
+      v-model="model.agree"
+      name="register-checkbox"
+      
+    >
+      <span class="text-muted" v-html="$t('site.signup.agree')"></span>
+    </b-form-checkbox>
+
+  
                     </b-col>
                   </b-row>
                   <b-alert
@@ -134,9 +219,14 @@
                       model.agree
                     "
                   >
-                    <b-button type="submit" variant="secondary" class="mt-4">
-                      {{ $t('signup') }}
-                    </b-button>
+                    
+
+
+                     <div class="text-center">
+                    <b-button class="ml-2" @click="resetForm()">{{ $t('form.reset') }}</b-button>
+                    <b-button type="submit" variant="primary">{{ $t('signup') }}</b-button>
+                  </div>
+
                   </div>
                 </b-form>
               </validation-observer>
@@ -165,17 +255,37 @@ export default {
       },
 
       password: '',
-      checkPassword: '',
+      passwordRepeat: '',
       passwordVisible: false,
+      passwordVisibleRepeat: false,
       submitted: false,
       showError: false,
       messageError: '',
     }
   },
   methods: {
+    getValidationState({ dirty, validated, valid = null }) {
+      return dirty || validated ? valid : null
+    },
+    resetForm() {
+      this.model = {
+        firstname: '',
+        lastname: '',
+        email: '',
+      }    
+       this.password= '',
+      this.passwordRepeat= '',
+
+      this.$nextTick(() => {
+        this.$refs.observer.reset()
+      })
+    },
     togglePasswordVisibility() {
       this.passwordVisible = !this.passwordVisible
     },
+    togglePasswordRepeatVisibility() {
+      this.passwordVisibleRepeat = !this.passwordVisibleRepeat
+    },
     async onSubmit() {
       const result = await loginAPI.create(
         this.model.email,
@@ -209,10 +319,10 @@ export default {
   },
   computed: {
     samePasswords() {
-      return this.password === this.checkPassword
+      return this.password === this.passwordRepeat
     },
     passwordsFilled() {
-      return this.password !== '' && this.checkPassword !== ''
+      return this.password !== '' && this.passwordRepeat !== ''
     },
     namesFilled() {
       return (

From 04fa6665902e3b3aec3f6838db1551d23f1f7ff5 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Sat, 12 Jun 2021 11:36:07 +0200
Subject: [PATCH 11/27] fix lint, fix test, change ids

---
 frontend/src/locales/de.json               |   2 +-
 frontend/src/locales/en.json               |   2 +-
 frontend/src/views/Pages/Login.vue         |   9 +-
 frontend/src/views/Pages/Register.spec.js  |  25 ++-
 frontend/src/views/Pages/Register.vue      | 240 ++++++++++-----------
 frontend/src/views/Pages/ResetPassword.vue |   4 +-
 6 files changed, 137 insertions(+), 145 deletions(-)

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index f47493aea..60015ef98 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -34,7 +34,7 @@
     "email":"E-Mail",
     "email_repeat":"eMail wiederholen",
     "password":"Passwort",
-    "password_repeat":"Passwort wiederholen",
+    "passwordRepeat":"Passwort wiederholen",
     "password_old":"altes Passwort",
     "password_new":"neues Passwort",
     "password_new_repeat":"neues Passwort wiederholen",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index dbb9b445c..5154aacc0 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -34,7 +34,7 @@
     "email":"Email",
     "email_repeat":"Repeat Email",
     "password":"Password",
-    "password_repeat":"Repeat password",
+    "passwordRepeat":"Repeat password",
     "password_old":"Old password",
     "password_new":"New password",
     "password_new_repeat":"Repeat new password",
diff --git a/frontend/src/views/Pages/Login.vue b/frontend/src/views/Pages/Login.vue
index 23e5741f2..4619dddf2 100755
--- a/frontend/src/views/Pages/Login.vue
+++ b/frontend/src/views/Pages/Login.vue
@@ -34,7 +34,7 @@
                       <b-form-input
                         id="login-email"
                         name="example-input-1"
-                        v-model="model.email"
+                        v-model="form.email"
                         placeholder="Email"
                         :state="getValidationState(validationContext)"
                         aria-describedby="login-email-live-feedback"
@@ -61,7 +61,7 @@
                         <b-form-input
                           id="input-pwd"
                           name="input-pwd"
-                          v-model="model.password"
+                          v-model="form.password"
                           :placeholder="$t('form.password')"
                           :type="passwordVisible ? 'text' : 'password'"
                           :state="getValidationState(validationContext)"
@@ -123,7 +123,7 @@ export default {
   name: 'login',
   data() {
     return {
-      model: {
+      form: {
         email: '',
         password: '',
         // rememberMe: false
@@ -137,7 +137,6 @@ export default {
     getValidationState({ dirty, validated, valid = null }) {
       return dirty || validated ? valid : null
     },
-    
 
     togglePasswordVisibility() {
       this.passwordVisible = !this.passwordVisible
@@ -148,7 +147,7 @@ export default {
       const loader = this.$loading.show({
         container: this.$refs.submitButton,
       })
-      const result = await loginAPI.login(this.model.email, this.model.password)
+      const result = await loginAPI.login(this.form.email, this.form.password)
       if (result.success) {
         this.$store.dispatch('login', {
           sessionId: result.result.data.session_id,
diff --git a/frontend/src/views/Pages/Register.spec.js b/frontend/src/views/Pages/Register.spec.js
index 3d4296567..36ee6987b 100644
--- a/frontend/src/views/Pages/Register.spec.js
+++ b/frontend/src/views/Pages/Register.spec.js
@@ -53,16 +53,27 @@ describe('Register', () => {
         expect(wrapper.find('form').exists()).toBeTruthy()
       })
 
-      it('has 3 text input fields', () => {
-        expect(wrapper.findAll('input[type="text"]').length).toBe(3)
+      it('has firstname input fields', () => {
+        expect(wrapper.find('#registerFirstname').exists()).toBeTruthy()
+      })
+      it('has lastname input fields', () => {
+        expect(wrapper.find('#registerLastname').exists()).toBeTruthy()
       })
 
-      it('has 2 password input fields', () => {
-        expect(wrapper.findAll('input[type="password"]').length).toBe(2)
+      it('has email input fields', () => {
+        expect(wrapper.find('#registerEmail').exists()).toBeTruthy()
+      })
+
+      it('has password input fields', () => {
+        expect(wrapper.find('#registerPassword').exists()).toBeTruthy()
+      })
+
+      it('has password repeat input fields', () => {
+        expect(wrapper.find('#registerPasswordRepeat').exists()).toBeTruthy()
       })
 
       it('has 1 checkbox input fields', () => {
-        expect(wrapper.findAll('input[type="checkbox"]').length).toBe(1)
+        expect(wrapper.find('#registerCheckbox').exists()).toBeTruthy()
       })
 
       it('has no submit button when not completely filled', () => {
@@ -70,9 +81,9 @@ describe('Register', () => {
       })
 
       it('shows a warning when no valid Email is entered', async () => {
-        wrapper.findAll('input[type="text"]').at(2).setValue('no_valid@Email')
+        wrapper.find('#registerEmail').setValue('no_valid@Email')
         await flushPromises()
-        await expect(wrapper.find('.invalid-feedback').text()).toEqual(
+        await expect(wrapper.find('#registerEmailLiveFeedback').text()).toEqual(
           'The Email field must be a valid email',
         )
       })
diff --git a/frontend/src/views/Pages/Register.vue b/frontend/src/views/Pages/Register.vue
index f427c5a8c..7f475ebae 100755
--- a/frontend/src/views/Pages/Register.vue
+++ b/frontend/src/views/Pages/Register.vue
@@ -23,107 +23,101 @@
               <div class="text-center text-muted mb-4">
                 <small>{{ $t('signup') }}</small>
               </div>
-      
- 
-                   <validation-observer ref="observer" v-slot="{ handleSubmit }">
-                <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
 
-                   <validation-provider
+              <validation-observer ref="observer" v-slot="{ handleSubmit }">
+                <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
+                  <validation-provider
                     :name="$t('form.firstname')"
                     :rules="{ required: true, min: 3 }"
                     v-slot="validationContext"
                   >
-
-                   <b-form-group class="mb-3" :label="$t('form.firstname')" label-for="register-firstname">
+                    <b-form-group
+                      class="mb-3"
+                      :label="$t('form.firstname')"
+                      label-for="registerFirstname"
+                    >
                       <b-form-input
-                        id="register-firstname"
+                        id="registerFirstname"
                         :name="$t('form.firstname')"
-                        v-model="model.firstname"
+                        v-model="form.firstname"
                         :placeholder="$t('form.firstname')"
                         :state="getValidationState(validationContext)"
-                        aria-describedby="register-firstname-live-feedback"
+                        aria-describedby="registerFirstnameLiveFeedback"
                       ></b-form-input>
 
-                      <b-form-invalid-feedback id="register-firstname-live-feedback">
+                      <b-form-invalid-feedback id="registerFirstnameLiveFeedback">
                         {{ validationContext.errors[0] }}
                       </b-form-invalid-feedback>
                     </b-form-group>
-
-
-                   </validation-provider>
-
-  
+                  </validation-provider>
 
                   <validation-provider
                     :name="$t('form.lastname')"
                     :rules="{ required: true, min: 2 }"
                     v-slot="validationContext"
                   >
-
-                   <b-form-group class="mb-3" :label="$t('form.lastname')" label-for="register-lastname">
+                    <b-form-group
+                      class="mb-3"
+                      :label="$t('form.lastname')"
+                      label-for="registerLastname"
+                    >
                       <b-form-input
-                        id="register-lastname"
+                        id="registerLastname"
                         :name="$t('form.lastname')"
-                        v-model="model.lastname"
+                        v-model="form.lastname"
                         :placeholder="$t('form.lastname')"
                         :state="getValidationState(validationContext)"
-                        aria-describedby="register-lastname-live-feedback"
+                        aria-describedby="registerLastnameLiveFeedback"
                       ></b-form-input>
 
-                      <b-form-invalid-feedback id="register-lastname-live-feedback">
-                        {{ validationContext.errors[0] }}
-                      </b-form-invalid-feedback>
-                    </b-form-group>
-
-
-                   </validation-provider>
-
-
-                    <validation-provider
-                    name="Email"
-                    :rules="{ required: true, email: true }"
-                    v-slot="validationContext"
-                  >
-                    <b-form-group class="mb-3" label="Email" label-for="input-login-email">
-                      <b-form-input
-                        id="input-login-email"
-                        name="example-input-1"
-                        v-model="model.email"
-                        placeholder="Email"
-                        :state="getValidationState(validationContext)"
-                        aria-describedby="login-email-live-feedback"
-                      ></b-form-input>
-
-                      <b-form-invalid-feedback id="login-email-live-feedback">
+                      <b-form-invalid-feedback id="registerLastnameLiveFeedback">
                         {{ validationContext.errors[0] }}
                       </b-form-invalid-feedback>
                     </b-form-group>
                   </validation-provider>
- 
+
+                  <validation-provider
+                    name="Email"
+                    :rules="{ required: true, email: true }"
+                    v-slot="validationContext"
+                  >
+                    <b-form-group class="mb-3" label="Email" label-for="registerEmail">
+                      <b-form-input
+                        id="registerEmail"
+                        name="Email"
+                        v-model="form.email"
+                        placeholder="Email"
+                        :state="getValidationState(validationContext)"
+                        aria-describedby="registerEmailLiveFeedback"
+                      ></b-form-input>
+
+                      <b-form-invalid-feedback id="registerEmailLiveFeedback">
+                        {{ validationContext.errors[0] }}
+                      </b-form-invalid-feedback>
+                    </b-form-group>
+                  </validation-provider>
+
                   <hr />
 
-
-
-
                   <validation-provider
                     :name="$t('form.password')"
                     :rules="{ required: true }"
                     v-slot="validationContext"
                   >
                     <b-form-group
-                      class="mb-5"                     
+                      class="mb-5"
                       :label="$t('form.password')"
-                      label-for="input-password"
+                      label-for="registerPassword"
                     >
                       <b-input-group>
                         <b-form-input
-                          id="input-password"
+                          id="registerPassword"
                           :name="$t('form.password')"
-                          v-model="password"
+                          v-model="form.password"
                           :placeholder="$t('form.password')"
                           :type="passwordVisible ? 'text' : 'password'"
                           :state="getValidationState(validationContext)"
-                          aria-describedby="register-password-live-feedback"
+                          aria-describedby="registerPasswordLiveFeedback"
                         ></b-form-input>
 
                         <b-input-group-append>
@@ -132,37 +126,34 @@
                           </b-button>
                         </b-input-group-append>
                       </b-input-group>
-                      <b-form-invalid-feedback id="register-password-live-feedback">
+                      <b-form-invalid-feedback id="registerPasswordLiveFeedback">
                         {{ validationContext.errors[0] }}
                       </b-form-invalid-feedback>
                     </b-form-group>
                   </validation-provider>
 
-                   <b-form-group
-                      class="mb-5"                     
-                      :label="$t('form.password_repeat')"
-                      label-for="input-password_repeat"
-                    >
-                      <b-input-group>
-                        <b-form-input
-                          id="input-password_repeat"
-                          :name="$t('form.password_repeat')"
-                          v-model.lazy="passwordRepeat"
-                          :placeholder="$t('form.password_repeat')"
-                          :type="passwordVisibleRepeat ? 'text' : 'password'"
-                          
-                          aria-describedby="register-password-repeat-live-feedback"
-                        ></b-form-input>
+                  <b-form-group
+                    class="mb-5"
+                    :label="$t('form.passwordRepeat')"
+                    label-for="registerPasswordRepeat"
+                  >
+                    <b-input-group>
+                      <b-form-input
+                        id="registerPasswordRepeat"
+                        :name="$t('form.passwordRepeat')"
+                        v-model.lazy="form.passwordRepeat"
+                        :placeholder="$t('form.passwordRepeat')"
+                        :type="passwordVisibleRepeat ? 'text' : 'password'"
+                      ></b-form-input>
+
+                      <b-input-group-append>
+                        <b-button variant="outline-primary" @click="togglePasswordRepeatVisibility">
+                          <b-icon :icon="passwordVisibleRepeat ? 'eye' : 'eye-slash'" />
+                        </b-button>
+                      </b-input-group-append>
+                    </b-input-group>
+                  </b-form-group>
 
-                        <b-input-group-append>
-                          <b-button variant="outline-primary" @click="togglePasswordRepeatVisibility">
-                            <b-icon :icon="passwordVisibleRepeat ? 'eye' : 'eye-slash'" />
-                          </b-button>
-                        </b-input-group-append>
-                      </b-input-group>
-                   </b-form-group>
-                 
-                     
                   <transition name="hint" appear>
                     <div v-if="passwordValidation.errors.length > 0 && !submitted" class="hints">
                       <ul>
@@ -180,18 +171,13 @@
                   </transition>
                   <b-row class="my-4">
                     <b-col cols="12">
-                     
-
-                       <b-form-checkbox
-      id="register-checkbox"
-      v-model="model.agree"
-      name="register-checkbox"
-      
-    >
-      <span class="text-muted" v-html="$t('site.signup.agree')"></span>
-    </b-form-checkbox>
-
-  
+                      <b-form-checkbox
+                        id="registerCheckbox"
+                        v-model="form.agree"
+                        :name="$t('site.signup.agree')"
+                      >
+                        <span class="text-muted" v-html="$t('site.signup.agree')"></span>
+                      </b-form-checkbox>
                     </b-col>
                   </b-row>
                   <b-alert
@@ -216,17 +202,13 @@
                       passwordValidation.valid &&
                       namesFilled &&
                       emailFilled &&
-                      model.agree
+                      form.agree
                     "
                   >
-                    
-
-
-                     <div class="text-center">
-                    <b-button class="ml-2" @click="resetForm()">{{ $t('form.reset') }}</b-button>
-                    <b-button type="submit" variant="primary">{{ $t('signup') }}</b-button>
-                  </div>
-
+                    <div class="text-center">
+                      <b-button class="ml-2" @click="resetForm()">{{ $t('form.reset') }}</b-button>
+                      <b-button type="submit" variant="primary">{{ $t('signup') }}</b-button>
+                    </div>
                   </div>
                 </b-form>
               </validation-observer>
@@ -247,15 +229,15 @@ export default {
   name: 'register',
   data() {
     return {
-      model: {
+      form: {
         firstname: '',
         lastname: '',
         email: '',
         agree: false,
+        password: '',
+        passwordRepeat: '',
       },
 
-      password: '',
-      passwordRepeat: '',
       passwordVisible: false,
       passwordVisibleRepeat: false,
       submitted: false,
@@ -268,14 +250,13 @@ export default {
       return dirty || validated ? valid : null
     },
     resetForm() {
-      this.model = {
+      this.form = {
         firstname: '',
         lastname: '',
         email: '',
-      }    
-       this.password= '',
-      this.passwordRepeat= '',
-
+        password: '',
+        passwordRepeat: '',
+      }
       this.$nextTick(() => {
         this.$refs.observer.reset()
       })
@@ -288,20 +269,21 @@ export default {
     },
     async onSubmit() {
       const result = await loginAPI.create(
-        this.model.email,
-        this.model.firstname,
-        this.model.lastname,
-        this.password,
+        this.form.email,
+        this.form.firstname,
+        this.form.lastname,
+        this.form.password,
       )
       if (result.success) {
         this.$store.dispatch('login', {
           sessionId: result.result.data.session_id,
-          email: this.model.email,
+          email: this.form.email,
         })
-        this.model.email = ''
-        this.model.firstname = ''
-        this.model.lastname = ''
+        this.form.email = ''
+        this.form.firstname = ''
+        this.form.lastname = ''
         this.password = ''
+        this.passwordVisibleRepeat = ''
         this.$router.push('/thx/register')
       } else {
         this.showError = true
@@ -311,29 +293,29 @@ export default {
     closeAlert() {
       this.showError = false
       this.messageError = ''
-      this.model.email = ''
-      this.model.firstname = ''
-      this.model.lastname = ''
-      this.password = ''
+      this.form.email = ''
+      this.form.firstname = ''
+      this.form.lastname = ''
+      this.form.password = ''
     },
   },
   computed: {
     samePasswords() {
-      return this.password === this.passwordRepeat
+      return this.form.password === this.form.passwordRepeat
     },
     passwordsFilled() {
-      return this.password !== '' && this.passwordRepeat !== ''
+      return this.form.password !== '' && this.form.passwordRepeat !== ''
     },
     namesFilled() {
       return (
-        this.model.firstname !== '' &&
-        this.model.firstname.length > 2 &&
-        this.model.lastname !== '' &&
-        this.model.lastname.length > 1
+        this.form.firstname !== '' &&
+        this.form.firstname.length > 2 &&
+        this.form.lastname !== '' &&
+        this.form.lastname.length > 1
       )
     },
     emailFilled() {
-      return this.model.email !== ''
+      return this.form.email !== ''
     },
     rules() {
       return [
@@ -346,7 +328,7 @@ export default {
     passwordValidation() {
       const errors = []
       for (const condition of this.rules) {
-        if (!condition.regex.test(this.password)) {
+        if (!condition.regex.test(this.form.password)) {
           errors.push(condition.message)
         }
       }
diff --git a/frontend/src/views/Pages/ResetPassword.vue b/frontend/src/views/Pages/ResetPassword.vue
index 99892612c..e8982b170 100644
--- a/frontend/src/views/Pages/ResetPassword.vue
+++ b/frontend/src/views/Pages/ResetPassword.vue
@@ -43,10 +43,10 @@
                   </b-form-group>
 
                   <base-input
-                    :label="$t('form.password_repeat')"
+                    :label="$t('form.passwordRepeat')"
                     type="password"
                     name="password-repeat"
-                    :placeholder="$t('form.password_repeat')"
+                    :placeholder="$t('form.passwordRepeat')"
                     prepend-icon="ni ni-lock-circle-open"
                     v-model.lazy="checkPassword"
                     :class="{ valid: passwordValidation.valid }"

From ee853c63b83e1e2d1627f3037ebf65c4ee60a591 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Sat, 12 Jun 2021 15:15:25 +0200
Subject: [PATCH 12/27] remove base-input from ResetPassword.vue

---
 frontend/src/views/Pages/ResetPassword.vue | 85 +++++++++++++++-------
 1 file changed, 58 insertions(+), 27 deletions(-)

diff --git a/frontend/src/views/Pages/ResetPassword.vue b/frontend/src/views/Pages/ResetPassword.vue
index e8982b170..45f3e681d 100644
--- a/frontend/src/views/Pages/ResetPassword.vue
+++ b/frontend/src/views/Pages/ResetPassword.vue
@@ -20,38 +20,63 @@
         <b-col lg="6" md="8">
           <b-card no-body class="border-0" style="background-color: #ebebeba3 !important">
             <b-card-body class="p-4">
-              <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
+              <validation-observer ref="observer" v-slot="{ handleSubmit }">
                 <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
-                  <b-form-group :label="$t('form.password')">
+                  <validation-provider
+                    :name="$t('form.password')"
+                    :rules="{ required: true }"
+                    v-slot="validationContext"
+                  >
+                    <b-form-group
+                      class="mb-5"
+                      :label="$t('form.password')"
+                      label-for="resetPassword"
+                    >
+                      <b-input-group>
+                        <b-form-input
+                          id="resetPassword"
+                          :name="$t('form.password')"
+                          v-model="form.password"
+                          :placeholder="$t('form.password')"
+                          :type="passwordVisible ? 'text' : 'password'"
+                          :state="getValidationState(validationContext)"
+                          aria-describedby="resetPasswordLiveFeedback"
+                        ></b-form-input>
+
+                        <b-input-group-append>
+                          <b-button variant="outline-primary" @click="togglePasswordVisibility">
+                            <b-icon :icon="passwordVisible ? 'eye' : 'eye-slash'" />
+                          </b-button>
+                        </b-input-group-append>
+                      </b-input-group>
+                      <b-form-invalid-feedback id="resetPasswordLiveFeedback">
+                        {{ validationContext.errors[0] }}
+                      </b-form-invalid-feedback>
+                    </b-form-group>
+                  </validation-provider>
+
+                  <b-form-group
+                    class="mb-5"
+                    :label="$t('form.passwordRepeat')"
+                    label-for="resetPasswordRepeat"
+                  >
                     <b-input-group>
                       <b-form-input
-                        class="mb-0"
-                        v-model="password"
-                        name="password"
-                        :class="{ valid: passwordValidation.valid }"
-                        :type="passwordVisible ? 'text' : 'password'"
-                        prepend-icon="ni ni-lock-circle-open"
-                        :placeholder="$t('form.password')"
+                        id="resetPasswordRepeat"
+                        :name="$t('form.passwordRepeat')"
+                        v-model.lazy="form.passwordRepeat"
+                        :placeholder="$t('form.passwordRepeat')"
+                        :type="passwordVisibleRepeat ? 'text' : 'password'"
                       ></b-form-input>
 
                       <b-input-group-append>
-                        <b-button variant="outline-primary" @click="togglePasswordVisibility">
-                          <b-icon :icon="passwordVisible ? 'eye' : 'eye-slash'" />
+                        <b-button variant="outline-primary" @click="togglePasswordRepeatVisibility">
+                          <b-icon :icon="passwordVisibleRepeat ? 'eye' : 'eye-slash'" />
                         </b-button>
                       </b-input-group-append>
                     </b-input-group>
                   </b-form-group>
 
-                  <base-input
-                    :label="$t('form.passwordRepeat')"
-                    type="password"
-                    name="password-repeat"
-                    :placeholder="$t('form.passwordRepeat')"
-                    prepend-icon="ni ni-lock-circle-open"
-                    v-model.lazy="checkPassword"
-                    :class="{ valid: passwordValidation.valid }"
-                  />
-
                   <transition name="hint" appear>
                     <div v-if="passwordValidation.errors.length > 0 && !submitted" class="hints">
                       <ul>
@@ -90,8 +115,11 @@ export default {
   name: 'reset',
   data() {
     return {
+      form: {
+        password: '',
+        passwordRepeat: '',
+      },
       password: '',
-      checkPassword: '',
       passwordVisible: false,
       submitted: false,
       authenticated: false,
@@ -100,13 +128,16 @@ export default {
     }
   },
   methods: {
+    getValidationState({ dirty, validated, valid = null }) {
+      return dirty || validated ? valid : null
+    },
     togglePasswordVisibility() {
       this.passwordVisible = !this.passwordVisible
     },
     async onSubmit() {
-      const result = await loginAPI.changePassword(this.sessionId, this.email, this.password)
+      const result = await loginAPI.changePassword(this.sessionId, this.email, this.form.password)
       if (result.success) {
-        this.password = ''
+        this.form.password = ''
         /*
          this.$store.dispatch('login', {
            sessionId: result.result.data.session_id,
@@ -132,10 +163,10 @@ export default {
   },
   computed: {
     samePasswords() {
-      return this.password === this.checkPassword
+      return this.form.password === this.form.passwordRepeat
     },
     passwordsFilled() {
-      return this.password !== '' && this.checkPassword !== ''
+      return this.form.password !== '' && this.form.passwordRepeat !== ''
     },
     rules() {
       return [
@@ -148,7 +179,7 @@ export default {
     passwordValidation() {
       const errors = []
       for (const condition of this.rules) {
-        if (!condition.regex.test(this.password)) {
+        if (!condition.regex.test(this.form.password)) {
           errors.push(condition.message)
         }
       }

From 750cfb5f0014405e3a35294554600631eef211b1 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Sat, 12 Jun 2021 15:25:39 +0200
Subject: [PATCH 13/27] kill base-input from prject

---
 frontend/src/components/Inputs/BaseInput.vue  | 187 ------------------
 frontend/src/components/index.js              |   2 -
 frontend/src/plugins/globalComponents.js      |   2 -
 .../Pages/AccountOverview/GddAddWork2.vue     |  24 +--
 frontend/test/testSetup.js                    |   2 -
 5 files changed, 12 insertions(+), 205 deletions(-)
 delete mode 100644 frontend/src/components/Inputs/BaseInput.vue

diff --git a/frontend/src/components/Inputs/BaseInput.vue b/frontend/src/components/Inputs/BaseInput.vue
deleted file mode 100644
index c43e0a265..000000000
--- a/frontend/src/components/Inputs/BaseInput.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<template>
-  <validation-provider
-    :rules="rules"
-    :name="name"
-    v-bind="$attrs"
-    v-slot="{ errors, valid, invalid, validated }"
-  >
-    <b-form-group>
-      <slot name="label">
-        <label v-if="label" :class="labelClasses">
-          {{ label }}
-        </label>
-      </slot>
-      <div
-        :class="[
-          { 'input-group': hasIcon },
-          { focused: focused },
-          { 'input-group-alternative': alternative },
-          { 'has-label': label || $slots.label },
-          inputGroupClasses,
-        ]"
-      >
-        <div v-if="prependIcon || $slots.prepend" class="input-group-prepend">
-          <span class="input-group-text">
-            <slot name="prepend">
-              <i :class="prependIcon"></i>
-            </slot>
-          </span>
-        </div>
-        <slot v-bind="slotData">
-          <input
-            :value="value"
-            :type="type"
-            v-on="listeners"
-            v-bind="$attrs"
-            :valid="valid"
-            :required="required"
-            class="form-control"
-            :class="[
-              { 'is-valid': valid && validated && successMessage },
-              { 'is-invalid': invalid && validated },
-              inputClasses,
-            ]"
-          />
-        </slot>
-        <div v-if="appendIcon || $slots.append" class="input-group-append">
-          <span class="input-group-text">
-            <slot name="append">
-              <i :class="appendIcon"></i>
-            </slot>
-          </span>
-        </div>
-        <slot name="infoBlock"></slot>
-      </div>
-      <slot name="success">
-        <div class="valid-feedback" v-if="valid && validated && successMessage">
-          {{ successMessage }}
-        </div>
-      </slot>
-      <slot name="error">
-        <div v-if="errors[0]" class="invalid-feedback" style="display: block">
-          {{ errors[0] }}
-        </div>
-      </slot>
-    </b-form-group>
-  </validation-provider>
-</template>
-<script>
-export default {
-  inheritAttrs: false,
-  name: 'base-input',
-  props: {
-    required: {
-      type: Boolean,
-      description: 'Whether input is required (adds an asterix *)',
-    },
-    group: {
-      type: Boolean,
-      description: 'Whether input is an input group (manual override in special cases)',
-    },
-    alternative: {
-      type: Boolean,
-      description: 'Whether input is of alternative layout',
-    },
-    label: {
-      type: String,
-      description: 'Input label (text before input)',
-    },
-    error: {
-      type: String,
-      description: 'Input error (below input)',
-    },
-    successMessage: {
-      type: String,
-      description: 'Input success message',
-      default: '',
-    },
-    labelClasses: {
-      type: String,
-      description: 'Input label css classes',
-      default: 'form-control-label',
-    },
-    inputClasses: {
-      type: String,
-      description: 'Input css classes',
-    },
-    inputGroupClasses: {
-      type: String,
-      description: 'Input group css classes',
-    },
-    value: {
-      type: [String, Number],
-      description: 'Input value',
-    },
-    type: {
-      type: String,
-      description: 'Input type',
-      default: 'text',
-    },
-    appendIcon: {
-      type: String,
-      description: 'Append icon (right)',
-    },
-    prependIcon: {
-      type: String,
-      description: 'Prepend icon (left)',
-    },
-    rules: {
-      type: [String, Array, Object],
-      description: 'Vee validate validation rules',
-      default: '',
-    },
-    name: {
-      type: String,
-      description: 'Input name (used for validation)',
-      default: '',
-    },
-  },
-  data() {
-    return {
-      focused: false,
-    }
-  },
-  computed: {
-    listeners() {
-      return {
-        ...this.$listeners,
-        input: this.updateValue,
-        focus: this.onFocus,
-        blur: this.onBlur,
-      }
-    },
-    slotData() {
-      return {
-        focused: this.focused,
-        error: this.error,
-        ...this.listeners,
-      }
-    },
-    hasIcon() {
-      const { append, prepend } = this.$slots
-      return (
-        append !== undefined ||
-        prepend !== undefined ||
-        this.appendIcon !== undefined ||
-        this.prependIcon !== undefined ||
-        this.group
-      )
-    },
-  },
-  methods: {
-    updateValue(evt) {
-      const value = evt.target.value
-      this.$emit('input', value)
-    },
-    onFocus(evt) {
-      this.focused = true
-      this.$emit('focus', evt)
-    },
-    onBlur(evt) {
-      this.focused = false
-      this.$emit('blur', evt)
-    },
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
index 6e3e3f01c..d35e88859 100755
--- a/frontend/src/components/index.js
+++ b/frontend/src/components/index.js
@@ -1,4 +1,3 @@
-import BaseInput from './Inputs/BaseInput.vue'
 import Badge from './Badge'
 
 import BaseTable from './BaseTable.vue'
@@ -18,7 +17,6 @@ import SidebarPlugin from './SidebarPlugin'
 
 export {
   Badge,
-  BaseInput,
   Card,
   StatsCard,
   BaseTable,
diff --git a/frontend/src/plugins/globalComponents.js b/frontend/src/plugins/globalComponents.js
index bea56050b..1f3acef96 100755
--- a/frontend/src/plugins/globalComponents.js
+++ b/frontend/src/plugins/globalComponents.js
@@ -1,4 +1,3 @@
-import BaseInput from '@/components/Inputs/BaseInput.vue'
 import Card from '@/components/Cards/Card.vue'
 import StatsCard from '@/components/Cards/StatsCard.vue'
 import Badge from '@/components/Badge.vue'
@@ -8,7 +7,6 @@ import { ValidationProvider, ValidationObserver } from 'vee-validate'
 const GlobalComponents = {
   install(Vue) {
     Vue.component(Badge.name, Badge)
-    Vue.component(BaseInput.name, BaseInput)
     Vue.component(BaseNav.name, BaseNav)
     Vue.component(Card.name, Card)
     Vue.component(StatsCard.name, StatsCard)
diff --git a/frontend/src/views/Pages/AccountOverview/GddAddWork2.vue b/frontend/src/views/Pages/AccountOverview/GddAddWork2.vue
index 419742874..d66eaf2df 100644
--- a/frontend/src/views/Pages/AccountOverview/GddAddWork2.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddAddWork2.vue
@@ -4,32 +4,32 @@
       <b-tab :title="names.thisMonth" active>
         <b-row>
           <b-col lg="3">
-            <base-input :label="$t('communitys.form.hours')">
+            <b-input :label="$t('communitys.form.hours')">
               <b-form-input
                 type="number"
                 size="lg"
                 placeholder="23"
                 style="font-size: xx-large; padding-left: 5px"
               />
-            </base-input>
-            <base-input :label="$t('communitys.form.date_period')">
+            </b-input>
+            <b-input :label="$t('communitys.form.date_period')">
               <flat-pickr
                 class="form-control"
                 v-model="date"
                 :config="config"
                 style="font-size: 0.5em; padding-left: 5px"
               ></flat-pickr>
-            </base-input>
+            </b-input>
           </b-col>
           <b-col lg="9">
-            <base-input :label="$t('communitys.form.hours_report')">
+            <b-input :label="$t('communitys.form.hours_report')">
               <textarea
                 class="form-control"
                 rows="5"
                 @focus="textFocus"
                 style="font-size: x-large; padding-left: 20px"
               ></textarea>
-            </base-input>
+            </b-input>
           </b-col>
         </b-row>
         <b-row>
@@ -147,32 +147,32 @@ export default {
     newWorkForm() {
       this.formular = `  
           <b-col lg="3">
-            <base-input label="Stunden">
+            <b-input label="Stunden">
               <b-form-input
                 type="number"
                 size="lg"
                 placeholder="0"
                 style="font-size: xx-large; padding-left: 20px"
               />
-            </base-input>
-            <base-input label="Datum / Zeitraum">
+            </b-input>
+            <b-input label="Datum / Zeitraum">
               <flat-pickr
                 class="form-control"
                 v-model="date"
                 :config="config"
                 style="font-size: xx-large; padding-left: 20px"
               ></flat-pickr>
-            </base-input>
+            </b-input>
           </b-col>
           <b-col lg="9">
-            <base-input label="Arbeitsreport">
+            <b-input label="Arbeitsreport">
               <textarea
                 class="form-control"
                 rows="5"
                 @focus="textFocus"
                 style="font-size: x-large; padding-left: 20px"
               ></textarea>
-            </base-input>
+            </b-input>
           </b-col>
        `
 
diff --git a/frontend/test/testSetup.js b/frontend/test/testSetup.js
index fb3ff5542..c2e59dbee 100644
--- a/frontend/test/testSetup.js
+++ b/frontend/test/testSetup.js
@@ -5,7 +5,6 @@ import { ValidationProvider, ValidationObserver, extend } from 'vee-validate'
 import * as rules from 'vee-validate/dist/rules'
 
 import { messages } from 'vee-validate/dist/locale/en.json'
-import BaseInput from '@/components/Inputs/BaseInput.vue'
 import RegeneratorRuntime from 'regenerator-runtime'
 import Notifications from '@/components/NotificationPlugin'
 import SideBar from '@/components/SidebarPlugin'
@@ -36,7 +35,6 @@ global.localVue.use(SideBar)
 global.localVue.use(VueRouter)
 global.localVue.use(VueQrcode)
 global.localVue.use(VueMoment)
-global.localVue.component(BaseInput.name, BaseInput)
 global.localVue.component('validation-provider', ValidationProvider)
 global.localVue.component('validation-observer', ValidationObserver)
 global.localVue.component(StatsCard.name, StatsCard)

From ce97d24547b5ffcac3e69628ef8ffc2fd8b40a62 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Sat, 12 Jun 2021 15:34:20 +0200
Subject: [PATCH 14/27] remove components Card and StatsCard

---
 frontend/src/components/Cards/Card.vue      | 71 ---------------------
 frontend/src/components/Cards/StatsCard.vue | 58 -----------------
 frontend/src/components/index.js            |  4 --
 frontend/src/plugins/globalComponents.js    |  4 --
 frontend/test/testSetup.js                  |  2 -
 5 files changed, 139 deletions(-)
 delete mode 100644 frontend/src/components/Cards/Card.vue
 delete mode 100644 frontend/src/components/Cards/StatsCard.vue

diff --git a/frontend/src/components/Cards/Card.vue b/frontend/src/components/Cards/Card.vue
deleted file mode 100644
index 5ae76922a..000000000
--- a/frontend/src/components/Cards/Card.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <b-card
-    no-body
-    :class="[
-      { 'card-lift--hover': hover },
-      { shadow: shadow },
-      { [`shadow-${shadowSize}`]: shadowSize },
-      { [`bg-gradient-${gradient}`]: gradient },
-      { [`bg-${type}`]: type },
-    ]"
-  >
-    <slot name="image"></slot>
-    <b-card-header :class="headerClasses" v-if="$slots.header">
-      <slot name="header"></slot>
-    </b-card-header>
-    <b-card-body :class="bodyClasses" v-if="!noBody">
-      <slot></slot>
-    </b-card-body>
-
-    <slot v-if="noBody"></slot>
-
-    <b-card-footer :class="footerClasses" v-if="$slots.footer">
-      <slot name="footer"></slot>
-    </b-card-footer>
-  </b-card>
-</template>
-<script>
-export default {
-  name: 'card',
-  props: {
-    type: {
-      type: String,
-      description: 'Card type',
-    },
-    gradient: {
-      type: String,
-      description: 'Card background gradient type (warning,danger etc)',
-    },
-    hover: {
-      type: Boolean,
-      description: 'Whether card should move on hover',
-    },
-    shadow: {
-      type: Boolean,
-      description: 'Whether card has shadow',
-    },
-    shadowSize: {
-      type: String,
-      description: 'Card shadow size',
-    },
-    noBody: {
-      type: Boolean,
-      default: false,
-      description: 'Whether card should have wrapper body class',
-    },
-    bodyClasses: {
-      type: [String, Object, Array],
-      description: 'Card body css classes',
-    },
-    headerClasses: {
-      type: [String, Object, Array],
-      description: 'Card header css classes',
-    },
-    footerClasses: {
-      type: [String, Object, Array],
-      description: 'Card footer css classes',
-    },
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/components/Cards/StatsCard.vue b/frontend/src/components/Cards/StatsCard.vue
deleted file mode 100644
index 8c5c364d0..000000000
--- a/frontend/src/components/Cards/StatsCard.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <card class="card-stats" :show-footer-line="true">
-    <b-row>
-      <b-col>
-        <slot>
-          <h5 class="card-title text-uppercase text-muted mb-0" v-if="title">
-            {{ title }}
-          </h5>
-          <span class="h2 font-weight-bold mb-0" v-if="subTitle">
-            {{ subTitle }}
-          </span>
-        </slot>
-      </b-col>
-
-      <b-col cols="auto" v-if="$slots.icon || icon">
-        <slot name="icon">
-          <div
-            class="icon icon-shape text-white rounded-circle shadow"
-            :class="[`bg-${type}`, iconClasses]"
-          >
-            <i :class="icon"></i>
-          </div>
-        </slot>
-      </b-col>
-      <b-col cols="auto" v-if="$slots.img || img">
-        <slot name="img">
-          <img :src="img" width="80" />
-        </slot>
-      </b-col>
-    </b-row>
-
-    <p class="mt-3 mb-0 text-sm">
-      <slot name="footer"></slot>
-    </p>
-  </card>
-</template>
-<script>
-import Card from './Card.vue'
-
-export default {
-  name: 'stats-card',
-  components: {
-    Card,
-  },
-  props: {
-    type: {
-      type: String,
-      default: 'primary',
-    },
-    icon: String,
-    img: String,
-    title: String,
-    subTitle: String,
-    iconClasses: [String, Array],
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
index d35e88859..60ff67e81 100755
--- a/frontend/src/components/index.js
+++ b/frontend/src/components/index.js
@@ -2,8 +2,6 @@ import Badge from './Badge'
 
 import BaseTable from './BaseTable.vue'
 
-import Card from './Cards/Card.vue'
-import StatsCard from './Cards/StatsCard.vue'
 import BaseNav from './Navbar/BaseNav'
 import NavbarToggleButton from './Navbar/NavbarToggleButton'
 
@@ -17,8 +15,6 @@ import SidebarPlugin from './SidebarPlugin'
 
 export {
   Badge,
-  Card,
-  StatsCard,
   BaseTable,
   SidebarPlugin,
   BaseNav,
diff --git a/frontend/src/plugins/globalComponents.js b/frontend/src/plugins/globalComponents.js
index 1f3acef96..a16c021d9 100755
--- a/frontend/src/plugins/globalComponents.js
+++ b/frontend/src/plugins/globalComponents.js
@@ -1,5 +1,3 @@
-import Card from '@/components/Cards/Card.vue'
-import StatsCard from '@/components/Cards/StatsCard.vue'
 import Badge from '@/components/Badge.vue'
 import BaseNav from '@/components/Navbar/BaseNav'
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
@@ -8,8 +6,6 @@ const GlobalComponents = {
   install(Vue) {
     Vue.component(Badge.name, Badge)
     Vue.component(BaseNav.name, BaseNav)
-    Vue.component(Card.name, Card)
-    Vue.component(StatsCard.name, StatsCard)
     Vue.component('validation-provider', ValidationProvider)
     Vue.component('validation-observer', ValidationObserver)
   },
diff --git a/frontend/test/testSetup.js b/frontend/test/testSetup.js
index c2e59dbee..0bfd5566a 100644
--- a/frontend/test/testSetup.js
+++ b/frontend/test/testSetup.js
@@ -10,7 +10,6 @@ import Notifications from '@/components/NotificationPlugin'
 import SideBar from '@/components/SidebarPlugin'
 import VueRouter from 'vue-router'
 import VueQrcode from 'vue-qrcode'
-import StatsCard from '@/components/Cards/StatsCard.vue'
 
 import VueMoment from 'vue-moment'
 
@@ -37,6 +36,5 @@ global.localVue.use(VueQrcode)
 global.localVue.use(VueMoment)
 global.localVue.component('validation-provider', ValidationProvider)
 global.localVue.component('validation-observer', ValidationObserver)
-global.localVue.component(StatsCard.name, StatsCard)
 global.localVue.directive('click-outside', clickOutside)
 global.localVue.directive('focus', focus)

From 5397a9ab268e3151eef2a1f7b8842ca48e72cd6d Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Sat, 12 Jun 2021 16:04:10 +0200
Subject: [PATCH 15/27] remove compoments Base-Table and Badges

---
 .../scss/core/badges/_badge-circle.scss       | 17 -----
 .../assets/scss/core/badges/_badge-dot.scss   | 42 ------------
 .../src/assets/scss/core/badges/_badge.scss   | 55 ----------------
 .../src/assets/scss/custom/_components.scss   |  1 -
 frontend/src/components/Badge.vue             | 45 -------------
 frontend/src/components/BaseTable.vue         | 66 -------------------
 frontend/src/components/index.js              |  6 --
 frontend/src/plugins/globalComponents.js      |  2 -
 8 files changed, 234 deletions(-)
 delete mode 100644 frontend/src/assets/scss/core/badges/_badge-circle.scss
 delete mode 100644 frontend/src/assets/scss/core/badges/_badge-dot.scss
 delete mode 100644 frontend/src/assets/scss/core/badges/_badge.scss
 delete mode 100644 frontend/src/components/Badge.vue
 delete mode 100644 frontend/src/components/BaseTable.vue

diff --git a/frontend/src/assets/scss/core/badges/_badge-circle.scss b/frontend/src/assets/scss/core/badges/_badge-circle.scss
deleted file mode 100644
index 88a5d5e5d..000000000
--- a/frontend/src/assets/scss/core/badges/_badge-circle.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-//
-// Circle badge
-//
-
-
-// General styles
-
-.badge-circle {
-    text-align: center;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    width: 2rem;
-    height: 2rem;
-    font-size: .875rem;
-}
diff --git a/frontend/src/assets/scss/core/badges/_badge-dot.scss b/frontend/src/assets/scss/core/badges/_badge-dot.scss
deleted file mode 100644
index 1ed6ffa86..000000000
--- a/frontend/src/assets/scss/core/badges/_badge-dot.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-//
-// Dot badge
-//
-
-
-// General styles
-
-.badge-dot {
-    padding-left: 0;
-    padding-right: 0;
-    background: transparent;
-    font-weight: $font-weight-normal;
-    font-size: $font-size-sm;
-    text-transform: none;
-
-    strong {
-        color: $gray-800;
-    }
-
-    i {
-        display: inline-block;
-        vertical-align: middle;
-        width: .375rem;
-        height: .375rem;
-        border-radius: 50%;
-        margin-right: .375rem;
-    }
-
-    &.badge-md {
-        i {
-            width: .5rem;
-            height: .5rem;
-        }
-    }
-
-    &.badge-lg {
-        i {
-            width: .625rem;
-            height: .625rem;
-        }
-    }
-}
diff --git a/frontend/src/assets/scss/core/badges/_badge.scss b/frontend/src/assets/scss/core/badges/_badge.scss
deleted file mode 100644
index b0d626a1e..000000000
--- a/frontend/src/assets/scss/core/badges/_badge.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-//
-// Badge
-//
-
-
-// General styles
-
-.badge {
-    text-transform: $badge-text-transfom;
-
-    a {
-        color: $white;
-    }
-}
-
-
-// Size variations
-
-.badge-md {
-    padding: .65em 1em;
-}
-
-.badge-lg {
-    padding: .85em 1.375em;
-}
-
-
-// Multiple inline badges
-
-.badge-inline {
-    margin-right: .625rem;
-
-    + span {
-        top: 2px;
-        position: relative;
-
-        > a {
-            text-decoration: underline;
-        }
-    }
-}
-
-
-// Badge spacing inside a btn with some text
-
-.btn {
-    .badge {
-        &:not(:first-child) {
-            margin-left: .5rem;
-        }
-        &:not(:last-child) {
-            margin-right: .5rem;
-        }
-    }
-}
diff --git a/frontend/src/assets/scss/custom/_components.scss b/frontend/src/assets/scss/custom/_components.scss
index 8a71d41f6..8a18e63be 100644
--- a/frontend/src/assets/scss/custom/_components.scss
+++ b/frontend/src/assets/scss/custom/_components.scss
@@ -4,7 +4,6 @@
 
 @import "custom/alert";
 @import "custom/avatar";
-@import "custom/badge";
 @import "custom/buttons";
 @import "custom/card";
 @import "custom/chart";
diff --git a/frontend/src/components/Badge.vue b/frontend/src/components/Badge.vue
deleted file mode 100644
index d3cbf543d..000000000
--- a/frontend/src/components/Badge.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <b-badge :variant="type" :pill="rounded" :size="size" :class="{ 'badge-circle': circle }">
-    <slot>
-      <i v-if="icon" :class="icon"></i>
-    </slot>
-  </b-badge>
-</template>
-<script>
-export default {
-  name: 'badge',
-  props: {
-    tag: {
-      type: String,
-      default: 'span',
-      description: 'Html tag to use for the badge.',
-    },
-    rounded: {
-      type: Boolean,
-      default: false,
-      description: 'Whether badge is of pill type',
-    },
-    circle: {
-      type: Boolean,
-      default: false,
-      description: 'Whether badge is circle',
-    },
-    icon: {
-      type: String,
-      default: '',
-      description: 'Icon name. Will be overwritten by slot if slot is used',
-    },
-    type: {
-      type: String,
-      default: 'default',
-      description: 'Badge type (primary|info|danger|default|warning|success)',
-    },
-    size: {
-      type: String,
-      description: 'Badge size (md, lg)',
-      default: '',
-    },
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/components/BaseTable.vue b/frontend/src/components/BaseTable.vue
deleted file mode 100644
index 38ecc6039..000000000
--- a/frontend/src/components/BaseTable.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <table class="table tablesorter" :class="tableClass">
-    <thead :class="theadClasses">
-      <tr>
-        <slot name="columns" :columns="columns">
-          <th v-for="column in columns" :key="column">{{ column }}</th>
-        </slot>
-      </tr>
-    </thead>
-    <tbody :class="tbodyClasses">
-      <tr v-for="(item, index) in data" :key="index">
-        <slot :row="item" :index="index">
-          <td v-for="(column, index) in columns" :key="index">
-            {{ itemValue(item, column) }}
-          </td>
-        </slot>
-      </tr>
-    </tbody>
-  </table>
-</template>
-<script>
-export default {
-  name: 'base-table',
-  props: {
-    columns: {
-      type: Array,
-      default: () => [],
-      description: 'Table columns',
-    },
-    data: {
-      type: Array,
-      default: () => [],
-      description: 'Table data',
-    },
-    type: {
-      type: String, // striped | hover
-      default: '',
-      description: 'Whether table is striped or hover type',
-    },
-    theadClasses: {
-      type: String,
-      default: '',
-      description: '<thead> css classes',
-    },
-    tbodyClasses: {
-      type: String,
-      default: '',
-      description: '<tbody> css classes',
-    },
-  },
-  computed: {
-    tableClass() {
-      return this.type && `table-${this.type}`
-    },
-  },
-  methods: {
-    hasValue(item, column) {
-      return item[column.toLowerCase()] !== 'undefined'
-    },
-    itemValue(item, column) {
-      return item[column.toLowerCase()]
-    },
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
index 60ff67e81..bbc3e51d2 100755
--- a/frontend/src/components/index.js
+++ b/frontend/src/components/index.js
@@ -1,7 +1,3 @@
-import Badge from './Badge'
-
-import BaseTable from './BaseTable.vue'
-
 import BaseNav from './Navbar/BaseNav'
 import NavbarToggleButton from './Navbar/NavbarToggleButton'
 
@@ -14,8 +10,6 @@ import BaseSlider from './BaseSlider.vue'
 import SidebarPlugin from './SidebarPlugin'
 
 export {
-  Badge,
-  BaseTable,
   SidebarPlugin,
   BaseNav,
   NavbarToggleButton,
diff --git a/frontend/src/plugins/globalComponents.js b/frontend/src/plugins/globalComponents.js
index a16c021d9..aeb268d73 100755
--- a/frontend/src/plugins/globalComponents.js
+++ b/frontend/src/plugins/globalComponents.js
@@ -1,10 +1,8 @@
-import Badge from '@/components/Badge.vue'
 import BaseNav from '@/components/Navbar/BaseNav'
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 
 const GlobalComponents = {
   install(Vue) {
-    Vue.component(Badge.name, Badge)
     Vue.component(BaseNav.name, BaseNav)
     Vue.component('validation-provider', ValidationProvider)
     Vue.component('validation-observer', ValidationObserver)

From 2057cdcae33609a644dd385d6fc527a2f3244be4 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Sat, 12 Jun 2021 16:10:44 +0200
Subject: [PATCH 16/27] remove compoments BaseSlider

---
 frontend/src/components/BaseSlider.vue | 92 --------------------------
 frontend/src/components/index.js       |  2 -
 2 files changed, 94 deletions(-)
 delete mode 100644 frontend/src/components/BaseSlider.vue

diff --git a/frontend/src/components/BaseSlider.vue b/frontend/src/components/BaseSlider.vue
deleted file mode 100644
index 14180674a..000000000
--- a/frontend/src/components/BaseSlider.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <div class="slider" :disabled="disabled"></div>
-</template>
-<script>
-import noUiSlider from 'nouislider'
-
-export default {
-  name: 'base-slider',
-  props: {
-    value: {
-      type: [String, Array, Number],
-      description: 'slider value',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-      description: 'whether the slider is disabled',
-    },
-    start: {
-      type: [Number, Array],
-      default: 0,
-      description:
-        '[noUi Slider start](https://refreshless.com/nouislider/slider-options/#section-start)',
-    },
-    connect: {
-      type: [Boolean, Array],
-      default: () => [true, false],
-      description:
-        '[noUi Slider connect](https://refreshless.com/nouislider/slider-options/#section-connect)',
-    },
-    range: {
-      type: Object,
-      default: () => {
-        return {
-          min: 0,
-          max: 100,
-        }
-      },
-      description:
-        '[noUi Slider range](https://refreshless.com/nouislider/slider-values/#section-range)',
-    },
-    options: {
-      type: Object,
-      default: () => {
-        return {}
-      },
-      description: '[noUi Slider options](https://refreshless.com/nouislider/slider-options/)',
-    },
-  },
-  data() {
-    return {
-      slider: null,
-    }
-  },
-  methods: {
-    createSlider() {
-      noUiSlider.create(this.$el, {
-        start: this.value || this.start,
-        connect: Array.isArray(this.value) ? true : this.connect,
-        range: this.range,
-        ...this.options,
-      })
-      const slider = this.$el.noUiSlider
-      slider.on('slide', () => {
-        const value = slider.get()
-        if (value !== this.value) {
-          this.$emit('input', value)
-        }
-      })
-    },
-  },
-  mounted() {
-    this.createSlider()
-  },
-  watch: {
-    value(newValue, oldValue) {
-      const slider = this.$el.noUiSlider
-      const sliderValue = slider.get()
-      if (newValue !== oldValue && sliderValue !== newValue) {
-        if (Array.isArray(sliderValue) && Array.isArray(newValue)) {
-          if (oldValue.length === newValue.length && oldValue.every((v, i) => v === newValue[i])) {
-            slider.set(newValue)
-          }
-        } else {
-          slider.set(newValue)
-        }
-      }
-    },
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
index bbc3e51d2..23a00697d 100755
--- a/frontend/src/components/index.js
+++ b/frontend/src/components/index.js
@@ -5,7 +5,6 @@ import TabPane from './Tabs/Tab.vue'
 import Tabs from './Tabs/Tabs.vue'
 import Collapse from './Collapse/Collapse.vue'
 import CollapseItem from './Collapse/CollapseItem.vue'
-import BaseSlider from './BaseSlider.vue'
 
 import SidebarPlugin from './SidebarPlugin'
 
@@ -15,7 +14,6 @@ export {
   NavbarToggleButton,
   TabPane,
   Tabs,
-  BaseSlider,
   Collapse,
   CollapseItem,
 }

From 159bff71df20a5c48f93389b2f990f7fe54e53b9 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Sat, 12 Jun 2021 16:45:25 +0200
Subject: [PATCH 17/27] remove components Charts, Notification, SearchUser,
 ButtonCheckbox, Button RadioGroup, Breadcrumb

---
 .../src/components/Breadcrumb/Breadcrumb.vue  |  25 --
 .../components/Breadcrumb/BreadcrumbItem.vue  |  18 --
 .../components/Breadcrumb/RouteBreadcrumb.vue |  40 ---
 frontend/src/components/ButtonCheckbox.vue    |  38 ---
 frontend/src/components/ButtonRadioGroup.vue  |  55 ----
 frontend/src/components/Charts/BarChart.js    |  30 ---
 frontend/src/components/Charts/LineChart.js   |  29 ---
 frontend/src/components/Charts/config.js      | 234 ------------------
 .../components/Charts/globalOptionsMixin.js   |   7 -
 .../src/components/Charts/optionHelpers.js    |  10 -
 .../Charts/roundedCornersExtension.js         | 126 ----------
 frontend/src/components/CloseButton.spec.js   |  28 ---
 frontend/src/components/CloseButton.vue       |  36 ---
 .../NotificationPlugin/Notification.vue       | 194 ---------------
 .../NotificationPlugin/Notifications.vue      |  52 ----
 .../components/NotificationPlugin/index.js    |  66 -----
 frontend/src/components/SearchUser.vue        |  81 ------
 .../src/components/SidebarPlugin/index.js     |   2 -
 frontend/src/locales/de.json                  |   1 -
 frontend/src/locales/en.json                  |   1 -
 frontend/src/plugins/dashboard-plugin.js      |   3 -
 frontend/test/testSetup.js                    |   2 -
 22 files changed, 1078 deletions(-)
 delete mode 100644 frontend/src/components/Breadcrumb/Breadcrumb.vue
 delete mode 100644 frontend/src/components/Breadcrumb/BreadcrumbItem.vue
 delete mode 100644 frontend/src/components/Breadcrumb/RouteBreadcrumb.vue
 delete mode 100644 frontend/src/components/ButtonCheckbox.vue
 delete mode 100644 frontend/src/components/ButtonRadioGroup.vue
 delete mode 100644 frontend/src/components/Charts/BarChart.js
 delete mode 100644 frontend/src/components/Charts/LineChart.js
 delete mode 100644 frontend/src/components/Charts/config.js
 delete mode 100644 frontend/src/components/Charts/globalOptionsMixin.js
 delete mode 100644 frontend/src/components/Charts/optionHelpers.js
 delete mode 100644 frontend/src/components/Charts/roundedCornersExtension.js
 delete mode 100644 frontend/src/components/CloseButton.spec.js
 delete mode 100755 frontend/src/components/CloseButton.vue
 delete mode 100644 frontend/src/components/NotificationPlugin/Notification.vue
 delete mode 100644 frontend/src/components/NotificationPlugin/Notifications.vue
 delete mode 100644 frontend/src/components/NotificationPlugin/index.js
 delete mode 100644 frontend/src/components/SearchUser.vue

diff --git a/frontend/src/components/Breadcrumb/Breadcrumb.vue b/frontend/src/components/Breadcrumb/Breadcrumb.vue
deleted file mode 100644
index 795816884..000000000
--- a/frontend/src/components/Breadcrumb/Breadcrumb.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <nav aria-label="breadcrumb">
-    <b-breadcrumb :class="[{ [`bg-${type}`]: type }, listClasses]">
-      <slot></slot>
-    </b-breadcrumb>
-  </nav>
-</template>
-<script>
-export default {
-  name: 'breadcrumb',
-  props: {
-    type: {
-      type: String,
-      default: '',
-      description: 'Breadcrumb background type',
-    },
-    listClasses: {
-      type: [String, Object],
-      default: '',
-      description: 'Breadcrumb list classes',
-    },
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/components/Breadcrumb/BreadcrumbItem.vue b/frontend/src/components/Breadcrumb/BreadcrumbItem.vue
deleted file mode 100644
index 2bf5a8c6c..000000000
--- a/frontend/src/components/Breadcrumb/BreadcrumbItem.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <b-breadcrumb-item :active="active">
-    <slot></slot>
-  </b-breadcrumb-item>
-</template>
-<script>
-export default {
-  name: 'breadcrumb-item',
-  props: {
-    active: {
-      type: Boolean,
-      default: false,
-      description: 'Whether breadcrumb item is active',
-    },
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/components/Breadcrumb/RouteBreadcrumb.vue b/frontend/src/components/Breadcrumb/RouteBreadcrumb.vue
deleted file mode 100644
index bd378f312..000000000
--- a/frontend/src/components/Breadcrumb/RouteBreadcrumb.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <bread-crumb list-classes="breadcrumb-links breadcrumb-dark">
-    <bread-crumb-item>
-      <router-link to="/overview">
-        <i class="fas fa-home"></i>
-      </router-link>
-    </bread-crumb-item>
-    <bread-crumb-item
-      v-for="(route, index) in $route.matched.slice()"
-      :key="route.name"
-      :active="index === $route.matched.length - 1"
-      style="display: inline-block"
-    >
-      <router-link :to="{ name: route.name }" v-if="index < $route.matched.length - 1">
-        {{ route.name }}
-      </router-link>
-      <span v-else>{{ route.name }}</span>
-    </bread-crumb-item>
-  </bread-crumb>
-</template>
-
-<script>
-import BreadCrumb from './Breadcrumb'
-import BreadCrumbItem from './BreadcrumbItem'
-
-export default {
-  name: 'route-breadcrumb',
-  components: {
-    BreadCrumb,
-    BreadCrumbItem,
-  },
-  methods: {
-    getBreadName(route) {
-      return route.name
-    },
-  },
-}
-</script>
-
-<style scoped></style>
diff --git a/frontend/src/components/ButtonCheckbox.vue b/frontend/src/components/ButtonCheckbox.vue
deleted file mode 100644
index e408c69a2..000000000
--- a/frontend/src/components/ButtonCheckbox.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <div class="btn-group-toggle" data-toggle="buttons">
-    <label class="btn" :class="[{ active: value }, buttonClasses]">
-      <input v-model="model" type="checkbox" checked="" autocomplete="off" />
-      <slot></slot>
-    </label>
-  </div>
-</template>
-<script>
-export default {
-  name: 'button-checkbox',
-  props: {
-    value: {
-      type: Boolean,
-      description: 'Checked value',
-    },
-    buttonClasses: {
-      type: [String, Object],
-      description: 'Inner button css classes',
-    },
-  },
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
-  computed: {
-    model: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('change', val)
-      },
-    },
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/components/ButtonRadioGroup.vue b/frontend/src/components/ButtonRadioGroup.vue
deleted file mode 100644
index c757a50d8..000000000
--- a/frontend/src/components/ButtonRadioGroup.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <div class="btn-group-toggle" data-toggle="buttons">
-    <label
-      v-for="(option, index) in options"
-      :key="index"
-      class="btn"
-      :class="[{ active: value === option.value }, buttonClasses]"
-    >
-      <input
-        :value="option.value"
-        v-model="model"
-        type="radio"
-        id="option1"
-        autocomplete="off"
-        checked=""
-      />
-      {{ option.label }}
-    </label>
-  </div>
-</template>
-<script>
-export default {
-  name: 'button-radio-group',
-  props: {
-    options: {
-      type: Array,
-      description: 'Radio options. Should be an array of objects {value: "", label: ""}',
-      default: () => [],
-    },
-    value: {
-      type: String,
-      description: 'Radio value',
-    },
-    buttonClasses: {
-      type: [String, Object],
-      description: 'Inner button css classes',
-    },
-  },
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
-  computed: {
-    model: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('change', val)
-      },
-    },
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/components/Charts/BarChart.js b/frontend/src/components/Charts/BarChart.js
deleted file mode 100644
index 057c31163..000000000
--- a/frontend/src/components/Charts/BarChart.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Bar, mixins } from 'vue-chartjs'
-import globalOptionsMixin from '@/components/Charts/globalOptionsMixin'
-
-export default {
-  name: 'bar-chart',
-  extends: Bar,
-  mixins: [mixins.reactiveProp, globalOptionsMixin],
-  props: {
-    extraOptions: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return {
-      ctx: null,
-    }
-  },
-  mounted() {
-    this.$watch(
-      'chartData',
-      (newVal, oldVal) => {
-        if (!oldVal) {
-          this.renderChart(this.chartData, this.extraOptions)
-        }
-      },
-      { immediate: true },
-    )
-  },
-}
diff --git a/frontend/src/components/Charts/LineChart.js b/frontend/src/components/Charts/LineChart.js
deleted file mode 100644
index 81452f14d..000000000
--- a/frontend/src/components/Charts/LineChart.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Line, mixins } from 'vue-chartjs'
-import globalOptionsMixin from '@/components/Charts/globalOptionsMixin'
-export default {
-  name: 'line-chart',
-  extends: Line,
-  mixins: [mixins.reactiveProp, globalOptionsMixin],
-  props: {
-    extraOptions: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return {
-      ctx: null,
-    }
-  },
-  mounted() {
-    this.$watch(
-      'chartData',
-      (newVal, oldVal) => {
-        if (!oldVal) {
-          this.renderChart(this.chartData, this.extraOptions)
-        }
-      },
-      { immediate: true },
-    )
-  },
-}
diff --git a/frontend/src/components/Charts/config.js b/frontend/src/components/Charts/config.js
deleted file mode 100644
index 694a036b5..000000000
--- a/frontend/src/components/Charts/config.js
+++ /dev/null
@@ -1,234 +0,0 @@
-import { parseOptions } from '@/components/Charts/optionHelpers'
-import Chart from 'chart.js'
-
-export const Charts = {
-  mode: 'light', // (themeMode) ? themeMode : 'light';
-  fonts: {
-    base: 'Open Sans',
-  },
-  colors: {
-    gray: {
-      100: '#f6f9fc',
-      200: '#e9ecef',
-      300: '#dee2e6',
-      400: '#ced4da',
-      500: '#adb5bd',
-      600: '#8898aa',
-      700: '#525f7f',
-      800: '#32325d',
-      900: '#212529',
-    },
-    theme: {
-      default: '#172b4d',
-      primary: '#5e72e4',
-      secondary: '#f4f5f7',
-      info: '#11cdef',
-      success: '#2dce89',
-      danger: '#f5365c',
-      warning: '#fb6340',
-    },
-    black: '#12263F',
-    white: '#FFFFFF',
-    transparent: 'transparent',
-  },
-}
-
-function chartOptions() {
-  const { colors, mode, fonts } = Charts
-  // Options
-  const options = {
-    defaults: {
-      global: {
-        responsive: true,
-        maintainAspectRatio: false,
-        defaultColor: mode === 'dark' ? colors.gray[700] : colors.gray[600],
-        defaultFontColor: mode === 'dark' ? colors.gray[700] : colors.gray[600],
-        defaultFontFamily: fonts.base,
-        defaultFontSize: 13,
-        layout: {
-          padding: 0,
-        },
-        legend: {
-          display: false,
-          position: 'bottom',
-          labels: {
-            usePointStyle: true,
-            padding: 16,
-          },
-        },
-        elements: {
-          point: {
-            radius: 0,
-            backgroundColor: colors.theme.primary,
-          },
-          line: {
-            tension: 0.4,
-            borderWidth: 4,
-            borderColor: colors.theme.primary,
-            backgroundColor: colors.transparent,
-            borderCapStyle: 'rounded',
-          },
-          rectangle: {
-            backgroundColor: colors.theme.warning,
-          },
-          arc: {
-            backgroundColor: colors.theme.primary,
-            borderColor: mode === 'dark' ? colors.gray[800] : colors.white,
-            borderWidth: 4,
-          },
-        },
-        tooltips: {
-          enabled: true,
-          mode: 'index',
-          intersect: false,
-        },
-      },
-      pie: {
-        tooltips: {
-          mode: 'point',
-        },
-      },
-      doughnut: {
-        tooltips: {
-          mode: 'point',
-        },
-        cutoutPercentage: 83,
-        legendCallback: function (chart) {
-          const data = chart.data
-          let content = ''
-
-          data.labels.forEach(function (label, index) {
-            const bgColor = data.datasets[0].backgroundColor[index]
-
-            content += '<span class="chart-legend-item">'
-            content +=
-              '<i class="chart-legend-indicator" style="background-color: ' + bgColor + '"></i>'
-            content += label
-            content += '</span>'
-          })
-
-          return content
-        },
-      },
-    },
-  }
-
-  // yAxes
-  Chart.scaleService.updateScaleDefaults('linear', {
-    gridLines: {
-      borderDash: [2],
-      borderDashOffset: [2],
-      color: mode === 'dark' ? colors.gray[900] : colors.gray[200],
-      drawBorder: false,
-      drawTicks: true,
-      zeroLineWidth: 1,
-      zeroLineColor: mode === 'dark' ? colors.gray[900] : colors.gray[200],
-      zeroLineBorderDash: [2],
-      zeroLineBorderDashOffset: [2],
-    },
-    ticks: {
-      beginAtZero: true,
-      padding: 10,
-      callback: function (value) {
-        if (!(value % 10)) {
-          return value
-        }
-      },
-    },
-  })
-
-  // xAxes
-  Chart.scaleService.updateScaleDefaults('category', {
-    gridLines: {
-      drawBorder: false,
-      drawOnChartArea: false,
-      drawTicks: false,
-      lineWidth: 1,
-      zeroLineWidth: 1,
-    },
-    ticks: {
-      padding: 20,
-    },
-    maxBarThickness: 10,
-  })
-
-  return options
-}
-
-let initialized = false
-
-export function initGlobalOptions() {
-  if (initialized) {
-    return
-  }
-  parseOptions(Chart, chartOptions())
-  initialized = true
-}
-
-export const basicOptions = {
-  maintainAspectRatio: false,
-  legend: {
-    display: false,
-  },
-  responsive: true,
-}
-export const blueChartOptions = {
-  scales: {
-    yAxes: [
-      {
-        gridLines: {
-          color: Charts.colors.gray[700],
-          zeroLineColor: Charts.colors.gray[700],
-        },
-      },
-    ],
-  },
-}
-
-export const lineChartOptionsBlue = {
-  ...basicOptions,
-  tooltips: {
-    backgroundColor: '#f5f5f5',
-    titleFontColor: '#333',
-    bodyFontColor: '#666',
-    bodySpacing: 4,
-    xPadding: 12,
-    mode: 'nearest',
-    intersect: 0,
-    position: 'nearest',
-  },
-  responsive: true,
-  scales: {
-    yAxes: [
-      {
-        barPercentage: 1.6,
-        gridLines: {
-          drawBorder: false,
-          color: 'rgba(29,140,248,0.0)',
-          zeroLineColor: 'transparent',
-        },
-        ticks: {
-          suggestedMin: 60,
-          suggestedMax: 125,
-          padding: 20,
-          fontColor: '#9e9e9e',
-        },
-      },
-    ],
-
-    xAxes: [
-      {
-        barPercentage: 1.6,
-        gridLines: {
-          drawBorder: false,
-          color: 'rgba(29,140,248,0.1)',
-          zeroLineColor: 'transparent',
-        },
-        ticks: {
-          padding: 20,
-          fontColor: '#9e9e9e',
-        },
-      },
-    ],
-  },
-}
diff --git a/frontend/src/components/Charts/globalOptionsMixin.js b/frontend/src/components/Charts/globalOptionsMixin.js
deleted file mode 100644
index 323ac94e4..000000000
--- a/frontend/src/components/Charts/globalOptionsMixin.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { initGlobalOptions } from '@/components/Charts/config'
-import './roundedCornersExtension'
-export default {
-  mounted() {
-    initGlobalOptions()
-  },
-}
diff --git a/frontend/src/components/Charts/optionHelpers.js b/frontend/src/components/Charts/optionHelpers.js
deleted file mode 100644
index 5b4630b73..000000000
--- a/frontend/src/components/Charts/optionHelpers.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// Parse global options
-export function parseOptions(parent, options) {
-  for (const item in options) {
-    if (typeof options[item] !== 'object') {
-      parent[item] = options[item]
-    } else {
-      parseOptions(parent[item], options[item])
-    }
-  }
-}
diff --git a/frontend/src/components/Charts/roundedCornersExtension.js b/frontend/src/components/Charts/roundedCornersExtension.js
deleted file mode 100644
index 2ef8fd1d2..000000000
--- a/frontend/src/components/Charts/roundedCornersExtension.js
+++ /dev/null
@@ -1,126 +0,0 @@
-//
-// Chart extension for making the bars rounded
-// Code from: https://codepen.io/jedtrow/full/ygRYgo
-//
-import Chart from 'chart.js'
-Chart.elements.Rectangle.prototype.draw = function () {
-  const ctx = this._chart.ctx
-  const vm = this._view
-  let left, right, top, bottom, signX, signY, borderSkipped
-  let borderWidth = vm.borderWidth
-  // Set Radius Here
-  // If radius is large enough to cause drawing errors a max radius is imposed
-  const cornerRadius = 6
-
-  if (!vm.horizontal) {
-    // bar
-    left = vm.x - vm.width / 2
-    right = vm.x + vm.width / 2
-    top = vm.y
-    bottom = vm.base
-    signX = 1
-    signY = bottom > top ? 1 : -1
-    borderSkipped = vm.borderSkipped || 'bottom'
-  } else {
-    // horizontal bar
-    left = vm.base
-    right = vm.x
-    top = vm.y - vm.height / 2
-    bottom = vm.y + vm.height / 2
-    signX = right > left ? 1 : -1
-    signY = 1
-    borderSkipped = vm.borderSkipped || 'left'
-  }
-
-  // Canvas doesn't allow us to stroke inside the width so we can
-  // adjust the sizes to fit if we're setting a stroke on the line
-  if (borderWidth) {
-    // borderWidth shold be less than bar width and bar height.
-    const barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom))
-    borderWidth = borderWidth > barSize ? barSize : borderWidth
-    const halfStroke = borderWidth / 2
-    // Adjust borderWidth when bar top position is near vm.base(zero).
-    const borderLeft = left + (borderSkipped !== 'left' ? halfStroke * signX : 0)
-    const borderRight = right + (borderSkipped !== 'right' ? -halfStroke * signX : 0)
-    const borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0)
-    const borderBottom = bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0)
-    // not become a vertical line?
-    if (borderLeft !== borderRight) {
-      top = borderTop
-      bottom = borderBottom
-    }
-    // not become a horizontal line?
-    if (borderTop !== borderBottom) {
-      left = borderLeft
-      right = borderRight
-    }
-  }
-
-  ctx.beginPath()
-  ctx.fillStyle = vm.backgroundColor
-  ctx.strokeStyle = vm.borderColor
-  ctx.lineWidth = borderWidth
-
-  // Corner points, from bottom-left to bottom-right clockwise
-  // | 1 2 |
-  // | 0 3 |
-  const corners = [
-    [left, bottom],
-    [left, top],
-    [right, top],
-    [right, bottom],
-  ]
-
-  // Find first (starting) corner with fallback to 'bottom'
-  const borders = ['bottom', 'left', 'top', 'right']
-  let startCorner = borders.indexOf(borderSkipped, 0)
-  if (startCorner === -1) {
-    startCorner = 0
-  }
-
-  function cornerAt(index) {
-    return corners[(startCorner + index) % 4]
-  }
-
-  // Draw rectangle from 'startCorner'
-  let corner = cornerAt(0)
-  ctx.moveTo(corner[0], corner[1])
-
-  for (let i = 1; i < 4; i++) {
-    corner = cornerAt(i)
-    let nextCornerId = i + 1
-    if (nextCornerId === 4) {
-      nextCornerId = 0
-    }
-
-    const width = corners[2][0] - corners[1][0]
-    const height = corners[0][1] - corners[1][1]
-    const x = corners[1][0]
-    const y = corners[1][1]
-
-    let radius = cornerRadius
-
-    // Fix radius being too large
-    if (radius > height / 2) {
-      radius = height / 2
-    }
-    if (radius > width / 2) {
-      radius = width / 2
-    }
-
-    ctx.moveTo(x + radius, y)
-    ctx.lineTo(x + width - radius, y)
-    ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
-    ctx.lineTo(x + width, y + height - radius)
-    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
-    ctx.lineTo(x + radius, y + height)
-    ctx.quadraticCurveTo(x, y + height, x, y + height - radius)
-    ctx.lineTo(x, y + radius)
-    ctx.quadraticCurveTo(x, y, x + radius, y)
-  }
-
-  ctx.fill()
-  if (borderWidth) {
-    ctx.stroke()
-  }
-}
diff --git a/frontend/src/components/CloseButton.spec.js b/frontend/src/components/CloseButton.spec.js
deleted file mode 100644
index b92422df8..000000000
--- a/frontend/src/components/CloseButton.spec.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { mount } from '@vue/test-utils'
-
-import CloseButton from './CloseButton'
-
-const localVue = global.localVue
-
-describe('CloseButton', () => {
-  let wrapper
-  const propsData = {
-    target: 'Target',
-    expanded: false,
-  }
-
-  const Wrapper = () => {
-    return mount(CloseButton, { localVue, propsData })
-  }
-
-  describe('mount', () => {
-    beforeEach(() => {
-      wrapper = Wrapper()
-    })
-
-    it('emmits click event', () => {
-      wrapper.find('.navbar-toggler').trigger('click')
-      expect(wrapper.emitted('click')).toBeTruthy()
-    })
-  })
-})
diff --git a/frontend/src/components/CloseButton.vue b/frontend/src/components/CloseButton.vue
deleted file mode 100755
index 8c61f4f60..000000000
--- a/frontend/src/components/CloseButton.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <button
-    type="button"
-    class="navbar-toggler"
-    data-toggle="collapse"
-    @click="handleClick"
-    :data-target="`#${target}`"
-    :aria-controls="target"
-    :aria-expanded="expanded"
-    aria-label="Toggle navigation"
-  >
-    <span></span>
-    <span></span>
-  </button>
-</template>
-<script>
-export default {
-  name: 'close-button',
-  props: {
-    target: {
-      type: [String, Number],
-      description: 'Close button target element',
-    },
-    expanded: {
-      type: Boolean,
-      description: 'Whether button is expanded (aria-expanded attribute)',
-    },
-  },
-  methods: {
-    handleClick(evt) {
-      this.$emit('click', evt)
-    },
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/components/NotificationPlugin/Notification.vue b/frontend/src/components/NotificationPlugin/Notification.vue
deleted file mode 100644
index e36985036..000000000
--- a/frontend/src/components/NotificationPlugin/Notification.vue
+++ /dev/null
@@ -1,194 +0,0 @@
-<template>
-  <div
-    @click="tryClose"
-    data-notify="container"
-    class="alert alert-notify alert-dismissible"
-    :class="[{ 'alert-with-icon': icon }, verticalAlign, horizontalAlign, alertType]"
-    role="alert"
-    :style="customPosition"
-    data-notify-position="top-center"
-  >
-    <template v-if="icon || $slots.icon">
-      <slot name="icon">
-        <span class="alert-icon" data-notify="icon">
-          <i :class="icon"></i>
-        </span>
-      </slot>
-    </template>
-
-    <span class="alert-text">
-      <span v-if="title" class="title">
-        <b>
-          {{ title }}
-          <br />
-        </b>
-      </span>
-      <span v-if="message" v-html="message"></span>
-      <content-render v-if="!message && component" :component="component"></content-render>
-    </span>
-
-    <slot name="dismiss-icon">
-      <button type="button" class="close" data-dismiss="alert" aria-label="Close" @click="close">
-        <span aria-hidden="true">×</span>
-      </button>
-    </slot>
-  </div>
-</template>
-<script>
-export default {
-  name: 'notification',
-  components: {
-    contentRender: {
-      props: ['component'],
-      render: function (createElement) {
-        return createElement(this.component)
-      },
-    },
-  },
-  props: {
-    message: String,
-    title: {
-      type: String,
-      description: 'Notification title',
-    },
-    icon: {
-      type: String,
-      description: 'Notification icon',
-    },
-    verticalAlign: {
-      type: String,
-      default: 'top',
-      validator: (value) => {
-        const acceptedValues = ['top', 'bottom']
-        return acceptedValues.indexOf(value) !== -1
-      },
-      description: 'Vertical alignment of notification (top|bottom)',
-    },
-    horizontalAlign: {
-      type: String,
-      default: 'right',
-      validator: (value) => {
-        const acceptedValues = ['left', 'center', 'right']
-        return acceptedValues.indexOf(value) !== -1
-      },
-      description: 'Horizontal alignment of notification (left|center|right)',
-    },
-    type: {
-      type: String,
-      default: 'info',
-      validator: (value) => {
-        const acceptedValues = ['default', 'info', 'primary', 'danger', 'warning', 'success']
-        return acceptedValues.indexOf(value) !== -1
-      },
-      description:
-        'Notification type of notification (default|info|primary|danger|warning|success)',
-    },
-    timeout: {
-      type: Number,
-      default: 5000,
-      validator: (value) => {
-        return value >= 0
-      },
-      description: 'Notification timeout (closes after X milliseconds). Default is 5000 (5s)',
-    },
-    timestamp: {
-      type: Date,
-      default: () => new Date(),
-      description:
-        'Notification timestamp (used internally to handle notification removal correctly)',
-    },
-    component: {
-      type: [Object, Function],
-      description: 'Custom content component. Cane be a `.vue` component or render function',
-    },
-    showClose: {
-      type: Boolean,
-      default: true,
-      description: 'Whether to show close button',
-    },
-    closeOnClick: {
-      type: Boolean,
-      default: true,
-      description: "Whether to close notification when clicking it' body",
-    },
-    clickHandler: {
-      type: Function,
-      description: 'Custom notification click handler',
-    },
-  },
-  data() {
-    return {
-      elmHeight: 0,
-    }
-  },
-  computed: {
-    hasIcon() {
-      return this.icon && this.icon.length > 0
-    },
-    alertType() {
-      return `alert-${this.type}`
-    },
-    customPosition() {
-      const initialMargin = 20
-      const alertHeight = this.elmHeight + 10
-      let sameAlertsCount = this.$notifications.state.filter((alert) => {
-        return (
-          alert.horizontalAlign === this.horizontalAlign &&
-          alert.verticalAlign === this.verticalAlign &&
-          alert.timestamp <= this.timestamp
-        )
-      }).length
-      if (this.$notifications.settings.overlap) {
-        sameAlertsCount = 1
-      }
-      const pixels = (sameAlertsCount - 1) * alertHeight + initialMargin
-      const styles = {}
-      if (this.verticalAlign === 'top') {
-        styles.top = `${pixels}px`
-      } else {
-        styles.bottom = `${pixels}px`
-      }
-      return styles
-    },
-  },
-  methods: {
-    close() {
-      this.$emit('close', this.timestamp)
-    },
-    tryClose(evt) {
-      if (this.clickHandler) {
-        this.clickHandler(evt, this)
-      }
-      if (this.closeOnClick) {
-        this.close()
-      }
-    },
-  },
-  mounted() {
-    this.elmHeight = this.$el.clientHeight
-    if (this.timeout) {
-      setTimeout(this.close, this.timeout)
-    }
-  },
-}
-</script>
-<style lang="scss">
-.notifications .alert {
-  position: fixed;
-  z-index: 10000;
-
-  &[data-notify='container'] {
-    max-width: 500px;
-  }
-
-  &.center {
-    margin: 0 auto;
-  }
-  &.left {
-    left: 20px;
-  }
-  &.right {
-    right: 20px;
-  }
-}
-</style>
diff --git a/frontend/src/components/NotificationPlugin/Notifications.vue b/frontend/src/components/NotificationPlugin/Notifications.vue
deleted file mode 100644
index f180a7f37..000000000
--- a/frontend/src/components/NotificationPlugin/Notifications.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <div class="notifications">
-    <slide-y-up-transition :duration="transitionDuration" group mode="out-in">
-      <notification
-        v-for="notification in notifications"
-        v-bind="notification"
-        :clickHandler="notification.onClick"
-        :key="notification.timestamp.getTime()"
-        @close="removeNotification"
-      ></notification>
-    </slide-y-up-transition>
-  </div>
-</template>
-<script>
-import Notification from './Notification.vue'
-import { SlideYUpTransition } from 'vue2-transitions'
-
-export default {
-  components: {
-    SlideYUpTransition,
-    Notification,
-  },
-  props: {
-    transitionDuration: {
-      type: Number,
-      default: 200,
-    },
-    overlap: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      notifications: this.$notifications.state,
-    }
-  },
-  methods: {
-    removeNotification(timestamp) {
-      this.$notifications.removeNotification(timestamp)
-    },
-  },
-  created() {
-    this.$notifications.settings.overlap = this.overlap
-  },
-  watch: {
-    overlap: function (newVal) {
-      this.$notifications.settings.overlap = newVal
-    },
-  },
-}
-</script>
diff --git a/frontend/src/components/NotificationPlugin/index.js b/frontend/src/components/NotificationPlugin/index.js
deleted file mode 100644
index 5b6bbe67b..000000000
--- a/frontend/src/components/NotificationPlugin/index.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import Notifications from './Notifications.vue'
-
-const NotificationStore = {
-  state: [], // here the notifications will be added
-  settings: {
-    overlap: false,
-    verticalAlign: 'top',
-    horizontalAlign: 'right',
-    type: 'info',
-    timeout: 5000,
-    closeOnClick: true,
-    showClose: true,
-  },
-  setOptions(options) {
-    this.settings = Object.assign(this.settings, options)
-  },
-  removeNotification(timestamp) {
-    const indexToDelete = this.state.findIndex((n) => n.timestamp === timestamp)
-    if (indexToDelete !== -1) {
-      this.state.splice(indexToDelete, 1)
-    }
-  },
-  addNotification(notification) {
-    if (typeof notification === 'string' || notification instanceof String) {
-      notification = { message: notification }
-    }
-    notification.timestamp = new Date()
-    notification.timestamp.setMilliseconds(
-      notification.timestamp.getMilliseconds() + this.state.length,
-    )
-    notification = Object.assign({}, this.settings, notification)
-    this.state.push(notification)
-  },
-  notify(notification) {
-    if (Array.isArray(notification)) {
-      notification.forEach((notificationInstance) => {
-        this.addNotification(notificationInstance)
-      })
-    } else {
-      this.addNotification(notification)
-    }
-  },
-}
-
-const NotificationsPlugin = {
-  install(Vue, options) {
-    const app = new Vue({
-      data: {
-        notificationStore: NotificationStore,
-      },
-      methods: {
-        notify(notification) {
-          this.notificationStore.notify(notification)
-        },
-      },
-    })
-    Vue.prototype.$notify = app.notify
-    Vue.prototype.$notifications = app.notificationStore
-    Vue.component('Notifications', Notifications)
-    if (options) {
-      NotificationStore.setOptions(options)
-    }
-  },
-}
-
-export default NotificationsPlugin
diff --git a/frontend/src/components/SearchUser.vue b/frontend/src/components/SearchUser.vue
deleted file mode 100644
index dd3fe34a6..000000000
--- a/frontend/src/components/SearchUser.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-  <vue-bootstrap-typeahead v-model="query" :data="users" @change="getUser" />
-</template>
-<script>
-import VueBootstrapTypeahead from 'vue-bootstrap-typeahead'
-
-// Global registration
-// Vue.component('vue-bootstrap-typeahead', VueBootstrapTypeahead)
-
-// OR
-
-// Local registration
-export default {
-  name: 'SearchUser',
-  components: {
-    VueBootstrapTypeahead,
-  },
-  data() {
-    return {
-      user: '',
-      users: [
-        'Bob',
-        'Alice',
-        'Bernd',
-        'Dario',
-        'Alex',
-        'Pauls',
-        'Ulf',
-        'Delaware',
-        'Florida',
-        'Georgia',
-        'Hawaii',
-        'Idaho',
-        'Illnois',
-        'Indiana',
-        'Iowa',
-        'Kansas',
-        'Kentucky',
-        'Louisiana',
-        'Maine',
-        'Maryland',
-        'Massachusetts',
-        'Michigan',
-        'Minnesota',
-        'Mississippi',
-        'Missouri',
-        'Montana',
-        'Nebraska',
-        'Nevada',
-        'New Hampshire',
-        'New Jersey',
-        'New Mexico',
-        'New York',
-        'North Carolina',
-        'North Dakota',
-        'Ohio',
-        'Oklahoma',
-        'Oregon',
-        'Pennsylvania',
-        'Rhode Island',
-        'South Carolina',
-        'South Dakota',
-        'Tennessee',
-        'Texas',
-        'Utah',
-        'Vermont',
-        'Virginia',
-        'Washington',
-        'West Virginia',
-        'Wisconsin',
-        'Wyoming',
-      ],
-    }
-  },
-  methods: {
-    getUser() {
-      alert(this.data.user)
-    },
-  },
-}
-</script>
diff --git a/frontend/src/components/SidebarPlugin/index.js b/frontend/src/components/SidebarPlugin/index.js
index ab59a9595..4723f9952 100755
--- a/frontend/src/components/SidebarPlugin/index.js
+++ b/frontend/src/components/SidebarPlugin/index.js
@@ -10,12 +10,10 @@ const SidebarStore = {
   },
   toggleMinimize() {
     document.body.classList.toggle('sidebar-mini')
-    // we simulate the window Resize so the charts will get updated in realtime.
     const simulateWindowResize = setInterval(() => {
       window.dispatchEvent(new Event('resize'))
     }, 180)
 
-    // we stop the simulation of Window Resize after the animations are completed
     setTimeout(() => {
       clearInterval(simulateWindowResize)
     }, 1000)
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 60015ef98..0fcda6c30 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -106,7 +106,6 @@
     },
     "profil": {
       "activity": {
-        "chart":"Gemeinschaftsstunden Chart",
         "new":"Neue Gemeinschaftsstunden eintragen",
         "list":"Meine Gemeinschaftsstunden Liste"
       }      
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 5154aacc0..1ea67c41d 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -107,7 +107,6 @@
     "profil": {
       "transactions":"transactions",
       "activity": {
-        "chart":"Community Hours Chart",
         "new":"Register new community hours",
         "list":"My Community Hours List"
       }      
diff --git a/frontend/src/plugins/dashboard-plugin.js b/frontend/src/plugins/dashboard-plugin.js
index 269fa7a84..cd2e00aa5 100755
--- a/frontend/src/plugins/dashboard-plugin.js
+++ b/frontend/src/plugins/dashboard-plugin.js
@@ -1,7 +1,5 @@
 // Polyfills for js features used in the Dashboard but not supported in some browsers (mainly IE)
 import '@/polyfills'
-// Notifications plugin. Used on Notifications page
-import Notifications from '@/components/NotificationPlugin'
 // Validation plugin used to validate forms
 import { configure, extend, localize } from 'vee-validate'
 // A plugin file where you could register global components used across the app
@@ -48,7 +46,6 @@ export default {
     Vue.use(GlobalComponents)
     Vue.use(GlobalDirectives)
     Vue.use(SideBar)
-    Vue.use(Notifications)
     Vue.use(BootstrapVue)
     Vue.use(IconsPlugin)
     Vue.use(VueGoodTablePlugin)
diff --git a/frontend/test/testSetup.js b/frontend/test/testSetup.js
index 0bfd5566a..5fca6b8e2 100644
--- a/frontend/test/testSetup.js
+++ b/frontend/test/testSetup.js
@@ -6,7 +6,6 @@ import * as rules from 'vee-validate/dist/rules'
 
 import { messages } from 'vee-validate/dist/locale/en.json'
 import RegeneratorRuntime from 'regenerator-runtime'
-import Notifications from '@/components/NotificationPlugin'
 import SideBar from '@/components/SidebarPlugin'
 import VueRouter from 'vue-router'
 import VueQrcode from 'vue-qrcode'
@@ -29,7 +28,6 @@ global.localVue.use(BootstrapVue)
 global.localVue.use(Vuex)
 global.localVue.use(IconsPlugin)
 global.localVue.use(RegeneratorRuntime)
-global.localVue.use(Notifications)
 global.localVue.use(SideBar)
 global.localVue.use(VueRouter)
 global.localVue.use(VueQrcode)

From 0312b4e62edf457422515b1a016f1a5df06d1055 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Sat, 12 Jun 2021 16:46:40 +0200
Subject: [PATCH 18/27] fix lint

---
 frontend/src/components/index.js | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
index 23a00697d..57d9d6a68 100755
--- a/frontend/src/components/index.js
+++ b/frontend/src/components/index.js
@@ -8,12 +8,4 @@ import CollapseItem from './Collapse/CollapseItem.vue'
 
 import SidebarPlugin from './SidebarPlugin'
 
-export {
-  SidebarPlugin,
-  BaseNav,
-  NavbarToggleButton,
-  TabPane,
-  Tabs,
-  Collapse,
-  CollapseItem,
-}
+export { SidebarPlugin, BaseNav, NavbarToggleButton, TabPane, Tabs, Collapse, CollapseItem }

From 38be14ecef02d75fbd856a4d8128d4aa02782877 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Sun, 13 Jun 2021 05:09:47 +0200
Subject: [PATCH 19/27] code cleaned up and unnecessary comments removed

---
 frontend/src/plugins/dashboard-plugin.js      | 19 ++++---------------
 .../Pages/AccountOverview/GddAddWork2.vue     |  4 ----
 2 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/frontend/src/plugins/dashboard-plugin.js b/frontend/src/plugins/dashboard-plugin.js
index cd2e00aa5..fa5b2ebf9 100755
--- a/frontend/src/plugins/dashboard-plugin.js
+++ b/frontend/src/plugins/dashboard-plugin.js
@@ -1,15 +1,9 @@
-// Polyfills for js features used in the Dashboard but not supported in some browsers (mainly IE)
 import '@/polyfills'
-// Validation plugin used to validate forms
 import { configure, extend, localize } from 'vee-validate'
-// A plugin file where you could register global components used across the app
 import GlobalComponents from './globalComponents'
-// A plugin file where you could register global directives
 import GlobalDirectives from './globalDirectives'
-// Sidebar on the right. Used as a local plugin in DashboardLayout.vue
 import SideBar from '@/components/SidebarPlugin'
 
-// asset imports
 import '@/assets/scss/argon.scss'
 import '@/assets/vendor/nucleo/css/nucleo.css'
 import * as rules from 'vee-validate/dist/rules'
@@ -18,19 +12,14 @@ import en, { messages } from 'vee-validate/dist/locale/en.json'
 import VueQrcodeReader from 'vue-qrcode-reader'
 import VueQrcode from 'vue-qrcode'
 
-import VueFlatPickr from 'vue-flatpickr-component'
-
-import VueGoodTablePlugin from 'vue-good-table'
-// import the styles
-import 'vue-good-table/dist/vue-good-table.css'
+import FlatPickr from 'vue-flatpickr-component'
+import 'flatpickr/dist/flatpickr.css'
 
 import VueMoment from 'vue-moment'
 
 import Loading from 'vue-loading-overlay'
-// import the styles
 import 'vue-loading-overlay/dist/vue-loading.css'
 
-// vue-bootstrap
 import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 
 localize('en', en)
@@ -41,6 +30,7 @@ Object.keys(rules).forEach((rule) => {
     message: messages[rule], // assign message
   })
 })
+
 export default {
   install(Vue) {
     Vue.use(GlobalComponents)
@@ -48,11 +38,10 @@ export default {
     Vue.use(SideBar)
     Vue.use(BootstrapVue)
     Vue.use(IconsPlugin)
-    Vue.use(VueGoodTablePlugin)
     Vue.use(VueMoment)
     Vue.use(VueQrcodeReader)
     Vue.use(VueQrcode)
-    Vue.use(VueFlatPickr)
+    Vue.use(FlatPickr)
     Vue.use(Loading)
     configure({
       classes: {
diff --git a/frontend/src/views/Pages/AccountOverview/GddAddWork2.vue b/frontend/src/views/Pages/AccountOverview/GddAddWork2.vue
index d66eaf2df..70f56f0e6 100644
--- a/frontend/src/views/Pages/AccountOverview/GddAddWork2.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddAddWork2.vue
@@ -57,12 +57,8 @@
 </template>
 
 <script>
-import flatPickr from 'vue-flatpickr-component'
-import 'flatpickr/dist/flatpickr.css'
-
 export default {
   name: 'GDDAddWork2',
-  components: { flatPickr },
   data() {
     return {
       date: null,

From 3e3048cf3969f15526814f07910fa421394568bd Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Sun, 13 Jun 2021 05:45:59 +0200
Subject: [PATCH 20/27] component tab, tabs removed

---
 frontend/src/components/Tabs/Tab.vue  |  33 ------
 frontend/src/components/Tabs/Tabs.vue | 155 --------------------------
 frontend/src/components/index.js      |   4 +-
 3 files changed, 1 insertion(+), 191 deletions(-)
 delete mode 100644 frontend/src/components/Tabs/Tab.vue
 delete mode 100644 frontend/src/components/Tabs/Tabs.vue

diff --git a/frontend/src/components/Tabs/Tab.vue b/frontend/src/components/Tabs/Tab.vue
deleted file mode 100644
index 32d97c22e..000000000
--- a/frontend/src/components/Tabs/Tab.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div
-    class="tab-pane"
-    v-show="active"
-    :id="id || title"
-    :class="{ active: active }"
-    :aria-expanded="active"
-  >
-    <slot></slot>
-  </div>
-</template>
-<script>
-export default {
-  name: 'tab-pane',
-  props: ['title', 'id'],
-  inject: ['addTab', 'removeTab'],
-  data() {
-    return {
-      active: false,
-    }
-  },
-  mounted() {
-    this.addTab(this)
-  },
-  destroyed() {
-    if (this.$el && this.$el.parentNode) {
-      this.$el.parentNode.removeChild(this.$el)
-    }
-    this.removeTab(this)
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/components/Tabs/Tabs.vue b/frontend/src/components/Tabs/Tabs.vue
deleted file mode 100644
index 211c8d0cd..000000000
--- a/frontend/src/components/Tabs/Tabs.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-  <div>
-    <div
-      :class="[
-        { 'col-md-4': vertical && !tabNavWrapperClasses },
-        { 'col-12': centered && !tabNavWrapperClasses },
-        tabNavWrapperClasses,
-      ]"
-    >
-      <b-nav
-        class="nav-pills"
-        role="tablist"
-        :class="[
-          `nav-pills-${type}`,
-          { 'flex-column': vertical },
-          { 'justify-content-center': centered },
-          tabNavClasses,
-        ]"
-      >
-        <b-nav-item
-          v-for="tab in tabs"
-          class="active"
-          data-toggle="tab"
-          role="tablist"
-          :active="tab.active"
-          :key="tab.id"
-          :href="`#${tab.id}`"
-          @click.prevent="activateTab(tab)"
-          :aria-expanded="tab.active"
-        >
-          <tab-item-content :tab="tab"></tab-item-content>
-        </b-nav-item>
-      </b-nav>
-    </div>
-    <div
-      class="tab-content"
-      :class="[
-        { 'tab-space': !vertical },
-        { 'col-md-8': vertical && !tabContentClasses },
-        tabContentClasses,
-      ]"
-    >
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'tabs',
-  components: {
-    TabItemContent: {
-      props: ['tab'],
-      render(h) {
-        return h('div', [this.tab.$slots.title || this.tab.title])
-      },
-    },
-  },
-  provide() {
-    return {
-      addTab: this.addTab,
-      removeTab: this.removeTab,
-    }
-  },
-  props: {
-    type: {
-      type: String,
-      default: 'primary',
-      validator: (value) => {
-        const acceptedValues = ['primary', 'info', 'success', 'warning', 'danger']
-        return acceptedValues.indexOf(value) !== -1
-      },
-    },
-    activeTab: {
-      type: String,
-      default: '',
-      description: 'Active tab name',
-    },
-    tabNavWrapperClasses: {
-      type: [String, Object],
-      default: '',
-      description: 'ul wrapper css classes',
-    },
-    tabNavClasses: {
-      type: [String, Object],
-      default: '',
-      description: 'ul css classes',
-    },
-    tabContentClasses: {
-      type: [String, Object],
-      default: '',
-      description: 'tab content css classes',
-    },
-    vertical: Boolean,
-    centered: Boolean,
-    value: String,
-  },
-  data() {
-    return {
-      tabs: [],
-    }
-  },
-  methods: {
-    findAndActivateTab(title) {
-      const tabToActivate = this.tabs.find((t) => t.title === title)
-      if (tabToActivate) {
-        this.activateTab(tabToActivate)
-      }
-    },
-    activateTab(tab) {
-      if (this.handleClick) {
-        this.handleClick(tab)
-      }
-      this.deactivateTabs()
-      tab.active = true
-    },
-    deactivateTabs() {
-      this.tabs.forEach((tab) => {
-        tab.active = false
-      })
-    },
-    addTab(tab) {
-      const index = this.$slots.default.indexOf(tab.$vnode)
-      if (!this.activeTab && index === 0) {
-        tab.active = true
-      }
-      if (this.activeTab === tab.name) {
-        tab.active = true
-      }
-      this.tabs.splice(index, 0, tab)
-    },
-    removeTab(tab) {
-      const tabs = this.tabs
-      const index = tabs.indexOf(tab)
-      if (index > -1) {
-        tabs.splice(index, 1)
-      }
-    },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      if (this.value) {
-        this.findAndActivateTab(this.value)
-      }
-    })
-  },
-  watch: {
-    value(newVal) {
-      this.findAndActivateTab(newVal)
-    },
-  },
-}
-</script>
-
-<style scoped></style>
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
index 57d9d6a68..7e8285d0f 100755
--- a/frontend/src/components/index.js
+++ b/frontend/src/components/index.js
@@ -1,11 +1,9 @@
 import BaseNav from './Navbar/BaseNav'
 import NavbarToggleButton from './Navbar/NavbarToggleButton'
 
-import TabPane from './Tabs/Tab.vue'
-import Tabs from './Tabs/Tabs.vue'
 import Collapse from './Collapse/Collapse.vue'
 import CollapseItem from './Collapse/CollapseItem.vue'
 
 import SidebarPlugin from './SidebarPlugin'
 
-export { SidebarPlugin, BaseNav, NavbarToggleButton, TabPane, Tabs, Collapse, CollapseItem }
+export { SidebarPlugin, BaseNav, NavbarToggleButton, Collapse, CollapseItem }

From c5525dfe95bbe576e9336ffa7323770f56a2f826 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Sun, 13 Jun 2021 06:55:58 +0200
Subject: [PATCH 21/27] component BaseNav, DashboardNavbar.vue  removed,

---
 frontend/src/components/Navbar/BaseNav.vue    | 120 ------------------
 frontend/src/components/index.js              |   3 +-
 frontend/src/plugins/globalComponents.js      |   2 -
 .../src/views/Layout/DashboardLayout_gdd.vue  |   3 -
 frontend/src/views/Layout/DashboardNavbar.vue |  48 -------
 5 files changed, 1 insertion(+), 175 deletions(-)
 delete mode 100644 frontend/src/components/Navbar/BaseNav.vue
 delete mode 100755 frontend/src/views/Layout/DashboardNavbar.vue

diff --git a/frontend/src/components/Navbar/BaseNav.vue b/frontend/src/components/Navbar/BaseNav.vue
deleted file mode 100644
index 778f550fc..000000000
--- a/frontend/src/components/Navbar/BaseNav.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <b-navbar toggleable :class="classes">
-    <div :class="containerClasses">
-      <slot name="brand"></slot>
-
-      <slot name="toggle-button">
-        <button
-          class="navbar-toggler collapsed"
-          v-if="hasMenu"
-          type="button"
-          @click="toggleMenu"
-          aria-expanded="false"
-          aria-label="Toggle navigation"
-        >
-          <span class="navbar-toggler-bar navbar-kebab"></span>
-          <span class="navbar-toggler-bar navbar-kebab"></span>
-          <span class="navbar-toggler-bar navbar-kebab"></span>
-        </button>
-      </slot>
-
-      <b-navbar-toggle target="nav-text-collapse" @click.stop="toggleMenu"></b-navbar-toggle>
-
-      <b-collapse
-        is-nav
-        id="nav-text-collapse"
-        class="navbar-custom-collapse collapse"
-        :class="menuClasses"
-        :visible="show"
-        v-click-outside="closeMenu"
-      >
-        <slot :close-menu="closeMenu"></slot>
-      </b-collapse>
-    </div>
-  </b-navbar>
-</template>
-<script>
-export default {
-  name: 'base-nav',
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-      description:
-        'Whether navbar menu is shown (valid for viewports < specified by `expand` prop)',
-    },
-    transparent: {
-      type: Boolean,
-      default: false,
-      description: 'Whether navbar is transparent',
-    },
-    expand: {
-      type: String,
-      default: 'lg',
-      description: 'Breakpoint where nav should expand',
-    },
-    menuClasses: {
-      type: [String, Object, Array],
-      default: '',
-      description: 'Navbar menu (items) classes. Can be used to align menu items to the right/left',
-    },
-    containerClasses: {
-      type: [String, Object, Array],
-      default: 'container',
-      description:
-        'Container classes. Can be used to control container classes (contains both navbar brand and menu items)',
-    },
-    type: {
-      type: String,
-      default: '',
-      validator(value) {
-        return [
-          '',
-          'dark',
-          'success',
-          'danger',
-          'warning',
-          'white',
-          'primary',
-          'light',
-          'info',
-          'vue',
-        ].includes(value)
-      },
-      description: 'Navbar color type',
-    },
-  },
-  model: {
-    prop: 'show',
-    event: 'change',
-  },
-  computed: {
-    classes() {
-      const color = `bg-${this.type}`
-      const classes = [
-        { 'navbar-transparent': this.transparent },
-        { [`navbar-expand-${this.expand}`]: this.expand },
-      ]
-      if (this.position) {
-        classes.push(`navbar-${this.position}`)
-      }
-      if (!this.transparent) {
-        classes.push(color)
-      }
-      return classes
-    },
-    hasMenu() {
-      return this.$slots.default
-    },
-  },
-  methods: {
-    toggleMenu() {
-      this.$emit('change', !this.show)
-    },
-    closeMenu() {
-      this.$emit('change', false)
-    },
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
index 7e8285d0f..155b060de 100755
--- a/frontend/src/components/index.js
+++ b/frontend/src/components/index.js
@@ -1,4 +1,3 @@
-import BaseNav from './Navbar/BaseNav'
 import NavbarToggleButton from './Navbar/NavbarToggleButton'
 
 import Collapse from './Collapse/Collapse.vue'
@@ -6,4 +5,4 @@ import CollapseItem from './Collapse/CollapseItem.vue'
 
 import SidebarPlugin from './SidebarPlugin'
 
-export { SidebarPlugin, BaseNav, NavbarToggleButton, Collapse, CollapseItem }
+export { SidebarPlugin, NavbarToggleButton, Collapse, CollapseItem }
diff --git a/frontend/src/plugins/globalComponents.js b/frontend/src/plugins/globalComponents.js
index aeb268d73..b358e274c 100755
--- a/frontend/src/plugins/globalComponents.js
+++ b/frontend/src/plugins/globalComponents.js
@@ -1,9 +1,7 @@
-import BaseNav from '@/components/Navbar/BaseNav'
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 
 const GlobalComponents = {
   install(Vue) {
-    Vue.component(BaseNav.name, BaseNav)
     Vue.component('validation-provider', ValidationProvider)
     Vue.component('validation-observer', ValidationObserver)
   },
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 70a35a40a..68f3db88e 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -23,7 +23,6 @@
       </template>
     </side-bar>
     <div class="main-content">
-      <dashboard-navbar :type="$route.meta.navbarType"></dashboard-navbar>
       <div @click="$sidebar.displaySidebar(false)">
         <fade-transition :duration="200" origin="center top" mode="out-in">
           <!-- your content here -->
@@ -48,7 +47,6 @@ import PerfectScrollbar from 'perfect-scrollbar'
 import 'perfect-scrollbar/css/perfect-scrollbar.css'
 import loginAPI from '../../apis/loginAPI'
 
-import DashboardNavbar from './DashboardNavbar.vue'
 import ContentFooter from './ContentFooter.vue'
 // import DashboardContent from './Content.vue';
 import { FadeTransition } from 'vue2-transitions'
@@ -72,7 +70,6 @@ function initScrollbar(className) {
 
 export default {
   components: {
-    DashboardNavbar,
     ContentFooter,
     // DashboardContent,
     FadeTransition,
diff --git a/frontend/src/views/Layout/DashboardNavbar.vue b/frontend/src/views/Layout/DashboardNavbar.vue
deleted file mode 100755
index 4cbcb3ca5..000000000
--- a/frontend/src/views/Layout/DashboardNavbar.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <base-nav
-    container-classes="container-fluid"
-    class="navbar-expand"
-    :class="{ 'navbar-dark': type === 'default' }"
-  >
-    <!-- Navbar links -->
-    <b-navbar-nav class="align-items-center ml-md-auto">
-      <!-- This item dont have <b-nav-item> because item have data-action/data-target on tag <a>, wich we cant add -->
-      <li class="nav-item d-sm-none"></li>
-    </b-navbar-nav>
-    <b-navbar-nav class="align-items-center ml-auto ml-md-0">
-      <div class="pr-1" slot="title-container ">
-        <b-media no-body class="align-items-center">
-          <span class="pb-2 text-lg font-weight-bold">
-            {{ $store.state.email }}
-          </span>
-          <b-media-body class="ml-2">
-            <span class="avatar">
-              <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
-            </span>
-          </b-media-body>
-        </b-media>
-      </div>
-    </b-navbar-nav>
-  </base-nav>
-</template>
-<script>
-import { BaseNav } from '@/components'
-import VueQrcode from 'vue-qrcode'
-
-export default {
-  components: {
-    BaseNav,
-    VueQrcode,
-  },
-  props: {
-    type: {
-      type: String,
-    },
-  },
-}
-</script>
-<style>
-.pointer {
-  cursor: pointer;
-}
-</style>

From af20dfd5846f265051a1315e6a218d9da8dae5b9 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Sun, 13 Jun 2021 12:45:09 +0200
Subject: [PATCH 22/27] remove GddStatus.vue, show balance in sidebar and
 navbar

---
 .../components/SidebarPlugin/SideBar.spec.js  |  4 +-
 .../src/components/SidebarPlugin/SideBar.vue  | 23 ++++----
 .../src/views/Pages/AccountOverview.spec.js   |  4 --
 frontend/src/views/Pages/AccountOverview.vue  |  2 -
 .../Pages/AccountOverview/GddStatus.spec.js   | 53 -------------------
 .../views/Pages/AccountOverview/GddStatus.vue | 30 -----------
 6 files changed, 15 insertions(+), 101 deletions(-)
 delete mode 100644 frontend/src/views/Pages/AccountOverview/GddStatus.spec.js
 delete mode 100644 frontend/src/views/Pages/AccountOverview/GddStatus.vue

diff --git a/frontend/src/components/SidebarPlugin/SideBar.spec.js b/frontend/src/components/SidebarPlugin/SideBar.spec.js
index 9f9ce8a8f..4612f6f9e 100644
--- a/frontend/src/components/SidebarPlugin/SideBar.spec.js
+++ b/frontend/src/components/SidebarPlugin/SideBar.spec.js
@@ -43,7 +43,7 @@ describe('SideBar', () => {
 
     describe('balance', () => {
       it('shows em-dash as balance while loading', () => {
-        expect(wrapper.find('div.row.text-center').text()).toBe('— GDD')
+        expect(wrapper.find('.gddBalance').text()).toBe('— GDD')
       })
 
       it('shows the when loaded', async () => {
@@ -51,7 +51,7 @@ describe('SideBar', () => {
           pending: false,
         })
         await wrapper.vm.$nextTick()
-        expect(wrapper.find('div.row.text-center').text()).toBe('1234.56 GDD')
+        expect(wrapper.find('.gddBalance').text()).toBe('1234.56 GDD')
       })
     })
 
diff --git a/frontend/src/components/SidebarPlugin/SideBar.vue b/frontend/src/components/SidebarPlugin/SideBar.vue
index 60d835a1a..138c802e9 100755
--- a/frontend/src/components/SidebarPlugin/SideBar.vue
+++ b/frontend/src/components/SidebarPlugin/SideBar.vue
@@ -4,21 +4,24 @@
     id="sidenav-main"
   >
     <div class="container-fluid">
-      <!--Toggler-->
-      <navbar-toggle-button @click.native="showSidebar"></navbar-toggle-button>
-      <div class="navbar-brand">
-        <img :src="logo" class="navbar-brand-img" alt="..." />
+      <div class="text-center">
+        <div class="mb-2">
+          <img :src="logo" class="navbar-brand-img" alt="Gradido Logo" />
+        </div>
       </div>
-      <b-row class="text-center">
-        <b-col>{{ pending ? '—' : $n(balance, 'decimal') }} GDD</b-col>
-      </b-row>
+      <div class="gddBalance text-center">{{ pending ? '—' : $n(balance, 'decimal') }} GDD</div>
+
+      <div class="text-center">
+        <div class="avatar">
+          <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
+        </div>
+      </div>
+
       <slot name="mobile-right">
         <ul class="nav align-items-center d-md-none">
           <a slot="title-container" class="nav-link" role="button">
             <div class="media align-items-center">
-              <span class="avatar avatar-sm">
-                <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
-              </span>
+              <navbar-toggle-button @click.native="showSidebar"></navbar-toggle-button>
             </div>
           </a>
         </ul>
diff --git a/frontend/src/views/Pages/AccountOverview.spec.js b/frontend/src/views/Pages/AccountOverview.spec.js
index 031828129..9f320cb67 100644
--- a/frontend/src/views/Pages/AccountOverview.spec.js
+++ b/frontend/src/views/Pages/AccountOverview.spec.js
@@ -19,10 +19,6 @@ describe('AccountOverview', () => {
       wrapper = Wrapper()
     })
 
-    it('has a status line', () => {
-      expect(wrapper.find('gdd-status-stub').exists()).toBeTruthy()
-    })
-
     it('has a send field', () => {
       expect(wrapper.find('gdd-send-stub').exists()).toBeTruthy()
     })
diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index 561edbf9c..5cc86860e 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/frontend/src/views/Pages/AccountOverview.vue
@@ -41,7 +41,6 @@
   </div>
 </template>
 <script>
-import GddStatus from './AccountOverview/GddStatus.vue'
 import GddSend from './AccountOverview/GddSend.vue'
 import GddTransactionList from './AccountOverview/GddTransactionList.vue'
 import GddTransactionListFooter from './AccountOverview/GddTransactionListFooter.vue'
@@ -60,7 +59,6 @@ const EMPTY_TRANSACTION_DATA = {
 export default {
   name: 'Overview',
   components: {
-    GddStatus,
     GddSend,
     GddTransactionList,
     GddTransactionListFooter,
diff --git a/frontend/src/views/Pages/AccountOverview/GddStatus.spec.js b/frontend/src/views/Pages/AccountOverview/GddStatus.spec.js
deleted file mode 100644
index b414f4e93..000000000
--- a/frontend/src/views/Pages/AccountOverview/GddStatus.spec.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { mount } from '@vue/test-utils'
-import GddStatus from './GddStatus'
-
-const localVue = global.localVue
-
-describe('GddStatus', () => {
-  let wrapper
-
-  const mocks = {
-    $n: jest.fn((n) => n),
-  }
-
-  const propsData = {
-    balance: 1234,
-    GdtBalance: 9876,
-  }
-
-  const Wrapper = () => {
-    return mount(GddStatus, { localVue, mocks, propsData })
-  }
-
-  describe('mount', () => {
-    beforeEach(() => {
-      wrapper = Wrapper()
-    })
-
-    describe('balance is loading', () => {
-      it('it displays em-dash as the ammount of GDD', () => {
-        expect(wrapper.findAll('div.card-body').at(0).text()).toEqual('— GDD')
-      })
-
-      it('it displays em-dash as the ammount of GDT', () => {
-        expect(wrapper.findAll('div.card-body').at(1).text()).toEqual('— GDT')
-      })
-    })
-
-    describe('balance is loaded', () => {
-      beforeEach(() => {
-        wrapper.setProps({
-          pending: false,
-        })
-      })
-
-      it('it displays the ammount of GDD', () => {
-        expect(wrapper.findAll('div.card-body').at(0).text()).toEqual('1234 GDD')
-      })
-
-      it('it displays the ammount of GDT', () => {
-        expect(wrapper.findAll('div.card-body').at(1).text()).toEqual('9876 GDT')
-      })
-    })
-  })
-})
diff --git a/frontend/src/views/Pages/AccountOverview/GddStatus.vue b/frontend/src/views/Pages/AccountOverview/GddStatus.vue
deleted file mode 100644
index 6bf03d69c..000000000
--- a/frontend/src/views/Pages/AccountOverview/GddStatus.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <div>
-    <b-row>
-      <b-col>
-        <b-card style="background-color: #ebebeba3 !important">
-          {{ pending ? '—' : $n(balance, 'decimal') }} GDD
-        </b-card>
-      </b-col>
-      <b-col>
-        <b-card class="lg-h2 text-right" style="background-color: #ebebeba3 !important">
-          {{ pending ? '—' : $n(GdtBalance, 'decimal') }} GDT
-        </b-card>
-      </b-col>
-    </b-row>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'GddStatus',
-  props: {
-    balance: { type: Number, default: 0 },
-    GdtBalance: { type: Number, default: 0 },
-    pending: {
-      type: Boolean,
-      default: true,
-    },
-  },
-}
-</script>

From 18b587a4e4da6d1d99360844a2997faf89ebb2c8 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Sun, 13 Jun 2021 18:34:53 +0200
Subject: [PATCH 23/27] included gdd status again.

---
 .github/workflows/test.yml                    |  2 +-
 frontend/src/plugins/dashboard-plugin.js      |  6 +--
 .../src/views/Pages/AccountOverview.spec.js   |  4 ++
 frontend/src/views/Pages/AccountOverview.vue  |  2 +
 .../Pages/AccountOverview/GddStatus.spec.js   | 53 +++++++++++++++++++
 .../views/Pages/AccountOverview/GddStatus.vue | 30 +++++++++++
 6 files changed, 92 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/views/Pages/AccountOverview/GddStatus.spec.js
 create mode 100644 frontend/src/views/Pages/AccountOverview/GddStatus.vue

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 104b85502..b9f4083a3 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -212,7 +212,7 @@ jobs:
           report_name: Coverage Frontend
           type: lcov
           result_path: ./coverage/lcov.info
-          min_coverage: 21
+          min_coverage: 27
           token: ${{ github.token }}
   
   ##############################################################################
diff --git a/frontend/src/plugins/dashboard-plugin.js b/frontend/src/plugins/dashboard-plugin.js
index fa5b2ebf9..3cb1cd862 100755
--- a/frontend/src/plugins/dashboard-plugin.js
+++ b/frontend/src/plugins/dashboard-plugin.js
@@ -1,5 +1,5 @@
 import '@/polyfills'
-import { configure, extend, localize } from 'vee-validate'
+import { configure, extend } from 'vee-validate'
 import GlobalComponents from './globalComponents'
 import GlobalDirectives from './globalDirectives'
 import SideBar from '@/components/SidebarPlugin'
@@ -7,7 +7,7 @@ import SideBar from '@/components/SidebarPlugin'
 import '@/assets/scss/argon.scss'
 import '@/assets/vendor/nucleo/css/nucleo.css'
 import * as rules from 'vee-validate/dist/rules'
-import en, { messages } from 'vee-validate/dist/locale/en.json'
+import { messages } from 'vee-validate/dist/locale/en.json'
 
 import VueQrcodeReader from 'vue-qrcode-reader'
 import VueQrcode from 'vue-qrcode'
@@ -22,8 +22,6 @@ import 'vue-loading-overlay/dist/vue-loading.css'
 
 import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 
-localize('en', en)
-
 Object.keys(rules).forEach((rule) => {
   extend(rule, {
     ...rules[rule], // copies rule configuration
diff --git a/frontend/src/views/Pages/AccountOverview.spec.js b/frontend/src/views/Pages/AccountOverview.spec.js
index 9f320cb67..031828129 100644
--- a/frontend/src/views/Pages/AccountOverview.spec.js
+++ b/frontend/src/views/Pages/AccountOverview.spec.js
@@ -19,6 +19,10 @@ describe('AccountOverview', () => {
       wrapper = Wrapper()
     })
 
+    it('has a status line', () => {
+      expect(wrapper.find('gdd-status-stub').exists()).toBeTruthy()
+    })
+
     it('has a send field', () => {
       expect(wrapper.find('gdd-send-stub').exists()).toBeTruthy()
     })
diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index 5cc86860e..561edbf9c 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/frontend/src/views/Pages/AccountOverview.vue
@@ -41,6 +41,7 @@
   </div>
 </template>
 <script>
+import GddStatus from './AccountOverview/GddStatus.vue'
 import GddSend from './AccountOverview/GddSend.vue'
 import GddTransactionList from './AccountOverview/GddTransactionList.vue'
 import GddTransactionListFooter from './AccountOverview/GddTransactionListFooter.vue'
@@ -59,6 +60,7 @@ const EMPTY_TRANSACTION_DATA = {
 export default {
   name: 'Overview',
   components: {
+    GddStatus,
     GddSend,
     GddTransactionList,
     GddTransactionListFooter,
diff --git a/frontend/src/views/Pages/AccountOverview/GddStatus.spec.js b/frontend/src/views/Pages/AccountOverview/GddStatus.spec.js
new file mode 100644
index 000000000..b414f4e93
--- /dev/null
+++ b/frontend/src/views/Pages/AccountOverview/GddStatus.spec.js
@@ -0,0 +1,53 @@
+import { mount } from '@vue/test-utils'
+import GddStatus from './GddStatus'
+
+const localVue = global.localVue
+
+describe('GddStatus', () => {
+  let wrapper
+
+  const mocks = {
+    $n: jest.fn((n) => n),
+  }
+
+  const propsData = {
+    balance: 1234,
+    GdtBalance: 9876,
+  }
+
+  const Wrapper = () => {
+    return mount(GddStatus, { localVue, mocks, propsData })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    describe('balance is loading', () => {
+      it('it displays em-dash as the ammount of GDD', () => {
+        expect(wrapper.findAll('div.card-body').at(0).text()).toEqual('— GDD')
+      })
+
+      it('it displays em-dash as the ammount of GDT', () => {
+        expect(wrapper.findAll('div.card-body').at(1).text()).toEqual('— GDT')
+      })
+    })
+
+    describe('balance is loaded', () => {
+      beforeEach(() => {
+        wrapper.setProps({
+          pending: false,
+        })
+      })
+
+      it('it displays the ammount of GDD', () => {
+        expect(wrapper.findAll('div.card-body').at(0).text()).toEqual('1234 GDD')
+      })
+
+      it('it displays the ammount of GDT', () => {
+        expect(wrapper.findAll('div.card-body').at(1).text()).toEqual('9876 GDT')
+      })
+    })
+  })
+})
diff --git a/frontend/src/views/Pages/AccountOverview/GddStatus.vue b/frontend/src/views/Pages/AccountOverview/GddStatus.vue
new file mode 100644
index 000000000..6bf03d69c
--- /dev/null
+++ b/frontend/src/views/Pages/AccountOverview/GddStatus.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <b-row>
+      <b-col>
+        <b-card style="background-color: #ebebeba3 !important">
+          {{ pending ? '—' : $n(balance, 'decimal') }} GDD
+        </b-card>
+      </b-col>
+      <b-col>
+        <b-card class="lg-h2 text-right" style="background-color: #ebebeba3 !important">
+          {{ pending ? '—' : $n(GdtBalance, 'decimal') }} GDT
+        </b-card>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GddStatus',
+  props: {
+    balance: { type: Number, default: 0 },
+    GdtBalance: { type: Number, default: 0 },
+    pending: {
+      type: Boolean,
+      default: true,
+    },
+  },
+}
+</script>

From 22211a883cce342cf8d0123cb1d674d4d7811caa Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Mon, 14 Jun 2021 13:27:52 +0200
Subject: [PATCH 24/27] add content header again

---
 .../components/SidebarPlugin/SideBar.spec.js  | 14 -------------
 .../src/components/SidebarPlugin/SideBar.vue  |  9 ---------
 .../src/views/Layout/DashboardLayout_gdd.vue  | 20 ++++++++++++++++++-
 3 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/SidebarPlugin/SideBar.spec.js b/frontend/src/components/SidebarPlugin/SideBar.spec.js
index 4612f6f9e..f9e0780d4 100644
--- a/frontend/src/components/SidebarPlugin/SideBar.spec.js
+++ b/frontend/src/components/SidebarPlugin/SideBar.spec.js
@@ -41,20 +41,6 @@ describe('SideBar', () => {
       expect(wrapper.find('#sidenav-main').exists()).toBeTruthy()
     })
 
-    describe('balance', () => {
-      it('shows em-dash as balance while loading', () => {
-        expect(wrapper.find('.gddBalance').text()).toBe('— GDD')
-      })
-
-      it('shows the when loaded', async () => {
-        wrapper.setProps({
-          pending: false,
-        })
-        await wrapper.vm.$nextTick()
-        expect(wrapper.find('.gddBalance').text()).toBe('1234.56 GDD')
-      })
-    })
-
     describe('navbar button', () => {
       it('has a navbar button', () => {
         expect(wrapper.find('button.navbar-toggler').exists()).toBeTruthy()
diff --git a/frontend/src/components/SidebarPlugin/SideBar.vue b/frontend/src/components/SidebarPlugin/SideBar.vue
index 138c802e9..d2373e1de 100755
--- a/frontend/src/components/SidebarPlugin/SideBar.vue
+++ b/frontend/src/components/SidebarPlugin/SideBar.vue
@@ -9,13 +9,6 @@
           <img :src="logo" class="navbar-brand-img" alt="Gradido Logo" />
         </div>
       </div>
-      <div class="gddBalance text-center">{{ pending ? '—' : $n(balance, 'decimal') }} GDD</div>
-
-      <div class="text-center">
-        <div class="avatar">
-          <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
-        </div>
-      </div>
 
       <slot name="mobile-right">
         <ul class="nav align-items-center d-md-none">
@@ -74,14 +67,12 @@
 </template>
 <script>
 import NavbarToggleButton from '@/components/NavbarToggleButton'
-import VueQrcode from 'vue-qrcode'
 import LanguageSwitch from '@/components/LanguageSwitch.vue'
 
 export default {
   name: 'sidebar',
   components: {
     NavbarToggleButton,
-    VueQrcode,
     LanguageSwitch,
   },
   props: {
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 68f3db88e..b1bf052fa 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -23,6 +23,23 @@
       </template>
     </side-bar>
     <div class="main-content">
+      <b-navbar>
+        <b-navbar-nav class="ml-auto">
+          <b-nav-item right>
+            <b-media no-body class="align-items-center">
+              <span class="pb-2 text-lg font-weight-bold">
+                {{ $store.state.email }}
+              </span>
+              <b-media-body class="ml-2">
+                <span class="avatar">
+                  <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
+                </span>
+              </b-media-body>
+            </b-media>
+          </b-nav-item>
+        </b-navbar-nav>
+      </b-navbar>
+
       <div @click="$sidebar.displaySidebar(false)">
         <fade-transition :duration="200" origin="center top" mode="out-in">
           <!-- your content here -->
@@ -51,6 +68,7 @@ import ContentFooter from './ContentFooter.vue'
 // import DashboardContent from './Content.vue';
 import { FadeTransition } from 'vue2-transitions'
 import communityAPI from '../../apis/communityAPI'
+import VueQrcode from 'vue-qrcode'
 
 function hasElement(className) {
   return document.getElementsByClassName(className).length > 0
@@ -71,7 +89,7 @@ function initScrollbar(className) {
 export default {
   components: {
     ContentFooter,
-    // DashboardContent,
+    VueQrcode,
     FadeTransition,
   },
   data() {

From d8aa42cbbd022a635541b5374e2ab81b224a24b2 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Mon, 14 Jun 2021 15:27:39 +0200
Subject: [PATCH 25/27] content header line is fix

---
 .../src/components/SidebarPlugin/SideBar.vue  | 24 +++++++-----
 .../src/views/Layout/DashboardLayout_gdd.vue  | 39 +++++++++++--------
 2 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/SidebarPlugin/SideBar.vue b/frontend/src/components/SidebarPlugin/SideBar.vue
index d2373e1de..756e72d2a 100755
--- a/frontend/src/components/SidebarPlugin/SideBar.vue
+++ b/frontend/src/components/SidebarPlugin/SideBar.vue
@@ -4,19 +4,21 @@
     id="sidenav-main"
   >
     <div class="container-fluid">
-      <div class="text-center">
-        <div class="mb-2">
-          <img :src="logo" class="navbar-brand-img" alt="Gradido Logo" />
-        </div>
+      <!--Toggler-->
+      <navbar-toggle-button @click.native="showSidebar"></navbar-toggle-button>
+      <div class="navbar-brand">
+        <img :src="logo" class="navbar-brand-img" alt="..." />
       </div>
-
+      <b-row class="text-center">
+        <b-col>{{ pending ? '—' : $n(balance, 'decimal') }} GDD</b-col>
+      </b-row>
       <slot name="mobile-right">
         <ul class="nav align-items-center d-md-none">
-          <a slot="title-container" class="nav-link" role="button">
-            <div class="media align-items-center">
-              <navbar-toggle-button @click.native="showSidebar"></navbar-toggle-button>
-            </div>
-          </a>
+          <div class="media align-items-center">
+            <span class="avatar avatar-sm">
+              <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
+            </span>
+          </div>
         </ul>
       </slot>
       <slot></slot>
@@ -68,12 +70,14 @@
 <script>
 import NavbarToggleButton from '@/components/NavbarToggleButton'
 import LanguageSwitch from '@/components/LanguageSwitch.vue'
+import VueQrcode from 'vue-qrcode'
 
 export default {
   name: 'sidebar',
   components: {
     NavbarToggleButton,
     LanguageSwitch,
+    VueQrcode,
   },
   props: {
     logo: {
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index b1bf052fa..7a6dffe03 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -23,22 +23,24 @@
       </template>
     </side-bar>
     <div class="main-content">
-      <b-navbar>
-        <b-navbar-nav class="ml-auto">
-          <b-nav-item right>
-            <b-media no-body class="align-items-center">
-              <span class="pb-2 text-lg font-weight-bold">
-                {{ $store.state.email }}
-              </span>
-              <b-media-body class="ml-2">
-                <span class="avatar">
-                  <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
+      <div class="d-none d-md-block">
+        <b-navbar>
+          <b-navbar-nav class="ml-auto">
+            <b-nav-item>
+              <b-media no-body class="align-items-center">
+                <span class="pb-2 text-lg font-weight-bold">
+                  {{ $store.state.email }}
                 </span>
-              </b-media-body>
-            </b-media>
-          </b-nav-item>
-        </b-navbar-nav>
-      </b-navbar>
+                <b-media-body class="ml-2">
+                  <span class="avatar">
+                    <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
+                  </span>
+                </b-media-body>
+              </b-media>
+            </b-nav-item>
+          </b-navbar-nav>
+        </b-navbar>
+      </div>
 
       <div @click="$sidebar.displaySidebar(false)">
         <fade-transition :duration="200" origin="center top" mode="out-in">
@@ -152,4 +154,9 @@ export default {
   },
 }
 </script>
-<style lang="scss"></style>
+<style lang="scss">
+.xxx {
+  position: relative;
+  right: 0px;
+}
+</style>

From ecf2b0d8f7ee531d1c54f50c2c6f69aef2683f90 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Mon, 14 Jun 2021 16:04:57 +0200
Subject: [PATCH 26/27] fix text balnace on sidebar.vue

---
 .../src/components/SidebarPlugin/SideBar.spec.js   | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/frontend/src/components/SidebarPlugin/SideBar.spec.js b/frontend/src/components/SidebarPlugin/SideBar.spec.js
index f9e0780d4..58405f38f 100644
--- a/frontend/src/components/SidebarPlugin/SideBar.spec.js
+++ b/frontend/src/components/SidebarPlugin/SideBar.spec.js
@@ -54,6 +54,20 @@ describe('SideBar', () => {
       })
     })
 
+    describe('balance', () => {
+      it('shows em-dash as balance while loading', () => {
+        expect(wrapper.find('div.row.text-center').text()).toBe('— GDD')
+      })
+
+      it('shows the when loaded', async () => {
+        wrapper.setProps({
+          pending: false,
+        })
+        await wrapper.vm.$nextTick()
+        expect(wrapper.find('div.row.text-center').text()).toBe('1234.56 GDD')
+      })
+    })
+
     describe('close siedbar', () => {
       it('calls closeSidebar when clicked', async () => {
         const spy = jest.spyOn(wrapper.vm.$sidebar, 'displaySidebar')

From 800147f86762520c3c58c1498f724175212c84a0 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Mon, 14 Jun 2021 16:20:22 +0200
Subject: [PATCH 27/27] Update test.yml

coverage to 28%
---
 .github/workflows/test.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 2992f451b..c6e1bbc8e 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -212,7 +212,7 @@ jobs:
           report_name: Coverage Frontend
           type: lcov
           result_path: ./coverage/lcov.info
-          min_coverage: 27
+          min_coverage: 28
           token: ${{ github.token }}
   
   ##############################################################################