SyntaxSquad/DADProject#9 feat: Added profile change and name/password changes.

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/main.js

@@ -1,7 +1,6 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import { io } from 'socket.io-client'
-import { useAuthStore } from '@/stores/auth'
 
 import App from './App.vue'
 import router from './router'
@@ -21,7 +20,5 @@ app.provide('apiBaseURL', `http://${apiDomain}/api`)
 app.use(createPinia())
 app.use(router)
 
-const authStore = useAuthStore()
-authStore.initAuth()
-
 app.mount('#app')
+

frontend/src/pages/user/UserPage.vue

@@ -30,13 +30,26 @@
         <div class="avatar-container">
           <img
             v-if="authStore.currentUser.photo_avatar_filename"
-            :src="`/storage/avatars/${authStore.currentUser.photo_avatar_filename}`"
+            :src="`${API_BASE_URL.replace('/api', '')}/storage/photos_avatars/${authStore.currentUser.photo_avatar_filename}`"
             :alt="authStore.currentUser.name"
             class="avatar"
           />
           <div v-else class="avatar-placeholder">
             {{ authStore.currentUser.name.charAt(0).toUpperCase() }}
           </div>
+          <button class="edit-avatar-btn" @click="triggerFileInput">
+            <svg 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"
+            style="display: none"
+          />
         </div>
         <div class="profile-info">
           <h1 class="profile-name">{{ authStore.currentUser.name }}</h1>
@@ -52,91 +65,209 @@
       </div>
 
       <div class="profile-body">
-        <div class="info-grid">
+        <!-- Tab Navigation -->
-          <div class="info-card">
+        <div class="tabs">
-            <div class="info-icon">
+          <button
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            :class="['tab', { active: activeTab === 'info' }]"
-                <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" stroke-width="1.5"/>
+            @click="activeTab = 'info'"
-                <polyline points="22,6 12,13 2,6" stroke-width="1.5"/>
+          >
-              </svg>
+            Profile Information
-            </div>
+          </button>
-            <div class="info-content">
+          <button
-              <label>Email</label>
+            :class="['tab', { active: activeTab === 'edit' }]"
-              <p>{{ authStore.currentUser.email }}</p>
+            @click="activeTab = 'edit'"
-            </div>
+          >
-          </div>
+            Edit Profile
+          </button>
+          <button
+            :class="['tab', { active: activeTab === 'password' }]"
+            @click="activeTab = 'password'"
+          >
+            Change Password
+          </button>
+        </div>
 
-          <div class="info-card">
+        <!-- Profile Information Tab -->
-            <div class="info-icon">
+        <div v-if="activeTab === 'info'" class="tab-content">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+          <div class="info-grid">
-                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke-width="1.5"/>
+            <div class="info-card">
-                <circle cx="12" cy="7" r="4" stroke-width="1.5"/>
+              <div class="info-icon">
-              </svg>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                  <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" stroke-width="1.5"/>
+                  <polyline points="22,6 12,13 2,6" stroke-width="1.5"/>
+                </svg>
+              </div>
+              <div class="info-content">
+                <label>Email</label>
+                <p>{{ authStore.currentUser.email }}</p>
+              </div>
             </div>
-            <div class="info-content">
-              <label>Account Type</label>
-              <p>{{ authStore.currentUser.type === 'P' ? 'Player' : 'Other' }}</p>
-            </div>
-          </div>
 
-          <div class="info-card">
+            <div class="info-card">
-            <div class="info-icon">
+              <div class="info-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                <rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke-width="1.5"/>
+                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke-width="1.5"/>
-                <line x1="16" y1="2" x2="16" y2="6" stroke-width="1.5"/>
+                  <circle cx="12" cy="7" r="4" stroke-width="1.5"/>
-                <line x1="8" y1="2" x2="8" y2="6" stroke-width="1.5"/>
+                </svg>
-                <line x1="3" y1="10" x2="21" y2="10" stroke-width="1.5"/>
+              </div>
-              </svg>
+              <div class="info-content">
+                <label>Account Type</label>
+                <p>{{ authStore.currentUser.type === 'P' ? 'Player' : 'Other' }}</p>
+              </div>
             </div>
-            <div class="info-content">
-              <label>Member Since</label>
-              <p>{{ formatDate(authStore.currentUser.created_at) }}</p>
-            </div>
-          </div>
 
-          <div class="info-card">
+            <div class="info-card">
-            <div class="info-icon">
+              <div class="info-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                <circle cx="12" cy="12" r="10" stroke-width="1.5"/>
+                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke-width="1.5"/>
-                <path d="M9 12l2 2 4-4" stroke-width="1.5"/>
+                  <line x1="16" y1="2" x2="16" y2="6" stroke-width="1.5"/>
-              </svg>
+                  <line x1="8" y1="2" x2="8" y2="6" stroke-width="1.5"/>
+                  <line x1="3" y1="10" x2="21" y2="10" stroke-width="1.5"/>
+                </svg>
+              </div>
+              <div class="info-content">
+                <label>Member Since</label>
+                <p>{{ formatDate(authStore.currentUser.created_at) }}</p>
+              </div>
             </div>
