From a91658eb31b0710a6e0ebbcc762dd12e5725fa7b Mon Sep 17 00:00:00 2001
From: Alex <info@hb3-accelerator.com>
Date: Thu, 22 May 2025 12:12:24 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B2=D0=B0=D1=88=D0=B5=20=D1=81=D0=BE=D0=BE?=
 =?UTF-8?q?=D0=B1=D1=89=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BA=D0=BE=D0=BC=D0=BC?=
 =?UTF-8?q?=D0=B8=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/routes/identities.js                  |  17 +
 backend/services/identity-service.js          |  26 ++
 frontend/src/components/Sidebar.vue           | 120 ++++++-
 .../src/components/identity/EmailConnect.vue  | 302 +++++++++++++-----
 .../components/identity/TelegramConnect.vue   | 123 +++++++
 frontend/src/composables/useAuth.js           |  20 ++
 frontend/src/router/index.js                  |  10 +
 .../src/views/settings/AiSettingsView.vue     | 180 +++--------
 .../src/views/settings/EmailSettingsView.vue  |  72 +++++
 .../views/settings/TelegramSettingsView.vue   |  62 ++++
 10 files changed, 700 insertions(+), 232 deletions(-)
 create mode 100644 frontend/src/components/identity/TelegramConnect.vue
 create mode 100644 frontend/src/views/settings/EmailSettingsView.vue
 create mode 100644 frontend/src/views/settings/TelegramSettingsView.vue

diff --git a/backend/routes/identities.js b/backend/routes/identities.js
index 90a4636..b84e336 100644
--- a/backend/routes/identities.js
+++ b/backend/routes/identities.js
@@ -107,4 +107,21 @@ router.get('/token-balances', requireAuth, async (req, res) => {
   }
 });
 
