VerifyCode.spec passes

webapp/components/PasswordReset/VerifyCode.spec.js

@@ -26,6 +26,8 @@ describe('VerifyCode ', () => {
   })
 
   describe('mount', () => {
+    beforeEach(jest.useFakeTimers)
+
     Wrapper = () => {
       return mount(VerifyCode, {
         mocks,
@@ -62,15 +64,25 @@ describe('VerifyCode ', () => {
         })
 
         it('delivers new password to backend', () => {
-          const expected = expect.objectContaining({ variables: { newPassword: 'supersecret' } })
+          const expected = expect.objectContaining({
+            variables: { token: '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.change-password.sucess'
+            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('change-password-result')).toEqual([['success']])
+            })
+          })
         })
       })
     })

webapp/components/PasswordReset/VerifyCode.vue

@@ -32,42 +32,49 @@
           {{ $t('verify-code.form.submit') }}
         </ds-button>
       </ds-form>
-      <ds-form
+      <template v-else>
-        v-else
+        <ds-form
-        v-model="password.formData"
+          v-if="!changePasswordResult"
-        :schema="password.formSchema"
+          v-model="password.formData"
-        @submit="handleSubmitPassword"
+          :schema="password.formSchema"
-        @input="handleInput"
+          @submit="handleSubmitPassword"
-        @input-valid="handleInputValid"
+          @input="handleInput"
-        class="change-password"
+          @input-valid="handleInputValid"
-      >
+          class="change-password"
-        <ds-input
+        >
-          id="newPassword"
+          <ds-input
-          model="newPassword"
+            id="newPassword"
-          type="password"
+            model="newPassword"
-          autocomplete="off"
+            type="password"
-          :label="$t('settings.security.change-password.label-new-password')"
+            autocomplete="off"
-        />
+            :label="$t('settings.security.change-password.label-new-password')"
-        <ds-input
+          />
-          id="confirmPassword"
+          <ds-input
-          model="confirmPassword"
+            id="confirmPassword"
-          type="password"
+            model="confirmPassword"
-          autocomplete="off"
+            type="password"
-          :label="$t('settings.security.change-password.label-new-password-confirm')"
+            autocomplete="off"
-        />
+            :label="$t('settings.security.change-password.label-new-password-confirm')"
-        <password-strength :password="password.formData.newPassword" />
+          />
-        <ds-space margin-top="base">
+          <password-strength :password="password.formData.newPassword" />
-          <ds-button :loading="$apollo.loading" :disabled="disabled" primary>
+          <ds-space margin-top="base">
-            {{ $t('settings.security.change-password.button') }}
+            <ds-button :loading="$apollo.loading" :disabled="disabled" primary>
-          </ds-button>
+              {{ $t('settings.security.change-password.button') }}
-        </ds-space>
+            </ds-button>
-      </ds-form>
+          </ds-space>
+        </ds-form>
+        <ds-text v-else>
+          {{ changePasswordResultMessage }}
+        </ds-text>
+      </template>
     </ds-space>
   </ds-card>
 </template>
 
 <script>
 import PasswordStrength from '../Password/Strength'
+import gql from 'graphql-tag'
+
 export default {
   components: {
     PasswordStrength,
@@ -119,19 +126,53 @@ export default {
       },
       verificationSubmitted: false,
       disabled: true,
+      changePasswordResult: null,
     }
   },
+  computed: {
+    changePasswordResultMessage() {
+      if (!this.changePasswordResult) return ''
+      return this.$t(`verify-code.form.change-password.${this.changePasswordResult}`)
+    },
+  },
   methods: {
-    async handleInput(data) {
+    async handleInput() {
       this.disabled = true
     },
-    async handleInputValid(data) {
+    async handleInputValid() {
       this.disabled = false
     },
     handleSubmitVerify() {
       this.verificationSubmitted = true
     },
-    handleSubmitPassword() {},
+    async handleSubmitPassword() {
+      const mutation = gql`
+        mutation($token: String!, $email: String!, $newPassword: String!) {
+          resetPassword(token: $token, email: $email, newPassword: $newPassword)
+        }
+      `
+      const { newPassword } = this.password.formData
+      const { email, code: token } = this.verification.formData
+      const variables = { newPassword, email, token }
+      try {
+        const {
+          data: { resetPassword },
+        } = await this.$apollo.mutate({ mutation, variables })
+        const changePasswordResult = resetPassword ? 'success' : 'failure'
+        this.changePasswordResult = changePasswordResult
+        this.$emit('change-password-result', changePasswordResult)
+        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) {

webapp/locales/de.json

@@ -29,7 +29,7 @@
       "submit": "Sicherheitscode überprüfen",
       "change-password":{
         "success": "Änderung des Passworts war erfolgreich",
-        "failure": "Passwort Änderung fehlgeschlagen. Möglicherweise falscher Sicherheitscode."
+        "failure": "Passwort Änderung fehlgeschlagen. Möglicherweise falscher Sicherheitscode?"
       }
     }
   },

webapp/locales/en.json

@@ -29,7 +29,7 @@
       "submit": "Check security code",
       "change-password": {
         "success": "Changing your password was successful",
-        "failure": "Changing your password failed. Probably the security code was not correct"
+        "failure": "Changing your password failed. Maybe the security code was not correct?"
       }
     }
   },