<template>
	<div class="mx-auto mt-16 max-w-xl space-y-4">
		<h1 class="text-center text-2xl font-semibold">启用双重认证</h1>

		<AlertBanner
			:title="`团队所有者/管理员已为团队 <strong>${$team.pg.user}</strong> 的所有成员强制执行双重认证。您必须启用它才能继续。`"
			type="error"
		/>
		<Configure2FA @enabled="handleEnabled" />
	</div>
</template>

<script>
import Configure2FA from '../components/auth/Configure2FA.vue';
import AlertBanner from '../components/AlertBanner.vue';

export default {
	components: {
		Configure2FA,
		AlertBanner
	},
	methods: {
		handleEnabled() {
			this.$team.reload();

			// sometimes the reload is too fast
			// and the user is not redirected back here due to the 2FA requirement
			setTimeout(() => {
				this.$router.push({ name: 'Site List' });
			}, 100);
		}
	}
};
</script>