81 lines
2.3 KiB
Vue
81 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<div v-if="qrSecret != ''">
|
||
|
|
|
||
|
|
<div class="mt-4 max-w-xl text-sm text-gray-600">
|
||
|
|
<!-- <p class="font-semibold">
|
||
|
|
Two factor authentication is now enabled.
|
||
|
|
</p> -->
|
||
|
|
<p>Your new TOTP secret is: {{ qrSecret }}</p>
|
||
|
|
<p>For quick setup, scan this QR code with your phone's authenticator application (TOTP):</p>
|
||
|
|
<div class="mt-4">
|
||
|
|
<img :src="qrSvg" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mt-4 max-w-xl text-sm text-gray-600">
|
||
|
|
<p>
|
||
|
|
After you configured your app, enter a test code below to ensure everything works correctly:
|
||
|
|
</p>
|
||
|
|
<input id="totp-confirmation" :disabled="loadingConfirmation" v-model="confirmationCode" type="tel"
|
||
|
|
minlength="6" maxlength="10" autocomplete="off" autocapitalize="off" :placeholder="'Authentication code'"
|
||
|
|
@keydown="onConfirmKeyDown" />
|
||
|
|
<BaseButton class="mx-2" :icon="mdiContentSaveCheck" type="button" :disabled="loadingConfirmation" color="info"
|
||
|
|
label="Verify" @click="confirm" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { mdiContentSaveCheck } from '@mdi/js';
|
||
|
|
import BaseButton from '@/Components/BaseButton.vue';
|
||
|
|
import { computed } from 'vue';
|
||
|
|
|
||
|
|
const emit = defineEmits(['confirm', 'update:confirmation']);
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
loadingConfirmation: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
qrSecret: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
qrUrl: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
qrSvg: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
confirmation: {
|
||
|
|
type: String,
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
// https://vanoneang.github.io/article/v-model-in-vue3.html#the-challenge-reduce-boilerplate
|
||
|
|
const confirmationCode = computed({
|
||
|
|
get() {
|
||
|
|
return props.confirmation;
|
||
|
|
},
|
||
|
|
set(value) {
|
||
|
|
// props.persons.length = 0;
|
||
|
|
// props.persons.push(...value);
|
||
|
|
emit('update:confirmation', value)
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const onConfirmKeyDown = (e) => {
|
||
|
|
if (e.which === 13) {
|
||
|
|
confirm();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const confirm = () => {
|
||
|
|
// emit('update:confirmation', confirmationCode.value);
|
||
|
|
emit('confirm');
|
||
|
|
};
|
||
|
|
|
||
|
|
</script>
|