feat: 2FA UI + modal

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>