added certs for ssl in development mode, layout with route finished

2020-01-17 22:11:19 +01:00 · 2020-01-17 22:11:19 +01:00 · 8ef387ac55
parent 8f786d3883
commit 8ef387ac55
14 changed files with 297 additions and 109 deletions
--- a/cert/server.crt
+++ b/cert/server.crt
@ -0,0 +1,21 @@
+-----BEGIN CERTIFICATE-----
+MIIDazCCAlOgAwIBAgIJAJGH2ozWvd1RMA0GCSqGSIb3DQEBCwUAMFMxCzAJBgNV
+BAYTAkRFMQ8wDQYDVQQIDAZTYXhvbnkxEDAOBgNVBAcMB0RyZXNkZW4xITAfBgNV
+BAoMGEludGVybmV0IFdpZGdpdHMgUHR5IEx0ZDAeFw0yMDAxMTcwOTA0MDFaFw0z
+MDAxMDQwOTA0MDFaMEQxCzAJBgNVBAYTAkRFMQ8wDQYDVQQIDAZTYXhvbnkxEDAO
+BgNVBAcMB0RyZXNkZW4xEjAQBgNVBAMMCWxvY2FsaG9zdDCCASIwDQYJKoZIhvcN
+AQEBBQADggEPADCCAQoCggEBALlkr1UOQypLKicESRnse52d5mAX9MjZQpH0/Y5u
+V5WxpPSasmOpt4MRj5MWTfTK2ukj/jLtPAMsggUh7wMXb1uytHj7T5mtiahXBM0H
+1sUi2nScXR6doQZlmqKWDGrVS7WHULM01WhirsnxI8S8e6Evpk4F5/RafKA8FgYI
+Ongg6S1B16+7T0e/FnILoMjKr1jpgzXnVkPFIneu/qVevSNco5/aw+bc6sjeS/ZA
+65dXFGpDlw0lPRHLT5/CgNyMyiLYov7KwMycZw7uxa1ynO+73tqe5tvO/DiMpAPJ
+EkrSz/StYBsGJxDhwq5RT31tHVtHhTf0rk1BmaoQJ0Aq7iECAwEAAaNRME8wHwYD
+VR0jBBgwFoAUt8P5gBfN9hCUAiWhtPH5fTWnctAwCQYDVR0TBAIwADALBgNVHQ8E
+BAMCBPAwFAYDVR0RBA0wC4IJbG9jYWxob3N0MA0GCSqGSIb3DQEBCwUAA4IBAQCD
+fBByVq8AbV1DMrY+MElb/nZA5/cuGnUpBpjSlk5OnYHWtywuQk6veiiJ0S2fNfqf
+RzwOFuZDHKmIcH0574VssLfUynMKP3w3xb2ZNic3AxAdhzZ6LXLx6+qF5tYcL7oC
+UWmj5Mo9SkX5HZLEGamQlVyGOGKNatxep4liyoSeKXr0AOHYfB4AkDhVZn7yQc/v
+But42fLBg4mE+rk4UBYOHA4XdoFwqgTCNZq2RxKzvG9LIcok6lOc6gDnfTsH8GqE
+byGpfIIQAXF8aftCm4dGXxtzMh8C5d0t2Ell9g+Rr8i/enebT2nJ9B9ptldDjhcZ
+7I0ywGsXwrh0EwFsX74/
+-----END CERTIFICATE-----
--- a/cert/server.key
+++ b/cert/server.key
@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQC5ZK9VDkMqSyon
+BEkZ7HudneZgF/TI2UKR9P2ObleVsaT0mrJjqbeDEY+TFk30ytrpI/4y7TwDLIIF
+Ie8DF29bsrR4+0+ZrYmoVwTNB9bFItp0nF0enaEGZZqilgxq1Uu1h1CzNNVoYq7J
+8SPEvHuhL6ZOBef0WnygPBYGCDp4IOktQdevu09HvxZyC6DIyq9Y6YM151ZDxSJ3
+rv6lXr0jXKOf2sPm3OrI3kv2QOuXVxRqQ5cNJT0Ry0+fwoDcjMoi2KL+ysDMnGcO
+7sWtcpzvu97anubbzvw4jKQDyRJK0s/0rWAbBicQ4cKuUU99bR1bR4U39K5NQZmq
+ECdAKu4hAgMBAAECggEABoMQ3Y34sf2d52zxHGYAGZM4SlvND1kCS5otZdleXjW1
+M5pTdci6V3JAdswrxNNzSQkonqVSnFHt5zw/5v3lvXTTfgRl0WIVGcKkuobx9k65
+Gat8YdzrkQv0mI1otj/zvtaX8ROEA3yj4xgDR5/PP+QqlUcD1MNw6TfzFhcn5pxB
+/RDPmvarMhzMdDW60Uub6Z7e/kVPuXWrW4bDyULd1d1NoSibnFZi+vGY0Lc1ctDW
+2Vl7A8RFTcQi6Cjx/FwgPGJTBE4UMjIBO3wnoPQBMrsSxeGhcarerqIlEafgT4XN
+p9BMtRyaXE7TTb1BXc35ZYNJLDLJKQxABhrEHtFreQKBgQDpiGwuKAFK8BLPlbAx
+zkShhKd9fhlwm2bfRv3cojPQZsxn0BjefmtrISbKCD79Ivyn7TnOyYAoKAxdp2q9
+wtz94aAXV2lfhUw2lhcb/aw4sXuY/s1XnVyoglOO8pYRCUN0o80pKuWFsaDyy/uL
+LhINff1oMNCa7vmMdu8Ccz0o/wKBgQDLOqdTQhSFs4f1yhlDDH3pqT6eKvtFNeRJ
+usxYDnAyRXHRqwhQ86z1nBZIgwXqq7PfO9V5Y/l6/2HmmA2ufjS8aBTNpCUMuvJk
+y98Z4hTjKRdnVlMUjHq9ahCixJVQ8pcCnWRFdeAwSKhHQiJEFLYeYOIrUeCIYJI4
+FiCshSPI3wKBgGU0ErWZ7p18FprRIs8itYlNhIwUxo+POPCPwloIDO5GblSa0Pwy
+yvhdIIMzOaDXtahMXN3pYtmEKX+4msBrnvuC+K7E2cxkZtfNCWy+7RCQkaCG45QR
+hOMdv3pWVIRDgHEevz0U8uySQs6VaYgySe6A5/1sEiriX1DpBcEJEbsfAoGAKUCb
+rGvSbJ1XsM24OQL1IBQJsON6o77fuxOe3RT5M0sjYnL8OipsZmKrp0ZpUgxOc7ba
+i0x+3LewMLWWuV/G5qOd7WwvVRkxkMJNZByfLskthf1g2d/2HjLEc7XBtW+4tYAr
+VWoq+sIU3noPKJCnsxzpa++vyx8HLzlWoo5YCDMCgYBJvGH2zMgInlQNO/2XY5nl
+E53EZMex+RDq8Wzr4tRM3IrCGc2t8WKEQ/9teKNH0tg9xib0vhqqmiGl1xNfqJVo
+ePJyfgFabeUx9goG3mgTdV9woSRlBJso62dM0DAC/jsJoHnVzgokysR4/BfW9Da+
+AYTxRZSNbfmsTHawXqG8Fw==
+-----END PRIVATE KEY-----
--- a/src/components/baruser/BarNavigation.vue
+++ b/src/components/baruser/BarNavigation.vue
@ -0,0 +1,20 @@
+<template>
+  <v-list>
+    <v-list-item link to="/main/bar/geruecht">
+      <v-list-item-icon>
+        <v-icon>local_drink</v-icon>
+      </v-list-item-icon>
+      <v-list-item-title>
+        Geruecht
+      </v-list-item-title>
+    </v-list-item>
+  </v-list>
+</template>
+
+<script>
+export default {
+  name: 'BarNavigation'
+}
+</script>
+
+<style scoped></style>
--- a/src/components/finanzer/FinanzerNavigation.vue
+++ b/src/components/finanzer/FinanzerNavigation.vue
@ -0,0 +1,49 @@
+<template>
+  <div>
+    <v-list>
+      <v-list-item
+        class="title"
+        link
+        to="/main/finanzer/overview"
+      >
+        <v-list-item-icon>
+          <v-icon>home</v-icon>
+        </v-list-item-icon>
+        <v-list-item-title>Gesamtübersicht</v-list-item-title>
+      </v-list-item>
+    </v-list>
+    <v-divider />
+    <v-list>
+      <div v-for="user in users" v-bind:key="users.indexOf(user)">
+        <v-list-item
+          :to="{ name: 'activeUser', params: { id: user.username } }"
+          link
+        >
+          <v-list-item-title
+            >{{ user.lastname }}, {{ user.firstname }}
+          </v-list-item-title>
+        </v-list-item>
+      </div>
+    </v-list>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+export default {
+  name: 'FinanzerNavigation',
+  methods: {
+    ...mapActions({
+      addUser: 'finanzerUsers/addUser',
+    })
+  },
+  computed: {
+    ...mapGetters({
+      users: 'finanzerUsers/users',
+      allUsers: 'finanzerUsers/allUsers'
+    })
+  }
+}
+</script>
+
+<style scoped></style>
--- a/src/components/finanzer/Overview.vue
+++ b/src/components/finanzer/Overview.vue
@ -1,5 +1,5 @@
 <template>
