Split password flow into different routes part 1

webapp/nuxt.config.js

@@ -28,7 +28,9 @@ module.exports = {
     publicPages: [
       'login',
       'logout',
-      'password-reset',
+      'password-reset-request',
+      'password-reset-verify-code',
+      'password-reset-change-password',
       'register',
       'signup',
       'reset',

webapp/pages/login.vue

@@ -46,7 +46,7 @@
                 type="password"
               />
               <ds-space class="password-reset-link" margin-bottom="large">
-                <nuxt-link to="/password-reset">
+                <nuxt-link to="/password-reset/request">
                   {{ $t('login.forgotPassword') }}
                 </nuxt-link>
               </ds-space>

webapp/pages/password-reset.vue

@@ -3,11 +3,7 @@
     <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
+          <nuxt-child />
-            @handleSubmitted="handlePasswordResetRequested"
-            v-if="!passwordResetRequested"
-          />
-          <verify-code v-else @passwordResetResponse="handlePasswordResetResponse" />
         </ds-space>
       </ds-flex-item>
     </ds-flex>
@@ -15,29 +11,7 @@
 </template>
 
 <script>
-import PasswordReset from '~/components/PasswordReset/PasswordReset'
-import VerifyCode from '~/components/PasswordReset/VerifyCode'
-
 export default {
   layout: 'default',
-  data() {
-    return {
-      passwordResetRequested: false,
-    }
-  },
-  components: {
-    PasswordReset,
-    VerifyCode,
-  },
-  methods: {
-    handlePasswordResetRequested() {
-      this.passwordResetRequested = true
-    },
-    handlePasswordResetResponse(response) {
-      if (response === 'success') {
-        this.$router.push('login')
-      }
-    },
-  },
 }
 </script>

webapp/pages/password-reset/request.vue

@@ -0,0 +1,18 @@
+<template>
+  <password-reset @handleSubmitted="handlePasswordResetRequested" />
+</template>
+
+<script>
+import PasswordReset from '~/components/PasswordReset/PasswordReset'
+
+export default {
+  components: {
+    PasswordReset,
+  },
+  methods: {
+    handlePasswordResetRequested() {
+      this.$router.push('verify-code')
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,20 @@
+<template>
+  <verify-code @passwordResetResponse="handlePasswordResetResponse" />
+</template>
+
+<script>
+import VerifyCode from '~/components/PasswordReset/VerifyCode'
+
+export default {
+  components: {
+    VerifyCode,
+  },
+  methods: {
+    handlePasswordResetResponse(response) {
+      if (response === 'success') {
+        this.$router.push('login')
+      }
+    },
+  },
+}
+</script>