feat: 2FA UI + modal

This commit is contained in:
NGPixel 2017-06-11 21:11:01 -04:00 committed by Nicolas Giard
parent d7992a5e19
commit 879ca63be5
14 changed files with 147 additions and 40 deletions

View File

@ -1,5 +1,6 @@
{
"eslint.enable": true,
"eslint.autoFixOnSave": false,
"puglint.enable": true,
"standard.enable": false,
"editor.formatOnSave": true,

View File

@ -70,6 +70,7 @@ import modalCreateUserComponent from './components/modal-create-user.vue'
import modalDeleteUserComponent from './components/modal-delete-user.vue'
import modalDiscardPageComponent from './components/modal-discard-page.vue'
import modalMovePageComponent from './components/modal-move-page.vue'
import modalProfile2faComponent from './components/modal-profile-2fa.vue'
import modalUpgradeSystemComponent from './components/modal-upgrade-system.vue'
import pageLoaderComponent from './components/page-loader.vue'
import searchComponent from './components/search.vue'
@ -181,6 +182,7 @@ $(() => {
modalDeleteUser: modalDeleteUserComponent,
modalDiscardPage: modalDiscardPageComponent,
modalMovePage: modalMovePageComponent,
modalProfile2fa: modalProfile2faComponent,
modalUpgradeSystem: modalUpgradeSystemComponent,
pageLoader: pageLoaderComponent,
search: searchComponent,

View 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>

View File

@ -2,13 +2,18 @@
export default {
name: 'admin-profile',
props: ['email', 'name', 'provider'],
props: ['email', 'name', 'provider', 'tfaIsActive'],
data() {
return {
password: '********',
passwordVerify: '********'
}
},
computed: {
tfaStatus() {
return this.tfaIsActive ? this.$t('profile.tfaenabled') : this.$t('profile.tfadisabled')
}
},
methods: {
saveUser() {
let self = this

View File

@ -12,6 +12,7 @@ import modalCreateUser from './modules/modal-create-user'
import modalDeleteUser from './modules/modal-delete-user'
import modalDiscardPage from './modules/modal-discard-page'
import modalMovePage from './modules/modal-move-page'
import modalProfile2fa from './modules/modal-profile-2fa'
import modalUpgradeSystem from './modules/modal-upgrade-system'
import pageLoader from './modules/page-loader'
@ -41,6 +42,7 @@ export default new Vuex.Store({
modalDeleteUser,
modalDiscardPage,
modalMovePage,
modalProfile2fa,
modalUpgradeSystem,
pageLoader
}

View File

@ -0,0 +1,21 @@
'use strict'
export default {
namespaced: true,
state: {
shown: false,
step: 'confirm'
},
getters: {},
mutations: {
shownChange: (state, shownState) => { state.shown = shownState },
stepChange: (state, stepState) => { state.step = stepState }
},
actions: {
open({ commit }, opts) {
commit('shownChange', true)
commit('stepChange', 'confirm')
},
close({ commit }) { commit('shownChange', false) }
}
}

View File

@ -161,6 +161,15 @@
font-size: 14px;
font-weight: 500;
display: block;
strong {
@each $color, $colorvalue in $material-colors {
&.is-#{$color} {
color: mc($color, '600');
}
}
}
}
.form-sections {

View File

@ -99,14 +99,7 @@ globalTasks.then(() => {
log: true
})
if (dev) {
fuse.dev({
port: 4444,
httpServer: false
})
}
const bundleVendor = fuse.bundle('vendor').instructions('~ index.js')
const bundleVendor = fuse.bundle('vendor').instructions('~ index.js') // eslint-disable-line no-unused-vars
const bundleApp = fuse.bundle('app').instructions('!> [index.js]')
const bundleSetup = fuse.bundle('configure').instructions('> configure.js')

View File

@ -92,6 +92,7 @@
"mongodb": "^2.2.28",
"mongoose": "^4.10.5",
"multer": "^1.3.0",
"node-2fa": "^1.1.2",
"node-graceful": "^0.2.3",
"ora": "^1.2.0",
"passport": "^0.3.2",

View File

@ -9,7 +9,10 @@
"passwordverify": "Verify Password",
"provider": "Provider",
"savechanges": "Save Changes",
"subtitle": "Profile and authentication info"
"subtitle": "Profile and authentication info",
"tfa": "Two-Factor Authentication (2FA)",
"tfaenable": "Enable 2FA",
"tfadisable": "Disable 2FA"
},
"stats": {
"subtitle": "General site-wide statistics",
@ -48,4 +51,4 @@
"edituser": "Edit User",
"uniqueid": "Unique ID"
}
}
}

View File

@ -97,10 +97,14 @@
"nav": {
"home": "Home"
},
"profile": {
"tfaenabled": "Enabled",
"tfadisabled": "Disabled"
},
"search": {
"didyoumean": "Did you mean...?",
"nomatch": "No results matching your query",
"placeholder": "Search...",
"results": "Search Results"
}
}
}

View File

@ -1,25 +0,0 @@
.modal(v-bind:class='{ "is-active": upgradeModal.state }')
.modal-background
.modal-container
.modal-content
template(v-if='upgradeModal.step === "running"')
header.is-blue Install
section.modal-loading
i
span Wiki.js {{ upgradeModal.mode }} in progress...
em Please wait
template(v-if='upgradeModal.step === "error"')
header.is-red Installation Error
section.modal-loading
span {{ upgradeModal.error }}
footer
a.button.is-grey.is-outlined(v-on:click='upgradeCancel') Abort
a.button.is-deep-orange(v-on:click='upgradeStart') Try Again
template(v-if='upgradeModal.step === "confirm"')
header.is-deep-orange Are you sure?
section
label.label You are about to {{ upgradeModal.mode }} Wiki.js.
span.note You will not be able to access your wiki during the operation. Content will not be affected. However, it is your responsability to ensure you have a backup in the unexpected event content gets lost or corrupted.
footer
a.button.is-grey.is-outlined(v-on:click='upgradeCancel') Abort
a.button.is-deep-orange(v-on:click='upgradeStart') Start

View File

@ -27,7 +27,15 @@ block adminContent
p.control.is-fullwidth
input.input(type='text', placeholder=t('admin:profile.displaynameexample'), v-model='name')
section
button.button.is-green(v-on:click='saveUser')
label.label #{t('admin:profile.tfa')}: #[strong.is-red(v-cloak) {{ tfaStatus }}]
button.button.is-blue(@click='$store.dispatch("modalProfile2fa/open")', :disabled='tfaIsActive')
i.icon-circle-plus
span= t('admin:profile.tfaenable')
button.button.is-blue(@click='saveUser', :disabled='!tfaIsActive')
i.icon-circle-minus
span= t('admin:profile.tfadisable')
section
button.button.is-green(@click='saveUser')
i.icon-check
span= t('admin:profile.savechanges')
.column
@ -49,3 +57,5 @@ block adminContent
p.control= moment(user.createdAt).format('LL')
label.label= t('admin:profile.lastprofileupdate')
p.control= moment(user.updatedAt).format('LL')
modal-profile-2fa

View File

@ -4617,11 +4617,11 @@ mute-stream@0.0.5:
version "0.0.5"
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"
mute-stream@0.0.6, mute-stream@~0.0.4:
mute-stream@0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.6.tgz#48962b19e169fd1dfc240b3f1e7317627bbc47db"
mute-stream@0.0.7:
mute-stream@0.0.7, mute-stream@~0.0.4:
version "0.0.7"
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
@ -4682,6 +4682,13 @@ ngraminator@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/ngraminator/-/ngraminator-0.0.1.tgz#29cfd699df6970f42de9b2f0bdc7f4b60fad6f8e"
node-2fa@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/node-2fa/-/node-2fa-1.1.2.tgz#5bc5691474afe35ae6b3b76459b98b7c20c7158c"
dependencies:
notp "^2.0.3"
thirty-two "0.0.2"
node-abi@^2.0.0:
version "2.0.2"
resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-2.0.2.tgz#00f3e0a58100eb480133b48c99a32cc1f9e6c93e"
@ -4830,6 +4837,10 @@ normalize-path@^2.0.1:
dependencies:
remove-trailing-separator "^1.0.1"
notp@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/notp/-/notp-2.0.3.tgz#a9fd11e25cfe1ccb39fc6689544ee4c10ef9a577"
npm-run-path@^2.0.0:
version "2.0.2"
resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@ -6774,6 +6785,10 @@ then-fs@^2.0.0:
dependencies:
promise ">=3.2 <8"
thirty-two@0.0.2:
version "0.0.2"
resolved "https://registry.yarnpkg.com/thirty-two/-/thirty-two-0.0.2.tgz#4253e29d8cb058f0480267c5698c0e4927e54b6a"
throat@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/throat/-/throat-3.0.0.tgz#e7c64c867cbb3845f10877642f7b60055b8ec0d6"