semicolon rule implemented

frontend/.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  semi: false,
+  printWidth: 100,
+  singleQuote: true,
+  trailingComma: "all",
+  tabWidth: 2,
+  bracketSpacing: true
+};

frontend/babel.config.js

@@ -1,12 +1,12 @@
 module.exports = {
-  presets: ["@vue/app"],
+  presets: ['@vue/app'],
   plugins: [
     [
-      "component",
+      'component',
       {
-        libraryName: "element-ui",
+        libraryName: 'element-ui',
-        styleLibraryName: "theme-chalk"
+        styleLibraryName: 'theme-chalk',
-      }
+      },
-    ]
+    ],
-  ]
+  ],
-};
+}

frontend/intelij.webpack.js

@@ -1,12 +1,12 @@
 // This configuration file is not used anywhere in the code, it's a hack to handle InteliJ relative path imports
 // Keep in sync with actual webpack aliases
 
-const path = require("path");
+const path = require('path')
 
 module.exports = {
   resolve: {
     alias: {
-      "@": path.resolve(__dirname, "src")
+      '@': path.resolve(__dirname, 'src'),
-    }
+    },
-  }
+  },
-};
+}

frontend/jest.config.js

@@ -1,29 +1,25 @@
 module.exports = {
   verbose: true,
-  collectCoverageFrom: [
+  collectCoverageFrom: ['**/*.{js,vue}', '!**/node_modules/**', '!**/?(*.)+(spec|test).js?(x)'],
-    "**/*.{js,vue}",
-    "!**/node_modules/**",
-    "!**/?(*.)+(spec|test).js?(x)"
-  ],
   moduleFileExtensions: [
-    "js",
+    'js',
     //'jsx',
-    "json",
+    'json',
-    "vue"
+    'vue',
   ],
-  coverageReporters: ["lcov"],
+  coverageReporters: ['lcov'],
   moduleNameMapper: {
-    "^@/(.*)$": "<rootDir>/src/$1"
+    '^@/(.*)$': '<rootDir>/src/$1',
   },
   transform: {
-    "^.+\\.vue$": "vue-jest",
+    '^.+\\.vue$': 'vue-jest',
     // '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
-    "^.+\\.(js|jsx)?$": "babel-jest"
+    '^.+\\.(js|jsx)?$': 'babel-jest',
   },
   //setupFiles: [
   //  "<rootDir>/test/registerContext.js"
   //],
-  testMatch: ["**/?(*.)+(spec|test).js?(x)"],
+  testMatch: ['**/?(*.)+(spec|test).js?(x)'],
   // snapshotSerializers: ['jest-serializer-vue'],
-  transformIgnorePatterns: ["<rootDir>/node_modules/"]
+  transformIgnorePatterns: ['<rootDir>/node_modules/'],
-};
+}

frontend/server.js

@@ -1,7 +1,7 @@
-var express = require("express");
+var express = require('express')
-var serveStatic = require("serve-static");
+var serveStatic = require('serve-static')
-var app = express();
+var app = express()
-app.use(serveStatic(__dirname + "/dist"));
+app.use(serveStatic(__dirname + '/dist'))
-var port = process.env.PORT || 5000;
+var port = process.env.PORT || 5000
-app.listen(port);
+app.listen(port)
 // console.log('http://localhost:5000 server started.');

frontend/src/App.vue

@@ -27,35 +27,24 @@
 </template>
 
 <script>
-import { ParticlesBg } from "particles-bg-vue";
+import { ParticlesBg } from 'particles-bg-vue'
-import icon from "./icon.js";
+import icon from './icon.js'
 
 export default {
-  name: "app",
+  name: 'app',
   components: {
-    ParticlesBg
+    ParticlesBg,
   },
   created() {
-    console.log("xx", $cookies.get("gdd_lang"));
+    if ($cookies.isKey('gdd_session_id') == true) {
-    console.log(
+      this.$store.commit('session_id', $cookies.get('gdd_session_id'))
-      "%cWillkommen bei Gradido %cgreen text",
+      this.$store.commit('email', $cookies.get('gdd_u'))
-      "font-weight:bold",
+      this.$store.commit('language', $cookies.get('gdd_lang'))
-      "color: green"
+      this.$i18n.locale = $cookies.get('gdd_lang')
-    );
+      this.$router.push('overview')
-    if ($cookies.isKey("gdd_session_id") == true) {
-      console.log(
-        "%cHey %c" + $cookies.get("gdd_u") + "",
-        "font-weight:bold",
-        "color: orange"
-      );
-      this.$store.commit("session_id", $cookies.get("gdd_session_id"));
-      this.$store.commit("email", $cookies.get("gdd_u"));
-      this.$store.commit("language", $cookies.get("gdd_lang"));
-      this.$i18n.locale = $cookies.get("gdd_lang");
-      this.$router.push("overview");
     } else {
-      console.log("app.vue to Logout");
+      console.log('app.vue to Logout')
-      this.$store.dispatch("logout");
+      this.$store.dispatch('logout')
     }
   },
   data() {
@@ -70,19 +59,19 @@ export default {
         body: icon,
         alpha: [0.6, 0],
         scale: [0.1, 0.4],
-        position: "all",
+        position: 'all',
-        cross: "dead",
+        cross: 'dead',
-        random: 2
+        random: 2,
-      }
+      },
-    };
+    }
   },
   methods: {
     setLocale(locale) {
-      this.$i18n.locale = locale;
+      this.$i18n.locale = locale
-      this.$store.commit("language", this.$i18n.locale);
+      this.$store.commit('language', this.$i18n.locale)
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style>
 .btn-primary pim {

frontend/src/apis/communityAPI.js

@@ -1,48 +1,42 @@
-import axios from "axios";
+import axios from 'axios'
-import CONFIG from "../config";
+import CONFIG from '../config'
 
 const apiGet = async url => {
   try {
-    const result = await axios.get(url);
+    const result = await axios.get(url)
     if (result.status !== 200) {
-      throw new Error("HTTP Status Error " + result.status);
+      throw new Error('HTTP Status Error ' + result.status)
     }
-    if (result.data.state !== "success") {
+    if (result.data.state !== 'success') {
-      throw new Error(result.data.msg);
+      throw new Error(result.data.msg)
     }
-    return { success: true, result };
+    return { success: true, result }
   } catch (error) {
-    return { success: false, result: error };
+    return { success: false, result: error }
   }
-};
+}
 
 const apiPost = async (url, payload) => {
   try {
-    const result = await axios.post(url, payload);
+    const result = await axios.post(url, payload)
     if (result.status !== 200) {
-      throw new Error("HTTP Status Error " + result.status);
+      throw new Error('HTTP Status Error ' + result.status)
     }
-    if (result.data.state !== "success") {
+    if (result.data.state !== 'success') {
-      throw new Error(result.data.msg);
+      throw new Error(result.data.msg)
     }
-    return { success: true, result };
+    return { success: true, result }
   } catch (error) {
-    return { success: false, result: error };
+    return { success: false, result: error }
   }
-};
+}
 
 const communityAPI = {
   balance: async session_id => {
-    return apiGet(
+    return apiGet(CONFIG.COMMUNITY_API_STATE_BALANCE_URL + 'ajaxGetBalance/' + session_id)
-      CONFIG.COMMUNITY_API_STATE_BALANCE_URL + "ajaxGetBalance/" + session_id
-    );
   },
   transactions: async session_id => {
-    return apiGet(
+    return apiGet(CONFIG.COMMUNITY_API_STATE_BALANCE_URL + 'ajaxListTransactions/' + session_id)
-      CONFIG.COMMUNITY_API_STATE_BALANCE_URL +
-        "ajaxListTransactions/" +
-        session_id
-    );
   },
   create: async (session_id, email, amount, memo, target_date = new Date()) => {
     const payload = {
@@ -51,13 +45,10 @@ const communityAPI = {
       amount,
       target_date,
       memo,
-      auto_sign: true
+      auto_sign: true,
-    };
+    }
-    return apiPost(
+    return apiPost(CONFIG.COMMUNITY_API_TRANSACTION_CREATION_URL + 'ajaxCreate/', payload)
-      CONFIG.COMMUNITY_API_TRANSACTION_CREATION_URL + "ajaxCreate/",
+  },
-      payload
+}
-    );
-  }
-};
 
-export default communityAPI;
+export default communityAPI

frontend/src/apis/loginAPI.js

@@ -1,38 +1,38 @@
-import axios from "axios";
+import axios from 'axios'
-import CONFIG from "../config";
+import CONFIG from '../config'
 
 // control email-text sended with email verification code
 const EMAIL_TYPE = {
   DEFAULT: 2, // if user has registered directly
-  ADMIN: 5 // if user was registered by an admin
+  ADMIN: 5, // if user was registered by an admin
-};
+}
 
 const apiPost = async (url, payload) => {
   try {
-    const result = await axios.post(url, payload);
+    const result = await axios.post(url, payload)
     if (result.status !== 200) {
-      throw new Error("HTTP Status Error " + result.status);
+      throw new Error('HTTP Status Error ' + result.status)
     }
-    if (result.data.state !== "success") {
+    if (result.data.state !== 'success') {
-      throw new Error(result.data.msg);
+      throw new Error(result.data.msg)
     }
-    return { success: true, result };
+    return { success: true, result }
   } catch (error) {
-    return { success: false, result: error };
+    return { success: false, result: error }
   }
-};
+}
 
 const loginAPI = {
   login: async (email, password) => {
     const payload = {
       email,
-      password
+      password,
-    };
+    }
-    return apiPost(CONFIG.LOGIN_API_URL + "unsecureLogin", payload);
+    return apiPost(CONFIG.LOGIN_API_URL + 'unsecureLogin', payload)
   },
   logout: async session_id => {
-    const payload = { session_id };
+    const payload = { session_id }
-    return apiPost(CONFIG.LOGIN_API_URL + "logout", payload);
+    return apiPost(CONFIG.LOGIN_API_URL + 'logout', payload)
   },
   create: async (email, first_name, last_name, password) => {
     const payload = {
@@ -41,10 +41,10 @@ const loginAPI = {
       last_name,
       password,
       emailType: EMAIL_TYPE.DEFAULT,
-      login_after_register: true
+      login_after_register: true,
-    };
+    }
-    return apiPost(CONFIG.LOGIN_API_URL + "createUser", payload);
+    return apiPost(CONFIG.LOGIN_API_URL + 'createUser', payload)
-  }
+  },
-};
+}
 
-export default loginAPI;
+export default loginAPI

frontend/src/components/Badge.vue

@@ -1,10 +1,5 @@
 <template>
-  <b-badge
+  <b-badge :variant="type" :pill="rounded" :size="size" :class="{ 'badge-circle': circle }">
-    :variant="type"
-    :pill="rounded"
-    :size="size"
-    :class="{ 'badge-circle': circle }"
-  >
     <slot>
       <i v-if="icon" :class="icon"></i>
     </slot>
@@ -12,39 +7,39 @@
 </template>
 <script>
 export default {
-  name: "badge",
+  name: 'badge',
   props: {
     tag: {
       type: String,
-      default: "span",
+      default: 'span',
-      description: "Html tag to use for the badge."
+      description: 'Html tag to use for the badge.',
     },
     rounded: {
       type: Boolean,
       default: false,
-      description: "Whether badge is of pill type"
+      description: 'Whether badge is of pill type',
     },
     circle: {
       type: Boolean,
       default: false,
-      description: "Whether badge is circle"
+      description: 'Whether badge is circle',
     },
     icon: {
       type: String,
-      default: "",
+      default: '',
-      description: "Icon name. Will be overwritten by slot if slot is used"
+      description: 'Icon name. Will be overwritten by slot if slot is used',
     },
     type: {
       type: String,
-      default: "default",
+      default: 'default',
-      description: "Badge type (primary|info|danger|default|warning|success)"
+      description: 'Badge type (primary|info|danger|default|warning|success)',
     },
     size: {
       type: String,
-      description: "Badge size (md, lg)",
+      description: 'Badge size (md, lg)',
-      default: ""
+      default: '',
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/components/BaseAlert.vue

@@ -34,44 +34,44 @@
   </fade-transition>
 </template>
 <script>
-import { FadeTransition } from "vue2-transitions";
+import { FadeTransition } from 'vue2-transitions'
 
 export default {
-  name: "base-alert",
+  name: 'base-alert',
   components: {
-    FadeTransition
+    FadeTransition,
   },
   created() {
-    console.log("base-alert gesetzt in =>", this.$route.path);
+    console.log('base-alert gesetzt in =>', this.$route.path)
   },
   props: {
     type: {
       type: String,
-      default: "default",
+      default: 'default',
-      description: "Alert type"
+      description: 'Alert type',
     },
     dismissible: {
       type: Boolean,
       default: false,
-      description: "Whether alert is dismissible (closeable)"
+      description: 'Whether alert is dismissible (closeable)',
     },
     icon: {
       type: String,
-      default: "",
+      default: '',
-      description: "Alert icon to display"
+      description: 'Alert icon to display',
-    }
+    },
   },
   data() {
     return {
-      visible: true
+      visible: true,
-    };
+    }
   },
   methods: {
     dismissAlert() {
-      console.log("sdddddddddddddddddddddddd");
+      console.log('sdddddddddddddddddddddddd')
-      this.visible = false;
+      this.visible = false
-      this.$store.state.loginfail = false;
+      this.$store.state.loginfail = false
-    }
+    },
-  }
+  },
-};
+}
 </script>

frontend/src/components/BaseButton.vue

@@ -12,7 +12,7 @@
       { 'btn-wd': wide },
       { 'btn-icon btn-fab': icon },
       { 'btn-link': link },
-      { disabled: disabled }
+      { disabled: disabled },
     ]"
   >
     <slot name="loading">
@@ -23,7 +23,7 @@
 </template>
 <script>
 export default {
-  name: "base-button",
+  name: 'base-button',
   props: {
     round: Boolean,
     icon: Boolean,
@@ -33,34 +33,34 @@ export default {
     disabled: Boolean,
     type: {
       type: String,
-      default: "default",
+      default: 'default',
-      description: "Button type (primary|secondary|danger etc)"
+      description: 'Button type (primary|secondary|danger etc)',
     },
     nativeType: {
       type: String,
-      default: "button",
+      default: 'button',
-      description: "Button native type (e.g button, input etc)"
+      description: 'Button native type (e.g button, input etc)',
     },
     size: {
       type: String,
-      default: "",
+      default: '',
-      description: "Button size (sm|lg)"
+      description: 'Button size (sm|lg)',
     },
     outline: {
       type: Boolean,
-      description: "Whether button is outlined (only border has color)"
+      description: 'Whether button is outlined (only border has color)',
     },
     link: {
       type: Boolean,
-      description: "Whether button is a link (no borders or background)"
+      description: 'Whether button is a link (no borders or background)',
-    }
+    },
   },
   methods: {
     handleClick(evt) {
-      this.$emit("click", evt);
+      this.$emit('click', evt)
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style lang="scss">
 .base-button {

frontend/src/components/BaseDropdown.vue

@@ -21,11 +21,7 @@
     </slot>
     <ul
       class="dropdown-menu"
-      :class="[
+      :class="[{ show: isOpen }, { 'dropdown-menu-right': menuOnRight }, menuClasses]"
-        { show: isOpen },
-        { 'dropdown-menu-right': menuOnRight },
-        menuClasses
-      ]"
     >
       <slot></slot>
     </ul>
@@ -33,65 +29,65 @@
 </template>
 <script>
 export default {
-  name: "base-dropdown",
+  name: 'base-dropdown',
   props: {
     tag: {
       type: String,
-      default: "div",
+      default: 'div',
-      description: "Dropdown html tag (e.g div, ul etc)"
+      description: 'Dropdown html tag (e.g div, ul etc)',
     },
     titleTag: {
       type: String,
-      default: "button",
+      default: 'button',
-      description: "Dropdown title (toggle) html tag"
+      description: 'Dropdown title (toggle) html tag',
     },
     title: {
       type: String,
-      description: "Dropdown title"
+      description: 'Dropdown title',
     },
     direction: {
       type: String,
-      default: "down", // up | down
+      default: 'down', // up | down
-      description: "Dropdown menu direction (up|down)"
+      description: 'Dropdown menu direction (up|down)',
     },
     icon: {
       type: String,
-      description: "Dropdown icon"
+      description: 'Dropdown icon',
     },
     titleClasses: {
       type: [String, Object, Array],
-      description: "Title css classes"
+      description: 'Title css classes',
     },
     menuClasses: {
       type: [String, Object],
-      description: "Menu css classes"
+      description: 'Menu css classes',
     },
     menuOnRight: {
       type: Boolean,
-      description: "Whether menu should appear on the right"
+      description: 'Whether menu should appear on the right',
     },
     hasToggle: {
       type: Boolean,
-      description: "Whether dropdown has arrow icon shown",
+      description: 'Whether dropdown has arrow icon shown',
-      default: true
+      default: true,
-    }
+    },
   },
   data() {
     return {
-      isOpen: false
+      isOpen: false,
-    };
+    }
   },
   methods: {
     toggleDropDown() {
-      this.isOpen = !this.isOpen;
+      this.isOpen = !this.isOpen
-      this.$emit("change", this.isOpen);
+      this.$emit('change', this.isOpen)
     },
     closeDropDown() {
-      this.isOpen = false;
+      this.isOpen = false
-      this.$emit("change", false);
+      this.$emit('change', false)
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style lang="scss" scoped>
 .dropdown {

frontend/src/components/BaseHeader.vue

@@ -9,14 +9,14 @@
 </template>
 <script>
 export default {
-  name: "base-header",
+  name: 'base-header',
   props: {
     type: {
       type: String,
-      default: "success",
+      default: 'success',
-      description: "Header background type"
+      description: 'Header background type',
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/components/BasePagination.vue

@@ -29,41 +29,39 @@
 </template>
 <script>
 export default {
-  name: "base-pagination",
+  name: 'base-pagination',
   props: {
     pageCount: {
       type: Number,
       default: 0,
-      description:
+      description: 'Pagination page count. This should be specified in combination with perPage',
-        "Pagination page count. This should be specified in combination with perPage"
     },
     perPage: {
       type: Number,
       default: 10,
-      description:
+      description: 'Pagination per page. Should be specified with total or pageCount',
-        "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"
+        'Can be specified instead of pageCount. The page count in this case will be total/perPage',
     },
     value: {
       type: Number,
       default: 1,
-      description: "Pagination value"
+      description: 'Pagination value',
     },
     size: {
       type: String,
-      default: "",
+      default: '',
-      description: "Pagination size"
+      description: 'Pagination size',
     },
     align: {
       type: String,
-      default: "",
+      default: '',
-      description: "Pagination alignment (e.g center|start|end)"
+      description: 'Pagination alignment (e.g center|start|end)',
-    }
+    },
-  }
+  },
-};
+}
 </script>

frontend/src/components/BaseProgress.vue

@@ -12,73 +12,68 @@
         </slot>
       </div>
     </div>
-    <b-progress
+    <b-progress :size="size" :class="[progressClasses]" :style="`height: ${height}px`">
-      :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",
+  name: 'base-progress',
   props: {
     striped: {
       type: Boolean,
-      description: "Whether progress is striped"
+      description: 'Whether progress is striped',
     },
     animated: {
       type: Boolean,
-      description:
+      description: 'Whether progress is animated (works only with `striped` prop together)',
-        "Whether progress is animated (works only with `striped` prop together)"
     },
     label: {
       type: String,
-      description: "Progress label (shown on the left above progress)"
+      description: 'Progress label (shown on the left above progress)',
     },
     height: {
       type: Number,
       default: 3,
-      description: "Progress line height"
+      description: 'Progress line height',
     },
     type: {
       type: String,
-      default: "default",
+      default: 'default',
-      description: "Progress type (e.g danger, primary etc)"
+      description: 'Progress type (e.g danger, primary etc)',
     },
     showLabel: {
       type: Boolean,
-      default: false
+      default: false,
     },
     progressClasses: {
       type: [Array, String],
-      default: "",
+      default: '',
-      description: "Progress css classes"
+      description: 'Progress css classes',
     },
     size: {
       type: String,
-      default: ""
+      default: '',
     },
     value: {
       type: Number,
       default: 0,
       validator: value => {
-        return value >= 0 && value <= 100;
+        return value >= 0 && value <= 100
       },
-      description: "Progress value"
+      description: 'Progress value',
-    }
+    },
   },
   computed: {
     computedClasses() {
       return [
-        { "progress-bar-striped": this.striped },
+        { 'progress-bar-striped': this.striped },
-        { "progress-bar-animated": this.animated },
+        { 'progress-bar-animated': this.animated },
-        { [`bg-${this.type}`]: this.type }
+        { [`bg-${this.type}`]: this.type },
-      ];
+      ]
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/components/BaseSlider.vue

@@ -2,56 +2,55 @@
   <div class="slider" :disabled="disabled"></div>
 </template>
 <script>
-import noUiSlider from "nouislider";
+import noUiSlider from 'nouislider'
 
 export default {
-  name: "base-slider",
+  name: 'base-slider',
   props: {
     value: {
       type: [String, Array, Number],
-      description: "slider value"
+      description: 'slider value',
     },
     disabled: {
       type: Boolean,
       default: false,
-      description: "whether the slider is disabled"
+      description: 'whether the slider is disabled',
     },
     start: {
       type: [Number, Array],
       default: 0,
       description:
-        "[noUi Slider start](https://refreshless.com/nouislider/slider-options/#section-start)"
+        '[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)"
+        '[noUi Slider connect](https://refreshless.com/nouislider/slider-options/#section-connect)',
     },
     range: {
       type: Object,
       default: () => {
         return {
           min: 0,
-          max: 100
+          max: 100,
-        };
+        }
       },
       description:
-        "[noUi Slider range](https://refreshless.com/nouislider/slider-values/#section-range)"
+        '[noUi Slider range](https://refreshless.com/nouislider/slider-values/#section-range)',
     },
     options: {
       type: Object,
       default: () => {
-        return {};
+        return {}
       },
-      description:
+      description: '[noUi Slider options](https://refreshless.com/nouislider/slider-options/)',
-        "[noUi Slider options](https://refreshless.com/nouislider/slider-options/)"
+    },
-    }
   },
   data() {
     return {
-      slider: null
+      slider: null,
-    };
+    }
   },
   methods: {
     createSlider() {
@@ -59,38 +58,35 @@ export default {
         start: this.value || this.start,
         connect: Array.isArray(this.value) ? true : this.connect,
         range: this.range,
-        ...this.options
+        ...this.options,
-      });
+      })
-      const slider = this.$el.noUiSlider;
+      const slider = this.$el.noUiSlider
-      slider.on("slide", () => {
+      slider.on('slide', () => {
-        let value = slider.get();
+        let value = slider.get()
         if (value !== this.value) {
-          this.$emit("input", value);
+          this.$emit('input', value)
         }
-      });
+      })
-    }
+    },
   },
   mounted() {
-    this.createSlider();
+    this.createSlider()
   },
   watch: {
     value(newValue, oldValue) {
-      const slider = this.$el.noUiSlider;
+      const slider = this.$el.noUiSlider
-      const sliderValue = slider.get();
+      const sliderValue = slider.get()
       if (newValue !== oldValue && sliderValue !== newValue) {
         if (Array.isArray(sliderValue) && Array.isArray(newValue)) {
-          if (
+          if (oldValue.length === newValue.length && oldValue.every((v, i) => v === newValue[i])) {
-            oldValue.length === newValue.length &&
+            slider.set(newValue)
-            oldValue.every((v, i) => v === newValue[i])
-          ) {
-            slider.set(newValue);
           }
         } else {
-          slider.set(newValue);
+          slider.set(newValue)
         }
       }
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/components/BaseTable.vue

@@ -20,47 +20,47 @@
 </template>
 <script>
 export default {
-  name: "base-table",
+  name: 'base-table',
   props: {
     columns: {
       type: Array,
       default: () => [],
-      description: "Table columns"
+      description: 'Table columns',
     },
     data: {
       type: Array,
       default: () => [],
-      description: "Table data"
+      description: 'Table data',
     },
     type: {
       type: String, // striped | hover
-      default: "",
+      default: '',
-      description: "Whether table is striped or hover type"
+      description: 'Whether table is striped or hover type',
     },
     theadClasses: {
       type: String,
-      default: "",
+      default: '',
-      description: "<thead> css classes"
+      description: '<thead> css classes',
     },
     tbodyClasses: {
       type: String,
-      default: "",
+      default: '',
-      description: "<tbody> css classes"
+      description: '<tbody> css classes',
-    }
+    },
   },
   computed: {
     tableClass() {
-      return this.type && `table-${this.type}`;
+      return this.type && `table-${this.type}`
-    }
+    },
   },
   methods: {
     hasValue(item, column) {
-      return item[column.toLowerCase()] !== "undefined";
+      return item[column.toLowerCase()] !== 'undefined'
     },
     itemValue(item, column) {
-      return item[column.toLowerCase()];
+      return item[column.toLowerCase()]
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/components/Breadcrumb/Breadcrumb.vue

@@ -7,19 +7,19 @@
 </template>
 <script>
 export default {
-  name: "breadcrumb",
+  name: 'breadcrumb',
   props: {
     type: {
       type: String,
-      default: "",
+      default: '',
-      description: "Breadcrumb background type"
+      description: 'Breadcrumb background type',
     },
     listClasses: {
       type: [String, Object],
-      default: "",
+      default: '',
-      description: "Breadcrumb list classes"
+      description: 'Breadcrumb list classes',
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/components/Breadcrumb/BreadcrumbItem.vue

@@ -5,14 +5,14 @@
 </template>
 <script>
 export default {
-  name: "breadcrumb-item",
+  name: 'breadcrumb-item',
   props: {
     active: {
       type: Boolean,
       default: false,
-      description: "Whether breadcrumb item is active"
+      description: 'Whether breadcrumb item is active',
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/components/Breadcrumb/RouteBreadcrumb.vue

@@ -11,10 +11,7 @@
       :active="index === $route.matched.length - 1"
       style="display:inline-block"
     >
-      <router-link
+      <router-link :to="{ name: route.name }" v-if="index < $route.matched.length - 1">
-        :to="{ name: route.name }"
-        v-if="index < $route.matched.length - 1"
-      >
         {{ route.name }}
       </router-link>
       <span v-else>{{ route.name }}</span>
@@ -23,21 +20,21 @@
 </template>
 
 <script>
-import BreadCrumb from "./Breadcrumb";
+import BreadCrumb from './Breadcrumb'
-import BreadCrumbItem from "./BreadcrumbItem";
+import BreadCrumbItem from './BreadcrumbItem'
 
 export default {
-  name: "route-breadcrumb",
+  name: 'route-breadcrumb',
   components: {
     BreadCrumb,
-    BreadCrumbItem
+    BreadCrumbItem,
   },
   methods: {
     getBreadName(route) {
-      return route.name;
+      return route.name
-    }
+    },
-  }
+  },
-};
+}
 </script>
 
 <style scoped></style>

frontend/src/components/ButtonCheckbox.vue

@@ -8,31 +8,31 @@
 </template>
 <script>
 export default {
-  name: "button-checkbox",
+  name: 'button-checkbox',
   props: {
     value: {
       type: Boolean,
-      description: "Checked value"
+      description: 'Checked value',
     },
     buttonClasses: {
       type: [String, Object],
-      description: "Inner button css classes"
+      description: 'Inner button css classes',
-    }
+    },
   },
   model: {
-    prop: "value",
+    prop: 'value',
-    event: "change"
+    event: 'change',
   },
   computed: {
     model: {
       get() {
-        return this.value;
+        return this.value
       },
       set(val) {
-        this.$emit("change", val);
+        this.$emit('change', val)
-      }
+      },
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/components/ButtonRadioGroup.vue

@@ -20,37 +20,36 @@
 </template>
 <script>
 export default {
-  name: "button-radio-group",
+  name: 'button-radio-group',
   props: {
     options: {
       type: Array,
-      description:
+      description: 'Radio options. Should be an array of objects {value: "", label: ""}',
-        'Radio options. Should be an array of objects {value: "", label: ""}',
+      default: () => [],
-      default: () => []
     },
     value: {
       type: String,
-      description: "Radio value"
+      description: 'Radio value',
     },
     buttonClasses: {
       type: [String, Object],
-      description: "Inner button css classes"
+      description: 'Inner button css classes',
-    }
+    },
   },
   model: {
-    prop: "value",
+    prop: 'value',
-    event: "change"
+    event: 'change',
   },
   computed: {
     model: {
       get() {
-        return this.value;
+        return this.value
       },
       set(val) {
-        this.$emit("change", val);
+        this.$emit('change', val)
-      }
+      },
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/components/Cards/Card.vue

@@ -6,7 +6,7 @@
       { shadow: shadow },
       { [`shadow-${shadowSize}`]: shadowSize },
       { [`bg-gradient-${gradient}`]: gradient },
-      { [`bg-${type}`]: type }
+      { [`bg-${type}`]: type },
     ]"
   >
     <slot name="image"></slot>
@@ -26,46 +26,46 @@
 </template>
 <script>
 export default {
-  name: "card",
+  name: 'card',
   props: {
     type: {
       type: String,
-      description: "Card type"
+      description: 'Card type',
     },
     gradient: {
       type: String,
-      description: "Card background gradient type (warning,danger etc)"
+      description: 'Card background gradient type (warning,danger etc)',
     },
     hover: {
       type: Boolean,
-      description: "Whether card should move on hover"
+      description: 'Whether card should move on hover',
     },
     shadow: {
       type: Boolean,
-      description: "Whether card has shadow"
+      description: 'Whether card has shadow',
     },
     shadowSize: {
       type: String,
-      description: "Card shadow size"
+      description: 'Card shadow size',
     },
     noBody: {
       type: Boolean,
       default: false,
-      description: "Whether card should have wrapper body class"
+      description: 'Whether card should have wrapper body class',
     },
     bodyClasses: {
       type: [String, Object, Array],
-      description: "Card body css classes"
+      description: 'Card body css classes',
     },
     headerClasses: {
       type: [String, Object, Array],
-      description: "Card header css classes"
+      description: 'Card header css classes',
     },
     footerClasses: {
       type: [String, Object, Array],
-      description: "Card footer css classes"
+      description: 'Card footer css classes',
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/components/Cards/StatsCard.vue

@@ -35,24 +35,24 @@
   </card>
 </template>
 <script>
-import Card from "./Card.vue";
+import Card from './Card.vue'
 
 export default {
-  name: "stats-card",
+  name: 'stats-card',
   components: {
-    Card
+    Card,
   },
   props: {
     type: {
       type: String,
-      default: "primary"
+      default: 'primary',
     },
     icon: String,
     img: String,
     title: String,
     subTitle: String,
-    iconClasses: [String, Array]
+    iconClasses: [String, Array],
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/components/Charts/BarChart.js

@@ -1,30 +1,30 @@
-import { Bar, mixins } from "vue-chartjs";
+import { Bar, mixins } from 'vue-chartjs'
-import globalOptionsMixin from "@/components/Charts/globalOptionsMixin";
+import globalOptionsMixin from '@/components/Charts/globalOptionsMixin'
 
 export default {
-  name: "bar-chart",
+  name: 'bar-chart',
   extends: Bar,
   mixins: [mixins.reactiveProp, globalOptionsMixin],
   props: {
     extraOptions: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
-    }
+    },
   },
   data() {
     return {
-      ctx: null
+      ctx: null,
-    };
+    }
   },
   mounted() {
     this.$watch(
-      "chartData",
+      'chartData',
       (newVal, oldVal) => {
         if (!oldVal) {
-          this.renderChart(this.chartData, this.extraOptions);
+          this.renderChart(this.chartData, this.extraOptions)
         }
       },
-      { immediate: true }
+      { immediate: true },
-    );
+    )
-  }
+  },
-};
+}

frontend/src/components/Charts/LineChart.js

@@ -1,29 +1,29 @@
-import { Line, mixins } from "vue-chartjs";
+import { Line, mixins } from 'vue-chartjs'
-import globalOptionsMixin from "@/components/Charts/globalOptionsMixin";
+import globalOptionsMixin from '@/components/Charts/globalOptionsMixin'
 export default {
-  name: "line-chart",
+  name: 'line-chart',
   extends: Line,
   mixins: [mixins.reactiveProp, globalOptionsMixin],
   props: {
     extraOptions: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
-    }
+    },
   },
   data() {
     return {
-      ctx: null
+      ctx: null,
-    };
+    }
   },
   mounted() {
     this.$watch(
-      "chartData",
+      'chartData',
       (newVal, oldVal) => {
         if (!oldVal) {
-          this.renderChart(this.chartData, this.extraOptions);
+          this.renderChart(this.chartData, this.extraOptions)
         }
       },
-      { immediate: true }
+      { immediate: true },
-    );
+    )
-  }
+  },
-};
+}

frontend/src/components/Charts/config.js

@@ -1,203 +1,201 @@
-import { parseOptions } from "@/components/Charts/optionHelpers";
+import { parseOptions } from '@/components/Charts/optionHelpers'
-import Chart from "chart.js";
+import Chart from 'chart.js'
 
 export const Charts = {
-  mode: "light", //(themeMode) ? themeMode : 'light';
+  mode: 'light', //(themeMode) ? themeMode : 'light';
   fonts: {
-    base: "Open Sans"
+    base: 'Open Sans',
   },
   colors: {
     gray: {
-      100: "#f6f9fc",
+      100: '#f6f9fc',
-      200: "#e9ecef",
+      200: '#e9ecef',
-      300: "#dee2e6",
+      300: '#dee2e6',
-      400: "#ced4da",
+      400: '#ced4da',
-      500: "#adb5bd",
+      500: '#adb5bd',
-      600: "#8898aa",
+      600: '#8898aa',
-      700: "#525f7f",
+      700: '#525f7f',
-      800: "#32325d",
+      800: '#32325d',
-      900: "#212529"
+      900: '#212529',
     },
     theme: {
-      default: "#172b4d",
+      default: '#172b4d',
-      primary: "#5e72e4",
+      primary: '#5e72e4',
-      secondary: "#f4f5f7",
+      secondary: '#f4f5f7',
-      info: "#11cdef",
+      info: '#11cdef',
-      success: "#2dce89",
+      success: '#2dce89',
-      danger: "#f5365c",
+      danger: '#f5365c',
-      warning: "#fb6340"
+      warning: '#fb6340',
     },
-    black: "#12263F",
+    black: '#12263F',
-    white: "#FFFFFF",
+    white: '#FFFFFF',
-    transparent: "transparent"
+    transparent: 'transparent',
-  }
+  },
-};
+}
 
 function chartOptions() {
-  let { colors, mode, fonts } = Charts;
+  let { colors, mode, fonts } = Charts
   // Options
   let options = {
     defaults: {
       global: {
         responsive: true,
         maintainAspectRatio: false,
-        defaultColor: mode === "dark" ? colors.gray[700] : colors.gray[600],
+        defaultColor: mode === 'dark' ? colors.gray[700] : colors.gray[600],
-        defaultFontColor: 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
+          padding: 0,
         },
         legend: {
           display: false,
-          position: "bottom",
+          position: 'bottom',
           labels: {
             usePointStyle: true,
-            padding: 16
+            padding: 16,
-          }
+          },
         },
         elements: {
           point: {
             radius: 0,
-            backgroundColor: colors.theme["primary"]
+            backgroundColor: colors.theme['primary'],
           },
           line: {
             tension: 0.4,
             borderWidth: 4,
-            borderColor: colors.theme["primary"],
+            borderColor: colors.theme['primary'],
             backgroundColor: colors.transparent,
-            borderCapStyle: "rounded"
+            borderCapStyle: 'rounded',
           },
           rectangle: {
-            backgroundColor: colors.theme["warning"]
+            backgroundColor: colors.theme['warning'],
           },
           arc: {
-            backgroundColor: colors.theme["primary"],
+            backgroundColor: colors.theme['primary'],
-            borderColor: mode == "dark" ? colors.gray[800] : colors.white,
+            borderColor: mode == 'dark' ? colors.gray[800] : colors.white,
-            borderWidth: 4
+            borderWidth: 4,
-          }
+          },
         },
         tooltips: {
           enabled: true,
-          mode: "index",
+          mode: 'index',
-          intersect: false
+          intersect: false,
-        }
+        },
       },
       pie: {
         tooltips: {
-          mode: "point"
+          mode: 'point',
-        }
+        },
       },
       doughnut: {
         tooltips: {
-          mode: "point"
+          mode: 'point',
         },
         cutoutPercentage: 83,
         legendCallback: function(chart) {
-          let data = chart.data;
+          let data = chart.data
-          let content = "";
+          let content = ''
 
           data.labels.forEach(function(label, index) {
-            let bgColor = data.datasets[0].backgroundColor[index];
+            let bgColor = data.datasets[0].backgroundColor[index]
 
-            content += '<span class="chart-legend-item">';
+            content += '<span class="chart-legend-item">'
             content +=
-              '<i class="chart-legend-indicator" style="background-color: ' +
+              '<i class="chart-legend-indicator" style="background-color: ' + bgColor + '"></i>'
-              bgColor +
+            content += label
-              '"></i>';
+            content += '</span>'
-            content += label;
+          })
-            content += "</span>";
-          });
 
