change profile name

src/pages/preferences/modals/EditNameModal.vue

@@ -8,9 +8,10 @@
     close-button
     @update:modelValue="emits('cancel')"
   >
-    <h1 class="va-h5 mb-4">Reset password</h1>
+    <h1 class="va-h5 mb-4">Изменить имя</h1>
     <VaForm ref="form" @submit.prevent="submit">
-      <VaInput v-model="Name" class="mb-4" label="Name" placeholder="Name" />
+      <VaInput v-model="Name" class="mb-4" label="Имя" placeholder="Имя" />
+      <VaInput v-model="Surname" class="mb-4" label="Фамилия" placeholder="Фамилия" />
       <div
         class="flex flex-col-reverse md:flex-row md:items-center md:justify-end md:space-x-4"
       >
@@ -35,7 +36,10 @@
   </VaModal>
 </template>
 <script lang="ts" setup>
+import { inject } from 'vue'
 import { ref } from "vue";
+import axios from "axios";
+
 import { useUserStore } from "../../../stores/user-store";
 
 import { buttonStyles } from "../styles";
@@ -48,14 +52,38 @@ const { init } = useToast();
 const emits = defineEmits(["cancel"]);
 
 const Name = ref<string>(store.userName);
+const Surname = ref<string>(store.userSurname);
+const HOST = inject('HOST');
 
 const submit = () => {
-  if (!Name.value || Name.value === store.userName) {
+  if (!Name.value && !Surname.value) {
     return emits("cancel");
   }
+  if (Surname.value === store.userSurname && Name.value === store.userName) {
+    return emits("cancel");
+  }
+  let dataUser = JSON.parse(localStorage.getItem("profile")!);
+  dataUser.first_name = Name.value;
+  dataUser.surname = Surname.value;
+  const config = {
+      headers: { Authorization: `Bearer ${localStorage.getItem("token")}` }
+  };
+  axios
+      .patch(`${HOST}/api/v0/profiles/${store.profileID}`, {
+        "profile": dataUser,
+      }, config)
+      .then((response) => {
+        store.changeUserName(Name.value, Surname.value);
+      })
+      .catch((error) => {
+          init({
+            message: "Что-то пошло не так.",
+            color: "error",
+          });
 
-  store.changeUserName(Name.value);
+      });
-  init({ message: "You've successfully changed your name", color: "success" });
+
+  init({ message: "Вы успешно изменили имя!", color: "success" });
   emits("cancel");
 };
 </script>

src/pages/preferences/settings/Settings.vue

@@ -5,7 +5,7 @@
     <p class="font-bold w-[200px]">Имя</p>
     <div class="flex-1">
       <div class="max-w-[748px]">
-        {{ store.userName }}
+        {{ store.userSurname }} {{ store.userName }}
       </div>
     </div>
     <VaButton

src/stores/user-store.ts

@@ -4,6 +4,7 @@ export const useUserStore = defineStore("user", {
   state: () => {
     if (!localStorage.getItem("profile")) {
       return {
+        profileID: "",
         userName: "",
         email: "",
         memberSince: "",
@@ -12,18 +13,10 @@ export const useUserStore = defineStore("user", {
       }
     }
     const dataUser = JSON.parse(localStorage.getItem("profile")!);
-    let userName = "";
-    if (dataUser.first_name) {
-      userName = dataUser.first_name;
-    }
-    if (dataUser.surname) {
-      if (userName.length == 0) {
-        userName += " ";
-      }
-      userName += dataUser.surname;
-    }
     return {
-      userName: userName,
+      profileID: dataUser.id || "",
+      userName: dataUser.first_name || "",
+      userSurname: dataUser.surname || "",
       email: dataUser.email || "",
       memberSince: "8/12/2020",
       pfp: "https://picsum.photos/id/22/200/300",
@@ -36,8 +29,9 @@ export const useUserStore = defineStore("user", {
       this.is2FAEnabled = !this.is2FAEnabled;
     },
 
-    changeUserName(userName: string) {
+    changeUserName(userFirst: string, userSurname: string) {
-      this.userName = userName;
+      this.userName = userFirst;
+      this.userSurname = userSurname;
     },
   },
 });