fair-web/views/login.ejs

<% 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-width: 450px">
      <h2 class="ui image header">
        <div class="content">
          登录
        </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>
      </div>
    </div>
  </div>
</div>
<script src="//cdn.bootcss.com/blueimp-md5/2.5.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 = "/";
}
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 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 %>