<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>[[#{signUp}]] - [[${configs.base.siteName}]]</title>
    <meta name="keywords" th:content="${configs.base.siteKeywords}">
    <meta name="description" th:content="${configs.base.siteDescription}">
    <link th:replace="|${theme}/fragment/common| :: css">
    <script th:replace="|${theme}/fragment/common| :: js"></script>
</head>
<body class="bg-light">
<div th:replace="|${theme}/fragment/show_error| :: show_error"></div>
<div th:replace="|${theme}/fragment/common| :: browser_upgrade"></div>
<div class="container my-3 my-md-4 my-lg-5">
    <div class="row justify-content-center">
        <div class="col col-md-6 col-lg-5 col-xl-5 reg-box">
            <h3 class="reg-logo text-center">
                <a href="index.html" th:href="@{/}">jsp<b>BB</b></a> <span th:text="#{signUp}"></span>
            </h3>
            <div class="reg-box-body rounded p-4 mt-4" style="background-color:#fff;border:1px solid #ccc;">
                <form class="mb-2" id="validForm" th:action="@{/api/sign_up_and_sign_in}" method="POST">
                    <div class="form-group">
                        <label class="sr-only" for="username" th:text="#{user.username}"></label>
                        <input type="text" class="form-control" id="username" name="username" th:placeholder="#{user.username}" required th:title="#{user.username.required}"
                               th:maxlength="${configs.signUp.usernameMaxLength}"
                               th:data-rule-minlength="${configs.signUp.usernameMinLength}" th:data-msg-minlength="#{user.username.minLength(${configs.signUp.usernameMinLength})}"
                               th:data-rule-pattern="${configs.signUp.usernameRegex}" th:data-msg-pattern="#{user.username.pattern}"
                               th:data-rule-remote="@{/api/users/username_not_exist}" th:data-msg-remote="#{user.username.exist}">
                        <!--<small class="form-text text-muted">4~18个字符，可使用字母、数字、下划线</small>-->
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="password" th:text="#{user.password}"></label>
                        <input type="password" class="form-control" id="password" name="password" th:placeholder="#{user.password}" required th:title="#{user.password.required}" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="confirmPassword" th:text="#{user.confirmPassword}"></label>
                        <input type="password" class="form-control" id="confirmPassword" th:placeholder="#{user.confirmPassword}" required th:title="#{user.confirmPassword.required}" data-rule-equalTo="#password" th:data-msg-equalTo="#{validation.equalTo}" autocomplete="off">
                    </div>
                    <th:block th:if="${configs.signUp.verifyMode==1}">
                        <div class="form-group">
                            <label class="sr-only" for="captcha" th:text="#{captcha}"></label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="captcha" name="captcha" onfocus="fetchCaptcha()" th:placeholder="#{captcha}" autocomplete="off" required th:title="#{enterCaptcha}" th:data-msg-remote="#{incorrectCaptcha}">
                                <div class="input-group-append">
                                    <img id="captchaImg" class="input-group-text" style="cursor:pointer;padding:0;" onclick="fetchCaptcha()" th:title="#{clickToRetrieveCaptcha}"
                                         src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
                                    <input type="hidden" id="captchaToken" name="captchaToken">
                                    <script th:inline="javascript">
                                        function fetchCaptcha() {
                                            request(/*[[@{/api/captcha}]]*/'', {}).then(function (data) {
                                                if (data === null) return;
                                                $('#captchaImg').attr('src', 'data:image/png;base64,' + data.base64);
                                                $('#captchaToken').val(data.token);
                                            });
                                        }
                                    </script>
                                </div>
                            </div>
                        </div>
                    </th:block>
                    <th:block th:if="${configs.signUp.verifyMode==4}">
                        <div th:fragment="mobile" class="form-group">
                            <label class="sr-only" for="mobile" th:text="#{user.mobile}"></label>
                            <input type="text" class="form-control" id="mobile" name="mobile" th:placeholder="#{user.mobile}" required th:title="#{user.mobile.required}"
                                   data-rule-pattern="^1\d{10}$" th:data-msg-pattern="#{user.mobile.invalid}" th:data-rule-remote="@{/api/users/mobile_not_exist}" th:data-msg-remote="#{user.mobile.exist}">
                        </div>
                        <div th:fragment="mobileMessage" class="form-group">
                            <label class="sr-only" for="mobileMessage" th:text="#{mobileMessage}"></label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="mobileMessage" name="mobileMessage" th:placeholder="#{mobileMessage}" autocomplete="off" required th:title="#{enterMobileMessage}" th:data-msg-remote="#{incorrectMobileMessage}">
                                <input type="hidden" id="mobileMessageId" name="mobileMessageId">
                                <span class="input-group-append"><button class="btn btn-secondary" id="mobileMessageButton" type="button" th:text="#{obtainMobileMessage}"></button></span>
                            </div>
                        </div>
                    </th:block>
                    <th:block th:if="${configs.signUp.verifyMode==3}">
                        <div th:fragment="email" class="form-group">
                            <label class="sr-only" for="email" th:text="#{user.email}"></label>
                            <input type="text" class="form-control email" id="email" name="email" th:placeholder="#{user.email}" required th:title="#{user.email.required}"
                                   data-rule-email="true" th:data-msg-email="#{user.email.invalid}" th:data-rule-remote="@{/api/users/email_not_exist}" th:data-msg-remote="#{user.email.exist}">
                        </div>
                        <div th:fragment="emailMessage" class="form-group">
                            <label class="sr-only" for="emailMessage" th:text="#{emailMessage}"></label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="emailMessage" name="emailMessage" th:placeholder="#{emailMessage}" autocomplete="off" required th:title="#{enterEmailMessage}" th:data-msg-remote="#{incorrectEmailMessage}">
                                <input type="hidden" id="emailMessageId" name="emailMessageId">
                                <span class="input-group-append"><button class="btn btn-secondary" id="emailMessageButton" type="button" th:text="#{obtainEmailMessage}"></button></span>
                            </div>
                        </div>
                    </th:block>
                    <th:block th:if="${configs.signUp.verifyMode==2}">
                        <div class="form-group">
                            <label class="sr-only" for="password" th:text="#{signUpMode}"></label>
                            <ul class="nav nav-pills">
                                <li class="nav-item">
                                    <a class="nav-link active" href="#mobilePanel" data-toggle="tab" th:text="#{mobileSignUp}"></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#emailPanel" data-toggle="tab" th:text="#{emailSignUp}"></a>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-content">
                            <div id="mobilePanel" class="tab-pane active">
                                <div th:replace="::mobile"></div>
                                <div th:replace="::mobileMessage"></div>
                            </div>
                            <div id="emailPanel" class="tab-pane">
                                <div th:replace="::email"></div>
                                <div th:replace="::emailMessage"></div>
                            </div>
                        </div>
                    </th:block>
                    <button type="submit" class="btn btn-primary btn-block" th:text="#{signUp}"></button>
                </form>
                <p class="text-center text-muted small">
                    <span th:text="#{agreeTermsOfService}"></span> <a href="terms.html" th:href="@{/terms}" th:text="#{termsOfService}"></a>
                </p>
                <p class="text-center text-muted">
                    <small>----- OR -----</small>
                </p>
                <p th:replace="|${theme}/sign_in| :: oauth_sign_in"></p>
                <p class="text-center">
                    <a class="small" th:href="@{/sign_in}" th:text="#{signIn}"></a>
                </p>
            </div>
        </div>
    </div>
</div>

<div th:if="${configs.signUp.verifyMode==2 || configs.signUp.verifyMode==4}" th:replace="|${theme}/fragment/send_sms| :: send_mobile_mmessage"></div>
<div th:if="${configs.signUp.verifyMode==2 || configs.signUp.verifyMode==3}" th:replace="|${theme}/fragment/send_sms| :: send_email_mmessage"></div>

<script th:inline="javascript">
    $(function () {
        var formValidator = $("#validForm").validate({
            rules: {
                captcha: {
                    remote: {
                        url: /*[[@{/api/try_captcha}]]*/'', data: {
                            token: function () {
                                return $('#captchaToken').val();
                            }
                        }
                    }
                },
                mobileMessage: {
                    remote: {
                        url: /*[[@{/api/try_mobile_message}]]*/'', data: {
                            mobileMessageId: function () {
                                return $('#mobileMessageId').val();
                            },
                            mobile: function () {
                                return $('#mobile').val();
                            }
                        }
                    }
                },
                emailMessage: {
                    remote: {
                        url: /*[[@{/api/try_email_message}]]*/'', data: {
                            emailMessageId: function () {
                                return $('#emailMessageId').val();
                            },
                            email: function () {
                                return $('#email').val();
                            }
                        }
                    }
                }
            },
            submitHandler: function (form) {
                request(form.action, {method: form.method, body: $(form).serializeJSON()}).then(function (data) {
                    if (data === null) return;
                    /*[# th:if="${param.fallbackUrl}"]*/
                    location.href = /*[[${param.fallbackUrl}]]*/'/';
                    /*[/]*/
                    /*[# th:unless="${param.fallbackUrl}"]*/
                    location.href = /*[[@{/}]]*/'/';
                    /*[/]*/
                });
            }
        });
        $('#username').focus().select();
        $('#mobileMessageButton').click(function () {
            sendMobileMessage(formValidator, $('#mobile'), $('#mobileMessageId'), $(this), 'signUp');
        });
        $('#emailMessageButton').click(function () {
            sendEmailMessage(formValidator, $('#email'), $('#emailMessageId'), $(this), 'signUp');
        });
    });
</script>
<script th:replace="|${theme}/fragment/common| :: access_log"></script>
</body>
</html>