From ebaf9b7a8731db5992f26209de04f6c68b12b345 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 9 Sep 2021 17:28:42 +0200
Subject: [PATCH] add new components selectLanguage and Usercard_Language

---
 .../src/components/LanguageSwitchSelect.vue   | 44 ++++++++++
 frontend/src/locales/de.json                  |  1 +
 frontend/src/locales/en.json                  |  1 +
 frontend/src/views/Pages/Register.spec.js     |  6 +-
 frontend/src/views/Pages/Register.vue         | 36 ++++-----
 .../Pages/UserProfile/UserCard_Language.vue   | 81 +++++++++++++++++++
 .../src/views/Pages/UserProfileOverview.vue   |  4 +
 7 files changed, 152 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/components/LanguageSwitchSelect.vue
 create mode 100644 frontend/src/views/Pages/UserProfile/UserCard_Language.vue

diff --git a/frontend/src/components/LanguageSwitchSelect.vue b/frontend/src/components/LanguageSwitchSelect.vue
new file mode 100644
index 000000000..e1caa601e
--- /dev/null
+++ b/frontend/src/components/LanguageSwitchSelect.vue
@@ -0,0 +1,44 @@
+<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 },
+    register: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  created() {
+    if (!this.register) this.selected = this.$store.state.language
+  },
+  computed: {
+    languageObject() {
+      return this.selected
+    },
+  },
+  watch: {
+    selected() {
+      this.$emit('update-language', this.languageObject)
+    },
+  },
+}
+</script>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index ae1822396..b4c87b8ce 100644
--- a/frontend/src/locales/de.json
+++ b/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",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 4bd04116d..50d22c2bd 100644
--- a/frontend/src/locales/en.json
+++ b/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",
diff --git a/frontend/src/views/Pages/Register.spec.js b/frontend/src/views/Pages/Register.spec.js
index 72042477c..f1a13c638 100644
--- a/frontend/src/views/Pages/Register.spec.js
+++ b/frontend/src/views/Pages/Register.spec.js
@@ -81,11 +81,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', () => {
diff --git a/frontend/src/views/Pages/Register.vue b/frontend/src/views/Pages/Register.vue
index f8e7eefd0..6b7dd9281 100755
--- a/frontend/src/views/Pages/Register.vue
+++ b/frontend/src/views/Pages/Register.vue
@@ -86,13 +86,14 @@
 
                   <b-row>
                     <b-col cols="12">
-                      {{ $t('language') }}
-                      <b-form-select
-                        id="selectedLanguage"
-                        v-model="selected"
-                        :options="options"
-                        class="mb-3"
+                      {{ $t('language') }} {{ language }}
+                      <!--   <b-form-select
+                        v-model="language"
+                        class="selectedLanguage mb-3"
                       ></b-form-select>
+                      -->
+
+                      <language-switch-select @update-language="updateLanguage" />
                     </b-col>
                   </b-row>
 
@@ -145,10 +146,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 +164,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 +172,9 @@ export default {
     }
   },
   methods: {
+    updateLanguage(e) {
+      this.language = e
+    },
     getValidationState({ dirty, validated, valid = null }) {
       return dirty || validated ? valid : null
     },
@@ -189,7 +189,7 @@ export default {
         },
         agree: false,
       }
-      this.selected = null
+      this.language = ''
       this.$nextTick(() => {
         this.$refs.observer.reset()
       })
@@ -203,7 +203,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 +212,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 +228,7 @@ export default {
       this.form.lastname = ''
       this.form.password.password = ''
       this.form.password.passwordRepeat = ''
-      this.selected = null
+      this.language = ''
     },
   },
   computed: {
@@ -244,7 +244,7 @@ export default {
       return this.form.email !== ''
     },
     languageFilled() {
-      return this.selected !== null
+      return this.language !== ''
     },
   },
 }
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_Language.vue b/frontend/src/views/Pages/UserProfile/UserCard_Language.vue
new file mode 100644
index 000000000..150f0d2f2
--- /dev/null
+++ b/frontend/src/views/Pages/UserProfile/UserCard_Language.vue
@@ -0,0 +1,81 @@
+<template>
+  <div
+    id="change_language"
+    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="!editLanguage ? (editLanguage = !editLanguage) : cancelEdit()">
+              <span class="pointer mr-3">{{ $t('form.changeLanguage') }}</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="editLanguage">
+        <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
+          <b-row class="mb-2">
+            <b-col>
+              <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>Language in store: {{ $store.state.language }}</div>
+      <div>Language in data: {{ this.language }}</div>
+    </b-container>
+  </div>
+</template>
+<script>
+import LanguageSwitchSelect from '../../../components/LanguageSwitchSelect.vue'
+import { updateUserInfos } from '../../../graphql/queries'
+
+export default {
+  name: 'FormUserLanguage',
+  components: { LanguageSwitchSelect },
+  data() {
+    return {
+      editLanguage: false,
+      language: '',
+      register: false,
+    }
+  },
+  methods: {
+    updateLanguage(e) {
+      this.language = e
+    },
+    cancelEdit() {
+      this.editLanguage = false
+    },
+    async onSubmit() {
+      this.$apollo
+        .query({
+          query: updateUserInfos,
+          variables: {
+            language: this.$store.state.language,
+          },
+        })
+        .then(() => {
+          this.cancelEdit()
+        })
+        .catch((error) => {
+          this.$toasted.error(error.message)
+        })
+    },
+  },
+}
+</script>
diff --git a/frontend/src/views/Pages/UserProfileOverview.vue b/frontend/src/views/Pages/UserProfileOverview.vue
index 8768086ff..d1a53307b 100644
--- a/frontend/src/views/Pages/UserProfileOverview.vue
+++ b/frontend/src/views/Pages/UserProfileOverview.vue
@@ -5,6 +5,8 @@
     <!--<form-username />-->
     <hr />
     <p><form-user-passwort /></p>
+    <hr />
+    <p><form-user-language /></p>
   </div>
 </template>
 <script>
@@ -12,6 +14,7 @@ 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: {
@@ -19,6 +22,7 @@ export default {
     FormUserData,
     // FormUsername,
     FormUserPasswort,
+    FormUserLanguage,
   },
   props: {
     balance: { type: Number, default: 0 },