<!doctype html>
<html lang="<@t.page 'html_lang'/>">
<head>
    <meta charset="UTF-8">
    <title>${site.name} - <@t.page 'management_system'/> - <@t.page 'login_page'/></title>
    <link rel="stylesheet" href="${base}/resource/css/login.css">
    <link rel="stylesheet" href="${base}/resource/fonts/iconfont/iconfont.css">
</head>
<body>
<div class="login_body">
    <div class="login_body_left"><div class="qrcode"></div></div>
    <div class="login_form clearfix">
        <form action="${base+adminContextPath}/otp/doRegister" method="post">
            <p class="logo">
                <@t.page 'login.2fa'/>
            </p>
            <p>
                <@t.page 'login.2fa.description'/>
            </p>
            <p>
                <i class="iconfont iconfont-page"></i>
                <input type="text" name="secret" readonly="readonly" value="${secret}"/>
            </p>
            <p>
                <i class="iconfont iconfont-key"></i>
                <input type="text" name="code" minlength="6" maxlength="6" placeholder="<@t.page 'login.otpcode'/>" title="<@t.page 'login.otpcode'/>"/>
            </p>
            <p>
                <input type="submit" value="<@t.page 'login'/>"/>
                <input type="hidden" name="returnUrl" value="${(returnUrl!)}"/>
            </p>
        </form>
    </div>
</div>
<script src="${base}/resource/plugins/jquery/jquery.min.js"></script>
<#if bindURI?has_content>
<script src="${base}/resource/plugins/jquery/jquery.qrcode.min.js"></script>
<script>
$('.qrcode').qrcode({width: 200,height: 200,text: "${bindURI?no_esc}"});
$('input[name=code]').focus();
$('input[name=secret]').on("click",function(){
    navigator.clipboard.writeText($(this).val());
});
</script>
</#if>
</body>
</html>