From a9318e0c0c7f72932cd7460dc115796a65617383 Mon Sep 17 00:00:00 2001
From: Van <lly219@gmail.com>
Date: Thu, 30 Oct 2014 16:25:57 +0800
Subject: [PATCH] sign up

---
 i18n/en_US.json     |   5 +-
 i18n/ja_JP.json     |   5 +-
 i18n/zh_CN.json     |   5 +-
 i18n/zh_TW.json     |   5 +-
 static/css/sign.css | 117 +++++++++++++++++++++++++++++++++++++++
 views/login.html    |  14 ++++-
 views/sign_up.html  | 131 +++++++++++++++++++++++++++++++++++++++++++-
 7 files changed, 276 insertions(+), 6 deletions(-)
 create mode 100644 static/css/sign.css

diff --git a/i18n/en_US.json b/i18n/en_US.json
index 0593334..1eea0d7 100644
--- a/i18n/en_US.json
+++ b/i18n/en_US.json
@@ -108,5 +108,8 @@
     "test": "Test",
     "sign_up": "Sign Up",
     "team": "Team",
-    "colon": ": "
+    "colon": ": ",
+    "sing_up_error": "Sign Up Error",
+    "user_name_ruler": "Username only by az, AZ, 0-9, _ consisting of a length of 16",
+    "password_no_match": "Password doesn't match the confirmation"
 }
\ No newline at end of file
diff --git a/i18n/ja_JP.json b/i18n/ja_JP.json
index d9e00ed..d8fa366 100644
--- a/i18n/ja_JP.json
+++ b/i18n/ja_JP.json
@@ -108,5 +108,8 @@
     "test": "テスト",
     "sign_up": "登録",
     "team": "チーム",
-    "colon": "："
+    "colon": "：",
+    "sing_up_error": "登録に失敗しました",
+    "user_name_ruler": "16の長さからなる_ AZ、AZ、0-9、によってユーザ名のみ",
+    "password_no_match": "一貫性のないパスワード入力"
 }
diff --git a/i18n/zh_CN.json b/i18n/zh_CN.json
index a2d3170..17c5c74 100644
--- a/i18n/zh_CN.json
+++ b/i18n/zh_CN.json
@@ -108,5 +108,8 @@
     "test": "测试",
     "sign_up": "注册",
     "team": "团队",
-    "colon": "："
+    "colon": "：",
+    "sing_up_error": "注册失败",
+    "user_name_ruler": "用户名只能由 a-z, A-Z, 0-9, _ 组成，长度为16",
+    "password_no_match": "密码输入不一致"
 }
\ No newline at end of file
diff --git a/i18n/zh_TW.json b/i18n/zh_TW.json
index f9c167e..96abd7f 100644
--- a/i18n/zh_TW.json
+++ b/i18n/zh_TW.json
@@ -108,5 +108,8 @@
     "test": "測試",
     "sign_up": "註冊",
     "team": "團隊",
-    "colon": "："
+    "colon": "：",
+    "sing_up_error": "註冊失敗",
+    "user_name_ruler": "用戶名只能由az, AZ, 0-9, _ 組成，長度為16",
+    "password_no_match": "密碼輸入不一致"
 }
\ No newline at end of file
diff --git a/static/css/sign.css b/static/css/sign.css
new file mode 100644
index 0000000..5c75940
--- /dev/null
+++ b/static/css/sign.css
@@ -0,0 +1,117 @@
+.wrapper {
+    margin: 0 auto;
+    width: 980px;
+}
+
+.header .logo {
+    float: left;
+    height: 32px;
+    margin-top: 3px;
+}
+
+.header {
+    margin: 8px 0;
+}
+
+.header li {
+    float: left;
+}
+
+.header a {
+    display: block;
+    font-weight: bold;
+    padding: 4px 8px;
+    color: #333;
+    line-height: 30px;
+    text-decoration: none;
+}
+
+.header a:hover {
+    color: #4183C4;
+}
+
+.content {
+    border-top: 1px solid #A4A4A4;
+    border-bottom: 1px solid #919191;
+    background-color: #202021;
+}
+
+.content h2 {
+    color: #FFF;
+    font-size: 70px;
+    margin: 0 0 60px;
+}
+
+.content h3 {
+    color: #4183c4;
+    font-size: 21px;
+}
+
+.content .form {
+    width: 320px;
+    margin-top: 28px;
+    position: relative;
+}
+
+.content .form input {
+    width: 100%;
+    background-color: #fafafa; 
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset;
+    color: #333;
+    min-height: 34px;
+    outline: medium none;
+    vertical-align: middle;
+    font-size: 16px;
+    border: 1px solid #FFF;
+    padding: 10px;
+    margin-top: 20px;
+}
+
+.content .form input:focus {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset, 0 0 12px rgba(255, 255, 255, 0.75);
+}
+
+#msg {
+    background-color: #fcdede;
+    border: 1px solid #d2b2b2;
+    padding: 15px;
+    font-size: 14px;
+    color: #911;
+    position: absolute;
+    width: 100%;
+    top: -48px;
+}
+
+.footer {
+    line-height: 30px;
+    color: #777;
+    font-size: 12px;
+    text-align: center;
+}
+
+.footer a {
+    text-decoration: none;
+    color: #4183c4;
+}
+
+.footer a:hover {
+    text-decoration: underline;
+}
+
+/* start sign up */
+.dir {
+    color: #4183c4;
+    font-size: 18px;
+    word-wrap: break-word;
+    margin-top: 20px;
+}
+
+#dir {
+    color: #999; 
+    font-size: 13px;
+}
+
+.form.sign-up {
+    margin-top: -20px;
+}
+/* end sign up */
\ No newline at end of file
diff --git a/views/login.html b/views/login.html
index bf210d7..c0a8d38 100644
--- a/views/login.html
+++ b/views/login.html
@@ -4,7 +4,7 @@
         <meta charset="UTF-8">
         <title>{{.i18n.wide}} - {{.i18n.login}}</title>
         <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/base.css?{{.conf.StaticResourceVersion}}">
