<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragment :: head(~{::title})">
  <title>用户登录</title>
</head>

<body class="login-bg">

<br>
<br>
<br>
 <div class="m-container-small m-padded-tb-massive disabled" style="max-width: 30em !important;">
   <div class="ur container">
     <div class="ui middle aligned center aligned grid">
       <div class="column">
         <h2 class="ui teal image header">
           <div class="content" >
           登&nbsp录
           </div>
         </h2>
         <form class="ui large form" method="post" action="#" th:action="@{/user/toLogin}">

           <div class="ui  segment">
             <div class="field">
               <div class="ui left icon input">
                 <i class="user icon"></i>
                 <input type="text" name="getUserName" placeholder="请输入用户名">
               </div>
             </div>
             <br><br><br>
             <div class="field">
               <div class="ui left icon input">
                 <i class="lock icon"></i>
                 <input type="password" id="password" name="getPassWord" placeholder="请输入密码" >

               </div>
             </div>
             <br><br><br>
             <button class="ui fluid large teal submit button" >登 录</button>
             <br>
             <br>


           <p>没有账号？去<a th:href="@{/user/register}" style="font-style: italic">注册</a></p>
           </div>

           <div class="ui error mini message"></div>
           <div id="errorMessage" style="display: none" th:text="${msg}">用户名和密码错误</div>


         </form>

       </div>
     </div>
   </div>
 </div>


<script>


  $('.ui.form').form({
    fields : {
      getUserName : {
        identifier: 'getUserName',
        rules: [{
          type : 'empty',
          prompt: '用户名不能为空！'
        }]
      },
      getPassWord : {
        identifier: 'getPassWord',
        rules: [{
          type : 'empty',
          prompt: '密码不能为空！'
        }]
      }

    }
  });

  $(document).ready(function(){


    if ( $('#errorMessage').text()!='')
    {
      alert($('#errorMessage').text())
    }


  })


</script>

</body>
</html>
