vuefilemanager/resources/js/components/Others/TwoFactorQrSetupPopup.vue

<template>
    <PopupWrapper name="two-factor-qr-setup">

        <PopupHeader :title="$t('popup_2fa.title')" icon="edit" />

		<PopupContent>
			<div v-if="qrCode" class="flex justify-center">
				<div v-html="qrCode" class="my-5"></div>
			</div>

			<InfoBox style="margin-bottom: 0">
				<p v-html="$t('popup_2fa.help')"></p>
			</InfoBox>
        </PopupContent>

        <PopupActions>
            <ButtonBase
				class="w-full"
				@click.native="closeQrCodePopup"
				:button-style="closeQrButtonStyle"
			>
                {{ closeQrButtonText }}
            </ButtonBase>
        </PopupActions>
    </PopupWrapper>
</template>

<script>
import AppInputText from "../Admin/AppInputText";
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import PopupWrapper from "./Popup/PopupWrapper";
import PopupActions from './Popup/PopupActions'
import PopupContent from './Popup/PopupContent'
import PopupHeader from './Popup/PopupHeader'
import ButtonBase from "../FilesView/ButtonBase";
import InfoBox from "./Forms/InfoBox";
import {required} from 'vee-validate/dist/rules'
import {mapGetters} from 'vuex'
import {events} from '../../bus'
import axios from 'axios'

export default {
	name: "TwoFactorQrSetupPopup",
	components: {
		ValidationProvider,
		ValidationObserver,
		AppInputText,
		PopupWrapper,
		PopupActions,
		PopupContent,
		PopupHeader,
		ButtonBase,
		required,
		InfoBox,
	},
	computed: {
		...mapGetters([
			'user'
		]),
		closeQrButtonText() {
			return this.isConfirmedClose
				? this.$t('popup_2fa.disappear_qr')
				: this.$t('shared_form.button_done')
		},
		closeQrButtonStyle() {
			return this.isConfirmedClose
				? 'danger'
				: 'theme'
		},
	},
	data() {
		return {
			isLoading: false,
			qrCode: '',
			isConfirmedClose: false,
		}
	},
	methods: {
		enable() {
			axios
				.post('/user/two-factor-authentication')
				.then(() => {

					this.$store.commit('CHANGE_TWO_FACTOR_AUTHENTICATION_STATE', true)

					this.getQrCode()
				})
				.catch(() => {
					this.$isSomethingWrong()
				})
		},
		getQrCode() {
			axios
				.get('/user/two-factor-qr-code')
				.then(response => {
					this.qrCode = response.data.svg
				})
				.catch(() => {
					this.$isSomethingWrong()
				})
		},
		closeQrCodePopup() {
			if (!this.isConfirmedClose) {
				this.isConfirmedClose = true
			} else {
				events.$emit('toaster', {
					type: 'success',
					message: this.$t('popup_2fa.toaster_enabled'),
				})

				this.qrCode = undefined
				this.isConfirmedClose = false

				this.$closePopup()
			}
		}
	},
	created() {
		// Show popup
		events.$on('popup:open', args => {

			if (args.name !== 'two-factor-qr-setup') return

			this.enable()
		})
	}
}
</script>