Merge pull request #156 from silinternational/feature/fix-missing-steps

fix missing previous steps IDP-952
silinternational · May 30, 2024 · d13da42 · d13da42
2 parents f703e5e + 27381dc
commit d13da42
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 42 deletions.
diff --git a/src/profile/ProfileWizard.vue b/src/profile/ProfileWizard.vue
@@ -2,11 +2,13 @@
   <v-stepper v-if="currentStep.id" v-model="currentStep.id">
     <v-stepper-header>
       <template v-for="_step in steps">
-        <v-stepper-step :step="_step.id" 
-                        :complete="_step.state != ''"
-                        :complete-icon="toIcon(_step.state)" 
-                        :color="toColor(_step.state)" 
-                        :key="`step-${_step.id}`">
+        <v-stepper-step
+          :step="_step.id"
+          :complete="_step.state != ''"
+          :complete-icon="toIcon(_step.state)"
+          :color="toColor(_step.state)"
+          :key="`step-${_step.id}`"
+        >
           {{ $vuetify.lang.t(`$vuetify.${_step.nameKey}`) }}
         </v-stepper-step>
 
@@ -18,7 +20,7 @@
       <v-stepper-content :step="currentStep.id" class="px-2 px-sm-6">
         <slot />
 
-        <ButtonBar >
+        <ButtonBar>
           <slot name="actions" />
         </ButtonBar>
       </v-stepper-content>
@@ -40,29 +42,29 @@ export default {
     this.currentStep = Steps.forPath(this.$route.path)
   },
   methods: {
-    hasMoreSteps: step => !Steps.isLast(step),
-    toColor: state => {
+    hasMoreSteps: (step) => !Steps.isLast(step),
+    toColor: (state) => {
       const map = {
         complete: 'success',
-        skipped: 'warning'
+        skipped: 'warning',
       }
 
       return map[state] || 'primary'
     },
-    toIcon: state => {
+    toIcon: (state) => {
       const map = {
-        skipped: '$vuetify.icons.warning'
+        skipped: '$vuetify.icons.warning',
       }
 
       return map[state] || '$vuetify.icons.complete'
     },
-    completed: function() { 
+    completed: function () {
       this.currentStep.state = 'complete'
     },
-    next: function() {
+    next: function () {
       this.$router.push(Steps.next(this.currentStep).paths[0]) // this assumes the first path in step's config is the right one.
     },
-    skipped: function() {
+    skipped: function () {
       this.currentStep.state = 'skipped'
     },
     allDone() {

diff --git a/src/profile/steps.js b/src/profile/steps.js
@@ -1,28 +1,34 @@
 import Vue from 'vue'
-import { recoveryMethods, retrieve as retrieveMethods} from '@/global/recoveryMethods';
-import { mfa, retrieve as retrieveMfa } from '@/global/mfa';
+import { recoveryMethods, retrieve as retrieveMethods } from '@/global/recoveryMethods'
+import { mfa, retrieve as retrieveMfa } from '@/global/mfa'
 
 const store = {
-  steps: []
+  steps: [],
 }
 
 export default {
   steps: store.steps,
   async init() {
-    store.steps.splice(0)
-
-    if (Vue.prototype.$user.auth_type == 'login') {
+    if (Vue.prototype.$user.auth_type === 'login') {
       await Promise.all([retrieveMethods(), retrieveMfa()])
     }
 
-    store.steps.push(...allSteps.filter(step => step.isRelevant(Vue.prototype.$user, recoveryMethods.alternates, mfa)))
-
-    for (let i = 0; i < store.steps.length; i++) {
-      Object.assign(store.steps[i], { id: i + 1, state: '' })
-    }
+    // Retain all steps but mark relevant ones
+    allSteps.forEach((step, index) => {
+      const isRelevant = step.isRelevant(Vue.prototype.$user, recoveryMethods.alternates, mfa)
+      const isComplete = step.state !== ''
+      const isNotDuplicate = !store.steps.some((s) => s.nameKey === step.nameKey)
+      if (isNotDuplicate && (isRelevant || isComplete)) {
+        store.steps.push({
+          ...step,
+          id: index + 1,
+          state: '',
+        })
+      }
+    })
   },
   forPath(path) {
-    return this.steps.find(step => step.paths.includes(path))
+    return this.steps.find((step) => step.paths.includes(path))
   },
   isLast(step) {
     return this.steps[this.steps.length - 1].id === step.id
@@ -36,30 +42,24 @@ export default {
   },
 }
 
-const isRequested = paths => paths.some(path => location.hash.includes(path))
+const isRequested = (paths) => paths.some((path) => location.hash.includes(path))
 
 const password = {
   nameKey: 'profile.steps.pwStep',
-  paths: [
-    '/password/create', 
-    '/password/confirm', 
-    '/password/saved',
-  ],
+  paths: ['/password/create', '/password/confirm', '/password/saved'],
   isRelevant(user) {
     return isRequested(this.paths) || user.isNew()
   },
 }
 
 const recovery = {
   nameKey: 'profile.steps.pwRecoverStep',
-  paths: [
-    '/password/recovery',
-  ],
+  paths: ['/password/recovery'],
   isRelevant(user, recoveryMethods) {
-    return user.auth_type == 'login' && (isRequested(this.paths) || recoveryMethods.filter(isAlternate).length < 1)
+    return user.auth_type === 'login' && (isRequested(this.paths) || recoveryMethods.filter(isAlternate).length < 1)
   },
 }
-const isAlternate = method => method.type == 'email'
+const isAlternate = (method) => method.type === 'email'
 
 const twosv = {
   nameKey: 'profile.steps.2svStep',
@@ -78,16 +78,13 @@ const twosv = {
     '/2sv/printable-backup-codes/new',
   ],
   isRelevant(user, recoveryMethods, mfa) {
-    return user.auth_type == 'login' && (isRequested(this.paths) || mfa.numVerified < 3)
+    return user.auth_type === 'login' && (isRequested(this.paths) || mfa.numVerified < 3)
   },
 }
 
 const complete = {
   nameKey: 'profile.steps.completeStep',
-  paths: [
-    '/profile/complete', 
-    '/password/reset/complete',
-  ],
+  paths: ['/profile/complete', '/password/reset/complete'],
   isRelevant() {
     return true
   },