<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    {$if eq .faviconFileId 0}
    <link rel="shortcut icon" href="/images/favicon.png"/>
    {$else}
    <link rel="shortcut icon" href="/ui/image/{$ .faviconFileId}"/>
    {$end}
    <title>登录{$ htmlEncode .systemName}</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    {$TEA.VUE}
    {$TEA.SEMANTIC}
	<script type="text/javascript" src="/js/md5.min.js"></script>
	<script type="text/javascript" src="/js/utils.min.js"></script>
	<script type="text/javascript" src="/js/sweetalert2/dist/sweetalert2.all.min.js"></script>
	<script type="text/javascript" src="/js/components.js?v=1.0.0"></script>
    {$if not (eq .themeBackgroundColor "")}
    <style>
        .button.primary {
            background: #{$.themeBackgroundColor} !important;
        }
    </style>
    {$end}
</head>
<body>
<div>
	{$template "/menu"}

	<div class="form-box">
		<form method="post" class="ui form" data-tea-action="$" data-tea-before="submitBefore" data-tea-done="submitDone" data-tea-success="submitSuccess" autocomplete="off">
			<csrf-token></csrf-token>
			<input type="hidden" name="password" v-model="passwordMd5"/>
			<input type="hidden" name="token" v-model="token"/>
			<div class="ui segment stacked">
				<div class="ui header">
					登录{$ htmlEncode .systemName}
				</div>
				<div class="ui field">
					<div class="ui left icon input">
						<i class="ui user icon small"></i>
						<input type="text" name="username" v-model="username" :placeholder="usernamePlaceholder" maxlength="200" ref="usernameRef" @input="changeUsername"/>
					</div>
				</div>
				<div class="ui field">
					<div class="ui left icon input">
						<i class="ui lock icon small"></i>
						<input type="password" v-model="password" placeholder="请输入密码" maxlength="200" @input="changePassword()" ref="passwordRef"/>
					</div>
				</div>
                <div class="ui field" v-show="showOTP">
                    <div class="ui left icon input">
                        <i class="ui barcode icon"></i>
                        <input type="text" name="otpCode" placeholder="请输入OTP动态密码" maxlength="6"/>
                    </div>
                </div>
				<div class="ui field">
					<a href="" @click.prevent="showMoreOptions()">更多选项 <i class="icon angle" :class="{down:!moreOptionsVisible, up:moreOptionsVisible}"></i> </a>
				</div>
				<div class="ui field" v-show="moreOptionsVisible">
					<div class="ui checkbox">
						<input type="checkbox" name="remember" value="1" checked="checked"/>
						<label>在这个电脑上记住登录（14天）</label>
					</div>
				</div>

				<button class="ui button primary fluid" type="submit" v-if="!isSubmitting">登录</button>
				<button class="ui button primary fluid disabled" type="submit" v-if="isSubmitting">登录中...</button>

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

</div>

</body>
</html>