-  <div>
+  <v-content>
    <v-toolbar tile>
      <v-toolbar-title>Gesamtübersicht</v-toolbar-title>
      <v-spacer />
@ -17,12 +17,23 @@
      <v-spacer />
      <v-toolbar-items>
        <v-btn text @click="sendMails">Emails senden</v-btn>
-        <v-text-field
-          v-model="filter"
-          style="margin-top: 3px"
-          append-icon="search"
+        <v-autocomplete
          outlined
-        ></v-text-field>
+          return-object
+          v-model="user"
+          style="margin-top: 3px"
+          placeholder="Suche Person"
+          :items="allUsers"
+          item-text="fullName"
+          prepend-inner-icon="search"
+          full-width
+          :search-input.sync="filter"
+        />
+        <v-btn
+          text
+          @click="addToUser(user)"
+          >Hinzufügen</v-btn
+        >
      </v-toolbar-items>
    </v-toolbar>
    <v-expand-transition>
@ -189,7 +200,7 @@
        </v-container>
      </v-card>
    </div>
-  </div>
+  </v-content>
 </template>

 <script>
@ -204,6 +215,7 @@ export default {
      errorExpand: false,

      filter: '',
+      user: null,

      amount: null,
      isNumber: value => !isNaN(value) || 'Betrag muss eine Zahl sein.',
@ -238,7 +250,8 @@ export default {
      addAmount: 'finanzerUsers/addAmount',
      addCredit: 'finanzerUsers/addCredit',
      countYear: 'finanzerUsers/countYear',
-      sendMails: 'finanzerUsers/sendMails'
+      sendMails: 'finanzerUsers/sendMails',
+      addUser: 'finanzerUsers/addUser'
    }),
    async getData(promise) {
      return await promise
@ -307,10 +320,18 @@ export default {
      )
    },
    isFiltered(user) {
+      try {
        return (
          user.firstname.toLowerCase().includes(this.filter.toLowerCase()) ||
          user.lastname.toLowerCase().includes(this.filter.toLowerCase())
        )
+      } catch (e) {
+        return true
+      }
+    },
+    addToUser(user) {
+      this.addUser(user)
+      this.$router.push({name: 'activeUser', params: {id: user.username}})
    },
    createDefault() {
      this.amount = null
@ -344,6 +365,7 @@ export default {
    },
    ...mapGetters({
      users: 'finanzerUsers/users',
+      allUsers: 'finanzerUsers/allUsers',
      errorMails: 'finanzerUsers/errorMails',
      year: 'finanzerUsers/year',
      years: 'finanzerUsers/years',
--- a/src/components/finanzer/User.vue
+++ b/src/components/finanzer/User.vue
@ -1,15 +1,21 @@
 <template>
-  <div>
+  <v-content v-if="activeUser">
    <v-toolbar tile>
-      <v-toolbar-title>{{activeUser.lastname}}, {{activeUser.firstname}}</v-toolbar-title>
+      <v-toolbar-title
+        >{{ activeUser.lastname }}, {{ activeUser.firstname }}</v-toolbar-title
+      >
      <v-spacer />
      <v-toolbar-items>
-        <v-btn @click="sendMail({username: activeUser.username})" text>Email senden</v-btn>
+        <v-btn @click="sendMail({ username: activeUser.username })" text
+          >Email senden</v-btn
+        >
      </v-toolbar-items>
    </v-toolbar>
    <v-expand-transition>
      <v-card style="margin-top: 3px" v-show="errorMail">
-        <v-alert dense :type="computeError(errorMail)">{{errorMessage(errorMail)}}</v-alert>
+        <v-alert dense :type="computeError(errorMail)">{{
+          errorMessage(errorMail)
+        }}</v-alert>
      </v-card>
    </v-expand-transition>
    <v-card style="margin-top: 3px;">
@ -24,12 +30,16 @@
              <v-chip
                outlined
                :text-color="getLockedColor(activeUser.locked)"
-              >{{activeUser.locked ? 'Gesperrt': 'nicht Gesperrt'}}</v-chip>
+                >{{ activeUser.locked ? 'Gesperrt' : 'nicht Gesperrt' }}</v-chip
+              >
            </v-col>
            <v-col>
              <v-btn
-                @click="doLock({user: activeUser, locked: !activeUser.locked})"
-              >{{activeUser.locked ? 'Entperren' : 'Sperren'}}</v-btn>
+                @click="
+                  doLock({ user: activeUser, locked: !activeUser.locked })
+                "
+                >{{ activeUser.locked ? 'Entperren' : 'Sperren' }}</v-btn
+              >
            </v-col>
          </v-row>
          <v-divider style="margin-bottom: 15px;" />
@ -46,7 +56,10 @@
                return-object
                v-model="autoLock"
                label="Automatische Sperre"
-                :items="[{value: true, text: 'Aktiviert'}, {value: false, text: 'Deaktiviert'}]"
+                :items="[
+                  { value: true, text: 'Aktiviert' },
+                  { value: false, text: 'Deaktiviert' }
+                ]"
                item-text="text"
                item-value="value"
              />
@ -55,8 +68,15 @@
          <v-row>
            <v-btn
              block
-              @click="saveConfig({user: activeUser, limit: limit, autoLock: autoLock.value})"
-            >Speichern</v-btn>
+              @click="
+                saveConfig({
+                  user: activeUser,
+                  limit: limit,
+                  autoLock: autoLock.value
+                })
+              "
+              >Speichern</v-btn
+            >
          </v-row>
        </v-form>
      </v-card-text>
@ -67,14 +87,21 @@
        <v-form style="margin-left: 15px; margin-right: 15px">
          <v-row>
            <v-col>
-              <v-text-field :rules="[isNumber]" label="Betrag" v-model="amount"></v-text-field>
+              <v-text-field
+                :rules="[isNumber]"
+                label="Betrag"
+                v-model="amount"
+              ></v-text-field>
            </v-col>
            <v-col>
              <v-select
                return-object
                v-model="type"
                label="Typ"
-                :items="[{value: 'amount', text: 'Schulden'}, {value: 'credit', text: 'Guthaben'}]"
+                :items="[
+                  { value: 'amount', text: 'Schulden' },
+                  { value: 'credit', text: 'Guthaben' }
+                ]"
                item-text="text"
                item-value="value"
              ></v-select>
@ -108,7 +135,7 @@
    </v-card>
    <div v-for="year in years" :key="years.indexOf(year)">
      <v-card style="margin-top: 3px;">
-        <v-card-title>{{year}}</v-card-title>
+        <v-card-title>{{ year }}</v-card-title>
        <Table v-bind:user="activeUser" v-bind:year="year" />
        <v-container fluid>
          <v-col>
@ -119,8 +146,13 @@
              <v-col>
                <v-chip
                  outlined
-                  :text-color="getLastColor(activeUser.creditList[year][1].last)"
-                >{{(activeUser.creditList[year][1].last / 100).toFixed(2)}}</v-chip>
+                  :text-color="
+                    getLastColor(activeUser.creditList[year][1].last)
+                  "
+                  >{{
+                    (activeUser.creditList[year][1].last / 100).toFixed(2)
+                  }}</v-chip
+                >
              </v-col>
              <v-col>
                <v-label>Gesamt:</v-label>
@ -129,10 +161,23 @@
                <v-chip
                  outlined
                  x-large
-                  :text-color="getLastColor(getAllSum(activeUser.creditList[year][2].sum ,activeUser.creditList[year][1].last))"
+                  :text-color="
+                    getLastColor(
+                      getAllSum(
+                        activeUser.creditList[year][2].sum,
+                        activeUser.creditList[year][1].last
+                      )
+                    )
+                  "
                >
-                  {{(getAllSum(activeUser.creditList[year][2].sum ,activeUser.creditList[year][1].last) /
-                  100).toFixed(2)}}
+                  {{
+                    (
+                      getAllSum(
+                        activeUser.creditList[year][2].sum,
+                        activeUser.creditList[year][1].last
+                      ) / 100
+                    ).toFixed(2)
+                  }}
                </v-chip>
              </v-col>
            </v-row>
@ -140,7 +185,7 @@
        </v-container>
      </v-card>
    </div>
-  </div>
+  </v-content>
 </template>

 <script>
@ -148,6 +193,9 @@ import Table from './Table'
 import { mapGetters, mapActions } from 'vuex'
 export default {
  name: 'User',
+  props: {
+    id: String
+  },
  components: { Table },
  data() {
    return {
@ -180,11 +228,7 @@ export default {
    }
  },
  created() {
-    this.limit = (this.activeUser.limit / 100).toFixed(2)
-    this.autoLock = {
-      value: this.activeUser.autoLock,
-      text: this.activeUser.autoLock ? 'Aktiviert' : 'Deaktiviert'
-    }
+    this.setActiveUser(this.$route.params.id)
  },
  methods: {
    ...mapActions({
@ -192,7 +236,8 @@ export default {
      addCredit: 'finanzerUsers/addCredit',
      sendMail: 'finanzerUsers/sendMail',
      doLock: 'finanzerUsers/doLock',
-      saveConfig: 'finanzerUsers/saveConfig'
+      saveConfig: 'finanzerUsers/saveConfig',
+      setActiveUser: 'finanzerUsers/setActiveUser'
    }),
    getLastColor(value) {
      return value < 0 ? 'red' : 'green'
@ -296,15 +341,19 @@ export default {
  },
  watch: {
    activeUser(newVal) {
+      console.log(newVal)
      this.limit = (newVal.limit / 100).toFixed(2)
      this.autoLock = {
        value: newVal.autoLock,
        text: newVal.autoLock ? 'Aktiviert' : 'Deaktiviert'
      }
+    },
+    id(newVal) {
+      console.log(newVal)
+      this.setActiveUser(newVal)
    }
  }
 }
 </script>

-<style scoped>
-</style>
+<style scoped></style>
--- a/src/components/user/UserNavigation.vue
+++ b/src/components/user/UserNavigation.vue
@ -0,0 +1,26 @@
+<template>
+  <v-list>
+    <v-list-item link to="/main/user/add">
+      <v-list-item-icon>
+        <v-icon>home</v-icon>
+      </v-list-item-icon>
+      <v-list-item-title>
+        Home
+      </v-list-item-title>
+    </v-list-item>
+    <v-list-item link to="/main/user/overview">
+      <v-list-item-icon>
+        <v-icon>account_balance</v-icon>
+      </v-list-item-icon>
+      <v-list-item-title>Finanzübersicht</v-list-item-title>
+    </v-list-item>
+  </v-list>
+</template>
+
+<script>
+export default {
+  name: 'UserNavigation'
+}
+</script>
+
+<style scoped></style>
--- a/src/plugins/routes.js
+++ b/src/plugins/routes.js
@ -1,5 +1,5 @@
 //const main = 'http://192.168.5.118:5000/'
-const main = 'http://localhost:5000/'
+const main = 'https://localhost:5000/'

 const url = {
  login: main + 'login',
--- a/src/router/index.js
+++ b/src/router/index.js
@ -9,6 +9,11 @@ import CreditOverview from '../components/user/CreditOverview'
 import MainView from '../views/MainView'
 import UserView from '../views/UserView'
 import BarView from '../views/BarView'
+import UserNavigation from '../components/user/UserNavigation'
+import BarNavigation from '../components/baruser/BarNavigation'
+import FinanzerNavigation from '../components/finanzer/FinanzerNavigation'
+import Overview from '../components/finanzer/Overview'
+import User from '../components/finanzer/User'

 Vue.use(VueRouter)

@ -18,11 +23,6 @@ const routes = [
    name: 'login',
    component: Login
  },
-  {
-    path: '/finanzer',
-    name: 'finanzer',
-    component: FinanzerView
-  },
  {
    path: '/main',
    name: 'main',
@ -31,7 +31,7 @@ const routes = [
      {
        path: 'user',
        name: 'user',
-        component: UserView,
+        components: { userNav: UserNavigation, default: UserView },
        children: [
          {
            path: 'add',
@ -48,7 +48,7 @@ const routes = [
      {
        path: 'bar',
        name: 'bar',
-        component: BarView,
+        components: { userNav: BarNavigation, default: BarView },
        children: [
          {
            path: 'geruecht',
@ -60,7 +60,19 @@ const routes = [
      {
        path: 'finanzer',
        name: 'finanzer',
-        component: FinanzerView
+        components: { default: FinanzerView, finanzerNav: FinanzerNavigation },
+        children: [
+          {
+            path: 'overview',
+            component: Overview
+          },
+          {
+            path: 'user/:id',
+            name: 'activeUser',
+            props: true,
+            component: User
+          }
+        ]
      }
    ]
  },
--- a/src/store/modules/finanzerUsers.js
+++ b/src/store/modules/finanzerUsers.js
@ -4,9 +4,7 @@ import url from '@/plugins/routes'

 const state = {
  users: [],
-  activeUser: {
-    username: null
-  },
+  activeUser: '',
  allUsers: [],
  user: null,
  errorMails: null,
@ -38,13 +36,8 @@ const mutations = {
        state.allUsers[i].firstname + ' ' + state.allUsers[i].lastname
    }
  },
-  setActiveUser: (state, user) => {
-    if (state.activeUser.username === user.username) {
-      state.activeUser = { username: null }
-    } else {
-      state.activeUser = user
-    }
-    state.errorMail = null
+  setActiveUser: (state, username) => {
+    state.activeUser = username
  },
  setUsers: (state, users) => {
    for (let user in users) {
@ -256,8 +249,8 @@ const actions = {
          dispatch('logout', null, { root: true })
    }
  },
-  setActiveUser({ commit }, user) {
-    commit('setActiveUser', user)
+  setActiveUser({ commit }, username) {
+    commit('setActiveUser', username)
  },
  async addAmount({ commit, rootState, dispatch }, data) {
    try {
@ -390,7 +383,9 @@ const getters = {
    return state.users
  },
  activeUser: state => {
-    return state.activeUser
+    return state.users.find(user => {
+      return user.username === state.activeUser
+    })
  },
  allUsers: state => {
    return state.allUsers
--- a/src/store/modules/login.js
+++ b/src/store/modules/login.js
@ -55,7 +55,7 @@ const actions = {
      commit('loginStop', null)
      commit('updateAccessToken', response.data)
      if (state.user.group.includes('moneymaster')) {
-        router.push('/main/finanzer')
+        router.push('/main/finanzer/overview')
      } else if (state.user.group.includes('bar')) {
        router.push('/main/bar/geruecht')
      } else if (state.user.group.includes('user')) {
--- a/src/views/FinanzerView.vue
+++ b/src/views/FinanzerView.vue
@ -9,32 +9,6 @@
      overflow
      right
    >
-      <v-list>
-        <v-list-item class="title" link @click="setActiveUser(activeUser)">
-          <v-list-item-icon>
-            <v-icon>home</v-icon>
-          </v-list-item-icon>
-          <v-list-item-title>Gesamtübersicht</v-list-item-title>
-        </v-list-item>
-      </v-list>
-      <v-divider />
-      <v-list>
-        <v-list-item
-          v-for="user in users"
-          v-bind:key="users.indexOf(user)"
-          :class="
-            user.username === activeUser.username
-              ? 'v-list-item--highlighted'
-              : ''
-          "
-          link
-          @click="setActiveUser(user)"
-        >
-          <v-list-item-title
-            >{{ user.lastname }}, {{ user.firstname }}</v-list-item-title
-          >
-        </v-list-item>
-      </v-list>
      <template v-slot:append>
        <v-list>
          <v-list-item>
@ -66,25 +40,18 @@
        </v-list>
      </template>
    </v-navigation-drawer>
-    <v-content v-if="!activeUser.username">
-      <Overview />
-    </v-content>
-    <v-content v-else>
-      <User />
-    </v-content>
+    <router-view />
  </div>
 </template>

 <script>
-import Overview from '../components/finanzer/Overview'
-import User from '../components/finanzer/User'
 // eslint-disable-next-line no-unused-vars
 import { mapGetters } from 'vuex'
 import { mapActions } from 'vuex'

 export default {
  name: 'FinanzerView',
-  components: { User, Overview },
+  components: {},
  created() {
    this.getAllUsers()
    this.getUsers()
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@ -24,7 +24,7 @@
            Gerüchte
          </v-list-item-title>
        </v-list-item>
-        <v-list-item v-if="isFinanzer" class="title" link to="/main/finanzer">
+        <v-list-item v-if="isFinanzer" class="title" link to="/main/finanzer/overview">
          <v-list-item-icon>
            <v-icon>attach_money</v-icon>
          </v-list-item-icon>
@ -32,14 +32,9 @@
        </v-list-item>
      </v-list>
      <v-divider />
-      <v-list v-if="isUser">
-        <v-list-item link to="/main/user/overview">
-          <v-list-item-icon>
-            <v-icon>account_balance</v-icon>
-          </v-list-item-icon>
-          <v-list-item-title>Finanzübersicht</v-list-item-title>
-        </v-list-item>
-      </v-list>
+      <router-view name="finanzerNav" />
+      <router-view name="userNav"/>
+      <router-view name="barNav"/>
      <template v-slot:append>
        <v-list>
          <v-list-item>
--- a/vue.config.js
+++ b/vue.config.js
@ -1,8 +1,12 @@
+//const fs = require('fs')
+
 module.exports = {
-  "transpileDependencies": [
-    "vuetify"
-  ],
+  transpileDependencies: ['vuetify'],
  devServer: {
    disableHostCheck: true
+    // https: {
+    //   key: fs.readFileSync('./cert/server.key'),
+    //   cert: fs.readFileSync('./cert/server.crt')
+    // }
  }
 }