Merge branch 'master' into 437-Bug-Mobile-Transaction-List-is-not-easy-to-read

.github/workflows/test.yml

@@ -212,7 +212,7 @@ jobs:
           report_name: Coverage Frontend
           type: lcov
           result_path: ./coverage/lcov.info
-          min_coverage: 18
+          min_coverage: 19
           token: ${{ github.token }}
   
   #test:

frontend/src/apis/loginAPI.js

@@ -1,5 +1,7 @@
 import axios from 'axios'
 import CONFIG from '../config'
+// eslint-disable-next-line no-unused-vars
+import regeneratorRuntime from 'regenerator-runtime'
 
 // control email-text sended with email verification code
 const EMAIL_TYPE = {
@@ -86,6 +88,16 @@ const loginAPI = {
     }
     return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)
   },
+  updateLanguage: async (sessionId, email, language) => {
+    const payload = {
+      session_id: sessionId,
+      email,
+      update: {
+        'User.language': language,
+      },
+    }
+    return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)
+  },
 }
 
 export default loginAPI

frontend/src/components/LanguageSwitch.spec.js

@@ -0,0 +1,95 @@
+import { mount } from '@vue/test-utils'
+import LanguageSwitch from './LanguageSwitch'
+
+const localVue = global.localVue
+
+describe('LanguageSwitch', () => {
+  let wrapper
+
+  const state = {
+    sessionId: 1234,
+    email: 'he@ho.he',
+    language: null,
+  }
+
+  const mocks = {
+    $store: {
+      state,
+      commit: jest.fn(),
+    },
+    $i18n: {
+      locale: 'en',
+    },
+  }
+
+  const Wrapper = () => {
+    return mount(LanguageSwitch, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div.language-switch').exists()).toBeTruthy()
+    })
+
+    describe('with locales en and de', () => {
+      describe('empty store', () => {
+        it('shows English as default navigator langauge', () => {
+          expect(wrapper.find('button.dropdown-toggle').text()).toBe('English - en')
+        })
+
+        describe('navigator language is "de-DE"', () => {
+          const mockNavigator = jest.fn(() => {
+            return 'de'
+          })
+
+          it('shows Deutsch as language ', async () => {
+            wrapper.vm.getNavigatorLanguage = mockNavigator
+            wrapper.vm.setCurrentLanguage()
+            await wrapper.vm.$nextTick()
+            expect(wrapper.find('button.dropdown-toggle').text()).toBe('Deutsch - de')
+          })
+        })
+
+        describe('navigator language is "es-ES" (not supported)', () => {
+          const mockNavigator = jest.fn(() => {
+            return 'es'
+          })
+
+          it('shows English as language ', async () => {
+            wrapper.vm.getNavigatorLanguage = mockNavigator
+            wrapper.vm.setCurrentLanguage()
+            await wrapper.vm.$nextTick()
+            expect(wrapper.find('button.dropdown-toggle').text()).toBe('English - en')
+          })
+        })
+      })
+
+      describe('language "de" in store', () => {
+        it('shows Deutsch as language', async () => {
+          wrapper.vm.$store.state.language = 'de'
+          wrapper.vm.setCurrentLanguage()
+          await wrapper.vm.$nextTick()
+          expect(wrapper.find('button.dropdown-toggle').text()).toBe('Deutsch - de')
+        })
+      })
+
+      describe('dropdown menu', () => {
+        it('has English and German as languages to choose', () => {
+          expect(wrapper.findAll('li')).toHaveLength(2)
+        })
+
+        it('has English as first language to choose', () => {
+          expect(wrapper.findAll('li').at(0).text()).toBe('English')
+        })
+
+        it('has German as second language to choose', () => {
+          expect(wrapper.findAll('li').at(1).text()).toBe('Deutsch')
+        })
+      })
+    })
+  })
+})

frontend/src/components/LanguageSwitch.vue

@@ -1,22 +1,72 @@
 <template>
   <div class="language-switch">
-    <b-dropdown size="sm" :text="$t('language') + ' - ' + $i18n.locale">
+    <b-dropdown size="sm" :text="currentLanguage.name + ' - ' + currentLanguage.code">
-      <b-dropdown-item @click.prevent="setLocale('de')">Deutsch</b-dropdown-item>
+      <b-dropdown-item
-      <b-dropdown-item @click.prevent="setLocale('en')">English</b-dropdown-item>
+        v-for="lang in locales"
+        @click.prevent="saveLocale(lang.code)"
+        :key="lang.code"
+      >
+        {{ lang.name }}
+      </b-dropdown-item>
     </b-dropdown>
   </div>
 </template>
 <script>
 import { localeChanged } from 'vee-validate'
