fix

src/components/OfficePage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NAlert, NButton, NInput, NModal, useMessage } from 'naive-ui'
+import { NAlert, NButton, NCard, NInput, NModal, useMessage } from 'naive-ui'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -260,32 +260,39 @@ async function confirmDeleteAccount() {
 
   <n-modal
     v-model:show="showDeleteDialog"
-    preset="card"
-    title="Удаление аккаунта"
     class="delete-modal"
   >
-    <p class="delete-modal-text">
-      Это действие необратимо. Для подтверждения удаления введите пароль от учётной записи — он
-      понадобится, чтобы убедиться, что аккаунт удаляет его владелец.
-    </p>
-    <n-input
-      v-model:value="deletePassword"
-      type="password"
-      placeholder="Пароль для подтверждения"
-      @keyup.enter="confirmDeleteAccount"
-    />
-    <p v-if="deleteError" class="delete-modal-error">{{ deleteError }}</p>
-    <div class="delete-modal-buttons">
-      <n-button @click="showDeleteDialog = false">Отмена</n-button>
-      <n-button
-        type="error"
-        :disabled="deletePassword.length == 0"
-        :loading="authStore.isLoading"
-        @click="confirmDeleteAccount"
-      >
-        Удалить навсегда
-      </n-button>
-    </div>
+    <n-card
+      title="Удаление аккаунта"
+      :bordered="false"
+      role="dialog"
+      aria-modal="true"
+      closable
+      @close="showDeleteDialog = false"
+    >
+      <p class="delete-modal-text">
+        Это действие необратимо. Для подтверждения удаления введите пароль от учётной записи — он
+        понадобится, чтобы убедиться, что аккаунт удаляет его владелец.
+      </p>
+      <n-input
+        v-model:value="deletePassword"
+        type="password"
+        placeholder="Пароль для подтверждения"
+        @keyup.enter="confirmDeleteAccount"
+      />
+      <p v-if="deleteError" class="delete-modal-error">{{ deleteError }}</p>
+      <div class="delete-modal-buttons">
+        <n-button @click="showDeleteDialog = false">Отмена</n-button>
+        <n-button
+          type="error"
+          :disabled="deletePassword.length == 0"
+          :loading="authStore.isLoading"
+          @click="confirmDeleteAccount"
+        >
+          Удалить навсегда
+        </n-button>
+      </div>
+    </n-card>
   </n-modal>
 
   <HeaderMenu active="office" />

src/components/UsersPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NButton, NFlex, NFormItem, NInput, NModal, NSpace, NTag, useMessage } from 'naive-ui'
+import { NButton, NCard, NFlex, NFormItem, NInput, NModal, NSpace, NTag, useMessage } from 'naive-ui'
 import { ref } from 'vue'
 
 import { getAuthClient } from '@/api/auth_client'
@@ -113,41 +113,48 @@ async function deleteRole(userId: number, role: string) {
 
   <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="От 8 символов, не более 16 символов"
-        />
-      </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"
-          show-password-on="click"
-          :disabled="savingPassword"
-          placeholder="Повторите новый пароль"
-        />
-      </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-card
+      title="Изменить пароль"
+      :bordered="false"
+      role="dialog"
+      aria-modal="true"
+      :closable="!savingPassword"
+      @close="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="От 8 символов, не более 16 символов"
+          />
+        </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"
+            show-password-on="click"
+            :disabled="savingPassword"
+            placeholder="Повторите новый пароль"
+          />
+        </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-card>
   </n-modal>
 
   <HeaderMenu active="users" />