Merge branch 'master' into 'main'

Updated the Login authentication function

See merge request !9

src/main/resources/static/html/login.html

@@ -12,7 +12,7 @@
 >
 <div class="max-w-md w-full bg-white rounded-lg shadow-md p-8">
   <h2 class="text-2xl font-bold text-center text-purple-800 mb-4">
-    Welcome back to <span class="text-purple-500">System</span>
+    Welcome back to <span class="text-purple-500">System？</span>
   </h2>
   <p class="text-sm text-center text-purple-800 mb-8">
     Log in to your account
@@ -30,22 +30,27 @@
              class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-500 focus:ring-opacity-50"
              required>
       <div>
-        <table border="0" cellspacing="5" cellpadding="5">
-          <tr>
-            <td> <div id="checkCode" class="code" onclick="createCode(4)"></div></td>
-          </tr>
+        <table>
           <tr>
             <td>Verification code：</td>
             <td>
               <input type="text" id="inputCode"
                      style="float:left;
                 padding: 10px;
-                font-size: 16px;
+                font-size: 5px;
                 border: 2px solid #ccc;
                 border-radius: 4px;
-                width: 150px;
+                width: 100px;
                 margin-top: 5px;
                 box-sizing: border-box;"/>
+            <td>
+              <div id="checkCode" class="code"  onclick="createCode(4)"
+                   style=" background-color: rgba(123,0,255,0.18);
+                   width: 100px; height: 30px; display: flex;
+                   justify-content: center; align-items: center; font-size: 14px;
+                   margin-top: 5px;">
+              </div>
+            </td>
             </td>
           </tr>
         </table>
@@ -64,67 +69,67 @@
 </div>
 
 <script>
-  var bool; // 用于表示验证码验证的状态
+  var bool; // Indicates the status of the verification code
 
-  // 页面加载时，生成随机验证码
+  // When the page loads, a random verification code is generated
   window.onload = function () {
     createCode(4);
   }
 
-  // 生成验证码的方法
+  // Method of generating captcha
   function createCode(length) {
     var code = "";
-    var codeLength = parseInt(length); // 验证码的长度
+    var codeLength = parseInt(length); // Length of the verification code
     var checkCode = document.getElementById("checkCode");
-    // 所有候选组成验证码的字符
+    // All candidate characters that make up the CAPTCHA
     var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
             'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
             'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
-    // 循环组成验证码的字符串
+    // Loop the string that makes up the capTCHA
     for (var i = 0; i < codeLength; i++) {
-      // 获取随机验证码下标
+      // Gets a random CAPTCHA subscript
       var charNum = Math.floor(Math.random() * 62);
-      // 组合成指定字符验证码
+      // Combine into a specified character verification code
       code += codeChars[charNum];
     }
     if (checkCode) {
-      // 为验证码区域添加样式名
+      // Add a style name to the capTcha area
       checkCode.className = "code";
-      // 将生成验证码赋值到显示区
+      // The generated verification code is assigned to the display area
       checkCode.innerHTML = code;
     }
   }
 
-  // 检查验证码是否正确
+  // Check that the verification code is correct
   function validateCode() {
-    // 获取显示区生成的验证码
+    // Gets the verification code generated in the display area
     var checkCode = document.getElementById("checkCode").innerHTML;
-    // 获取输入的验证码
+    // Gets the input verification code
     var inputCode = document.getElementById("inputCode").value;
     console.log(checkCode);
     console.log(inputCode);
 
     if (inputCode.length <= 0) {
-      alert("请输入验证码！");
-      return false; // 验证码未输入，阻止表单提交
+      alert("Please enter the verification code!");
+      return false; // The verification code is not entered, preventing form submission
     } else if (inputCode.toUpperCase() != checkCode.toUpperCase()) {
-      alert("验证码输入有误！");
+      alert("Verification code input error!");
       bool = false;
-      createCode(4); // 生成新的验证码
-      return false; // 验证码错误，阻止表单提交
+      createCode(4); // Generate a new verification code
+      return false; // Verification code error prevents form submission
     } else {
-      alert("验证码正确！");
-      return true; // 验证码正确，允许表单提交
+      alert("Verification code correct！");
+      return true; // The verification code is correct, allowing the form to be submitted
     }
   }
 
   const form = document.getElementById('loginForm');
   form.addEventListener('submit', function (event) {
-    event.preventDefault(); // 阻止默认表单提交行为
+    event.preventDefault(); // Prevents default form submission behavior
 
-    // 先验证验证码
+    // Verify the CAPTCHA first
     if (!validateCode()) {
-      return; // 如果验证码验证失败，直接退出，不继续提交表单
+      return; // If the verification code fails, exit directly and do not submit the form
     }
 
     const formData = new FormData(form);