loginform.html 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
  7. <title>Login Form Fragment</title>
  8. <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag" />
  9. </head>
  10. <body>
  11. <main role="main" class="container mt-3 mb-3">
  12. <div class="row">
  13. <div class="col-md">
  14. <!-- Login form template begins here -->
  15. <div th:fragment="loginform" class="card">
  16. <div class="card-header text-center">
  17. <h2 th:text="#{cas.login.pagetitle}">Login</h2>
  18. <span class="fa-stack fa-2x hidden-xs">
  19. <i class="fa fa-circle fa-stack-2x"></i>
  20. <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
  21. </span>
  22. </div>
  23. <div class="card-body">
  24. <form method="post" id="fm1" th:object="${credential}" action="login">
  25. <div class="alert alert-danger" th:if="${#fields.hasErrors('*')}">
  26. <span th:each="err : ${#fields.errors('*')}" th:utext="${err}">Example error</span>
  27. </div>
  28. <h3 th:utext="#{screen.welcome.instructions}">Enter your Username and Password</h3>
  29. <section class="form-group">
  30. <label for="username" th:utext="#{screen.welcome.label.netid}">Username</label>
  31. <div th:if="${openIdLocalId}">
  32. <strong>
  33. <span th:utext="${openIdLocalId}"/>
  34. </strong>
  35. <input type="hidden"
  36. id="username"
  37. name="username"
  38. th:value="${openIdLocalId}"/>
  39. </div>
  40. <div th:unless="${openIdLocalId}">
  41. <input class="form-control required"
  42. id="username"
  43. size="25"
  44. tabindex="1"
  45. type="text"
  46. th:disabled="${guaEnabled}"
  47. th:field="*{username}"
  48. th:accesskey="#{screen.welcome.label.netid.accesskey}"
  49. autocomplete="off"/>
  50. </div>
  51. </section>
  52. <section class="form-group">
  53. <label for="password" th:utext="#{screen.welcome.label.password}">Password</label>
  54. <div>
  55. <input class="form-control required"
  56. type="password"
  57. id="password"
  58. size="25"
  59. tabindex="2"
  60. th:accesskey="#{screen.welcome.label.password.accesskey}"
  61. th:field="*{password}"
  62. autocomplete="off"/>
  63. <span id="capslock-on" style="display:none;">
  64. <p>
  65. <i class="fa fa-exclamation-circle"></i>
  66. <span th:utext="#{screen.capslock.on}"/>
  67. </p>
  68. </span>
  69. </div>
  70. </section>
  71. <section class="form-check" th:if="${passwordManagementEnabled && param.doChangePassword != null}">
  72. <p>
  73. <input type="checkbox" name="doChangePassword" id="doChangePassword"
  74. value="true" th:checked="${param.doChangePassword != null}" tabindex="4"/>
  75. <label for="doChangePassword" th:text="#{screen.button.changePassword}">Change Password</label>
  76. </p>
  77. </section>
  78. <section class="form-check" th:if="${rememberMeAuthenticationEnabled}">
  79. <p>
  80. <input type="checkbox" name="rememberMe" id="rememberMe" value="true" tabindex="5"/>
  81. <label for="rememberMe" th:text="#{screen.rememberme.checkbox.title}">Remember Me</label>
  82. </p>
  83. </section>
  84. <section class="row" th:if="${recaptchaSiteKey != null AND recaptchaInvisible != null AND recaptchaSiteKey != null AND !recaptchaInvisible}">
  85. <div class="g-recaptcha" th:attr="data-sitekey=${recaptchaSiteKey}"/>
  86. </section>
  87. <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
  88. <input type="hidden" name="_eventId" value="submit"/>
  89. <input type="hidden" name="geolocation"/>
  90. <input class="btn btn-block btn-submit"
  91. th:unless="${recaptchaSiteKey != null AND recaptchaInvisible != null AND recaptchaSiteKey != null AND recaptchaInvisible}"
  92. name="submit"
  93. accesskey="l"
  94. th:value="#{screen.welcome.button.login}"
  95. tabindex="6"
  96. type="submit"
  97. value="Login3"
  98. />
  99. <button class="btn btn-block btn-submit g-recaptcha"
  100. th:if="${recaptchaSiteKey != null AND recaptchaInvisible != null AND recaptchaSiteKey != null AND recaptchaInvisible}"
  101. th:attr="data-sitekey=${recaptchaSiteKey}, data-badge=${recaptchaPosition}"
  102. data-callback="onSubmit"
  103. name="submitBtn"
  104. accesskey="l"
  105. th:text="#{screen.welcome.button.login}"
  106. tabindex="6"
  107. />
  108. </form>
  109. <form th:if="${passwordManagementEnabled}" method="post" id="passwordManagementForm">
  110. <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
  111. <input type="hidden" name="_eventId" value="resetPassword"/>
  112. <span class="fa fa-unlock"></span>
  113. <a th:utext="#{screen.pm.button.resetPassword}" href="javascript:void(0)" onclick="$('#passwordManagementForm').submit();"/>
  114. <p/>
  115. </form>
  116. <div th:unless="${passwordManagementEnabled}">
  117. <span class="fa fa-question-circle"></span>
  118. <span th:utext="#{screen.pm.button.forgotpwd}">Forgot your password?</span>
  119. <p/>
  120. </div>
  121. <script type="text/javascript" th:inline="javascript">
  122. var i = [[#{screen.welcome.button.loginwip}]]
  123. $( document ).ready(function() {
  124. $("#fm1").submit(function () {
  125. $(":submit").attr("disabled", true);
  126. $(":submit").attr("value", i);
  127. console.log(i);
  128. return true;
  129. });
  130. });
  131. </script>
  132. <div th:replace="fragments/loginsidebar :: loginsidebar" />
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. </main>
  138. </body>
  139. </html>