-          return content;
+          return content
-        }
+        },
-      }
+      },
-    }
+    },
-  };
+  }
 
   // yAxes
-  Chart.scaleService.updateScaleDefaults("linear", {
+  Chart.scaleService.updateScaleDefaults('linear', {
     gridLines: {
       borderDash: [2],
       borderDashOffset: [2],
-      color: mode === "dark" ? colors.gray[900] : colors.gray[200],
+      color: mode === 'dark' ? colors.gray[900] : colors.gray[200],
       drawBorder: false,
       drawTicks: true,
       zeroLineWidth: 1,
-      zeroLineColor: mode === "dark" ? colors.gray[900] : colors.gray[200],
+      zeroLineColor: mode === 'dark' ? colors.gray[900] : colors.gray[200],
       zeroLineBorderDash: [2],
-      zeroLineBorderDashOffset: [2]
+      zeroLineBorderDashOffset: [2],
     },
     ticks: {
       beginAtZero: true,
       padding: 10,
       callback: function(value) {
         if (!(value % 10)) {
-          return value;
+          return value
         }
-      }
+      },
-    }
+    },
-  });
+  })
 
   // xAxes
-  Chart.scaleService.updateScaleDefaults("category", {
+  Chart.scaleService.updateScaleDefaults('category', {
     gridLines: {
       drawBorder: false,
       drawOnChartArea: false,
       drawTicks: false,
       lineWidth: 1,
-      zeroLineWidth: 1
+      zeroLineWidth: 1,
     },
     ticks: {
-      padding: 20
+      padding: 20,
     },
-    maxBarThickness: 10
+    maxBarThickness: 10,
-  });
+  })
 
-  return options;
+  return options
 }
 
-let initialized = false;
+let initialized = false
 
 export function initGlobalOptions() {
   if (initialized) {
-    return;
+    return
   }
-  parseOptions(Chart, chartOptions());
+  parseOptions(Chart, chartOptions())
-  initialized = true;
+  initialized = true
 }
 
 export const basicOptions = {
   maintainAspectRatio: false,
   legend: {
-    display: false
+    display: false,
   },
-  responsive: true
+  responsive: true,
-};
+}
 export let blueChartOptions = {
   scales: {
     yAxes: [
       {
         gridLines: {
           color: Charts.colors.gray[700],
-          zeroLineColor: Charts.colors.gray[700]
+          zeroLineColor: Charts.colors.gray[700],
-        }
+        },
-      }
+      },
-    ]
+    ],
-  }
+  },
-};
+}
 
 export let lineChartOptionsBlue = {
   ...basicOptions,
   tooltips: {
-    backgroundColor: "#f5f5f5",
+    backgroundColor: '#f5f5f5',
-    titleFontColor: "#333",
+    titleFontColor: '#333',
-    bodyFontColor: "#666",
+    bodyFontColor: '#666',
     bodySpacing: 4,
     xPadding: 12,
-    mode: "nearest",
+    mode: 'nearest',
     intersect: 0,
-    position: "nearest"
+    position: 'nearest',
   },
   responsive: true,
   scales: {
@@ -206,16 +204,16 @@ export let lineChartOptionsBlue = {
         barPercentage: 1.6,
         gridLines: {
           drawBorder: false,
-          color: "rgba(29,140,248,0.0)",
+          color: 'rgba(29,140,248,0.0)',
-          zeroLineColor: "transparent"
+          zeroLineColor: 'transparent',
         },
         ticks: {
           suggestedMin: 60,
           suggestedMax: 125,
           padding: 20,
-          fontColor: "#9e9e9e"
+          fontColor: '#9e9e9e',
-        }
+        },
-      }
+      },
     ],
 
     xAxes: [
@@ -223,14 +221,14 @@ export let lineChartOptionsBlue = {
         barPercentage: 1.6,
         gridLines: {
           drawBorder: false,
-          color: "rgba(29,140,248,0.1)",
+          color: 'rgba(29,140,248,0.1)',
-          zeroLineColor: "transparent"
+          zeroLineColor: 'transparent',
         },
         ticks: {
           padding: 20,
-          fontColor: "#9e9e9e"
+          fontColor: '#9e9e9e',
-        }
+        },
-      }
+      },
-    ]
+    ],
-  }
+  },
-};
+}

frontend/src/components/Charts/globalOptionsMixin.js

@@ -1,7 +1,7 @@
-import { initGlobalOptions } from "@/components/Charts/config";
+import { initGlobalOptions } from '@/components/Charts/config'
-import "./roundedCornersExtension";
+import './roundedCornersExtension'
 export default {
   mounted() {
-    initGlobalOptions();
+    initGlobalOptions()
-  }
+  },
-};
+}

frontend/src/components/Charts/optionHelpers.js

@@ -1,10 +1,10 @@
 // Parse global options
 export function parseOptions(parent, options) {
   for (let item in options) {
-    if (typeof options[item] !== "object") {
+    if (typeof options[item] !== 'object') {
-      parent[item] = options[item];
+      parent[item] = options[item]
     } else {
-      parseOptions(parent[item], options[item]);
+      parseOptions(parent[item], options[item])
     }
   }
 }

frontend/src/components/Charts/roundedCornersExtension.js

@@ -2,66 +2,64 @@
 // Chart extension for making the bars rounded
 // Code from: https://codepen.io/jedtrow/full/ygRYgo
 //
-import Chart from "chart.js";
+import Chart from 'chart.js'
 Chart.elements.Rectangle.prototype.draw = function() {
-  let ctx = this._chart.ctx;
+  let ctx = this._chart.ctx
-  let vm = this._view;
+  let vm = this._view
-  let left, right, top, bottom, signX, signY, borderSkipped, radius;
+  let left, right, top, bottom, signX, signY, borderSkipped, radius
-  let borderWidth = vm.borderWidth;
+  let borderWidth = vm.borderWidth
   // Set Radius Here
   // If radius is large enough to cause drawing errors a max radius is imposed
-  let cornerRadius = 6;
+  let cornerRadius = 6
 
   if (!vm.horizontal) {
     // bar
-    left = vm.x - vm.width / 2;
+    left = vm.x - vm.width / 2
-    right = vm.x + vm.width / 2;
+    right = vm.x + vm.width / 2
-    top = vm.y;
+    top = vm.y
-    bottom = vm.base;
+    bottom = vm.base
-    signX = 1;
+    signX = 1
-    signY = bottom > top ? 1 : -1;
+    signY = bottom > top ? 1 : -1
-    borderSkipped = vm.borderSkipped || "bottom";
+    borderSkipped = vm.borderSkipped || 'bottom'
   } else {
     // horizontal bar
-    left = vm.base;
+    left = vm.base
-    right = vm.x;
+    right = vm.x
-    top = vm.y - vm.height / 2;
+    top = vm.y - vm.height / 2
-    bottom = vm.y + vm.height / 2;
+    bottom = vm.y + vm.height / 2
-    signX = right > left ? 1 : -1;
+    signX = right > left ? 1 : -1
-    signY = 1;
+    signY = 1
-    borderSkipped = vm.borderSkipped || "left";
+    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.
-    let barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));
+    let barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom))
-    borderWidth = borderWidth > barSize ? barSize : borderWidth;
+    borderWidth = borderWidth > barSize ? barSize : borderWidth
-    let halfStroke = borderWidth / 2;
+    let halfStroke = borderWidth / 2
     // Adjust borderWidth when bar top position is near vm.base(zero).
-    let borderLeft = left + (borderSkipped !== "left" ? halfStroke * signX : 0);
+    let borderLeft = left + (borderSkipped !== 'left' ? halfStroke * signX : 0)
-    let borderRight =
+    let borderRight = right + (borderSkipped !== 'right' ? -halfStroke * signX : 0)
-      right + (borderSkipped !== "right" ? -halfStroke * signX : 0);
+    let borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0)
-    let borderTop = top + (borderSkipped !== "top" ? halfStroke * signY : 0);
+    let borderBottom = bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0)
-    let borderBottom =
-      bottom + (borderSkipped !== "bottom" ? -halfStroke * signY : 0);
     // not become a vertical line?
     if (borderLeft !== borderRight) {
-      top = borderTop;
+      top = borderTop
-      bottom = borderBottom;
+      bottom = borderBottom
     }
     // not become a horizontal line?
     if (borderTop !== borderBottom) {
-      left = borderLeft;
+      left = borderLeft
-      right = borderRight;
+      right = borderRight
     }
   }
 
-  ctx.beginPath();
+  ctx.beginPath()
-  ctx.fillStyle = vm.backgroundColor;
+  ctx.fillStyle = vm.backgroundColor
-  ctx.strokeStyle = vm.borderColor;
+  ctx.strokeStyle = vm.borderColor
-  ctx.lineWidth = borderWidth;
+  ctx.lineWidth = borderWidth
 
   // Corner points, from bottom-left to bottom-right clockwise
   // | 1 2 |
@@ -70,61 +68,61 @@ Chart.elements.Rectangle.prototype.draw = function() {
     [left, bottom],
     [left, top],
     [right, top],
-    [right, bottom]
+    [right, bottom],
-  ];
+  ]
 
   // Find first (starting) corner with fallback to 'bottom'
-  let borders = ["bottom", "left", "top", "right"];
+  let borders = ['bottom', 'left', 'top', 'right']
-  let startCorner = borders.indexOf(borderSkipped, 0);
+  let startCorner = borders.indexOf(borderSkipped, 0)
   if (startCorner === -1) {
-    startCorner = 0;
+    startCorner = 0
   }
 
   function cornerAt(index) {
-    return corners[(startCorner + index) % 4];
+    return corners[(startCorner + index) % 4]
   }
 
   // Draw rectangle from 'startCorner'
-  let corner = cornerAt(0);
+  let corner = cornerAt(0)
-  ctx.moveTo(corner[0], corner[1]);
+  ctx.moveTo(corner[0], corner[1])
 
   for (let i = 1; i < 4; i++) {
-    corner = cornerAt(i);
+    corner = cornerAt(i)
-    let nextCornerId = i + 1;
+    let nextCornerId = i + 1
     if (nextCornerId == 4) {
-      nextCornerId = 0;
+      nextCornerId = 0
     }
 
-    let nextCorner = cornerAt(nextCornerId);
+    let nextCorner = cornerAt(nextCornerId)
 
-    let width = corners[2][0] - corners[1][0];
+    let width = corners[2][0] - corners[1][0]
-    let height = corners[0][1] - corners[1][1];
+    let height = corners[0][1] - corners[1][1]
-    let x = corners[1][0];
+    let x = corners[1][0]
-    let y = corners[1][1];
+    let y = corners[1][1]
 
-    let radius = cornerRadius;
+    let radius = cornerRadius
 
     // Fix radius being too large
     if (radius > height / 2) {
-      radius = height / 2;
+      radius = height / 2
     }
     if (radius > width / 2) {
-      radius = width / 2;
+      radius = width / 2
     }
 
-    ctx.moveTo(x + radius, y);
+    ctx.moveTo(x + radius, y)
-    ctx.lineTo(x + width - radius, y);
+    ctx.lineTo(x + width - radius, y)
-    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
-    ctx.lineTo(x + width, y + height - radius);
+    ctx.lineTo(x + width, y + height - radius)
-    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
-    ctx.lineTo(x + radius, y + height);
+    ctx.lineTo(x + radius, y + height)
-    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius)
-    ctx.lineTo(x, y + radius);
+    ctx.lineTo(x, y + radius)
-    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.quadraticCurveTo(x, y, x + radius, y)
   }
 
-  ctx.fill();
+  ctx.fill()
   if (borderWidth) {
-    ctx.stroke();
+    ctx.stroke()
   }
-};
+}

frontend/src/components/CloseButton.spec.js

@@ -1,28 +1,28 @@
-import { mount } from "@vue/test-utils";
+import { mount } from '@vue/test-utils'
 
-import CloseButton from "./CloseButton";
+import CloseButton from './CloseButton'
 
-const localVue = global.localVue;
+const localVue = global.localVue
 
-describe("CloseButton", () => {
+describe('CloseButton', () => {
-  let wrapper;
+  let wrapper
   let propsData = {
-    target: "Target",
+    target: 'Target',
-    expanded: false
+    expanded: false,
-  };
+  }
 
   const Wrapper = () => {
-    return mount(CloseButton, { localVue, propsData });
+    return mount(CloseButton, { localVue, propsData })
-  };
+  }
 
-  describe("mount", () => {
+  describe('mount', () => {
     beforeEach(() => {
-      wrapper = Wrapper();
+      wrapper = Wrapper()
-    });
+    })
 
-    it("emmits click event", () => {
+    it('emmits click event', () => {
-      wrapper.find(".navbar-toggler").trigger("click");
+      wrapper.find('.navbar-toggler').trigger('click')
-      expect(wrapper.emitted("click")).toBeTruthy();
+      expect(wrapper.emitted('click')).toBeTruthy()
-    });
+    })
-  });
+  })
-});
+})

frontend/src/components/CloseButton.vue

@@ -15,22 +15,22 @@
 </template>
 <script>
 export default {
-  name: "close-button",
+  name: 'close-button',
   props: {
     target: {
       type: [String, Number],
-      description: "Close button target element"
+      description: 'Close button target element',
     },
     expanded: {
       type: Boolean,
-      description: "Whether button is expanded (aria-expanded attribute)"
+      description: 'Whether button is expanded (aria-expanded attribute)',
-    }
+    },
   },
   methods: {
     handleClick(evt) {
-      this.$emit("click", evt);
+      this.$emit('click', evt)
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/components/Collapse/Collapse.vue

@@ -1,34 +1,28 @@
 <template>
-  <div
+  <div id="accordion" role="tablist" aria-multiselectable="true" class="accordion">
-    id="accordion"
-    role="tablist"
-    aria-multiselectable="true"
-    class="accordion"
-  >
     <slot></slot>
   </div>
 </template>
 
 <script>
 export default {
-  name: "collapse",
+  name: 'collapse',
   props: {
     animationDuration: {
       type: Number,
       default: 250,
-      description: "Collapse animation duration"
+      description: 'Collapse animation duration',
     },
     multipleActive: {
       type: Boolean,
       default: true,
-      description:
+      description: 'Whether you can have multiple collapse items opened at the same time',
-        "Whether you can have multiple collapse items opened at the same time"
     },
     activeIndex: {
       type: Number,
       default: -1,
-      description: "Active collapse item index"
+      description: 'Active collapse item index',
-    }
+    },
   },
   provide() {
     return {
@@ -36,50 +30,50 @@ export default {
       multipleActive: this.multipleActive,
       addItem: this.addItem,
       removeItem: this.removeItem,
-      deactivateAll: this.deactivateAll
+      deactivateAll: this.deactivateAll,
-    };
+    }
   },
   data() {
     return {
-      items: []
+      items: [],
-    };
+    }
   },
   methods: {
     addItem(item) {
-      const index = this.$slots.default.indexOf(item.$vnode);
+      const index = this.$slots.default.indexOf(item.$vnode)
       if (index !== -1) {
-        this.items.splice(index, 0, item);
+        this.items.splice(index, 0, item)
       }
     },
     removeItem(item) {
-      const items = this.items;
+      const items = this.items
-      const index = items.indexOf(item);
+      const index = items.indexOf(item)
       if (index > -1) {
-        items.splice(index, 1);
+        items.splice(index, 1)
       }
     },
     deactivateAll() {
       this.items.forEach(item => {
-        item.active = false;
+        item.active = false
-      });
+      })
     },
     activateItem() {
       if (this.activeIndex !== -1) {
-        this.items[this.activeIndex].active = true;
+        this.items[this.activeIndex].active = true
       }
-    }
+    },
   },
   mounted() {
     this.$nextTick(() => {
-      this.activateItem();
+      this.activateItem()
-    });
+    })
   },
   watch: {
     activeIndex() {
-      this.activateItem();
+      this.activateItem()
-    }
+    },
-  }
+  },
-};
+}
 </script>
 
 <style scoped></style>

frontend/src/components/Collapse/CollapseItem.vue

@@ -26,67 +26,67 @@
   </b-card>
 </template>
 <script>
-import { CollapseTransition } from "vue2-transitions";
+import { CollapseTransition } from 'vue2-transitions'
 
 export default {
-  name: "collapse-item",
+  name: 'collapse-item',
   components: {
-    CollapseTransition
+    CollapseTransition,
   },
   props: {
     title: {
       type: String,
-      default: "",
+      default: '',
-      description: "Collapse item title"
+      description: 'Collapse item title',
     },
-    id: String
+    id: String,
   },
   inject: {
     animationDuration: {
-      default: 250
+      default: 250,
     },
     multipleActive: {
-      default: false
+      default: false,
     },
     addItem: {
-      default: () => {}
+      default: () => {},
     },
     removeItem: {
-      default: () => {}
+      default: () => {},
     },
     deactivateAll: {
-      default: () => {}
+      default: () => {},
-    }
+    },
   },
   computed: {
     itemId() {
-      return this.id || this.title;
+      return this.id || this.title
-    }
+    },
   },
   data() {
     return {
-      active: false
+      active: false,
-    };
+    }
   },
   methods: {
     activate() {
-      let wasActive = this.active;
+      let wasActive = this.active
       if (!this.multipleActive) {
-        this.deactivateAll();
+        this.deactivateAll()
       }
-      this.active = !wasActive;
+      this.active = !wasActive
-      console.log(this.active);
+      console.log(this.active)
-    }
+    },
   },
   mounted() {
-    this.addItem(this);
+    this.addItem(this)
   },
   destroyed() {
     if (this.$el && this.$el.parentNode) {
-      this.$el.parentNode.removeChild(this.$el);
+      this.$el.parentNode.removeChild(this.$el)
     }
-    this.removeItem(this);
+    this.removeItem(this)
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/components/Inputs/BaseCheckbox.vue

@@ -1,11 +1,7 @@
 <template>
   <div
     class="custom-control custom-checkbox"
-    :class="[
+    :class="[{ disabled: disabled }, { [`custom-checkbox-${type}`]: type }, inlineClass]"
-      { disabled: disabled },
-      { [`custom-checkbox-${type}`]: type },
-      inlineClass
-    ]"
   >
     <input
       :id="cbId"
@@ -24,61 +20,61 @@
 </template>
 <script>
 export default {
-  name: "base-checkbox",
+  name: 'base-checkbox',
   model: {
-    prop: "checked"
+    prop: 'checked',
   },
   props: {
     checked: {
       type: [Array, Boolean],
-      description: "Whether checkbox is checked"
+      description: 'Whether checkbox is checked',
     },
     disabled: {
       type: Boolean,
-      description: "Whether checkbox is disabled"
+      description: 'Whether checkbox is disabled',
     },
     inline: {
       type: Boolean,
-      description: "Whether checkbox is inline"
+      description: 'Whether checkbox is inline',
     },
     inputClasses: {
       type: [String, Object, Array],
-      description: "Checkbox input classes"
+      description: 'Checkbox input classes',
     },
     type: {
       type: String,
-      description: "Checkbox type (e.g info, danger etc)"
+      description: 'Checkbox type (e.g info, danger etc)',
-    }
+    },
   },
   data() {
     return {
-      cbId: "",
+      cbId: '',
-      touched: false
+      touched: false,
-    };
+    }
   },
   computed: {
     model: {
       get() {
-        return this.checked;
+        return this.checked
       },
       set(check) {
         if (!this.touched) {
-          this.touched = true;
+          this.touched = true
         }
-        this.$emit("input", check);
+        this.$emit('input', check)
-      }
+      },
     },
     inlineClass() {
       if (this.inline) {
-        return `form-check-inline`;
+        return `form-check-inline`
       }
-      return "";
+      return ''
-    }
+    },
   },
   created() {
     this.cbId = Math.random()
       .toString(16)
-      .slice(2);
+      .slice(2)
-  }
+  },
-};
+}
 </script>

frontend/src/components/Inputs/BaseInput.vue

@@ -17,7 +17,7 @@
           { focused: focused },
           { 'input-group-alternative': alternative },
           { 'has-label': label || $slots.label },
-          inputGroupClasses
+          inputGroupClasses,
         ]"
       >
         <div v-if="prependIcon || $slots.prepend" class="input-group-prepend">
@@ -39,7 +39,7 @@
             :class="[
               { 'is-valid': valid && validated && successMessage },
               { 'is-invalid': invalid && validated },
-              inputClasses
+              inputClasses,
             ]"
           />
         </slot>
@@ -68,79 +68,78 @@
 <script>
 export default {
   inheritAttrs: false,
-  name: "base-input",
+  name: 'base-input',
   props: {
     required: {
       type: Boolean,
-      description: "Whether input is required (adds an asterix *)"
+      description: 'Whether input is required (adds an asterix *)',
     },
     group: {
       type: Boolean,
-      description:
+      description: 'Whether input is an input group (manual override in special cases)',
-        "Whether input is an input group (manual override in special cases)"
     },
     alternative: {
       type: Boolean,
-      description: "Whether input is of alternative layout"
+      description: 'Whether input is of alternative layout',
     },
     label: {
       type: String,
-      description: "Input label (text before input)"
+      description: 'Input label (text before input)',
     },
     error: {
       type: String,
-      description: "Input error (below input)"
+      description: 'Input error (below input)',
     },
     successMessage: {
       type: String,
-      description: "Input success message",
+      description: 'Input success message',
-      default: ""
+      default: '',
     },
     labelClasses: {
       type: String,
-      description: "Input label css classes",
+      description: 'Input label css classes',
-      default: "form-control-label"
+      default: 'form-control-label',
     },
     inputClasses: {
       type: String,
-      description: "Input css classes"
+      description: 'Input css classes',
     },
     inputGroupClasses: {
       type: String,
-      description: "Input group css classes"
+      description: 'Input group css classes',
     },
     value: {
       type: [String, Number],
-      description: "Input value"
+      description: 'Input value',
     },
     type: {
       type: String,
-      description: "Input type",
+      description: 'Input type',
-      default: "text"
+      default: 'text',
     },
     appendIcon: {
       type: String,
-      description: "Append icon (right)"
+      description: 'Append icon (right)',
     },
     prependIcon: {
       type: String,
-      description: "Prepend icon (left)"
+      description: 'Prepend icon (left)',
     },
     rules: {
       type: [String, Array, Object],
-      description: "Vee validate validation rules",
+      description: 'Vee validate validation rules',
-      default: ""
+      default: '',
     },
     name: {
       type: String,
-      description: "Input name (used for validation)",
+      description: 'Input name (used for validation)',
-      default: ""
+      default: '',
-    }
+    },
   },
   data() {
     return {
-      focused: false
+      focused: false,
-    };
+    }
   },
   computed: {
     listeners() {
@@ -148,41 +147,41 @@ export default {
         ...this.$listeners,
         input: this.updateValue,
         focus: this.onFocus,
-        blur: this.onBlur
+        blur: this.onBlur,
-      };
+      }
     },
     slotData() {
       return {
         focused: this.focused,
         error: this.error,
-        ...this.listeners
+        ...this.listeners,
-      };
+      }
     },
     hasIcon() {
-      const { append, prepend } = this.$slots;
+      const { append, prepend } = this.$slots
       return (
         append !== undefined ||
         prepend !== undefined ||
         this.appendIcon !== undefined ||
         this.prependIcon !== undefined ||
         this.group
-      );
+      )
-    }
+    },
   },
   methods: {
     updateValue(evt) {
-      let value = evt.target.value;
+      let value = evt.target.value
-      this.$emit("input", value);
+      this.$emit('input', value)
     },
     onFocus(evt) {
-      this.focused = true;
+      this.focused = true
-      this.$emit("focus", evt);
+      this.$emit('focus', evt)
     },
     onBlur(evt) {
-      this.focused = false;
+      this.focused = false
-      this.$emit("blur", evt);
+      this.$emit('blur', evt)
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/components/Inputs/BaseRadio.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
+  <div class="custom-control custom-radio" :class="[inlineClass, { disabled: disabled }]">
-    class="custom-control custom-radio"
-    :class="[inlineClass, { disabled: disabled }]"
-  >
     <input
       :id="cbId"
       class="custom-control-input"
@@ -20,50 +17,50 @@
 </template>
 <script>
 export default {
-  name: "base-radio",
+  name: 'base-radio',
   props: {
     name: {
       type: [String, Number],
-      description: "Radio label"
+      description: 'Radio label',
     },
     disabled: {
       type: Boolean,
-      description: "Whether radio is disabled"
+      description: 'Whether radio is disabled',
     },
     value: {
       type: [String, Boolean],
-      description: "Radio value"
+      description: 'Radio value',
     },
     inline: {
       type: Boolean,
-      description: "Whether radio is inline"
+      description: 'Whether radio is inline',
-    }
+    },
   },
   data() {
     return {
-      cbId: ""
+      cbId: '',
-    };
+    }
   },
   computed: {
     model: {
       get() {
-        return this.value;
+        return this.value
       },
       set(value) {
-        this.$emit("input", value);
+        this.$emit('input', value)
-      }
+      },
     },
     inlineClass() {
       if (this.inline) {
-        return `form-check-inline`;
+        return `form-check-inline`
       }
-      return "";
+      return ''
-    }
+    },
   },
   created() {
     this.cbId = Math.random()
       .toString(16)
-      .slice(2);
+      .slice(2)
-  }
+  },
-};
+}
 </script>

