<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Swan | Beta</title>
    <meta name="description" content="Responsive, Bootstrap, BS4"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <!-- style -->
    <!-- build:css ../assets/css/site.min.css -->
    <link rel="stylesheet" href="{{static_url('css/bootstrap.css')}}" type="text/css"/>
    <link rel="stylesheet" href="{{static_url('css/theme.css')}}" type="text/css"/>
    <link rel="stylesheet" href="{{static_url('css/style.css')}}" type="text/css"/>
    <link rel="stylesheet" href="{{static_url('css/signup.css')}}" type="text/css"/>
    <!-- endbuild -->
</head>
<body class="layout-row">
<div class="flex">
    <div class="w-xl w-auto-sm mx-auto py-5">
        <div class="p-4 d-flex flex-column h-100">
            <!-- brand -->
            <a href="index.html" class="navbar-brand align-self-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-slack"><path d="M14.5 10c-.83 0-1.5-.67-1.5-1.5v-5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5z"></path><path d="M20.5 10H19V8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path><path d="M9.5 14c.83 0 1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5S8 21.33 8 20.5v-5c0-.83.67-1.5 1.5-1.5z"></path><path d="M3.5 14H5v1.5c0 .83-.67 1.5-1.5 1.5S2 16.33 2 15.5 2.67 14 3.5 14z"></path><path d="M14 14.5c0-.83.67-1.5 1.5-1.5h5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-5c-.83 0-1.5-.67-1.5-1.5z"></path><path d="M15.5 19H14v1.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"></path><path d="M10 9.5C10 8.67 9.33 8 8.5 8h-5C2.67 8 2 8.67 2 9.5S2.67 11 3.5 11h5c.83 0 1.5-.67 1.5-1.5z"></path><path d="M8.5 5H10V3.5C10 2.67 9.33 2 8.5 2S7 2.67 7 3.5 7.67 5 8.5 5z"></path></svg>
                <span class="hidden-folded d-inline l-s-n-1x align-self-center">Swan</span>
            </a>
            <!-- / brand -->
        </div>
        <div class="card">
            <div id="content-body">
                <div class="p-3 p-md-5">
                    <h5>注册界面</h5>

                    <p>
                    <div class="alert alert-warning" role="alert" id="error-div" style="display: none">
                        <i data-feather="alert-circle"></i>
                        <span class="mx-2" id="error-msg"></span>
                    </div>
                    </p>
                    <div class="">
                        <div class="">
                            {% module xsrf_form_html() %}
                            <div class="form-group">
                                <input type="text" id="nickname" class="form-control" name="nickname" value=""
                                       placeholder="请输入2-20个字符的昵称！"
                                       required>
                            </div>
                            <div class="form-group">
                                <input type="email" id="username" class="form-control" name="username" value=""
                                       placeholder="请输入邮箱！"
                                       required>
                            </div>
                            <div class="form-group">
                                <input type="password" id="password" class="form-control" name="password" value=""
                                       placeholder="请输入6-20个字符的密码！"
                                       required>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <input type="text" id="graph_captcha" class="form-control" style="width: 80px"
                                           name="graph_captcha"
                                           value="" placeholder="图形验证码" required>
                                    <span class="input-group-addon captcha-addon">
                                <img id="captcha-img" class="captcha-img" src="/graph_captcha">
                  </span>
                                </div>

                            </div>
                            <div class="mb-3 text-sm">
                                <span class="text-muted">点击注册, 我同意</span>
                                <a href="#">服务条款</a>
                            </div>
                            <button type="submit" id="register-btn" class="btn btn-primary mb-4">注册</button>
                            <div>已经有账号?
                                <a href="/login" class="text-primary _600">登录</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center text-muted">&copy; Copyright. Basik</div>
    </div>
</div>
<!-- build:js ../assets/js/site.min.js -->
<!-- jQuery -->
<script src="{{static_url('libs/jquery/dist/jquery.min.js')}}"></script>
<!-- Bootstrap -->
<script src="{{static_url('libs/popper.js/dist/umd/popper.min.js')}}"></script>
<script src="{{static_url('libs/bootstrap/dist/js/bootstrap.min.js')}}"></script>
<!-- ajax page -->
<!--<script src="{{static_url('libs/pjax/pjax.min.js')}}"></script>-->
<!--<script src="{{static_url('js/ajax.js')}}"></script>-->
<!-- lazyload plugin -->
<script src="{{static_url('js/lazyload.config.js')}}"></script>
<script src="{{static_url('js/lazyload.js')}}"></script>
<script src="{{static_url('js/plugin.js')}}"></script>
<!-- scrollreveal -->
<script src="{{static_url('libs/scrollreveal/dist/scrollreveal.min.js')}}"></script>
<!-- feathericon -->
<script src="{{static_url('libs/feather-icons/dist/feather.min.js')}}"></script>
<script src="{{static_url('js/plugins/feathericon.js')}}"></script>
<!-- theme -->
<script src="{{static_url('js/theme.js')}}"></script>
<script src="{{static_url('js/utils.js')}}"></script>
<script type="text/javascript">
    $("#captcha-img").click(function () {
        var graph_captcha_code = document.getElementById("captcha-img");
        graph_captcha_code.src = "/graph_captcha?xx=" + Math.random();
    });
    $(document).on("click", "#register-btn", function () {
        var dataArray = {
            nickname: $("#nickname").val(),
            username: $("#username").val(),
            password: $("#password").val(),
            graph_captcha: $("#graph_captcha").val(),
            _xsrf: $("[name='_xsrf']").val(),
        };
        $.ajax({
            url: "/register",
            type: "POST",
            dataType: "json",
            data: dataArray,
            success: function (res) {
                if (res['status'] == 0) {
                    $("#error-div").show();
                    $("#error-msg").empty();
                    $("#error-msg").append(res['msg']);
                } else {
                    $("#error-div").show();
                    $("#error-msg").empty();
                    $("#error-msg").append(res['msg']);
                    setTimeout(function () {
                        location.href = "/login";
                    }, 3000);
                }

            },
            error: function (res) {
                console.log(res);
            }
        });
    });


</script>
<!-- endbuild -->
</body>
</html>
