新增用户主页页面

2025-05-19 10:42:13 +09:00
parent 68cb20c2d5
commit 2e6e8d1624
2 changed files with 155 additions and 1 deletions
--- a/js/main.js
+++ b/js/main.js
@ -182,7 +182,7 @@ $(function () {
                            const token = response.token;
                            localStorage.setItem('authToken', token);
                            alert('ログイン成功！');
-                            window.location.href = 'index.html'; 
+                            window.location.href = 'userhome.html'; 
                            $('#loginModal').fadeOut();
                        },
                        error: function () {
--- a/userhome.html
+++ b/userhome.html
@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>マイページ</title>
+  <style>
+    body {
+      margin: 0;
+      font-family: 'Segoe UI', sans-serif;
+      background: linear-gradient(to bottom right, #f0f4f8, #d9e2ec);
+    }
+    .profile-box {
+      max-width: 500px;
+      margin: 60px auto;
+      padding: 30px;
+      border-radius: 16px;
+      background-color: #fff;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+      text-align: center;
+    }
+    .profile-box img {
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid #ddd;
+      transition: 0.3s ease;
+    }
+    .profile-box img:hover {
+      transform: scale(1.05);
+      border-color: #4287f5;
+    }
+    .form-item {
+      margin-top: 20px;
+      text-align: left;
+    }
+    .form-item label {
+      display: block;
+      font-weight: bold;
+      margin-bottom: 6px;
+      color: #333;
+    }
+    .form-item input,
+    .form-item textarea {
+      width: 100%;
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 6px;
+      font-size: 14px;
+      box-sizing: border-box;
+    }
+    input[readonly] {
+      background-color: #f0f0f0;
+    }
+    #save-btn {
+      margin-top: 25px;
+      padding: 12px 30px;
+      background-color: #4287f5;
+      color: white;
+      font-size: 16px;
+      border: none;
+      cursor: pointer;
+      border-radius: 8px;
+      transition: background-color 0.3s;
+    }
+    #save-btn:hover {
+      background-color: #2e6ee0;
+    }
+  </style>
+</head>
+<body>
+  <div class="profile-box">
+    <h2>マイページ</h2>
+    <div class="form-item">
+      <label for="avatar-upload">プロフィール画像</label>
+      <img id="user-avatar" src="default-avatar.png" alt="画像"><br>
+      <input type="file" id="avatar-upload">
+    </div>
+
+    <div class="form-item">
+      <label for="username">ユーザー名</label>
+      <input type="text" id="username">
+    </div>
+
+    <div class="form-item">
+      <label for="email">メールアドレス</label>
+      <input type="email" id="email" readonly>
+    </div>
+
+    <div class="form-item">
+      <label for="bio">自己紹介文</label>
+      <textarea id="bio" rows="4" placeholder="..."></textarea>
+    </div>
+
+    <button id="save-btn">確認</button>
+  </div>
+
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script>
+    $(function () {
+      $.get("/api/user/info", function (data) {
+        $("#user-avatar").attr("src", data.avatarUrl || "default-avatar.png");
+        $("#username, #email, #bio").each(function () {
+          const id = this.id;
+          $(this).val(data[id] || "");
+        });
+      });
+
+      $("#avatar-upload").on("change", function () {
+        const file = this.files[0];
+        if (!file) return;
+
+        const formData = new FormData();
+        formData.append("avatar", file);
+
+        $.ajax({
+          url: "/api/user/avatar",
+          type: "POST",
+          data: formData,
+          processData: false,
+          contentType: false,
+          success: function (res) {
+            $("#user-avatar").attr("src", res.newAvatarUrl);
+            alert("成功！");
+          },
+          error: function () {
+            alert("アップロード失敗");
+          }
+        });
+      });
+
+      $("#save-btn").on("click", function () {
+        const userData = {
+          username: $("#username").val(),
+          bio: $("#bio").val()
+        };
+
+        $.ajax({
+          url: "/api/user/update",
+          type: "POST",
+          contentType: "application/json",
+          data: JSON.stringify(userData),
+          success: function () {
+            alert("保存成功！");
+          },
+          error: function () {
+            alert("保存失敗");
+          }
+        });
+      });
+    });
+  </script>
+</body>
+</html>