Splitting components, better route navigation

This also allows us to generate a password reset link to quickly reset
your password without entering the code and email manually.

webapp/components/PasswordReset/ChangePassword.spec.js

@@ -0,0 +1,83 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import ChangePassword from './ChangePassword'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+
+describe('ChangePassword ', () => {
+  let wrapper
+  let Wrapper
+  let mocks
+  let propsData
+
+  beforeEach(() => {
+    propsData = {}
+    mocks = {
+      $toast: {
+        success: jest.fn(),
+        error: jest.fn(),
+      },
+      $t: jest.fn(),
+      $apollo: {
+        loading: false,
+        mutate: jest.fn().mockResolvedValue({ data: { resetPassword: true } }),
+      },
+    }
+  })
+
+  describe('mount', () => {
+    beforeEach(jest.useFakeTimers)
+
+    Wrapper = () => {
+      return mount(ChangePassword, {
+        mocks,
+        propsData,
+        localVue,
+      })
+    }
+
+    describe('given email and verification code', () => {
+      beforeEach(() => {
+        propsData.email = 'mail@example.org'
+        propsData.code = '123456'
+      })
+
+      describe('submitting new password', () => {
+        beforeEach(() => {
+          wrapper = Wrapper()
+          wrapper.find('input#newPassword').setValue('supersecret')
+          wrapper.find('input#confirmPassword').setValue('supersecret')
+          wrapper.find('form').trigger('submit')
+        })
+
+        it('calls resetPassword graphql mutation', () => {
+          expect(mocks.$apollo.mutate).toHaveBeenCalled()
+        })
+
+        it('delivers new password to backend', () => {
+          const expected = expect.objectContaining({
+            variables: { code: '123456', email: 'mail@example.org', newPassword: 'supersecret' },
+          })
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
+        })
+
+        describe('password reset successful', () => {
+          it('displays success message', () => {
+            const expected = 'verify-code.form.change-password.success'
+            expect(mocks.$t).toHaveBeenCalledWith(expected)
+          })
+
+          describe('after animation', () => {
+            beforeEach(jest.runAllTimers)
+
+            it('emits `change-password-sucess`', () => {
+              expect(wrapper.emitted('passwordResetResponse')).toEqual([['success']])
+            })
+          })
+        })
+      })
+    })
+  })
+})

webapp/components/PasswordReset/ChangePassword.vue

