Merge pull request #206 from silinternational/add-steps-and-skip

Add 2sv steps and skip intro and security key if not needed

.github/workflows/test.yml

@@ -17,7 +17,7 @@ jobs:
         node-version: '18.x'
 
     - name: Install Dependencies
-      run: npm ci install
+      run: npm ci
 
     - name: check formatting (prettier)
       run: npm run format:check

src/2sv/Intro.vue

@@ -44,11 +44,20 @@
 
 <script>
 import ProfileWizard from '@/profile/ProfileWizard.vue'
+import Steps from '@/profile/steps'
 
 export default {
   name: '2svIntro',
   components: {
     ProfileWizard,
   },
+  async created() {
+    const thisStep = Steps.forPath(this.$route.path) || {}
+    const keyStep = Steps.next(thisStep)
+    const codesStep = Steps.next(keyStep)
+    if (thisStep.skip && keyStep.skip && codesStep.skip) {
+      this.$router.push('/profile/complete')
+    }
+  },
 }
 </script>

src/2sv/key/Intro.vue

@@ -1,5 +1,5 @@
 <template>
-  <ProfileWizard>
+  <ProfileWizard ref="wizard">
     <BasePage>
       <template #header>
         {{ $t('2sv.key.intro.header') }}
@@ -47,6 +47,7 @@
 <script>
 import ProfileWizard from '@/profile/ProfileWizard.vue'
 import securityKeys from '@/assets/usb-security-key-examples.png'
+import Steps from '@/profile/steps'
 
 export default {
   name: 'IntroKey',
@@ -55,6 +56,16 @@ export default {
   },
   data: () => ({
     securityKeys,
+    currentStep: {},
   }),
+  async created() {
+    const step = Steps.forPath(this.$route.path)
+    this.currentStep = step || {}
+  },
+  mounted() {
+    if (this.currentStep.skip) {
+      this.$router.push('/2sv/printable-backup-codes/intro')
+    }
+  },
 }
 </script>

src/global/mfa.js

