feat: 2FA UI + modal
This commit is contained in:
parent
d7992a5e19
commit
879ca63be5
1
.vscode/settings.json
vendored
1
.vscode/settings.json
vendored
@ -1,5 +1,6 @@
|
||||
{
|
||||
"eslint.enable": true,
|
||||
"eslint.autoFixOnSave": false,
|
||||
"puglint.enable": true,
|
||||
"standard.enable": false,
|
||||
"editor.formatOnSave": true,
|
||||
|
@ -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,
|
||||
|
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>
|
@ -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
|
||||
|
@ -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
|
||||
}
|
||||
|
21
client/js/store/modules/modal-profile-2fa.js
Normal file
21
client/js/store/modules/modal-profile-2fa.js
Normal 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) }
|
||||
}
|
||||
}
|
@ -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 {
|
||||
|
9
fuse.js
9
fuse.js
@ -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')
|
||||
|
||||
|
@ -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",
|
||||
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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
|
@ -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
|
||||
|
19
yarn.lock
19
yarn.lock
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user