feat: 2FA UI + modal
This commit is contained in:
66
client/js/components/modal-profile-2fa.vue
Normal file
66
client/js/components/modal-profile-2fa.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template lang="pug">
|
||||
transition(:duration="400")
|
||||
.modal(v-show='isShown', v-cloak)
|
||||
transition(name='modal-background')
|
||||
.modal-background(v-show='isShown')
|
||||
.modal-container
|
||||
transition(name='modal-content')
|
||||
.modal-content(v-show='isShown')
|
||||
template(v-if='step === "qr"')
|
||||
header.is-blue Setup your 2FA app
|
||||
section.modal-loading
|
||||
i
|
||||
span Wiki.js {{ mode }} in progress...
|
||||
em Please wait
|
||||
template(v-if='step === "error"')
|
||||
header.is-red Error
|
||||
section.modal-loading
|
||||
span {{ error }}
|
||||
footer
|
||||
a.button.is-grey.is-outlined(@click='cancel') Discard
|
||||
template(v-if='step === "confirm"')
|
||||
header.is-blue Two-Factor Authentication
|
||||
section
|
||||
label.label Do you want to enable 2FA?
|
||||
span.note Two-Factor Authentication (2FA) provides an extra layer of security for your account. Upon login, you will be prompted to enter a token generated by a 2FA app (e.g. Authy, Google Authenticator, etc.).
|
||||
footer
|
||||
a.button.is-grey.is-outlined(@click='cancel') Discard
|
||||
a.button.is-blue(@click='confirm') Setup
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'modal-profile-2fa',
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
error: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isShown() {
|
||||
return this.$store.state.modalProfile2fa.shown
|
||||
},
|
||||
step() {
|
||||
return this.$store.state.modalProfile2fa.step
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.isLoading = false
|
||||
this.$store.dispatch('modalProfile2fa/close')
|
||||
},
|
||||
confirm() {
|
||||
this.$http.post('/admin/profile/2fa', {
|
||||
action: 'setup'
|
||||
}).then(resp => {
|
||||
this.$store.commit('modalProfile2fa/stepChange', 'qr')
|
||||
}).catch(err => {
|
||||
this.$store.commit('modalProfile2fa/stepChange', 'error')
|
||||
this.error = err.body.msg
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
Reference in New Issue
Block a user