<script setup>
// Copyright 2024 FlexCDN root@flexcdn.cn. All rights reserved. Official site: https://flexcdn.cn .

import ctxRef from "@/utils/ctx_ref.js"
import Context from "./index.js"
import DefinitionTable from "@/components/common/DefinitionTable.vue";
import CopyToClipboard from "@/components/common/CopyToClipboard.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<DefinitionTable>
		<tbody>
		<tr>
			<td class="title">状态</td>
			<td>
				<span v-if="ctx.otp != null && ctx.otp.isOn" class="green">已启用OTP认证</span>
				<span v-else class="disabled">未启用</span> &nbsp; &nbsp;
				<a href="" @click.prevent="ctx.disable" v-if="ctx.otp != null && ctx.otp.isOn" class="link text-sm">[停用]</a>
				<a href="" @click.prevent="ctx.enable" v-if="ctx.otp == null || !ctx.otp.isOn" class="link text-sm">[启用]</a>
				<p class="comment">启用后，用户每次登录时需要输入动态密码。</p>
			</td>
		</tr>
		<tr v-if="ctx.otp != null && ctx.otp.isOn">
			<td>认证二维码</td>
			<td>
				<img :src="'/settings/mfa/otpQrcode'" alt=""/>
				<p class="comment"><a :href="'/settings/mfa/otpQrcode?download=true'" class="link">[下载]</a> &nbsp; 可以通过二维码快速添加OTP认证信息到认证App中。</p>
			</td>
		</tr>
		<tr v-if="ctx.otp != null && ctx.otp.isOn">
			<td>密钥</td>
			<td>{{ctx.otp.params.secret}} <CopyToClipboard :text="ctx.otp.params.secret"></CopyToClipboard>
				&nbsp; <a href="" @click.prevent="ctx.updateOtp()">[重新生成]</a></td>
		</tr>
		</tbody>
	</DefinitionTable>
</template>

<style lang="postcss" scoped>
</style>