frontend/src/components/LoadingPanel.vue

@@ -2,11 +2,11 @@
   <b-row v-loading="true" id="loading"></b-row>
 </template>
 <script>
-import Vue from "vue";
+import Vue from 'vue'
-import { Loading } from "element-ui";
+import { Loading } from 'element-ui'
 
-Vue.use(Loading.directive);
+Vue.use(Loading.directive)
-export default {};
+export default {}
 </script>
 <style>
 #loading {

frontend/src/components/Modal-OLD.vue

@@ -14,10 +14,7 @@
       @hide="closeModal"
       :header-class="headerClasses"
       :footer-class="footerClasses"
-      :content-class="[
+      :content-class="[gradient ? `bg-gradient-${gradient}` : '', ...modalContentClasses]"
-        gradient ? `bg-gradient-${gradient}` : '',
-        ...modalContentClasses
-      ]"
       :body-class="bodyClasses"
       :aria-hidden="!show"
     >
@@ -46,82 +43,82 @@
   </slide-y-up-transition>
 </template>
 <script>
-import { SlideYUpTransition } from "vue2-transitions";
+import { SlideYUpTransition } from 'vue2-transitions'
 
 export default {
-  name: "modal",
+  name: 'modal',
   components: {
-    SlideYUpTransition
+    SlideYUpTransition,
   },
   props: {
     show: Boolean,
     showClose: {
       type: Boolean,
-      default: true
+      default: true,
     },
     type: {
       type: String,
-      default: "",
+      default: '',
       validator(value) {
-        let acceptedValues = ["", "notice", "mini"];
+        let acceptedValues = ['', 'notice', 'mini']
-        return acceptedValues.indexOf(value) !== -1;
+        return acceptedValues.indexOf(value) !== -1
       },
-      description: 'Modal type (notice|mini|"") '
+      description: 'Modal type (notice|mini|"") ',
     },
     modalClasses: {
       type: [Object, String],
-      description: "Modal dialog css classes"
+      description: 'Modal dialog css classes',
     },
     size: {
       type: String,
-      description: "Modal size",
+      description: 'Modal size',
       validator(value) {
-        let acceptedValues = ["", "sm", "lg"];
+        let acceptedValues = ['', 'sm', 'lg']
-        return acceptedValues.indexOf(value) !== -1;
+        return acceptedValues.indexOf(value) !== -1
-      }
+      },
     },
     modalContentClasses: {
       type: [Object, String],
-      description: "Modal dialog content css classes"
+      description: 'Modal dialog content css classes',
     },
     gradient: {
       type: String,
-      description: "Modal gradient type (danger, primary etc)"
+      description: 'Modal gradient type (danger, primary etc)',
     },
     headerClasses: {
       type: [Object, String],
-      description: "Modal Header css classes"
+      description: 'Modal Header css classes',
     },
     bodyClasses: {
       type: [Object, String],
-      description: "Modal Body css classes"
+      description: 'Modal Body css classes',
     },
     footerClasses: {
       type: [Object, String],
-      description: "Modal Footer css classes"
+      description: 'Modal Footer css classes',
     },
     animationDuration: {
       type: Number,
       default: 500,
-      description: "Modal transition duration"
+      description: 'Modal transition duration',
-    }
+    },
   },
   methods: {
     closeModal() {
-      this.$emit("update:show", false);
+      this.$emit('update:show', false)
-      this.$emit("close");
+      this.$emit('close')
-    }
+    },
   },
   watch: {
     show(val) {
       if (val) {
-        this.$refs["app-modal"].show();
+        this.$refs['app-modal'].show()
       } else {
-        this.$refs["app-modal"].hide();
+        this.$refs['app-modal'].hide()
       }
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style>
 .modal-backdrop {

frontend/src/components/Modal.vue

@@ -15,23 +15,14 @@
           invalid-feedback="Name is required"
           :state="nameState"
         >
-          <b-form-input
+          <b-form-input id="name-input" v-model="name" :state="nameState" required></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
+      <base-button type="link" class="ml-auto" @click="$store.state.modals = false">
-        type="link"
-        class="ml-auto"
-        @click="$store.state.modals = false"
-      >
         abbrechen
       </base-button>
     </template>
@@ -40,47 +31,47 @@
 
 <script>
 export default {
-  name: "modal",
+  name: 'modal',
   data() {
     return {
-      name: "",
+      name: '',
       nameState: null,
-      submittedNames: []
+      submittedNames: [],
-    };
+    }
   },
   /*Modal*/
   checkFormValidity() {
-    const valid = this.$refs.form.checkValidity();
+    const valid = this.$refs.form.checkValidity()
-    this.nameState = valid;
+    this.nameState = valid
-    return valid;
+    return valid
   },
   resetModal() {
-    this.name = "";
+    this.name = ''
-    this.nameState = null;
+    this.nameState = null
   },
   handleOk(bvModalEvt) {
     // Prevent modal from closing
-    bvModalEvt.preventDefault();
+    bvModalEvt.preventDefault()
     // Trigger submit handler
-    this.handleSubmit();
+    this.handleSubmit()
   },
   handleSubmit() {
     // Exit when the form isn't valid
     if (!this.checkFormValidity()) {
-      return;
+      return
     }
     // Push the name to submitted names
-    this.submittedNames.push(this.name);
+    this.submittedNames.push(this.name)
-    this.$store.state.modals = false;
+    this.$store.state.modals = false
-    this.$store.commit("loginAsAdmin");
+    this.$store.commit('loginAsAdmin')
-    this.$router.push("/AdminOverview");
+    this.$router.push('/AdminOverview')
 
     // Hide the modal manually
     this.$nextTick(() => {
-      this.$bvModal.hide("modal-prevent-closing");
+      this.$bvModal.hide('modal-prevent-closing')
-    });
+    })
-  }
+  },
-};
+}
 </script>
 <style>
 .modal-backdrop {

frontend/src/components/Navbar/BaseNav.vue

@@ -18,10 +18,7 @@
         </button>
       </slot>
 
-      <b-navbar-toggle
+      <b-navbar-toggle target="nav-text-collapse" @click.stop="toggleMenu"></b-navbar-toggle>
-        target="nav-text-collapse"
-        @click.stop="toggleMenu"
-      ></b-navbar-toggle>
 
       <b-collapse
         is-nav
@@ -38,87 +35,86 @@
 </template>
 <script>
 export default {
-  name: "base-nav",
+  name: 'base-nav',
   props: {
     show: {
       type: Boolean,
       default: false,
       description:
-        "Whether navbar menu is shown (valid for viewports < specified by `expand` prop)"
+        'Whether navbar menu is shown (valid for viewports < specified by `expand` prop)',
     },
     transparent: {
       type: Boolean,
       default: false,
-      description: "Whether navbar is transparent"
+      description: 'Whether navbar is transparent',
     },
     expand: {
       type: String,
-      default: "lg",
+      default: 'lg',
-      description: "Breakpoint where nav should expand"
+      description: 'Breakpoint where nav should expand',
     },
     menuClasses: {
       type: [String, Object, Array],
-      default: "",
+      default: '',
-      description:
+      description: 'Navbar menu (items) classes. Can be used to align menu items to the right/left',
-        "Navbar menu (items) classes. Can be used to align menu items to the right/left"
     },
     containerClasses: {
       type: [String, Object, Array],
-      default: "container",
+      default: 'container',
       description:
-        "Container classes. Can be used to control container classes (contains both navbar brand and menu items)"
+        'Container classes. Can be used to control container classes (contains both navbar brand and menu items)',
     },
     type: {
       type: String,
-      default: "",
+      default: '',
       validator(value) {
         return [
-          "",
+          '',
-          "dark",
+          'dark',
-          "success",
+          'success',
-          "danger",
+          'danger',
-          "warning",
+          'warning',
-          "white",
+          'white',
-          "primary",
+          'primary',
-          "light",
+          'light',
-          "info",
+          'info',
-          "vue"
+          'vue',
-        ].includes(value);
+        ].includes(value)
       },
-      description: "Navbar color type"
+      description: 'Navbar color type',
-    }
+    },
   },
   model: {
-    prop: "show",
+    prop: 'show',
-    event: "change"
+    event: 'change',
   },
   computed: {
     classes() {
-      let color = `bg-${this.type}`;
+      let color = `bg-${this.type}`
       let classes = [
-        { "navbar-transparent": this.transparent },
+        { 'navbar-transparent': this.transparent },
-        { [`navbar-expand-${this.expand}`]: this.expand }
+        { [`navbar-expand-${this.expand}`]: this.expand },
-      ];
+      ]
       if (this.position) {
-        classes.push(`navbar-${this.position}`);
+        classes.push(`navbar-${this.position}`)
       }
       if (!this.transparent) {
-        classes.push(color);
+        classes.push(color)
       }
-      return classes;
+      return classes
     },
     hasMenu() {
-      return this.$slots.default;
+      return this.$slots.default
-    }
+    },
   },
   methods: {
     toggleMenu() {
-      this.$emit("change", !this.show);
+      this.$emit('change', !this.show)
     },
     closeMenu() {
-      this.$emit("change", false);
+      this.$emit('change', false)
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/components/Navbar/NavbarToggleButton.vue

@@ -15,7 +15,7 @@
 </template>
 <script>
 export default {
-  name: "navbar-toggle-button"
+  name: 'navbar-toggle-button',
-};
+}
 </script>
 <style></style>

frontend/src/components/NavbarToggleButton.vue

@@ -19,14 +19,14 @@ export default {
   props: {
     target: {
       type: [String, Number],
-      description: "Button target element"
+      description: 'Button target element',
     },
     toggled: {
       type: Boolean,
       default: false,
-      description: "Whether button is toggled"
+      description: 'Whether button is toggled',
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/components/NotificationPlugin/Notification.vue

@@ -3,12 +3,7 @@
     @click="tryClose"
     data-notify="container"
     class="alert alert-notify alert-dismissible"
-    :class="[
+    :class="[{ 'alert-with-icon': icon }, verticalAlign, horizontalAlign, alertType]"
-      { 'alert-with-icon': icon },
-      verticalAlign,
-      horizontalAlign,
-      alertType
-    ]"
     role="alert"
     :style="customPosition"
     data-notify-position="top-center"
@@ -29,20 +24,11 @@
         </b>
       </span>
       <span v-if="message" v-html="message"></span>
-      <content-render
+      <content-render v-if="!message && component" :component="component"></content-render>
-        v-if="!message && component"
-        :component="component"
-      ></content-render>
     </span>
 
     <slot name="dismiss-icon">
-      <button
+      <button type="button" class="close" data-dismiss="alert" aria-label="Close" @click="close">
-        type="button"
-        class="close"
-        data-dismiss="alert"
-        aria-label="Close"
-        @click="close"
-      >
         <span aria-hidden="true">×</span>
       </button>
     </slot>
@@ -50,157 +36,148 @@
 </template>
 <script>
 export default {
-  name: "notification",
+  name: 'notification',
   components: {
     contentRender: {
-      props: ["component"],
+      props: ['component'],
       render: function(createElement) {
-        return createElement(this.component);
+        return createElement(this.component)
-      }
+      },
-    }
+    },
   },
   props: {
     message: String,
     title: {
       type: String,
-      description: "Notification title"
+      description: 'Notification title',
     },
     icon: {
       type: String,
-      description: "Notification icon"
+      description: 'Notification icon',
     },
     verticalAlign: {
       type: String,
-      default: "top",
+      default: 'top',
       validator: value => {
-        let acceptedValues = ["top", "bottom"];
+        let acceptedValues = ['top', 'bottom']
-        return acceptedValues.indexOf(value) !== -1;
+        return acceptedValues.indexOf(value) !== -1
       },
-      description: "Vertical alignment of notification (top|bottom)"
+      description: 'Vertical alignment of notification (top|bottom)',
     },
     horizontalAlign: {
       type: String,
-      default: "right",
+      default: 'right',
       validator: value => {
-        let acceptedValues = ["left", "center", "right"];
+        let acceptedValues = ['left', 'center', 'right']
-        return acceptedValues.indexOf(value) !== -1;
+        return acceptedValues.indexOf(value) !== -1
       },
-      description: "Horizontal alignment of notification (left|center|right)"
+      description: 'Horizontal alignment of notification (left|center|right)',
     },
     type: {
       type: String,
-      default: "info",
+      default: 'info',
       validator: value => {
-        let acceptedValues = [
+        let acceptedValues = ['default', 'info', 'primary', 'danger', 'warning', 'success']
-          "default",
+        return acceptedValues.indexOf(value) !== -1
-          "info",
-          "primary",
-          "danger",
-          "warning",
-          "success"
-        ];
-        return acceptedValues.indexOf(value) !== -1;
       },
       description:
-        "Notification type of notification (default|info|primary|danger|warning|success)"
+        'Notification type of notification (default|info|primary|danger|warning|success)',
     },
     timeout: {
       type: Number,
       default: 5000,
       validator: value => {
-        return value >= 0;
+        return value >= 0
       },
-      description:
+      description: 'Notification timeout (closes after X milliseconds). Default is 5000 (5s)',
-        "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)"
+        'Notification timestamp (used internally to handle notification removal correctly)',
     },
     component: {
       type: [Object, Function],
-      description:
+      description: 'Custom content component. Cane be a `.vue` component or render function',
-        "Custom content component. Cane be a `.vue` component or render function"
     },
     showClose: {
       type: Boolean,
       default: true,
-      description: "Whether to show close button"
+      description: 'Whether to show close button',
     },
     closeOnClick: {
       type: Boolean,
       default: true,
-      description: "Whether to close notification when clicking it' body"
+      description: "Whether to close notification when clicking it' body",
     },
     clickHandler: {
       type: Function,
-      description: "Custom notification click handler"
+      description: 'Custom notification click handler',
-    }
+    },
   },
   data() {
     return {
-      elmHeight: 0
+      elmHeight: 0,
-    };
+    }
   },
   computed: {
     hasIcon() {
-      return this.icon && this.icon.length > 0;
+      return this.icon && this.icon.length > 0
     },
     alertType() {
-      return `alert-${this.type}`;
+      return `alert-${this.type}`
     },
     customPosition() {
-      let initialMargin = 20;
+      let initialMargin = 20
-      let alertHeight = this.elmHeight + 10;
+      let 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;
+      }).length
       if (this.$notifications.settings.overlap) {
-        sameAlertsCount = 1;
+        sameAlertsCount = 1
       }
-      let pixels = (sameAlertsCount - 1) * alertHeight + initialMargin;
+      let pixels = (sameAlertsCount - 1) * alertHeight + initialMargin
-      let styles = {};
+      let styles = {}
-      if (this.verticalAlign === "top") {
+      if (this.verticalAlign === 'top') {
-        styles.top = `${pixels}px`;
+        styles.top = `${pixels}px`
       } else {
-        styles.bottom = `${pixels}px`;
+        styles.bottom = `${pixels}px`
       }
-      return styles;
+      return styles
-    }
+    },
   },
   methods: {
     close() {
-      this.$emit("close", this.timestamp);
+      this.$emit('close', this.timestamp)
     },
     tryClose(evt) {
       if (this.clickHandler) {
-        this.clickHandler(evt, this);
+        this.clickHandler(evt, this)
       }
       if (this.closeOnClick) {
-        this.close();
+        this.close()
       }
-    }
+    },
   },
   mounted() {
-    this.elmHeight = this.$el.clientHeight;
+    this.elmHeight = this.$el.clientHeight
     if (this.timeout) {
-      setTimeout(this.close, this.timeout);
+      setTimeout(this.close, this.timeout)
     }
-  }
+  },
-};
+}
 </script>
 <style lang="scss">
 .notifications .alert {
   position: fixed;
   z-index: 10000;
 
-  &[data-notify="container"] {
+  &[data-notify='container'] {
     max-width: 500px;
   }
 

frontend/src/components/NotificationPlugin/Notifications.vue

@@ -12,41 +12,41 @@
   </div>
 </template>
 <script>
-import Notification from "./Notification.vue";
+import Notification from './Notification.vue'
-import { SlideYUpTransition } from "vue2-transitions";
+import { SlideYUpTransition } from 'vue2-transitions'
 
 export default {
   components: {
     SlideYUpTransition,
-    Notification
+    Notification,
   },
   props: {
     transitionDuration: {
       type: Number,
-      default: 200
+      default: 200,
     },
     overlap: {
       type: Boolean,
-      default: false
+      default: false,
-    }
+    },
   },
   data() {
     return {
-      notifications: this.$notifications.state
+      notifications: this.$notifications.state,
-    };
+    }
   },
   methods: {
     removeNotification(timestamp) {
-      this.$notifications.removeNotification(timestamp);
+      this.$notifications.removeNotification(timestamp)
-    }
+    },
   },
   created() {
-    this.$notifications.settings.overlap = this.overlap;
+    this.$notifications.settings.overlap = this.overlap
   },
   watch: {
     overlap: function(newVal) {
-      this.$notifications.settings.overlap = newVal;
+      this.$notifications.settings.overlap = newVal
-    }
+    },
-  }
+  },
-};
+}
 </script>

frontend/src/components/NotificationPlugin/index.js

@@ -1,66 +1,66 @@
-import Notifications from "./Notifications.vue";
+import Notifications from './Notifications.vue'
 
 const NotificationStore = {
   state: [], // here the notifications will be added
   settings: {
     overlap: false,
-    verticalAlign: "top",
+    verticalAlign: 'top',
-    horizontalAlign: "right",
+    horizontalAlign: 'right',
-    type: "info",
+    type: 'info',
     timeout: 5000,
     closeOnClick: true,
-    showClose: true
+    showClose: true,
   },
   setOptions(options) {
-    this.settings = Object.assign(this.settings, options);
+    this.settings = Object.assign(this.settings, options)
   },
   removeNotification(timestamp) {
-    const indexToDelete = this.state.findIndex(n => n.timestamp === timestamp);
+    const indexToDelete = this.state.findIndex(n => n.timestamp === timestamp)
     if (indexToDelete !== -1) {
-      this.state.splice(indexToDelete, 1);
+      this.state.splice(indexToDelete, 1)
     }
   },
   addNotification(notification) {
-    if (typeof notification === "string" || notification instanceof String) {
+    if (typeof notification === 'string' || notification instanceof String) {
-      notification = { message: notification };
+      notification = { message: notification }
     }
-    notification.timestamp = new Date();
+    notification.timestamp = new Date()
     notification.timestamp.setMilliseconds(
-      notification.timestamp.getMilliseconds() + this.state.length
+      notification.timestamp.getMilliseconds() + this.state.length,
-    );
+    )
-    notification = Object.assign({}, this.settings, notification);
+    notification = Object.assign({}, this.settings, notification)
-    this.state.push(notification);
+    this.state.push(notification)
   },
   notify(notification) {
     if (Array.isArray(notification)) {
       notification.forEach(notificationInstance => {
-        this.addNotification(notificationInstance);
+        this.addNotification(notificationInstance)
-      });
+      })
     } else {
-      this.addNotification(notification);
+      this.addNotification(notification)
     }
-  }
+  },
-};
+}
 
 const NotificationsPlugin = {
   install(Vue, options) {
     let app = new Vue({
       data: {
-        notificationStore: NotificationStore
+        notificationStore: NotificationStore,
       },
       methods: {
         notify(notification) {
-          this.notificationStore.notify(notification);
+          this.notificationStore.notify(notification)
-        }
+        },
-      }
+      },
-    });
+    })
-    Vue.prototype.$notify = app.notify;
+    Vue.prototype.$notify = app.notify
-    Vue.prototype.$notifications = app.notificationStore;
+    Vue.prototype.$notifications = app.notificationStore
-    Vue.component("Notifications", Notifications);
+    Vue.component('Notifications', Notifications)
     if (options) {
-      NotificationStore.setOptions(options);
+      NotificationStore.setOptions(options)
     }
-  }
+  },
-};
+}
 
-export default NotificationsPlugin;
+export default NotificationsPlugin

frontend/src/components/SearchUser.vue

@@ -2,7 +2,7 @@
   <vue-bootstrap-typeahead v-model="query" :data="users" @change="getUser" />
 </template>
 <script>
-import VueBootstrapTypeahead from "vue-bootstrap-typeahead";
+import VueBootstrapTypeahead from 'vue-bootstrap-typeahead'
 
 // Global registration
 //Vue.component('vue-bootstrap-typeahead', VueBootstrapTypeahead)
@@ -11,71 +11,71 @@ import VueBootstrapTypeahead from "vue-bootstrap-typeahead";
 
 // Local registration
 export default {
-  name: "SearchUser",
+  name: 'SearchUser',
   components: {
-    VueBootstrapTypeahead
+    VueBootstrapTypeahead,
   },
   data() {
     return {
-      user: "",
+      user: '',
       users: [
-        "Bob",
+        'Bob',
-        "Alice",
+        'Alice',
-        "Bernd",
+        'Bernd',
-        "Dario",
+        'Dario',
-        "Alex",
+        'Alex',
-        "Pauls",
+        'Pauls',
-        "Ulf",
+        'Ulf',
-        "Delaware",
+        'Delaware',
-        "Florida",
+        'Florida',
-        "Georgia",
+        'Georgia',
-        "Hawaii",
+        'Hawaii',
-        "Idaho",
+        'Idaho',
-        "Illnois",
+        'Illnois',
-        "Indiana",
+        'Indiana',
-        "Iowa",
+        'Iowa',
-        "Kansas",
+        'Kansas',
-        "Kentucky",
+        'Kentucky',
-        "Louisiana",
+        'Louisiana',
-        "Maine",
+        'Maine',
-        "Maryland",
+        'Maryland',
-        "Massachusetts",
+        'Massachusetts',
-        "Michigan",
+        'Michigan',
-        "Minnesota",
+        'Minnesota',
-        "Mississippi",
+        'Mississippi',
-        "Missouri",
+        'Missouri',
-        "Montana",
+        'Montana',
-        "Nebraska",
+        'Nebraska',
-        "Nevada",
+        'Nevada',
-        "New Hampshire",
+        'New Hampshire',
-        "New Jersey",
+        'New Jersey',
-        "New Mexico",
+        'New Mexico',
-        "New York",
+        'New York',
-        "North Carolina",
+        'North Carolina',
-        "North Dakota",
+        'North Dakota',
-        "Ohio",
+        'Ohio',
-        "Oklahoma",
+        'Oklahoma',
-        "Oregon",
+        'Oregon',
-        "Pennsylvania",
+        'Pennsylvania',
-        "Rhode Island",
+        'Rhode Island',
-        "South Carolina",
+        'South Carolina',
-        "South Dakota",
+        'South Dakota',
-        "Tennessee",
+        'Tennessee',
-        "Texas",
+        'Texas',
-        "Utah",
+        'Utah',
-        "Vermont",
+        'Vermont',
-        "Virginia",
+        'Virginia',
-        "Washington",
+        'Washington',
-        "West Virginia",
+        'West Virginia',
-        "Wisconsin",
+        'Wisconsin',
-        "Wyoming"
+        'Wyoming',
-      ]
+      ],
-    };
+    }
   },
   methods: {
     getUser() {
-      alert(this.data.user);
+      alert(this.data.user)
-    }
+    },
-  }
+  },
-};
+}
 </script>

frontend/src/components/SidebarPlugin/SideBar.vue

@@ -18,39 +18,24 @@
             <a slot="title-container" class="nav-link" href="#" role="button">
               <div class="media align-items-center">
                 <span class="avatar avatar-sm">
-                  <vue-qrcode
+                  <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
-                    :value="$store.state.email"
-                    type="image/png"
-                  ></vue-qrcode>
                 </span>
               </div>
             </a>
             xx
-            <router-link
+            <router-link to="/overview" class="dropdown-item text-lg text-muted">
-              to="/overview"
-              class="dropdown-item text-lg text-muted"
-            >
               <i class="ni ni-single-02"></i>
-              <span>{{ $t("site.overview.account_overview") }}</span>
+              <span>{{ $t('site.overview.account_overview') }}</span>
             </router-link>
-            <router-link
+            <router-link to="/profile" class="dropdown-item  text-lg text-muted">
-              to="/profile"
-              class="dropdown-item  text-lg text-muted"
-            >
               <i class="ni ni-single-02"></i>
-              <span>{{ $t("site.navbar.my-profil") }}</span>
+              <span>{{ $t('site.navbar.my-profil') }}</span>
             </router-link>
-            <router-link
+            <router-link to="/profileedit" class="dropdown-item  text-lg text-muted">
-              to="/profileedit"
-              class="dropdown-item  text-lg text-muted"
-            >
               <i class="ni ni-settings-gear-65"></i>
-              <span>{{ $t("site.navbar.settings") }}</span>
+              <span>{{ $t('site.navbar.settings') }}</span>
             </router-link>
-            <router-link
+            <router-link to="/transactions" class="dropdown-item  text-lg text-muted">
-              to="/transactions"
-              class="dropdown-item  text-lg text-muted"
-            >
               <i class="ni ni-calendar-grid-58"></i>
               <span>Transactions</span>
             </router-link>
@@ -63,7 +48,7 @@
             <div class="dropdown-divider"></div>
             <div @click="logout" class="dropdown-item  text-lg text-muted">
               <i class="ni ni-support-16"></i>
-              {{ $t("logout") }}
+              {{ $t('logout') }}
             </div>
           </base-dropdown>
         </ul>
@@ -82,9 +67,7 @@
               </router-link>
             </div>
             <div class="col-6 collapse-close">
-              <navbar-toggle-button
+              <navbar-toggle-button @click.native="closeSidebar"></navbar-toggle-button>
-                @click.native="closeSidebar"
-              ></navbar-toggle-button>
             </div>
           </div>
         </div>
@@ -95,7 +78,7 @@
         <ul class="navbar-nav mb-md-3">
           <li class="nav-item">
             <a class="nav-link text-lg" href="#!" @click="logout">
-              {{ $t("logout") }}
+              {{ $t('logout') }}
             </a>
           </li>
         </ul>
@@ -104,48 +87,47 @@
   </nav>
 </template>
 <script>
-import NavbarToggleButton from "@/components/NavbarToggleButton";
+import NavbarToggleButton from '@/components/NavbarToggleButton'
-import VueQrcode from "vue-qrcode";
+import VueQrcode from 'vue-qrcode'
 
 export default {
-  name: "sidebar",
+  name: 'sidebar',
   components: {
     NavbarToggleButton,
-    VueQrcode
+    VueQrcode,
   },
   props: {
     logo: {
       type: String,
-      default: "img/brand/green.png",
+      default: 'img/brand/green.png',
-      description: "Gradido Sidebar app logo"
+      description: 'Gradido Sidebar app logo',
     },
     autoClose: {
       type: Boolean,
       default: true,
-      description:
+      description: 'Whether sidebar should autoclose on mobile when clicking an item',
-        "Whether sidebar should autoclose on mobile when clicking an item"
+    },
-    }
   },
   provide() {
     return {
-      autoClose: this.autoClose
+      autoClose: this.autoClose,
-    };
+    }
   },
   methods: {
     closeSidebar() {
-      this.$sidebar.displaySidebar(false);
+      this.$sidebar.displaySidebar(false)
     },
     showSidebar() {
-      this.$sidebar.displaySidebar(true);
+      this.$sidebar.displaySidebar(true)
     },
     logout() {
-      this.$store.dispatch("logout");
+      this.$store.dispatch('logout')
-    }
+    },
   },
   beforeDestroy() {
     if (this.$sidebar.showSidebar) {
-      this.$sidebar.showSidebar = false;
+      this.$sidebar.showSidebar = false
     }
-  }
+  },
-};
+}
 </script>

frontend/src/components/SidebarPlugin/SidebarItem.vue

@@ -29,21 +29,14 @@
     </a>
 
     <collapse-transition>
