interview-demo-code/frontend/admin/src/components/Settings/ItemTgBotToken.vue

<template>
  <SettingsItem :label="label">
    <template #default>
      <div class="tw:flex tw:w-full">
        <span class="tw:flex">
          <button
            class="btn btn-primary tw:whitespace-nowrap"
            type="button"
            @click="validateBotToken"
            :disabled="isLoading || ! settings.items.telegram.bot_token"
            :class="{
              'tw:opacity-60 tw:cursor-not-allowed': isLoading
            }"
          >
            <i
              :class="isLoading ? 'fa fa-spinner fa-spin tw:mr-1' : 'fa fa-refresh tw:mr-1'"
            ></i>
            {{ isLoading ? 'Проверяю...' : 'Проверить Bot Token' }}
          </button>
        </span>
        <input
          type="text"
          v-model="model"
          @input="handleInput"
          @blur="validateBotToken"
          placeholder="Введите токен от Telegram бота"
          class="form-control"
          :readonly="isLoading"
        />
      </div>

      <div
        v-if="validationStatus"
        class="alert"
        :class="validationStatusClass"
      >
        {{ validationStatus }}
      </div>
    </template>

    <template #help>
      Подробная инструкция доступна в
      <a href="https://megapay-labs.github.io/docs/telegram/telegram/#%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BE%D1%82%D0%B0" target="_blank">документации
        <i class="fa fa-external-link"></i>
      </a>.
    </template>
  </SettingsItem>
</template>

<script setup>
import {useSettingsStore} from "@/stores/settings.js";
import {ref, computed} from "vue";
import SettingsItem from "@/components/SettingsItem.vue";
import {apiPost} from "@/utils/http.js";

const model = defineModel();
const settings = useSettingsStore();
const validationStatus = ref(null);
const isLoading = ref(false);

const props = defineProps({
  label: {
    type: String,
    default: '',
  },
});

const validationStatusClass = computed(() => {
  if (!validationStatus.value) return '';

  if (validationStatus.value.startsWith('✅')) {
    return 'alert-success';
  }

  if (validationStatus.value.startsWith('❌')) {
    return 'alert-danger';
  }

  return 'alert-info';
});

function handleInput(event) {
  model.value = event.target.value;
  // Сбрасываем статус валидации при изменении токена
  if (validationStatus.value) {
    validationStatus.value = null;
  }
}

async function validateBotToken() {
  const botToken = model.value?.trim() || '';

  // Валидация пустого токена
  if (botToken.length === 0) {
    validationStatus.value = '❌ Введите Bot Token!';
    return;
  }

  // Сбрасываем предыдущий статус
  validationStatus.value = null;
  isLoading.value = true;

  try {
    const result = await apiPost('configureBotToken', { botToken });

    if (!result.success) {
      // Обработка ошибок
      if (result.status === 422) {
        validationStatus.value = `❌ Ошибка: ${result.error || 'Неверный токен'}`;
      } else {
        validationStatus.value = `❌ Ошибка проверки BotToken: ${result.error || 'Неизвестная ошибка'}`;
      }
      return;
    }

    const response = result.data;

    // Проверка наличия обязательных полей в ответе
    if (!response?.id) {
      validationStatus.value = '❌ Ошибка: bot token не найден в ответе сервера.';
      console.error('Неожиданный формат ответа:', response);
      return;
    }

    // Успешная валидация
    const username = response.username ? `@${response.username}` : 'не указан';
    const webhookUrl = response.webhook_url || 'не настроен';
    validationStatus.value = `✅ Бот: ${username} (id: ${response.id}) webhook: ${webhookUrl}`;

    // Обновляем токен в store, если нужно (на случай если сервер что-то изменил)
    if (response.bot_token && response.bot_token !== botToken) {
      model.value = response.bot_token;
    }
  } catch (error) {
    console.error('Ошибка при валидации BotToken:', error);
    validationStatus.value = '❌ Ошибка проверки BotToken. Проверьте подключение к серверу.';
  } finally {
    isLoading.value = false;
  }
}
</script>

<style scoped>

</style>