Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Graceful U2F support warnings #53

Merged
merged 10 commits into from
Dec 18, 2020
Merged

Graceful U2F support warnings #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
55bf172
u2f-api-polyfill wasn't packaged right anymore
Dec 16, 2020
503be46
convention
Dec 16, 2020
4608424
note unsupported browsers
Dec 17, 2020
4a13672
will need to check support elsewhere
Dec 17, 2020
c2404ed
ux for unsupported browsers was not acceptable
Dec 17, 2020
829eef6
things not centered
Dec 17, 2020
29eb166
Merge pull request #50 from silinternational/feature/u2f-support
Dec 17, 2020
961f42f
oops...accidentally left some test code in place.
Dec 17, 2020
0fb61c7
Merge pull request #52 from silinternational/feature/u2f-support
Dec 17, 2020
78d6660
outdated deps
Dec 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
898 changes: 432 additions & 466 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
17 changes: 14 additions & 3 deletions src/2sv/key/Insert.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
41 changes: 30 additions & 11 deletions src/2sv/key/Touch.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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: {
Expand All @@ -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
Expand All @@ -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
)
}
},
},
}
Expand Down