login.ftl 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' />
  6. <title>${realm.displayName}</title>
  7. <link rel="stylesheet" href="${url.resourcesPath}/css/login.css" />
  8. </head>
  9. <body>
  10. <div class="c-login">
  11. <div class="c-login__img"></div>
  12. <form
  13. id="loginForm"
  14. class="c-login__main c-login-form"
  15. action="${url.loginAction}"
  16. method="post"
  17. onsubmit="login.disabled = true; return false;"
  18. >
  19. <div class="c-login-form__header">
  20. <div class="c-login-form__logo"></div>
  21. <div class="c-login-form__name">${realm.displayName}</div>
  22. </div>
  23. <div class="c-login-form__tip">
  24. <#if !messagesPerField.existsError('username','password') && message?has_content && !isAppInitiatedAction??>
  25. <span class="${message.type}">${kcSanitize(message.summary)?no_esc}</span>
  26. </#if>
  27. </div>
  28. <div class="c-login-form__wrapper">
  29. <label class="c-login-for__label">用户名</label>
  30. <div class="c-login-form__section">
  31. <input
  32. id="usernameProxy"
  33. type="text"
  34. class="c-login-form__input"
  35. value="${(login.username!'')}"
  36. autocomplete="off"
  37. >
  38. <i class="c-login-form__icon user"></i>
  39. </div>
  40. <div class="c-login-form__error">
  41. <#if messagesPerField.existsError('username','password')>
  42. ${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
  43. </#if>
  44. </div>
  45. </div>
  46. <div class="c-login-form__wrapper">
  47. <label class="c-login-for__label">密码</label>
  48. <div class="c-login-form__section">
  49. <input
  50. id="passwordProxy"
  51. type="password"
  52. class="c-login-form__input"
  53. autocomplete="off"
  54. aria-autocomplete="none"
  55. >
  56. <i class="c-login-form__icon lock"></i>
  57. </div>
  58. <div class="c-login-form__error"></div>
  59. </div>
  60. <input id="username" name="username" hidden >
  61. <input id="password" name="password" hidden >
  62. <button
  63. class="c-login-form__submit"
  64. name="login"
  65. onclick="onSubmit()"
  66. >
  67. 登 录
  68. </button>
  69. </form>
  70. </div>
  71. <script src="${url.resourcesPath}/js/md5.js"></script>
  72. <script>
  73. function onSubmit () {
  74. var form = document.getElementById('loginForm')
  75. document.getElementById('username').value = document.getElementById('usernameProxy').value
  76. document.getElementById('password').value = MD5Salt(document.getElementById('passwordProxy').value)
  77. form.submit()
  78. }
  79. </script>
  80. </body>
  81. </html>