From 1d5100fbdf59539a21cf222335c8ff1ef01ecaab Mon Sep 17 00:00:00 2001
From: AfonsoCMSousa <afonsoclerigomendessousa@gmail.com>
Date: Thu, 11 Dec 2025 21:14:54 +0000
Subject: [PATCH] feat:initial commit

---
 frontend/src/pages/home/HomePage.vue |  2 +-
 frontend/src/pages/user/UserPage.vue | 37 ++++++++++++++++++++++++++
 frontend/src/router/index.js         |  5 ++++
 frontend/src/stores/user.js          | 39 ++++++++++++++++++++++++++++
 4 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/pages/user/UserPage.vue
 create mode 100644 frontend/src/stores/user.js

diff --git a/frontend/src/pages/home/HomePage.vue b/frontend/src/pages/home/HomePage.vue
index 42f95c7..939fae6 100644
--- a/frontend/src/pages/home/HomePage.vue
+++ b/frontend/src/pages/home/HomePage.vue
@@ -8,4 +8,4 @@
 
 </script>
 
-<style scoped></style>`
\ No newline at end of file
+<style scoped></style>`
diff --git a/frontend/src/pages/user/UserPage.vue b/frontend/src/pages/user/UserPage.vue
new file mode 100644
index 0000000..e952503
--- /dev/null
+++ b/frontend/src/pages/user/UserPage.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="profile-page">
+    <h1>My Profile</h1>
+
+    <div v-if="userStore.user">
+      <p><strong>Name:</strong> {{ userStore.user.name }}</p>
+      <p><strong>Email:</strong> {{ userStore.user.email }}</p>
+      <p><strong>Joined:</strong> {{ new Date(userStore.user.created_at).toLocaleString() }}</p>
+    </div>
+
+    <div v-else>
+      <p>Loading... <b> 読み込み中 </b></p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useUserStore } from '@/stores/user'
+import { onMounted } from 'vue'
+
+const userStore = useUserStore()
+
+onMounted(() => {
+  if (!userStore.user) {
+    userStore.fetchUser()
+  }
+})
+
+</script>
+
+<style>
+.profile-page {
+  max-width: 600px;
+  margin: auto;
+}
+</style>
+
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index ee115e2..0c65ab4 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -2,6 +2,7 @@ import HomePage from '@/pages/home/HomePage.vue'
 import LoginPage from '@/pages/login/LoginPage.vue'
 import LaravelPage from '@/pages/testing/LaravelPage.vue'
 import WebsocketsPage from '@/pages/testing/WebsocketsPage.vue'
+import UserPage from '@/pages/user/UserPage.vue'
 import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
@@ -15,6 +16,10 @@ const router = createRouter({
       path: '/login',
       component: LoginPage,
     },
+    {
+      path: '/user',
+      component: UserPage,
+    },
     {
       path: '/testing',
       children: [
diff --git a/frontend/src/stores/user.js b/frontend/src/stores/user.js
new file mode 100644
index 0000000..2a678ea
--- /dev/null
+++ b/frontend/src/stores/user.js
@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia'
+import axios from 'axios'
+
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    user: null,
+    token: localStorage.getItem('token') || null,
+  }),
+
+  actions: {
+    async fetchUser() {
+      if (!this.token) return
+
+      try {
+        const response = await axios.get('/api/users/me', {
+          headers: {
+            Authorization: `Bearer ${this.token}`
+          }
+        })
+
+        this.user = response.data
+      } catch (error) {
+        console.error("Failed to fetch user")
+      }
+    },
+
+    setToken(token) {
+      this.token = token
+      localStorage.setItem('token', token)
+    },
+
+    logout() {
+      this.token = null
+      this.user = null
+      localStorage.removeItem('token')
+    }
+  }
+})
+