-      <div
+      <div v-if="$slots.default || this.isMenu" v-show="!collapsed" class="collapse show">
-        v-if="$slots.default || this.isMenu"
-        v-show="!collapsed"
-        class="collapse show"
-      >
         <ul class="nav nav-sm flex-column">
           <slot></slot>
         </ul>
       </div>
     </collapse-transition>
 
-    <slot
+    <slot name="title" v-if="children.length === 0 && !$slots.default && link.path">
-      name="title"
-      v-if="children.length === 0 && !$slots.default && link.path"
-    >
       <component
         :to="link.path"
         @click.native="linkClick"
@@ -65,135 +58,129 @@
   </b-nav-item>
 </template>
 <script>
-import { CollapseTransition } from "vue2-transitions";
+import { CollapseTransition } from 'vue2-transitions'
 
 export default {
-  name: "sidebar-item",
+  name: 'sidebar-item',
   components: {
-    CollapseTransition
+    CollapseTransition,
   },
   props: {
     menu: {
       type: Boolean,
       default: false,
       description:
-        "Whether the item is a menu. Most of the item it's not used and should be used only if you want to override the default behavior."
+        "Whether the item is a menu. Most of the item it's not used and should be used only if you want to override the default behavior.",
     },
     link: {
       type: Object,
       default: () => {
         return {
-          name: "",
+          name: '',
-          path: "",
+          path: '',
-          children: []
+          children: [],
-        };
+        }
       },
       description:
-        "Sidebar link. Can contain name, path, icon and other attributes. See examples for more info"
+        'Sidebar link. Can contain name, path, icon and other attributes. See examples for more info',
-    }
+    },
   },
   provide() {
     return {
       addLink: this.addChild,
-      removeLink: this.removeChild
+      removeLink: this.removeChild,
-    };
+    }
   },
   inject: {
     addLink: { default: null },
     removeLink: { default: null },
     autoClose: {
-      default: true
+      default: true,
-    }
+    },
   },
   data() {
     return {
       children: [],
-      collapsed: true
+      collapsed: true,
-    };
+    }
   },
   computed: {
     baseComponent() {
-      return this.isMenu || this.link.isRoute ? "li" : "router-link";
+      return this.isMenu || this.link.isRoute ? 'li' : 'router-link'
     },
     linkPrefix() {
       if (this.link.name) {
-        let words = this.link.name.split(" ");
+        let words = this.link.name.split(' ')
-        return words.map(word => word.substring(0, 1)).join("");
+        return words.map(word => word.substring(0, 1)).join('')
       }
-      return "";
+      return ''
     },
     isMenu() {
-      return this.children.length > 0 || this.menu === true;
+      return this.children.length > 0 || this.menu === true
     },
     isActive() {
       if (this.$route && this.$route.path) {
-        let matchingRoute = this.children.find(c =>
+        let matchingRoute = this.children.find(c => this.$route.path.startsWith(c.link.path))
-          this.$route.path.startsWith(c.link.path)
-        );
         if (matchingRoute !== undefined) {
-          return true;
+          return true
         }
       }
-      return false;
+      return false
-    }
+    },
   },
   methods: {
     addChild(item) {
-      const index = this.$slots.default.indexOf(item.$vnode);
+      const index = this.$slots.default.indexOf(item.$vnode)
-      this.children.splice(index, 0, item);
+      this.children.splice(index, 0, item)
     },
     removeChild(item) {
-      const tabs = this.children;
+      const tabs = this.children
-      const index = tabs.indexOf(item);
+      const index = tabs.indexOf(item)
-      tabs.splice(index, 1);
+      tabs.splice(index, 1)
     },
     elementType(link, isParent = true) {
       if (link.isRoute === false) {
-        return isParent ? "li" : "a";
+        return isParent ? 'li' : 'a'
       } else {
-        return "router-link";
+        return 'router-link'
       }
     },
     linkAbbreviation(name) {
-      const matches = name.match(/\b(\w)/g);
+      const matches = name.match(/\b(\w)/g)
-      return matches.join("");
+      return matches.join('')
     },
     linkClick() {
-      if (
+      if (this.autoClose && this.$sidebar && this.$sidebar.showSidebar === true) {
-        this.autoClose &&
+        this.$sidebar.displaySidebar(false)
-        this.$sidebar &&
-        this.$sidebar.showSidebar === true
-      ) {
-        this.$sidebar.displaySidebar(false);
       }
     },
     collapseMenu() {
-      this.collapsed = !this.collapsed;
+      this.collapsed = !this.collapsed
     },
     collapseSubMenu(link) {
-      link.collapsed = !link.collapsed;
+      link.collapsed = !link.collapsed
-    }
+    },
   },
   mounted() {
     if (this.addLink) {
-      this.addLink(this);
+      this.addLink(this)
     }
     if (this.link.collapsed !== undefined) {
-      this.collapsed = this.link.collapsed;
+      this.collapsed = this.link.collapsed
     }
     if (this.isActive && this.isMenu) {
-      this.collapsed = false;
+      this.collapsed = false
     }
   },
   destroyed() {
     if (this.$el && this.$el.parentNode) {
-      this.$el.parentNode.removeChild(this.$el);
+      this.$el.parentNode.removeChild(this.$el)
     }
     if (this.removeLink) {
-      this.removeLink(this);
+      this.removeLink(this)
     }
-  }
+  },
-};
+}
 </script>
 <style>
 .sidebar-menu-item {

frontend/src/components/SidebarPlugin/index.js

@@ -1,43 +1,43 @@
-import Sidebar from "./SideBar.vue";
+import Sidebar from './SideBar.vue'
-import SidebarItem from "./SidebarItem.vue";
+import SidebarItem from './SidebarItem.vue'
 
 const SidebarStore = {
   showSidebar: false,
   sidebarLinks: [],
   isMinimized: false,
   displaySidebar(value) {
-    this.showSidebar = value;
+    this.showSidebar = value
   },
   toggleMinimize() {
-    document.body.classList.toggle("sidebar-mini");
+    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"));
+      window.dispatchEvent(new Event('resize'))
-    }, 180);
+    }, 180)
 
     // we stop the simulation of Window Resize after the animations are completed
     setTimeout(() => {
-      clearInterval(simulateWindowResize);
+      clearInterval(simulateWindowResize)
-    }, 1000);
+    }, 1000)
 
-    this.isMinimized = !this.isMinimized;
+    this.isMinimized = !this.isMinimized
-  }
+  },
-};
+}
 
 const SidebarPlugin = {
   install(Vue, options) {
     if (options && options.sidebarLinks) {
-      SidebarStore.sidebarLinks = options.sidebarLinks;
+      SidebarStore.sidebarLinks = options.sidebarLinks
     }
     let app = new Vue({
       data: {
-        sidebarStore: SidebarStore
+        sidebarStore: SidebarStore,
-      }
+      },
-    });
+    })
-    Vue.prototype.$sidebar = app.sidebarStore;
+    Vue.prototype.$sidebar = app.sidebarStore
-    Vue.component("side-bar", Sidebar);
+    Vue.component('side-bar', Sidebar)
-    Vue.component("sidebar-item", SidebarItem);
+    Vue.component('sidebar-item', SidebarItem)
-  }
+  },
-};
+}
 
-export default SidebarPlugin;
+export default SidebarPlugin

frontend/src/components/Tabs/Tab.vue

@@ -11,23 +11,23 @@
 </template>
 <script>
 export default {
-  name: "tab-pane",
+  name: 'tab-pane',
-  props: ["title", "id"],
+  props: ['title', 'id'],
-  inject: ["addTab", "removeTab"],
+  inject: ['addTab', 'removeTab'],
   data() {
     return {
-      active: false
+      active: false,
-    };
+    }
   },
   mounted() {
-    this.addTab(this);
+    this.addTab(this)
   },
   destroyed() {
     if (this.$el && this.$el.parentNode) {
-      this.$el.parentNode.removeChild(this.$el);
+      this.$el.parentNode.removeChild(this.$el)
     }
-    this.removeTab(this);
+    this.removeTab(this)
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/components/Tabs/Tabs.vue

@@ -4,7 +4,7 @@
       :class="[
         { 'col-md-4': vertical && !tabNavWrapperClasses },
         { 'col-12': centered && !tabNavWrapperClasses },
-        tabNavWrapperClasses
+        tabNavWrapperClasses,
       ]"
     >
       <b-nav
@@ -14,7 +14,7 @@
           `nav-pills-${type}`,
           { 'flex-column': vertical },
           { 'justify-content-center': centered },
-          tabNavClasses
+          tabNavClasses,
         ]"
       >
         <b-nav-item
@@ -37,7 +37,7 @@
       :class="[
         { 'tab-space': !vertical },
         { 'col-md-8': vertical && !tabContentClasses },
-        tabContentClasses
+        tabContentClasses,
       ]"
     >
       <slot></slot>
@@ -47,115 +47,109 @@
 
 <script>
 export default {
-  name: "tabs",
+  name: 'tabs',
   components: {
     TabItemContent: {
-      props: ["tab"],
+      props: ['tab'],
       render(h) {
-        return h("div", [this.tab.$slots.title || this.tab.title]);
+        return h('div', [this.tab.$slots.title || this.tab.title])
-      }
+      },
-    }
+    },
   },
   provide() {
     return {
       addTab: this.addTab,
-      removeTab: this.removeTab
+      removeTab: this.removeTab,
-    };
+    }
   },
   props: {
     type: {
       type: String,
-      default: "primary",
+      default: 'primary',
       validator: value => {
-        let acceptedValues = [
+        let acceptedValues = ['primary', 'info', 'success', 'warning', 'danger']
-          "primary",
+        return acceptedValues.indexOf(value) !== -1
-          "info",
+      },
-          "success",
-          "warning",
-          "danger"
-        ];
-        return acceptedValues.indexOf(value) !== -1;
-      }
     },
     activeTab: {
       type: String,
-      default: "",
+      default: '',
-      description: "Active tab name"
+      description: 'Active tab name',
     },
     tabNavWrapperClasses: {
       type: [String, Object],
-      default: "",
+      default: '',
-      description: "ul wrapper css classes"
+      description: 'ul wrapper css classes',
     },
     tabNavClasses: {
       type: [String, Object],
-      default: "",
+      default: '',
-      description: "ul css classes"
+      description: 'ul css classes',
     },
     tabContentClasses: {
       type: [String, Object],
-      default: "",
+      default: '',
-      description: "tab content css classes"
+      description: 'tab content css classes',
     },
     vertical: Boolean,
     centered: Boolean,
-    value: String
+    value: String,
   },
   data() {
     return {
-      tabs: []
+      tabs: [],
-    };
+    }
   },
   methods: {
     findAndActivateTab(title) {
-      let tabToActivate = this.tabs.find(t => t.title === title);
+      let tabToActivate = this.tabs.find(t => t.title === title)
       if (tabToActivate) {
-        this.activateTab(tabToActivate);
+        this.activateTab(tabToActivate)
       }
     },
     activateTab(tab) {
       if (this.handleClick) {
-        this.handleClick(tab);
+        this.handleClick(tab)
       }
-      this.deactivateTabs();
+      this.deactivateTabs()
-      tab.active = true;
+      tab.active = true
     },
     deactivateTabs() {
       this.tabs.forEach(tab => {
-        tab.active = false;
+        tab.active = false
-      });
+      })
     },
     addTab(tab) {
-      const index = this.$slots.default.indexOf(tab.$vnode);
+      const index = this.$slots.default.indexOf(tab.$vnode)
       if (!this.activeTab && index === 0) {
-        tab.active = true;
+        tab.active = true
       }
       if (this.activeTab === tab.name) {
-        tab.active = true;
+        tab.active = true
       }
-      this.tabs.splice(index, 0, tab);
+      this.tabs.splice(index, 0, tab)
     },
     removeTab(tab) {
-      const tabs = this.tabs;
+      const tabs = this.tabs
-      const index = tabs.indexOf(tab);
+      const index = tabs.indexOf(tab)
       if (index > -1) {
-        tabs.splice(index, 1);
+        tabs.splice(index, 1)
       }
-    }
+    },
   },
   mounted() {
     this.$nextTick(() => {
       if (this.value) {
-        this.findAndActivateTab(this.value);
+        this.findAndActivateTab(this.value)
       }
-    });
+    })
   },
   watch: {
     value(newVal) {
-      this.findAndActivateTab(newVal);
+      this.findAndActivateTab(newVal)
-    }
+    },
-  }
+  },
-};
+}
 </script>
 
 <style scoped></style>

frontend/src/components/index.js

@@ -1,30 +1,30 @@
-import BaseCheckbox from "./Inputs/BaseCheckbox.vue";
+import BaseCheckbox from './Inputs/BaseCheckbox.vue'
-import BaseAlert from "./BaseAlert.vue";
+import BaseAlert from './BaseAlert.vue'
-import BaseRadio from "./Inputs/BaseRadio.vue";
+import BaseRadio from './Inputs/BaseRadio.vue'
-import BaseInput from "./Inputs/BaseInput.vue";
+import BaseInput from './Inputs/BaseInput.vue'
-import Badge from "./Badge";
+import Badge from './Badge'
-import BaseProgress from "./BaseProgress.vue";
+import BaseProgress from './BaseProgress.vue'
-import BaseButton from "./BaseButton.vue";
+import BaseButton from './BaseButton.vue'
 
-import BaseDropdown from "./BaseDropdown.vue";
+import BaseDropdown from './BaseDropdown.vue'
-import BaseTable from "./BaseTable.vue";
+import BaseTable from './BaseTable.vue'
 
-import Card from "./Cards/Card.vue";
+import Card from './Cards/Card.vue'
-import StatsCard from "./Cards/StatsCard.vue";
+import StatsCard from './Cards/StatsCard.vue'
-import BaseNav from "./Navbar/BaseNav";
+import BaseNav from './Navbar/BaseNav'
-import NavbarToggleButton from "./Navbar/NavbarToggleButton";
+import NavbarToggleButton from './Navbar/NavbarToggleButton'
 
-import TabPane from "./Tabs/Tab.vue";
+import TabPane from './Tabs/Tab.vue'
-import Tabs from "./Tabs/Tabs.vue";
+import Tabs from './Tabs/Tabs.vue'
-import Collapse from "./Collapse/Collapse.vue";
+import Collapse from './Collapse/Collapse.vue'
-import CollapseItem from "./Collapse/CollapseItem.vue";
+import CollapseItem from './Collapse/CollapseItem.vue'
-import Modal from "./Modal.vue";
+import Modal from './Modal.vue'
-import BaseSlider from "./BaseSlider.vue";
+import BaseSlider from './BaseSlider.vue'
-import LoadingPanel from "./LoadingPanel.vue";
+import LoadingPanel from './LoadingPanel.vue'
 
-import BasePagination from "./BasePagination.vue";
+import BasePagination from './BasePagination.vue'
 
-import SidebarPlugin from "./SidebarPlugin";
+import SidebarPlugin from './SidebarPlugin'
 
 export {
   BaseCheckbox,
@@ -48,5 +48,5 @@ export {
   BaseButton,
   Collapse,
   CollapseItem,
-  LoadingPanel
+  LoadingPanel,
-};
+}

frontend/src/config/index.js

@@ -5,27 +5,24 @@
 
 const environment = {
   NODE_ENV: process.env.NODE_ENV,
-  DEBUG: process.env.NODE_ENV !== "production" || false,
+  DEBUG: process.env.NODE_ENV !== 'production' || false,
-  PRODUCTION: process.env.NODE_ENV === "production" || false
+  PRODUCTION: process.env.NODE_ENV === 'production' || false,
-};
+}
 
 const server = {
-  LOGIN_API_URL: process.env.LOGIN_API_URL || "http://localhost/login_api/",
+  LOGIN_API_URL: process.env.LOGIN_API_URL || 'http://localhost/login_api/',
   COMMUNITY_API_STATE_BALANCE_URL:
-    process.env.COMMUNITY_API_STATE_BALANCE_URL ||
+    process.env.COMMUNITY_API_STATE_BALANCE_URL || 'http://localhost/state-balances/',
-    "http://localhost/state-balances/",
   COMMUNITY_API_TRANSACTION_CREATION_URL:
-    process.env.COMMUNITY_API_TRANSACTION_CREATION_URL ||
+    process.env.COMMUNITY_API_TRANSACTION_CREATION_URL || 'http://localhost/transaction-creations/',
-    "http://localhost/transaction-creations/",
   // TODO is this the right API call? what does it do?
   COMMUNITY_API_TRANSACTION_SEND_COINS:
-    process.env.COMMUNITY_API_TRANSACTION_SEND_COINS ||
+    process.env.COMMUNITY_API_TRANSACTION_SEND_COINS || 'http://localhost/transaction-send-coins/',
-    "http://localhost/transaction-send-coins/"
+}
-};
 
 const CONFIG = {
   ...environment,
-  ...server
+  ...server,
-};
+}
 
-export default CONFIG;
+export default CONFIG

frontend/src/directives/click-ouside.js

@@ -4,12 +4,12 @@ export default {
       // here I check that click was outside the el and his childrens
       if (!(el == event.target || el.contains(event.target))) {
         // and if it did, call method provided in attribute value
-        vnode.context[binding.expression](event);
+        vnode.context[binding.expression](event)
       }
-    };
+    }
-    document.body.addEventListener("click", el.clickOutsideEvent);
+    document.body.addEventListener('click', el.clickOutsideEvent)
   },
   unbind: function(el) {
-    document.body.removeEventListener("click", el.clickOutsideEvent);
+    document.body.removeEventListener('click', el.clickOutsideEvent)
-  }
+  },
-};
+}

frontend/src/i18n.js

@@ -1,45 +1,41 @@
-import Vue from "vue";
+import Vue from 'vue'
-import VueI18n from "vue-i18n";
+import VueI18n from 'vue-i18n'
 
-Vue.use(VueI18n);
+Vue.use(VueI18n)
 
 function loadLocaleMessages() {
-  const locales = require.context(
+  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
-    "./locales",
+  const messages = {}
-    true,
-    /[A-Za-z0-9-_,\s]+\.json$/i
-  );
-  const messages = {};
   locales.keys().forEach(key => {
-    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
+    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
     if (matched && matched.length > 1) {
-      const locale = matched[1];
+      const locale = matched[1]
-      messages[locale] = locales(key);
+      messages[locale] = locales(key)
     }
-  });
+  })
-  return messages;
+  return messages
 }
 
 const numberFormats = {
-  "en-US": {
+  'en-US': {
     currency: {
-      style: "currency",
+      style: 'currency',
-      currency: "GDD",
+      currency: 'GDD',
-      abbreviate: true
+      abbreviate: true,
-    }
+    },
   },
-  "de-DE": {
+  'de-DE': {
     currency: {
-      style: "currency",
+      style: 'currency',
-      currency: "GDD",
+      currency: 'GDD',
-      abbreviate: true
+      abbreviate: true,
-    }
+    },
-  }
+  },
-};
+}
 
 export default new VueI18n({
-  locale: "en",
+  locale: 'en',
-  fallbackLocale: "en",
+  fallbackLocale: 'en',
   messages: loadLocaleMessages(),
-  numberFormats
+  numberFormats,
-});
+})

frontend/src/main.js

@@ -1,25 +1,25 @@
-import Vue from "vue";
+import Vue from 'vue'
-import DashboardPlugin from "./plugins/dashboard-plugin";
+import DashboardPlugin from './plugins/dashboard-plugin'
-import App from "./App.vue";
+import App from './App.vue'
-import i18n from "./i18n.js";
+import i18n from './i18n.js'
-import VueCookies from "vue-cookies";
+import VueCookies from 'vue-cookies'
 
 // store
-import { store } from "./store/store";
+import { store } from './store/store'
 
 // router setup
-import router from "./routes/router";
+import router from './routes/router'
 
 // plugin setup
-Vue.use(DashboardPlugin);
+Vue.use(DashboardPlugin)
-Vue.config.productionTip = false;
+Vue.config.productionTip = false
-Vue.use(VueCookies);
+Vue.use(VueCookies)
 
 /* eslint-disable no-new */
 new Vue({
-  el: "#app",
+  el: '#app',
   router,
   store,
   i18n,
-  render: h => h(App)
+  render: h => h(App),
-});
+})

frontend/src/plugins/dashboard-plugin.js

@@ -1,67 +1,67 @@
 // Polyfills for js features used in the Dashboard but not supported in some browsers (mainly IE)
-import "@/polyfills";
+import '@/polyfills'
 // Notifications plugin. Used on Notifications page
-import Notifications from "@/components/NotificationPlugin";
+import Notifications from '@/components/NotificationPlugin'
 // Validation plugin used to validate forms
-import { configure } from "vee-validate";
+import { configure } from 'vee-validate'
 // A plugin file where you could register global components used across the app
-import GlobalComponents from "./globalComponents";
+import GlobalComponents from './globalComponents'
 // A plugin file where you could register global directives
-import GlobalDirectives from "./globalDirectives";
+import GlobalDirectives from './globalDirectives'
 // Sidebar on the right. Used as a local plugin in DashboardLayout.vue
-import SideBar from "@/components/SidebarPlugin";
+import SideBar from '@/components/SidebarPlugin'
 
 // element ui language configuration
-import lang from "element-ui/lib/locale/lang/en";
+import lang from 'element-ui/lib/locale/lang/en'
-import locale from "element-ui/lib/locale";
+import locale from 'element-ui/lib/locale'
-locale.use(lang);
+locale.use(lang)
 
 // vue-bootstrap
-import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 
 // asset imports
-import "@/assets/scss/argon.scss";
+import '@/assets/scss/argon.scss'
-import "@/assets/vendor/nucleo/css/nucleo.css";
+import '@/assets/vendor/nucleo/css/nucleo.css'
-import { extend } from "vee-validate";
+import { extend } from 'vee-validate'
-import * as rules from "vee-validate/dist/rules";
+import * as rules from 'vee-validate/dist/rules'
-import { messages } from "vee-validate/dist/locale/en.json";
+import { messages } from 'vee-validate/dist/locale/en.json'
 
-import VueQrcodeReader from "vue-qrcode-reader";
+import VueQrcodeReader from 'vue-qrcode-reader'
-import VueQrcode from "vue-qrcode";
+import VueQrcode from 'vue-qrcode'
 
-import VueFlatPickr from "vue-flatpickr-component";
+import VueFlatPickr from 'vue-flatpickr-component'
 
-import VueGoodTablePlugin from "vue-good-table";
+import VueGoodTablePlugin from 'vue-good-table'
 // import the styles
-import "vue-good-table/dist/vue-good-table.css";
+import 'vue-good-table/dist/vue-good-table.css'
 
-import VueMoment from "vue-moment";
+import VueMoment from 'vue-moment'
 
 Object.keys(rules).forEach(rule => {
   extend(rule, {
     ...rules[rule], // copies rule configuration
-    message: messages[rule] // assign message
+    message: messages[rule], // assign message
-  });
+  })
-});
+})
 export default {
   install(Vue) {
-    Vue.use(GlobalComponents);
+    Vue.use(GlobalComponents)
-    Vue.use(GlobalDirectives);
+    Vue.use(GlobalDirectives)
-    Vue.use(SideBar);
+    Vue.use(SideBar)
-    Vue.use(Notifications);
+    Vue.use(Notifications)
-    Vue.use(BootstrapVue);
+    Vue.use(BootstrapVue)
-    Vue.use(IconsPlugin);
+    Vue.use(IconsPlugin)
-    Vue.use(VueGoodTablePlugin);
+    Vue.use(VueGoodTablePlugin)
-    Vue.use(VueMoment);
+    Vue.use(VueMoment)
-    Vue.use(VueQrcodeReader);
+    Vue.use(VueQrcodeReader)
-    Vue.use(VueQrcode);
+    Vue.use(VueQrcode)
-    Vue.use(VueFlatPickr);
+    Vue.use(VueFlatPickr)
     configure({
       classes: {
-        valid: "is-valid",
+        valid: 'is-valid',
-        invalid: "is-invalid",
+        invalid: 'is-invalid',
-        dirty: ["is-dirty", "is-dirty"] // multiple classes per flag!
+        dirty: ['is-dirty', 'is-dirty'], // multiple classes per flag!
-      }
+      },
-    });
+    })
-  }
+  },
-};
+}

frontend/src/plugins/globalComponents.js

@@ -1,45 +1,45 @@
-import BaseInput from "@/components/Inputs/BaseInput.vue";
+import BaseInput from '@/components/Inputs/BaseInput.vue'
-import BaseDropdown from "@/components/BaseDropdown.vue";
+import BaseDropdown from '@/components/BaseDropdown.vue'
-import Card from "@/components/Cards/Card.vue";
+import Card from '@/components/Cards/Card.vue'
-import Modal from "@/components/Modal.vue";
+import Modal from '@/components/Modal.vue'
-import StatsCard from "@/components/Cards/StatsCard.vue";
+import StatsCard from '@/components/Cards/StatsCard.vue'
-import BaseButton from "@/components/BaseButton.vue";
+import BaseButton from '@/components/BaseButton.vue'
-import Badge from "@/components/Badge.vue";
+import Badge from '@/components/Badge.vue'
-import BaseCheckbox from "@/components/Inputs/BaseCheckbox.vue";
+import BaseCheckbox from '@/components/Inputs/BaseCheckbox.vue'
-import BaseRadio from "@/components/Inputs/BaseRadio";
+import BaseRadio from '@/components/Inputs/BaseRadio'
-import BaseProgress from "@/components/BaseProgress";
+import BaseProgress from '@/components/BaseProgress'
-import BasePagination from "@/components/BasePagination";
+import BasePagination from '@/components/BasePagination'
-import BaseAlert from "@/components/BaseAlert";
+import BaseAlert from '@/components/BaseAlert'
-import BaseNav from "@/components/Navbar/BaseNav";
+import BaseNav from '@/components/Navbar/BaseNav'
-import BaseHeader from "@/components/BaseHeader";
+import BaseHeader from '@/components/BaseHeader'
-import { ValidationProvider, ValidationObserver } from "vee-validate";
+import { ValidationProvider, ValidationObserver } from 'vee-validate'
-import { Input, Tooltip, Popover } from "element-ui";
+import { Input, Tooltip, Popover } from 'element-ui'
 /**
  * You can register global components here and use them as a plugin in your main Vue instance
  */
 
 const GlobalComponents = {
   install(Vue) {
-    Vue.component(Badge.name, Badge);
+    Vue.component(Badge.name, Badge)
-    Vue.component(BaseAlert.name, BaseAlert);
+    Vue.component(BaseAlert.name, BaseAlert)
-    Vue.component(BaseButton.name, BaseButton);
+    Vue.component(BaseButton.name, BaseButton)
-    Vue.component(BaseCheckbox.name, BaseCheckbox);
+    Vue.component(BaseCheckbox.name, BaseCheckbox)
-    Vue.component(BaseHeader.name, BaseHeader);
+    Vue.component(BaseHeader.name, BaseHeader)
-    Vue.component(BaseInput.name, BaseInput);
+    Vue.component(BaseInput.name, BaseInput)
-    Vue.component(BaseDropdown.name, BaseDropdown);
+    Vue.component(BaseDropdown.name, BaseDropdown)
-    Vue.component(BaseNav.name, BaseNav);
+    Vue.component(BaseNav.name, BaseNav)
-    Vue.component(BasePagination.name, BasePagination);
+    Vue.component(BasePagination.name, BasePagination)
-    Vue.component(BaseProgress.name, BaseProgress);
+    Vue.component(BaseProgress.name, BaseProgress)
-    Vue.component(BaseRadio.name, BaseRadio);
+    Vue.component(BaseRadio.name, BaseRadio)
-    Vue.component(Card.name, Card);
+    Vue.component(Card.name, Card)
-    Vue.component(Modal.name, Modal);
+    Vue.component(Modal.name, Modal)
-    Vue.component(StatsCard.name, StatsCard);
+    Vue.component(StatsCard.name, StatsCard)
-    Vue.component(Input.name, Input);
+    Vue.component(Input.name, Input)
-    Vue.component("validation-provider", ValidationProvider);
+    Vue.component('validation-provider', ValidationProvider)
-    Vue.component("validation-observer", ValidationObserver);
+    Vue.component('validation-observer', ValidationObserver)
-    Vue.use(Tooltip);
+    Vue.use(Tooltip)
-    Vue.use(Popover);
+    Vue.use(Popover)
-  }
+  },
-};
+}
 
-export default GlobalComponents;
+export default GlobalComponents

frontend/src/plugins/globalDirectives.js

