sposchedule

1
<script setup lang="ts">
2
  import { useAuthStore } from '@/stores/auth';
3
  import { storeToRefs } from 'pinia';
4
  import InputText from 'primevue/inputtext';
5
  import Button from 'primevue/button';
6
  import Password from 'primevue/password';
7
  import { useUserUpdate } from '@/queries/users';
8
  import { reactive } from 'vue';
9
  import { useToast } from 'primevue/usetoast';
10

11
  const toast = useToast();
12
  const authStore = useAuthStore();
13
  const { user } = storeToRefs(authStore);
14

15
  const { mutateAsync: updateUser } = useUserUpdate();
16

17
  const password = reactive({
18
    password: '',
19
    password_confirmation: '',
20
  });
21

22
  async function updateProfile() {
23
    try {
24
      await updateUser({
25
        name: user.value?.name,
26
        email: user.value?.email,
27
      });
28
      toast.add({
29
        severity: 'success',
30
        summary: 'Успешно',
31
        detail: 'Информация обновлена',
32
        life: 3000,
33
        closable: true,
34
      });
35
    } catch (e) {
36
      toast.add({
37
        severity: 'error',
38
        summary: 'Ошибка',
39
        detail: e?.response.data.message,
40
        life: 3000,
41
        closable: true,
42
      });
43
      return;
44
    }
45
  }
46

47
  async function updatePassword() {
48
    try {
49
      await updateUser({
50
        ...password,
51
      });
52
      toast.add({
53
        severity: 'success',
54
        summary: 'Успешно',
55
        detail: 'Пароль обновлен',
56
        life: 3000,
57
        closable: true,
58
      });
59
    } catch (e) {
60
      toast.add({
61
        severity: 'error',
62
        summary: 'Ошибка',
63
        detail: e?.response.data.message,
64
        life: 3000,
65
        closable: true,
66
      });
67
      return;
68
    }
69
    password.password = '';
70
    password.password_confirmation = '';
71
  }
72
</script>
73
<template>
74
  <div class="flex flex-col items-start gap-4">
75
    <div class="">
76
      <h1 class="text-lg mb-2">Профиль</h1>
77
      <div class="flex flex-col items-start gap-4">
78
        <InputText v-model="user.name" class="" @change="updateProfile" />
79
        <InputText v-model="user.email" class="" @change="updateProfile" />
80
      </div>
81
    </div>
82

83
    <div class="">
84
      <h1 class="text-lg mb-2">Смена пароля</h1>
85
      <div class="flex flex-col items-start gap-4">
86
        <Password
87
          v-model="password.password"
88
          placeholder="Новый пароль"
89
          :feedback="false"
90
          toggle-mask
91
        />
92
        <Password
93
          v-model="password.password_confirmation"
94
          placeholder="Подтверждение пароля"
95
          :feedback="false"
96
          toggle-mask
97
        />
98
        <Button
99
          :disabled="!password.password_confirmation || !password.password"
100
          label="Сохранить"
101
          @click="updatePassword"
102
        />
103
      </div>
104
    </div>
105
  </div>
106
</template>
107