updates

src/components/OfficePage.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { NAlert } from 'naive-ui'
+import { NAlert, NButton, NInput, NModal, useMessage } from 'naive-ui'
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 
 import { getAuthClient } from '@/api/auth_client'
 import HeaderMenu from '@/components/HeaderMenu.vue'
 import { useAuthStore } from '@/stores/auth'
 
 const authStore = useAuthStore()
+const router = useRouter()
+const message = useMessage()
 const client = getAuthClient()
 
 const permissions = ref<string[]>([])
@@ -208,6 +211,22 @@ function getDetectiveTip(): Tip {
 
 const tip = getDetectiveTip()
 
+// ===== Удаление аккаунта =====
+const showDeleteDialog = ref(false)
+const deletePassword = ref('')
+const deleteError = ref('')
+
+async function confirmDeleteAccount() {
+  deleteError.value = ''
+  const res = await authStore.deleteAccount(deletePassword.value)
+  if (!res) {
+    deleteError.value = authStore.error || 'Не удалось удалить аккаунт'
+    return
+  }
+  message.success('Аккаунт и персональные данные удалены')
+  showDeleteDialog.value = false
+  router.push('/login')
+}
 </script>
 
 <template>
@@ -218,10 +237,93 @@ const tip = getDetectiveTip()
       </n-alert>
 
       <p>Доброго времени суток, {{ authStore.username }}.</p>
+
+      <div class="danger-zone">
+        <div class="danger-zone-text">
+          <div class="danger-zone-title">Удаление аккаунта</div>
+          <div class="danger-zone-hint">
+            Удаление необратимо: аккаунт и все персональные данные будут стёрты (ст. 21 152-ФЗ).
+          </div>
+        </div>
+        <n-button type="error" ghost @click="showDeleteDialog = true">Удалить аккаунт</n-button>
+      </div>
     </div>
   </div>
 
+  <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-modal>
+
   <HeaderMenu active="office" />
 </template>
 
-<style scoped></style>
+<style scoped>
+.danger-zone {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: 40px;
+  padding: 20px;
+  background-color: #222;
+  border: 1px solid rgb(224 108 117 / 40%);
+  border-radius: 10px;
+}
+
+.danger-zone-title {
+  font-size: 17px;
+  font-weight: 600;
+  color: #e06c75;
+}
+
+.danger-zone-hint {
+  margin-top: 6px;
+  font-size: 14px;
+  color: #999;
+}
+
+.delete-modal-text {
+  margin: 0 0 16px;
+  line-height: 1.5;
+  color: #bbb;
+}
+
+.delete-modal-error {
+  margin: 12px 0 0;
+  color: #e06c75;
+}
+
+.delete-modal-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 20px;
+}
+</style>