Опасная зона

Опасная зона — красная рамка вокруг необратимого действия: удалить проект, отозвать публикацию, сбросить ключи. Внутри — заголовок со значком предупреждения, пояснение, поле подтверждения и опасная кнопка. Действие не случится с первого клика: человек сначала вводит образец, например имя проекта.

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

Действие нельзя отменить: данные пропадут, ссылки сломаются, ключи перестанут работать.
Ошибка дорого стоит, и лишние три секунды на ввод имени — честная цена.
Действие живёт в настройках объекта, отдельной секцией внизу страницы.

Не берите опасную зону для действий, которые можно отменить, — там хватит кнопки и тоста с итогом. Удаление строки в списке, которое восстанавливается из корзины, — пункт меню строки, а не зона.

Удаление с подтверждением#

Подтверждение обязательно: Имя — имя поля, значение которого сверит сервер, Образец — что нужно ввести. Образец печатается в метке поля («Введите «main» для подтверждения») и подсказкой внутри поля, но не значением: иначе подтверждение свелось бы к лишнему клику.

Удаление проекта

Проект и все его документы будут удалены безвозвратно. Отменить это нельзя.

Введите «main» для подтвержденияВведите имя проекта ровно так, как оно написано выше

HTML = Набор.ОпаснаяЗона().Отрисовать(
	Новый Структура("Заголовок, Пояснение, Подтверждение",
		"Удаление проекта",
		"Проект и все его документы будут удалены безвозвратно. Отменить это нельзя.",
		Новый Структура("Имя, Образец, Подсказка",
			"подтверждение", "main",
			"Введите имя проекта ровно так, как оно написано выше")));

В дереве холста зона собирается словами: заголовок позицией, тело — детьми, а подтверждение — словом Подтверждение(Имя, Образец, Метка, Подсказка) (см. Язык узлов).

Узлом холста — словами

Удаление проекта

Проект и все его документы будут удалены безвозвратно. Отменить это нельзя.

Введите «main» для подтвержденияВведите имя проекта ровно так, как оно написано выше

HTML = Кит.ОпаснаяЗона("Удаление проекта")
	.Пояснение("Проект и все его документы будут удалены безвозвратно. Отменить это нельзя.")
	.Подтверждение("подтверждение", "main", "Введите «main» для подтверждения",
		"Введите имя проекта ровно так, как оно написано выше").Рендер();

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

Свою метку поля задаёт Метка в подтверждении. Без образца метка по умолчанию — «Подтвердите необратимое действие».

Своя кнопка#

Кнопка по умолчанию — «Удалить» с корзиной. Свою задают полем Кнопка моделью кнопки; вариант у неё всё равно будет «опасная», что бы ни пришло.

Своя кнопка — вид навязан опасным

Отзыв публикации

Введите «1.0.0» для подтверждения

HTML = Набор.ОпаснаяЗона().Отрисовать(
	Новый Структура("Заголовок, Подтверждение, Кнопка",
		"Отзыв публикации",
		Новый Структура("Имя, Образец", "подтверждение", "1.0.0"),
		Новый Структура("Подпись, Иконка", "Отозвать публикацию", "закрыть")));

Тело над подтверждением#

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

Что пропадёт — списком в теле

Удаление проекта

Вместе с проектом исчезнет всё, что в нём лежит:

12 документов и их редакции
3 ключа доступа
Публичные ссылки на проект

Имя проекта для подтверждения

Тело = "<ul><li>12 документов и их редакции</li><li>3 ключа доступа</li>"
	+ "<li>Публичные ссылки на проект</li></ul>";

HTML = Набор.ОпаснаяЗона().Отрисовать(
	Новый Структура("Заголовок, Пояснение, Тело, Подтверждение, Кнопка",
		"Удаление проекта",
		"Вместе с проектом исчезнет всё, что в нём лежит:",
		Тело,
		Новый Структура("Имя, Метка, Образец", "подтверждение",
			"Имя проекта для подтверждения", "main"),
		Новый Структура("Подпись, Иконка", "Удалить проект", "корзина")));

Формы зона не печатает#

Зона живёт внутри формы секции настроек: вложенная <form> — невалидный HTML. Поэтому ни формы, ни токена CSRF компонент не печатает — их даёт секция дома настроек или форма, в которую вы зону положили.

Без подтверждения с именем поля зона не собирается: красная рамка вокруг кнопки — оформление, а не защита.

Зона без подтверждения — исключение с объяснением

Компонент «Опасная зона» («Удаление проекта»): не задано Подтверждение с Именем поля. Необратимое действие без подтверждения выполняется с первого клика, а красная рамка вокруг кнопки — оформление, а не защита.

Попытка
	HTML = Набор.ОпаснаяЗона().Отрисовать(Новый Структура("Заголовок", "Удаление проекта"));
Исключение
	HTML = Набор.Тост().Отрисовать(Новый Структура("Текст, Вид",
		ИнформацияОбОшибке().Описание, "ошибка"));
КонецПопытки;

Гайдлайны#

Удаление проекта

Введите «отчёты-2026» для подтверждения

