81 lines
1.5 KiB
Vue
81 lines
1.5 KiB
Vue
<template>
|
|
<n-modal
|
|
v-model:show="show"
|
|
preset="card"
|
|
:title="dialogTitle"
|
|
:style="modalStyle"
|
|
:mask-closable="true"
|
|
:close-on-esc="true"
|
|
class="tfa-dialog"
|
|
>
|
|
<template #header>
|
|
<span class="text-lg font-semibold">{{ dialogTitle }}</span>
|
|
</template>
|
|
<Configure2FA @enabled="closeDialog" @disabled="closeDialog" />
|
|
</n-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import { NModal } from 'naive-ui';
|
|
import Configure2FA from '../../auth/Configure2FA.vue';
|
|
|
|
export default {
|
|
props: {
|
|
modelValue: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
},
|
|
components: {
|
|
NModal,
|
|
Configure2FA
|
|
},
|
|
computed: {
|
|
is2FAEnabled() {
|
|
return this.$team.pg?.user_info?.is_2fa_enabled;
|
|
},
|
|
dialogTitle() {
|
|
return this.is2FAEnabled
|
|
? this.$t('Disable Two-Factor Authentication')
|
|
: this.$t('Enable Two-Factor Authentication');
|
|
},
|
|
isMobile() {
|
|
return window.innerWidth <= 768;
|
|
},
|
|
modalStyle() {
|
|
return {
|
|
width: this.isMobile ? '95vw' : '700px',
|
|
maxWidth: this.isMobile ? '95vw' : '90vw',
|
|
};
|
|
},
|
|
show: {
|
|
get() {
|
|
return this.modelValue;
|
|
},
|
|
set(value) {
|
|
this.$emit('update:modelValue', value);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
closeDialog() {
|
|
this.show = false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
@media (max-width: 768px) {
|
|
:deep(.tfa-dialog .n-card) {
|
|
width: 95vw !important;
|
|
max-width: 95vw !important;
|
|
margin: 20px auto;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
:deep(.tfa-dialog .n-card-body) {
|
|
padding: 20px 16px;
|
|
}
|
|
}
|
|
</style> |