Merge pull request #908 from gradido/816-Refactor-Register-Page-Buttons

register process simplified

frontend/src/components/LanguageSwitchSelect.vue

@@ -14,9 +14,8 @@ export default {
     return {
       selected: null,
       options: [
-        { value: null, text: this.$t('settings.language.select_language') },
-        { value: 'de', text: this.$t('settings.language.de') },
-        { value: 'en', text: this.$t('settings.language.en') },
+        { value: 'de', text: this.$t('languages.de') },
+        { value: 'en', text: this.$t('languages.en') },
       ],
     }
   },

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

@@ -25,7 +25,7 @@ describe('Register', () => {
     $store: {
       state: {
         email: 'peter@lustig.de',
-        language: null,
+        language: 'en',
       },
     },
   }
@@ -55,11 +55,11 @@ describe('Register', () => {
 
     describe('links', () => {
       it('has a link "Back"', () => {
-        expect(wrapper.findAllComponents(RouterLinkStub).at(0).text()).toEqual('back')
+        expect(wrapper.find('.test-button-back').text()).toEqual('back')
       })
 
       it('links to /login when clicking "Back"', () => {
-        expect(wrapper.findAllComponents(RouterLinkStub).at(0).props().to).toBe('/login')
+        expect(wrapper.find('.test-button-back').props().to).toBe('/login')
       })
     })
 
@@ -89,17 +89,17 @@ describe('Register', () => {
       it('has Language selected field', () => {
         expect(wrapper.find('.selectedLanguage').exists()).toBeTruthy()
       })
-      it('selected Language value de', async () => {
+      it('selects Language value en', async () => {
         wrapper.find('.selectedLanguage').findAll('option').at(1).setSelected()
-        expect(wrapper.find('.selectedLanguage').element.value).toBe('de')
+        expect(wrapper.find('.selectedLanguage').element.value).toBe('en')
       })
 
       it('has 1 checkbox input fields', () => {
         expect(wrapper.find('#registerCheckbox').exists()).toBeTruthy()
       })
 
-      it('has no submit button when not completely filled', () => {
-        expect(wrapper.find('button[type="submit"]').exists()).toBe(false)
+      it('has disabled submit button when not completely filled', () => {
+        expect(wrapper.find('button[type="submit"]').attributes('disabled')).toBe('disabled')
       })
 
       it('displays a message that Email is required', async () => {
@@ -127,60 +127,6 @@ describe('Register', () => {
       })
     })
 
-    describe('resetForm', () => {
-      beforeEach(() => {
-        wrapper.find('#registerFirstname').setValue('Max')
-        wrapper.find('#registerLastname').setValue('Mustermann')
-        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('.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('.language-switch-select').element.value).toBe(undefined)
-      })
-
-      it('resets the firstName field after clicking the reset button', async () => {
-        await wrapper.find('button.ml-2').trigger('click')
-        await flushPromises()
-        expect(wrapper.find('#registerFirstname').element.value).toBe('')
-      })
-
-      it('resets the lastName field after clicking the reset button', async () => {
-        await wrapper.find('button.ml-2').trigger('click')
-        await flushPromises()
-        expect(wrapper.find('#registerLastname').element.value).toBe('')
-      })
-
-      it('resets the email field after clicking the reset button', async () => {
-        await wrapper.find('button.ml-2').trigger('click')
-        await flushPromises()
-        expect(wrapper.find('#Email-input-field').element.value).toBe('')
-      })
-
-      it.skip('resets the password field after clicking the reset button', async () => {
-        await wrapper.find('button.ml-2').trigger('click')
-        await flushPromises()
-        expect(wrapper.find('input[name="form.password"]').element.value).toBe('')
-      })
-
-      it.skip('resets the passwordRepeat field after clicking the reset button', async () => {
-        await wrapper.find('button.ml-2').trigger('click')
-        await flushPromises()
-        expect(wrapper.find('input[name="form.passwordRepeat"]').element.value).toBe('')
-      })
-
-      it('resets the firstName field after clicking the reset button', async () => {
-        await wrapper.find('button.ml-2').trigger('click')
-        await flushPromises()
-        expect(wrapper.find('input[name="site.signup.agree"]').props.checked).not.toBeTruthy()
-      })
-    })
-
     describe('API calls', () => {
       beforeEach(() => {
         wrapper.find('#registerFirstname').setValue('Max')
@@ -191,6 +137,10 @@ describe('Register', () => {
         wrapper.find('.language-switch-select').findAll('option').at(1).setSelected()
       })
 
+      it('has enabled submit button when completely filled', () => {
+        expect(wrapper.find('button[type="submit"]').attributes('disabled')).toBe('disabled')
+      })
+
       describe('server sends back error', () => {
         beforeEach(async () => {
           registerUserMutationMock.mockRejectedValue({ message: 'Ouch!' })
@@ -235,7 +185,7 @@ describe('Register', () => {
                 firstName: 'Max',
                 lastName: 'Mustermann',
                 password: 'Aa123456_',
-                language: 'de',
+                language: 'en',
               },
             }),
           )

frontend/src/views/Pages/Register.vue

@@ -116,13 +116,19 @@
                     </span>
                   </b-alert>
 
-                  <div
-                    class="text-center"
-                    v-if="namesFilled && emailFilled && form.agree && languageFilled"
-                  >
+                  <div class="text-center">
                     <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>
+                      <b-button class="ml-2 test-button-back" to="/login">
+                        {{ $t('back') }}
+                      </b-button>
+
+                      <b-button
+                        :disabled="!(namesFilled && emailFilled && form.agree && languageFilled)"
+                        type="submit"
+                        variant="primary"
+                      >
+                        {{ $t('signup') }}
+                      </b-button>
                     </div>
                   </div>
                 </b-form>
@@ -131,9 +137,6 @@
           </b-card>
         </b-col>
       </b-row>
-      <div class="text-center py-lg-4">
-        <router-link to="/login" class="mt-3">{{ $t('back') }}</router-link>
-      </div>
     </b-container>
   </div>
 </template>
@@ -172,22 +175,6 @@ export default {
     getValidationState({ dirty, validated, valid = null }) {
       return dirty || validated ? valid : null
     },
-    resetForm() {
-      this.form = {
-        firstname: '',
-        lastname: '',
-        email: '',
-        password: {
-          password: '',
-          passwordRepeat: '',
-        },
-        agree: false,
-      }
-      this.language = ''
-      this.$nextTick(() => {
-        this.$refs.observer.reset()
-      })
-    },
     async onSubmit() {
       this.$apollo
         .mutate({
@@ -238,7 +225,7 @@ export default {
       return this.form.email !== ''
     },
     languageFilled() {
-      return this.language !== null && this.language !== ''
+      return !!this.language
     },
   },
 }