@@ -0,0 +1,140 @@
+<template>
+  <ds-card class="verify-code">
+    <ds-space margin="large">
+      <template>
+        <ds-form
+          v-if="!changePasswordResult"
+          v-model="formData"
+          :schema="formSchema"
+          @submit="handleSubmitPassword"
+          @input="handleInput"
+          @input-valid="handleInputValid"
+          class="change-password"
+        >
+          <ds-input
+            id="newPassword"
+            model="newPassword"
+            type="password"
+            autocomplete="off"
+            :label="$t('settings.security.change-password.label-new-password')"
+          />
+          <ds-input
+            id="confirmPassword"
+            model="confirmPassword"
+            type="password"
+            autocomplete="off"
+            :label="$t('settings.security.change-password.label-new-password-confirm')"
+          />
+          <password-strength :password="formData.newPassword" />
+          <ds-space margin-top="base">
+            <ds-button :loading="$apollo.loading" :disabled="disabled" primary>
+              {{ $t('settings.security.change-password.button') }}
+            </ds-button>
+          </ds-space>
+        </ds-form>
+        <ds-text v-else>
+          <template v-if="changePasswordResult === 'success'">
+            <sweetalert-icon icon="success" />
+            <ds-text>
+              {{ $t(`verify-code.form.change-password.success`) }}
+            </ds-text>
+          </template>
+          <template v-else>
+            <sweetalert-icon icon="error" />
+            <ds-text align="left">
+              {{ $t(`verify-code.form.change-password.error`) }}
+              {{ $t('verify-code.form.change-password.help') }}
+            </ds-text>
+            <a href="mailto:support@human-connection.org">support@human-connection.org</a>
+          </template>
+        </ds-text>
+      </template>
+    </ds-space>
+  </ds-card>
+</template>
+
+<script>
+import PasswordStrength from '../Password/Strength'
+import gql from 'graphql-tag'
+import { SweetalertIcon } from 'vue-sweetalert-icons'
+
+export default {
+  components: {
+    SweetalertIcon,
+    PasswordStrength,
+  },
+  props: {
+    email: { type: String, required: true },
+    code: { type: String, required: true },
+  },
+  data() {
+    return {
+      formData: {
+        newPassword: '',
+        confirmPassword: '',
+      },
+      formSchema: {
+        newPassword: {
+          type: 'string',
+          required: true,
+          message: this.$t('settings.security.change-password.message-new-password-required'),
+        },
+        confirmPassword: [
+          { validator: this.matchPassword },
+          {
+            type: 'string',
+            required: true,
+            message: this.$t(
+              'settings.security.change-password.message-new-password-confirm-required',
+            ),
+          },
+        ],
+      },
+      disabled: true,
+      changePasswordResult: null,
+    }
+  },
+  methods: {
+    async handleInput() {
+      this.disabled = true
+    },
+    async handleInputValid() {
+      this.disabled = false
+    },
+    async handleSubmitPassword() {
+      const mutation = gql`
+        mutation($code: String!, $email: String!, $newPassword: String!) {
+          resetPassword(code: $code, email: $email, newPassword: $newPassword)
+        }
+      `
+      const { newPassword } = this.formData
+      const { email, code } = this
+      const variables = { newPassword, email, code }
+      try {
+        const {
+          data: { resetPassword },
+        } = await this.$apollo.mutate({ mutation, variables })
+        this.changePasswordResult = resetPassword ? 'success' : 'error'
+        setTimeout(() => {
+          this.$emit('passwordResetResponse', this.changePasswordResult)
+        }, 3000)
+        this.formData = {
+          newPassword: '',
+          confirmPassword: '',
+        }
+      } catch (err) {
+        this.$toast.error(err.message)
+      }
+    },
+    matchPassword(rule, value, callback, source, options) {
+      var errors = []
+      if (this.formData.newPassword !== value) {
+        errors.push(
+          new Error(this.$t('settings.security.change-password.message-new-password-missmatch')),
+        )
+      }
+      callback(errors)
+    },
+  },
+}
+</script>

webapp/components/PasswordReset/Request.spec.js

@@ -1,12 +1,12 @@
 import { mount, createLocalVue } from '@vue/test-utils'
-import PasswordReset from './PasswordReset'
+import Request from './Request'
 import Styleguide from '@human-connection/styleguide'
 
 const localVue = createLocalVue()
 
 localVue.use(Styleguide)
 
