Запрос подтверждения

Использование

Без любой из них компонент не выполняет свою работу и превращается в украшенное «вы уверены?».

Когда использовать

Устройство

<ul class="inst-approval-effects">
  <li>heightmap.ts — перезапись</li>
  <li data-tone="warn">config.json — изменение настроек</li>
  <li data-tone="error">chunks.bin — удаление</li>
</ul>

Тон здесь означает необратимость. Удаление красное потому, что его нельзя отменить, — а не потому, что оно «плохое».

Состояния

<div class="inst-approval" data-state="pending" role="group" aria-label="Ожидает">
  <div class="inst-approval-head">Требуется подтверждение</div>
  <div class="inst-approval-what">Записать 4 файла</div>
  <div class="inst-approval-actions">
    <button class="inst-btn inst-btn--primary" type="button">Разрешить</button>
    <button class="inst-btn" type="button">Отклонить</button>
  </div>
</div>
<div class="inst-approval" data-state="approved" role="group" aria-label="Разрешено">
  <div class="inst-approval-head">Требуется подтверждение</div>
  <div class="inst-approval-what">Записать 4 файла</div>
  <div class="inst-approval-verdict">Разрешено в 14:32</div>
</div>

После ответа блок не исчезает и не гаснет — он отступает. История решений остаётся читаемой: пользователь должен иметь возможность вернуться и увидеть, что именно он разрешил час назад. Исчезнувший запрос невозможно проверить.

JS

Подключите модуль один раз на страницу — инициализировать компоненты по отдельности не нужно, кит работает делегированием и видит узлы, пришедшие позже.

<script type="module" src="src/kit.js"></script>

Что делает кит

Ничего. Здесь он честно не при чём: согласие на действие агента — это решение, а не поведение виджета, и подделать его оформлением нельзя.

Что должно сделать приложение

1. Отправить решение туда, где оно исполняется.
2. Перевести блок в решённое состояние — иначе кнопки останутся живыми и человек нажмёт второй раз.
3. Оставить видимым, что было решено: блок согласия — это след в истории, а не диалог, который закрылся.

block.addEventListener('click', async (e) => {
  const btn = e.target.closest('[data-decision]');
  if (!btn) return;

  for (const b of block.querySelectorAll('button')) b.disabled = true;
  await api.decide(block.dataset.id, btn.dataset.decision);

  block.dataset.decided = btn.dataset.decision;
});

Кнопки блокируются до запроса. Сеть занимает секунды, и за это время «Разрешить» успевают нажать дважды.

Сценарии

Запрос из настоящего прогона — с командой, списком последствий и пометкой необратимого.

Обратите внимание на порядок: что будет сделано, что это затронет, и только потом решение. Запрос, начинающийся с кнопок, требует ответа раньше, чем сообщает вопрос.

<div class="inst-approval" data-state="pending" role="group" aria-labelledby="ap2">
  <div class="inst-approval-head" id="ap2">Агент просит разрешение</div>
  <div class="inst-approval-what">rm -rf build/ &amp;&amp; npm run build</div>
  <ul class="inst-approval-effects">
    <li>Удалит каталог <code>build/</code> целиком — 1 284 файла</li>
    <li data-tone="warn">Необратимо: содержимое не попадает в корзину</li>
    <li>Пересборка займёт около 40 с</li>
  </ul>
  <div class="inst-approval-actions">
    <button class="inst-btn inst-btn--primary inst-btn--sm" type="button">Разрешить</button>
    <button class="inst-btn inst-btn--sm" type="button">Отклонить</button>
    <button class="inst-btn inst-btn--ghost inst-btn--sm" type="button">Разрешать всегда</button>
  </div>
</div>

Правила

Доступность

API

Связанное

Блок отказа Шаг Диф Модалка Баннер