<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{{.i18n.wide}} - {{.i18n.sign_up}}</title>

        <meta name="keywords" content="Wide, Golang, IDE, Team, Cloud, B3log, Sign Up"/>
        <meta name="description" content="A Web-based IDE for Teams using Golang, do your development anytime, anywhere."/>
        <meta name="author" content="B3log">

        <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/base.css?{{.conf.StaticResourceVersion}}">
        <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/sign.css?{{.conf.StaticResourceVersion}}">
        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    </head>
    <body>
        <div class="header">
            <div class="wrapper fn-clear">
                <a href="/login" rel="login">
                    <img title="Wide, a Web-based IDE for Teams using Golang." src="{{.conf.StaticServer}}/static/images/wide-logo.png" 
                         class="logo"/></a>
                <ul class="fn-right">
                    <li><a href="/playground" target="_blank" style="color: #cd504a">Play</a></li>
                    <li><a rel="bookmark" href="https://github.com/b3log/wide" target="_blank">GitHub</a></li>
                    <li><a href="http://pan.baidu.com/s/1dD3XwOT" target="_blank">{{.i18n.download}}</a></li>
                    <li><a rel="help" href="https://www.gitbook.com/book/88250/wide-user-guide" target="_blank">{{.i18n.help}}</a></li>
                    <li><a rel="bookmark" href="https://github.com/b3log/wide/issues/new" target="_blank">{{.i18n.issues}}</a></li>
                    <li><button class="btn" onclick="window.location.href = '{{.conf.Context}}/login'">{{.i18n.login}}</button></li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div class="wrapper fn-clear">
                <div class="fn-left">
                    <h2>Join Wide</h2>
                    <h3>Coding with Go on the Wide way.</h3>
                </div>
                <div class="form fn-right sign-up">
                    <div id="msg" class="fn-none"></div>
                    <div class="dir">
                        Workspace: 
                        <div id="dir" data-dir="{{.dir}}{{.pathSeparator}}">{{.dir}}{{.pathSeparator}}</div>
                    </div>
                    <input id="username" placeholder="Username"/><br/>
                    <input id="email" placeholder="Email"/><br/>
                    <input id="password" type="password" placeholder="Password"/><br/>
                    <input id="confirmPassword" type="password" placeholder="Confirm your password"/>
                    <button id="signUpBtn" class="btn">{{.i18n.sign_up}}</button>
                </div>
            </div>
        </div>
        <div class="footer">
            <span class="wrapper">
                Ver {{.ver}}, &copy; {{.year}} <a rel="copyright" href="https://b3log.org" target="_blank">B3LOG.ORG</a>, <a href="https://github.com/b3log/wide/blob/master/TERMS.md" target="_blank">{{.i18n.terms}}</a>
            </span>
            <div class="github-btns">
                <iframe src="https://ghbtns.com/github-btn.html?user=b3log&repo=wide&type=star&count=true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
            </div>
        </div>

        <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lib/jquery-2.1.1.min.js"></script>
        <script>
                        (function () {
                            var contentH = $(window).height() - $(".footer").height() - $(".header").height() - 18;
                            $(".content").outerHeight(contentH)
                                    .css("padding-top", (contentH - $(".content .fn-left").height()) / 2 + "px");

                            var signUp = function () {
                                if ($.trim($("#username").val()) === ""
                                        || !/^\w+$/.test($("#username").val())
                                        || $.trim($("#username").val()).length > 16) {
                                    $("#msg").text("{{.i18n.user_name_ruler}}").show();
                                    $("#username").focus();
                                    return false;
                                } else if (!/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test($("#email").val())) {
                                    $("#msg").text("{{.i18n.invalid_email}}").show();
                                    $("#email").focus();
                                    return false;
                                } else if ($.trim($("#password").val()) === "") {
                                    $("#msg").text("{{.i18n.sing_up_error}}").show();
                                    $("#password").focus();
                                    return false;
                                } else if ($("#confirmPassword").val() !== $("#password").val()) {
                                    $("#msg").text("{{.i18n.password_no_match}}").show();
                                    $("#confirmPassword").focus();
                                    return false;
                                }

                                var request = {
                                    username: $("#username").val(),
                                    password: $("#password").val(),
                                    email: $("#email").val()
                                };
                                $.ajax({
                                    type: 'POST',
                                    url: '{{.conf.Context}}/signup',
                                    data: JSON.stringify(request),
                                    dataType: "json",
                                    success: function (result) {
                                        if (!result.succ) {
                                            $("#msg").text(result.msg).show();
                                            return;
                                        }

                                        window.location.href = "{{.conf.Context}}/";
                                    }
                                });
                            };

                            $("#username").keyup(function (event) {
                                if (event.which === 13) {
                                    if ($.trim($(this).val()) === ""
                                            || !/^\w+$/.test($(this).val())
                                            || $.trim($(this).val()).length > 16) {
                                        $("#msg").text("{{.i18n.user_name_ruler}}").show();
                                    } else {
                                        $("#email").focus();
                                        $("#msg").hide();
                                    }
                                } else {
                                    if ($.trim($(this).val()) === ""
                                            || !/^\w+$/.test($(this).val())
                                            || $.trim($(this).val()).length > 16) {
                                        $("#msg").text("{{.i18n.user_name_ruler}}").show();
                                    } else {
                                        $("#msg").hide();
                                    }
                                    $("#dir").html($("#dir").data('dir') + $(this).val());
                                }
                            }).focus();

                            $("#email").keydown(function (event) {
                                if (event.which === 13) {
                                    if ($.trim($(this).val()) === "") {
                                        $("#msg").text("{{.i18n.invalid_email}}").show();
                                    } else {
                                        $("#password").focus();
                                    }
                                } else {
                                    $("#msg").hide();
                                }
                            });

                            $("#password").keydown(function (event) {
                                if (event.which === 13) {
                                    if ($.trim($(this).val()) === "") {
                                        $("#msg").text("{{.i18n.sing_up_error}}").show();
                                    } else {
                                        $("#confirmPassword").focus();
                                    }
                                } else {
                                    $("#msg").hide();
                                }
                            });

                            $("#confirmPassword").keydown(function (event) {
                                if (event.which === 13) {
                                    if ($(this).val() !== $("#password").val()) {
                                        $("#msg").text("{{.i18n.password_no_match}}").show();
                                    } else {
                                        signUp();
                                    }
                                } else {
                                    $("#msg").hide();
                                }
                            });

                            $("#signUpBtn").click(function () {
                                signUp();
                            });
                        })();
        </script>
    </body>
</html>