@@ -1,4 +1,4 @@
-import clickOutside from "@/directives/click-ouside.js";
+import clickOutside from '@/directives/click-ouside.js'
 
 /**
  * You can register global directives here and use them as a plugin in your main Vue instance
@@ -6,8 +6,8 @@ import clickOutside from "@/directives/click-ouside.js";
 
 const GlobalDirectives = {
   install(Vue) {
-    Vue.directive("click-outside", clickOutside);
+    Vue.directive('click-outside', clickOutside)
-  }
+  },
-};
+}
 
-export default GlobalDirectives;
+export default GlobalDirectives

frontend/src/routes/router.js

@@ -1,30 +1,30 @@
-import Vue from "vue";
+import Vue from 'vue'
-import VueRouter from "vue-router";
+import VueRouter from 'vue-router'
-import routes from "./routes";
+import routes from './routes'
 
-Vue.use(VueRouter);
+Vue.use(VueRouter)
 
 // configure router
 const router = new VueRouter({
   routes, // short for routes: routes
-  linkActiveClass: "active",
+  linkActiveClass: 'active',
   scrollBehavior: (to, from, savedPosition) => {
     if (savedPosition) {
-      return savedPosition;
+      return savedPosition
     }
     if (to.hash) {
-      return { selector: to.hash };
+      return { selector: to.hash }
     }
-    return { x: 0, y: 0 };
+    return { x: 0, y: 0 }
-  }
+  },
-});
+})
 
 router.beforeEach((to, from, next) => {
-  let language = to.params.lang;
+  let language = to.params.lang
   if (!language) {
-    language = "de";
+    language = 'de'
   }
-  next();
+  next()
-});
+})
 
-export default router;
+export default router

frontend/src/routes/routes.js

@@ -1,84 +1,84 @@
-import DashboardLayout from "@/views/Layout/DashboardLayout.vue";
+import DashboardLayout from '@/views/Layout/DashboardLayout.vue'
-import AuthLayoutGDD from "@/views/Layout/AuthLayout_gdd.vue";
+import AuthLayoutGDD from '@/views/Layout/AuthLayout_gdd.vue'
-import AuthLayout from "@/views/Layout/AuthLayout.vue";
+import AuthLayout from '@/views/Layout/AuthLayout.vue'
 
 // import NotFound from '@/views/NotFoundPage.vue'
 
 const routes = [
   {
-    path: "/",
+    path: '/',
-    redirect: "login",
+    redirect: 'login',
     component: AuthLayoutGDD,
     children: [
       {
-        path: "/login",
+        path: '/login',
-        component: () => import("../views/Pages/Login.vue")
+        component: () => import('../views/Pages/Login.vue'),
       },
       {
-        path: "/thx",
+        path: '/thx',
-        component: () => import("../views/Pages/thx.vue")
+        component: () => import('../views/Pages/thx.vue'),
       },
       {
-        path: "/register",
+        path: '/register',
-        component: () => import("../views/Pages/Register.vue")
+        component: () => import('../views/Pages/Register.vue'),
       },
       {
-        path: "/password",
+        path: '/password',
-        component: () => import("../views/Pages/Password.vue")
+        component: () => import('../views/Pages/Password.vue'),
       },
       {
-        path: "/explorer",
+        path: '/explorer',
-        name: "Explorer",
+        name: 'Explorer',
-        component: () => import("../views/Pages/Explorer.vue")
+        component: () => import('../views/Pages/Explorer.vue'),
-      }
+      },
-    ]
+    ],
   },
   {
-    path: "/",
+    path: '/',
-    redirect: "overview",
+    redirect: 'overview',
     component: DashboardLayout,
     children: [
       {
-        path: "/overview",
+        path: '/overview',
-        component: () => import("../views/KontoOverview.vue"),
+        component: () => import('../views/KontoOverview.vue'),
         meta: {
-          requiresAuth: true
+          requiresAuth: true,
-        }
+        },
       },
       {
-        path: "/profile",
+        path: '/profile',
-        component: () => import("../views/Pages/UserProfileCard.vue")
+        component: () => import('../views/Pages/UserProfileCard.vue'),
       },
       {
-        path: "/profileedit",
+        path: '/profileedit',
-        component: () => import("../views/Pages/UserProfileEdit.vue")
+        component: () => import('../views/Pages/UserProfileEdit.vue'),
       },
       {
-        path: "/activity",
+        path: '/activity',
-        component: () => import("../views/Pages/UserProfileActivity.vue")
+        component: () => import('../views/Pages/UserProfileActivity.vue'),
       },
       {
-        path: "/transactions",
+        path: '/transactions',
-        component: () => import("../views/Pages/UserProfileTransactionList.vue")
+        component: () => import('../views/Pages/UserProfileTransactionList.vue'),
-      }
+      },
-    ]
+    ],
   },
   ,
   {
-    path: "/",
+    path: '/',
-    redirect: "AdminOverview",
+    redirect: 'AdminOverview',
     component: AuthLayout,
     children: [
       {
-        path: "/AdminOverview",
+        path: '/AdminOverview',
-        name: "Adminübersicht",
+        name: 'Adminübersicht',
-        component: () => import("../views/AdminOverview.vue"),
+        component: () => import('../views/AdminOverview.vue'),
         meta: {
-          requiresAuth: true
+          requiresAuth: true,
-        }
+        },
-      }
+      },
-    ]
+    ],
-  }
+  },
-];
+]
 
-export default routes;
+export default routes

frontend/src/routes/starterRouter.js

@@ -1,33 +1,33 @@
-import Vue from "vue";
+import Vue from 'vue'
-import Router from "vue-router";
+import Router from 'vue-router'
-import DashboardLayout from "../views/Starter/SampleLayout.vue";
+import DashboardLayout from '../views/Starter/SampleLayout.vue'
-import Starter from "../views/Starter/SamplePage.vue";
+import Starter from '../views/Starter/SamplePage.vue'
 
-Vue.use(Router);
+Vue.use(Router)
 
 export default new Router({
   routes: [
     {
-      path: "/",
+      path: '/',
-      name: "home",
+      name: 'home',
-      redirect: "/dashboard",
+      redirect: '/dashboard',
       component: DashboardLayout,
       children: [
         {
-          path: "dashboard",
+          path: 'dashboard',
-          name: "dashboard",
+          name: 'dashboard',
-          components: { default: Starter }
+          components: { default: Starter },
-        }
+        },
-      ]
+      ],
-    }
+    },
   ],
   scrollBehavior: (to, from, savedPosition) => {
     if (savedPosition) {
-      return savedPosition;
+      return savedPosition
     }
     if (to.hash) {
-      return { selector: to.hash };
+      return { selector: to.hash }
     }
-    return { x: 0, y: 0 };
+    return { x: 0, y: 0 }
-  }
+  },
-});
+})

frontend/src/store/store.js

@@ -1,40 +1,40 @@
-import Vue from "vue";
+import Vue from 'vue'
-import Vuex from "vuex";
+import Vuex from 'vuex'
-Vue.use(Vuex);
+Vue.use(Vuex)
-import router from "../routes/router.js";
+import router from '../routes/router.js'
-import loginAPI from "../apis/loginAPI";
+import loginAPI from '../apis/loginAPI'
-import communityAPI from "../apis/communityAPI";
+import communityAPI from '../apis/communityAPI'
 
 export const store = new Vuex.Store({
   state: {
     session_id: null,
     email: null,
-    language: "en",
+    language: 'en',
-    sizeDE: "normal",
+    sizeDE: 'normal',
-    sizeGB: "big",
+    sizeGB: 'big',
     loginfail: false,
     user: {
-      name: "",
+      name: '',
       balance: 0,
-      balance_gdt: 0
+      balance_gdt: 0,
     },
     ajaxCreateData: {
-      session_id: "",
+      session_id: '',
-      email: "",
+      email: '',
       amount: 0,
-      target_date: "2021-02-19T13:25:36+00:00",
+      target_date: '2021-02-19T13:25:36+00:00',
-      memo: "",
+      memo: '',
-      auto_sign: true
+      auto_sign: true,
     },
     transactions: [],
     modals: false,
     optionAxios: {
       headers: {
-        "Content-Type": "application/x-www-form-urlencoded",
+        'Content-Type': 'application/x-www-form-urlencoded',
-        "Access-Control-Allow-Origin": "*",
+        'Access-Control-Allow-Origin': '*',
-        "Access-Control-Allow-Credentials": "true"
+        'Access-Control-Allow-Credentials': 'true',
-      }
+      },
-    }
+    },
   },
   getters: {
     //isLoggedIn: (state /*, getters */) => {
@@ -44,62 +44,62 @@ export const store = new Vuex.Store({
   // Syncronous mutation of the state
   mutations: {
     language: (state, language) => {
-      console.log("mutation: language", language);
+      console.log('mutation: language', language)
-      state.language = language;
+      state.language = language
-      $cookies.set("gdd_lang", language);
+      $cookies.set('gdd_lang', language)
-      if (state.language == "de") {
+      if (state.language == 'de') {
-        state.sizeDE = "big";
+        state.sizeDE = 'big'
-        state.sizeGB = "normal";
+        state.sizeGB = 'normal'
       } else {
-        state.sizeDE = "normal";
+        state.sizeDE = 'normal'
-        state.sizeGB = "big";
+        state.sizeGB = 'big'
       }
     },
     loginfail: (state, loginfail) => {
       //console.log('mutation: email')
-      state.loginfail = loginfail;
+      state.loginfail = loginfail
     },
     email: (state, email) => {
       //console.log('mutation: email')
-      state.email = email;
+      state.email = email
     },
     session_id: (state, session_id) => {
       //console.log('mutation: session_id')
-      state.session_id = session_id;
+      state.session_id = session_id
     },
     user_balance: (state, balance) => {
-      console.log("mutation: user_balance");
+      console.log('mutation: user_balance')
-      state.user.balance = balance / 10000;
+      state.user.balance = balance / 10000
     },
     user_balance_gdt: (state, balance) => {
       //console.log('mutation: user_balance_gdt')
-      state.user.balance_gdt = balance / 10000;
+      state.user.balance_gdt = balance / 10000
     },
     transactions: (state, transactions) => {
       //console.log('mutation: transactions')
-      state.transactions = transactions;
+      state.transactions = transactions
-    }
+    },
   },
   // Asyncronous actions - used for api calls
   actions: {
     login: async ({ dispatch, commit }, data) => {
-      const result = await loginAPI.login(data.email, data.password);
+      const result = await loginAPI.login(data.email, data.password)
       if (result.success) {
-        commit("session_id", result.result.data.session_id);
+        commit('session_id', result.result.data.session_id)
-        commit("email", data.email);
+        commit('email', data.email)
-        $cookies.set("gdd_session_id", result.result.data.session_id);
+        $cookies.set('gdd_session_id', result.result.data.session_id)
-        $cookies.set("gdd_u", data.email);
+        $cookies.set('gdd_u', data.email)
-        router.push("/overview");
+        router.push('/overview')
       } else {
         // Register failed, we perform a logout
         //alert('>>>>> FAIl LOGIN')
-        commit("loginfail", true);
+        commit('loginfail', true)
 
         //dispatch('logout')
       }
     },
     passwordReset: async data => {
-      console.log("<<<<<<<<<<< PASSWORT RESET TODO >>>>>>>>>>>", data.email);
+      console.log('<<<<<<<<<<< PASSWORT RESET TODO >>>>>>>>>>>', data.email)
     },
     schoepfen: async data => {
       // http://localhost/transaction-creations/ajaxCreate
@@ -110,63 +110,61 @@ export const store = new Vuex.Store({
         data.email,
         data.first_name,
         data.last_name,
-        data.password
+        data.password,
-      );
+      )
       if (result.success) {
-        commit("session_id", result.result.data.session_id);
+        commit('session_id', result.result.data.session_id)
-        commit("email", data.email);
+        commit('email', data.email)
-        $cookies.set("gdd_session_id", result.result.data.session_id);
+        $cookies.set('gdd_session_id', result.result.data.session_id)
-        $cookies.set("gdd_u", data.email);
+        $cookies.set('gdd_u', data.email)
-        router.push("/overview");
+        router.push('/overview')
       } else {
         // Register failed, we perform a logout
         // console.log('action createUser to  logout start')
-        dispatch("logout");
+        dispatch('logout')
       }
     },
     logout: async ({ commit, state }) => {
-      console.log("action: logout");
+      console.log('action: logout')
       // Are we actually logged in?
       if (state.session_id) {
-        const result = await loginAPI.logout(state.session_id);
+        const result = await loginAPI.logout(state.session_id)
         // The result can be error, but thats ok with us
       }
 
-      commit("session_id", null);
+      commit('session_id', null)
-      commit("email", null);
+      commit('email', null)
-      $cookies.remove("gdd_session_id");
+      $cookies.remove('gdd_session_id')
-      $cookies.remove("gdd_u");
+      $cookies.remove('gdd_u')
-      $cookies.remove("gdd_lang");
+      $cookies.remove('gdd_lang')
-      router.push("/Login");
+      router.push('/Login')
     },
     ajaxCreate: async ({ dispatch, state }) => {
       //console.log('action: ajaxCreate')
-      state.ajaxCreateData.amount = state.ajaxCreateData.amount * 10000;
+      state.ajaxCreateData.amount = state.ajaxCreateData.amount * 10000
-      const result = await communityAPI.create(
+      const result = await communityAPI.create($cookies.get('gdd_session_id', email, amount, memo))
-        $cookies.get("gdd_session_id", email, amount, memo)
+      console.log(result)
-      );
-      console.log(result);
     },
     ajaxListTransactions: async ({ commit, dispatch, state }) => {
       // console.log('action: ajaxListTransactions', state.session_id)
       // const result = await communityAPI.transactions(state.session_id)
     },
     accountBalance: async ({ commit, dispatch, state }) => {
-      console.log("action: accountBalance");
+      console.log('action: accountBalance')
       // console.log('action: dispatch', dispatch)
       // console.log('action: state.session_id', state.session_id)
       // console.log(" action: $cookies.get('gdd_session_id') ", $cookies.get("gdd_session_id")  )
       // commit('session_id', $cookies.get("gdd_session_id"))
       // commit('email', $cookies.get("gdd_u"))
-      const result = await communityAPI.balance($cookies.get("gdd_session_id"));
+      const result = await communityAPI.balance($cookies.get('gdd_session_id'))
-      console.log("accountBalance result", result);
+      console.log('accountBalance result', result)
-      console.log("aresult.result.data.balance", result.result.data.balance);
+      console.log('aresult.result.data.balance', result.result.data.balance)
       if (result.success) {
-        commit("user_balance", result.result.data.balance);
+        commit('user_balance', result.result.data.balance)
       } else {
-        console.log("action accountBalance to  logout start");
+        console.log('action accountBalance to  logout start')
-        dispatch("logout");
+        dispatch('logout')
       }
-    }
+    },
-  }
+  },
-});
+})

frontend/src/util/throttle.js

@@ -4,12 +4,12 @@
  * @param [timeout] the throttle interval
  */
 export function throttle(handlerFunc, timeout = 66) {
-  let resizeTimeout;
+  let resizeTimeout
   if (!resizeTimeout) {
     resizeTimeout = setTimeout(() => {
-      resizeTimeout = null;
+      resizeTimeout = null
-      handlerFunc();
+      handlerFunc()
       // The actualResizeHandler will execute at a rate of 15fps
-    }, timeout);
+    }, timeout)
   }
 }

frontend/src/views/AdminOverview.vue

@@ -13,7 +13,7 @@
             <template slot="footer">
               <span class="text-success mr-2">3.48%</span>
               <span class="text-nowrap">
-                {{ $t("site.overview.since_last_month") }}
+                {{ $t('site.overview.since_last_month') }}
               </span>
             </template>
           </stats-card>
@@ -29,7 +29,7 @@
             <template slot="footer">
               <span class="text-success mr-2">12.18%</span>
               <span class="text-nowrap">
-                {{ $t("site.overview.since_last_month") }}
+                {{ $t('site.overview.since_last_month') }}
               </span>
             </template>
           </stats-card>
@@ -45,7 +45,7 @@
             <template slot="footer">
               <span class="text-danger mr-2">5.72%</span>
               <span class="text-nowrap">
-                {{ $t("site.overview.since_last_month") }}
+                {{ $t('site.overview.since_last_month') }}
               </span>
             </template>
           </stats-card>
@@ -61,7 +61,7 @@
             <template slot="footer">
               <span class="text-success mr-2">54.8%</span>
               <span class="text-nowrap">
-                {{ $t("site.overview.since_last_month") }}
+                {{ $t('site.overview.since_last_month') }}
               </span>
             </template>
           </stats-card>
@@ -135,11 +135,7 @@
               </b-col>
             </b-row>
 
-            <bar-chart
+            <bar-chart :height="350" ref="barChart" :chart-data="redBarChart.chartData"></bar-chart>
-              :height="350"
-              ref="barChart"
-              :chart-data="redBarChart.chartData"
-            ></bar-chart>
           </card>
         </b-col>
       </b-row>
@@ -215,21 +211,21 @@
 </template>
 <script>
 // Charts
-import * as chartConfigs from "@/components/Charts/config";
+import * as chartConfigs from '@/components/Charts/config'
-import LineChart from "@/components/Charts/LineChart";
+import LineChart from '@/components/Charts/LineChart'
-import BarChart from "@/components/Charts/BarChart";
+import BarChart from '@/components/Charts/BarChart'
 
 // Components
-import BaseProgress from "@/components/BaseProgress";
+import BaseProgress from '@/components/BaseProgress'
-import StatsCard from "@/components/Cards/StatsCard";
+import StatsCard from '@/components/Cards/StatsCard'
-import SearchUser from "@/components/SearchUser";
+import SearchUser from '@/components/SearchUser'
 
 // Tables
 
-import PageVisitsTable from "./Dashboard/PageVisitsTable";
+import PageVisitsTable from './Dashboard/PageVisitsTable'
-import AdminUserSearch from "./AdminOverview/AdminUserSearch";
+import AdminUserSearch from './AdminOverview/AdminUserSearch'
-import AdminUserCreation from "./AdminOverview/AdminUserCreation";
+import AdminUserCreation from './AdminOverview/AdminUserCreation'
-import axios from "axios";
+import axios from 'axios'
 
 export default {
   components: {
@@ -239,7 +235,7 @@ export default {
     StatsCard,
     //PageVisitsTable,
     AdminUserSearch,
-    AdminUserCreation
+    AdminUserCreation,
     //SearchUser
   },
   data() {
@@ -251,149 +247,149 @@ export default {
       userlist: [],
       transactionlist: [],
       transiencelist: [],
-      filter: "",
+      filter: '',
       items: [
-        { id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 },
+        { id: 1, first_name: 'Mikkel', last_name: 'Hansen', age: 54 },
-        { id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 },
+        { id: 2, first_name: 'Kasper', last_name: 'Hvidt', age: 42 },
-        { id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 },
+        { id: 3, first_name: 'Lasse', last_name: 'Boesen', age: 39 },
-        { id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 },
+        { id: 4, first_name: 'Kasper', last_name: 'Hansen', age: 62 },
-        { id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 }
+        { id: 5, first_name: 'Mads', last_name: 'Mikkelsen', age: 31 },
       ],
       bigLineChart: {
         allData: [
           [0, 20, 10, 30, 15, 40, 20, 60, 60],
           [0, 20, 5, 25, 10, 30, 35, 60, 40],
           [0, 2, 5, 7, 10, 30, 15, 9, 10],
-          [0, 2, 5, 7, 10, 14, 29, 78, 120]
+          [0, 2, 5, 7, 10, 14, 29, 78, 120],
         ],
         activeIndex: 0,
         chartData: {
           datasets: [
             {
-              label: "Performance",
+              label: 'Performance',
-              data: [0, 20, 10, 30, 15, 40, 20, 60, 60]
+              data: [0, 20, 10, 30, 15, 40, 20, 60, 60],
-            }
+            },
           ],
-          labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+          labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
         },
-        extraOptions: chartConfigs.blueChartOptions
+        extraOptions: chartConfigs.blueChartOptions,
       },
       redBarChart: {
         chartData: {
-          labels: ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+          labels: ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
           datasets: [
             {
-              label: "Sales",
+              label: 'Sales',
-              data: [25, 20, 30, 22, 17, 29]
+              data: [25, 20, 30, 22, 17, 29],
-            }
+            },
-          ]
+          ],
         },
-        extraOptions: chartConfigs.blueChartOptions
+        extraOptions: chartConfigs.blueChartOptions,
-      }
+      },
-    };
+    }
   },
   methods: {
     TransienceList() {
-      axios.get("/json-example/admin_transience_list.json").then(
+      axios.get('/json-example/admin_transience_list.json').then(
         d => {
           //console.log(d);
-          this.transiencelist = d.data;
+          this.transiencelist = d.data
         },
         error => {
-          console.log(error);
+          console.log(error)
-        }
+        },
-      );
+      )
     },
     TransactionList() {
-      axios.get("/json-example/admin_transaction_list.json").then(
+      axios.get('/json-example/admin_transaction_list.json').then(
         d => {
           //console.log(d);
-          this.transactionlist = d.data;
+          this.transactionlist = d.data
         },
         error => {
-          console.log(error);
+          console.log(error)
-        }
+        },
-      );
+      )
     },
     UserList() {
-      axios.get("/json-example/admin_userlist.json").then(
+      axios.get('/json-example/admin_userlist.json').then(
         d => {
           //console.log(d);
-          this.userlist = d.data;
+          this.userlist = d.data
         },
         error => {
-          console.log(error);
+          console.log(error)
-        }
+        },
-      );
+      )
     },
     CommunityStatistic() {
-      axios.get("/json-example/admin_community_statistic.json").then(
+      axios.get('/json-example/admin_community_statistic.json').then(
         d => {
           //console.log(d);
-          this.communitystatistic = d.data;
+          this.communitystatistic = d.data
         },
         error => {
-          console.log(error);
+          console.log(error)
-        }
+        },
-      );
+      )
     },
     ChartsStatistic() {
-      axios.get("/json-example/admin_charts_statistic.json").then(
+      axios.get('/json-example/admin_charts_statistic.json').then(
         d => {
           //console.log(d);
-          this.chartsstatistic = d.data;
+          this.chartsstatistic = d.data
         },
         error => {
-          console.log(error);
+          console.log(error)
-        }
+        },
-      );
+      )
     },
     CardStatistic() {
-      axios.get("/json-example/admin_card_statistic.json").then(
+      axios.get('/json-example/admin_card_statistic.json').then(
         d => {
           //console.log(d);
-          this.cardstatistic = d.data;
+          this.cardstatistic = d.data
         },
         error => {
-          console.log(error);
+          console.log(error)
-        }
+        },
-      );
+      )
     },
     StatisticDatas() {
-      axios.get("/json-example/admin_statisticdatas.json").then(
+      axios.get('/json-example/admin_statisticdatas.json').then(
         d => {
           //console.log(d);
-          this.userdata = d.data;
+          this.userdata = d.data
         },
         error => {
-          console.log(error);
+          console.log(error)
-        }
+        },
-      );
+      )
     },
     initBigChart(index) {
       let chartData = {
         datasets: [
           {
-            label: "Performance",
+            label: 'Performance',
-            data: this.bigLineChart.allData[index]
+            data: this.bigLineChart.allData[index],
-          }
+          },
         ],
-        labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+        labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-      };
+      }
-      this.bigLineChart.chartData = chartData;
+      this.bigLineChart.chartData = chartData
-      this.bigLineChart.activeIndex = index;
+      this.bigLineChart.activeIndex = index
-    }
+    },
   },
   mounted() {
-    this.initBigChart(0);
+    this.initBigChart(0)
-    this.TransienceList();
+    this.TransienceList()
-    this.TransactionList();
+    this.TransactionList()
-    this.UserList();
+    this.UserList()
-    this.CommunityStatistic();
+    this.CommunityStatistic()
-    this.ChartsStatistic();
+    this.ChartsStatistic()
-    this.CardStatistic();
+    this.CardStatistic()
-  }
+  },
-};
+}
 </script>
 <style>
 .el-table .cell {

frontend/src/views/AdminOverview/AdminUserCreation.vue

@@ -19,11 +19,11 @@
 
             skipDiacritics: true,
             searchFn: mySearchFn,
-            placeholder: 'durchsuche die tabelle'
+            placeholder: 'durchsuche die tabelle',
           }"
           :pagination-options="{
             enabled: true,
-            mode: 'pages'
+            mode: 'pages',
           }"
         >
           <div slot="table-actions">
@@ -61,302 +61,272 @@
 
 <script>
 export default {
-  name: "admin-user-creation",
+  name: 'admin-user-creation',
   data() {
     return {
       creation: {
-        createdAt: "",
+        createdAt: '',
-        group: "",
+        group: '',
-        id: "",
+        id: '',
-        name: "",
+        name: '',
-        originalIndex: "",
+        originalIndex: '',
-        text: "",
+        text: '',
-        vgt_id: ""
+        vgt_id: '',
       },
       columns: [
         {
-          label: "Name",
+          label: 'Name',
-          field: "name"
+          field: 'name',
         },
         {
-          label: "Gruppe",
+          label: 'Gruppe',
-          field: "group",
+          field: 'group',
-          type: "group"
+          type: 'group',
         },
         {
-          label: "eingereicht",
+          label: 'eingereicht',
-          field: "createdAt",
+          field: 'createdAt',
-          type: "date",
+          type: 'date',
-          dateInputFormat: "yyyy-MM-dd",
+          dateInputFormat: 'yyyy-MM-dd',
-          dateOutputFormat: "dd.MM.yyyy"
+          dateOutputFormat: 'dd.MM.yyyy',
         },
         {
-          label: "Text",
+          label: 'Text',
-          field: "text",
+          field: 'text',
-          type: "text"
+          type: 'text',
-        }
+        },
       ],
       rows: [
         {
           id: 1,
-          createdAt: "2021-01-25",
+          createdAt: '2021-01-25',
-          name: "Sellora",
+          name: 'Sellora',
-          group: "gruppe1",
+          group: 'gruppe1',
-          text:
+          text: 'aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 2,
-          createdAt: "2021-01-31",
+          createdAt: '2021-01-31',
-          name: "Jane",
+          name: 'Jane',
-          group: "gruppe14",
+          group: 'gruppe14',
-          text:
+          text: 'WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 3,
-          createdAt: "2021-01-30",
+          createdAt: '2021-01-30',
-          name: "Susan",
+          name: 'Susan',
-          group: "gruppe31",
+          group: 'gruppe31',
-          text:
+          text: 'IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 4,
-          createdAt: "2020-01-11",
+          createdAt: '2020-01-11',
-          name: "Chris",
+          name: 'Chris',
-          group: "gruppe12",
+          group: 'gruppe12',
-          text:
+          text: 'TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 5,
-          createdAt: "2020-12-21",
+          createdAt: '2020-12-21',
-          name: "Dan",
+          name: 'Dan',
-          group: "gruppe11",
+          group: 'gruppe11',
-          text:
+          text: 'Wad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "Wad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 6,
-          createdAt: "2020-12-31",
+          createdAt: '2020-12-31',
-          name: "zBohn",
+          name: 'zBohn',
-          group: "gruppe71",
+          group: 'gruppe71',
-          text:
+          text: 'Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 7,
-          createdAt: "2020-12-31",
+          createdAt: '2020-12-31',
-          name: "xyTellohn",
+          name: 'xyTellohn',
-          group: "gruppe31",
+          group: 'gruppe31',
-          text:
+          text: 'Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 8,
-          createdAt: "2021-01-25",
+          createdAt: '2021-01-25',
-          name: "uSellora",
+          name: 'uSellora',
-          group: "gruppe1",
+          group: 'gruppe1',
-          text:
+          text: 'aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 9,
-          createdAt: "2021-01-31",
+          createdAt: '2021-01-31',
-          name: "yJane",
+          name: 'yJane',
-          group: "gruppe14",
+          group: 'gruppe14',
-          text:
+          text: '55 55 55 WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "55 55 55 WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 10,
-          createdAt: "2021-01-20",
+          createdAt: '2021-01-20',
-          name: "kSusan",
+          name: 'kSusan',
-          group: "gruppe31",
+          group: 'gruppe31',
-          text:
+          text: 'IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 11,
-          createdAt: "2021-01-25",
+          createdAt: '2021-01-25',
-          name: "qSellora",
+          name: 'qSellora',
-          group: "gruppe12",
+          group: 'gruppe12',
-          text:
+          text: 'aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 12,
-          createdAt: "2021-01-31",
+          createdAt: '2021-01-31',
-          name: "fJane",
+          name: 'fJane',
-          group: "gruppe15",
+          group: 'gruppe15',
-          text:
+          text: 'WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 13,
-          createdAt: "2021-01-38",
+          createdAt: '2021-01-38',
-          name: "aSusan",
+          name: 'aSusan',
-          group: "gruppe1",
+          group: 'gruppe1',
-          text:
+          text: 'asssss  IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "asssss  IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 14,
-          createdAt: "2020-01-11",
+          createdAt: '2020-01-11',
-          name: "uChris",
+          name: 'uChris',
-          group: "gruppe12",
+          group: 'gruppe12',
-          text:
+          text: 'TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 15,
-          createdAt: "2020-12-21",
+          createdAt: '2020-12-21',
-          name: "tzDan",
+          name: 'tzDan',
-          group: "gruppe11",
+          group: 'gruppe11',
-          text:
+          text: 'Wad33 23hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "Wad33 23hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 16,
-          createdAt: "2020-12-31",
+          createdAt: '2020-12-31',
-          name: "fBohn",
+          name: 'fBohn',
-          group: "gruppe71",
+          group: 'gruppe71',
-          text:
+          text: '3f Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "3f Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 17,
-          createdAt: "2020-12-31",
+          createdAt: '2020-12-31',
-          name: "aEsau",
+          name: 'aEsau',
-          group: "gruppe15",
+          group: 'gruppe15',
-          text:
+          text: '2324 adhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "2324 adhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 18,
-          createdAt: "2021-01-25",
+          createdAt: '2021-01-25',
-          name: "gSellora",
+          name: 'gSellora',
-          group: "gruppe1",
+          group: 'gruppe1',
-          text:
+          text: '5h aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "5h aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 19,
-          createdAt: "2021-01-31",
+          createdAt: '2021-01-31',
-          name: "sJane",
+          name: 'sJane',
-          group: "gruppe14",
+          group: 'gruppe14',
-          text:
+          text: 'as sdsd WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "as sdsd WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 20,
-          createdAt: "2021-01-30",
+          createdAt: '2021-01-30',
-          name: "oSusan",
+          name: 'oSusan',
-          group: "gruppe31",
+          group: 'gruppe31',
-          text:
+          text: 'sd IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "sd IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 21,
-          createdAt: "2021-01-25",
+          createdAt: '2021-01-25',
-          name: "Sellora",
+          name: 'Sellora',
-          group: "gruppe1",
+          group: 'gruppe1',
-          text:
+          text: '3 aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "3 aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 22,
-          createdAt: "2021-01-13",
+          createdAt: '2021-01-13',
-          name: "rtJane",
+          name: 'rtJane',
-          group: "gruppe14",
+          group: 'gruppe14',
-          text:
+          text: 'q WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "q WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 23,
-          createdAt: "2021-01-16",
+          createdAt: '2021-01-16',
-          name: "rSusan",
+          name: 'rSusan',
-          group: "gruppe31",
+          group: 'gruppe31',
-          text:
+          text: 'Iare YXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "Iare YXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 24,
-          createdAt: "2020-01-15",
+          createdAt: '2020-01-15',
-          name: "sChris",
+          name: 'sChris',
-          group: "gruppe12",
+          group: 'gruppe12',
-          text:
+          text: '43 TZad hhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "43 TZad hhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 25,
-          createdAt: "2020-12-14",
+          createdAt: '2020-12-14',
-          name: "dDan",
+          name: 'dDan',
-          group: "gruppe11",
+          group: 'gruppe11',
-          text:
+          text: 'aas aWad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "aas aWad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 26,
-          createdAt: "2020-12-13",
+          createdAt: '2020-12-13',
-          name: "fBohn",
+          name: 'fBohn',
-          group: "gruppe71",
+          group: 'gruppe71',
-          text:
+          text: 'Ta  adh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "Ta  adh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 27,
-          createdAt: "2020-12-12",
+          createdAt: '2020-12-12',
-          name: "gTellohn",
+          name: 'gTellohn',
-          group: "gruppe31",
+          group: 'gruppe31',
-          text:
+          text: '55 Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "55 Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 28,
-          createdAt: "2021-01-12",
+          createdAt: '2021-01-12',
-          name: "zSellora",
+          name: 'zSellora',
-          group: "gruppe1",
+          group: 'gruppe1',
-          text:
+          text: 'e q raASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "e q raASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 29,
-          createdAt: "2021-01-12",
+          createdAt: '2021-01-12',
-          name: "uJane",
+          name: 'uJane',
-          group: "gruppe14",
+          group: 'gruppe14',
-          text:
+          text: 'erW QadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "erW QadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
         },
         {
           id: 30,
-          createdAt: "2021-01-11",
+          createdAt: '2021-01-11',
-          name: "iSusan",
+          name: 'iSusan',
-          group: "gruppe31",
+          group: 'gruppe31',
-          text:
+          text: '3IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-            "3IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
-        }
+      ],
-      ]
+    }
-    };
   },
   methods: {
     onRowClick(params) {
-      console.log("onRowClick", params.row.createdAt);
+      console.log('onRowClick', params.row.createdAt)
-      console.log("onRowClick", params.row.group);
+      console.log('onRowClick', params.row.group)
-      console.log("onRowClick", params.row.id);
+      console.log('onRowClick', params.row.id)
-      console.log("onRowClick", params.row.name);
+      console.log('onRowClick', params.row.name)
-      console.log("onRowClick", params.row.originalIndex);
+      console.log('onRowClick', params.row.originalIndex)
-      console.log("onRowClick", params.row.text);
+      console.log('onRowClick', params.row.text)
-      console.log("onRowClick", params.row.vgt_id);
+      console.log('onRowClick', params.row.vgt_id)
 
-      this.creation.createdAt = params.row.createdAt;
+      this.creation.createdAt = params.row.createdAt
-      this.creation.group = params.row.group;
+      this.creation.group = params.row.group
-      this.creation.id = params.row.id;
+      this.creation.id = params.row.id
-      this.creation.name = params.row.name;
+      this.creation.name = params.row.name
-      this.creation.originalIndex = params.row.originalIndex;
+      this.creation.originalIndex = params.row.originalIndex
-      this.creation.text = params.row.text;
+      this.creation.text = params.row.text
-      this.creation.vgt_id = params.row.vgt_id;
+      this.creation.vgt_id = params.row.vgt_id
 
       // params.row - row object
       // params.pageIndex - index of this row on the current page.
@@ -365,13 +335,13 @@ export default {
       // params.event - click event
     },
     onSearch(params) {
-      console.log("onSearch", params);
+      console.log('onSearch', params)
       // params.searchTerm - term being searched for
       // params.rowCount - number of rows that match search
     },
     mySearchFn(params) {
       //console.log("mySearchFn", params)
-    }
+    },
-  }
+  },
-};
+}
 </script>