+// Удаление идентификатора пользователя
+router.delete('/:provider/:providerId', requireAuth, async (req, res) => {
+  try {
+    const userId = req.session.userId;
+    const { provider, providerId } = req.params;
+    const result = await require('../services/identity-service').deleteIdentity(userId, provider, providerId);
+    if (result.success) {
+      res.json({ success: true, deleted: result.deleted });
+    } else {
+      res.status(400).json({ success: false, error: result.error });
+    }
+  } catch (error) {
+    logger.error('Error deleting identity:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
 module.exports = router;
diff --git a/backend/services/identity-service.js b/backend/services/identity-service.js
index 75fe11f..ca6cf61 100644
--- a/backend/services/identity-service.js
+++ b/backend/services/identity-service.js
@@ -495,6 +495,32 @@ class IdentityService {
       return [];
     }
   }
+
+  /**
+   * Удаляет идентификатор пользователя
+   * @param {number} userId - ID пользователя
+   * @param {string} provider - Тип идентификатора
+   * @param {string} providerId - Значение идентификатора
+   * @returns {Promise<object>} - Результат операции
+   */
+  async deleteIdentity(userId, provider, providerId) {
+    try {
+      if (!userId || !provider || !providerId) {
+        logger.warn(`[IdentityService] Missing parameters for deleteIdentity: userId=${userId}, provider=${provider}, providerId=${providerId}`);
+        return { success: false, error: 'Missing required parameters' };
+      }
+      const { provider: normalizedProvider, providerId: normalizedProviderId } = this.normalizeIdentity(provider, providerId);
+      const result = await db.query(
+        `DELETE FROM user_identities WHERE user_id = $1 AND provider = $2 AND provider_id = $3`,
+        [userId, normalizedProvider, normalizedProviderId]
+      );
+      logger.info(`[IdentityService] Deleted identity ${normalizedProvider}:${normalizedProviderId} for user ${userId}`);
+      return { success: true, deleted: result.rowCount };
+    } catch (error) {
+      logger.error(`[IdentityService] Error deleting identity ${provider}:${providerId} for user ${userId}:`, error);
+      return { success: false, error: error.message };
+    }
+  }
 }
 
 module.exports = new IdentityService();
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index e084703..7e01257 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -43,18 +43,60 @@
           </router-link>
         </div>
         
-        <!-- Блок информации о пользователе -->
-        <div v-if="isAuthenticated" class="user-info-section sidebar-section">
-          <h3>Ваши идентификаторы:</h3>
-          <div class="user-info-item">
-            <span class="user-info-label">Кошелек:</span>
-            <span v-if="hasIdentityType('wallet')" class="user-info-value">
-              {{ truncateAddress(getIdentityValue('wallet')) }}
-            </span>
-            <span v-else class="user-info-value">Не подключен</span>
+        <!-- Блок информации о пользователе или формы подключения -->
+        <template v-if="isAuthenticated">
+          <div v-if="emailAuth.showForm || emailAuth.showVerification" class="auth-modal-panel">
+            <EmailConnect @success="$emit('cancel-email-auth')">
+              <template #actions>
+                <button class="close-btn" @click="$emit('cancel-email-auth')">Отмена</button>
+              </template>
+            </EmailConnect>
           </div>
-          <!-- Можно добавить другие идентификаторы по аналогии -->
-        </div>
+          <div v-else-if="telegramAuth.showVerification" class="auth-modal-panel">
+            <TelegramConnect
+              :bot-link="telegramAuth.botLink"
+              :verification-code="telegramAuth.verificationCode"
+              :error="telegramAuth.error"
+              @cancel="$emit('cancel-telegram-auth')"
+            />
+          </div>
+          <div v-else class="user-info-section sidebar-section">
+            <h3>Ваши идентификаторы:</h3>
+            <div class="user-info-item">
+              <span class="user-info-label">Кошелек:</span>
+              <span v-if="hasIdentityType('wallet')" class="user-info-value">
+                {{ truncateAddress(getIdentityValue('wallet')) }}
+                <button class="delete-identity-btn" @click="handleDeleteIdentity('wallet', getIdentityValue('wallet'))" title="Удалить">✕</button>
+              </span>
+              <span v-else class="user-info-value">
+                Не подключен
+                <button class="connect-btn" @click="handleWalletAuth">Подключить</button>
+              </span>
+            </div>
+            <div class="user-info-item">
+              <span class="user-info-label">Telegram:</span>
+              <span v-if="hasIdentityType('telegram')" class="user-info-value">
+                {{ getIdentityValue('telegram') }}
+                <button class="delete-identity-btn" @click="handleDeleteIdentity('telegram', getIdentityValue('telegram'))" title="Удалить">✕</button>
+              </span>
+              <span v-else class="user-info-value">
+                Не подключен
+                <button class="connect-btn" @click="$emit('telegram-auth')">Подключить</button>
+              </span>
+            </div>
+            <div class="user-info-item">
+              <span class="user-info-label">Email:</span>
+              <span v-if="hasIdentityType('email')" class="user-info-value">
+                {{ getIdentityValue('email') }}
+                <button class="delete-identity-btn" @click="handleDeleteIdentity('email', getIdentityValue('email'))" title="Удалить">✕</button>
+              </span>
+              <span v-else class="user-info-value">
+                Не подключен
+                <button class="connect-btn" @click="$emit('email-auth')">Подключить</button>
+              </span>
+            </div>
+          </div>
+        </template>
 
         <!-- Блок баланса токенов -->
         <div v-if="isAuthenticated" class="token-balances-section sidebar-section">
@@ -85,6 +127,9 @@
 import { defineProps, defineEmits, ref, onMounted, onBeforeUnmount, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import eventBus from '../utils/eventBus';
+import EmailConnect from './identity/EmailConnect.vue';
+import TelegramConnect from './identity/TelegramConnect.vue';
+import { useAuth } from '@/composables/useAuth';
 
 const router = useRouter();
 const props = defineProps({
@@ -97,7 +142,9 @@ const props = defineProps({
   isLoadingTokens: Boolean
 });
 
-const emit = defineEmits(['update:modelValue', 'wallet-auth', 'disconnect-wallet']);
+const emit = defineEmits(['update:modelValue', 'wallet-auth', 'disconnect-wallet', 'telegram-auth', 'email-auth']);
+
+const { deleteIdentity } = useAuth();
 
 // Обработчики событий
 const handleWalletAuth = () => {
@@ -149,6 +196,12 @@ const getIdentityValue = (type) => {
   return identity ? identity.provider_id : null;
 };
 
+const handleDeleteIdentity = async (provider, providerId) => {
+  if (confirm('Удалить идентификатор?')) {
+    await deleteIdentity(provider, providerId);
+  }
+};
+
 // Добавляем watch для отслеживания props
 watch(() => props.tokenBalances, (newVal, oldVal) => {
   console.log('[Sidebar] tokenBalances prop changed:', JSON.stringify(newVal));
@@ -440,4 +493,47 @@ h3 {
   text-align: right;
   font-variant-numeric: tabular-nums;
 }
+
+.connect-btn {
+  margin-left: 10px;
+  background: var(--color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 0.2rem 0.8rem;
+  cursor: pointer;
+  font-size: 0.95rem;
+  transition: background 0.2s;
+}
+.connect-btn:hover {
+  background: var(--color-primary-dark);
+}
+
+.auth-modal-panel {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 16px rgba(0,0,0,0.15);
+  padding: 2rem 2.5rem;
+  max-width: 400px;
+  width: 100%;
+  margin: 2rem auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.delete-identity-btn {
+  margin-left: 8px;
+  background: none;
+  border: none;
+  color: #d32f2f;
+  font-size: 1.1rem;
+  cursor: pointer;
+  padding: 0 4px;
+  border-radius: 3px;
+  transition: background 0.15s;
+}
+.delete-identity-btn:hover {
+  background: #ffeaea;
+}
 </style> 
\ No newline at end of file
diff --git a/frontend/src/components/identity/EmailConnect.vue b/frontend/src/components/identity/EmailConnect.vue
index f78ec83..3344b77 100644
--- a/frontend/src/components/identity/EmailConnect.vue
+++ b/frontend/src/components/identity/EmailConnect.vue
@@ -1,90 +1,236 @@
 <template>
   <div class="email-connection">
-    <div v-if="!showVerification" class="email-form">
-      <input v-model="email" type="email" placeholder="Введите email" class="email-input" />
-      <button :disabled="isLoading || !isValidEmail" class="email-btn" @click="requestCode">
-        {{ isLoading ? 'Отправка...' : 'Получить код' }}
-      </button>
-    </div>
-    <div v-else class="verification-form">
-      <p class="verification-info">Код отправлен на {{ email }}</p>
-      <input v-model="code" type="text" placeholder="Введите код" class="code-input" />
-      <button :disabled="isLoading || !code" class="verify-btn" @click="verifyCode">
-        {{ isLoading ? 'Проверка...' : 'Подтвердить' }}
-      </button>
-      <button class="reset-btn" @click="resetForm">Изменить email</button>
-    </div>
-    <div v-if="error" class="error">{{ error }}</div>
+    <form @submit.prevent="showVerification ? verifyCode() : requestCode()" class="email-form-panel">
+      <div class="form-header">
+        <div>
+          <div class="form-title">Email</div>
+          <div class="form-step">{{ showVerification ? 'Шаг 2 из 2' : 'Шаг 1 из 2' }}</div>
+        </div>
+      </div>
+      <div v-if="!showVerification" class="email-form">
+        <label for="email-input" class="form-label">Email</label>
+        <input id="email-input" v-model="email" type="email" placeholder="Введите email" class="email-input" :disabled="isLoading" autocomplete="email" />
+        <div class="form-hint">На этот адрес придёт код подтверждения</div>
+        <button type="submit" :disabled="isLoading || !isValidEmail" class="email-btn main-btn">
+          {{ isLoading ? 'Отправка...' : 'Получить код' }}
+        </button>
+      </div>
+      <div v-else class="verification-form">
+        <p class="verification-info success-msg">Код отправлен на <b>{{ email }}</b></p>
+        <label for="code-input" class="form-label">Код</label>
+        <input id="code-input" v-model="code" type="text" placeholder="Введите код из письма" class="code-input" :disabled="isLoading" autocomplete="one-time-code" />
+        <div class="form-hint">Проверьте почту и введите код из письма</div>
+        <button type="submit" :disabled="isLoading || !code" class="verify-btn main-btn">
+          {{ isLoading ? 'Проверка...' : 'Подтвердить' }}
+        </button>
+        <button type="button" class="reset-btn link-btn" @click="resetForm" :disabled="isLoading">Изменить email</button>
+      </div>
+      <div v-if="error" class="error-msg">{{ error }}</div>
+      <div class="actions">
+        <slot name="actions">
+          <button type="button" class="cancel-btn" @click="$emit('close')" :disabled="isLoading">Отмена</button>
+        </slot>
+      </div>
+    </form>
   </div>
 </template>
 
 <script setup>
-  import { ref, computed } from 'vue';
-  import axios from '@/api/axios';
-  import { useAuth } from '@/composables/useAuth';
+import { ref, computed } from 'vue';
+import axios from '@/api/axios';
+import { useAuth } from '@/composables/useAuth';
 
-  const emit = defineEmits(['close']);
-  const { linkIdentity } = useAuth();
+const emit = defineEmits(['close', 'success']);
+const { linkIdentity } = useAuth();
 
-  const email = ref('');
-  const code = ref('');
-  const error = ref('');
-  const isLoading = ref(false);
-  const showVerification = ref(false);
+const email = ref('');
+const code = ref('');
+const error = ref('');
+const isLoading = ref(false);
+const showVerification = ref(false);
 
-  const isValidEmail = computed(() => {
-    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value);
-  });
+const isValidEmail = computed(() => {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value);
+});
 
-  const requestCode = async () => {
-    try {
-      isLoading.value = true;
-      error.value = '';
-
-      const response = await axios.post('/api/auth/email/request-verification', {
-        email: email.value,
-      });
-
-      if (response.data.success) {
-        showVerification.value = true;
-      } else {
-        error.value = response.data.error || 'Ошибка отправки кода';
-      }
-    } catch (err) {
-      error.value = err.response?.data?.error || 'Ошибка отправки кода';
-    } finally {
-      isLoading.value = false;
-    }
-  };
-
-  const verifyCode = async () => {
-    try {
-      isLoading.value = true;
-      error.value = '';
-
-      const response = await axios.post('/api/auth/email/verify', {
-        email: email.value,
-        code: code.value,
-      });
-
-      if (response.data.success) {
-        // Связываем email с текущим пользователем
-        await linkIdentity('email', email.value);
-        emit('close');
-      } else {
-        error.value = response.data.error || 'Неверный код';
-      }
-    } catch (err) {
-      error.value = err.response?.data?.error || 'Ошибка проверки кода';
-    } finally {
-      isLoading.value = false;
-    }
-  };
-
-  const resetForm = () => {
-    email.value = '';
-    code.value = '';
+const requestCode = async () => {
+  try {
+    isLoading.value = true;
     error.value = '';
-    showVerification.value = false;
-  };
+    const response = await axios.post('/api/auth/email/request', {
+      email: email.value,
+    });
+    if (response.data.success) {
+      showVerification.value = true;
+    } else {
+      error.value = response.data.error || 'Ошибка отправки кода';
+    }
+  } catch (err) {
+    error.value = err.response?.data?.error || 'Ошибка отправки кода';
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const verifyCode = async () => {
+  try {
+    isLoading.value = true;
+    error.value = '';
+    const response = await axios.post('/api/auth/email/verify-code', {
+      email: email.value,
+      code: code.value,
+    });
+    if (response.data.success) {
+      emit('success');
+    } else {
+      error.value = response.data.error || 'Неверный код';
+    }
+  } catch (err) {
+    error.value = err.response?.data?.error || 'Ошибка проверки кода';
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const resetForm = () => {
+  email.value = '';
+  code.value = '';
+  error.value = '';
+  showVerification.value = false;
+};
 </script>
+
+<style scoped>
+.email-connection {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.email-form-panel {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 1.2rem;
+  margin: 0;
+  padding: 0;
+  background: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+.form-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 0.5rem;
+}
+.form-title {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: var(--color-primary, #2e7d32);
+}
+.form-step {
+  font-size: 0.98rem;
+  color: var(--color-grey, #888);
+}
+.form-label {
+  font-size: 1rem;
+  color: var(--color-primary, #2e7d32);
+  margin-bottom: 0.3rem;
+  font-weight: 500;
+}
+.form-hint {
+  font-size: 0.95rem;
+  color: var(--color-grey, #888);
+  margin-bottom: 0.5rem;
+  margin-top: -0.3rem;
+}
+.email-input, .code-input {
+  border: 1px solid var(--color-grey, #ccc);
+  border-radius: 4px;
+  padding: 0 1rem;
+  font-size: 1rem;
+  margin-bottom: 0.7rem;
+  outline: none;
+  width: 100%;
+  height: 44px;
+  box-shadow: none;
+  transition: none;
+}
+.email-input:focus, .code-input:focus {
+  border-color: var(--color-primary, #2e7d32);
+}
+.email-btn, .verify-btn, .main-btn, .cancel-btn {
+  width: 100%;
+  height: 44px;
+  background: var(--color-primary, #2e7d32);
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  font-size: 1.05rem;
+  cursor: pointer;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  box-shadow: none;
+  transition: none;
+}
+.email-btn:disabled, .verify-btn:disabled, .main-btn:disabled {
+  background: var(--color-grey-light, #e0e0e0);
+  color: #aaa;
+  cursor: not-allowed;
+}
+.reset-btn.link-btn {
+  background: none;
+  border: none;
+  color: var(--color-primary, #2e7d32);
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: 0.95rem;
+  margin-top: 0.2rem;
+  margin-bottom: 0.5rem;
+  width: 100%;
+  height: 44px;
+  text-align: left;
+  padding-left: 0;
+}
+.reset-btn.link-btn:disabled {
+  color: #aaa;
+  cursor: not-allowed;
+}
+.error-msg {
+  color: #d32f2f;
+  font-size: 1.05rem;
+  margin-top: 0.2rem;
+  margin-bottom: 0.2rem;
+  text-align: left;
+  font-weight: 500;
+}
+.success-msg {
+  color: var(--color-primary, #2e7d32);
+  font-size: 1.05rem;
+  font-weight: 500;
+}
+.verification-info {
+  margin-bottom: 0.7rem;
+}
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 0.5rem;
+}
+.cancel-btn {
+  background: var(--color-grey-light, #e0e0e0);
+  color: var(--color-dark, #222);
+  border: none;
+  border-radius: 4px;
+  font-size: 1rem;
+  font-weight: 400;
+  margin-bottom: 0;
+  margin-top: 0.2rem;
+  box-shadow: none;
+  transition: none;
+}
+.cancel-btn:hover {
+  background: var(--color-grey, #bdbdbd);
+}
+</style>
diff --git a/frontend/src/components/identity/TelegramConnect.vue b/frontend/src/components/identity/TelegramConnect.vue
new file mode 100644
index 0000000..a0d448b
--- /dev/null
+++ b/frontend/src/components/identity/TelegramConnect.vue
@@ -0,0 +1,123 @@
+<template>
+  <form class="tg-form-panel" @submit.prevent>
+    <div class="tg-header">
+      <div>
+        <div class="tg-title">Telegram</div>
+        <div class="tg-step">Шаг 1 из 2</div>
+      </div>
+    </div>
+    <ol class="tg-steps">
+      <li>
+        Откройте Telegram-бота:<br>
+        <a :href="botLink" target="_blank" class="tg-link">{{ botLink }}</a>
+        <div class="tg-hint">Ссылка откроется в новом окне</div>
+      </li>
+      <li>
+        Введите код:
+        <span class="tg-code">{{ verificationCode }}</span>
+        <span class="tg-hint">Скопируйте и отправьте этот код боту</span>
+      </li>
+    </ol>
+    <p v-if="error" class="tg-error">{{ error }}</p>
+    <button type="button" class="tg-cancel-btn" @click="$emit('cancel')">Отмена</button>
+  </form>
+</template>
+
+<script setup>
+const props = defineProps({
+  botLink: String,
+  verificationCode: String,
+  error: String
+});
+const emit = defineEmits(['cancel']);
+</script>
+
+<style scoped>
+.tg-form-panel {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 1.2rem;
+  margin: 0;
+  background: none;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+}
+.tg-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 0.5rem;
+}
+.tg-title {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: var(--color-primary, #2e7d32);
+}
+.tg-step {
+  font-size: 0.98rem;
+  color: var(--color-grey, #888);
+}
+.tg-steps {
+  padding-left: 1.2rem;
+  margin-bottom: 0.7rem;
+  color: var(--color-dark, #222);
+  font-size: 1rem;
+  word-break: break-all;
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+}
+.tg-link {
+  color: var(--color-primary, #2e7d32);
+  word-break: break-all;
+  text-decoration: underline;
+  font-size: 1.05rem;
+  font-weight: 500;
+}
+.tg-hint {
+  font-size: 0.95rem;
+  color: var(--color-grey, #888);
+  margin-top: 0.2rem;
+}
+.tg-code {
+  display: inline-block;
+  background: var(--color-grey-light, #e0e0e0);
+  color: #222;
+  border-radius: 4px;
+  padding: 0.2rem 0.7rem;
+  font-weight: bold;
+  font-size: 1.1rem;
+  letter-spacing: 1px;
+  margin-left: 0.5rem;
+  height: 44px;
+  line-height: 44px;
+}
+.tg-error {
+  color: #d32f2f;
+  font-size: 1.05rem;
+  margin-top: 0.2rem;
+  margin-bottom: 0.2rem;
+  text-align: left;
+  font-weight: 500;
+}
+.tg-cancel-btn {
+  width: 100%;
+  height: 44px;
+  background: var(--color-grey-light, #e0e0e0);
+  color: var(--color-dark, #222);
+  border: none;
+  border-radius: 4px;
+  font-size: 1rem;
+  font-weight: 400;
+  margin-bottom: 0;
+  margin-top: 0.2rem;
+  box-shadow: none;
+  transition: none;
+}
+.tg-cancel-btn:hover {
+  background: var(--color-grey, #bdbdbd);
+}
+</style> 
\ No newline at end of file
diff --git a/frontend/src/composables/useAuth.js b/frontend/src/composables/useAuth.js
index 57028e2..dfd94dc 100644
--- a/frontend/src/composables/useAuth.js
+++ b/frontend/src/composables/useAuth.js
@@ -471,6 +471,25 @@ export function useAuth() {
     }
   };
 
+  /**
+   * Удаляет идентификатор пользователя
+   * @param {string} provider - Тип идентификатора (wallet, email, telegram)
+   * @param {string} providerId - Значение идентификатора
+   * @returns {Promise<Object>} - Результат операции
+   */
+  const deleteIdentity = async (provider, providerId) => {
+    try {
+      const response = await axios.delete(`/api/identities/${provider}/${encodeURIComponent(providerId)}`);
+      if (response.data.success) {
+        await updateIdentities();
+        return { success: true };
+      }
+      return { success: false, error: response.data.error };
+    } catch (error) {
+      return { success: false, error: error.response?.data?.error || error.message };
+    }
+  };
+
   return {
     isAuthenticated,
     authType,
@@ -490,5 +509,6 @@ export function useAuth() {
     updateProcessedGuestIds,
     updateConnectionDisplay,
     linkIdentity,
+    deleteIdentity,
   };
 }
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 37e83a1..ec3e4c9 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -46,6 +46,16 @@ const routes = [
         name: 'settings-interface',
         component: SettingsInterfaceView,
       },
+      {
+        path: 'telegram',
+        name: 'settings-telegram',
+        component: () => import('../views/settings/TelegramSettingsView.vue'),
+      },
+      {
+        path: 'email',
+        name: 'settings-email',
+        component: () => import('../views/settings/EmailSettingsView.vue'),
+      },
       // Опционально: перенаправление со /settings на первую подстраницу
       {
         path: '',
diff --git a/frontend/src/views/settings/AiSettingsView.vue b/frontend/src/views/settings/AiSettingsView.vue
index ef96e3d..9df1557 100644
--- a/frontend/src/views/settings/AiSettingsView.vue
+++ b/frontend/src/views/settings/AiSettingsView.vue
@@ -1,116 +1,26 @@
 <template>
   <div class="ai-settings settings-panel">
-    <h2>Настройки ИИ</h2>
-    
-    <!-- Панель Промт -->
-    <div class="sub-settings-panel">
-      <h3>Настройки промптов</h3>
-      <div class="setting-form">
-        <p>Здесь будут настройки для конфигурации промптов</p>
-        <textarea v-model="settings.prompt" placeholder="Базовый промпт для ИИ..." rows="5" class="form-control"></textarea>
+    <h2>Интеграции</h2>
+    <div class="integration-blocks">
+      <div class="integration-block">
+        <h3>Telegram</h3>
+        <p>Интеграция с Telegram-ботом для уведомлений и авторизации.</p>
+        <button class="details-btn" @click="goToTelegram">Подробнее</button>
       </div>
-    </div>
-    
-    <!-- Панель RAG -->
-    <div class="sub-settings-panel">
-      <h3>Настройки RAG (Retrieval Augmented Generation)</h3>
-      <div class="setting-form">
-        <p>Конфигурация системы поиска и генерации ответов</p>
-        <div class="form-group">
-          <label class="form-label">
-            <input type="checkbox" v-model="settings.ragEnabled">
-            Включить RAG
-          </label>
-        </div>
-      </div>
-    </div>
-    
-    <!-- Панель Каналы -->
-    <div class="sub-settings-panel">
-      <h3>Настройки каналов для ИИ</h3>
-      <div class="setting-form">
-        <p>Управление каналами связи для ИИ</p>
-        <div class="form-group">
-          <label class="form-label">
-            <input type="checkbox" v-model="settings.channels.telegram">
-            Telegram
-          </label>
-        </div>
-        <div class="form-group">
-          <label class="form-label">
-            <input type="checkbox" v-model="settings.channels.email">
-            Email
-          </label>
-        </div>
-      </div>
-    </div>
-    
-    <!-- Панель Модели -->
-    <div class="sub-settings-panel">
-      <h3>Настройки моделей ИИ</h3>
-      <div class="setting-form">
-        <p>Выбор и конфигурация моделей ИИ</p>
-        <div class="form-group">
-          <label class="form-label">Модель по умолчанию:</label>
-          <select v-model="settings.defaultModel" class="form-control">
-            <option value="claude-3-haiku">Claude 3 Haiku</option>
-            <option value="claude-3-sonnet">Claude 3 Sonnet</option>
-            <option value="claude-3-opus">Claude 3 Opus</option>
-            <option value="gpt-4o">GPT-4o</option>
-          </select>
-        </div>
+      <div class="integration-block">
+        <h3>Email</h3>
+        <p>Интеграция с Email для отправки писем и уведомлений.</p>
+        <button class="details-btn" @click="goToEmail">Подробнее</button>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-// Логика из AISettings.vue
-import { reactive, onMounted } from 'vue';
-// TODO: Импортировать API для загрузки/сохранения
-
-// Локальное состояние настроек
-const settings = reactive({
-  prompt: '',
-  ragEnabled: false,
-  channels: {
-    telegram: false,
-    email: false
-  },
-  defaultModel: 'claude-3-sonnet'
-});
-
-// Загрузка настроек при монтировании
-onMounted(() => {
-  loadAiSettings();
-});
-
-const loadAiSettings = async () => {
-  console.log('[AiSettingsView] Загрузка настроек ИИ...');
-  // TODO: Заменить на реальный вызов API
-  // Пример:
-  // try {
-  //   const response = await api.get('/api/settings/ai');
-  //   Object.assign(settings, response.data);
-  // } catch (error) {
-  //   console.error('Ошибка загрузки настроек ИИ:', error);
-  // }
-};
-
-// Сохранение настроек
-const saveSettings = async (section) => {
-  console.log(`[AiSettingsView] Сохранение настроек раздела: ${section}`);
-  // TODO: Заменить на реальный вызов API
-  // Пример:
-  // try {
-  //   const dataToSave = { [section]: settings[section] }; // Или вся группа настроек
-  //   await api.post('/api/settings/ai', dataToSave);
-  //   // Показать сообщение об успехе
-  // } catch (error) {
-  //   console.error('Ошибка сохранения настроек ИИ:', error);
-  //   // Показать сообщение об ошибке
-  // }
-};
+import { useRouter } from 'vue-router';
+const router = useRouter();
+const goToTelegram = () => router.push({ name: 'settings-telegram' });
+const goToEmail = () => router.push({ name: 'settings-email' });
 </script>
 
 <style scoped>
@@ -121,50 +31,36 @@ const saveSettings = async (section) => {
   margin-top: var(--spacing-lg);
   animation: fadeIn var(--transition-normal);
 }
-
-h2 {
-  margin-bottom: var(--spacing-lg);
-  border-bottom: 1px solid var(--color-grey-light);
-  padding-bottom: var(--spacing-md);
+.integration-blocks {
+  display: flex;
+  gap: 2rem;
+  flex-wrap: wrap;
 }
-
-h3 {
-  margin-bottom: var(--spacing-md);
-  color: var(--color-primary);
-}
-
-.sub-settings-panel {
-  margin-bottom: var(--spacing-lg);
-  padding-bottom: var(--spacing-lg);
-  border-bottom: 1px dashed var(--color-grey-light);
-}
-
-.sub-settings-panel:last-child {
-  border-bottom: none;
-  margin-bottom: 0;
-  padding-bottom: 0;
-}
-
-.setting-form {
+.integration-block {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+  padding: 2rem;
+  min-width: 260px;
+  flex: 1 1 300px;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-md);
+  align-items: flex-start;
 }
-
-.form-group {
-  margin-bottom: 0; /* Убираем лишний отступ, т.к. есть gap */
+.details-btn {
+  margin-top: 1.5rem;
+  background: var(--color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 0.5rem 1.5rem;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background 0.2s;
 }
-
-.form-label {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
+.details-btn:hover {
+  background: var(--color-primary-dark);
 }
-
-.form-control {
-  max-width: 500px; /* Ограничим ширину для select/textarea */
-}
-
 @keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
diff --git a/frontend/src/views/settings/EmailSettingsView.vue b/frontend/src/views/settings/EmailSettingsView.vue
new file mode 100644
index 0000000..f30f925
--- /dev/null
+++ b/frontend/src/views/settings/EmailSettingsView.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="email-settings settings-panel">
+    <h2>Настройки Email</h2>
+    <form @submit.prevent="saveEmailSettings" class="settings-form">
+      <div class="form-group">
+        <label for="smtpHost">SMTP Host</label>
+        <input id="smtpHost" v-model="form.smtpHost" type="text" required />
+      </div>
+      <div class="form-group">
+        <label for="smtpUser">SMTP User</label>
+        <input id="smtpUser" v-model="form.smtpUser" type="text" required />
+      </div>
+      <div class="form-group">
+        <label for="smtpPassword">SMTP Password</label>
+        <input id="smtpPassword" v-model="form.smtpPassword" type="password" required />
+      </div>
+      <div class="form-group">
+        <label for="fromEmail">From Email</label>
+        <input id="fromEmail" v-model="form.fromEmail" type="email" required />
+      </div>
+      <button type="submit" class="save-btn">Сохранить</button>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+// TODO: Импортировать API для сохранения
+const form = reactive({
+  smtpHost: '',
+  smtpUser: '',
+  smtpPassword: '',
+  fromEmail: ''
+});
+const saveEmailSettings = async () => {
+  // TODO: Реализовать вызов API для сохранения
+  alert('Настройки Email сохранены (заглушка)');
+};
+</script>
+
+<style scoped>
+.settings-panel {
+  padding: var(--block-padding);
+  background-color: var(--color-light);
+  border-radius: var(--radius-md);
+  margin-top: var(--spacing-lg);
+  max-width: 500px;
+}
+.settings-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.save-btn {
+  background: var(--color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 0.5rem 1.5rem;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background 0.2s;
+}
+.save-btn:hover {
+  background: var(--color-primary-dark);
+}
+</style> 
\ No newline at end of file
diff --git a/frontend/src/views/settings/TelegramSettingsView.vue b/frontend/src/views/settings/TelegramSettingsView.vue
new file mode 100644
index 0000000..ed61063
--- /dev/null
+++ b/frontend/src/views/settings/TelegramSettingsView.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="telegram-settings settings-panel">
+    <h2>Настройки Telegram</h2>
+    <form @submit.prevent="saveTelegramSettings" class="settings-form">
+      <div class="form-group">
+        <label for="botToken">Bot Token</label>
+        <input id="botToken" v-model="form.botToken" type="text" required />
+      </div>
+      <div class="form-group">
+        <label for="botUsername">Bot Username</label>
+        <input id="botUsername" v-model="form.botUsername" type="text" required />
+      </div>
+      <button type="submit" class="save-btn">Сохранить</button>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+// TODO: Импортировать API для сохранения
+const form = reactive({
+  botToken: '',
+  botUsername: ''
+});
+const saveTelegramSettings = async () => {
+  // TODO: Реализовать вызов API для сохранения
+  alert('Настройки Telegram сохранены (заглушка)');
+};
+</script>
+
+<style scoped>
+.settings-panel {
+  padding: var(--block-padding);
+  background-color: var(--color-light);
+  border-radius: var(--radius-md);
+  margin-top: var(--spacing-lg);
+  max-width: 500px;
+}
+.settings-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.save-btn {
+  background: var(--color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 0.5rem 1.5rem;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background 0.2s;
+}
+.save-btn:hover {
+  background: var(--color-primary-dark);
+}
+</style> 
\ No newline at end of file