CodingSouls团队-个人博客（四）

今天是团队冲刺的第四天：

     昨天完成了注册界面，并完成了数据测试，今天的任务是登录界面的开发。

     有效编程时间2.5h，代码行数：100

<% this.title = '登录' %>
<% include header %>
<div class="ui error message" id="error" hidden></div>
<div class="ui middle aligned center aligned grid">
  <div class="row">
    <div class="column" style="max- 450px">
      <h2 class="ui image header">
        <div class="content" style="margin-bottom: 10px; ">
          登录
        </div>
      </h2>
      <form class="ui large form">
        <div class="ui existing segment">
          <div class="field">
            <div class="ui left icon input">
              <i class="user icon"></i>
              <input name="email" placeholder="用户名" type="text" id="username" onkeydown="key_login(event)">
            </div>
          </div>
          <div class="field">
            <div class="ui left icon input">
              <i class="lock icon"></i>
              <input name="password" placeholder="密码" type="password" id="password" onkeydown="key_login(event)">
            </div>
          </div>
          <div class="ui fluid large submit button" id="login">登录</div>
        </div>

        <div class="ui error message"></div>

      </form>

      <div class="ui message">
        <a href="/sign_up">注册账号</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="<%= syzoj.utils.makeUrl(['forget']) %>">忘记密码</a>
      </div>
    </div>
  </div>
</div>
<script src="<%- lib('blueimp-md5/2.10.0/js/md5.min.js') %>"></script>
<script type="text/javascript">
function key_login(event) {
    if (event.keyCode == 13) {
        login();
    }
}
function show_error(error) {
    $("#error").text(error);
    $("#error").show();
}
function success(session_id) {
    window.location.href = location.protocol + '//' + location.host + <%- serializejs(req.query.url || '/') %>;
}
function login() {
    password = md5($("#password").val() + "syzoj2_xxx");
    $("#login").addClass("loading");
    $.ajax({
        url: "/api/login",
        type: 'POST',
        data: {
            "username": $("#username").val(),
            "password": password
        },
        async: true,
        success: function(data) {
            error_code = data.error_code;
            switch (error_code) {
                case 1001:
                    show_error("用户不存在");
                    break;
                case 1002:
                    show_error("密码错误");
                    break;
                case 1003:
                    show_error("您尚未设置密码，请通过下方「找回密码」来设置您的密码。");
                    break;
                case 1:
                    success(data.session_id);
                    return;
                default:
                    show_error("未知错误");
                    break;
            }
            $("#login").text("登录");
            $("#login").removeClass("loading");
        },
        error:  function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.responseText);
            show_error("未知错误");
            $("#login").text("登录");
        }
    });
}
$(document).ready(function() {
    $("#login").click(function() {
        login();
    });
});
</script>
<% include footer %>