Merge pull request #202 from gradido/refactor-cookies

refactor: Remove Cookies
2025-12-13 07:45:54 +00:00 · 2021-04-20 16:10:37 +02:00 · 2021-04-20 16:10:37 +02:00 · efc97f0d10
commit efc97f0d10
parent ac2ba2b3de 80e8314ee8
14 changed files with 111 additions and 131 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@ -65,7 +65,6 @@
    "vue-cli-plugin-i18n": "^1.0.1",
    "vue-clickaway": "^2.2.2",
    "vue-clipboard2": "^0.3.0",
-    "vue-cookies": "^1.7.4",
    "vue-flatpickr-component": "^8.1.2",
    "vue-good-table": "^2.21.3",
    "vue-i18n": "^8.22.4",
@ -75,7 +74,8 @@
    "vue-qrcode-reader": "^2.3.16",
    "vue-router": "^3.0.6",
    "vue2-transitions": "^0.2.3",
-    "vuex": "^3.6.0"
+    "vuex": "^3.6.0",
+    "vuex-persistedstate": "^4.0.0-beta.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.7.0",
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@ -17,7 +17,7 @@
    </header>
    <div class="">
      <particles-bg type="custom" :config="config" :bg="true" />
-      <component :is="$store.state.session_id ? 'DashboardLayout' : 'AuthLayoutGDD'" />
+      <component :is="$route.meta.requiresAuth ? 'DashboardLayout' : 'AuthLayoutGDD'" />
    </div>
  </div>
 </template>
@ -38,34 +38,9 @@ export default {
  },
  data() {
    return {
-      session_id: null,
-      email: '',
      language: 'en',
    }
  },