ДелайтеОбразец — то, что вводят осознанно: имя проекта

Код

HTML = Набор.ОпаснаяЗона().Отрисовать(Новый Структура("Заголовок, Подтверждение",
	"Удаление проекта", Новый Структура("Имя, Образец", "подтверждение", "отчёты-2026")));

Удаление проекта

Введите «да» для подтверждения

Не делайтеОбразец «да»: его вводят не глядя, как жмут «ОК»

Код

HTML = Набор.ОпаснаяЗона().Отрисовать(Новый Структура("Заголовок, Подтверждение",
	"Удаление проекта", Новый Структура("Имя, Образец", "подтверждение", "да")));

Сброс ключей

Все выпущенные ключи перестанут работать сразу. Сборки, которые ими пользуются, упадут.

Введите «сбросить» для подтверждения

ДелайтеПояснение говорит, что пропадёт и что отменить нельзя

Код

HTML = Набор.ОпаснаяЗона().Отрисовать(Новый Структура("Заголовок, Пояснение, Подтверждение",
	"Сброс ключей",
	"Все выпущенные ключи перестанут работать сразу. Сборки, которые ими пользуются, упадут.",
	Новый Структура("Имя, Образец", "подтверждение", "сбросить")));

Сброс ключей

Введите «сбросить» для подтверждения

Не делайтеБез пояснения: человек не знает цену действия

Код

HTML = Набор.ОпаснаяЗона().Отрисовать(Новый Структура("Заголовок, Подтверждение",
	"Сброс ключей", Новый Структура("Имя, Образец", "подтверждение", "сбросить")));

Отзыв публикации

Введите «1.0.0» для подтверждения

ДелайтеКнопка называет действие

Код

HTML = Набор.ОпаснаяЗона().Отрисовать(Новый Структура("Заголовок, Подтверждение, Кнопка",
	"Отзыв публикации", Новый Структура("Имя, Образец", "подтверждение", "1.0.0"),
	Новый Структура("Подпись, Иконка", "Отозвать версию 1.0.0", "закрыть")));

Отзыв публикации

Введите «1.0.0» для подтверждения

Не делайтеКнопка «ОК»: не ясно, что случится по нажатию

Код

HTML = Набор.ОпаснаяЗона().Отрисовать(Новый Структура("Заголовок, Подтверждение, Кнопка",
	"Отзыв публикации", Новый Структура("Имя, Образец", "подтверждение", "1.0.0"),
	Новый Структура("Подпись", "ОК")));

Доступность#

Заголовок зоны — <h3>, он виден в списке заголовков страницы и предупреждает ещё до кнопки. Значок рядом декоративен.
Поле подтверждения — обычное поле формы кита: <label> оборачивает поле, поэтому метка с образцом и есть его имя, а подсказка стоит внутри той же метки и читается вместе с ней. Поле помечено required.
Образец стоит и в метке, и плейсхолдером. Плейсхолдер исчезает при вводе, метка — нет: сверяться есть с чем до последней буквы.
Красная рамка и цвет кнопки — второй носитель смысла. Опасность называют слова: заголовок, пояснение и подпись кнопки.
Кнопка — та же опасная кнопка кита со всеми её свойствами доступности.

Узлом холста#

На холсте зона — узел рода «зона». Её тело собирается детьми узла: поле Тело в модели не задают.

Узлом дерева — тело кладут детьми

Удаление проекта

Отменить это нельзя.

Введите «main» для подтверждения

HTML = Кит.ОпаснаяЗона("Удаление проекта", Кит.Примечание("Отменить это нельзя."))
	.Подтверждение("подтверждение", "main", "Введите «main» для подтверждения").Рендер();

Модель#

Структура ниже — прежний вид модели; в дереве холста её поля пишут слова Кит.ОпаснаяЗона, а Тело заменяют дети узла.

ОпаснаяЗона.Отрисовать()src/Классы/компоненты/ОпаснаяЗона.os

Отрисовывает опасную зону — контейнер необратимого действия с блоком подтверждения.

Параметры:
 Модель - Структура - Заголовок ("Опасная зона"), Пояснение, Тело (ДОВЕРЕННЫЙ HTML
          над блоком подтверждения), Кнопка (модель компонента Кнопка; вид «опасная»
          навязывается), Подтверждение (ОБЯЗАТЕЛЬНО, структура: Имя поля — его
          значение сверяет сервер, Метка, Образец, Подсказка).

Возвращаемое значение:
 Строка - фрагмент <div class="danger-zone">. Кидается исключением, если нет
          Подтверждения с Именем поля.

Кит.ОпаснаяЗона()src/Классы/холст/Кит.os

Опасная зона — необратимые действия; её тело — дети узла. Слова: Пояснение,
Подтверждение(Имя, Образец, Метка, Подсказка), Кнопка(Подпись | узел кнопки).

Параметры:
 Модель - Строка, Структура - заголовок зоны; Структура — прежний вид модели без Тела.
 Р1…Р8  - ЭлементЭкрана, Строка - (необязательные) тело над подтверждением.

Возвращаемое значение:
 ЭлементЭкрана