<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>Nutz Demo</title>
    <script src="js/jquery-1.8.3.min.js"></script>
  </head>
  <body>

    <div id="login_div">
      <form action="#" id="loginForm" method="post">
        用户名 <input name="username" type="text" value="admin" />
        密码 <input name="password" type="password" value="123456" />
        验证码 <input name="captcha" type="text" value="" />
        <img id="captcha_img" onclick="next_captcha(); return false;" src="${base}/captcha/next" />
        <script>
          function next_captcha() {
              $('#captcha_img').attr('src', '${base}/captcha/next?_=' + new Date().getTime());
          }
        </script>
        <button type="button" id="login_button">提交</button>
      </form>
    </div>
    <div id="user_info_div">
      <p id="userInfo"></p>
      <a href="${base}/user">用户列表</a><br />
      <a href="${base}/user/profile">个人信息</a><br />
      <a href="${base}/user/logout">登出</a>
    </div>

    <script>
      var me = '<%=session.getAttribute("me")%>';
      var base = '${base}';
      $(function () {
          $('#login_button').click(function () {
              console.log('尝试登录……');
              $.ajax({
                  url: base + '/user/login',
                  type: 'post',
                  data: $('#loginForm').serialize(),
                  error: function (request) {
                      alert('Connection error');
                  },
                  dataType: 'json',
                  success: function (data) {
                      if (data && data.ok) {
                          alert('登录成功');
                          location.reload();
                      } else {
                          alert(data.msg);
                      }
                  }
              });
              return false;
          });
          if (me != 'null') {
              $('#login_div').hide();
              $('#userInfo').html('您的Id是' + me);
              $('#user_info_div').show();
          } else {
              $('#login_div').show();
              $('#user_info_div').hide();
          }
      });
    </script>

  </body>
</html>