<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>注册-Quinn</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/backgroud.css}">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4" >
        </div>
        <div class="col-md-4 mt-5" id='login_box'>
            <form id="registerForm" class="form-horizontal was-validated" method="post" noValidate>
                <div class="justify-content-center">
                    <h1>注册<small style="font-size: small">Quinn</small></h1>
                    <p th:text="${registerMsg}" style="color: red"></p>
                </div>
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input id="username" type="text" name="username" class="form-control" placeholder="用户名" required>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input id="password" type="password" name="password" class="form-control" placeholder="密码" required>
                </div>
                <div class="form-group">
                    <label for="repassword">确认密码</label>
                    <input id="repassword" type="password" name="repassword" class="form-control" placeholder="确认密码" required>
                </div>
                <div class="form-group">
                    <label for="email">email</label>
                    <input id="email" type="text" name="email" class="form-control" placeholder="邮箱" pattern="^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+" required>
                </div>
                <div class="form-group">
                    <label for="code">注册码</label>
                    <input id="code" type="text" name="code" class="form-control" placeholder="注册码" required>
                </div>
                <button class="btn btn-dark btn-block" type="button" onclick="registerSubmit();">注 册</button>
                <p class="mt-1 clearfix">
                    <a style="color: white" th:href="@{/toLogin}" class="float-right text-decoration-none">已有账号？去登录</a>
                </p>
            </form>
        </div>
        <div class="col-md-4" >
        </div>
    </div>
</div>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/jquery-ui.min.js}"></script>
<!--<script th:src="@{/live/js/addlive2d.js}"></script>-->
<script th:src="@{/layer/mobile/layer.js}"></script>
<script type="text/javascript">
    function registerSubmit(){
        let username = $('#username').val();
        let password = $('#password').val();
        let repassword = $('#repassword').val();
        let email = $('#email').val();
        let code = $('#code').val();
        if (!username){
            layer.open({ content: '用户名不能为空', skin: 'msg', time: 2 });
            return;
        }
        if (!password){
            layer.open({ content: '密码不能为空', skin: 'msg', time: 2 });
            return;
        }
        if (!code){
            layer.open({ content: '注册码不能为空！', skin: 'msg', time: 2 });
            return;
        }
        var reEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
        if (!reEmail.test(email)){
            layer.open({ content: '邮箱格式不正确！', skin: 'msg', time: 2 });
            return;
        }
        if (repassword != password){
            layer.open({ content: '两次输入密码不一致', skin: 'msg', time: 2 });
            return;
        }
        if (!code || code.length != 6){
            layer.open({ content: '注册码格式不正确', skin: 'msg', time: 2 });
            return;
        }
        console.log(123);
        $.ajax({
            url: "/checkRegister",
            async: false,
            type: "post",
            data: {"username":username,"password":password,"repassword":repassword,"email":email,"code":code},
            success: function (data) {
                console.log(data);
                if(data == 'ok'){
                    this.disabled = true;
                    $('#registerForm').submit();
                }else {
                    layer.open({ content: data, skin: 'msg', time: 2 });
                }
            },
            fail: function (error){
                layer.open({ content: error, skin: 'msg', time: 2 });
            }
        })
    }
</script>
</body>
</html>