-        <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/login.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>
@@ -17,6 +17,7 @@
                     <li><a href="https://github.com/b3log/wide" target="_blank">GitHub</a></li>
                     <li><a href="https://www.gitbook.io/book/88250/wide-user-guide" target="_blank">{{.i18n.help}}</a></li>
                     <li><a href="https://github.com/b3log/wide/issues/new" target="_blank">{{.i18n.report_issues}}</a></li>
+                    <li><a href="/signup">{{.i18n.sign_up}}</a></li>
                 </ul>
             </div>
         </div>
@@ -47,10 +48,21 @@
             .css("padding-top", (contentH - $(".content .fn-left").height()) / 2 + "px");
 
     var login = function () {
+        if ($.trim($("#username").val()) === "") {
+            $("#msg").text("{{.i18n.login_error}}").show();
+            $("#username").focus();
+            return false;
+        } else if ($.trim($("#password").val()) === "") {
+            $("#msg").text("{{.i18n.login_error}}").show();
+            $("#password").focus();
+            return false;
+        }
+
         var request = {
             username: $("#username").val(),
             password: $("#password").val()
         };
+        
         $.ajax({
             type: 'POST',
             url: '/login',
diff --git a/views/sign_up.html b/views/sign_up.html
index a07ad62..9c66650 100644
--- a/views/sign_up.html
+++ b/views/sign_up.html
@@ -3,9 +3,138 @@
     <head>
         <meta charset="UTF-8">
         <title>{{.i18n.wide}} - {{.i18n.sign_up}}</title>
+        <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>
-        {{.dir}}
+        <div class="header">
+            <div class="wrapper fn-clear">
+                <a href="/login">
+                    <img src="{{.conf.StaticServer}}/static/images/wide-logo.png" 
+                         class="logo"/></a>
+                <ul class="fn-right">
+                    <li><a href="https://github.com/b3log/wide" target="_blank">GitHub</a></li>
+                    <li><a href="https://www.gitbook.io/book/88250/wide-user-guide" target="_blank">{{.i18n.help}}</a></li>
+                    <li><a href="https://github.com/b3log/wide/issues/new" target="_blank">{{.i18n.report_issues}}</a></li>
+                    <li><a href="/login">{{.i18n.login}}</a></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}}</div>
+                    </div>
+                    <input id="username" placeholder="Username"/><br/>
+                    <input id="password" type="password" placeholder="Password"/><br/>
+                    <input id="confirmPassword" type="password" placeholder="Confirm your password"/>
+                </div>
+            </div>
+        </div>
+        <div class="footer">
+            <div class="wrapper">
+                Ver {{.ver}}, &copy; 2014 <a href="http://b3log.org" target="_blank">B3LOG.ORG</a>
+            </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").height(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 ($.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()
+        };
+        $.ajax({
+            type: 'POST',
+            url: '/signup',
+            data: JSON.stringify(request),
+            dataType: "json",
+            success: function (data) {
+                if (!data.succ) {
+                    $("#msg").text(data.msg).show();
+                    return;
+                }
+
+                window.location.href = "/";
+            }
+        });
+    };
+
+    $("#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 {
+                $("#password").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();
+
+    $("#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();
+        }
+    });
+})();
+        </script>
     </body>
 </html>