login.tmpl 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <div id="login-page">
  2. <div class="login-container">
  3. <h2>Login | {{.type}}</h2>
  4. <form id="loginForm" method="POST">
  5. <div class="form-group">
  6. <label for="username">用户名</label>
  7. <input type="text" id="username" name="username" placeholder="Enter your username" required/>
  8. </div>
  9. <div class="form-group">
  10. <label for="password">密码</label>
  11. <input type="password" id="password" name="password" placeholder="Enter your password" required/>
  12. </div>
  13. <div class="form-group">
  14. <button type="submit">登录</button>
  15. </div>
  16. <div class="error-message" id="errorMessage" style="display:none;">
  17. <p>用户名或密码无效。请再试一次。</p>
  18. </div>
  19. </form>
  20. </div>
  21. </div>
  22. <script>
  23. document.getElementById('loginForm').addEventListener('submit', function (e) {
  24. e.preventDefault(); // 防止页面刷新
  25. var username = document.getElementById('username').value;
  26. var password = document.getElementById('password').value;
  27. // 创建 JSON 数据
  28. var loginData = {
  29. username: username,
  30. password: password
  31. };
  32. // 使用 Fetch API 发送 POST 请求
  33. fetch('/auth/login', {
  34. method: 'POST',
  35. headers: {
  36. 'Content-Type': 'application/json' // 设置请求体的内容类型为 JSON
  37. },
  38. body: JSON.stringify(loginData) // 将对象转换为 JSON 字符串
  39. }).then(response => response.json()) // 解析响应 JSON
  40. .then(data => {
  41. console.log(data)
  42. if (data.code === 200) {
  43. setCookieWithExpiry(data.data.token, data.data.expire)
  44. setTimeout(() => {
  45. window.location.reload()
  46. }, 100)
  47. // 登录成功,跳转到其他页面
  48. } else {
  49. // 登录失败,显示错误信息
  50. document.getElementById('errorMessage').style.display = 'block';
  51. }
  52. })
  53. .catch(error => {
  54. console.error('Error:', error);
  55. document.getElementById('errorMessage').style.display = 'block'; // 显示错误信息
  56. });
  57. });
  58. function setCookieWithExpiry(token, expire) {
  59. console.log(expire,new Date().getTime(),token)
  60. // 将毫秒时间戳转为 Date 对象
  61. const expiryDate = new Date(expire);
  62. // 将 Date 对象转换为 UTC 格式
  63. const expires = expiryDate.toUTCString();
  64. // 设置cookie
  65. document.cookie = `token=${token}; expires=${expires}; path=/`;
  66. }
  67. </script>