<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 PostForm from "@/components/form/PostForm.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TMessage from "@/components/ui/TMessage.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<PostForm action="$" @success="ctx.success">
		<TMessage v-if="!ctx.canVerify">系统暂未开通绑定邮箱功能。</TMessage>
		<div v-show="ctx.canVerify">
			<DefinitionTable>
				<tbody>
				<tr v-if="ctx.verifiedEmail.length > 0">
					<td class="title">已绑定电子邮箱</td>
					<td>
						<span>{{ctx.verifiedEmail}}</span>
					</td>
				</tr>
				<tr v-if="ctx.latestVerification != null">
					<td>等待绑定邮箱</td>
					<td>
						{{ctx.latestVerification.email}}
						<p class="comment" v-if="!ctx.latestVerification.isSent">系统正在发送激活链接到此邮箱中，请耐心等待。</p>
						<p class="comment" v-if="ctx.latestVerification.isSent"><span class="red">请在{{ctx.latestVerification.expiresTime}}前点击邮件中的激活链接进行绑定。</span></p>
					</td>
				</tr>
				<tr>
					<td class="title"><span v-if="ctx.verifiedEmail.length > 0">新</span>绑定电子邮箱 *</td>
					<td>
						<TInputText name="email" maxlength="100" autofocus class="w-full"/>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
			<SubmitButton>提交</SubmitButton> &nbsp; <a href="/settings/profile" v-if="ctx.verifiedEmail.length > 0" class="link">不修改</a>
		</div>
	</PostForm>
</template>

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