modified: begushiybashkir/bbvue/src/views/ProfileEdit.vue

fix bag with not upate info into pinia store

begushiybashkir/bbvue/src/views/ProfileEdit.vue

@@ -1,71 +1,36 @@
 <template>
   <div class="page">
     <h1>✏️ Редактирование профиля</h1>
-    
+
     <div v-if="loading && !user" class="loading">Загрузка...</div>
-    
+
     <form v-else @submit.prevent="handleSubmit" class="profile-edit-form">
       <div class="form-row">
         <div class="form-group">
           <label for="firstName">Имя *</label>
-          <input
+          <input id="firstName" v-model="formData.firstName" type="text" class="form-input"
-            id="firstName"
+            placeholder="Введите ваше имя" required :disabled="loading">
-            v-model="formData.firstName"
-            type="text"
-            class="form-input"
-            placeholder="Введите ваше имя"
-            required
-            :disabled="loading"
-          >
         </div>
-        
+
         <div class="form-group">
           <label for="lastName">Фамилия *</label>
-          <input
+          <input id="lastName" v-model="formData.lastName" type="text" class="form-input"
-            id="lastName"
+            placeholder="Введите вашу фамилию" required :disabled="loading">
-            v-model="formData.lastName"
-            type="text"
-            class="form-input"
-            placeholder="Введите вашу фамилию"
-            required
-            :disabled="loading"
-          >
         </div>
       </div>
 
       <div class="form-group">
         <label for="email">Email *</label>
-        <input
+        <input id="email" v-model="formData.email" type="email" class="form-input" placeholder="example@mail.ru"
-          id="email"
+          required readonly disabled style="background-color: #f5f5f5; cursor: not-allowed;">
-          v-model="formData.email"
+        <small style="color: #666; font-size: 0.9rem;">
-          type="email"
+          Email нельзя изменить. Для смены email обратитесь в поддержку.
-          class="form-input"
+        </small>
-          placeholder="example@mail.ru"
-          required
-          :disabled="loading"
-        >
-      </div>
-
-      <div class="form-group">
-        <label for="phone">Телефон</label>
-        <input
-          id="phone"
-          v-model="formData.phone"
-          type="tel"
-          class="form-input"
-          placeholder="+7 (999) 123-45-67"
-          :disabled="loading"
-        >
       </div>
 
       <div class="form-group">
         <label for="experience">Уровень подготовки</label>
-        <select
+        <select id="experience" v-model="formData.experience" class="form-input" :disabled="loading">
-          id="experience"
-          v-model="formData.experience"
-          class="form-input"
-          :disabled="loading"
-        >
           <option value="">Выберите уровень</option>
           <option value="beginner">Начинающий (0-6 месяцев)</option>
           <option value="intermediate">Любитель (6-24 месяцев)</option>
@@ -76,12 +41,7 @@
 
       <div class="form-group">
         <label for="goals">Цели</label>
-        <select
+        <select id="goals" v-model="formData.goals" class="form-input" :disabled="loading">
-          id="goals"
-          v-model="formData.goals"
-          class="form-input"
-          :disabled="loading"
-        >
           <option value="">Выберите цель</option>
           <option value="health">Улучшить здоровье</option>
           <option value="weight">Сбросить вес</option>
@@ -96,32 +56,18 @@
 
       <div class="form-group checkbox-group">
         <label class="checkbox-label">
-          <input
+          <input v-model="formData.newsletter" type="checkbox" class="checkbox" :disabled="loading">
-            v-model="formData.newsletter"
-            type="checkbox"
-            class="checkbox"
-            :disabled="loading"
-          >
           <span class="checkmark"></span>
           Хочу получать новости о тренировках и мероприятиях
         </label>
       </div>
 
       <div class="form-actions">
-        <button 
+        <button type="submit" class="btn btn-primary" :disabled="loading || !isFormChanged">
-          type="submit" 
-          class="btn btn-primary"
-          :disabled="loading || !isFormChanged"
-        >
           {{ loading ? 'Сохранение...' : '💾 Сохранить изменения' }}
         </button>