frontend/src/views/AdminOverview/AdminUserSearch.vue

@@ -18,11 +18,11 @@
             enabled: true,
             skipDiacritics: true,
             searchFn: mySearchFn,
-            placeholder: 'durchsuche die tabelle'
+            placeholder: 'durchsuche die tabelle',
           }"
           :pagination-options="{
             enabled: true,
-            mode: 'pages'
+            mode: 'pages',
           }"
         >
           <div slot="table-actions">
@@ -54,10 +54,7 @@
                 </b-col>
               </b-row>
               <b-row class="">
-                <label
+                <label for="example-email-input" class="col-md-3 col-form-label form-control-label">
-                  for="example-email-input"
-                  class="col-md-3 col-form-label form-control-label"
-                >
                   Email
                 </label>
                 <b-col md="10">
@@ -88,11 +85,7 @@
                 <h3 class="mb-0">Mitglied Daten</h3>
               </b-col>
               <b-col class="text-right">
-                <a
+                <a href="#!" @click="showNewUser = true" class="btn btn-sm btn-warning">
-                  href="#!"
-                  @click="showNewUser = true"
-                  class="btn btn-sm btn-warning"
-                >
                   schliesen
                 </a>
               </b-col>
@@ -114,10 +107,7 @@
                 </b-col>
               </b-row>
               <b-row class="">
-                <label
+                <label for="example-email-input" class="col-md-3 col-form-label form-control-label">
-                  for="example-email-input"
-                  class="col-md-3 col-form-label form-control-label"
-                >
                   Email
                 </label>
                 <b-col md="10">
@@ -147,107 +137,107 @@
 
 <script>
 export default {
-  name: "admin-user-search",
+  name: 'admin-user-search',
   data() {
     return {
       showNewUser: true,
       formSetUser: {
-        name: "",
+        name: '',
-        email: "",
+        email: '',
-        group: ""
+        group: '',
       },
       formGetUser: {
-        name: "",
+        name: '',
-        email: "",
+        email: '',
-        group: ""
+        group: '',
       },
       columns: [
         {
-          label: "Name",
+          label: 'Name',
-          field: "name"
+          field: 'name',
         },
         {
-          label: "E-Mail",
+          label: 'E-Mail',
-          field: "email",
+          field: 'email',
-          type: "email"
+          type: 'email',
         },
         {
-          label: "Mitglied seid",
+          label: 'Mitglied seid',
-          field: "createdAt",
+          field: 'createdAt',
-          type: "date",
+          type: 'date',
-          dateInputFormat: "yyyy-MM-dd",
+          dateInputFormat: 'yyyy-MM-dd',
-          dateOutputFormat: "dd.MM.yyyy"
+          dateOutputFormat: 'dd.MM.yyyy',
         },
         {
-          label: "Gruppe",
+          label: 'Gruppe',
-          field: "group",
+          field: 'group',
-          type: "group"
+          type: 'group',
-        }
+        },
       ],
       rows: [
         {
           id: 1,
-          name: "John",
+          name: 'John',
-          email: "temail@tutanota.com",
+          email: 'temail@tutanota.com',
-          createdAt: "1976-10-25",
+          createdAt: '1976-10-25',
-          group: "gruppe1"
+          group: 'gruppe1',
         },
         {
           id: 2,
-          name: "Jane",
+          name: 'Jane',
-          email: "temail@tutanota.com",
+          email: 'temail@tutanota.com',
-          createdAt: "2011-10-31",
+          createdAt: '2011-10-31',
-          group: "gruppe2"
+          group: 'gruppe2',
         },
         {
           id: 3,
-          name: "Susan",
+          name: 'Susan',
-          email: "temail@tutanota.com",
+          email: 'temail@tutanota.com',
-          createdAt: "2011-10-30",
+          createdAt: '2011-10-30',
-          group: "gruppe4"
+          group: 'gruppe4',
         },
         {
           id: 4,
-          name: "Chris",
+          name: 'Chris',
-          email: "temail@tutanota.com",
+          email: 'temail@tutanota.com',
-          createdAt: "2011-10-11",
+          createdAt: '2011-10-11',
-          group: "gruppe3"
+          group: 'gruppe3',
         },
         {
           id: 5,
-          name: "Dan",
+          name: 'Dan',
-          email: "temail@tutanota.com",
+          email: 'temail@tutanota.com',
-          createdAt: "2011-10-21",
+          createdAt: '2011-10-21',
-          group: "gruppe1"
+          group: 'gruppe1',
         },
         {
           id: 6,
-          name: "Bohn",
+          name: 'Bohn',
-          email: "temail@tutanota.com",
+          email: 'temail@tutanota.com',
-          createdAt: "2011-10-31",
+          createdAt: '2011-10-31',
-          group: "gruppe2"
+          group: 'gruppe2',
         },
         {
           id: 7,
-          name: "Tellohn",
+          name: 'Tellohn',
-          email: "temail@tutanota.com",
+          email: 'temail@tutanota.com',
-          createdAt: "2009-10-31",
+          createdAt: '2009-10-31',
-          group: "gruppe2"
+          group: 'gruppe2',
         },
         {
           id: 7,
-          name: "Tellohn",
+          name: 'Tellohn',
-          email: "temail@tutanota.com",
+          email: 'temail@tutanota.com',
-          createdAt: "2009-10-31",
+          createdAt: '2009-10-31',
-          group: "gruppe5"
+          group: 'gruppe5',
-        }
+        },
-      ]
+      ],
-    };
+    }
   },
   methods: {
     onRowClick(params) {
-      console.log(params.row);
+      console.log(params.row)
-      this.showNewUser = false;
+      this.showNewUser = false
       // params.row - row object
       // params.pageIndex - index of this row on the current page.
       // params.selected - if selection is enabled this argument
@@ -255,7 +245,7 @@ export default {
       // params.event - click event
     },
     onSearch(params) {
-      console.log(params);
+      console.log(params)
       // params.searchTerm - term being searched for
       // params.rowCount - number of rows that match search
     },
@@ -264,18 +254,18 @@ export default {
     },
     validateEmail(value) {
       if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value)) {
-        this.msg["email"] = "";
+        this.msg['email'] = ''
       } else {
-        this.msg["email"] = "Invalid Email Address";
+        this.msg['email'] = 'Invalid Email Address'
       }
-    }
+    },
   },
   watch: {
     mail(value) {
       // binding this to the data value in the email input
-      this.email = value;
+      this.email = value
-      this.validateEmail(value);
+      this.validateEmail(value)
-    }
+    },
-  }
+  },
-};
+}
 </script>

frontend/src/views/AdminOverview/default.vue

@@ -6,11 +6,11 @@
 
 <script>
 export default {
-  name: "default",
+  name: 'default',
   data() {
-    return {};
+    return {}
   },
   methods: {},
-  watch: {}
+  watch: {},
-};
+}
 </script>

frontend/src/views/Dashboard.vue

@@ -112,11 +112,7 @@
               </b-col>
             </b-row>
 
-            <bar-chart
+            <bar-chart :height="350" ref="barChart" :chart-data="redBarChart.chartData"></bar-chart>
-              :height="350"
-              ref="barChart"
-              :chart-data="redBarChart.chartData"
-            ></bar-chart>
           </card>
         </b-col>
       </b-row>
@@ -137,17 +133,17 @@
 </template>
 <script>
 // Charts
-import * as chartConfigs from "@/components/Charts/config";
+import * as chartConfigs from '@/components/Charts/config'
-import LineChart from "@/components/Charts/LineChart";
+import LineChart from '@/components/Charts/LineChart'
-import BarChart from "@/components/Charts/BarChart";
+import BarChart from '@/components/Charts/BarChart'
 
 // Components
-import BaseProgress from "@/components/BaseProgress";
+import BaseProgress from '@/components/BaseProgress'
-import StatsCard from "@/components/Cards/StatsCard";
+import StatsCard from '@/components/Cards/StatsCard'
 
 // Tables
-import SocialTrafficTable from "./Dashboard/SocialTrafficTable";
+import SocialTrafficTable from './Dashboard/SocialTrafficTable'
-import PageVisitsTable from "./Dashboard/PageVisitsTable";
+import PageVisitsTable from './Dashboard/PageVisitsTable'
 
 export default {
   components: {
@@ -156,60 +152,60 @@ export default {
     //BaseProgress,
     StatsCard,
     PageVisitsTable,
-    SocialTrafficTable
+    SocialTrafficTable,
   },
   data() {
     return {
       bigLineChart: {
         allData: [
           [0, 20, 10, 30, 15, 40, 20, 60, 60],
-          [0, 20, 5, 25, 10, 30, 15, 40, 40]
+          [0, 20, 5, 25, 10, 30, 15, 40, 40],
         ],
         activeIndex: 0,
         chartData: {
           datasets: [
             {
-              label: "Performance",
+              label: 'Performance',
-              data: [0, 20, 10, 30, 15, 40, 20, 60, 60]
+              data: [0, 20, 10, 30, 15, 40, 20, 60, 60],
-            }
+            },
           ],
-          labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+          labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
         },
-        extraOptions: chartConfigs.blueChartOptions
+        extraOptions: chartConfigs.blueChartOptions,
       },
       redBarChart: {
         chartData: {
-          labels: ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+          labels: ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
           datasets: [
             {
-              label: "Sales",
+              label: 'Sales',
-              data: [25, 20, 30, 22, 17, 29]
+              data: [25, 20, 30, 22, 17, 29],
-            }
+            },
-          ]
+          ],
         },
-        extraOptions: chartConfigs.blueChartOptions
+        extraOptions: chartConfigs.blueChartOptions,
-      }
+      },
-    };
+    }
   },
   methods: {
     initBigChart(index) {
       let chartData = {
         datasets: [
           {
-            label: "Performance",
+            label: 'Performance',
-            data: this.bigLineChart.allData[index]
+            data: this.bigLineChart.allData[index],
-          }
+          },
         ],
-        labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+        labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-      };
+      }
-      this.bigLineChart.chartData = chartData;
+      this.bigLineChart.chartData = chartData
-      this.bigLineChart.activeIndex = index;
+      this.bigLineChart.activeIndex = index
-    }
+    },
   },
   mounted() {
-    this.initBigChart(0);
+    this.initBigChart(0)
-  }
+  },
-};
+}
 </script>
 <style>
 .el-table .cell {

frontend/src/views/Dashboard/GoodTable.vue

@@ -17,11 +17,11 @@
             skipDiacritics: true,
             searchFn: mySearchFn,
             placeholder: 'durchsuche die tabelle',
-            externalQuery: searchQuery
+            externalQuery: searchQuery,
           }"
           :pagination-options="{
             enabled: true,
-            mode: 'pages'
+            mode: 'pages',
           }"
         >
           <div slot="table-actions">
@@ -38,101 +38,101 @@
 </template>
 
 <script>
-import SocialTrafficTable from "./SocialTrafficTable";
+import SocialTrafficTable from './SocialTrafficTable'
 
 export default {
-  name: "my-component",
+  name: 'my-component',
   components: {
-    SocialTrafficTable
+    SocialTrafficTable,
   },
   data() {
     return {
       columns: [
         {
-          label: "Name",
+          label: 'Name',
-          field: "name"
+          field: 'name',
         },
         {
-          label: "Alter",
+          label: 'Alter',
-          field: "age",
+          field: 'age',
-          type: "number"
+          type: 'number',
         },
         {
-          label: "Mitglied seid",
+          label: 'Mitglied seid',
-          field: "createdAt",
+          field: 'createdAt',
-          type: "date",
+          type: 'date',
-          dateInputFormat: "yyyy-MM-dd",
+          dateInputFormat: 'yyyy-MM-dd',
-          dateOutputFormat: "dd.MM.yyyy"
+          dateOutputFormat: 'dd.MM.yyyy',
         },
         {
-          label: "Prozent",
+          label: 'Prozent',
-          field: "score",
+          field: 'score',
-          type: "percentage"
+          type: 'percentage',
-        }
+        },
       ],
       rows: [
         {
           id: 1,
-          name: "John",
+          name: 'John',
           age: 20,
-          createdAt: "1976-10-25",
+          createdAt: '1976-10-25',
-          score: 0.03343
+          score: 0.03343,
         },
         {
           id: 2,
-          name: "Jane",
+          name: 'Jane',
           age: 24,
-          createdAt: "2011-10-31",
+          createdAt: '2011-10-31',
-          score: 0.03343
+          score: 0.03343,
         },
         {
           id: 3,
-          name: "Susan",
+          name: 'Susan',
           age: 16,
-          createdAt: "2011-10-30",
+          createdAt: '2011-10-30',
-          score: 0.03343
+          score: 0.03343,
         },
         {
           id: 4,
-          name: "Chris",
+          name: 'Chris',
           age: 55,
-          createdAt: "2011-10-11",
+          createdAt: '2011-10-11',
-          score: 0.03343
+          score: 0.03343,
         },
         {
           id: 5,
-          name: "Dan",
+          name: 'Dan',
           age: 40,
-          createdAt: "2011-10-21",
+          createdAt: '2011-10-21',
-          score: 0.03343
+          score: 0.03343,
         },
         {
           id: 6,
-          name: "Bohn",
+          name: 'Bohn',
           age: 70,
-          createdAt: "2011-10-31",
+          createdAt: '2011-10-31',
-          score: 0.03343
+          score: 0.03343,
         },
         {
           id: 7,
-          name: "Tellohn",
+          name: 'Tellohn',
           age: 56,
-          createdAt: "2009-10-31",
+          createdAt: '2009-10-31',
-          score: 0.13343
+          score: 0.13343,
         },
         {
           id: 7,
-          name: "Tellohn",
+          name: 'Tellohn',
           age: 56,
-          createdAt: "2009-10-31",
+          createdAt: '2009-10-31',
-          score: 0.03343
+          score: 0.03343,
-        }
+        },
-      ]
+      ],
-    };
+    }
   },
   methods: {
     onRowClick(params) {
-      console.log(params);
+      console.log(params)
       // params.row - row object
       // params.pageIndex - index of this row on the current page.
       // params.selected - if selection is enabled this argument
@@ -140,13 +140,13 @@ export default {
       // params.event - click event
     },
     onSearch(params) {
-      console.log(params);
+      console.log(params)
       // params.searchTerm - term being searched for
       // params.rowCount - number of rows that match search
     },
     mySearchFn(params) {
-      console.log(params);
+      console.log(params)
-    }
+    },
-  }
+  },
-};
+}
 </script>

frontend/src/views/Dashboard/PageVisitsTable.vue

@@ -11,26 +11,14 @@
       </b-row>
     </template>
 
-    <el-table
+    <el-table class="table-responsive table" :data="tableData" header-row-class-name="thead-light">
-      class="table-responsive table"
-      :data="tableData"
-      header-row-class-name="thead-light"
-    >
       <el-table-column label="Page name" min-width="130px" prop="page">
         <template v-slot="{ row }">
           <div class="font-weight-600">{{ row.page }}</div>
         </template>
       </el-table-column>
-      <el-table-column
+      <el-table-column label="Visitors" min-width="70px" prop="visitors"></el-table-column>
-        label="Visitors"
+      <el-table-column label="Unique users" min-width="90px" prop="unique"></el-table-column>
-        min-width="70px"
-        prop="visitors"
-      ></el-table-column>
-      <el-table-column
-        label="Unique users"
-        min-width="90px"
-        prop="unique"
-      ></el-table-column>
 
       <el-table-column label="Bounce rate" min-width="90px" prop="bounceRate">
         <template v-slot="{ row }">
@@ -41,58 +29,52 @@
   </b-card>
 </template>
 <script>
-import {
+import { Table, TableColumn, DropdownMenu, DropdownItem, Dropdown } from 'element-ui'
-  Table,
-  TableColumn,
-  DropdownMenu,
-  DropdownItem,
-  Dropdown
-} from "element-ui";
 export default {
-  name: "page-visits-table",
+  name: 'page-visits-table',
   components: {
     [Table.name]: Table,
     [TableColumn.name]: TableColumn,
     [Dropdown.name]: Dropdown,
     [DropdownItem.name]: DropdownItem,
-    [DropdownMenu.name]: DropdownMenu
+    [DropdownMenu.name]: DropdownMenu,
   },
   data() {
     return {
       tableData: [
         {
-          page: "/argon/",
+          page: '/argon/',
-          visitors: "4,569",
+          visitors: '4,569',
-          unique: "340",
+          unique: '340',
-          bounceRate: "46,53%"
+          bounceRate: '46,53%',
         },
         {
-          page: "/argon/index.html",
+          page: '/argon/index.html',
-          visitors: "3,985",
+          visitors: '3,985',
-          unique: "319",
+          unique: '319',
-          bounceRate: "46,53%"
+          bounceRate: '46,53%',
         },
         {
-          page: "/argon/charts.html",
+          page: '/argon/charts.html',
-          visitors: "3,513",
+          visitors: '3,513',
-          unique: "294",
+          unique: '294',
-          bounceRate: "36,49%"
+          bounceRate: '36,49%',
         },
         {
-          page: "/argon/tables.html",
+          page: '/argon/tables.html',
-          visitors: "2,050",
+          visitors: '2,050',
-          unique: "147",
+          unique: '147',
-          bounceRate: "50,87%"
+          bounceRate: '50,87%',
         },
         {
-          page: "/argon/profile.html",
+          page: '/argon/profile.html',
-          visitors: "1,795",
+          visitors: '1,795',
-          unique: "190",
+          unique: '190',
-          bounceRate: "46,53%"
+          bounceRate: '46,53%',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/views/Dashboard/SocialTrafficTable.vue

@@ -11,22 +11,14 @@
       </b-row>
     </template>
 
-    <el-table
+    <el-table class="table-responsive table" :data="tableData" header-row-class-name="thead-light">
-      class="table-responsive table"
-      :data="tableData"
-      header-row-class-name="thead-light"
-    >
       <el-table-column label="Referral" min-width="115px" prop="name">
         <template v-slot="{ row }">
           <div class="font-weight-600">{{ row.name }}</div>
         </template>
       </el-table-column>
 
-      <el-table-column
+      <el-table-column label="Visitors" min-width="110px" prop="visitors"></el-table-column>
-        label="Visitors"
-        min-width="110px"
-        prop="visitors"
-      ></el-table-column>
 
       <el-table-column min-width="220px" prop="progress">
         <template v-slot="{ row }">
@@ -40,60 +32,54 @@
   </b-card>
 </template>
 <script>
-import { BaseProgress } from "@/components";
+import { BaseProgress } from '@/components'
-import {
+import { Table, TableColumn, DropdownMenu, DropdownItem, Dropdown } from 'element-ui'
-  Table,
-  TableColumn,
-  DropdownMenu,
-  DropdownItem,
-  Dropdown
-} from "element-ui";
 export default {
-  name: "social-traffic-table",
+  name: 'social-traffic-table',
   components: {
     BaseProgress,
     [Table.name]: Table,
     [TableColumn.name]: TableColumn,
     [Dropdown.name]: Dropdown,
     [DropdownItem.name]: DropdownItem,
-    [DropdownMenu.name]: DropdownMenu
+    [DropdownMenu.name]: DropdownMenu,
   },
   data() {
     return {
       tableData: [
         {
-          name: "Facebook",
+          name: 'Facebook',
-          visitors: "1,480",
+          visitors: '1,480',
           progress: 60,
-          progressType: "gradient-danger"
+          progressType: 'gradient-danger',
         },
         {
-          name: "LinkedIn",
+          name: 'LinkedIn',
-          visitors: "5,480",
+          visitors: '5,480',
           progress: 70,
-          progressType: "gradient-success"
+          progressType: 'gradient-success',
         },
         {
-          name: "Google",
+          name: 'Google',
-          visitors: "4,807",
+          visitors: '4,807',
           progress: 80,
-          progressType: "gradient-primary"
+          progressType: 'gradient-primary',
         },
         {
-          name: "Instagram",
+          name: 'Instagram',
-          visitors: "3,678",
+          visitors: '3,678',
           progress: 75,
-          progressType: "gradient-info"
+          progressType: 'gradient-info',
         },
         {
-          name: "Twitter",
+          name: 'Twitter',
-          visitors: "2,645",
+          visitors: '2,645',
           progress: 30,
-          progressType: "gradient-warning"
+          progressType: 'gradient-warning',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/views/GoogleMaps.vue

@@ -66,11 +66,7 @@
       <b-row>
         <b-col>
           <b-card no-body class="border-0">
-            <div
+            <div id="map-custom" class="map-canvas" style="height: 600px;"></div>
-              id="map-custom"
-              class="map-canvas"
-              style="height: 600px;"
-            ></div>
           </b-card>
         </b-col>
       </b-row>
@@ -78,10 +74,10 @@
   </div>
 </template>
 <script>
-import { API_KEY } from "./Maps/API_KEY";
+import { API_KEY } from './Maps/API_KEY'
-import GoogleMapsLoader from "google-maps";
+import GoogleMapsLoader from 'google-maps'
 
-GoogleMapsLoader.KEY = API_KEY;
+GoogleMapsLoader.KEY = API_KEY
 
 export default {
   methods: {
@@ -89,10 +85,10 @@ export default {
       let map,
         lat = 40.748817,
         lng = -73.985428,
-        color = "#5e72e4";
+        color = '#5e72e4'
-      map = document.getElementById("map-custom");
+      map = document.getElementById('map-custom')
 
-      let myLatlng = new google.maps.LatLng(lat, lng);
+      let myLatlng = new google.maps.LatLng(lat, lng)
       let mapOptions = {
         zoom: 12,
         scrollwheel: false,
@@ -100,74 +96,74 @@ export default {
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         styles: [
           {
-            featureType: "administrative",
+            featureType: 'administrative',
-            elementType: "labels.text.fill",
+            elementType: 'labels.text.fill',
-            stylers: [{ color: "#444444" }]
+            stylers: [{ color: '#444444' }],
           },
           {
-            featureType: "landscape",
+            featureType: 'landscape',
-            elementType: "all",
+            elementType: 'all',
-            stylers: [{ color: "#f2f2f2" }]
+            stylers: [{ color: '#f2f2f2' }],
           },
           {
-            featureType: "poi",
+            featureType: 'poi',
-            elementType: "all",
+            elementType: 'all',
-            stylers: [{ visibility: "off" }]
+            stylers: [{ visibility: 'off' }],
           },
           {
-            featureType: "road",
+            featureType: 'road',
-            elementType: "all",
+            elementType: 'all',
-            stylers: [{ saturation: -100 }, { lightness: 45 }]
+            stylers: [{ saturation: -100 }, { lightness: 45 }],
           },
           {
-            featureType: "road.highway",
+            featureType: 'road.highway',
-            elementType: "all",
+            elementType: 'all',
-            stylers: [{ visibility: "simplified" }]
+            stylers: [{ visibility: 'simplified' }],
           },
           {
-            featureType: "road.arterial",
+            featureType: 'road.arterial',
-            elementType: "labels.icon",
+            elementType: 'labels.icon',
-            stylers: [{ visibility: "off" }]
+            stylers: [{ visibility: 'off' }],
           },
           {
-            featureType: "transit",
+            featureType: 'transit',
-            elementType: "all",
+            elementType: 'all',
-            stylers: [{ visibility: "off" }]
+            stylers: [{ visibility: 'off' }],
           },
           {
-            featureType: "water",
+            featureType: 'water',
-            elementType: "all",
+            elementType: 'all',
-            stylers: [{ color: color }, { visibility: "on" }]
+            stylers: [{ color: color }, { visibility: 'on' }],
-          }
+          },
-        ]
+        ],
-      };
+      }
 
-      map = new google.maps.Map(map, mapOptions);
+      map = new google.maps.Map(map, mapOptions)
 
       let marker = new google.maps.Marker({
         position: myLatlng,
         map: map,
         animation: google.maps.Animation.DROP,
-        title: "Hello World!"
+        title: 'Hello World!',
-      });
+      })
 
       let contentString =
         '<div class="info-window-content"><h2>Argon Dashboard PRO</h2>' +
-        "<p>A beautiful premium dashboard for Bootstrap 4.</p></div>";
+        '<p>A beautiful premium dashboard for Bootstrap 4.</p></div>'
 
       let infowindow = new google.maps.InfoWindow({
-        content: contentString
+        content: contentString,
-      });
+      })
 
-      google.maps.event.addListener(marker, "click", function() {
+      google.maps.event.addListener(marker, 'click', function() {
-        infowindow.open(map, marker);
+        infowindow.open(map, marker)
-      });
+      })
-    }
+    },
   },
   mounted() {
     GoogleMapsLoader.load(google => {
-      this.initMap(google);
+      this.initMap(google)
-    });
+    })
-  }
+  },
-};
+}
 </script>

frontend/src/views/Icons.vue

@@ -1592,24 +1592,24 @@
   </div>
 </template>
 <script>
-import Vue from "vue";
+import Vue from 'vue'
-import VueClipboard from "vue-clipboard2";
+import VueClipboard from 'vue-clipboard2'
-import BaseHeader from "@/components/BaseHeader";
+import BaseHeader from '@/components/BaseHeader'
 
-Vue.use(VueClipboard);
+Vue.use(VueClipboard)
 export default {
-  name: "icons",
+  name: 'icons',
   components: {
-    BaseHeader
+    BaseHeader,
   },
   methods: {
     onCopy() {
       this.$notify({
-        type: "info",
+        type: 'info',
-        message: "Copied to clipboard"
+        message: 'Copied to clipboard',
-      });
+      })
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/views/KontoOverview.vue

@@ -25,25 +25,25 @@
   </div>
 </template>
 <script>
-import GddStatus from "./KontoOverview/GddStatus.vue";
+import GddStatus from './KontoOverview/GddStatus.vue'
-import GddSend from "./KontoOverview/GddSend.vue";
+import GddSend from './KontoOverview/GddSend.vue'
-import GddTable from "./KontoOverview/GddTable.vue";
+import GddTable from './KontoOverview/GddTable.vue'
 // import GddAddWork2  from './KontoOverview/GddAddWork2.vue';
 // import GddWorkTable from './KontoOverview/GddWorkTable.vue';
 
 export default {
-  name: "Overview",
+  name: 'Overview',
   components: {
     GddStatus,
     GddSend,
-    GddTable
+    GddTable,
     //GddAddWork2,
     //GddWorkTable
   },
   created() {
-    this.$store.dispatch("accountBalance", $cookies.get("gdd_session_id"));
+    this.$store.dispatch('accountBalance', $cookies.get('gdd_session_id'))
-  }
+  },
-};
+}
 </script>
 
 <style>

