forget_password_reset.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <!DOCTYPE html>
  2. <html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title></title>
  8. <meta name="keywords" content="" />
  9. <meta name="description" content="" />
  10. <link rel="stylesheet" type="text/css" th:href="@{/vendor/bootstrap/css/bootstrap.min.css}">
  11. <link rel="stylesheet" type="text/css" th:href="@{/fonts/font-awesome-4.7.0/css/font-awesome.min.css}">
  12. <link rel="stylesheet" type="text/css" th:href="@{/fonts/iconic/css/material-design-iconic-font.min.css}">
  13. <link rel="stylesheet" type="text/css" th:href="@{/css/util.css}">
  14. <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
  15. </head>
  16. <body>
  17. <div class="limiter">
  18. <div class="container-login100" th:style="'background-image:url(/images/bg.jpg);'">
  19. <div class="wrap-login100 p-l-40 p-r-40 p-t-30 p-b-25">
  20. <form method="post" class="login100-form validate-form">
  21. <div id="login-logo" class="p-b-15" style="text-align: center;">
  22. <img style="width: 80px;" th:src="@{/images/mooctest.png}" >
  23. </div>
  24. <span class="login100-form-title p-b-30">重置密码</span>
  25. <div class="wrap-input100 validate-input m-b-23" data-validate="请输入用户名">
  26. <span class="label-input100">邮箱</span>
  27. <input id="email" class="input100" type="text" name="email" readonly="readonly" th:value="${user.email}">
  28. <span class="focus-input100" data-symbol="&#xf206;"></span>
  29. </div>
  30. <div class="wrap-input100 validate-input m-b-23" data-validate="请输入密码">
  31. <span class="label-input100">新密码</span>
  32. <input id="password" class="input100" type="password" name="password" placeholder="请输入密码" required="密码不可为空">
  33. <span class="focus-input100" data-symbol="&#xf190;"></span>
  34. </div>
  35. <input id="verifyCode" name="verifyCode" style="display: none" th:value="${user.verifyCode}">
  36. <div class="wrap-input100 validate-input" data-validate="请输入密码">
  37. <span class="label-input100">重复密码</span>
  38. <input id="password2" class="input100" type="password" name="password2" placeholder="请输入密码" required="密码不可为空">
  39. <span class="focus-input100" data-symbol="&#xf190;"></span>
  40. </div>
  41. <div class="text-center p-t-6 p-b-20">
  42. <span id="info" style="color: red" th:text="${result==null}?'&nbsp;':${result.msg}"></span>
  43. </div>
  44. <div class="container-login100-form-btn">
  45. <div class="wrap-login100-form-btn">
  46. <div class="login100-form-bgbtn"></div>
  47. <button type="button" onclick="resetPassword(this)" class="login100-form-btn">重置密码</button>
  48. </div>
  49. </div>
  50. <div class="flex-col-c p-t-10">
  51. <a href="/page/login" class="txt2">返回登录</a>
  52. </div>
  53. </form>
  54. </div>
  55. </div>
  56. </div>
  57. <script th:src="@{/vendor/jquery/jquery-3.2.1.min.js}"></script>
  58. <script th:src="@{/js/main.js}"></script>
  59. <script type="text/javascript">
  60. function resetPassword(obj) {
  61. var email = $("#email").val();
  62. var password = $("#password").val();
  63. var password2 = $("#password2").val();
  64. var verifyCode = $("#verifyCode").val();
  65. if (password == null || password.trim() == ""
  66. || password2 == null || password2.trim() == "") {
  67. document.getElementById("info").innerText = "密码不可为空";
  68. return;
  69. }
  70. if (password != password2){
  71. document.getElementById("info").innerText = "密码不一致,请重新输入";
  72. return;
  73. }
  74. if (password.length>16 || password.length<6){
  75. document.getElementById("info").innerText = "密码应在6-16位";
  76. return;
  77. }
  78. var data = {"email":email, "password":password, "verifyCode":verifyCode};
  79. $.ajax({
  80. url:"/api/password/reset",
  81. type:"PUT",
  82. data:JSON.stringify(data),
  83. contentType: 'application/json; charset=utf-8',
  84. dataType:"json",
  85. timeout: 3000,
  86. success:function (result) {
  87. console.log(result);
  88. if (result.status != 2000) {
  89. document.getElementById("info").innerText = result.msg;
  90. }else{
  91. alert("修改成功,请前往登录");
  92. document.location.href="/page/login";
  93. }
  94. }
  95. })
  96. }
  97. </script>
  98. </body>
  99. </html>