sign_in.html 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!-- 宣告我們要套用模板 -->
  2. {% extends "sign_in_base.html" %}
  3. {% block script %}
  4. {% if errMsg=="Rest password success" %}
  5. <script>
  6. $(function(){
  7. alert("Rest password success");
  8. });
  9. </script>
  10. {% endif %}
  11. {% if errMsg=="Sign up success" %}
  12. <script>
  13. $(function(){
  14. alert("Sign up success");
  15. });
  16. </script>
  17. {% endif %}
  18. {% endblock %}
  19. {% block style %}
  20. <style>
  21. .form-signin {
  22. max-width: 330px;
  23. padding: 15px;
  24. }
  25. .form-signin .form-floating:focus-within {
  26. z-index: 2;
  27. }
  28. .form-signin input[type="email"] {
  29. margin-bottom: -1px;
  30. border-bottom-right-radius: 0;
  31. border-bottom-left-radius: 0;
  32. }
  33. .form-signin input[type="password"] {
  34. margin-bottom: 10px;
  35. border-top-left-radius: 0;
  36. border-top-right-radius: 0;
  37. }
  38. </style>
  39. {% endblock %}
  40. {% block main %}
  41. <form method="post" action="/login">
  42. <img class="mb-4" src="../static/img/ALMIGHTY_RAY.jpg" alt="" >
  43. <img class="mb-4" src="../static/img/SKYAI.jpg" alt="" >
  44. <h1 class="h3 mb-3 fw-normal">Hello, Welcome to Smart Coffee</h1>
  45. <div class="form-floating">
  46. <input type="text" class="form-control" id="username" name="username" placeholder="使用者名稱/Username" oninput="setCustomValidity('');" onchange="$.get('/check_username', 'username='+document.getElementById('username').value,function(resText){
  47. if(resText.pass){
  48. setCustomValidity('無此使用者');
  49. }
  50. },'json');"required>
  51. <label for="floatingInput">使用者名稱/Username</label>
  52. </div>
  53. <div class="form-floating">
  54. <input type="password" class="form-control" id="password" name="password" placeholder="密碼/Password" minlength="6"
  55. maxlength="12" oninput="setCustomValidity('');" onchange="$.get('/check_login',{ username: document.getElementById('username').value, password: document.getElementById('password').value},function(resText){
  56. if(resText.errMsg=='Wrong password'){
  57. setCustomValidity('密碼錯誤');
  58. }
  59. },'json');" required>
  60. <label for="floatingPassword">密碼/Password</label>
  61. </div>
  62. <div class="checkbox mb-3">
  63. <label>
  64. <input type="checkbox" name="rem"> Remember me
  65. <br>
  66. <a href="/reset_password">Reset password</a>
  67. </label>
  68. </div>
  69. <button class="w-40 btn btn-lg btn-secondary" type="submit">Login</button>
  70. <button class="w-40 btn btn-lg btn-secondary" type="button" onclick="Registration();">Sign up</button>
  71. </form>
  72. {% endblock %}