+import locales from '../locales/'
+import loginAPI from '../apis/loginAPI'
 
 export default {
-  name: 'language-switch',
+  name: 'LanguageSwitch',
+  data() {
+    return {
+      locales: locales,
+      currentLanguage: {},
+    }
+  },
   methods: {
     setLocale(locale) {
       this.$i18n.locale = locale
       this.$store.commit('language', this.$i18n.locale)
+      this.currentLanguage = this.getLocaleObject(locale)
       localeChanged(locale)
     },
+    async saveLocale(locale) {
+      this.setLocale(locale)
+      if (this.$store.state.sessionId && this.$store.state.email) {
+        const result = await loginAPI.updateLanguage(
+          this.$store.state.sessionId,
+          this.$store.state.email,
+          locale,
+        )
+        if (result.success) {
+          // toast success message
+        } else {
+          // toast error message
+        }
+      }
+    },
+    getLocaleObject(code) {
+      return this.locales.find((l) => l.code === code)
+    },
+    getNavigatorLanguage() {
+      const lang = navigator.language
+      if (lang) return lang.split('-')[0]
+      return lang
+    },
+    setCurrentLanguage() {
+      let locale = this.$store.state.language || this.getNavigatorLanguage() || 'en'
+      let object = this.getLocaleObject(locale)
+      if (!object) {
+        locale = 'en'
+        object = this.getLocaleObject(locale)
+      }
+      this.setLocale(locale)
+      this.currentLanguage = object
+    },
+  },
+  created() {
+    this.setCurrentLanguage()
   },
 }
 </script>

frontend/src/components/SidebarPlugin/SideBar.spec.js

