PW-Reset page switches password reset and verify

webapp/components/PasswordReset/PasswordReset.spec.js

@@ -68,8 +68,8 @@ describe('PasswordReset', () => {
       describe('after animation', () => {
         beforeEach(jest.runAllTimers)
 
-        it('emits `submitted`', () => {
-          expect(wrapper.emitted('submitted')).toBeTruthy()
+        it('emits `handleSubmitted`', () => {
+          expect(wrapper.emitted('handleSubmitted')).toBeTruthy()
         })
       })
     })

webapp/components/PasswordReset/PasswordReset.vue

@@ -8,7 +8,7 @@
         v-model="formData"
         :schema="formSchema"
         @submit="handleSubmit"
-        >
+      >
         <ds-input
           :placeholder="$t('login.email')"
           type="email"
@@ -16,29 +16,29 @@
           model="email"
           name="email"
           icon="envelope"
-          />
-          <ds-space margin-botton="large">
-            <ds-text>
-              {{ $t('password-reset.form.description') }}
-            </ds-text>
-          </ds-space>
-          <ds-button
-            :disabled="disabled"
-            :loading="$apollo.loading"
-            primary
-            fullwidth
-            name="submit"
-            type="submit"
-            icon="envelope"
-            >
-            {{ $t('password-reset.form.submit') }}
-          </ds-button>
+        />
+        <ds-space margin-botton="large">
+          <ds-text>
+            {{ $t('password-reset.form.description') }}
+          </ds-text>
+        </ds-space>
+        <ds-button
+          :disabled="disabled"
+          :loading="$apollo.loading"
+          primary
+          fullwidth
+          name="submit"
+          type="submit"
+          icon="envelope"
+        >
+          {{ $t('password-reset.form.submit') }}
+        </ds-button>
       </ds-form>
       <div v-else>
         <transition name="ds-transition-fade">
-        <ds-flex centered>
-          <sweetalert-icon icon="success" />
-        </ds-flex>
+          <ds-flex centered>
+            <sweetalert-icon icon="success" />
+          </ds-flex>
         </transition>
         <ds-text v-html="submitMessage" />
       </div>
@@ -96,8 +96,8 @@ export default {
         this.submitted = true
 
         setTimeout(() => {
-          this.$emit('submitted')
-        }, 1000)
+          this.$emit('handleSubmitted')
+        }, 3000)
       } catch (err) {
         this.$toast.error(err.message)
       }

webapp/pages/password-reset.vue

@@ -3,7 +3,8 @@
     <ds-flex>
       <ds-flex-item :width="{ base: '100%' }" centered>
         <ds-space style="text-align: center;" margin-top="small" margin-bottom="xxx-small" centered>
-          <password-reset />
+          <password-reset @handleSubmitted="handleSubmitted" v-if="!submitted" />
+          <verify-code v-else />
         </ds-space>
       </ds-flex-item>
     </ds-flex>
@@ -12,11 +13,23 @@
 
 <script>
 import PasswordReset from '~/components/PasswordReset/PasswordReset'
+import VerifyCode from '~/components/PasswordReset/VerifyCode'
 
 export default {
   layout: 'default',
+  data() {
+    return {
+      submitted: false,
+    }
+  },
   components: {
     PasswordReset,
-  }
+    VerifyCode,
+  },
+  methods: {
+    handleSubmitted() {
+      this.submitted = true
+    },
+  },
 }
 </script>