liz/wikijs-fork
liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 2FA UI + modal

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.vscode/settings.json vendored
View File

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

2
client/js/app.js
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,

66
client/js/components/modal-profile-2fa.vue Normal file
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>

7
client/js/pages/admin-profile.component.js
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

2
client/js/store/index.js
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
}

21
client/js/store/modules/modal-profile-2fa.js Normal file
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) }
}
}

9
client/scss/components/form.scss
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 {

9
fuse.js
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')

1
package.json
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",

5
server/locales/en/admin.json
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",

4
server/locales/en/browser.json
View File

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

25
server/views/modals/admin-upgrade.pug
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

12
server/views/pages/admin/profile.pug
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

19
yarn.lock
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"