<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 "./reset.js"
import "./reset.css"
import "@/assets/table.css"
import SubmitButton from "@/components/form/SubmitButton.vue";
import TInputText from "@/components/ui/TInputText.vue";
import PostForm from "@/components/form/PostForm.vue";
import {ref} from "vue";
import BasicLayout from "@/layouts/BasicLayout.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const verifyCodeInput = ref()
const ctx = ctxRef(new Context(), {
	refs: {verifyCodeInput}
})

</script>

<template>
	<BasicLayout>
		<div class="form-box">
			<PostForm action="$" @success="ctx.success" @before="ctx.before">
				<input type="hidden" name="action" v-model="ctx.action"/>
				<DefinitionTable>
					<tbody>
					<tr v-show="!ctx.isSent">
						<td class="title">用户名或邮箱 *</td>
						<td>
							<TInputText name="usernameOrEmail" placeholder="用户名、邮箱" autofocus v-model="ctx.nameOrEmail" class="w-full"/>
							<p class="comment">请输入你的用户名或者已经绑定的邮箱。</p>
						</td>
					</tr>
					</tbody>
					<tbody v-show="ctx.isSent">
					<tr>
						<td class="title">用户名或邮箱</td>
						<td>{{ ctx.nameOrEmail }}</td>
					</tr>
					<tr>
						<td>验证码 *</td>
						<td>
							<TInputText name="code" style="width: 6em" maxlength="6" ref="verifyCodeInput"/>
							<p class="comment">
								<span class="red">6位数字验证码已经发送到邮箱{{ ctx.email }}，请查收。</span>
							</p>
						</td>
					</tr>
					<tr>
						<td>新登录密码 *</td>
						<td>
							<TInputText type="password" name="newPass" maxlength="100" class="w-full"/>
							<p class="comment">长度不小于6位<span v-if="ctx.complexPassword">，且必须包含大写字母和小写字母</span>。
							</p>
						</td>
					</tr>
					<tr>
						<td>确认新登录密码 *</td>
						<td>
							<TInputText type="password" name="newPass2" maxlength="100" class="w-full"/>
						</td>
					</tr>
					</tbody>
				</DefinitionTable>
				<SubmitButton v-show="!ctx.isSent">下一步</SubmitButton>
				<SubmitButton v-show="ctx.isSent">保存新密码</SubmitButton>
				&nbsp; <a href="/login" class="link ml-2">&laquo; 回登录页</a>
			</PostForm>
		</div>
	</BasicLayout>
</template>

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