-  created() {
-    //console.log('xx', $cookies.get('gdd_lang'))
-    //console.log('%cWillkommen bei Gradido %cgreen text', 'font-weight:bold', 'color: green')
-    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'))
-      if ($cookies.get('gdd_lang') != 'de' || $cookies.get('gdd_lang') != 'de') {
-        this.$store.commit('language', 'de')
-      } else {
-        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')
-      if (this.$route.path == '/reset') {
-      } else {
-        this.$store.dispatch('logout')
-      }
-    }
-  },
  data() {
    return {
      config: {
--- a/frontend/src/components/BaseAlert.vue
+++ b/frontend/src/components/BaseAlert.vue
@ -69,7 +69,6 @@ export default {
  methods: {
    dismissAlert() {
      this.visible = false
-      this.$store.state.loginfail = false
    },
  },
 }
--- a/frontend/src/components/SidebarPlugin/SideBar.vue
+++ b/frontend/src/components/SidebarPlugin/SideBar.vue
@ -15,7 +15,7 @@
      <slot name="mobile-right">
        <ul class="nav align-items-center d-md-none">
          <base-dropdown class="nav-item" menu-on-right tag="li" title-tag="a">
-            <a slot="title-container" class="nav-link" href="#" role="button">
+            <a slot="title-container" class="nav-link" role="button">
              <div class="media align-items-center">
                <span class="avatar avatar-sm">
                  <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
@ -40,10 +40,10 @@
              <span>Transactions</span>
            </router-link>
            <!--
-                <router-link to="/activity" class="dropdown-item  text-lg text-muted">
-                    <i class="ni ni-calendar-grid-58"></i>
-                    <span>{{ $t('site.navbar.activity') }}</span>
-                </router-link>
+                 <router-link to="/activity" class="dropdown-item  text-lg text-muted">
+                 <i class="ni ni-calendar-grid-58"></i>
+                 <span>{{ $t('site.navbar.activity') }}</span>
+                 </router-link>
            -->
            <div class="dropdown-divider"></div>
            <div @click="logout" class="dropdown-item text-lg text-muted">
@ -88,7 +88,7 @@
        <hr class="my-3" />
        <ul class="navbar-nav mb-md-3">
          <li class="nav-item">
-            <a class="nav-link text-lg" href="#!" @click="logout">
+            <a class="nav-link text-lg" @click="logout">
              {{ $t('logout') }}
            </a>
          </li>
@ -133,6 +133,7 @@ export default {
    },
    logout() {
      this.$store.dispatch('logout')
+      this.$router.push('/login')
    },
  },
  beforeDestroy() {
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@ -3,7 +3,6 @@ import DashboardPlugin from './plugins/dashboard-plugin'
 import App from './App.vue'
 import i18n from './i18n.js'
 import VeeValidate from './vee-validate.js'
-import VueCookies from 'vue-cookies'

 // store
 import { store } from './store/store'
@ -14,7 +13,14 @@ import router from './routes/router'
 // plugin setup
 Vue.use(DashboardPlugin)
 Vue.config.productionTip = false
-Vue.use(VueCookies)
+
+router.beforeEach((to, from, next) => {
+  if (to.meta.requiresAuth && !store.state.session_id) {
+    next({ path: '/login' })
+  } else {
+    next()
+  }
+})

 /* eslint-disable no-new */
 new Vue({
--- a/frontend/src/routes/router.js
+++ b/frontend/src/routes/router.js
@ -20,8 +20,4 @@ const router = new VueRouter({
  },
 })

-router.beforeEach((to, from, next) => {
-  next()
-})
-
 export default router
--- a/frontend/src/routes/routes.js
+++ b/frontend/src/routes/routes.js
@ -1,6 +1,12 @@
 import NotFound from '@/views/NotFoundPage.vue'

 const routes = [
+  {
+    path: '/',
+    redirect: (to) => {
+      return { path: '/login' }
+    },
+  },
  {
    path: '/overview',
    component: () => import('../views/Pages/KontoOverview.vue'),
@ -11,18 +17,30 @@ const routes = [
  {
    path: '/profile',
    component: () => import('../views/Pages/UserProfileCard.vue'),
+    meta: {
+      requiresAuth: true,
+    },
  },
  {
    path: '/profileedit',
    component: () => import('../views/Pages/UserProfileEdit.vue'),
+    meta: {
+      requiresAuth: true,
+    },
  },
  {
    path: '/activity',
    component: () => import('../views/Pages/UserProfileActivity.vue'),
+    meta: {
+      requiresAuth: true,
+    },
  },
  {
    path: '/transactions',
    component: () => import('../views/Pages/UserProfileTransactionList.vue'),
+    meta: {
+      requiresAuth: true,
+    },
  },
  {
    path: '/login',
--- a/frontend/src/store/store.js
+++ b/frontend/src/store/store.js
@ -1,18 +1,20 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
-import router from '../routes/router.js'
 import loginAPI from '../apis/loginAPI'
 import communityAPI from '../apis/communityAPI'
+import createPersistedState from 'vuex-persistedstate'

 export const store = new Vuex.Store({
+  plugins: [
+    createPersistedState({
+      storage: window.sessionStorage,
+    }),
+  ],
  state: {
    session_id: null,
    email: '',
    language: 'en',
-    sizeDE: 'normal',
-    sizeGB: 'big',
-    loginfail: false,
    user: {
      name: '',
      balance: 0,
@ -31,89 +33,45 @@ export const store = new Vuex.Store({
  // Syncronous mutation of the state
  mutations: {
    language: (state, language) => {
-      //console.log('mutation: language', language)
      state.language = language
-      $cookies.set('gdd_lang', language)
-      if (state.language == 'de') {
-        state.sizeDE = 'big'
-        state.sizeGB = 'normal'
-      } else {
-        state.sizeDE = 'normal'
-        state.sizeGB = 'big'
-      }
-    },
-    loginfail: (state, loginfail) => {
-      //console.log('mutation: email')
-      state.loginfail = loginfail
    },
    email: (state, email) => {
-      //console.log('mutation: email')
      state.email = email
    },
    session_id: (state, session_id) => {
-      //console.log('mutation: session_id')
      state.session_id = session_id
    },
    user_balance: (state, balance) => {
-      //console.log('mutation: user_balance')
      state.user.balance = balance / 10000
    },
    user_balance_gdt: (state, balance) => {
-      //console.log('mutation: user_balance_gdt')
      state.user.balance_gdt = balance / 10000
    },
  },
  actions: {
    login: async ({ dispatch, commit }, data) => {
-      const result = await loginAPI.login(data.email, data.password)
-      if (result.success) {
-        commit('session_id', result.result.data.session_id)
-        commit('email', data.email)
-        $cookies.set('gdd_session_id', result.result.data.session_id)
-        $cookies.set('gdd_u', data.email)
-        router.push('/overview')
-      } else {
-        commit('loginfail', true)
-
-        //dispatch('logout')
-      }
+      commit('session_id', data.session_id)
+      commit('email', data.email)
+    },
+    passwordReset: async (data) => {},
+    schoepfen: async (data) => {
+      // http://localhost/transaction-creations/ajaxCreate
    },
    createUser: async ({ commit, dispatch }, data) => {
-      // console.log('action: createUser')
-      const result = await loginAPI.create(
-        data.email,
-        data.first_name,
-        data.last_name,
-        data.password,
-      )
-      if (result.success) {
-        commit('session_id', result.result.data.session_id)
-        commit('email', data.email)
-        $cookies.set('gdd_session_id', result.result.data.session_id)
-        $cookies.set('gdd_u', data.email)
-        router.push('/overview')
-      } else {
-        // Register failed, we perform a logout
-        // console.log('action createUser to  logout start')
-        dispatch('logout')
-      }
+      commit('session_id', data.session_id)
+      commit('email', data.email)
    },
    logout: async ({ commit, state }) => {
-      //console.log('action: logout')
      if (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('email', null)
-      $cookies.remove('gdd_session_id')
-      $cookies.remove('gdd_u')
-      $cookies.remove('gdd_lang')
-      router.push('/Login')
+      sessionStorage.clear()
    },
    accountBalance: async ({ commit, dispatch, state }) => {
-      const result = await communityAPI.balance($cookies.get('gdd_session_id'))
+      const result = await communityAPI.balance(state.session_id)
      if (result.success) {
        commit('user_balance', result.result.data.balance)
      } else {
--- a/frontend/src/views/Layout/DashboardNavbar.vue
+++ b/frontend/src/views/Layout/DashboardNavbar.vue
@ -45,15 +45,15 @@
          <b-dropdown-header class="noti-title">
            <h6 class="text-overflow m-0">{{ $t('welcome') }}</h6>
          </b-dropdown-header>
-          <b-dropdown-item href="#!" to="/overview">
+          <b-dropdown-item to="/overview">
            <i class="ni ni-single-02"></i>
            <span>{{ $t('site.overview.account_overview') }}</span>
          </b-dropdown-item>
-          <b-dropdown-item href="#!" to="/profile">
+          <b-dropdown-item to="/profile">
            <i class="ni ni-single-02"></i>
            <span>{{ $t('site.navbar.my-profil') }}</span>
          </b-dropdown-item>
-          <b-dropdown-item href="#!" to="/profileedit">
+          <b-dropdown-item to="/profileedit">
            <i class="ni ni-settings-gear-65"></i>
            <span>{{ $t('site.navbar.settings') }}</span>
          </b-dropdown-item>
@ -64,7 +64,7 @@
          </b-dropdown-item>
          -->
          <div class="dropdown-divider"></div>
-          <b-dropdown-item href="#!" @click="logout">
+          <b-dropdown-item @click="logout">
            <i class="ni ni-user-run"></i>
            <span>{{ $t('logout') }}</span>
          </b-dropdown-item>
@ -116,8 +116,8 @@ export default {
      this.activeNotifications = false
    },
    logout() {
-      //console.log("DashboardNavbar.vue user logout() : ")
      this.$store.dispatch('logout')
+      this.$router.push('/login')
    },
  },
 }
--- a/frontend/src/views/Pages/KontoOverview.spec.js
+++ b/frontend/src/views/Pages/KontoOverview.spec.js
@ -1,7 +1,6 @@
 import { shallowMount } from '@vue/test-utils'
 import KontoOverview from './KontoOverview'
 import Vuex from 'vuex'
-import VueCookies from 'vue-cookies'

 const localVue = global.localVue

--- a/frontend/src/views/Pages/KontoOverview.vue
+++ b/frontend/src/views/Pages/KontoOverview.vue
@ -40,7 +40,7 @@ export default {
    GddTable,
  },
  created() {
-    this.$store.dispatch('accountBalance', $cookies.get('gdd_session_id'))
+    this.$store.dispatch('accountBalance', this.$store.state.session_id)
  },
  methods: {
    setRows(rows) {
--- a/frontend/src/views/Pages/Login.vue
+++ b/frontend/src/views/Pages/Login.vue
@ -45,7 +45,7 @@
                    v-model="model.password"
                  ></base-input>

-                  <b-alert v-show="$store.state.loginfail" show variant="warning">
+                  <b-alert v-show="loginfail" show variant="warning">
                    <span class="alert-text bv-example-row">
                      <b-row>
                        <b-col class="col-9 text-left">
@ -98,6 +98,8 @@
  </div>
 </template>
 <script>
+import loginAPI from '../../apis/loginAPI'
+
 export default {
  name: 'login',
  data() {
@ -107,17 +109,24 @@ export default {
        password: '',
        // rememberMe: false
      },
+      loginfail: false,
    }
  },
  methods: {
-    onSubmit() {
-      this.$store.dispatch('login', {
-        email: this.model.email,
-        password: this.model.password,
-      })
+    async onSubmit() {
+      const result = await loginAPI.login(this.model.email, this.model.password)
+      if (result.success) {
+        this.$store.dispatch('login', {
+          session_id: result.result.data.session_id,
+          email: this.model.email,
+        })
+        this.$router.push('/overview')
+      } else {
+        this.loginfail = true
+      }
    },
    closeAlert() {
-      this.$store.state.loginfail = false
+      this.loginfail = false
    },
  },
 }
--- a/frontend/src/views/Pages/Register.vue
+++ b/frontend/src/views/Pages/Register.vue
@ -141,6 +141,8 @@
  </div>
 </template>
 <script>
+import loginAPI from '../../apis/loginAPI'
+
 export default {
  name: 'register',
  data() {
@ -167,19 +169,28 @@ export default {
    togglePasswordVisibility() {
      this.passwordVisible = !this.passwordVisible
    },
-    onSubmit() {
-      this.$store.dispatch('createUser', {
-        email: this.model.email,
-        first_name: this.model.firstname,
-        last_name: this.model.lastname,
-        emailType: 2,
-        password: this.model.password,
-      })
-      this.model.email = ''
-      this.model.firstname = ''
-      this.model.lastname = ''
-      this.model.password = ''
-      this.$router.push('/thx')
+    async onSubmit() {
+      const result = await loginAPI.create(
+        this.model.email,
+        this.model.firstname,
+        this.model.lastname,
+        this.password,
+      )
+      if (result.success) {
+        this.$store.dispatch('createUser', {
+          session_id: result.result.data.session_id,
+          email: this.model.email,
+        })
+        this.model.email = ''
+        this.model.firstname = ''
+        this.model.lastname = ''
+        this.password = ''
+        this.$router.push('/thx')
+      } else {
+        // todo: Display a proper error message!
+        this.$store.dispatch('logout')
+        this.$router.push('/login')
+      }
    },
  },
  computed: {
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@ -11879,6 +11879,11 @@ shellwords@^0.1.1:
  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
  integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==

+shvl@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/shvl/-/shvl-2.0.3.tgz#eb4bd37644f5684bba1fc52c3010c96fb5e6afd1"
+  integrity sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw==
+
 sigmund@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
@ -13244,11 +13249,6 @@ vue-clipboard2@^0.3.0:
  dependencies:
    clipboard "^2.0.0"

-vue-cookies@^1.7.4:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/vue-cookies/-/vue-cookies-1.7.4.tgz#d241d0a0431da0795837651d10b4d73e7c8d3e8d"
-  integrity sha512-mOS5Btr8V9zvAtkmQ7/TfqJIropOx7etDAgBywPCmHjvfJl2gFbH2XgoMghleLoyyMTi5eaJss0mPN7arMoslA==
-
 vue-eslint-parser@^2.0.3:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"
@ -13406,6 +13406,14 @@ vue@^2.2.6, vue@^2.5.17, vue@^2.6.11:
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
  integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==

+vuex-persistedstate@^4.0.0-beta.3:
+  version "4.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/vuex-persistedstate/-/vuex-persistedstate-4.0.0-beta.3.tgz#89dd712de72d28e85cc95467d066002c1405f277"
+  integrity sha512-T4IRD27qoUWh+8qr6T6zVp15xO7x/nPgnU13OD0C2uUwA7U9PhGozrj6lvVmMYDyRgc36J0msMXn3GvwHjkIhA==
+  dependencies:
+    deepmerge "^4.2.2"
+    shvl "^2.0.2"
+
 vuex@^3.6.0:
  version "3.6.2"
  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"