<script setup>
import "./otp.css"
import "@/assets/table.css"
import ctxRef from "@/utils/ctx_ref.js";
import Context from "./otp.js"
import PostForm from "@/components/form/PostForm.vue";
import TInputIcon from "@/components/ui/TInputIcon.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TButton from "@/components/ui/TButton.vue";
import BasicLayout from "@/layouts/BasicLayout.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<BasicLayout>
		<div class="form-box">
			<PostForm action="$" @before="ctx.submitBefore"
					  @done="ctx.submitDone" @success="ctx.submitSuccess" disableCSRF autocomplete="off">
				<input type="hidden" name="sid" :value="ctx.sid"/>
				<input type="hidden" name="remember" :value="ctx.remember ? 1 : 0"/>

				<div class="flex flex-col gap-4 border-gray-200 border p-4 rounded-xl">
					<div class="field text-center">
						<h6>登录{{ ctx.systemName }}</h6>
					</div>
					<div class="ui field">
						为了保护你的账户安全，需要进行OTP二次身份验证。
					</div>
					<div class="ui field">
						<TInputIcon beginIcon="pi pi-barcode">
							<TInputText type="text" fieldname="otpCode" name="otpCode" v-model="ctx.otpCode"
										placeholder="请输入OTP动态密码" maxlength="6" class="w-full"/>
						</TInputIcon>
					</div>

					<div class="field">
						<TButton class="w-full" type="submit" v-if="!ctx.isSubmitting">验证</TButton>
						<TButton class="w-full" disabled type="submit" v-if="ctx.isSubmitting">验证中...</TButton>
					</div>

					<div class="ui field cancel-login">
						<a :href="'/?from=' + ctx.encodedFrom">&laquo; 取消登录</a>
					</div>
				</div>
			</PostForm>
		</div>
	</BasicLayout>
</template>

<style scoped>

</style>