-            <div class="info-content">
-              <label>Status</label>
-              <p>
-                <span :class="['status-badge', authStore.currentUser.blocked ? 'blocked' : 'active']">
-                  {{ authStore.currentUser.blocked ? 'Blocked' : 'Active' }}
-                </span>
-              </p>
-            </div>
-          </div>
 
-          <div class="info-card" v-if="authStore.currentUser.email_verified_at">
+            <div class="info-card">
-            <div class="info-icon">
+              <div class="info-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" stroke-width="1.5"/>
+                  <circle cx="12" cy="12" r="10" stroke-width="1.5"/>
-                <polyline points="22 4 12 14.01 9 11.01" stroke-width="1.5"/>
+                  <path d="M9 12l2 2 4-4" stroke-width="1.5"/>
-              </svg>
+                </svg>
+              </div>
+              <div class="info-content">
+                <label>Status</label>
+                <p>
+                  <span :class="['status-badge', authStore.currentUser.blocked ? 'blocked' : 'active']">
+                    {{ authStore.currentUser.blocked ? 'Blocked' : 'Active' }}
+                  </span>
+                </p>
+              </div>
             </div>
-            <div class="info-content">
-              <label>Email Verified</label>
-              <p>{{ formatDate(authStore.currentUser.email_verified_at) }}</p>
-            </div>
-          </div>
 
-          <div class="info-card">
+            <div class="info-card" v-if="authStore.currentUser.email_verified_at">
-            <div class="info-icon">
+              <div class="info-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                <polyline points="23 4 23 10 17 10" stroke-width="1.5"/>
+                  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" stroke-width="1.5"/>
-                <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" stroke-width="1.5"/>
+                  <polyline points="22 4 12 14.01 9 11.01" stroke-width="1.5"/>
-              </svg>
+                </svg>
+              </div>
+              <div class="info-content">
+                <label>Email Verified</label>
+                <p>{{ formatDate(authStore.currentUser.email_verified_at) }}</p>
+              </div>
             </div>
-            <div class="info-content">
+
-              <label>Last Updated</label>
+            <div class="info-card">
-              <p>{{ formatDate(authStore.currentUser.updated_at) }}</p>
+              <div class="info-icon">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                  <polyline points="23 4 23 10 17 10" stroke-width="1.5"/>
+                  <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" stroke-width="1.5"/>
+                </svg>
+              </div>
+              <div class="info-content">
+                <label>Last Updated</label>
+                <p>{{ formatDate(authStore.currentUser.updated_at) }}</p>
+              </div>
             </div>
           </div>
         </div>
+
+        <!-- Edit Profile Tab -->
+        <div v-if="activeTab === 'edit'" class="tab-content">
+          <form @submit.prevent="updateProfile" class="edit-form">
+            <div class="form-group">
+              <label for="name">Name</label>
+              <input
+                id="name"
+                v-model="profileForm.name"
+                type="text"
+                required
+                :disabled="updatingProfile"
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="nickname">Nickname</label>
+              <input
+                id="nickname"
+                v-model="profileForm.nickname"
+                type="text"
+                required
+                :disabled="updatingProfile"
+              />
+            </div>
+
+            <div class="form-actions">
+              <button type="button" @click="resetProfileForm" class="btn-secondary" :disabled="updatingProfile">
+                Cancel
+              </button>
+              <button type="submit" class="btn-primary" :disabled="updatingProfile">
+                {{ updatingProfile ? 'Saving...' : 'Save Changes' }}
+              </button>
+            </div>
+
+            <div v-if="profileMessage" :class="['message', profileMessageType]">
+              {{ profileMessage }}
+            </div>
+          </form>
+        </div>
+
+        <!-- Change Password Tab -->
+        <div v-if="activeTab === 'password'" class="tab-content">
+          <form @submit.prevent="changePassword" class="edit-form">
+            <div class="form-group">
+              <label for="current_password">Current Password</label>
+              <input
+                id="current_password"
+                v-model="passwordForm.current_password"
+                type="password"
+                required
+                :disabled="updatingPassword"
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="new_password">New Password</label>
+              <input
+                id="new_password"
+                v-model="passwordForm.new_password"
+                type="password"
+                required
+                minlength="8"
+                :disabled="updatingPassword"
+              />
+              <small>Password must be at least 8 characters long</small>
+            </div>
+
+            <div class="form-group">
+              <label for="confirm_password">Confirm New Password</label>
+              <input
+                id="confirm_password"
+                v-model="passwordForm.confirm_password"
+                type="password"
+                required
+                :disabled="updatingPassword"
+              />
+            </div>
+
+            <div class="form-actions">
+              <button type="button" @click="resetPasswordForm" class="btn-secondary" :disabled="updatingPassword">
+                Cancel
+              </button>
+              <button type="submit" class="btn-primary" :disabled="updatingPassword">
+                {{ updatingPassword ? 'Updating...' : 'Change Password' }}
+              </button>
+            </div>
+
+            <div v-if="passwordMessage" :class="['message', passwordMessageType]">
+              {{ passwordMessage }}
+            </div>
+          </form>
+        </div>
       </div>
     </div>
 
