From 1a42aa17e4827da7fcbd7f7efe051d39fc8bc20d Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 28 Sep 2021 12:29:45 +0200
Subject: [PATCH] register process simplified, reset function removed, submit
 button replaced with disable function

---
 frontend/src/views/Pages/Register.spec.js | 62 ++---------------------
 frontend/src/views/Pages/Register.vue     | 37 +++++---------
 2 files changed, 16 insertions(+), 83 deletions(-)

diff --git a/frontend/src/views/Pages/Register.spec.js b/frontend/src/views/Pages/Register.spec.js
index 8c00d5bd6..233897243 100644
--- a/frontend/src/views/Pages/Register.spec.js
+++ b/frontend/src/views/Pages/Register.spec.js
@@ -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')
       })
     })
 
@@ -98,8 +98,8 @@ describe('Register', () => {
         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"]').is('[disabled]')).toBe(true)
       })
 
       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')
diff --git a/frontend/src/views/Pages/Register.vue b/frontend/src/views/Pages/Register.vue
index 1a1b91bbe..89b539922 100755
--- a/frontend/src/views/Pages/Register.vue
+++ b/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({