frontend/src/views/KontoOverview/GddAddWork.vue

@@ -5,7 +5,7 @@
         <base-button icon type="info" size="lg" v-b-toggle.collapse-2>
           <span class="btn-inner--icon"><i class="ni ni-fat-add"></i></span>
           <span class="btn-inner--text">
-            {{ $t("site.overview.add_work") }}
+            {{ $t('site.overview.add_work') }}
           </span>
         </base-button>
         <b-collapse id="collapse-2" class="mt-2">
@@ -62,12 +62,7 @@
                     Stunden
                   </label>
                   <b-col md="10">
-                    <base-input
+                    <base-input type="text" v-model="form.hours" disabled class="form-control-lg" />
-                      type="text"
-                      v-model="form.hours"
-                      disabled
-                      class="form-control-lg"
-                    />
                   </b-col>
                 </b-row>
                 <b-row class="form-group">
@@ -87,9 +82,7 @@
                   </b-col>
                 </b-row>
                 <b-row class="form-group">
-                  <label
+                  <label class="col-md-2 col-form-label form-control-label form-control-lg">
-                    class="col-md-2 col-form-label form-control-label form-control-lg"
-                  >
                     Ort
                   </label>
                   <b-col md="10">
@@ -101,9 +94,7 @@
                   </b-col>
                 </b-row>
                 <b-row class="form-group">
-                  <label
+                  <label class="col-md-2 col-form-label form-control-label form-control-lg">
-                    class="col-md-2 col-form-label form-control-label form-control-lg"
-                  >
                     Kategorie
                   </label>
                   <b-col md="10">
@@ -125,9 +116,7 @@
                   ></textarea>
                 </base-input>
                 <b-row class="form-group">
-                  <label
+                  <label class="col-md-2 col-form-label form-control-label form-control-lg">
-                    class="col-md-2 col-form-label form-control-label form-control-lg"
-                  >
                     Tätigkeit
                   </label>
                   <b-col md="8">
@@ -166,59 +155,56 @@
 
 <script>
 export default {
-  name: "GDDAddWork",
+  name: 'GDDAddWork',
   data() {
     return {
       show: true,
       form: {
-        from: "",
+        from: '',
-        to: "",
+        to: '',
-        hours: "",
+        hours: '',
-        text: "",
+        text: '',
         gdd: 0.0,
-        location: "",
+        location: '',
-        text2: "",
+        text2: '',
-        sendtime: ""
+        sendtime: '',
       },
-      timestamp: ""
+      timestamp: '',
-    };
+    }
   },
   created() {
-    setInterval(this.getNow, 2000);
+    setInterval(this.getNow, 2000)
   },
   methods: {
     dateDiff() {
-      this.form.hours =
+      this.form.hours = (this.$moment(this.form.to) - this.$moment(this.form.from)) / 1000 / 3600
-        (this.$moment(this.form.to) - this.$moment(this.form.from)) /
-        1000 /
-        3600;
     },
     getNow: function() {
       //const today = new Date()
       //const date = today.getDate()+'.'+(today.getMonth()+1)+'.'+ today.getFullYear();
       //const time = today.getHours() + ":" + today.getMinutes();
       //const dateTime = date +', '+ time;
-      this.timestamp = new Date();
+      this.timestamp = new Date()
     },
     onSubmit(event) {
-      event.preventDefault();
+      event.preventDefault()
-      console.log("onSUBMIT this.form.from >>>>", this.form.from);
+      console.log('onSUBMIT this.form.from >>>>', this.form.from)
-      console.log("onSUBMIT this.form.from >>>>", this.$moment(this.form.from));
+      console.log('onSUBMIT this.form.from >>>>', this.$moment(this.form.from))
-      console.log("onSUBMIT this.form.to >>>>", this.form.to);
+      console.log('onSUBMIT this.form.to >>>>', this.form.to)
       // console.log("onSUBMIT >>>>", this.getHours(this.form.from, this.form.to))
-      this.form.sendtime = new Date();
+      this.form.sendtime = new Date()
-      alert(JSON.stringify(this.form));
+      alert(JSON.stringify(this.form))
     },
     onReset(event) {
-      event.preventDefault();
+      event.preventDefault()
       // Reset our form values
 
       // Trick to reset/clear native browser form validation state
-      this.show = false;
+      this.show = false
       this.$nextTick(() => {
-        this.show = true;
+        this.show = true
-      });
+      })
-    }
+    },
-  }
+  },
-};
+}
 </script>

frontend/src/views/KontoOverview/GddAddWork2.vue

@@ -8,38 +8,24 @@
               <b-form-input type="number" placeholder="23" />
             </base-input>
             <base-input label="Datum / Zeitraum">
-              <flat-pickr
+              <flat-pickr class="form-control" v-model="date" :config="config"></flat-pickr>
-                class="form-control"
-                v-model="date"
-                :config="config"
-              ></flat-pickr>
             </base-input>
           </b-col>
           <b-col cols="9">
             <base-input label="Arbeitsreport">
-              <textarea
+              <textarea class="form-control" rows="5" @focus="textFocus"></textarea>
-                class="form-control"
-                rows="5"
-                @focus="textFocus"
-              ></textarea>
             </base-input>
           </b-col>
         </b-row>
         <b-row>
           <b-col>
-            <button
+            <button class="btn btn-info text-right" @click.prevent="newWorkForm">
-              class="btn btn-info text-right"
-              @click.prevent="newWorkForm"
-            >
               weiteren Report hinzufügen
             </button>
           </b-col>
           <b-col>
             <div class="text-right">
-              <button
+              <button class="btn btn-info text-right" @click.prevent="submitForm2">
-                class="btn btn-info text-right"
-                @click.prevent="submitForm2"
-              >
                 save new Report
               </button>
             </div>
@@ -54,38 +40,24 @@
               <b-form-input type="number" placeholder="23" />
             </base-input>
             <base-input label="Datum / Zeitraum">
-              <flat-pickr
+              <flat-pickr class="form-control" v-model="date" :config="lastConfig"></flat-pickr>
-                class="form-control"
-                v-model="date"
-                :config="lastConfig"
-              ></flat-pickr>
             </base-input>
           </b-col>
           <b-col cols="9">
             <base-input label="Arbeitsreport">
-              <textarea
+              <textarea class="form-control" rows="5" @focus="textFocus"></textarea>
-                class="form-control"
-                rows="5"
-                @focus="textFocus"
-              ></textarea>
             </base-input>
           </b-col>
         </b-row>
         <b-row>
           <b-col>
-            <button
+            <button class="btn btn-warning text-right" @click.prevent="newWorkForm">
-              class="btn btn-warning text-right"
-              @click.prevent="newWorkForm"
-            >
               + weiteren Report hinzufügen
             </button>
           </b-col>
           <b-col>
             <div class="text-right">
-              <button
+              <button class="btn btn-info text-right" @click.prevent="submitForm2">
-                class="btn btn-info text-right"
-                @click.prevent="submitForm2"
-              >
                 save new Report
               </button>
             </div>
@@ -97,8 +69,8 @@
 
         <p>
           Du hast diesen Monat
-          {{ stundenSumme > 0 ? "schon " : "noch keine" }}
+          {{ stundenSumme > 0 ? 'schon ' : 'noch keine' }}
-          {{ stundenSumme > 0 ? "" + stundenSumme : "" }}
+          {{ stundenSumme > 0 ? '' + stundenSumme : '' }}
           Stunden eingetragen
         </p>
       </b-tab>
@@ -119,29 +91,19 @@
           </b-col>
           <b-col cols="9">
             <base-input label="Arbeitsreport">
-              <textarea
+              <textarea class="form-control" rows="5" @focus="textFocus"></textarea>
-                class="form-control"
-                rows="5"
-                @focus="textFocus"
-              ></textarea>
             </base-input>
           </b-col>
         </b-row>
         <b-row>
           <b-col>
-            <button
+            <button class="btn btn-warning text-right" @click.prevent="newWorkForm">
-              class="btn btn-warning text-right"
-              @click.prevent="newWorkForm"
-            >
               + weiteren Report hinzufügen
             </button>
           </b-col>
           <b-col>
             <div class="text-right">
-              <button
+              <button class="btn btn-info text-right" @click.prevent="submitForm3">
-                class="btn btn-info text-right"
-                @click.prevent="submitForm3"
-              >
                 save new Report
               </button>
             </div>
@@ -157,49 +119,49 @@
 </template>
 
 <script>
-import flatPickr from "vue-flatpickr-component";
+import flatPickr from 'vue-flatpickr-component'
-import "flatpickr/dist/flatpickr.css";
+import 'flatpickr/dist/flatpickr.css'
 
 export default {
-  name: "GDDAddWork2",
+  name: 'GDDAddWork2',
   components: { flatPickr },
   data() {
     return {
       date: null,
       config: {
         altInput: false,
-        dateFormat: "d-m-Y",
+        dateFormat: 'd-m-Y',
         minDate: this.$moment()
-          .startOf("month")
+          .startOf('month')
-          .format("DD.MM.YYYY"),
+          .format('DD.MM.YYYY'),
-        maxDate: this.$moment().format("DD.MM.YYYY"),
+        maxDate: this.$moment().format('DD.MM.YYYY'),
-        mode: "range"
+        mode: 'range',
       },
       lastConfig: {
         altInput: false,
-        dateFormat: "d-m-Y",
+        dateFormat: 'd-m-Y',
         minDate: this.$moment()
           .month(this.$moment().month() - 1)
-          .startOf("month")
+          .startOf('month')
-          .format("DD.MM.YYYY"),
+          .format('DD.MM.YYYY'),
         maxDate: this.$moment()
           .month(this.$moment().month() - 1)
-          .endOf("month")
+          .endOf('month')
-          .format("DD.MM.YYYY"),
+          .format('DD.MM.YYYY'),
-        mode: "range"
+        mode: 'range',
       },
       beforLastConfig: {
         altInput: false,
-        dateFormat: "d-m-Y",
+        dateFormat: 'd-m-Y',
         minDate: this.$moment()
           .month(this.$moment().month() - 2)
-          .startOf("month")
+          .startOf('month')
-          .format("DD.MM.YYYY"),
+          .format('DD.MM.YYYY'),
         maxDate: this.$moment()
           .month(this.$moment().month() - 2)
-          .endOf("month")
+          .endOf('month')
-          .format("DD.MM.YYYY"),
+          .format('DD.MM.YYYY'),
-        mode: "range"
+        mode: 'range',
       },
       index: 0,
       form: [],
@@ -215,44 +177,44 @@ export default {
           .daysInMonth(),
         beforLastMonth: this.$moment()
           .month(this.$moment().month() - 2)
-          .daysInMonth()
+          .daysInMonth(),
       },
       names: {
         thisMonth: this.$moment()
           .month(this.$moment().month())
-          .format("MMMM"),
+          .format('MMMM'),
         lastMonth: this.$moment()
           .month(this.$moment().month() - 1)
-          .format("MMMM"),
+          .format('MMMM'),
         beforLastMonth: this.$moment()
           .month(this.$moment().month() - 2)
-          .format("MMMM")
+          .format('MMMM'),
-      }
+      },
-    };
+    }
   },
   created() {},
   watch: {
     $form: function() {
-      stunden(this.form);
+      stunden(this.form)
-    }
+    },
   },
   methods: {
     getTR(m, i) {
-      console.log(m + "-" + i);
+      console.log(m + '-' + i)
     },
     stunden(hour, i, mon) {
-      let n = 0;
+      let n = 0
-      console.log("stunden(form)=>", hour);
+      console.log('stunden(form)=>', hour)
-      console.log("stunden(i)=>", i);
+      console.log('stunden(i)=>', i)
-      console.log("stunden(mon)=>", mon);
+      console.log('stunden(mon)=>', mon)
 
-      console.log("this.stundenSumme start=> ", this.stundenSumme);
+      console.log('this.stundenSumme start=> ', this.stundenSumme)
-      this.stundenSumme = 0;
+      this.stundenSumme = 0
-      console.log("arr.length => ", this.form.length);
+      console.log('arr.length => ', this.form.length)
       for (n; n < this.form.length; n++) {
-        console.log(">arr[n]=> ", this.form[n]);
+        console.log('>arr[n]=> ', this.form[n])
         if (this.form[n] > 0) {
-          this.stundenSumme += parseInt(this.form[n]);
+          this.stundenSumme += parseInt(this.form[n])
         }
       }
       this.messages.push({
@@ -260,43 +222,43 @@ export default {
         MonthsNumber: mon,
         DaysNumber: i,
         HoursNumber: hour,
-        DestinationText: "",
+        DestinationText: '',
-        TextDecoded: ""
+        TextDecoded: '',
-      });
+      })
-      this.index++;
+      this.index++
-      console.log("this.stundenSumme ende=> ", this.stundenSumme);
+      console.log('this.stundenSumme ende=> ', this.stundenSumme)
     },
     addNewMessage: function() {
       this.messages.push({
-        DaysNumber: "",
+        DaysNumber: '',
-        TextDecoded: ""
+        TextDecoded: '',
-      });
+      })
     },
     deleteNewMessage: function(event) {
-      console.log("deleteNewMessage:event) => ", event);
+      console.log('deleteNewMessage:event) => ', event)
       //console.log("deleteNewMessage:this.events.splice(this.event) => ", this.events.splice(this.event))
-      this.form.splice(event, null);
+      this.form.splice(event, null)
-      this.messages.splice(index, 1);
+      this.messages.splice(index, 1)
-      this.index--;
+      this.index--
     },
     submitForm: function(e) {
-      console.log(this.messages);
+      console.log(this.messages)
 
-      this.messages = [{ DaysNumber: "", TextDecoded: "" }];
+      this.messages = [{ DaysNumber: '', TextDecoded: '' }]
-      this.submitted = true;
+      this.submitted = true
     },
     submitForm2() {
-      console.log("submitForm2 TODO");
+      console.log('submitForm2 TODO')
     },
     submitForm3() {
-      console.log("submitForm3 TODO");
+      console.log('submitForm3 TODO')
     },
     textFocus() {
-      console.log("textFocus TODO");
+      console.log('textFocus TODO')
     },
     newWorkForm() {
-      console.log("newWorkForm TODO");
+      console.log('newWorkForm TODO')
-    }
+    },
-  }
+  },
-};
+}
 </script>

frontend/src/views/KontoOverview/GddSend.vue

@@ -4,9 +4,8 @@
       <b-col xl="12" md="12">
         <b-alert variant="warning" show dismissible>
           <strong>Achtung!</strong>
-          Bitte überprüfe alle deine Eingaben sehr genau. Du bist alleine
+          Bitte überprüfe alle deine Eingaben sehr genau. Du bist alleine Verantwortlich für deine
-          Verantwortlich für deine Entscheidungen. Versendete Gradidos können
+          Entscheidungen. Versendete Gradidos können nicht wieder zurück geholt werden.
-          nicht wieder zurück geholt werden.
         </b-alert>
         <b-card class="p-0 p-md-3">
           <b-alert show variant="secondary">
@@ -15,11 +14,7 @@
               - Scanne den QR Code deines Partners
             </span>
             <b-col v-show="!scan" lg="12" class="text-right ">
-              <img
+              <img src="/img/icons/gradido/qr-scan-pure.png" height="50" @click="scan = true" />
-                src="/img/icons/gradido/qr-scan-pure.png"
-                height="50"
-                @click="scan = true"
-              />
             </b-col>
             <b-alert v-show="scan" show variant="warning">
               <span class="alert-text" @click="scan = false">
@@ -31,11 +26,7 @@
                     <qrcode-capture @detect="onDetect"  capture="user" ></qrcode-capture>                     
                 </b-row> -->
 
-              <qrcode-stream
+              <qrcode-stream class="mt-3" @decode="onDecode" @detect="onDetect"></qrcode-stream>
-                class="mt-3"
-                @decode="onDecode"
-                @detect="onDetect"
-              ></qrcode-stream>
 
               <b-container>
                 <b-row>
@@ -61,10 +52,7 @@
             >
               <br />
               <div>
-                <qrcode-drop-zone
+                <qrcode-drop-zone id="input-0" v-model="form.img"></qrcode-drop-zone>
-                  id="input-0"
-                  v-model="form.img"
-                ></qrcode-drop-zone>
               </div>
               <br />
               <div>
@@ -99,10 +87,7 @@
                 <b-col class="text-left p-3 p-sm-1">
                   Betrag
                 </b-col>
-                <b-col
+                <b-col v-if="$store.state.user.balance == form.amount" class="text-right">
-                  v-if="$store.state.user.balance == form.amount"
-                  class="text-right"
-                >
                   <b-badge variant="primary">
                     maximale anzahl GDD zum versenden erreicht!
                   </b-badge>
@@ -149,12 +134,12 @@
               <b-row>
                 <b-col>
                   <b-button type="reset" variant="secondary">
-                    {{ $t("form.cancel") }}
+                    {{ $t('form.cancel') }}
                   </b-button>
                 </b-col>
                 <b-col class="text-right">
                   <b-button type="submit" variant="success">
-                    {{ $t("form.send_now") }}
+                    {{ $t('form.send_now') }}
                   </b-button>
                 </b-col>
               </b-row>
@@ -169,59 +154,53 @@
 </template>
 
 <script>
-import {
+import { QrcodeStream, QrcodeDropZone /*, QrcodeCapture*/ } from 'vue-qrcode-reader'
-  QrcodeStream,
+import { BIcon } from 'bootstrap-vue'
-  QrcodeDropZone /*, QrcodeCapture*/
-} from "vue-qrcode-reader";
-import { BIcon } from "bootstrap-vue";
 
 export default {
-  name: "GddSent",
+  name: 'GddSent',
   components: {
     QrcodeStream,
     QrcodeDropZone,
     // QrcodeCapture,
-    BIcon
+    BIcon,
   },
   data() {
     return {
       scan: false,
       show: true,
       form: {
-        img: "",
+        img: '',
-        email: "",
+        email: '',
-        amount: "",
+        amount: '',
-        memo: ""
+        memo: '',
       },
-      sent: false
+      sent: false,
-    };
+    }
   },
   methods: {
     sendbutton() {
-      this.sent = true;
+      this.sent = true
     },
     async onDecode(decodedString) {
-      console.log(
+      console.log('onDecode JSON.parse(decodedString)', JSON.parse(decodedString))
-        "onDecode JSON.parse(decodedString)",
+      const arr = JSON.parse(decodedString)
-        JSON.parse(decodedString)
+      console.log('qr-email', arr[0].email)
-      );
+      console.log('qr-amount', arr[0].amount)
-      const arr = JSON.parse(decodedString);
-      console.log("qr-email", arr[0].email);
-      console.log("qr-amount", arr[0].amount);
 
-      this.form.email = arr[0].email;
+      this.form.email = arr[0].email
-      this.form.amount1 = arr[0].amount;
+      this.form.amount1 = arr[0].amount
     },
     async onDetect(promise) {
       try {
         const {
           imageData, // raw image data of image/frame
           content, // decoded String
-          location // QR code coordinates
+          location, // QR code coordinates
-        } = await promise;
+        } = await promise
         // console.log('onDetect promise',promise)
         //console.log('JSON.parse(decodedString)',JSON.parse(promise) )
-        const arr = JSON.parse(decodedString);
+        const arr = JSON.parse(decodedString)
       } catch (error) {
         // ...
       }
@@ -229,38 +208,36 @@ export default {
     async onSubmit() {
       //event.preventDefault()
       //console.log("onSubmit", this.form)
-      this.$store.state.ajaxCreateData.session_id = this.$cookies.get(
+      this.$store.state.ajaxCreateData.session_id = this.$cookies.get('gdd_session_id')
-        "gdd_session_id"
+      this.$store.state.ajaxCreateData.email = this.form.email
-      );
+      this.$store.state.ajaxCreateData.amount = this.form.amount
-      this.$store.state.ajaxCreateData.email = this.form.email;
+      this.$store.state.ajaxCreateData.memo = this.form.memo
-      this.$store.state.ajaxCreateData.amount = this.form.amount;
+      this.$store.state.ajaxCreateData.target_date = Date.now()
-      this.$store.state.ajaxCreateData.memo = this.form.memo;
-      this.$store.state.ajaxCreateData.target_date = Date.now();
 
-      this.$store.dispatch("ajaxCreate");
+      this.$store.dispatch('ajaxCreate')
     },
     onReset(event) {
-      event.preventDefault();
+      event.preventDefault()
-      this.form.email = "";
+      this.form.email = ''
-      this.form.amount = "";
+      this.form.amount = ''
-      this.show = false;
+      this.show = false
       this.$nextTick(() => {
-        this.show = true;
+        this.show = true
-      });
+      })
-    }
+    },
   },
   computed: {
     state() {
-      return this.name.length >= 4;
+      return this.name.length >= 4
     },
     invalidFeedback() {
       if (this.name.length > 0) {
-        return "Geben Sie mindestens 4 Zeichen ein.";
+        return 'Geben Sie mindestens 4 Zeichen ein.'
       }
-      return "Bitte geben Sie eine GDD Adresse ein.";
+      return 'Bitte geben Sie eine GDD Adresse ein.'
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style>
 video {

frontend/src/views/KontoOverview/GddStatus.vue

@@ -7,11 +7,7 @@
         </stats-card>
       </b-col>
       <b-col xl="6" md="6">
-        <stats-card
+        <stats-card type="gradient-orange" sub-title="balance_gdt" class="mb-4 h1">
-          type="gradient-orange"
-          sub-title="balance_gdt"
-          class="mb-4 h1"
-        >
           {{ $n($store.state.user.balance_gdt) }} GDT
         </stats-card>
       </b-col>
@@ -21,6 +17,6 @@
 
 <script>
 export default {
-  name: "GddStatus"
+  name: 'GddStatus',
-};
+}
 </script>

frontend/src/views/KontoOverview/GddTable.vue

@@ -58,16 +58,10 @@
                 {{ item.memo }}
               </b-list-group-item>
             </b-list-group>
-            <b-button
+            <b-button v-b-toggle="'collapse-1-inner' + item.transaction_id" variant="secondary">
-              v-b-toggle="'collapse-1-inner' + item.transaction_id"
+              {{ $t('transaction.more') }}
-              variant="secondary"
-            >
-              {{ $t("transaction.more") }}
             </b-button>
-            <b-collapse
+            <b-collapse :id="'collapse-1-inner' + item.transaction_id" class="mt-2">
-              :id="'collapse-1-inner' + item.transaction_id"
-              class="mt-2"
-            >
               <b-card>{{ item }}</b-card>
             </b-collapse>
           </b-card>
@@ -91,60 +85,50 @@
 </template>
 
 <script>
-import axios from "axios";
+import axios from 'axios'
-import communityAPI from "../../apis/communityAPI";
+import communityAPI from '../../apis/communityAPI'
 
 export default {
-  name: "GddTable",
+  name: 'GddTable',
   data() {
     return {
       form: [],
-      fields: [
+      fields: ['balance', 'date', 'memo', 'name', 'transaction_id', 'type', 'details'],
-        "balance",
-        "date",
-        "memo",
-        "name",
-        "transaction_id",
-        "type",
-        "details"
-      ],
       items: [],
-      count: 0
+      count: 0,
-    };
+    }
   },
 
   async created() {
-    const result = await communityAPI.transactions(
+    const result = await communityAPI.transactions(this.$store.state.session_id)
-      this.$store.state.session_id
-    );
 
     if (result.success) {
-      this.$store.state.user.balance_gdt = result.result.data.gdtSum;
+      this.$store.state.user.balance_gdt = result.result.data.gdtSum
-      this.items = result.result.data.transactions;
+      this.items = result.result.data.transactions
-      this.count = result.result.data.count;
+      this.count = result.result.data.count
     } else {
-      console.log("error", result);
+      console.log('error', result)
     }
   },
   computed: {
     filteredItems(a) {
       // console.log("filteredItems date",a.items)
-      return a.items;
+      return a.items
-    }
+    },
   },
   methods: {
     rowClass(item, type) {
-      if (!item || type !== "row") return;
+      if (!item || type !== 'row') return
-      if (item.type === "receive") return "table-success";
+      if (item.type === 'receive') return 'table-success'
-      if (item.type === "send") return "table-warning";
+      if (item.type === 'send') return 'table-warning'
-      if (item.type === "creation") return "table-primary";
+      if (item.type === 'creation') return 'table-primary'
     },
     toogle(item) {
       const temp =
-        '<b-collapse visible v-bind:id="item.id">xxx <small class="text-muted">porta</small></b-collapse>';
+        '<b-collapse visible v-bind:id="item.id">xxx <small class="text-muted">porta</small></b-collapse>'
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style>
 .el-table .cell {

frontend/src/views/KontoOverview/GddWorkTable.vue

@@ -10,13 +10,7 @@
             font-scale="2"
             style="color:orange"
           ></b-icon>
-          <b-icon
+          <b-icon v-else icon="check2-all" class="m-1" font-scale="2" style="color:green"></b-icon>
-            v-else
-            icon="check2-all"
-            class="m-1"
-            font-scale="2"
-            style="color:green"
-          ></b-icon>
           <h2 class="text-muted">
             <small>{{ item.datel }}</small>
             - {{ item.text }}
@@ -29,51 +23,51 @@
 
 <script>
 export default {
-  name: "GddWorkTable",
+  name: 'GddWorkTable',
   data() {
     return {
       form: [],
       items: [
         {
           id: 1,
-          text: "Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ",
+          text: 'Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ',
-          datel: "12.12.2020 14:04",
+          datel: '12.12.2020 14:04',
-          status: "submitted"
+          status: 'submitted',
         },
         {
           id: 2,
-          text: "Larsen Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ",
+          text: 'Larsen Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ',
-          datel: "22.06.2020 22:23",
+          datel: '22.06.2020 22:23',
-          status: "submitted"
+          status: 'submitted',
         },
         {
           id: 3,
-          text: "Geneva Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ",
+          text: 'Geneva Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ',
-          datel: "15.04.2020 12:55",
+          datel: '15.04.2020 12:55',
-          status: "confirmed"
+          status: 'confirmed',
         },
         {
           id: 4,
-          text: "Community Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ",
+          text: 'Community Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ',
-          datel: "10.03.2020 18:20",
+          datel: '10.03.2020 18:20',
-          status: "confirmed"
+          status: 'confirmed',
-        }
+        },
-      ]
+      ],
-    };
+    }
   },
   methods: {
     rowClass(item, type) {
-      if (!item || type !== "row") return;
+      if (!item || type !== 'row') return
-      if (item.status === "received") return "table-success";
+      if (item.status === 'received') return 'table-success'
-      if (item.status === "sent") return "table-warning";
+      if (item.status === 'sent') return 'table-warning'
-      if (item.status === "earned") return "table-primary";
+      if (item.status === 'earned') return 'table-primary'
     },
     toogle(item) {
       const temp =
-        '<b-collapse visible v-bind:id="item.id">xxx <small class="text-muted">porta</small></b-collapse>';
+        '<b-collapse visible v-bind:id="item.id">xxx <small class="text-muted">porta</small></b-collapse>'
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style>
 .el-table .cell {

frontend/src/views/KontoOverview/default.vue

@@ -6,11 +6,11 @@
 
 <script>
 export default {
-  name: "default",
+  name: 'default',
   data() {
-    return {};
+    return {}
   },
   methods: {},
-  watch: {}
+  watch: {},
-};
+}
 </script>

frontend/src/views/Landing.vue

@@ -77,10 +77,7 @@
                     Vorname
                   </label>
                   <b-col md="10">
-                    <base-input
+                    <base-input placeholder="Jon " v-model="rfname"></base-input>
-                      placeholder="Jon "
-                      v-model="rfname"
-                    ></base-input>
                   </b-col>
                 </b-row>
                 <b-row class="form-group">
@@ -88,10 +85,7 @@
                     Nachname
                   </label>
                   <b-col md="10">
-                    <base-input
+                    <base-input placeholder=" Snow" v-model="rlname"></base-input>
-                      placeholder=" Snow"
-                      v-model="rlname"
-                    ></base-input>
                   </b-col>
                 </b-row>
                 <b-row class="form-group">
@@ -144,10 +138,7 @@
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <polygon
+          <polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
-            class="fill-default"
-            points="2560 0 2560 100 0 100"
-          ></polygon>
         </svg>
       </div>
     </div>
@@ -158,40 +149,40 @@
 // Components
 
 export default {
-  name: "Landing",
+  name: 'Landing',
   data() {
     return {
-      lemail: "",
+      lemail: '',
-      lpwd: "",
+      lpwd: '',
-      rfname: "",
+      rfname: '',
-      rlname: "",
+      rlname: '',
-      remail: "",
+      remail: '',
-      rpwd: ""
+      rpwd: '',
-    };
+    }
   },
   methods: {
     login() {
       //if (this.lemail !== '' || this.lpwd !== '') { // TODO this should be done via form validation
-      this.$store.dispatch("login", {
+      this.$store.dispatch('login', {
         email: this.lemail,
-        password: this.lpwd
+        password: this.lpwd,
-      });
+      })
       //}
     },
     createUser() {
-      this.$store.dispatch("createUser", {
+      this.$store.dispatch('createUser', {
         email: this.remail,
         first_name: this.rfname,
         last_name: this.rlname,
-        password: this.rpwd
+        password: this.rpwd,
-      });
+      })
     },
     loginAsAdmin() {
-      console.log("app.vue admin login(): " + this.$store.state.is_admin);
+      console.log('app.vue admin login(): ' + this.$store.state.is_admin)
-      this.modals = false;
+      this.modals = false
-      this.$store.commit("loginAsAdmin");
+      this.$store.commit('loginAsAdmin')
-      this.$router.push("/AdminOverview");
+      this.$router.push('/AdminOverview')
-    }
+    },
-  }
+  },
-};
+}
 </script>

frontend/src/views/Layout/AdminLayout.vue

@@ -7,28 +7,28 @@
           :link="{
             name: 'Kontoübersicht',
             path: '/overview',
-            icon: 'ni ni-tv-2 text-primary'
+            icon: 'ni ni-tv-2 text-primary',
           }"
         ></sidebar-item>
         <sidebar-item
           :link="{
             name: 'User Profile',
             path: '/profile',
