feat: 2FA UI + modal

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

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

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

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