@model ZeroFramework.IdentityServer.API.Models.Accounts.RegisterViewModel
@{
    Layout = null;
    ViewData["Title"] = "Register";
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ZeroFramework Identity Server</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body class="account-page" style="background-color:#0072c6">
    <div class="card p-3">
        <div class="card-body">
            <h4 class="text-center mb-5 card-title text-uppercase">Register</h4>
            <form id="account" method="post" autocomplete="off" asp-action="Register">
                <div class="form-group">
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                </div>
                <div class="input-group mb-4 input-group-lg">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-white"><i class="fa fa-user-o" style="font-size:14px;"></i></span>
                    </div>
                    <input asp-for="UserName" class="form-control" aria-required="true" autocomplete="new-user-name" />
                    <div class="invalid-feedback d-block">
                        <span asp-validation-for="UserName"></span>
                    </div>
                </div>
                <div class="input-group mb-4  input-group-lg">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-white"><i class="fa fa-phone" style="font-size:14px;"></i></span>
                    </div>
                    <input asp-for="PhoneNumber" class="form-control" aria-required="true" autocomplete="new-phone-number" />
                    <div class="invalid-feedback d-block">
                        <span asp-validation-for="PhoneNumber"></span>
                    </div>
                </div>
                <div class="input-group mb-4  input-group-lg">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-white"><i class="fa fa-key" style="font-size:12px;"></i></span>
                    </div>
                    <input asp-for="Password" class="form-control" aria-required="true" autocomplete="new-password" />
                    <div class="invalid-feedback d-block">
                        <span asp-validation-for="Password"></span>
                    </div>
                </div>
                <div class="input-group mb-4  input-group-lg">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-white"><i class="fa fa-key" style="font-size:12px;"></i></span>
                    </div>
                    <input asp-for="ConfirmPassword" class="form-control" aria-required="true" autocomplete="new-confirm-password" />
                    <div class="invalid-feedback d-block">
                        <span asp-validation-for="ConfirmPassword"></span>
                    </div>
                </div>
                <div class="input-group mb-4 input-group-lg">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-white"><i class="fa fa-keyboard-o" style="font-size:12px;"></i></span>
                    </div>
                    <input asp-for="ConfirmedCode" class="form-control" aria-required="true" autocomplete="new-confirmed-code" />
                    <div class="input-group-append">
                        <input class="btn btn-success" type="button" id="btn-send-code" onclick="sendCode()" value="Send Code" />
                    </div>
                    <div class="invalid-feedback d-block">
                        <span asp-validation-for="ConfirmedCode"></span>
                    </div>
                </div>
                <div class="form-group mb-4">
                    <div class="custom-checkbox custom-control">
                        <input type="checkbox" name="agree" id="agree" class="custom-control-input" aria-required="true">
                        <label for="agree" class="custom-control-label">I agree to the <a href="#">Terms and Conditions</a></label>
                        <div class="invalid-feedback">
                            You must agree with our Terms and Conditions
                        </div>
                    </div>
                </div>
                <div class="form-group mb-5">
                    <button id="login-submit" type="submit" class="btn btn-primary btn-lg btn-block">Register</button>
                </div>
            </form>
            <hr class="mb-4" />
            <div class="form-group text-center">
                <form asp-controller="Account" asp-action="ExternalLogin" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post">
                    <button type="submit" class="bg-success rounded-circle d-inline-block text-center border-0 p-0 btn-social" name="provider" value="WeChat">
                        <i class="fa fa-weixin text-white"></i>
                    </button>
                    <button type="submit" class="bg-primary rounded-circle d-inline-block text-center border-0 p-0 btn-social" name="provider" value="QQ">
                        <i class="fa fa-qq text-white"></i>
                    </button>
                    <button type="submit" class="bg-info rounded-circle d-inline-block text-center border-0 p-0 btn-social" name="provider" value="Microsoft">
                        <i class="fa fa-windows text-white"></i>
                    </button>
                    <button type="submit" class="bg-secondary rounded-circle d-inline-block text-center border-0 p-0 btn-social" name="provider" value="GitHub">
                        <i class="fa fa-github text-white"></i>
                    </button>
                    <button type="submit" class="bg-danger rounded-circle d-inline-block text-center border-0 p-0 btn-social" name="provider" value="Weibo">
                        <i class="fa fa-weibo text-white"></i>
                    </button>
                </form>
            </div>
            <div class="form-group text-center">
                Already have an account? <a asp-action="Login" asp-route-redirectUrl="@ViewData["ReturnUrl"]">Signin</a>
            </div>
        </div>
    </div>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await Html.PartialAsync("_ValidationScriptsPartial")

    <script>
        var countdown = 60;
        var sending = false;

        $(function () {
            countdown = localStorage.getItem("sendCodeCountdown");

            if (countdown > 0) {
                sending = true;
                var obj = $("#btn-send-code");
                obj.attr("disabled", true);
                obj.val("Sending(" + countdown + ")");
                setTime(obj);
            }

            $(window).on('beforeunload unload', function () {
                if (sending) {
                    console.log(countdown);
                    localStorage.setItem("sendCodeCountdown", countdown);
                }
                if (!sending) {
                    console.log(countdown);
                    localStorage.setItem("sendCodeCountdown", 0);
                }
            });
        });

        function setTime(obj) { //发送验证码倒计时
            if (countdown == 0) {
                obj.attr('disabled', false);
                obj.val("Send Code");
                countdown = 60;
                sending = false;
                return;
            } else {
                obj.attr('disabled', true);
                obj.val("Sending(" + countdown + ")");
                countdown--;
            }
            setTimeout(function () {
                setTime(obj);
            }, 1000)
        }

        function sendCode() {
            if ($('#PhoneNumber').valid()) {
                countdown = 60;
                $.ajax({
                    url: '/Account/SendCode',
                    type: "POST",
                    dataType: "text",
                    data: {
                        phoneNumber: $("#PhoneNumber").val(),
                    },
                    success: function () {
                        sending = true;
                        setTime($("#btn-send-code"));
                    }
                });
            }
        }
    </script>
</body>
</html>