-            icon: 'ni ni-single-02 text-yellow'
+            icon: 'ni ni-single-02 text-yellow',
           }"
         ></sidebar-item>
         <sidebar-item
           :link="{
             name: 'Login',
             path: '/login',
-            icon: 'ni ni-key-25 text-info'
+            icon: 'ni ni-key-25 text-info',
           }"
         ></sidebar-item>
         <sidebar-item
           :link="{
             name: 'Register',
             path: '/register',
-            icon: 'ni ni-circle-08 text-pink'
+            icon: 'ni ni-circle-08 text-pink',
           }"
         ></sidebar-item>
       </template>
@@ -68,47 +68,47 @@
 </template>
 <script>
 /* eslint-disable no-new */
-import PerfectScrollbar from "perfect-scrollbar";
+import PerfectScrollbar from 'perfect-scrollbar'
-import "perfect-scrollbar/css/perfect-scrollbar.css";
+import 'perfect-scrollbar/css/perfect-scrollbar.css'
 
 function hasElement(className) {
-  return document.getElementsByClassName(className).length > 0;
+  return document.getElementsByClassName(className).length > 0
 }
 
 function initScrollbar(className) {
   if (hasElement(className)) {
-    new PerfectScrollbar(`.${className}`);
+    new PerfectScrollbar(`.${className}`)
   } else {
     // try to init it later in case this component is loaded async
     setTimeout(() => {
-      initScrollbar(className);
+      initScrollbar(className)
-    }, 100);
+    }, 100)
   }
 }
 
-import DashboardNavbar from "./DashboardNavbar.vue";
+import DashboardNavbar from './DashboardNavbar.vue'
-import ContentFooter from "./ContentFooter.vue";
+import ContentFooter from './ContentFooter.vue'
-import DashboardContent from "./Content.vue";
+import DashboardContent from './Content.vue'
-import { FadeTransition } from "vue2-transitions";
+import { FadeTransition } from 'vue2-transitions'
 
 export default {
   components: {
     DashboardNavbar,
     ContentFooter,
     //DashboardContent,
-    FadeTransition
+    FadeTransition,
   },
   methods: {
     initScrollbar() {
-      let isWindows = navigator.platform.startsWith("Win");
+      let isWindows = navigator.platform.startsWith('Win')
       if (isWindows) {
-        initScrollbar("sidenav");
+        initScrollbar('sidenav')
       }
-    }
+    },
   },
   mounted() {
-    this.initScrollbar();
+    this.initScrollbar()
-  }
+  },
-};
+}
 </script>
 <style lang="scss"></style>

frontend/src/views/Layout/AuthLayout.vue

@@ -22,11 +22,7 @@
               </router-link>
             </b-col>
             <b-col cols="6" class="collapse-close">
-              <button
+              <button type="button" class="navbar-toggler" @click="showMenu = false">
-                type="button"
-                class="navbar-toggler"
-                @click="showMenu = false"
-              >
                 <span></span>
                 <span></span>
               </button>
@@ -48,26 +44,17 @@
           <b-col xl="6">
             <div class="copyright text-center text-xl-left text-muted">
               © {{ year }}
-              <a
+              <a href="https://gradido.net/" class="font-weight-bold ml-1" target="_blank">
-                href="https://gradido.net/"
-                class="font-weight-bold ml-1"
-                target="_blank"
-              >
                 Gradido-Akademie
               </a>
             </div>
           </b-col>
           <b-col xl="6" class="col-xl-6">
-            <b-nav
+            <b-nav class="nav-footer justify-content-center justify-content-lg-end">
-              class="nav-footer justify-content-center justify-content-lg-end"
-            >
               <b-nav-item ref="https://www.creative-tim.com" target="_blank">
                 Gradido
               </b-nav-item>
-              <b-nav-item
+              <b-nav-item href="https://www.creative-tim.com/presentation" target="_blank">
-                href="https://www.creative-tim.com/presentation"
-                target="_blank"
-              >
                 Impressum
               </b-nav-item>
               <b-nav-item href="http://blog.creative-tim.com" target="_blank">
@@ -81,19 +68,19 @@
   </div>
 </template>
 <script>
-import { BaseNav } from "@/components";
+import { BaseNav } from '@/components'
-import { ZoomCenterTransition } from "vue2-transitions";
+import { ZoomCenterTransition } from 'vue2-transitions'
 
 export default {
   components: {
     BaseNav,
-    ZoomCenterTransition
+    ZoomCenterTransition,
   },
   props: {
     backgroundColor: {
       type: String,
-      default: "black"
+      default: 'black',
-    }
+    },
   },
   data() {
     return {
@@ -101,60 +88,60 @@ export default {
       menuTransitionDuration: 250,
       pageTransitionDuration: 200,
       year: new Date().getFullYear(),
-      pageClass: "login-page"
+      pageClass: 'login-page',
-    };
+    }
   },
   computed: {
     title() {
-      return `${this.$route.name} Page`;
+      return `${this.$route.name} Page`
-    }
+    },
   },
   methods: {
     toggleNavbar() {
-      document.body.classList.toggle("nav-open");
+      document.body.classList.toggle('nav-open')
-      this.showMenu = !this.showMenu;
+      this.showMenu = !this.showMenu
     },
     closeMenu() {
-      document.body.classList.remove("nav-open");
+      document.body.classList.remove('nav-open')
-      this.showMenu = false;
+      this.showMenu = false
     },
     setBackgroundColor() {
-      document.body.classList.add("bg-default");
+      document.body.classList.add('bg-default')
     },
     removeBackgroundColor() {
-      document.body.classList.remove("bg-default");
+      document.body.classList.remove('bg-default')
     },
     updateBackground() {
       if (!this.$route.meta.noBodyBackground) {
-        this.setBackgroundColor();
+        this.setBackgroundColor()
       } else {
-        this.removeBackgroundColor();
+        this.removeBackgroundColor()
       }
-    }
+    },
   },
   beforeDestroy() {
-    this.removeBackgroundColor();
+    this.removeBackgroundColor()
   },
   beforeRouteUpdate(to, from, next) {
     // Close the mobile menu first then transition to next page
     if (this.showMenu) {
-      this.closeMenu();
+      this.closeMenu()
       setTimeout(() => {
-        next();
+        next()
-      }, this.menuTransitionDuration);
+      }, this.menuTransitionDuration)
     } else {
-      next();
+      next()
     }
   },
   watch: {
     $route: {
       immediate: true,
       handler: function() {
-        this.updateBackground();
+        this.updateBackground()
-      }
+      },
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style lang="scss">
 $scaleSize: 0.8;

frontend/src/views/Layout/AuthLayout_gdd.vue

@@ -9,32 +9,32 @@
   </div>
 </template>
 <script>
-import ContentFooter from "./ContentFooter.vue";
+import ContentFooter from './ContentFooter.vue'
 export default {
   components: {
-    ContentFooter
+    ContentFooter,
   },
   data() {
     return {
       year: new Date().getFullYear(),
-      pageClass: "login-page"
+      pageClass: 'login-page',
-    };
+    }
   },
   computed: {
     title() {
-      return `${this.$route.name} Page`;
+      return `${this.$route.name} Page`
-    }
+    },
   },
   methods: {
     setLocale(locale) {
-      this.$i18n.locale = locale;
+      this.$i18n.locale = locale
       //this.$router.push({
       //  params: { lang: locale }
       //})
       //this.hideDropdown()
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style lang="scss">
 .card {

frontend/src/views/Layout/Content.vue

@@ -7,11 +7,11 @@
   </div>
 </template>
 <script>
-import { FadeTransition } from "vue2-transitions";
+import { FadeTransition } from 'vue2-transitions'
 export default {
   components: {
-    FadeTransition
+    FadeTransition,
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/views/Layout/ContentFooter.vue

@@ -17,13 +17,10 @@
             Gradido
           </b-nav-item>
           <b-nav-item href="https://gradido.net/de/impressum/" target="_blank">
-            {{ $t("imprint") }}
+            {{ $t('imprint') }}
           </b-nav-item>
-          <b-nav-item
+          <b-nav-item href="https://gradido.net/de/datenschutz/" target="_blank">
-            href="https://gradido.net/de/datenschutz/"
+            {{ $t('privacy_policy') }}
-            target="_blank"
-          >
-            {{ $t("privacy_policy") }}
           </b-nav-item>
           <!--<b-nav-item href="#!" to="/explorer" >
             GDD-Explorer
@@ -37,9 +34,9 @@
 export default {
   data() {
     return {
-      year: new Date().getFullYear()
+      year: new Date().getFullYear(),
-    };
+    }
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/views/Layout/DashboardLayout.vue

@@ -5,7 +5,7 @@
       <template slot="links">
         <b-nav-item href="#!" to="/overview">
           <b-nav-text class="p-0 text-lg text-muted">
-            {{ $t("sent") }}
+            {{ $t('sent') }}
           </b-nav-text>
         </b-nav-item>
         <b-nav-item href="#!" to="/transactions">
@@ -13,18 +13,18 @@
         </b-nav-item>
         <b-nav-item href="#!" to="/profile">
           <b-nav-text class="p-0 text-lg text-muted">
-            {{ $t("site.navbar.my-profil") }}
+            {{ $t('site.navbar.my-profil') }}
           </b-nav-text>
         </b-nav-item>
         <b-nav-item href="#!" to="/profileedit">
           <b-nav-text class="p-0 text-lg text-muted">
-            {{ $t("site.navbar.settings") }}
+            {{ $t('site.navbar.settings') }}
           </b-nav-text>
         </b-nav-item>
 
         <b-nav-item href="#!" to="/activity">
           <b-nav-text class="p-0 text-lg text-muted">
-            {{ $t("site.navbar.activity") }}
+            {{ $t('site.navbar.activity') }}
           </b-nav-text>
         </b-nav-item>
       </template>
@@ -44,47 +44,47 @@
 </template>
 <script>
 /* eslint-disable no-new */
-import PerfectScrollbar from "perfect-scrollbar";
+import PerfectScrollbar from 'perfect-scrollbar'
-import "perfect-scrollbar/css/perfect-scrollbar.css";
+import 'perfect-scrollbar/css/perfect-scrollbar.css'
 
 function hasElement(className) {
-  return document.getElementsByClassName(className).length > 0;
+  return document.getElementsByClassName(className).length > 0
 }
 
 function initScrollbar(className) {
   if (hasElement(className)) {
-    new PerfectScrollbar(`.${className}`);
+    new PerfectScrollbar(`.${className}`)
   } else {
     // try to init it later in case this component is loaded async
     setTimeout(() => {
-      initScrollbar(className);
+      initScrollbar(className)
-    }, 100);
+    }, 100)
   }
 }
 
-import DashboardNavbar from "./DashboardNavbar.vue";
+import DashboardNavbar from './DashboardNavbar.vue'
-import ContentFooter from "./ContentFooter.vue";
+import ContentFooter from './ContentFooter.vue'
 // import DashboardContent from './Content.vue';
-import { FadeTransition } from "vue2-transitions";
+import { FadeTransition } from 'vue2-transitions'
 
 export default {
   components: {
     DashboardNavbar,
     ContentFooter,
     // DashboardContent,
-    FadeTransition
+    FadeTransition,
   },
   methods: {
     initScrollbar() {
-      let isWindows = navigator.platform.startsWith("Win");
+      let isWindows = navigator.platform.startsWith('Win')
       if (isWindows) {
-        initScrollbar("sidenav");
+        initScrollbar('sidenav')
       }
-    }
+    },
   },
   mounted() {
-    this.initScrollbar();
+    this.initScrollbar()
-  }
+  },
-};
+}
 </script>
 <style lang="scss"></style>

frontend/src/views/Layout/DashboardNavbar.vue

@@ -15,12 +15,7 @@
     <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">
-        <a
+        <a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
-          class="nav-link"
-          href="#"
-          data-action="search-show"
-          data-target="#navbar-search-main"
-        >
           <i class="ni ni-zoom-split-in"></i>
         </a>
       </li>
@@ -40,10 +35,7 @@
             </span>
             <b-media-body class="ml-2 d-none d-lg-block">
               <span class="avatar ">
-                <vue-qrcode
+                <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
-                  :value="$store.state.email"
-                  type="image/png"
-                ></vue-qrcode>
               </span>
             </b-media-body>
           </b-media>
@@ -51,19 +43,19 @@
 
         <template>
           <b-dropdown-header class="noti-title">
-            <h6 class="text-overflow m-0">{{ $t("welcome") }}</h6>
+            <h6 class="text-overflow m-0">{{ $t('welcome') }}</h6>
           </b-dropdown-header>
           <b-dropdown-item href="#!" to="/overview">
             <i class="ni ni-single-02"></i>
-            <span>{{ $t("site.overview.account_overview") }}</span>
+            <span>{{ $t('site.overview.account_overview') }}</span>
           </b-dropdown-item>
           <b-dropdown-item href="#!" to="/profile">
             <i class="ni ni-single-02"></i>
-            <span>{{ $t("site.navbar.my-profil") }}</span>
+            <span>{{ $t('site.navbar.my-profil') }}</span>
           </b-dropdown-item>
           <b-dropdown-item href="#!" to="/profileedit">
             <i class="ni ni-settings-gear-65"></i>
-            <span>{{ $t("site.navbar.settings") }}</span>
+            <span>{{ $t('site.navbar.settings') }}</span>
           </b-dropdown-item>
           <!--
           <b-dropdown-item href="#!">
@@ -74,7 +66,7 @@
           <div class="dropdown-divider"></div>
           <b-dropdown-item href="#!" @click="logout">
             <i class="ni ni-user-run"></i>
-            <span>{{ $t("logout") }}</span>
+            <span>{{ $t('logout') }}</span>
           </b-dropdown-item>
         </template>
       </base-dropdown>
@@ -82,52 +74,51 @@
   </base-nav>
 </template>
 <script>
-import { CollapseTransition } from "vue2-transitions";
+import { CollapseTransition } from 'vue2-transitions'
-import { BaseNav } from "@/components";
+import { BaseNav } from '@/components'
-import VueQrcode from "vue-qrcode";
+import VueQrcode from 'vue-qrcode'
 
 export default {
   components: {
     //CollapseTransition,
     BaseNav,
-    VueQrcode
+    VueQrcode,
   },
   props: {
     type: {
       type: String,
-      default: "default", // default|light
+      default: 'default', // default|light
-      description:
+      description: 'Look of the dashboard navbar. Default (Green) or light (gray)',
-        "Look of the dashboard navbar. Default (Green) or light (gray)"
+    },
-    }
   },
   computed: {
     routeName() {
-      const { name } = this.$route;
+      const { name } = this.$route
-      return this.capitalizeFirstLetter(name);
+      return this.capitalizeFirstLetter(name)
-    }
+    },
   },
   data() {
     return {
       activeNotifications: false,
       showMenu: false,
       searchModalVisible: false,
-      searchQuery: ""
+      searchQuery: '',
-    };
+    }
   },
   methods: {
     capitalizeFirstLetter(string) {
-      return string.charAt(0).toUpperCase() + string.slice(1);
+      return string.charAt(0).toUpperCase() + string.slice(1)
     },
     toggleNotificationDropDown() {
-      this.activeNotifications = !this.activeNotifications;
+      this.activeNotifications = !this.activeNotifications
     },
     closeDropDown() {
-      this.activeNotifications = false;
+      this.activeNotifications = false
     },
     logout() {
       //console.log("DashboardNavbar.vue user logout() : ")
-      this.$store.dispatch("logout");
+      this.$store.dispatch('logout')
-    }
+    },
-  }
+  },
-};
+}
 </script>

frontend/src/views/Maps/API_KEY.js

@@ -1 +1 @@
-export const API_KEY = "YOUR_API_KEY";
+export const API_KEY = 'YOUR_API_KEY'

frontend/src/views/NotFoundPage.vue

@@ -6,7 +6,7 @@
         <div class="header-body text-center mb-7">
           <b-row class="justify-content-center">
             <b-col xl="5" lg="6" md="6" class="px-5">
-              <h1 class="text-light">{{ $t("site.404.text") }}</h1>
+              <h1 class="text-light">{{ $t('site.404.text') }}</h1>
             </b-col>
           </b-row>
           <a href="/login" to="/login">
@@ -1198,10 +1198,7 @@
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <polygon
+          <polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
-            class="fill-default"
-            points="2560 0 2560 100 0 100"
-          ></polygon>
         </svg>
       </div>
     </div>
@@ -1214,13 +1211,10 @@
           </b-col>
           <b-col md="6">
             <div class="pr-md-5">
-              <h1 class="text-light">{{ $t("site.landing1.explore") }}</h1>
+              <h1 class="text-light">{{ $t('site.landing1.explore') }}</h1>
-              <p class="text-light">{{ $t("site.landing1.text") }}</p>
+              <p class="text-light">{{ $t('site.landing1.text') }}</p>
-              <router-link
+              <router-link to="/overview" class="font-weight-bold text-warning mt-5">
-                to="/overview"
+                {{ $t('site.landing1.link') }}
-                class="font-weight-bold text-warning mt-5"
-              >
-                {{ $t("site.landing1.link") }}
               </router-link>
             </div>
           </b-col>
@@ -1232,30 +1226,30 @@
 
 <script>
 export default {
-  name: "not-found",
+  name: 'not-found',
   data() {
     return {
       anime: {
-        targets: ".row svg",
+        targets: '.row svg',
         translateY: 10,
         autoplay: true,
         loop: true,
-        easing: "easeInOutSine",
+        easing: 'easeInOutSine',
-        direction: "alternate"
+        direction: 'alternate',
       },
       anime2: {
-        targets: "#zero",
+        targets: '#zero',
         translateX: 10,
         autoplay: true,
         loop: true,
-        easing: "easeInOutSine",
+        easing: 'easeInOutSine',
-        direction: "alternate",
+        direction: 'alternate',
         scale: [{ value: 1 }, { value: 1.4 }, { value: 1, delay: 250 }],
-        rotateY: { value: "+=180", delay: 200 }
+        rotateY: { value: '+=180', delay: 200 },
-      }
+      },
-    };
+    }
-  }
+  },
-};
+}
 </script>
 <style>
 body {

frontend/src/views/Pages/Explorer.vue

@@ -17,10 +17,7 @@
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <polygon
+          <polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
-            class="fill-default"
-            points="2560 0 2560 100 0 100"
-          ></polygon>
         </svg>
       </div>
     </div>

frontend/src/views/Pages/Login.vue

@@ -7,7 +7,7 @@
           <b-row class="justify-content-center">
             <b-col xl="5" lg="6" md="8" class="px-2">
               <h1>Gradido</h1>
-              <p class="text-lead">{{ $t("site.login.community") }}</p>
+              <p class="text-lead">{{ $t('site.login.community') }}</p>
             </b-col>
           </b-row>
         </div>
@@ -17,19 +17,12 @@
     <b-container class="mt--8 p-1">
       <b-row class="justify-content-center">
         <b-col lg="5" md="7">
-          <b-card
+          <b-card no-body class="border-0 mb-0" style="background-color: #ebebeba3 !important;">
-            no-body
-            class="border-0 mb-0"
-            style="background-color: #ebebeba3 !important;"
-          >
             <b-card-body class="py-lg-4 px-sm-0 px-0 px-md-2 px-lg-4">
               <div class="text-center text-muted mb-4">
-                <small>{{ $t("login") }}</small>
+                <small>{{ $t('login') }}</small>
               </div>
-              <validation-observer
+              <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
-                v-slot="{ handleSubmit }"
-                ref="formValidator"
-              >
                 <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
                   <base-input
                     alternative
@@ -52,17 +45,12 @@
                     v-model="model.password"
                   ></base-input>
 
-                  <b-alert
+                  <b-alert v-show="$store.state.loginfail" show variant="warning">
-                    v-show="$store.state.loginfail"
-                    show
-                    variant="warning"
-                  >
                     <span class="alert-text bv-example-row">
                       <b-row>
                         <b-col class="col-9 text-left">
                           <strong>
-                            Leider konnten wir keinen Account finden mit diesen
+                            Leider konnten wir keinen Account finden mit diesen Daten!
-                            Daten!
                           </strong>
                         </b-col>
                         <b-col class="text-right">
@@ -81,12 +69,8 @@
 
                   <!-- <b-form-checkbox v-model="model.rememberMe">{{ $t('site.login.remember')}}</b-form-checkbox> -->
                   <div class="text-center">
-                    <base-button
+                    <base-button type="secondary" native-type="submit" class="my-4">
-                      type="secondary"
+                      {{ $t('site.login.signin') }}
-                      native-type="submit"
-                      class="my-4"
-                    >
-                      {{ $t("site.login.signin") }}
                     </base-button>
                   </div>
                 </b-form>
@@ -96,12 +80,12 @@
           <b-row class="mt-3">
             <b-col cols="6">
               <router-link to="/password">
-                {{ $t("site.login.forgot_pwd") }}
+                {{ $t('site.login.forgot_pwd') }}
               </router-link>
             </b-col>
             <b-col cols="6" class="text-right">
               <router-link to="/register">
-                {{ $t("site.login.new_wallet") }}
+                {{ $t('site.login.new_wallet') }}
               </router-link>
             </b-col>
           </b-row>
@@ -112,26 +96,26 @@
 </template>
 <script>
 export default {
-  name: "login",
+  name: 'login',
   data() {
     return {
       model: {
-        email: "",
+        email: '',
-        password: ""
+        password: '',
         // rememberMe: false
-      }
+      },
-    };
+    }
   },
   methods: {
     onSubmit() {
-      this.$store.dispatch("login", {
+      this.$store.dispatch('login', {
         email: this.model.email,
-        password: this.model.password
+        password: this.model.password,
-      });
+      })
     },
     closeAlert() {
-      this.$store.state.loginfail = false;
+      this.$store.state.loginfail = false
-    }
+    },
-  }
+  },
-};
+}
 </script>

frontend/src/views/Pages/Password.vue

@@ -5,8 +5,8 @@
         <div class="header-body text-center mb-7">
           <b-row class="justify-content-center">
             <b-col xl="5" lg="6" md="8" class="px-2">
-              <h1>{{ $t("site.password.title") }}</h1>
+              <h1>{{ $t('site.password.title') }}</h1>
-              <p class="text-lead">{{ $t("site.password.subtitle") }}</p>
+              <p class="text-lead">{{ $t('site.password.subtitle') }}</p>
             </b-col>
           </b-row>
         </div>
@@ -15,16 +15,9 @@
     <b-container class="mt--8 p-1">
       <b-row class="justify-content-center">
         <b-col lg="6" md="8">
-          <b-card
+          <b-card no-body class="border-0" style="background-color: #ebebeba3 !important;">
-            no-body
-            class="border-0"
-            style="background-color: #ebebeba3 !important;"
-          >
             <b-card-body class="px-lg-5 py-lg-5">
-              <validation-observer
+              <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
-                v-slot="{ handleSubmit }"
-                ref="formValidator"
-              >
                 <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
                   <base-input
                     alternative
@@ -44,7 +37,7 @@
                       class="mt-4"
                       :disabled="disable"
                     >
-                      {{ $t("site.password.reset_now") }}
+                      {{ $t('site.password.reset_now') }}
                     </b-button>
                   </div>
                 </b-form>
@@ -54,29 +47,29 @@
         </b-col>
       </b-row>
       <div class="text-center py-lg-4">
-        <router-link to="/Login" class="mt-3">{{ $t("back") }}</router-link>
+        <router-link to="/Login" class="mt-3">{{ $t('back') }}</router-link>
       </div>
     </b-container>
   </div>
 </template>
 <script>
 export default {
-  name: "password",
+  name: 'password',
   data() {
     return {
-      disable: "disabled",
+      disable: 'disabled',
       model: {
-        email: ""
+        email: '',
-      }
+      },
-    };
+    }
   },
   methods: {
     onSubmit() {
-      this.$store.dispatch("passwordReset", { email: this.model.email });
+      this.$store.dispatch('passwordReset', { email: this.model.email })
-      this.model.email = "";
+      this.model.email = ''
-      this.$router.push("/thx");
+      this.$router.push('/thx')
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/views/Pages/Register.vue

@@ -6,8 +6,8 @@
         <div class="header-body text-center mb-7">
           <b-row class="justify-content-center">
             <b-col xl="5" lg="6" md="8" class="px-2">
-              <h1>{{ $t("site.signup.title") }}</h1>
+              <h1>{{ $t('site.signup.title') }}</h1>
-              <p class="text-lead">{{ $t("site.signup.subtitle") }}</p>
+              <p class="text-lead">{{ $t('site.signup.subtitle') }}</p>
             </b-col>
           </b-row>
         </div>
@@ -18,19 +18,12 @@
       <!-- Table -->
       <b-row class="justify-content-center">
         <b-col lg="6" md="8">
-          <b-card
+          <b-card no-body class="border-0" style="background-color: #ebebeba3 !important;">
-            no-body
-            class="border-0"
-            style="background-color: #ebebeba3 !important;"
-          >
             <b-card-body class="py-lg-4 px-sm-0 px-0 px-md-2 px-lg-4">
               <div class="text-center text-muted mb-4">
-                <small>{{ $t("signup") }}</small>
+                <small>{{ $t('signup') }}</small>
               </div>
-              <validation-observer
+              <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
-                v-slot="{ handleSubmit }"
-                ref="formValidator"
-              >
                 <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
                   <base-input
                     alternative
@@ -73,9 +66,9 @@
                   ></base-input>
                   <div class="text-muted font-italic">
                     <small>
-                      {{ $t("site.signup.strength") }}
+                      {{ $t('site.signup.strength') }}
                       <span class="text-success font-weight-700">
-                        {{ $t("site.signup.strong") }}
+                        {{ $t('site.signup.strong') }}
                       </span>
                     </small>
                   </div>
@@ -87,13 +80,10 @@
                       >
                         <b-form-checkbox v-model="model.agree">
                           <span class="text-muted">
-                            <a
+                            <a href="https://gradido.net/de/datenschutz/" target="_blank">
-                              href="https://gradido.net/de/datenschutz/"
+                              {{ $t('privacy_policy') }}
-                              target="_blank"
-                            >
-                              {{ $t("privacy_policy") }}
                             </a>
-                            - {{ $t("site.signup.agree") }}
+                            - {{ $t('site.signup.agree') }}
                           </span>
                         </b-form-checkbox>
                       </base-input>
@@ -101,7 +91,7 @@
                   </b-row>
                   <div class="text-center">
                     <b-button type="submit" variant="secondary" class="mt-4">
-                      {{ $t("signup") }}
+                      {{ $t('signup') }}
                     </b-button>
                   </div>
                 </b-form>
@@ -111,43 +101,43 @@
         </b-col>
       </b-row>
       <div class="text-center py-lg-4">
-        <router-link to="/Login" class="mt-3">{{ $t("back") }}</router-link>
+        <router-link to="/Login" class="mt-3">{{ $t('back') }}</router-link>
       </div>
     </b-container>
   </div>
 </template>
 <script>
 export default {
-  name: "register",
+  name: 'register',
   data() {
     return {
       model: {
-        firstname: "",
+        firstname: '',
-        lastname: "",
+        lastname: '',
-        email: "",
+        email: '',
-        password: "",
+        password: '',
-        password2: "",
+        password2: '',
-        agree: false
+        agree: false,
-      }
+      },
-    };
+    }
   },
   methods: {
     onSubmit() {
       // console.log("this.modals =>", this.modals)
-      this.$store.dispatch("createUser", {
+      this.$store.dispatch('createUser', {
         email: this.model.email,
         first_name: this.model.firstname,
         last_name: this.model.lastname,
         emailType: 2,
-        password: this.model.password
+        password: this.model.password,
-      });
+      })
-      this.model.email = "";
+      this.model.email = ''
-      this.model.firstname = "";
+      this.model.firstname = ''
-      this.model.lastname = "";
+      this.model.lastname = ''
-      this.model.password = "";
+      this.model.password = ''
-      this.$router.push("/thx");
+      this.$router.push('/thx')
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style></style>

frontend/src/views/Pages/UserProfile.vue

@@ -8,12 +8,10 @@
         <b-container fluid class="d-flex align-items-center">
           <b-row>
             <b-col lg="7" md="10">
-              <h1 class="display-2 text-white">
+              <h1 class="display-2 text-white">Hello {{ this.$store.state.email }}</h1>
-                Hello {{ this.$store.state.email }}
-              </h1>
               <p class="text-white mt-0 mb-5">
-                This is your profile page. You can see the progress you've made
+                This is your profile page. You can see the progress you've made with your work and
-                with your work and manage your projects or assigned tasks
+                manage your projects or assigned tasks
               </p>
               <a href="#!" class="btn btn-info">Edit profile</a>
             </b-col>
@@ -35,14 +33,14 @@
   </div>
 </template>
 <script>
-import EditProfileForm from "./UserProfile/EditProfileForm.vue";
+import EditProfileForm from './UserProfile/EditProfileForm.vue'
-import UserCard from "./UserProfile/UserCard.vue";
+import UserCard from './UserProfile/UserCard.vue'
 
 export default {
   components: {
     EditProfileForm,
-    UserCard
+    UserCard,
-  }
+  },
-};
+}
 </script>
 <style></style>

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

@@ -116,24 +116,24 @@ export default {
   data() {
     return {
       user: {
-        company: "Creative Code Inc.",
+        company: 'Creative Code Inc.',
-        username: "michael23",
+        username: 'michael23',
-        email: "",
+        email: '',
-        firstName: "Mike",
+        firstName: 'Mike',
-        lastName: "Andrew",
+        lastName: 'Andrew',
-        address: "Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09",
+        address: 'Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09',
-        city: "New York",
+        city: 'New York',
-        country: "USA",
+        country: 'USA',
-        postalCode: "",
+        postalCode: '',
-        aboutMe: `Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.`
+        aboutMe: `Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.`,
-      }
+      },
-    };
+    }
   },
   methods: {
     updateProfile() {
-      alert("Your data: " + JSON.stringify(this.user));
+      alert('Your data: ' + JSON.stringify(this.user))
-    }
+    },
-  }
+  },
-};
+}
 </script>
 <style></style>