<script setup>
import TInputIcon from "@/components/ui/TInputIcon.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import TButton from "@/components/ui/TButton.vue";
import PostForm from "@/components/form/PostForm.vue";
import TInputText from "@/components/ui/TInputText.vue";

const props = defineProps(["ctx"])
</script>

<template>
	<PostForm action="$" @before="ctx.submitBefore" @done="ctx.submitDone" @success="ctx.submitSuccess" autocomplete="off" class="flex flex-col gap-4 border-gray-200 border p-4 rounded-xl" disbleCSRF>
		<input type="hidden" name="password" v-model="ctx.passwordMd5"/>
		<input type="hidden" name="token" v-model="ctx.token"/>
		<div class="header">
			<h6>登录{{ ctx.systemName }}</h6>
		</div>
		<div class="field">
			<TInputIcon beginIcon="pi pi-user">
				<TInputText name="username" v-model="ctx.username" :placeholder="ctx.usernamePlaceholder" maxlength="200" @input="ctx.changeUsername" class="w-full" autofocus/>
			</TInputIcon>
		</div>
		<div class="field">
			<TInputIcon beginIcon="pi pi-lock">
				<TInputText fieldName="password" type="password" v-model="ctx.password" placeholder="请输入密码" maxlength="200" @input="ctx.changePassword()" class="w-full"/>
			</TInputIcon>
		</div>
		<div class="field" v-show="ctx.showOTP">
			<TInputIcon beginIcon="pi pi-bars">
				<TInputText name="otpCode" placeholder="请输入OTP动态密码" maxlength="6" class="w-full"/>
			</TInputIcon>
		</div>
		<div class="field">
			<a href="" @click.prevent="ctx.showMoreOptions()">更多选项
				<i class="icon angle" :class="{down:!ctx.moreOptionsVisible, up:ctx.moreOptionsVisible}"></i>
			</a>
		</div>
		<div class="field" v-show="ctx.moreOptionsVisible">
			<div class="flex gap-2 items-center">
				<TCheckboxBinary name="remember" value="1" checked="checked">在这个电脑上记住登录（14天）</TCheckboxBinary>
			</div>
		</div>

		<TButton class="w-full" type="submit" v-if="!ctx.isSubmitting">登录</TButton>
		<TButton disabled class="w-full" type="submit" v-if="ctx.isSubmitting">登录中...</TButton>

		<div v-if="ctx.canRegister" class="register-box">
			<a href="/register">注册新用户<span v-if="!ctx.canResetPassword">&nbsp; &raquo;</span></a><span v-if="ctx.canResetPassword"> &nbsp; <span class="disabled">|</span> &nbsp; <a href="/account/reset">找回密码</a></span>
		</div>
	</PostForm>
</template>

<style scoped>

</style>