<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>注册账号</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />

    <link rel="stylesheet" type="text/css" th:href="@{/vendor/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/fonts/font-awesome-4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/fonts/iconic/css/material-design-iconic-font.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/util.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
</head>

<body>

<div class="limiter">
    <div class="container-login100" th:style="'background-image:url(/images/bg.jpg);'">
        <div class="wrap-login100 p-l-40 p-r-40 p-t-30 p-b-25">
            <form th:action="@{/page/doregister}" method="post" class="login100-form validate-form">
                <div id="login-logo" style="text-align: center;">
                    <img style="width: 80px;" class="logoImage">
                </div>

                <span class="login100-form-title p-b-5"></span>

                <div class="wrap-input100 validate-input" data-validate="请输入邮箱">
                    <!--<span class="label-input100">邮箱</span>-->
                    <input class="input100" type="email" id="email" name="email" placeholder="请输入邮箱" required="邮箱不可为空">
                    <span class="focus-input100 p-b-5" data-symbol="&#xf206;"></span>
                </div>

                <div class="wrap-input100 validate-input " data-validate="请输入姓名">
                    <!--<span class="label-input100">姓名</span>-->
                    <input class="input100" type="text" name="name" placeholder="请输入姓名" required="姓名不可为空">
                    <span class="focus-input100" data-symbol="&#xf197;"></span>
                </div>

                <div class="wrap-input100 validate-input " data-validate="请输入密码">
                    <!--<span class="label-input100">密码</span>-->
                    <input class="input100" type="password" name="password" placeholder="请输入密码" required="密码不可为空">
                    <span class="focus-input100" data-symbol="&#xf190;"></span>
                </div>

                <div class="wrap-input100 validate-input" data-validate="请输入密码">
                    <!--<span class="label-input100">确认密码</span>-->
                    <input class="input100" type="password" name="password2" placeholder="请确认密码" required="密码不可为空">
                    <span class="focus-input100" data-symbol="&#xf190;"></span>
                </div>

                <div class="wrap-input100 validate-input " data-validate="请输入验证码">
                    <input class="input100" type="text" name="verifyCode" placeholder="请输入验证码" required="验证码不可为空">
                    <span class="focus-input100" data-symbol="&#xf13a;"></span>
                </div>
                <div class="text-center p-t-6 p-b-8">
                    <span id="info" style="color: red" th:text="${result==null}?'&nbsp;':${result.msg}"></span>
                </div>

                <div class="container-login100-form-btn" style="width: 50%; float: left;">
                    <div class="wrap-login100-form-btn">
                        <div class="login100-form-bgbtn"></div>
                        <button type="button"  id="sendVerify" class="login100-form-btn" onclick="sendEmail(this)" >获取验证码</button>
                    </div>
                </div>
                <div class="container-login100-form-btn">
                    <div class="wrap-login100-form-btn">
                        <div class="login100-form-bgbtn"></div>
                        <button class="login100-form-btn">注 册</button>
                    </div>
                </div>

                <div class="flex-col-c p-t-10">
                    <a href="/page/login" class="txt2">已有帐号,立即登录</a>
                </div>
            </form>
        </div>
    </div>
</div>

<script th:src="@{/vendor/jquery/jquery-3.2.1.min.js}"></script>
<script th:src="@{/js/main.js}"></script>
<script th:src="@{/js/common.js}"></script>

<script type="text/javascript">
function sendEmail(obj) {
    var email = $("#email").val();
    if (email == null || email.trim() == "") {
        document.getElementById("info").innerText = "邮箱不能为空";
        return;
    }
    if (!email.match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/)){
        document.getElementById("info").innerText = "邮箱格式不正确，请重新输入";
        return
    }

    var data = {"email":email};
    $.ajax({
        url:"/api/verify/mail",
        type:"PUT",
        data:data,
        timeout: 3000,
        success:function (result) {
            console.log(result);
            if (result.status != 2000) {
                alert("发送失败, 原因:"+result.msg);
            }else{
                alert("发送成功，请前往邮箱查收！");
                document.getElementById("info").innerHTML = "&nbsp;"
                settime(obj);
            }
        }
    })
}
<!--function settime(obj) {-->
    <!--if (countdown == 0) {-->
        <!--obj.removeAttribute("disabled");-->
        <!--obj.innerText="获取验证码";-->
        <!--countdown = 60;-->
        <!--return;-->
    <!--} else {-->
        <!--obj.setAttribute("disabled", true);-->
        <!--obj.innerText="重新发送(" + countdown + ")";-->
        <!--countdown&#45;&#45;;-->
    <!--}-->
    <!--setTimeout(function() {-->
            <!--settime(obj) }-->
        <!--,1000)-->
<!--}-->
</script>
</body>
</html>


