feat: 2FA UI + modal

.vscode/settings.json

 {
   "eslint.enable": true,
+  "eslint.autoFixOnSave": false,
   "puglint.enable": true,
   "standard.enable": false,
   "editor.formatOnSave": true,

client/js/app.js

@@ -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,

client/js/components/modal-profile-2fa.vue

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

client/js/pages/admin-profile.component.js

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

client/js/store/index.js

@@ -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
   }

client/js/store/modules/modal-profile-2fa.js

+'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) }
+  }
+}

client/scss/components/form.scss

@@ -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 {

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')
 

package.json

@@ -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",

server/locales/en/admin.json

@@ -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",

server/locales/en/browser.json

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

server/views/modals/admin-upgrade.pug

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

server/views/pages/admin/profile.pug

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