Merge pull request 'feature/profile-page' (#71) from feature/profile-page into develop

Reviewed-on: https://gitea.fernandovideira.com/SyntaxSquad/DADProject/pulls/71
Reviewed-by: KZix <[email protected]>
Reviewed-by: FernandoJVideira <[email protected]>
Reviewed-by: Edd <[email protected]>

api/routes/api.php

@@ -18,6 +18,67 @@ Route::middleware('auth:sanctum')->group(function () {
         Route::get('/me', function (Request $request) {
             return $request->user();
         });
+
+        // Update user profile (name and nickname)
+        Route::put('/me', function (Request $request) {
+            $request->validate([
+                'name' => 'required|string|max:255',
+                'nickname' => 'required|string|max:255|unique:users,nickname,' . $request->user()->id,
+            ]);
+
+            $user = $request->user();
+            $user->name = $request->name;
+            $user->nickname = $request->nickname;
+            $user->save();
+
+            return response()->json($user);
+        });
+
+        // Change password
+        Route::put('/me/password', function (Request $request) {
+            $request->validate([
+                'current_password' => 'required',
+                'new_password' => 'required|min:8|confirmed',
+            ]);
+
+            $user = $request->user();
+
+            if (!\Hash::check($request->current_password, $user->password)) {
+                return response()->json([
+                    'message' => 'Current password is incorrect'
+                ], 422);
+            }
+
+            $user->password = \Hash::make($request->new_password);
+            $user->save();
+
+            return response()->json([
+                'message' => 'Password changed successfully'
+            ]);
+        });
+
+        // Upload avatar
+        Route::post('/me/avatar', function (Request $request) {
+            $request->validate([
+                'avatar' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048',
+            ]);
+
+            $user = $request->user();
+
+            if ($user->photo_avatar_filename) {
+                \Storage::disk('public')->delete('photos_avatars/' . $user->photo_avatar_filename);
+            }
+
+            $file = $request->file('avatar');
+            $filename = str_pad($user->id, 5, '0', STR_PAD_LEFT) . '_' . \Str::random(10) . '.' . $file->extension();
+            $file->storeAs('photos_avatars', $filename, 'public');
+
+            $user->photo_avatar_filename = $filename;
+            $user->save();
+
+            return response()->json($user);
+        });
+
         Route::get('/{user}/matches', [UserController::class, 'getMatches']);
     });
 

frontend/src/components/layout/NavBar.vue

@@ -24,6 +24,9 @@
                     <NavigationMenuLink>
                         <a @click.prevent="logoutClickHandler">Logout</a>
                     </NavigationMenuLink>
+                    <NavigationMenuLink>
+                        <RouterLink to="/user">Profile</RouterLink>
+                    </NavigationMenuLink>
                 </NavigationMenuItem>
             </NavigationMenuList>
         </NavigationMenu>

frontend/src/main.js

@@ -21,3 +21,4 @@ app.use(createPinia())
 app.use(router)
 
 app.mount('#app')
+

frontend/src/pages/user/UserPage.css

@@ -0,0 +1,19 @@
+/* UserPage.css - Custom styles that can't be done with Tailwind */
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid #f0f0f0;
+  border-top: 3px solid #000;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

frontend/src/pages/user/UserPage.vue

@@ -0,0 +1,476 @@
+<template>
+  <div class="min-h-screen p-8 flex items-center justify-center">
+    <!-- Loading State -->
+    <div v-if="loading" class="bg-white border border-gray-300 p-12 text-center shadow-sm max-w-md w-full">
+      <div class="flex flex-col items-center gap-6">
+        <div class="spinner"></div>
+        <p>Loading your profile...</p>
+      </div>
+    </div>
+
+    <!-- Error State -->
+    <div v-else-if="error" class="bg-white border border-gray-300 p-12 text-center shadow-sm max-w-md w-full text-gray-800">
+      <svg class="w-12 h-12 mx-auto mb-4 text-black" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+        <circle cx="12" cy="12" r="10" stroke-width="2"/>
+        <line x1="12" y1="8" x2="12" y2="12" stroke-width="2"/>
+        <line x1="12" y1="16" x2="12.01" y2="16" stroke-width="2"/>
+      </svg>
+      <h3 class="text-2xl mb-2 text-black">Oops! Something went wrong</h3>
+      <p class="text-gray-600 mb-6">{{ error }}</p>
+      <button @click="retry" class="flex items-center gap-2 px-6 py-3 bg-black text-white cursor-pointer text-base font-medium transition-colors hover:bg-gray-800 mx-auto">
+        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+          <path d="M1 4v6h6M23 20v-6h-6" stroke-width="2"/>
+          <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" stroke-width="2"/>
+        </svg>
+        Try Again
+      </button>
+    </div>
+
+    <!-- User Profile -->
+    <div v-else-if="authStore.currentUser" class="bg-white border border-gray-300 shadow-lg max-w-4xl w-full overflow-hidden">
+      <div class="bg-black p-12 text-center relative text-white border-b border-gray-300">
+        <div class="mb-6 relative inline-block">
+          <img
+            v-if="authStore.currentUser.photo_avatar_filename"
+            :src="`${API_BASE_URL.replace('/api', '')}/storage/photos_avatars/${authStore.currentUser.photo_avatar_filename}`"
+            :alt="authStore.currentUser.name"
+            class="w-24 h-24 border-[3px] border-white object-cover"
+          />
+          <div v-else class="w-24 h-24 border-[3px] border-white bg-white text-black flex items-center justify-center text-4xl font-semibold">
+            {{ authStore.currentUser.name.charAt(0).toUpperCase() }}
+          </div>
+          <button @click="triggerFileInput" class="absolute bottom-0 right-0 w-9 h-9 bg-white border-2 border-black cursor-pointer flex items-center justify-center transition-colors hover:bg-gray-100">
+            <svg class="w-5 h-5 text-black" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" stroke-width="1.5"/>
+              <circle cx="12" cy="13" r="4" stroke-width="1.5"/>
+            </svg>
+          </button>
+          <input
+            ref="fileInput"
+            type="file"
+            accept="image/*"
+            @change="handleAvatarUpload"
+            class="hidden"
+          />
+        </div>
+        <div>
+          <h1 class="text-3xl font-semibold mb-2">{{ authStore.currentUser.name }}</h1>
+          <p class="text-base opacity-80">@{{ authStore.currentUser.nickname }}</p>
+        </div>
+        <div class="inline-flex items-center gap-2 bg-white text-black px-4 py-2 mt-6 font-medium text-base border border-gray-300">
+          <svg class="w-5 h-5 text-black" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <circle cx="12" cy="12" r="10" stroke-width="1.5"/>
+            <text x="12" y="16" text-anchor="middle" fill="currentColor" font-size="12" font-weight="bold">$</text>
+          </svg>
+          <span>{{ authStore.currentUser.coins_balance }} coins</span>
+        </div>
+      </div>
+
+      <div>
+        <!-- Tab Navigation -->
+        <div class="flex border-b border-gray-300 bg-gray-50">
+          <button
+            :class="['flex-1 p-4 bg-transparent border-none border-b-2 border-transparent cursor-pointer text-sm font-medium text-gray-600 transition-all hover:bg-gray-100 hover:text-black', { 'border-b-black text-black bg-white': activeTab === 'info' }]"
+            @click="activeTab = 'info'"
+          >
+            Profile Information
+          </button>
+          <button
+            :class="['flex-1 p-4 bg-transparent border-none border-b-2 border-transparent cursor-pointer text-sm font-medium text-gray-600 transition-all hover:bg-gray-100 hover:text-black', { 'border-b-black text-black bg-white': activeTab === 'edit' }]"
+            @click="activeTab = 'edit'"
+          >
+            Edit Profile
+          </button>
+          <button
+            :class="['flex-1 p-4 bg-transparent border-none border-b-2 border-transparent cursor-pointer text-sm font-medium text-gray-600 transition-all hover:bg-gray-100 hover:text-black', { 'border-b-black text-black bg-white': activeTab === 'password' }]"
+            @click="activeTab = 'password'"
+          >
+            Change Password
+          </button>
+        </div>
+
+        <!-- Profile Information Tab -->
+        <div v-if="activeTab === 'info'" class="p-8">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="flex items-start gap-4 p-5 bg-white border border-gray-300 transition-shadow hover:shadow-md">
+              <div class="w-10 h-10 flex items-center justify-center flex-shrink-0 text-gray-600">
+                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
+                  <polyline points="22,6 12,13 2,6"/>
+                </svg>
+              </div>
+              <div class="flex-1">
+                <label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Email</label>
+                <p class="text-sm text-black">{{ authStore.currentUser.email }}</p>
+              </div>
+            </div>
+
+            <div class="flex items-start gap-4 p-5 bg-white border border-gray-300 transition-shadow hover:shadow-md">
+              <div class="w-10 h-10 flex items-center justify-center flex-shrink-0 text-gray-600">
+                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+                  <circle cx="12" cy="7" r="4"/>
+                </svg>
+              </div>
+              <div class="flex-1">
+                <label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Account Type</label>
+                <p class="text-sm text-black">{{ authStore.currentUser.type === 'P' ? 'Player' : 'Other' }}</p>
+              </div>
+            </div>
+
+            <div class="flex items-start gap-4 p-5 bg-white border border-gray-300 transition-shadow hover:shadow-md">
+              <div class="w-10 h-10 flex items-center justify-center flex-shrink-0 text-gray-600">
+                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+                  <line x1="16" y1="2" x2="16" y2="6"/>
+                  <line x1="8" y1="2" x2="8" y2="6"/>
+                  <line x1="3" y1="10" x2="21" y2="10"/>
+                </svg>
+              </div>
+              <div class="flex-1">
+                <label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Member Since</label>
+                <p class="text-sm text-black">{{ formatDate(authStore.currentUser.created_at) }}</p>
+              </div>
+            </div>
+
+            <div class="flex items-start gap-4 p-5 bg-white border border-gray-300 transition-shadow hover:shadow-md">
+              <div class="w-10 h-10 flex items-center justify-center flex-shrink-0 text-gray-600">
+                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <circle cx="12" cy="12" r="10"/>
+                  <path d="M9 12l2 2 4-4"/>
+                </svg>
+              </div>
+              <div class="flex-1">
+                <label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Status</label>
+                <p>
+                  <span :class="['inline-block px-3 py-1 text-sm font-medium border', authStore.currentUser.blocked ? 'bg-black text-white border-black' : 'bg-white text-black border-black']">
+                    {{ authStore.currentUser.blocked ? 'Blocked' : 'Active' }}
+                  </span>
+                </p>
+              </div>
+            </div>
+
+            <div v-if="authStore.currentUser.email_verified_at" class="flex items-start gap-4 p-5 bg-white border border-gray-300 transition-shadow hover:shadow-md">
+              <div class="w-10 h-10 flex items-center justify-center flex-shrink-0 text-gray-600">
+                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+                  <polyline points="22 4 12 14.01 9 11.01"/>
+                </svg>
+              </div>
+              <div class="flex-1">
+                <label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Email Verified</label>
+                <p class="text-sm text-black">{{ formatDate(authStore.currentUser.email_verified_at) }}</p>
+              </div>
+            </div>
+
+            <div class="flex items-start gap-4 p-5 bg-white border border-gray-300 transition-shadow hover:shadow-md">
+              <div class="w-10 h-10 flex items-center justify-center flex-shrink-0 text-gray-600">
+                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <polyline points="23 4 23 10 17 10"/>
+                  <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
+                </svg>
+              </div>
+              <div class="flex-1">
+                <label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Last Updated</label>
+                <p class="text-sm text-black">{{ formatDate(authStore.currentUser.updated_at) }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Edit Profile Tab -->
+        <div v-if="activeTab === 'edit'" class="p-8">
+          <form @submit.prevent="updateProfile" class="max-w-lg">
+            <div class="mb-6">
+              <label for="name" class="block text-sm font-semibold text-gray-800 mb-2">Name</label>
+              <input
+                id="name"
+                v-model="profileForm.name"
+                type="text"
+                required
+                :disabled="updatingProfile"
+                class="w-full px-3 py-3 border border-gray-300 text-base transition-colors focus:outline-none focus:border-black disabled:bg-gray-100 disabled:cursor-not-allowed"
+              />
+            </div>
+
+            <div class="mb-6">
+              <label for="nickname" class="block text-sm font-semibold text-gray-800 mb-2">Nickname</label>
+              <input
+                id="nickname"
+                v-model="profileForm.nickname"
+                type="text"
+                required
+                :disabled="updatingProfile"
+                class="w-full px-3 py-3 border border-gray-300 text-base transition-colors focus:outline-none focus:border-black disabled:bg-gray-100 disabled:cursor-not-allowed"
+              />
+            </div>
+
+            <div class="flex gap-4 mt-8">
+              <button type="button" @click="resetProfileForm" :disabled="updatingProfile" class="px-6 py-3 border border-black cursor-pointer text-base font-medium transition-all bg-white text-black hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed">
+                Cancel
+              </button>
+              <button type="submit" :disabled="updatingProfile" class="px-6 py-3 border border-black cursor-pointer text-base font-medium transition-all bg-black text-white hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed">
+                {{ updatingProfile ? 'Saving...' : 'Save Changes' }}
+              </button>
+            </div>
+
+            <div v-if="profileMessage" :class="['mt-4 px-3 py-3 border text-sm', profileMessageType === 'success' ? 'bg-blue-50 border-black text-black' : 'bg-red-50 border-black text-black']">
+              {{ profileMessage }}
+            </div>
+          </form>
+        </div>
+
+        <!-- Change Password Tab -->
+        <div v-if="activeTab === 'password'" class="p-8">
+          <form @submit.prevent="changePassword" class="max-w-lg">
+            <div class="mb-6">
+              <label for="current_password" class="block text-sm font-semibold text-gray-800 mb-2">Current Password</label>
+              <input
+                id="current_password"
+                v-model="passwordForm.current_password"
+                type="password"
+                required
+                :disabled="updatingPassword"
+                class="w-full px-3 py-3 border border-gray-300 text-base transition-colors focus:outline-none focus:border-black disabled:bg-gray-100 disabled:cursor-not-allowed"
+              />
+            </div>
+
+            <div class="mb-6">
+              <label for="new_password" class="block text-sm font-semibold text-gray-800 mb-2">New Password</label>
+              <input
+                id="new_password"
+                v-model="passwordForm.new_password"
+                type="password"
+                required
+                minlength="8"
+                :disabled="updatingPassword"
+                class="w-full px-3 py-3 border border-gray-300 text-base transition-colors focus:outline-none focus:border-black disabled:bg-gray-100 disabled:cursor-not-allowed"
+              />
+              <small class="block mt-1 text-xs text-gray-600">Password must be at least 8 characters long</small>
+            </div>
+
+            <div class="mb-6">
+              <label for="confirm_password" class="block text-sm font-semibold text-gray-800 mb-2">Confirm New Password</label>
+              <input
+                id="confirm_password"
+                v-model="passwordForm.confirm_password"
+                type="password"
+                required
+                :disabled="updatingPassword"
+                class="w-full px-3 py-3 border border-gray-300 text-base transition-colors focus:outline-none focus:border-black disabled:bg-gray-100 disabled:cursor-not-allowed"
+              />
+            </div>
+
+            <div class="flex gap-4 mt-8">
+              <button type="button" @click="resetPasswordForm" :disabled="updatingPassword" class="px-6 py-3 border border-black cursor-pointer text-base font-medium transition-all bg-white text-black hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed">
+                Cancel
+              </button>
+              <button type="submit" :disabled="updatingPassword" class="px-6 py-3 border border-black cursor-pointer text-base font-medium transition-all bg-black text-white hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed">
+                {{ updatingPassword ? 'Updating...' : 'Change Password' }}
+              </button>
+            </div>
+
+            <div v-if="passwordMessage" :class="['mt-4 px-3 py-3 border text-sm', passwordMessageType === 'success' ? 'bg-blue-50 border-black text-black' : 'bg-red-50 border-black text-black']">
+              {{ passwordMessage }}
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <!-- No Data State -->
+    <div v-else class="bg-white border border-gray-300 p-12 text-center shadow-sm max-w-md w-full">
+      <div class="flex flex-col items-center gap-6">
+        <div class="spinner"></div>
+        <p>Redirecting to login...</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, inject, reactive } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+import { useAPIStore } from '@/stores/api'
+import { useRouter } from 'vue-router'
+import axios from 'axios'
+
+const authStore = useAuthStore()
+const apiStore = useAPIStore()
+const router = useRouter()
+const API_BASE_URL = inject('apiBaseURL')
+
+const loading = ref(false)
+const error = ref(null)
+const activeTab = ref('info')
+const fileInput = ref(null)
+
+// Profile form
+const profileForm = reactive({
+  name: '',
+  nickname: ''
+})
+const updatingProfile = ref(false)
+const profileMessage = ref('')
+const profileMessageType = ref('')
+
+// Password form
+const passwordForm = reactive({
+  current_password: '',
+  new_password: '',
+  confirm_password: ''
+})
+const updatingPassword = ref(false)
+const passwordMessage = ref('')
+const passwordMessageType = ref('')
+
+const formatDate = (dateString) => {
+  const date = new Date(dateString)
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  })
+}
+
+const fetchProfile = async () => {
+  loading.value = true
+  error.value = null
+
+  try {
+    const response = await apiStore.getAuthUser()
+    authStore.currentUser = response.data
+    resetProfileForm()
+  } catch (err) {
+    error.value = err.response?.data?.message || 'Failed to fetch user profile'
+
+    if (err.response?.status === 401) {
+      await authStore.logout()
+      router.push('/login')
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+const retry = () => {
+  fetchProfile()
+}
+
+const resetProfileForm = () => {
+  profileForm.name = authStore.currentUser?.name || ''
+  profileForm.nickname = authStore.currentUser?.nickname || ''
+  profileMessage.value = ''
+}
+
+const resetPasswordForm = () => {
+  passwordForm.current_password = ''
+  passwordForm.new_password = ''
+  passwordForm.confirm_password = ''
+  passwordMessage.value = ''
+}
+
+const updateProfile = async () => {
+  profileMessage.value = ''
+
+  if (!profileForm.name.trim() || !profileForm.nickname.trim()) {
+    profileMessage.value = 'Name and nickname are required'
+    profileMessageType.value = 'error'
+    return
+  }
+
+  updatingProfile.value = true
+
+  try {
+    const response = await axios.put(`${API_BASE_URL}/users/me`, {
+      name: profileForm.name,
+      nickname: profileForm.nickname
+    })
+
+    authStore.currentUser = response.data
+    profileMessage.value = 'Profile updated successfully!'
+    profileMessageType.value = 'success'
+  } catch (err) {
+    profileMessage.value = err.response?.data?.message || 'Failed to update profile'
+    profileMessageType.value = 'error'
+  } finally {
+    updatingProfile.value = false
+  }
+}
+
+const changePassword = async () => {
+  passwordMessage.value = ''
+
+  if (passwordForm.new_password !== passwordForm.confirm_password) {
+    passwordMessage.value = 'New passwords do not match'
+    passwordMessageType.value = 'error'
+    return
+  }
+
+  if (passwordForm.new_password.length < 8) {
+    passwordMessage.value = 'Password must be at least 8 characters long'
+    passwordMessageType.value = 'error'
+    return
+  }
+
+  updatingPassword.value = true
+
+  try {
+    await axios.put(`${API_BASE_URL}/users/me/password`, {
+      current_password: passwordForm.current_password,
+      new_password: passwordForm.new_password,
+      new_password_confirmation: passwordForm.confirm_password
+    })
+
+    passwordMessage.value = 'Password changed successfully!'
+    passwordMessageType.value = 'success'
+    resetPasswordForm()
+  } catch (err) {
+    passwordMessage.value = err.response?.data?.message || 'Failed to change password'
+    passwordMessageType.value = 'error'
+  } finally {
+    updatingPassword.value = false
+  }
+}
+
+const triggerFileInput = () => {
+  fileInput.value?.click()
+}
+
+const handleAvatarUpload = async (event) => {
+  const file = event.target.files?.[0]
+  if (!file) return
+
+  const formData = new FormData()
+  formData.append('avatar', file)
+
+  try {
+    const response = await axios.post(`${API_BASE_URL}/users/me/avatar`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    })
+
+    authStore.currentUser = response.data
+  } catch (err) {
+    alert(err.response?.data?.message || 'Failed to upload avatar')
+  }
+}
+
+onMounted(async () => {
+  if (!authStore.isLoggedIn) {
+    router.push('/login')
+    return
+  }
+
+  if (!authStore.currentUser) {
+    await fetchProfile()
+  } else {
+    resetProfileForm()
+  }
+})
+</script>
+
+<style scoped>
+@import './UserPage.css';
+</style>

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: [

frontend/src/stores/auth.js

@@ -7,6 +7,8 @@ export const useAuthStore = defineStore('auth', () => {
   const DEFAULT_TIMEOUT = 5 * 60 * 1000
   const REMEMBER_ME_TIMEOUT = 365 * 24 * 60 * 60 * 1000
 
+
+
   const currentUser = ref(undefined)
   const token = ref(localStorage.getItem('token') || null)
   const tokenExpiry = ref(localStorage.getItem('tokenExpiry') ? parseInt(localStorage.getItem('tokenExpiry')) : null)

frontend/src/stores/user.js

@@ -0,0 +1,58 @@
+import { defineStore } from 'pinia'
+import axios from 'axios'
+import { useAuthStore } from './auth'
+
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    user: null,
+    loading: false,
+    error: null
+  }),
+
+  getters: {
+    currentUser: (state) => state.user
+  },
+
+  actions: {
+    async fetchUserProfile() {
+      const authStore = useAuthStore()
+      const token = authStore.getToken()
+
+      if (!token) {
+        this.error = 'No authentication token found'
+        throw new Error('No authentication token found')
+      }
+
+      this.loading = true
+      this.error = null
+
+      try {
+        const response = await axios.get('/api/users/me', {
+          headers: {
+            Authorization: `Bearer ${token}`,
+            Accept: 'application/json'
+          }
+        })
+
+        this.user = response.data
+        return response.data
+      } catch (error) {
+        this.error = error.response?.data?.message || 'Failed to fetch user profile'
+
+        if (error.response?.status === 401) {
+          authStore.logout()
+        }
+
+        throw error
+      } finally {
+        this.loading = false
+      }
+    },
+
+    clearUser() {
+      this.user = null
+      this.error = null
+      this.loading = false
+    }
+  }
+})