@@ -56,7 +56,7 @@ function numOfVerifiedMfas(mfa) {
   let num = 0
 
   num += mfa.totp.id ? 1 : 0
-  num += mfa.u2f.id || mfa.keys.data?.length || 0
+  num += (mfa.u2f.id ? 1 : 0) + (mfa.keys.data?.length || 0)
   num += mfa.backup.id ? 1 : 0
 
   return num

src/help/HelpButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-bind="!!$idpConfig.support" v-model="isOpen" width="initial">
+  <v-dialog v-if="!!$idpConfig.support" v-model="isOpen" width="initial">
     <!-- making it initial so card grows with content -->
     <template #activator="{ props }">
       <v-btn v-bind="props" variant="text" :icon="xs" class="mx-1">

src/locales/en.json

@@ -50,7 +50,9 @@
     "steps": {
       "pwStep": "Password",
       "pwRecoverStep": "Password recovery",
-      "2svStep": "2-step verification",
+      "authenticator": "Authenticator app",
+      "backupCodes": "Backup codes",
+      "securityKeyStep": "Security key",
       "completeStep": "Complete"
     },
     "complete": {

src/locales/es.json

@@ -50,7 +50,9 @@
     "steps": {
       "pwStep": "Contraseña",
       "pwRecoverStep": "Recuperar contraseña",
-      "2svStep": "Verificación de 2 pasos",
+      "authenticator": "Aplicación de autenticación",
+      "backupCodes": "Códigos de copia de seguridad",
+      "securityKeyStep": "Llave de seguridad",
       "completeStep": "Completo"
     },
     "complete": {

src/locales/fr.json

@@ -50,7 +50,9 @@
     "steps": {
       "pwStep": "Mot de Passe",
       "pwRecoverStep": "Récupération du mot de passe",
-      "2svStep": "Vérification en 2 étapes",
+      "authenticator": "Application d'authentification",
+      "backupCodes": "Codes de sauvegarde",
+      "securityKeyStep": "Clés de sécurité",
       "completeStep": "Compléter"
     },
     "complete": {

src/locales/ko.json

@@ -50,7 +50,9 @@
     "steps": {
       "pwStep": "패스워드/암호",
       "pwRecoverStep": "비밀번호 찾기",
-      "2svStep": "2단계 인증",
+      "authenticator": "인증 앱",
+      "backupCodes": "백업 코드",
+      "securityKey": "보안 키",
       "completeStep": "완료"
     },
     "complete": {

src/main.js

@@ -8,7 +8,7 @@ import VueSanitize from 'vue-sanitize-directive'
 
 const app = createApp(App)
 
-function main() {
+async function main() {
   const dsn = import.meta.env.VITE_SENTRY_DSN
   const release = __APP_VERSION__
 
@@ -21,7 +21,6 @@ function main() {
       console.error('Failed to load IDP configuration:', error)
     }
   }
-  loadConfig()
 
   app.config.globalProperties.$API = api
   app.config.globalProperties.$user = user
@@ -42,6 +41,8 @@ function main() {
   app.use(vuetify)
   app.use(VueSanitize)
 
+  await loadConfig()
+
   app.mount('#app')
 
   if (location.hostname !== 'profile.gtis.guru') {

src/profile/steps.js

@@ -16,13 +16,13 @@ export default {
     // Retain all steps but mark relevant ones
     allSteps.forEach((step, index) => {
       const isRelevant = step.isRelevant(user, recoveryMethods.alternates, mfa)
-      const isComplete = step.state === 'complete'
       const isNotDuplicate = !store.steps.some((s) => s.nameKey === step.nameKey)
-      if (isNotDuplicate && (isRelevant || !isComplete)) {
+      if (isNotDuplicate) {
         store.steps.push({
           ...step,
           id: index + 1,
           state: '',
+          skip: !isRelevant,
         })
       }
     })
@@ -62,22 +62,39 @@ const recovery = {
 
 const isAlternate = (method) => method.type === 'email'
 
-const twosv = {
-  nameKey: 'profile.steps.2svStep',
+const totp = {
+  nameKey: 'profile.steps.authenticator',
   paths: [
     '/2sv/intro',
     '/2sv/smartphone/intro',
     '/2sv/smartphone/download-app',
     '/2sv/smartphone/scan-qr',
     '/2sv/smartphone/verify-qr-code',
     '/2sv/smartphone/code-verified',
+  ],
+  isRelevant(user, recoveryMethods, mfa) {
+    return user.auth_type === 'login' && (isRequested(this.paths) || (!mfa.totp?.id && mfa.numVerified < 3))
+  },
+}
+
+const securityKeyStep = {
+  nameKey: 'profile.steps.securityKeyStep',
+  paths: [
     '/2sv/usb-security-key/intro',
     '/2sv/usb-security-key/insert',
     '/2sv/usb-security-key/touch',
     '/2sv/usb-security-key/confirmed',
-    '/2sv/printable-backup-codes/intro',
-    '/2sv/printable-backup-codes/new',
   ],
+  isRelevant(user, recoveryMethods, mfa) {
+    const numberOfKeys = (mfa.keys.data?.length || 0) + (mfa.u2f?.id ? 1 : 0)
+
+    return user.auth_type === 'login' && (isRequested(this.paths) || numberOfKeys === 0 || mfa.numVerified < 3)
+  },
+}
+
+const backupCodesStep = {
+  nameKey: 'profile.steps.backupCodes',
+  paths: ['/2sv/printable-backup-codes/intro', '/2sv/printable-backup-codes/new'],
   isRelevant(user, recoveryMethods, mfa) {
     return user.auth_type === 'login' && (isRequested(this.paths) || mfa.numVerified < 3)
   },
@@ -91,4 +108,4 @@ const complete = {
   },
 }
 
-const allSteps = [password, recovery, twosv, complete]
+const allSteps = [password, recovery, totp, securityKeyStep, backupCodesStep, complete]