Merge pull request #798 from gradido/557-Switch-language-only-in-user-profile

add new components selectLanguage and Usercard_Language

frontend/src/components/LanguageSwitchSelect.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="language-switch-select">
+    <b-form-select
+      v-model="selected"
+      :options="options"
+      class="selectedLanguage mb-3"
+    ></b-form-select>
+  </div>
+</template>
+<script>
+export default {
+  name: 'LanguageSwitch',
+  data() {
+    return {
+      selected: null,
+      options: [
+        { value: null, text: this.$t('select_language') },
+        { value: 'de', text: this.$t('languages.de') },
+        { value: 'en', text: this.$t('languages.en') },
+      ],
+    }
+  },
+  props: {
+    language: { type: String },
+  },
+  created() {
+    this.selected = this.$store.state.language
+  },
+  computed: {
+    languageObject() {
+      return this.selected
+    },
+  },
+  watch: {
+    selected() {
+      this.$emit('update-language', this.languageObject)
+    },
+  },
+}
+</script>

frontend/src/locales/de.json

@@ -64,6 +64,7 @@
     "change": "ändern",
     "change-password": "Passwort ändern",
     "change-name": "Name ändern",
+    "changeLanguage": "Sprache ändern",
     "amount":"Betrag",
     "memo":"Nachricht",
     "message":"Nachricht",

frontend/src/locales/en.json

@@ -64,6 +64,7 @@
     "change": "change",
     "change-password": "Change password",
     "change-name": "Change name",
+    "changeLanguage": "Change language",
     "amount":"Amount",
     "memo":"Message",
     "message":"Message",

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

