Merge branch 'develop' into 'develop'

#22 Сделано добавление данных в профиле (имя, фамилия, email)

See merge request teknokomo/universo-monorepo!81

universo-frontend/src/layouts/IndexLayout.vue

@@ -12,7 +12,7 @@
     </q-header>
 
     <q-page-container class="flex flex-center" style="
-        background: center / cover no-repeat url(images/background_2560x1600.jpg)
+        background: center / cover no-repeat url(images/background_2560x1600.png)
           rgb(10, 10, 10);
         min-height: 100vh;
       ">

universo-frontend/src/pages/UserProfilePage.vue

@@ -33,12 +33,12 @@
           </q-item>
           <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
             <q-item-section>
-              <q-input v-model="user_details.first_name" label="Имя" />
+              <q-input type="text" v-model="user_details.first_name" label="Имя" />
             </q-item-section>
           </q-item>
           <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
             <q-item-section>
-              <q-input v-model="user_details.last_name" label="Фамилия" />
+              <q-input type="text" v-model="user_details.last_name" label="Фамилия" />
             </q-item-section>
           </q-item>
           <q-item class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
@@ -48,7 +48,7 @@
           </q-item>
           <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
             <q-item-section>
-              <q-input v-model="user_details.city" label="Город" />
+              <q-input type="city" v-model="user_details.city" label="Город" />
             </q-item-section>
           </q-item>
           <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
@@ -64,7 +64,8 @@
         </q-list>
       </q-card-section>
       <q-card-actions align="right">
-        <q-btn class="text-capitalize" outline color="primary">Обновить информацию пользователя</q-btn>
+        <q-btn class="text-capitalize" outline color="primary" @click="updateUser">Обновить информацию
+          пользователя</q-btn>
       </q-card-actions>
     </q-card>
     <q-card class="q-mt-sm" bordered flat>
@@ -80,7 +81,8 @@
           </q-item>
           <q-item class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
             <q-item-section>
-              <q-input type="password" outlined color="primary" round v-model="currentPassword" label="Текущий пароль" />
+              <q-input type="password" outlined color="primary" round v-model="currentPassword"
+                :rules="currentPasswordRules" label="Текущий пароль" />
             </q-item-section>
           </q-item>
           <q-item class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
@@ -90,7 +92,8 @@
           </q-item>
           <q-item class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
             <q-item-section>
-              <q-input type="password" outlined color="primary" round v-model="newPassword" label="Новый пароль" />
+              <q-input type="password" outlined color="primary" round v-model="newPassword" :rules="newPasswordRules"
+                label="Новый пароль" />
             </q-item-section>
           </q-item>
           <q-item class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
@@ -101,7 +104,7 @@
           <q-item class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
             <q-item-section>
               <q-input type="password" outlined round color="primary" v-model="confirmPassword"
-                label="Подтвердить новый пароль" />
+                :rules="confirmPasswordRules" label="Подтвердить новый пароль" />
             </q-item-section>
           </q-item>
         </q-card-section>
@@ -124,16 +127,54 @@ import { useCurrentUserStore } from '../stores/current-user';
 export default defineComponent({
   data() {
     return {
-      user_name: '',
-      user_details: '',
+      user_details: {
+        first_name: '',
+        user_name: '',
+        last_name: '',
+        // city: '',
+        email: '',
+      },
+
       currentPassword: '',
-      newPassword: '',
-      confirmPassword: '',
-      avatar: null,
-      avatarUrl: null,
+      newPassword: null,
+      confirmPassword: null,
+      currentPasswordRules: [
+        v => !!v || 'Текущий пароль обязателен',
+        v => /^[0-9a-zA-Z+-_*.,;$!?%#=()]+$/.test(v) || 'Недопустимые символы в пароле'
+      ],
+      newPasswordRules: [
+        v => !!v || 'Новый пароль обязателен',
+        v => /^[0-9a-zA-Z+-_*.,;$!?%#=()]+$/.test(v) || 'Недопустимые символы в пароле',
+        v => (v && v.length >= 6 && v.length <= 32) || 'Длина пароля должна быть от 6 до 32 символов'
+      ],
+      confirmPasswordRules: [
+        v => !!v || 'Подтверждение пароля обязательно',
+        v => v === this.newPassword || 'Пароли не совпадают'
+      ],
     };
   },
   watch: {
+    user: {
+      handler(val) {
+        this.user_details.first_name = val.unuaNomo.enhavo;
+        this.user_details.last_name = val.familinomo.enhavo;
+        // this.user_details.city = val.regiono.enhavo;
+      }, immediate: true
+    },
+    userEmail: {
+      handler(val) {
+        this.user_details.email = val.chefaRetposhto;
+        this.user_details.email = this.userEmail;
+      }, immediate: true
+    },
+
+    userName: {
+      handler(val) {
+        this.user_details.user_name = val.retnomo;
+        this.user_details.user_name = this.userName;
+      }, immediate: true
+    },
+
     getAvatar: {
       handler(newAvatar) {
         this.avatarUrl = newAvatar;
@@ -141,7 +182,10 @@ export default defineComponent({
     }
   },
   computed: {
-    ...mapState(useCurrentUserStore, ['getAvatar'])
+    ...mapState(useCurrentUserStore, ['getAvatar']),
+    ...mapState(useCurrentUserStore, { user: 'getUser' }),
+    ...mapState(useCurrentUserStore, { userEmail: 'getUserEmail' }),
+    ...mapState(useCurrentUserStore, { userName: 'getUserName' })
   },
   methods: {
     onChangePassword() {
@@ -152,7 +196,7 @@ export default defineComponent({
         });
         return;
       }
-      //заготовка для случая если новый пароль совпадает с текущим(почему то не работает нижняя часть кода.)
+
       if (this.currentPassword === this.newPassword) {
         this.$q.notify({
           color: 'warning',
@@ -186,7 +230,35 @@ export default defineComponent({
     },
     handleError() {
       this.avatarUrl = 'images/noAvatar_1655x1655.png';  // Set the path to your fallback image
-    }
+    },
+    ...mapActions(useUsersStore, ['changeUzanto', 'changeTelephoneNumberOrEmail']),
+    ...mapActions(useCurrentUserStore, ['addUniversoUzanto']),
+
+    updateUser() {
+      const payload = {};
+      if (this.user_details.first_name !== this.user.unuaNomo.enhavo) payload.unuaNomo = this.user_details.first_name;
+      if (this.user_details.last_name !== this.user.familinomo.enhavo) payload.familinomo = this.user_details.last_name;
+      if (this.user_details.email === this.userEmail.chefaRetposhto) payload.chefaRetposhto = this.user_details.email;
+      // if (this.user_details.user_name === this.userName.retnomo) payload.retnomo = this.user_details.user_name;
+
+      this.changeUzanto(payload);
+      this.addUniversoUzanto(payload)
+        .then(() => {
+          this.$q.notify({
+            color: 'positive',
+            message: 'Ваши данные успешно обновлены!'
+          });
+
+        })
+        .catch(error => {
+          this.$q.notify({
+            color: 'negative',
+            message: 'Ошибка при изменении данных: ' + error.message
+          });
+        });
+
+    },
+
   },
 
 });

universo-frontend/src/stores/current-user.ts

@@ -86,6 +86,8 @@ export const useCurrentUserStore = defineStore('current-user', {
     };
   },
   getters: {
+    getUser: (state): any => state.user,
+
     getAvatar: (state): string | null => {
       return state.user?.avataro?.bildoF?.url
         ? state.user.avataro.bildoF.url