add update

src/components/UsersPage.vue

@@ -1,15 +1,49 @@
 <script setup lang="ts">
-import { NButton, NFlex, NSpace, NTag, useMessage } from 'naive-ui'
+import { NButton, NFlex, NFormItem, NInput, NModal, NSpace, NTag, useMessage } from 'naive-ui'
 import { ref } from 'vue'
 
 import { getAuthClient } from '@/api/auth_client'
 import type { User } from '@/api/generated/crabs/evening_detective_server'
 import HeaderMenu from '@/components/HeaderMenu.vue'
+import { useAuthStore } from '@/stores/auth'
 
 const client = getAuthClient()
 const message = useMessage()
 
 const users = ref<User[]>([])
+const auth = useAuthStore()
+const passwordUser = ref<User | null>(null)
+const newPassword = ref('')
+const confirmPassword = ref('')
+const savingPassword = ref(false)
+
+function closePasswordForm() {
+  passwordUser.value = null
+  newPassword.value = ''
+  confirmPassword.value = ''
+}
+
+async function changePassword() {
+  if (!passwordUser.value || savingPassword.value) return
+  if ([...newPassword.value].length < 12 || new TextEncoder().encode(newPassword.value).length > 72) {
+    message.error('Пароль должен содержать минимум 12 символов и не более 72 байт')
+    return
+  }
+  if (newPassword.value !== confirmPassword.value) {
+    message.error('Пароли не совпадают')
+    return
+  }
+  savingPassword.value = true
+  try {
+    await client.ChangeUserPassword({ id: passwordUser.value.id!, newPassword: newPassword.value })
+    closePasswordForm()
+    message.success('Пароль изменён')
+  } catch (err) {
+    message.error(err instanceof Error ? err.message : 'Не удалось изменить пароль')
+  } finally {
+    savingPassword.value = false
+  }
+}
 
 async function getUsers() {
   const res = await client.GetUsers({})
@@ -55,6 +89,10 @@ async function deleteRole(userId: number, role: string) {
           </n-space>
         </div>
         <n-flex justify="end" class="roles-buttons-block">
+          <n-button
+            v-if="auth.hasRole('admin') && auth.user && user.id !== auth.user.id"
+            @click="passwordUser = user"
+          >Изменить пароль</n-button>
           <n-button @click="addRole(user.id!, 'author')" v-if="!user.roles?.includes('author')"
             >Сделать автором</n-button
           >
@@ -73,6 +111,43 @@ async function deleteRole(userId: number, role: string) {
     </div>
   </div>
 
+  <n-modal
+    :show="passwordUser !== null"
+    preset="card"
+    title="Изменить пароль"
+    style="width: min(94vw, 480px)"
+    :closable="!savingPassword"
+    :mask-closable="!savingPassword"
+    :close-on-esc="!savingPassword"
+    @update:show="(show: boolean) => { if (!show) closePasswordForm() }"
+  >
+    <p>{{ passwordUser?.username }} — {{ passwordUser?.email }}</p>
+    <form @submit.prevent="changePassword">
+      <n-form-item label="Новый пароль" label-for="new-user-password">
+        <n-input
+          v-model:value="newPassword"
+          :input-props="{ id: 'new-user-password', autocomplete: 'new-password' }"
+          type="password"
+          show-password-on="click"
+          :disabled="savingPassword"
+          placeholder="От 12 символов, не более 72 байт"
+        />
+      </n-form-item>
+      <n-form-item label="Повторите пароль" label-for="confirm-user-password">
+        <n-input
+          v-model:value="confirmPassword"
+          :input-props="{ id: 'confirm-user-password', autocomplete: 'new-password' }"
+          type="password"
+          :disabled="savingPassword"
+        />
+      </n-form-item>
+      <n-flex justify="end">
+        <n-button :disabled="savingPassword" @click="closePasswordForm">Отмена</n-button>
+        <n-button attr-type="submit" type="primary" :loading="savingPassword">Сохранить</n-button>
+      </n-flex>
+    </form>
+  </n-modal>
+
   <HeaderMenu active="users" />
 </template>