@@ -19,6 +19,7 @@ describe('SideBar', () => {
       state: {
         email: 'test@example.org',
       },
+      commit: jest.fn(),
     },
     $i18n: {
       locale: 'en',

frontend/src/locales/de.json

@@ -19,7 +19,6 @@
     "en": "English"
   },
   "form": {
-    "attention": "<strong>Achtung!</strong> Bitte überprüfe alle deine Eingaben sehr genau. Du bist alleine Verantwortlich für deine Entscheidungen. Versendete Gradidos können nicht wieder zurück geholt werden.",
     "cancel":"Abbrechen",
     "reset": "Zurücksetzen",
     "close":"schließen",
@@ -49,7 +48,7 @@
     "send_transaction_error":"Leider konnte die Transaktion nicht ausgeführt werden!",
     "validation": {
       "double": "Das Feld {field} muss eine Dezimalzahl mit zwei Nachkommastellen sein",
-      "is-not": "Du kannst Dir selbst keine Gradidos überweisen"
+      "is-not": "Du kannst dir selbst keine Gradidos überweisen"
     }
   },
   "error": {

frontend/src/locales/en.json

@@ -19,7 +19,6 @@
     "en": "English"
   },
   "form": {
-    "attention": "Attention! Please check all your entries very carefully. You are solely responsible for your decisions. Sent Gradidos cannot be retrieved.",
     "cancel":"Cancel",
     "reset": "Reset",
     "close":"Close",

frontend/src/locales/index.js

@@ -0,0 +1,16 @@
+const locales = [
+  {
+    name: 'English',
+    code: 'en',
+    iso: 'en-US',
+    enabled: true,
+  },
+  {
+    name: 'Deutsch',
+    code: 'de',
+    iso: 'de-DE',
+    enabled: true,
+  },
+]
+
+export default locales

frontend/src/store/store.js

@@ -18,7 +18,8 @@ export const mutations = {
 export const actions = {
   login: ({ dispatch, commit }, data) => {
     commit('sessionId', data.sessionId)
-    commit('email', data.email)
+    commit('email', data.user.email)
+    commit('language', data.user.language)
   },
   logout: ({ commit, state }) => {
     commit('sessionId', null)
@@ -36,7 +37,7 @@ export const store = new Vuex.Store({
   state: {
     sessionId: null,
     email: '',
-    language: 'en',
+    language: null,
     modals: false,
   },
   getters: {},

frontend/src/store/store.test.js

@@ -35,20 +35,37 @@ describe('Vuex store', () => {
       const commit = jest.fn()
       const state = {}
 
-      it('calls two commits', () => {
+      it('calls three commits', () => {
-        login({ commit, state }, { sessionId: 1234, email: 'someone@there.is' })
+        login(
-        expect(commit).toHaveBeenCalledTimes(2)
+          { commit, state },
+          { sessionId: 1234, user: { email: 'someone@there.is', language: 'en' } },
+        )
+        expect(commit).toHaveBeenCalledTimes(3)
       })
 
       it('commits sessionId', () => {
-        login({ commit, state }, { sessionId: 1234, email: 'someone@there.is' })
+        login(
+          { commit, state },
+          { sessionId: 1234, user: { email: 'someone@there.is', language: 'en' } },
+        )
         expect(commit).toHaveBeenNthCalledWith(1, 'sessionId', 1234)
       })
 
       it('commits email', () => {
-        login({ commit, state }, { sessionId: 1234, email: 'someone@there.is' })
+        login(
+          { commit, state },
+          { sessionId: 1234, user: { email: 'someone@there.is', language: 'en' } },
+        )
         expect(commit).toHaveBeenNthCalledWith(2, 'email', 'someone@there.is')
       })
+
+      it('commits language', () => {
+        login(
+          { commit, state },
+          { sessionId: 1234, user: { email: 'someone@there.is', language: 'en' } },
+        )
+        expect(commit).toHaveBeenNthCalledWith(3, 'language', 'en')
+      })
     })
 
     describe('logout', () => {

frontend/src/views/Layout/DashboardLayout_gdd.spec.js

@@ -44,6 +44,9 @@ describe('DashboardLayoutGdd', () => {
 
   const store = new Vuex.Store({
     state,
+    mutations: {
+      language: jest.fn(),
+    },
   })
 
   const Wrapper = () => {

frontend/src/views/Layout/DashboardNavbar.vue

@@ -15,7 +15,7 @@
           <span class="pb-2 text-lg font-weight-bold">
             {{ $store.state.email }}
           </span>
-          <b-media-body class="ml-2 d-none d-lg-block">
+          <b-media-body class="ml-2 d-none d-lg-block d-md-block">
             <span class="avatar">
               <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
             </span>

frontend/src/views/Pages/AccountOverview.spec.js

@@ -19,10 +19,6 @@ describe('AccountOverview', () => {
       wrapper = Wrapper()
     })
 
-    it('has a header', () => {
-      expect(wrapper.find('base-header-stub').exists()).toBeTruthy()
-    })
-
     it('has a status line', () => {
       expect(wrapper.find('gdd-status-stub').exists()).toBeTruthy()
     })

frontend/src/views/Pages/AccountOverview.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
-    <base-header class="pb-lg-4 pt-lg-2 bg-transparent"></base-header>
+    <b-container fluid class="p-lg-2 mt-lg-1">
-    <b-container fluid class="p-0 p-lg-2 mt-lg-5">
       <gdd-status
         v-if="showContext"
         :pending="pending"

frontend/src/views/Pages/AccountOverview/GddSend/TransactionConfirmation.vue

@@ -21,7 +21,6 @@
           <b-badge variant="primary" pill>{{ $t('form.date') }}</b-badge>
         </b-list-group-item>
       </b-list-group>
-      <hr />
       <b-row>
         <b-col>
           <b-button @click="$emit('on-reset')">{{ $t('form.cancel') }}</b-button>

frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.spec.js

@@ -35,12 +35,6 @@ describe('GddSend', () => {
       expect(wrapper.find('div.transaction-form').exists()).toBeTruthy()
     })
 
-    describe('warning messages', () => {
-      it('has a warning message', () => {
-        expect(wrapper.find('div.alert-default').find('span').text()).toBe('form.attention')
-      })
-    })
-
     describe('transaction form', () => {
       describe('email field', () => {
         it('has an input field of type email', () => {

frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.vue

@@ -1,9 +1,6 @@
 <template>
   <b-row class="transaction-form">
     <b-col xl="12" md="12">
-      <b-alert show dismissible variant="default" class="text-center">
-        <span class="alert-text h3 text-light" v-html="$t('form.attention')"></span>
-      </b-alert>
       <b-card class="p-0 p-md-3" style="background-color: #ebebeba3 !important">
         <!-- -<QrCode @set-transaction="setTransaction"></QrCode> -->
         <validation-observer v-slot="{ handleSubmit }" ref="formValidator">

frontend/src/views/Pages/Login.spec.js

@@ -1,5 +1,4 @@
 import { mount, RouterLinkStub } from '@vue/test-utils'
-import Vuex from 'vuex'
 import flushPromises from 'flush-promises'
 
 import Login from './Login'
@@ -16,20 +15,12 @@ describe('Login', () => {
     $t: jest.fn((t) => t),
   }
 
-  const state = {
-    loginfail: false,
-  }
-
-  const store = new Vuex.Store({
-    state,
-  })
-
   const stubs = {
     RouterLink: RouterLinkStub,
   }
 
   const Wrapper = () => {
-    return mount(Login, { localVue, mocks, store, stubs })
+    return mount(Login, { localVue, mocks, stubs })
   }
 
   describe('mount', () => {

frontend/src/views/Pages/Login.vue

@@ -122,7 +122,7 @@ export default {
       if (result.success) {
         this.$store.dispatch('login', {
           sessionId: result.result.data.session_id,
-          email: this.model.email,
+          user: result.result.data.user,
         })
         this.$router.push('/overview')
         loader.hide()

frontend/src/views/Pages/Register.spec.js

@@ -1,5 +1,4 @@
 import { mount, RouterLinkStub } from '@vue/test-utils'
-import Vuex from 'vuex'
 import flushPromises from 'flush-promises'
 
 import Register from './Register'
@@ -16,20 +15,12 @@ describe('Register', () => {
     $t: jest.fn((t) => t),
   }
 
-  const state = {
-    // loginfail: false,
-  }
-
-  const store = new Vuex.Store({
-    state,
-  })
-
   const stubs = {
     RouterLink: RouterLinkStub,
   }
 
   const Wrapper = () => {
-    return mount(Register, { localVue, mocks, store, stubs })
+    return mount(Register, { localVue, mocks, stubs })
   }
 
   describe('mount', () => {