CodingSouls团队-个人博客（四）

今天是团队冲刺的第四天：
昨天完成了注册界面，并完成了数据测试，今天的任务是登录界面的开发。
有效编程时间2.5h，代码行数：100
  1 <% this.title = '登录' %>
  2 <% include header %>
  3 <div class="ui error message" id="error" hidden></div>
  4 <div class="ui middle aligned center aligned grid">
  5   <div class="row">
  6     <div class="column" style="max- 450px">
  7       <h2 class="ui image header">
  8         <div class="content" style="margin-bottom: 10px; ">
  9           登录
 10         </div>
 11       </h2>
 12       <form class="ui large form">
 13         <div class="ui existing segment">
 14           <div class="field">
 15             <div class="ui left icon input">
 16               <i class="user icon"></i>
 17               <input name="email" placeholder="用户名" type="text" id="username" onkeydown="key_login(event)">
 18             </div>
 19           </div>
 20           <div class="field">
 21             <div class="ui left icon input">
 22               <i class="lock icon"></i>
 23               <input name="password" placeholder="密码" type="password" id="password" onkeydown="key_login(event)">
 24             </div>
 25           </div>
 26           <div class="ui fluid large submit button" id="login">登录</div>
 27         </div>
 28 
 29         <div class="ui error message"></div>
 30 
 31       </form>
 32 
 33       <div class="ui message">
 34         <a href="/sign_up">注册账号</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 35         <a href="<%= syzoj.utils.makeUrl(['forget']) %>">忘记密码</a>
 36       </div>
 37     </div>
 38   </div>
 39 </div>
 40 <script src="<%- lib('blueimp-md5/2.10.0/js/md5.min.js') %>"></script>
 41 <script type="text/javascript">
 42 function key_login(event) {
 43     if (event.keyCode == 13) {
 44         login();
 45     }
 46 }
 47 function show_error(error) {
 48     $("#error").text(error);
 49     $("#error").show();
 50 }
 51 function success(session_id) {
 52     window.location.href = location.protocol + '//' + location.host + <%- serializejs(req.query.url || '/') %>;
 53 }
 54 function login() {
 55     password = md5($("#password").val() + "syzoj2_xxx");
 56     $("#login").addClass("loading");
 57     $.ajax({
 58         url: "/api/login",
 59         type: 'POST',
 60         data: {
 61             "username": $("#username").val(),
 62             "password": password
 63         },
 64         async: true,
 65         success: function(data) {
 66             error_code = data.error_code;
 67             switch (error_code) {
 68                 case 1001:
 69                     show_error("用户不存在");
 70                     break;
 71                 case 1002:
 72                     show_error("密码错误");
 73                     break;
 74                 case 1003:
 75                     show_error("您尚未设置密码，请通过下方「找回密码」来设置您的密码。");
 76                     break;
 77                 case 1:
 78                     success(data.session_id);
 79                     return;
 80                 default:
 81                     show_error("未知错误");
 82                     break;
 83             }
 84             $("#login").text("登录");
 85             $("#login").removeClass("loading");
 86         },
 87         error:  function(XMLHttpRequest, textStatus, errorThrown) {
 88             alert(XMLHttpRequest.responseText);
 89             show_error("未知错误");
 90             $("#login").text("登录");
 91         }
 92     });
 93 }
 94 $(document).ready(function() {
 95     $("#login").click(function() {
 96         login();
 97     });
 98 });
 99 </script>
100 <% include footer %>