Merge pull request #53 from silinternational/develop

Graceful U2F support warnings
silinternational · Dec 18, 2020 · 8b848e3 · 8b848e3
2 parents 34d937a + 78d6660
commit 8b848e3
Show file tree

Hide file tree

Showing 9 changed files with 1,250 additions and 487 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,6 @@
     "axios": "^0.21.0",
     "date-fns": "^2.16.1",
     "sass-loader": "^10.1.0",
-    "u2f-api-polyfill": "^0.4.4",
     "vue": "^2.6.12",
     "vue-analytics": "^5.22.1",
     "vue-router": "^3.4.9",

diff --git a/src/2sv/key/Insert.vue b/src/2sv/key/Insert.vue
@@ -1,13 +1,17 @@
 <template>
   <ProfileWizard>
     <BasePage>
-      <template v-slot:header>
+      <template v-if="isSupported" v-slot:header>
         {{ $vuetify.lang.t('$vuetify.2sv.key.insert.header') }}
       </template>
+      <template v-else v-slot:header>
+        {{ $vuetify.lang.t('$vuetify.2sv.key.insert.nosupport.header') }}
+      </template>
 
-      <figure class="pa-4">
+      <figure v-if="isSupported" class="pa-4">
         <v-img contain src="@/assets/insert-usb-security-key.png" alt="A usb key inserted into a usb port."/>
       </figure>
+      <p v-else>{{ $vuetify.lang.t('$vuetify.2sv.key.insert.nosupport.info') }}</p>
     </BasePage>
 
     <ButtonBar>
@@ -17,19 +21,26 @@
 
       <v-spacer></v-spacer>
 
-      <v-btn to="/2sv/usb-security-key/touch" color="primary" outlined> 
+      <v-btn v-if="isSupported" to="/2sv/usb-security-key/touch" color="primary" outlined>
         {{ $vuetify.lang.t('$vuetify.2sv.key.insert.button.ok') }}
       </v-btn>
+      <v-btn v-else to="/2sv/printable-backup-codes/intro" color="primary" outlined> 	
+        {{ $vuetify.lang.t('$vuetify.global.button.skip') }}	
+      </v-btn>
     </ButtonBar>
   </ProfileWizard>
 </template>
 
 <script>
 import ProfileWizard from '@/profile/ProfileWizard'
+import { isSupported } from './u2f-api'
 
 export default {
   components: {
     ProfileWizard,
   },
+  data: () => ({	
+    isSupported: isSupported(),
+  }),
 }
 </script>
diff --git a/src/2sv/key/Touch.vue b/src/2sv/key/Touch.vue
@@ -15,7 +15,7 @@
         {{ $vuetify.lang.t('$vuetify.2sv.key.touch.info') }}
       </p>
 
-      <figure class="pa-4">
+      <figure class="pa-4 d-flex flex-column">
         <v-img v-if="! touched" contained src="@/assets/touch-usb-security-key.png" alt="A finger touching the top of a usb key."/>
         <v-icon v-else color="success" x-large>mdi-check</v-icon>
       </figure>
@@ -28,17 +28,23 @@
 
       <v-spacer></v-spacer>
 
-      <v-btn v-if="error" @click="error = false; create()" color="error" outlined> 
+      <v-btn v-if="isSupported && error" @click="error = false; create()" color="error" outlined> 
         {{ $vuetify.lang.t('$vuetify.2sv.key.touch.button.retry') }}
       </v-btn>
+
+      <v-btn v-if="error" to="/2sv/printable-backup-codes/intro" color="warning" outlined class="ml-4">
+        {{ $vuetify.lang.t('$vuetify.global.button.skip') }}	
+      </v-btn>
     </ButtonBar>
   </ProfileWizard>
 </template>
 
 <script>
 import ProfileWizard from '@/profile/ProfileWizard'
-import u2f from './u2f-api.js'
-import { add, verify } from '@/global/mfa';
+import u2f, { isSupported } from './u2f-api.js'
+import { add, verify } from '@/global/mfa'
+
+let absTimeout
 
 export default {
   components: {
@@ -48,13 +54,16 @@ export default {
     newU2f: {},
     touched: false,
     error: false,
+    isSupported: isSupported(),
   }),
   async created() {
     this.create()
   },
   methods: {
     handleKeyResponse: async function(response) {
       if (isValid(response)) {
+        clearTimeout(absTimeout)
+
         await verify(this.newU2f.id, response)
         
         this.touched = true
@@ -69,14 +78,24 @@ export default {
       }
     },
     async create() {
-      this.newU2f = await add('u2f')
+      if (this.isSupported) {
+        this.newU2f = await add('u2f')
+      }
+  
+      const TEN_SECS = 10000
+      absTimeout && clearTimeout(absTimeout)
+      absTimeout = setTimeout(() => {
+        this.error = true
+      }, TEN_SECS)
 
-      u2f.register(
-        this.newU2f.data.challenge.appId,
-        [this.newU2f.data.challenge],
-        [],
-        this.handleKeyResponse
-      )
+      if (this.isSupported) {
+        u2f.register(
+          this.newU2f.data.challenge.appId,
+          [this.newU2f.data.challenge],
+          [],
+          this.handleKeyResponse
+        )
+      }
     },
   },
 }