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>