From 105391ae13eb64f06b149ef79c7e3fbf04732d3b Mon Sep 17 00:00:00 2001
From: Raymond Yang <sdc957@gmail.com>
Date: Mon, 10 Jul 2023 15:36:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E5=85=A5web?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 character/add.html   |  19 ++++----
 character/index.html |   9 +++-
 login.html           | 105 ++++++++++++++++++++++++-------------------
 register.html        |   2 +-
 4 files changed, 76 insertions(+), 59 deletions(-)

diff --git a/character/add.html b/character/add.html
index 89a3725..fa1d962 100644
--- a/character/add.html
+++ b/character/add.html
@@ -5,9 +5,10 @@
     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+
     <title>新增角色</title>
 
-    <script language="javascript" type="text/javascript">
+    <script>
         const jwt = localStorage.getItem("jwtToken");
         if (!jwt) {
             window.location.href = "./login.html";
@@ -60,17 +61,17 @@
 
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <script>
-        var selectElement = document.getElementById("character_index");
+        let selectElement = document.getElementById("character_index");
         const name = ["前衛", "中衛", "後衛"];
-        for (var i = 0; i < name.length; i++) {
-            var optionElement = document.createElement("option");
+        for (let i = 0; i < name.length; i++) {
+            const optionElement = document.createElement("option");
             optionElement.value = i;
             optionElement.textContent = name[i];
             selectElement.appendChild(optionElement);
         }
 
-        var charaName = document.getElementById("character_name");
-        var charaPos = document.getElementById("character_position");
+        const charaName = document.getElementById("character_name");
+        const charaPos = document.getElementById("character_position");
 
         // 监听表单提交事件
         document.getElementById('upload-form').addEventListener('submit', async (event) => {
@@ -92,12 +93,12 @@
                 return;
             }
 
-            var data = {
+            let data = {
                 name: charaName.value,
                 position: selectElement.value,
                 standIndex: parseInt(charaPos.value)
             };
-            var jsonString = JSON.stringify(data);
+            let jsonString = JSON.stringify(data);
             console.log(jsonString); // 处理上传成功的响应
 
         try {
@@ -107,7 +108,7 @@
             formData.append('image', imageFile);
 
             // 发送 POST 请求
-            const response = await axios.post('http://127.0.0.1:8080/api/v1/character', formData, {
+            const response = await axios.post('./api/v1/character', formData, {
                 headers: {
                     'Authorization': 'Bearer ' + jwt, // 替换为实际的 JWT Token
                     'Content-Type': 'multipart/form-data',
diff --git a/character/index.html b/character/index.html
index a368d9a..cb3e54f 100644
--- a/character/index.html
+++ b/character/index.html
@@ -13,6 +13,11 @@
     <p>
         <div class="page-title">角色清單</div>
     </p>
+    <hr>
+    <div class="center">
+        <h4><a href="./character/add.html">新增角色</a></h4>
+    </div>
+    <hr>
     <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
     <script language="javascript" type="text/javascript">
         let table = document.createElement("table");
@@ -40,7 +45,7 @@
         thead.appendChild(row_1);
 
         // 发送登录请求
-        axios.get('http://127.0.0.1:8080/api/v1/characters')
+        axios.get('./api/v1/characters')
             .then(function (response) {
                 const data = response.data;
                 console.log("Data: ", data);
@@ -54,7 +59,7 @@
 
                     const item = data[i];
 
-                    row_2_data_1.innerHTML = "<img src=\"http://127.0.0.1:8080" + item.imgSrc + "\" width=\"64\" height=\"64\">";
+                    row_2_data_1.innerHTML = "<img src=\"./" + item.imgSrc + "\" width=\"64\" height=\"64\">";
                     row_2_data_2.innerHTML = item.name;
                     row_2_data_3.innerHTML = item.standIndex;
 
diff --git a/login.html b/login.html
index 0751495..c8efe3f 100644
--- a/login.html
+++ b/login.html
@@ -1,55 +1,66 @@
 <!DOCTYPE html>
-<html lang="zh-TW" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
+<html
+  lang="zh-TW"
+  xmlns="http://www.w3.org/1999/html"
+  xmlns="http://www.w3.org/1999/html"
+>
+  <head>
     <!-- Required meta tags -->
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <title>登入</title>
-</head>
-<body>
+  </head>
+  <body>
     <form id="login-form">
-        
-        <p><input type="text" id="username" placeholder="Username"></p>
-        <p><input type="password" id="password" placeholder="Password" autocomplete="true"></p>
-        <p><button type="submit">Login</button></p>
-      </form>
-      
-<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
-<script language="javascript" type="text/javascript">
-    document.getElementById('login-form').addEventListener('submit', 
-    function(event) {
-        event.preventDefault(); // 阻止表单的默认提交行为
-        
-        var username = document.getElementById('username').value;
-        var password = document.getElementById('password').value;
-        
-        // 执行登录请求
-        login(username, password);
-    });
+      <p><input type="text" id="username" placeholder="Username" /></p>
+      <p>
+        <input
+          type="password"
+          id="password"
+          placeholder="Password"
+          autocomplete="true"
+        />
+      </p>
+      <p><button type="submit">Login</button></p>
+    </form>
 
-    function login(username, password) {
-        // 发送登录请求
-        axios.post('http://127.0.0.1:8080/api/v1/login', {
-            account: username,
-            password: password
-        })
-        .then(function(response) {
-            var token = response.data.token; // 假设服务器返回一个名为"token"的字段
-            
-            // 将JWT存储到本地（通常是使用localStorage）
-            localStorage.setItem('jwtToken', token);
-            
-            // 登录成功后，进行其他操作（例如重定向到受保护的页面）
-            window.location.href = './index.html';
-        })
-        .catch(function(error) {
-            const message = error.response.data.message;
-            alert('登入失敗');
-            //console.error('登入失敗:', error);
+    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
+    <script language="javascript" type="text/javascript">
+      document
+        .getElementById("login-form")
+        .addEventListener("submit", function (event) {
+          event.preventDefault(); // 阻止表单的默认提交行为
+
+          var username = document.getElementById("username").value;
+          var password = document.getElementById("password").value;
+
+          // 执行登录请求
+          login(username, password);
         });
-    }
-</script>
 
-</body>
-</html>
\ No newline at end of file
+      function login(username, password) {
+        // 发送登录请求
+        axios
+          .post("./api/v1/login", {
+            account: username,
+            password: password,
+          })
+          .then(function (response) {
+            var token = response.data.token; // 假设服务器返回一个名为"token"的字段
+
+            // 将JWT存储到本地（通常是使用localStorage）
+            localStorage.setItem("jwtToken", token);
+
+            // 登录成功后，进行其他操作（例如重定向到受保护的页面）
+            window.location.href = "./index.html";
+          })
+          .catch(function (error) {
+            const message = error.response.data.message;
+            alert("登入失敗");
+            //console.error('登入失敗:', error);
+          });
+      }
+    </script>
+  </body>
+</html>
diff --git a/register.html b/register.html
index 53e4ca4..3195ee0 100644
--- a/register.html
+++ b/register.html
@@ -29,7 +29,7 @@
     });
 
     function register(username, password) {
-        axios.post('http://127.0.0.1:8080/api/v1/register', {
+        axios.post('./api/v1/register', {
             account: username,
             password: password
         })