select language during registration

frontend/src/locales/de.json

@@ -18,6 +18,7 @@
     "de": "Deutsch",
     "en": "English"
   },
+  "select_language": "Bitte wähle eine Sprache für die App und Newsletter",
   "decay": {
     "decay": "Vergänglichkeit",
     "decay_since_last_transaction":"Vergänglichkeit seit der letzten Transaktion",

frontend/src/locales/en.json

@@ -18,6 +18,7 @@
     "de": "Deutsch",
     "en": "English"
   },
+  "select_language": "Please choose a language for the app and newsletter",
   "decay": {
     "decay": "Decay",
     "decay_since_last_transaction":"Decay since the last transaction",

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

@@ -80,6 +80,9 @@ describe('Register', () => {
       it('has password repeat input fields', () => {
         expect(wrapper.find('input[name="form.passwordRepeat"]').exists()).toBeTruthy()
       })
+      it('has Language selected field', () => {
+        expect(wrapper.find('#selectedLanguage').exists()).toBeTruthy()
+      })
 
       it('has 1 checkbox input fields', () => {
         expect(wrapper.find('#registerCheckbox').exists()).toBeTruthy()
@@ -214,6 +217,7 @@ describe('Register', () => {
                 firstName: 'Max',
                 lastName: 'Mustermann',
                 password: 'Aa123456',
+                language: 'null',
               },
             }),
           )

frontend/src/views/Pages/Register.vue

@@ -84,6 +84,18 @@
                     :register="register"
                   ></input-password-confirmation>
 
+                  <b-row>
+                    <b-col cols="12">
+                      {{ $t('language') }}
+                      <b-form-select
+                        id="selectedLanguage"
+                        v-model="selected"
+                        :options="options"
+                        class="mb-3"
+                      ></b-form-select>
+                    </b-col>
+                  </b-row>
+
                   <b-row class="my-4">
                     <b-col cols="12">
                       <b-form-checkbox
@@ -109,7 +121,10 @@
                     </span>
                   </b-alert>
 
-                  <div class="text-center" v-if="namesFilled && emailFilled && form.agree">
+                  <div
+                    class="text-center"
+                    v-if="namesFilled && emailFilled && form.agree && languageFilled"
+                  >
                     <div class="text-center">
                       <b-button class="ml-2" @click="resetForm()">{{ $t('form.reset') }}</b-button>
                       <b-button type="submit" variant="primary">{{ $t('signup') }}</b-button>
@@ -147,6 +162,12 @@ 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') },
+      ],
       submitted: false,
       showError: false,
       messageError: '',
@@ -183,6 +204,7 @@ export default {
             firstName: this.form.firstname,
             lastName: this.form.lastname,
             password: this.form.password.password,
+            language: this.selected,
           },
         })
         .then(() => {
@@ -191,6 +213,7 @@ export default {
           this.form.lastname = ''
           this.form.password.password = ''
           this.form.password.passwordRepeat = ''
+          this.selected = null
           this.$router.push('/thx/register')
         })
         .catch((error) => {
@@ -206,6 +229,7 @@ export default {
       this.form.lastname = ''
       this.form.password.password = ''
       this.form.password.passwordRepeat = ''
+      this.selected = null
     },
   },
   computed: {
@@ -220,6 +244,9 @@ export default {
     emailFilled() {
       return this.form.email !== ''
     },
+    languageFilled() {
+      return this.selected !== null
+    },
   },
 }
 </script>