@@ -149,17 +280,40 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+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)
@@ -177,6 +331,7 @@ const fetchProfile = async () => {
   try {
     const response = await apiStore.getAuthUser()
     authStore.currentUser = response.data
+    resetProfileForm()
   } catch (err) {
     error.value = err.response?.data?.message || 'Failed to fetch user profile'
 
@@ -193,16 +348,116 @@ 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 () => {
-  // Redirect to login if not authenticated
   if (!authStore.isLoggedIn) {
     router.push('/login')
     return
   }
 
-  // If we already have user data from login, no need to fetch again
   if (!authStore.currentUser) {
     await fetchProfile()
+  } else {
+    resetProfileForm()
   }
 })
 </script>
@@ -210,14 +465,12 @@ onMounted(async () => {
 <style scoped>
 .profile-container {
   min-height: 100vh;
-  background: #fafafa;
   padding: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-/* State Cards */
 .state-card {
   background: white;
   border: 1px solid #e0e0e0;
@@ -295,7 +548,6 @@ onMounted(async () => {
   height: 18px;
 }
 
-/* Profile Card */
 .profile-card {
   background: white;
   border: 1px solid #e0e0e0;
@@ -316,12 +568,13 @@ onMounted(async () => {
 
 .avatar-container {
   margin-bottom: 1.5rem;
+  position: relative;
+  display: inline-block;
 }
 
 .avatar, .avatar-placeholder {
   width: 100px;
   height: 100px;
-  margin: 0 auto;
   border: 3px solid white;
 }
 
@@ -339,6 +592,31 @@ onMounted(async () => {
   font-weight: 600;
 }
 
+.edit-avatar-btn {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 36px;
+  height: 36px;
+  background: white;
+  border: 2px solid #000;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s;
+}
+
+.edit-avatar-btn:hover {
+  background: #f0f0f0;
+}
+
+.edit-avatar-btn svg {
+  width: 18px;
+  height: 18px;
+  color: #000;
+}
+
 .profile-name {
   font-size: 2rem;
   font-weight: 600;
@@ -371,8 +649,41 @@ onMounted(async () => {
   color: #000;
 }
 
-/* Profile Body */
 .profile-body {
+  padding: 0;
+}
+
+.tabs {
+  display: flex;
+  border-bottom: 1px solid #e0e0e0;
+  background: #fafafa;
+}
+
+.tab {
+  flex: 1;
+  padding: 1rem;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: #666;
+  transition: all 0.2s;
+}
+
+.tab:hover {
+  background: #f0f0f0;
+  color: #000;
+}
+
+.tab.active {
+  border-bottom-color: #000;
+  color: #000;
+  background: white;
+}
+
+.tab-content {
   padding: 2rem;
 }
 
@@ -453,7 +764,104 @@ onMounted(async () => {
   border-color: #000;
 }
 
-/* Responsive */
+.edit-form {
+  max-width: 500px;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 0.5rem;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #e0e0e0;
+  font-size: 1rem;
+  transition: border-color 0.2s;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #000;
+}
+
+.form-group input:disabled {
+  background: #f5f5f5;
+  cursor: not-allowed;
+}
+
+.form-group small {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #666;
+}
+
+.form-actions {
+  display: flex;
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.btn-primary, .btn-secondary {
+  padding: 0.75rem 1.5rem;
+  border: 1px solid #000;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.btn-primary {
+  background: #000;
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #333;
+}
+
+.btn-secondary {
+  background: white;
+  color: #000;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: #f0f0f0;
+}
+
+.btn-primary:disabled, .btn-secondary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.message {
+  margin-top: 1rem;
+  padding: 0.75rem;
+  border: 1px solid;
+  font-size: 0.875rem;
+}
+
+.message.success {
+  background: #f0f9ff;
+  border-color: #000;
+  color: #000;
+}
+
+.message.error {
+  background: #fff5f5;
+  border-color: #000;
+  color: #000;
+}
+
 @media (max-width: 768px) {
   .profile-container {
     padding: 1rem;
@@ -475,5 +883,23 @@ onMounted(async () => {
     width: 80px;
     height: 80px;
   }
+
+  .tabs {
+    flex-direction: column;
+  }
+
+  .tab {
+    border-bottom: 1px solid #e0e0e0;
+    border-left: 2px solid transparent;
+  }
+
+  .tab.active {
+    border-bottom-color: #e0e0e0;
+    border-left-color: #000;
+  }
+
+  .form-actions {
+    flex-direction: column;
+  }
 }
 </style>

frontend/src/stores/auth.js

@@ -5,6 +5,8 @@ import { useAPIStore } from './api'
 export const useAuthStore = defineStore('auth', () => {
   const apiStore = useAPIStore()
 
+
+
   const currentUser = ref(undefined)
   const token = ref(localStorage.getItem('token') || null)