@@ -22,6 +22,11 @@ describe('Register', () => {
     $apollo: {
       query: resgisterUserQueryMock,
     },
+    $store: {
+      state: {
+        language: null,
+      },
+    },
   }
 
   const stubs = {
@@ -38,7 +43,7 @@ describe('Register', () => {
     })
 
     it('renders the Register form', () => {
-      expect(wrapper.find('div.register-form').exists()).toBeTruthy()
+      expect(wrapper.find('div#registerform').exists()).toBeTruthy()
     })
 
     describe('Register header', () => {
@@ -81,11 +86,11 @@ describe('Register', () => {
         expect(wrapper.find('input[name="form.passwordRepeat"]').exists()).toBeTruthy()
       })
       it('has Language selected field', () => {
-        expect(wrapper.find('#selectedLanguage').exists()).toBeTruthy()
+        expect(wrapper.find('.selectedLanguage').exists()).toBeTruthy()
       })
       it('selected Language value de', async () => {
-        wrapper.find('#selectedLanguage').findAll('option').at(1).setSelected()
-        expect(wrapper.find('#selectedLanguage').element.value).toBe('de')
+        wrapper.find('.selectedLanguage').findAll('option').at(1).setSelected()
+        expect(wrapper.find('.selectedLanguage').element.value).toBe('de')
       })
 
       it('has 1 checkbox input fields', () => {
@@ -128,14 +133,14 @@ describe('Register', () => {
         wrapper.find('#Email-input-field').setValue('max.mustermann@gradido.net')
         wrapper.find('input[name="form.password"]').setValue('Aa123456')
         wrapper.find('input[name="form.passwordRepeat"]').setValue('Aa123456')
-        wrapper.find('#selectedLanguage').findAll('option').at(1).setSelected()
+        wrapper.find('.language-switch-select').findAll('option').at(1).setSelected()
         wrapper.find('input[name="site.signup.agree"]').setChecked(true)
       })
 
       it('reset selected value language', async () => {
         await wrapper.find('button.ml-2').trigger('click')
         await flushPromises()
-        expect(wrapper.find('#selectedLanguage').element.value).toBe('')
+        expect(wrapper.find('.language-switch-select').element.value).toBe(undefined)
       })
 
       it('resets the firstName field after clicking the reset button', async () => {
@@ -182,7 +187,7 @@ describe('Register', () => {
         wrapper.find('#Email-input-field').setValue('max.mustermann@gradido.net')
         wrapper.find('input[name="form.password"]').setValue('Aa123456')
         wrapper.find('input[name="form.passwordRepeat"]').setValue('Aa123456')
-        wrapper.find('#selectedLanguage').findAll('option').at(1).setSelected()
+        wrapper.find('.language-switch-select').findAll('option').at(1).setSelected()
       })
 
       describe('server sends back error', () => {

frontend/src/views/Pages/Register.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="register-form">
+  <div id="registerform">
     <!-- Header -->
     <div class="header p-4">
       <b-container class="container">
@@ -87,12 +87,7 @@
                   <b-row>
                     <b-col cols="12">
                       {{ $t('language') }}
-                      <b-form-select
-                        id="selectedLanguage"
-                        v-model="selected"
-                        :options="options"
-                        class="mb-3"
-                      ></b-form-select>
+                      <language-switch-select @update-language="updateLanguage" />
                     </b-col>
                   </b-row>
 
@@ -145,10 +140,11 @@
 <script>
 import InputEmail from '../../components/Inputs/InputEmail.vue'
 import InputPasswordConfirmation from '../../components/Inputs/InputPasswordConfirmation.vue'
+import LanguageSwitchSelect from '../../components/LanguageSwitchSelect.vue'
 import { resgisterUserQuery } from '../../graphql/queries'
 
 export default {
-  components: { InputPasswordConfirmation, InputEmail },
+  components: { InputPasswordConfirmation, InputEmail, LanguageSwitchSelect },
   name: 'register',
   data() {
     return {
@@ -162,12 +158,7 @@ export default {
           passwordRepeat: '',
         },
       },
-      selected: null,
-      options: [
-        { value: null, text: this.$t('select_language') },
-        { value: 'de', text: this.$t('languages.de') },
-        { value: 'en', text: this.$t('languages.en') },
-      ],
+      language: '',
       submitted: false,
       showError: false,
       messageError: '',
@@ -175,6 +166,9 @@ export default {
     }
   },
   methods: {
+    updateLanguage(e) {
+      this.language = e
+    },
     getValidationState({ dirty, validated, valid = null }) {
       return dirty || validated ? valid : null
     },
@@ -189,7 +183,7 @@ export default {
         },
         agree: false,
       }
-      this.selected = null
+      this.language = ''
       this.$nextTick(() => {
         this.$refs.observer.reset()
       })
@@ -203,7 +197,7 @@ export default {
             firstName: this.form.firstname,
             lastName: this.form.lastname,
             password: this.form.password.password,
-            language: this.selected,
+            language: this.language,
           },
         })
         .then(() => {
@@ -212,7 +206,7 @@ export default {
           this.form.lastname = ''
           this.form.password.password = ''
           this.form.password.passwordRepeat = ''
-          this.selected = null
+          this.language = ''
           this.$router.push('/thx/register')
         })
         .catch((error) => {
@@ -228,7 +222,7 @@ export default {
       this.form.lastname = ''
       this.form.password.password = ''
       this.form.password.passwordRepeat = ''
-      this.selected = null
+      this.language = ''
     },
   },
   computed: {
@@ -244,7 +238,7 @@ export default {
       return this.form.email !== ''
     },
     languageFilled() {
-      return this.selected !== null
+      return this.language !== null && this.language !== ''
     },
   },
 }

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

@@ -1,81 +1,71 @@
 <template>
-  <div class="userdata_form" fluid="sm">
-    <div
-      id="userdata_form"
-      class="bg-transparent pt-3 pb-3"
-      style="background-color: #ebebeba3 !important"
-    >
-      <b-container>
-        <b-row class="text-right">
-          <b-col class="mb-3">
-            <a @click="showUserData ? (showUserData = !showUserData) : cancelEdit()">
-              <span class="pointer mr-3">{{ $t('form.change-name') }}</span>
+  <b-card id="userdata_form" class="bg-transparent" style="background-color: #ebebeba3 !important">
+    <div>
+      <b-row class="mb-4 text-right">
+        <b-col class="text-right">
+          <a @click="showUserData ? (showUserData = !showUserData) : cancelEdit()">
+            <span class="pointer mr-3">{{ $t('form.change-name') }}</span>
+            <b-icon v-if="showUserData" class="pointer ml-3" icon="pencil"></b-icon>
+            <b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
+          </a>
+        </b-col>
+      </b-row>
+    </div>
 
-              <b-icon v-if="showUserData" class="pointer" icon="pencil">
-                {{ $t('form.change') }}
-              </b-icon>
-
-              <b-icon v-else class="pointer" icon="x-circle" variant="danger"></b-icon>
-            </a>
+    <b-container>
+      <b-form @keyup.prevent="loadSubmitButton">
+        <b-row class="mb-3">
+          <b-col class="col-12 col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
+            <small>{{ $t('form.firstname') }}</small>
+          </b-col>
+          <b-col v-if="showUserData" class="h2 col-sm-10 col-md-9">
+            {{ form.firstName }}
+          </b-col>
+          <b-col v-else class="col-md-9 col-sm-10">
+            <b-input type="text" v-model="form.firstName"></b-input>
+          </b-col>
+        </b-row>
+        <b-row class="mb-3">
+          <b-col class="col-12 col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
+            <small>{{ $t('form.lastname') }}</small>
+          </b-col>
+          <b-col v-if="showUserData" class="h2 col-sm-10 col-md-9">
+            {{ form.lastName }}
+          </b-col>
+          <b-col v-else class="col-md-9 col-sm-10">
+            <b-input type="text" v-model="form.lastName"></b-input>
+          </b-col>
+        </b-row>
+        <b-row class="mb-3" v-show="false">
+          <b-col class="col-12 col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+            <small>{{ $t('form.description') }}</small>
+          </b-col>
+          <b-col v-if="showUserData" class="col-sm-10 col-md-9">
+            {{ form.description }}
+          </b-col>
+          <b-col v-else class="col-sm-10 col-md-9">
+            <b-textarea rows="3" max-rows="6" v-model="form.description"></b-textarea>
           </b-col>
         </b-row>
-      </b-container>
 
-      <b-container>
-        <b-form @keyup.prevent="loadSubmitButton">
-          <b-row class="mb-3">
-            <b-col class="col-12 col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
-              <small>{{ $t('form.firstname') }}</small>
-            </b-col>
-            <b-col v-if="showUserData" class="col-sm-10 col-md-9">
-              {{ form.firstName }}
-            </b-col>
-            <b-col v-else class="col-md-9 col-sm-10">
-              <b-input type="text" v-model="form.firstName"></b-input>
-            </b-col>
-          </b-row>
-          <b-row class="mb-3">
-            <b-col class="col-12 col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
-              <small>{{ $t('form.lastname') }}</small>
-            </b-col>
-            <b-col v-if="showUserData" class="col-sm-10 col-md-9">
-              {{ form.lastName }}
-            </b-col>
-            <b-col v-else class="col-md-9 col-sm-10">
-              <b-input type="text" v-model="form.lastName"></b-input>
-            </b-col>
-          </b-row>
-          <b-row class="mb-3" v-show="false">
-            <b-col class="col-12 col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
-              <small>{{ $t('form.description') }}</small>
-            </b-col>
-            <b-col v-if="showUserData" class="col-sm-10 col-md-9">
-              {{ form.description }}
-            </b-col>
-            <b-col v-else class="col-sm-10 col-md-9">
-              <b-textarea rows="3" max-rows="6" v-model="form.description"></b-textarea>
-            </b-col>
-          </b-row>
-
-          <b-row class="text-right" v-if="!showUserData">
-            <b-col>
-              <div class="text-right" ref="submitButton">
-                <b-button
-                  :variant="loading ? 'default' : 'success'"
-                  @click="onSubmit"
-                  type="submit"
-                  class="mt-4"
-                  :disabled="loading"
-                >
-                  {{ $t('form.save') }}
-                </b-button>
-              </div>
-            </b-col>
-          </b-row>
-        </b-form>
-      </b-container>
-    </div>
-  </div>
+        <b-row class="text-right" v-if="!showUserData">
+          <b-col>
+            <div class="text-right" ref="submitButton">
+              <b-button
+                :variant="loading ? 'default' : 'success'"
+                @click="onSubmit"
+                type="submit"
+                class="mt-4"
+                :disabled="loading"
+              >
+                {{ $t('form.save') }}
+              </b-button>
+            </div>
+          </b-col>
+        </b-row>
+      </b-form>
+    </b-container>
+  </b-card>
 </template>
 <script>
 import { updateUserInfos } from '../../../graphql/queries'

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

@@ -1,48 +1,43 @@
 <template>
-  <div
-    id="change_pwd"
-    class="bg-transparent pt-3 pb-3"
-    style="background-color: #ebebeba3 !important"
-  >
-    <b-container>
-      <div>
-        <b-row class="mb-4 text-right">
-          <b-col class="text-right">
-            <a @click="!editPassword ? (editPassword = !editPassword) : cancelEdit()">
-              <span class="pointer mr-3">{{ $t('form.change-password') }}</span>
-              <b-icon v-if="!editPassword" class="pointer ml-3" icon="pencil" />
-              <b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
-            </a>
-          </b-col>
-        </b-row>
-      </div>
-      <div v-if="editPassword">
-        <validation-observer ref="observer" v-slot="{ handleSubmit }">
-          <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
-            <b-row class="mb-2">
-              <b-col>
-                <input-password
-                  :label="$t('form.password_old')"
-                  :placeholder="$t('form.password_old')"
-                  v-model="form.password"
-                ></input-password>
-              </b-col>
-            </b-row>
-            <input-password-confirmation v-model="form.newPassword" :register="register" />
-            <b-row class="text-right">
-              <b-col>
-                <div class="text-right">
-                  <b-button type="submit" variant="primary" class="mt-4">
-                    {{ $t('form.save') }}
-                  </b-button>
-                </div>
-              </b-col>
-            </b-row>
-          </b-form>
-        </validation-observer>
-      </div>
-    </b-container>
-  </div>
+  <b-card id="change_pwd" class="bg-transparent" style="background-color: #ebebeba3 !important">
+    <div>
+      <b-row class="mb-4 text-right">
+        <b-col class="text-right">
+          <a @click="showPassword ? (showPassword = !showPassword) : cancelEdit()">
+            <span class="pointer mr-3">{{ $t('form.change-password') }}</span>
+            <b-icon v-if="showPassword" class="pointer ml-3" icon="pencil"></b-icon>
+            <b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
+          </a>
+        </b-col>
+      </b-row>
+    </div>
+
+    <div v-if="!showPassword">
+      <validation-observer ref="observer" v-slot="{ handleSubmit }">
+        <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
+          <b-row class="mb-2">
+            <b-col>
+              <input-password
+                :label="$t('form.password_old')"
+                :placeholder="$t('form.password_old')"
+                v-model="form.password"
+              ></input-password>
+            </b-col>
+          </b-row>
+          <input-password-confirmation v-model="form.newPassword" :register="register" />
+          <b-row class="text-right">
+            <b-col>
+              <div class="text-right">
+                <b-button type="submit" variant="primary" class="mt-4">
+                  {{ $t('form.save') }}
+                </b-button>
+              </div>
+            </b-col>
+          </b-row>
+        </b-form>
+      </validation-observer>
+    </div>
+  </b-card>
 </template>
 <script>
 import InputPassword from '../../../components/Inputs/InputPassword'
@@ -57,7 +52,7 @@ export default {
   },
   data() {
     return {
-      editPassword: false,
+      showPassword: true,
       email: null,
       form: {
         password: '',
@@ -71,7 +66,7 @@ export default {
   },
   methods: {
     cancelEdit() {
-      this.editPassword = false
+      this.showPassword = true
       this.form.password = ''
       this.form.passwordNew = ''
       this.form.passwordNewRepeat = ''

frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js

@@ -0,0 +1,49 @@
+import { mount } from '@vue/test-utils'
+import UserCardLanguage from './UserCard_Language'
+
+const localVue = global.localVue
+
+const mockAPIcall = jest.fn()
+
+const toastErrorMock = jest.fn()
+const toastSuccessMock = jest.fn()
+const storeCommitMock = jest.fn()
+
+describe('UserCard_Language', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+    $store: {
+      state: {
+        language: 'de',
+      },
+      commit: storeCommitMock,
+    },
+    $toasted: {
+      success: toastSuccessMock,
+      error: toastErrorMock,
+    },
+    $apollo: {
+      query: mockAPIcall,
+    },
+  }
+
+  const Wrapper = () => {
+    return mount(UserCardLanguage, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div#formuserlanguage').exists()).toBeTruthy()
+    })
+
+    it('has an edit icon', () => {
+      expect(wrapper.find('svg.bi-pencil').exists()).toBeTruthy()
+    })
+  })
+})

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

@@ -0,0 +1,91 @@
+<template>
+  <b-card
+    id="formuserlanguage"
+    class="bg-transparent"
+    style="background-color: #ebebeba3 !important"
+  >
+    <div>
+      <b-row class="mb-4 text-right">
+        <b-col class="text-right">
+          <a @click="showLanguage ? (showLanguage = !showLanguage) : cancelEdit()">
+            <span class="pointer mr-3">{{ $t('form.changeLanguage') }}</span>
+            <b-icon v-if="showLanguage" class="pointer ml-3" icon="pencil"></b-icon>
+            <b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
+          </a>
+        </b-col>
+      </b-row>
+    </div>
+
+    <div v-if="showLanguage">
+      <b-row class="mb-3">
+        <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+          <small>{{ $t('language') }}</small>
+        </b-col>
+        <b-col class="h2 col-md-9 col-sm-10">{{ $store.state.language }}</b-col>
+      </b-row>
+    </div>
+
+    <div v-else>
+      <div>
+        <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
+          <b-row class="mb-2">
+            <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+              <small>{{ $t('language') }}</small>
+            </b-col>
+            <b-col class="col-md-9 col-sm-10">
+              <language-switch-select @update-language="updateLanguage" :language="language" />
+            </b-col>
+          </b-row>
+
+          <b-row class="text-right">
+            <b-col>
+              <div class="text-right">
+                <b-button type="submit" variant="primary" class="mt-4">
+                  {{ $t('form.save') }}
+                </b-button>
+              </div>
+            </b-col>
+          </b-row>
+        </b-form>
+      </div>
+    </div>
+  </b-card>
+</template>
+<script>
+import LanguageSwitchSelect from '../../../components/LanguageSwitchSelect.vue'
+import { updateUserInfos } from '../../../graphql/queries'
+
+export default {
+  name: 'FormUserLanguage',
+  components: { LanguageSwitchSelect },
+  data() {
+    return {
+      showLanguage: true,
+      language: '',
+    }
+  },
+  methods: {
+    updateLanguage(e) {
+      this.language = e
+    },
+    cancelEdit() {
+      this.showLanguage = true
+    },
+    async onSubmit() {
+      this.$apollo
+        .query({
+          query: updateUserInfos,
+          variables: {
+            language: this.$store.state.language,
+          },
+        })
+        .then(() => {
+          this.cancelEdit()
+        })
+        .catch((error) => {
+          this.$toasted.error(error.message)
+        })
+    },
+  },
+}
+</script>

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

@@ -23,16 +23,16 @@ describe('UserProfileOverview', () => {
       expect(wrapper.findComponent({ name: 'UserCard' }).exists()).toBeTruthy()
     })
 
-    it('has a user data form', () => {
+    it('has a user first and last name form', () => {
       expect(wrapper.findComponent({ name: 'FormUserData' }).exists()).toBeTruthy()
     })
 
-    // it('has a user name form', () => {
-    //  expect(wrapper.findComponent({ name: 'FormUsername' }).exists()).toBeTruthy()
-    // })
-
-    it('has a user password form', () => {
+    it('has a user change password form', () => {
       expect(wrapper.findComponent({ name: 'FormUserPasswort' }).exists()).toBeTruthy()
     })
+
+    it('has a user change language form', () => {
+      expect(wrapper.findComponent({ name: 'FormUserLanguage' }).exists()).toBeTruthy()
+    })
   })
 })

frontend/src/views/Pages/UserProfileOverview.vue

@@ -1,24 +1,25 @@
 <template>
   <div fluid="sm">
     <user-card :balance="balance" :transactionCount="transactionCount"></user-card>
-    <p><form-user-data /></p>
-    <!--<form-username />-->
+    <form-user-data />
     <hr />
-    <p><form-user-passwort /></p>
+    <form-user-passwort />
+    <hr />
+    <form-user-language />
   </div>
 </template>
 <script>
 import UserCard from './UserProfile/UserCard.vue'
 import FormUserData from './UserProfile/UserCard_FormUserData.vue'
-// import FormUsername from './UserProfile/UserCard_FormUsername.vue'
 import FormUserPasswort from './UserProfile/UserCard_FormUserPasswort.vue'
+import FormUserLanguage from './UserProfile/UserCard_Language.vue'
 
 export default {
   components: {
     UserCard,
     FormUserData,
-    // FormUsername,
     FormUserPasswort,
+    FormUserLanguage,
   },
   props: {
     balance: { type: Number, default: 0 },