<@layout.extends name="/inc/layout.ftl">
    <@layout.put block="title">
        <title>登入</title>
    </@layout.put>

    <@layout.put block="contents">
        <div class="row">
            <div class="col-md-4 col-md-offset-4 floating-box">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">帐号登入</h3>
                    </div>
                    <div class="panel-body">
                        <div id="message">
                            <@layout.extends name="/inc/action_message.ftl" />
                        </div>
                        <form method="POST" action="login" accept-charset="UTF-8">
                            <div class="form-group">
                                <label class="control-label" for="principal">账号</label>
                                <input class="form-control" name="principal" type="text" required>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="credential">密码</label>
                                <input class="form-control" name="credential" type="password" required>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="captchaCode">图形验证码</label>
                                <br>
                                <img id="captchaImg" onclick="getCaptcha()" src="" alt="user image">
                                <input style="width: 150px; height: 48px; margin: 0;" name="captchaCode" type="text" required>
                            </div>
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" name="rememberMe" value="1"> 记住登入
                                </label>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary btn-block">
                                    登 入
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            function getPubkey(){
                $.getJSON('/api/auth/code/pubkey?channel=1', function (json) {
                    if (json.code === 0) {
                        localStorage.setItem("pubkey", json.data.pubkey)
                        localStorage.setItem("pubkeyR", json.data.r)
                    } else {
                        layer.alert(json.msg, function(){
                        });
                    }
                })
            }
            getPubkey();

            function getCaptcha(){
                var captchaImg = document.getElementById("captchaImg");
                $.getJSON('/api/auth/code/captcha', function (json) {
                    if (json.code === 0) {
                        captchaImg.setAttribute("src", json.data);
                    } else {
                        layer.alert(json.msg, function(){
                        });
                    }
                })
            }
            getCaptcha()

            // 在表单提交之前执行以下代码
            // 在表单提交之前执行以下代码
            $('form').submit(function(event) {
                // 阻止表单提交
                event.preventDefault();
                // 获取表单数据并将其转换为 JSON 对象
                var data = {}
                var value = $(this).serializeArray()
                $.each(value, function (index, item) {
                    data[item.name] = item.value;
                });

                let encryptor = new JSEncrypt();
                encryptor.setPublicKey(localStorage.getItem("pubkey"));
                data.credential = encryptor.encrypt(localStorage.getItem("pubkeyR") + data.credential);
                data.loginType = 2
                data.plat = 1
                data.rememberMe = 0
                let jsonStr = JSON.stringify(data);

                // 手动提交表单
                $.ajax({
                    type: 'POST',
                    url: '/api/auth/signin',
                    contentType: "application/json;charset=utf-8",
                    data: jsonStr,
                    success: function(resp) {
                        // 处理表单提交成功后的响应
                        if (resp.code === 0) {
                            window.location.replace('/')
                        } else {
                            layer.msg(resp.msg, {icon: 2});
                        }
                    },
                    error: function(xhr, status, error) {
                        // 处理表单提交失败后的错误
                        console.log(error)
                    }
                });
            });
        </script>
    </@layout.put>
</@layout.extends>