Merge pull request #778 from gradido/185-On-Register-subscribe-to-Newsletter-Clicktip

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,13 @@ 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('selected Language value de', async () => {
+        wrapper.find('#selectedLanguage').findAll('option').at(1).setSelected()
+        expect(wrapper.find('#selectedLanguage').element.value).toBe('de')
+      })
 
       it('has 1 checkbox input fields', () => {
         expect(wrapper.find('#registerCheckbox').exists()).toBeTruthy()
@@ -121,9 +128,16 @@ 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('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('')
+      })
+
       it('resets the firstName field after clicking the reset button', async () => {
         await wrapper.find('button.ml-2').trigger('click')
         await flushPromises()
@@ -168,6 +182,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()
       })
 
       describe('server sends back error', () => {
@@ -214,6 +229,7 @@ describe('Register', () => {
                 firstName: 'Max',
                 lastName: 'Mustermann',
                 password: 'Aa123456',
+                language: 'de',
               },
             }),
           )

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: '',
@@ -168,8 +189,7 @@ export default {
         },
         agree: false,
       }
-      this.form.password.password = ''
-      this.form.password.passwordRepeat = ''
+      this.selected = null
       this.$nextTick(() => {
         this.$refs.observer.reset()
       })
@@ -183,6 +203,7 @@ export default {
             firstName: this.form.firstname,
             lastName: this.form.lastname,
             password: this.form.password.password,
+            language: this.selected,
           },
         })
         .then(() => {
@@ -191,6 +212,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 +228,7 @@ export default {
       this.form.lastname = ''
       this.form.password.password = ''
       this.form.password.passwordRepeat = ''
+      this.selected = null
     },
   },
   computed: {
@@ -220,6 +243,9 @@ export default {
     emailFilled() {
       return this.form.email !== ''
     },
+    languageFilled() {
+      return this.selected !== null
+    },
   },
 }
 </script>