-describe('PasswordReset', () => {
+describe('Request', () => {
   let wrapper
   let Wrapper
   let mocks
@@ -29,7 +29,7 @@ describe('PasswordReset', () => {
     beforeEach(jest.useFakeTimers)
 
     Wrapper = () => {
-      return mount(PasswordReset, {
+      return mount(Request, {
         mocks,
         localVue,
       })

webapp/components/PasswordReset/VerifyCode.spec.js

@@ -13,15 +13,7 @@ describe('VerifyCode ', () => {
 
   beforeEach(() => {
     mocks = {
-      $toast: {
-        success: jest.fn(),
-        error: jest.fn(),
-      },
       $t: jest.fn(),
-      $apollo: {
-        loading: false,
-        mutate: jest.fn().mockResolvedValue({ data: { resetPassword: true } }),
-      },
     }
   })
 
@@ -48,42 +40,9 @@ describe('VerifyCode ', () => {
         wrapper.find('form').trigger('submit')
       })
 
-      it('displays a form to update your password', () => {
+      it('emits `verifyCode`', () => {
-        expect(wrapper.find('.change-password').exists()).toBe(true)
+        const expected = [[{ code: '123456', email: 'mail@example.org' }]]
-      })
+        expect(wrapper.emitted('verification')).toEqual(expected)
-
-      describe('submitting new password', () => {
-        beforeEach(() => {
-          wrapper.find('input#newPassword').setValue('supersecret')
-          wrapper.find('input#confirmPassword').setValue('supersecret')
-          wrapper.find('form').trigger('submit')
-        })
-
-        it('calls resetPassword graphql mutation', () => {
-          expect(mocks.$apollo.mutate).toHaveBeenCalled()
-        })
-
-        it('delivers new password to backend', () => {
-          const expected = expect.objectContaining({
-            variables: { code: '123456', email: 'mail@example.org', newPassword: 'supersecret' },
-          })
-          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
-        })
-
-        describe('password reset successful', () => {
-          it('displays success message', () => {
-            const expected = 'verify-code.form.change-password.success'
-            expect(mocks.$t).toHaveBeenCalledWith(expected)
-          })
-
-          describe('after animation', () => {
-            beforeEach(jest.runAllTimers)
-
-            it('emits `change-password-sucess`', () => {
-              expect(wrapper.emitted('passwordResetResponse')).toEqual([['success']])
-            })
-          })
-        })
       })
     })
   })

webapp/components/PasswordReset/VerifyCode.vue

@@ -2,9 +2,8 @@
   <ds-card class="verify-code">
     <ds-space margin="large">
       <ds-form
-        v-if="!verificationSubmitted"
+        v-model="formData"
-        v-model="verification.formData"
+        :schema="formSchema"
-        :schema="verification.formSchema"
         @submit="handleSubmitVerify"
         @input="handleInput"
         @input-valid="handleInputValid"
@@ -32,116 +31,33 @@
           {{ $t('verify-code.form.next') }}
         </ds-button>
       </ds-form>
-      <template v-else>
-        <ds-form
-          v-if="!changePasswordResult"
-          v-model="password.formData"
-          :schema="password.formSchema"
-          @submit="handleSubmitPassword"
-          @input="handleInput"
-          @input-valid="handleInputValid"
-          class="change-password"
-        >
-          <ds-input
-            id="newPassword"
-            model="newPassword"
-            type="password"
-            autocomplete="off"
-            :label="$t('settings.security.change-password.label-new-password')"
-          />
-          <ds-input
-            id="confirmPassword"
-            model="confirmPassword"
-            type="password"
-            autocomplete="off"
-            :label="$t('settings.security.change-password.label-new-password-confirm')"
-          />
-          <password-strength :password="password.formData.newPassword" />
-          <ds-space margin-top="base">
-            <ds-button :loading="$apollo.loading" :disabled="disabled" primary>
-              {{ $t('settings.security.change-password.button') }}
-            </ds-button>
-          </ds-space>
-        </ds-form>
-        <ds-text v-else>
-          <template v-if="changePasswordResult === 'success'">
-            <sweetalert-icon icon="success" />
-            <ds-text>
-              {{ $t(`verify-code.form.change-password.success`) }}
-            </ds-text>
-          </template>
-          <template v-else>
-            <sweetalert-icon icon="error" />
-            <ds-text align="left">
-              {{ $t(`verify-code.form.change-password.error`) }}
-              {{ $t('verify-code.form.change-password.help') }}
-            </ds-text>
-            <a href="mailto:support@human-connection.org">support@human-connection.org</a>
-          </template>
-        </ds-text>
-      </template>
     </ds-space>
   </ds-card>
 </template>
 
 <script>
-import PasswordStrength from '../Password/Strength'
-import gql from 'graphql-tag'
-import { SweetalertIcon } from 'vue-sweetalert-icons'
-
 export default {
-  components: {
-    SweetalertIcon,
-    PasswordStrength,
-  },
   data() {
     return {
-      verification: {
+      formData: {
-        formData: {
+        email: '',
-          email: '',
+        code: '',
-          code: '',
+      },
+      formSchema: {
+        email: {
+          type: 'email',
+          required: true,
+          message: this.$t('common.validations.email'),
         },
-        formSchema: {
+        code: {
-          email: {
+          type: 'string',
-            type: 'email',
+          min: 6,
-            required: true,
+          max: 6,
-            message: this.$t('common.validations.email'),
+          required: true,
-          },
+          message: this.$t('common.validations.verification-code'),
-          code: {
-            type: 'string',
-            min: 6,
-            max: 6,
-            required: true,
-            message: this.$t('common.validations.verification-code'),
-          },
         },
       },
-      password: {
-        formData: {
-          newPassword: '',
-          confirmPassword: '',
-        },
-        formSchema: {
-          newPassword: {
-            type: 'string',
-            required: true,
-            message: this.$t('settings.security.change-password.message-new-password-required'),
-          },
-          confirmPassword: [
-            { validator: this.matchPassword },
-            {
-              type: 'string',
-              required: true,
-              message: this.$t(
-                'settings.security.change-password.message-new-password-confirm-required',
-              ),
-            },
-          ],
-        },
-      },
-      verificationSubmitted: false,
       disabled: true,
-      changePasswordResult: null,
     }
   },
   methods: {
@@ -152,45 +68,8 @@ export default {
       this.disabled = false
     },
     handleSubmitVerify() {
-      this.verificationSubmitted = true
+      const { email, code } = this.formData
-    },
+      this.$emit('verification', { email, code })
-    async handleSubmitPassword() {
-      const mutation = gql`
-        mutation($code: String!, $email: String!, $newPassword: String!) {
-          resetPassword(code: $code, email: $email, newPassword: $newPassword)
-        }
-      `
-      const { newPassword } = this.password.formData
-      const { email, code } = this.verification.formData
-      const variables = { newPassword, email, code }
-      try {
-        const {
-          data: { resetPassword },
-        } = await this.$apollo.mutate({ mutation, variables })
-        this.changePasswordResult = resetPassword ? 'success' : 'error'
-        setTimeout(() => {
-          this.$emit('passwordResetResponse', this.changePasswordResult)
-        }, 3000)
-        this.verification.formData = {
-          code: '',
-          email: '',
-        }
-        this.password.formData = {
-          newPassword: '',
-          confirmPassword: '',
-        }
-      } catch (err) {
-        this.$toast.error(err.message)
-      }
-    },
-    matchPassword(rule, value, callback, source, options) {
-      var errors = []
-      if (this.password.formData.newPassword !== value) {
-        errors.push(
-          new Error(this.$t('settings.security.change-password.message-new-password-missmatch')),
-        )
-      }
-      callback(errors)
     },
   },
 }

webapp/pages/password-reset/change-password.vue

@@ -0,0 +1,28 @@
+<template>
+  <change-password
+    :email="email"
+    :code="code"
+    @passwordResetResponse="handlePasswordResetResponse"
+  />
+</template>
+
+<script>
+import ChangePassword from '~/components/PasswordReset/ChangePassword'
+
+export default {
+  data() {
+    const { email = '', code = '' } = this.$route.query
+    return { email, code }
+  },
+  components: {
+    ChangePassword,
+  },
+  methods: {
+    handlePasswordResetResponse(response) {
+      if (response === 'success') {
+        this.$router.push('/login')
+      }
+    },
+  },
+}
+</script>

webapp/pages/password-reset/request.vue

@@ -1,13 +1,13 @@
 <template>
-  <password-reset @handleSubmitted="handlePasswordResetRequested" />
+  <request @handleSubmitted="handlePasswordResetRequested" />
 </template>
 
 <script>
-import PasswordReset from '~/components/PasswordReset/PasswordReset'
+import Request from '~/components/PasswordReset/Request'
 
 export default {
   components: {
-    PasswordReset,
+    Request,
   },
   methods: {
     handlePasswordResetRequested() {

webapp/pages/password-reset/verify-code.vue

@@ -1,5 +1,5 @@
 <template>
-  <verify-code @passwordResetResponse="handlePasswordResetResponse" />
+  <verify-code @verification="handleVerification" />
 </template>
 
 <script>
@@ -10,10 +10,8 @@ export default {
     VerifyCode,
   },
   methods: {
-    handlePasswordResetResponse(response) {
+    handleVerification({ email, code }) {
-      if (response === 'success') {
+      this.$router.push({ path: 'change-password', query: { email, code } })
-        this.$router.push('login')
-      }
     },
   },
 }