-        
+
-        <button 
+        <button type="button" class="btn btn-secondary" @click="cancelEdit" :disabled="loading">
-          type="button" 
-          class="btn btn-secondary"
-          @click="cancelEdit"
-          :disabled="loading"
-        >
           ❌ Отмена
         </button>
       </div>
@@ -144,7 +90,6 @@
 
 <script>
 import { useAuthStore } from '../stores/auth'
-import axios from 'axios'
 
 export default {
   name: 'ProfileEdit',
@@ -157,7 +102,7 @@ export default {
       formData: {
         firstName: '',
         lastName: '',
-        email: '',
+        email: '', // Только для отображения, не для изменения
         phone: '',
         experience: '',
         goals: '',
@@ -174,7 +119,12 @@ export default {
       return this.authStore.user
     },
     isFormChanged() {
-      return JSON.stringify(this.formData) !== JSON.stringify(this.originalData)
+      // Исключаем email из сравнения, так как он не изменяется
+      const formDataCopy = { ...this.formData }
+      const originalDataCopy = { ...this.originalData }
+      delete formDataCopy.email
+      delete originalDataCopy.email
+      return JSON.stringify(formDataCopy) !== JSON.stringify(originalDataCopy)
     }
   },
   methods: {
@@ -183,7 +133,7 @@ export default {
         this.formData = {
           firstName: this.user.firstName || '',
           lastName: this.user.lastName || '',
-          email: this.user.email || '',
+          email: this.user.email || '', // Только для отображения
           phone: this.user.phone || '',
           experience: this.user.experience || '',
           goals: this.user.goals || '',
@@ -198,26 +148,26 @@ export default {
       this.success = false
 
       try {
-        const response = await axios.put(
+        // Используем метод updateProfile из authStore
-          'https://begushiybashkir.ru/api/v1/auth/user/editProfile',
+        const result = await this.authStore.updateProfile({
-          this.formData,
+          firstName: this.formData.firstName,
-          {
+          lastName: this.formData.lastName,
-            headers: {
+          phone: this.formData.phone,
-              'Authorization': `Bearer ${this.authStore.token}`
+          experience: this.formData.experience,
-            }
+          goals: this.formData.goals,
-          }
+          newsletter: this.formData.newsletter
-        )
+        })
+
+        if (result.success) {
+          this.originalData = { ...this.formData }
+          this.success = true
+
+          // Принудительно обновляем профиль в сторе
+          await this.authStore.fetchProfile()
+        } else {
+          this.error = result.error
+        }
 
-        // Обновляем данные в store
-        this.authStore.setUser(response.data)
-        this.originalData = { ...this.formData }
-        this.success = true
-        
-        // Скрываем сообщение об успехе через 3 секунды
-        setTimeout(() => {
-          this.success = false
-        }, 3000)
-        
       } catch (err) {
         this.error = err.response?.data?.message || 'Ошибка обновления профиля'
       } finally {
@@ -252,7 +202,7 @@ export default {
   background: white;
   padding: 2rem;
   border-radius: 10px;
-  box-shadow: 0 2px 15px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
 }
 
 .form-row {
@@ -318,12 +268,12 @@ export default {
   flex-shrink: 0;
 }
 
-.checkbox:checked + .checkmark {
+.checkbox:checked+.checkmark {
   background-color: #2e8b57;
   border-color: #2e8b57;
 }
 
-.checkbox:checked + .checkmark::after {
+.checkbox:checked+.checkmark::after {
   content: '✓';
   color: white;
   position: absolute;
@@ -392,16 +342,16 @@ export default {
   .form-row {
     grid-template-columns: 1fr;
   }
-  
+
   .profile-edit-form {
     padding: 1.5rem;
     margin: 1rem;
   }
-  
+
   .form-actions {
     flex-direction: column;
   }
-  
+
   .navigation-actions {
     flex-direction: column;
     align-items: center;