Форма — это один экран входа, который auth рисует в браузере: поле логина, пароль, одноразовый код, согласие и так далее. Экран Forms показывает их список, а каждая форма открывается страницей, где правятся ее тексты, стиль и скрипт, сравниваются версии и переключается активная. Темы оформления вынесены на отдельный экран, Themes. Прежде чем править скрипт, прочитайте заметку о том, что консоль может изменить, а что нет.
Прежде чем начать
Forms находится в боковом меню в группе GLOBAL. Формы и языки общие для всех тенантов. Чтобы увидеть экран, нужно разрешение forms:read. Для сохранения версии и переключения активной версии нужно forms:manage; без него экран только для чтения.
Как формы попадают на экраны входа
У каждой формы есть ID, и auth запрашивает формы по фиксированному ID. Форма состоит из:
- скомпилированного скрипта Solid.js — он выполняется в браузере;
- исходника (TSX), который хранится рядом;
- CSS-файла формы;
- переводов — по набору строк на каждый язык;
- backend-свойств, то есть значений, которые бэкенд передает в форму.
Встроенные формы написаны в каталоге central-ui/forms/ репозитория продукта. Команда npm run build:forms компилирует каждую из них и кладет скрипт, исходник, CSS и переводы в ресурсы central, а тот при запуске загружает их в базу данных.
| ID формы | Когда показывается |
|---|---|
credential | Пользователь вводит логин, email или телефон либо выбирает passkey. |
password | Пользователь вводит пароль. |
set-password | Пользователь должен задать новый пароль, например после входа с временным. |
otp | Пользователь вводит одноразовый код. |
passkey-enroll | auth предлагает зарегистрировать passkey. |
consent | Клиент просит пользователя подтвердить scope. |
access-denied | Пользователь заблокирован, например после слишком большого числа неудачных попыток. |
conversation-expired | Вход занял слишком много времени, и диалог больше не существует. |
service-unavailable | auth не может продолжить. |
confirm-logout | /logout просит подтвердить выход. |
signed-out | Пользователь вышел. |
auth-settings | Страница аккаунта с сессиями и passkey пользователя. В новом развертывании удаление passkey, начало добавления нового и выход другой сессии сначала требуют свежего входа, и страница отправляет пользователя на login, который его запрашивает; см. политики edge. |
auth показывает только активную версию формы и переводы тех языков, которые активны в Locales на странице System settings. Если формы нет, auth отвечает простой страницей «not found».
Список
Одна строка на форму, а не на сохраненную версию.
| Колонка | Значение |
|---|---|
| Form | ID формы. |
| Kind | Built-in — форма, для которой central перечисляет состояния предпросмотра (см. Предпросмотр); Custom — любая другая. Тип консоль определяет сама, отдельного поля для него нет. |
| Locales | Активные языки, на которых у формы есть все тексты, в виде чипов (en ru и +1 для остальных, их названия видны при наведении). Язык, где не хватает текстов, назван в чипе Missing: ru, kk. Языки — те, что активны в Locales на System settings; оценивается активная версия, а если активной нет — самая новая. |
| Active version | Версия, которую отдает auth (v7). Чип v8 not active значит, что сохранена более новая версия, которая не включена. No active version — у auth нет версии, чтобы показать форму. |
Фильтры — All, Built-in, Custom и Missing translations, рядом с поиском по ID формы. В меню строки — Open и Copy ID. Кнопка + Create form открывает редактор с пустой формой.
Страница формы
Щелкните строку, чтобы открыть форму. Страница и есть редактор: в шапке ID формы, Built-in или Custom, активная версия, более новая сохраненная версия и языки, а также единственное основное действие — Save as new version. Под шапкой заметка говорит, что делает сохранение: Saving stores v9 without activating it. У редактора есть вкладки и рядом с ними живой предпросмотр, который всегда на экране.
| Вкладка | Что в ней |
|---|---|
| Texts | Тексты формы, по одному языку за раз (см. ниже). |
| Style | Собственный CSS формы, применяется поверх темы. |
| Script | Исходник формы (TSX) — для справки. В исходнике встроенной формы общие модули подставлены, а типы убраны. |
| Properties | Backend-свойства: Boolean, AnyOf (список допустимых значений) и Number, добавляются кнопками + Add Boolean, + Add AnyOf и + Add Number. Эта вкладка только у пользовательской формы: состояния и свойства встроенной формы определяет central, а сохраняемая версия оставляет свойства, которые у нее были. |
| Versions | Все сохраненные версии с кнопками Preview, Edit a copy и Set active. |
Вкладка указана в адресе (&edit=style), поэтому ссылка открывает ее.
Texts
Язык для правки выбирается кнопками над записями; точка отмечает язык, где есть пропуски. Missing only оставляет записи, которых языку не хватает, а строка под кнопками называет первые два недостающих ключа и +N для остальных.
Записи сгруппированы под заголовками Page, Fields, Buttons и Errors — группа определяется по имени ключа. В записи — ключ, текст языка по умолчанию мелким серым в качестве образца и поле. Недостающий перевод — поле с предупреждением и подсказкой Shown in English until translated: пока вы не введете текст, пользователи видят текст языка по умолчанию.
Ключи берутся из уже сохраненных текстов формы; новые ключи консоль не добавляет.
Предпросмотр
Предпросмотр рисует форму с несохраненными правками, на языке, который вы правите, в выбранной теме и в ширину телефона или рабочего стола. Текст ключа, в который вы вводите, обведен штриховой рамкой цвета акцента, а английский текст, который подставлен вместо каждого недостающего ключа, — штриховой рамкой цвета предупреждения. Ключ, в тексте которого есть подстановка ({{minutes}}), не обводится.
Для встроенной формы список State показывает ситуации, которые central знает для нее, каждую с реалистичными данными: для входа — email и пароль, телефон с одной страной или несколькими, неверный пароль и неудавшийся passkey; для одноразового кода — таймер повторной отправки, заблокированный ввод и неверный код; для согласия — обычный запрос, все стандартные scope и запрос без необязательных пунктов. Список входит в сборку central: он не хранится, и консоль не может его изменить. У пользовательской формы такого списка нет, и ее предпросмотр использует backend-свойства с вкладки Properties, показанные элементами управления в предпросмотре. Предпросмотр запускает сохраненный скомпилированный скрипт. Ниже 900 px предпросмотр превращается в сворачиваемую полосу над вкладками.
Версии и откат
| Действие | Что происходит |
|---|---|
| Save as new version | Добавляет следующий номер (v2, v3 и так далее) и остается на странице. Новая версия не становится активной, кроме первой версии формы: она активна сразу. Баннер говорит, что сохранено, и ведет на Versions. |
| Set active | Делает версию активной, остальные деактивирует. Работает для любой сохраненной версии, поэтому это и есть откат. |
| Edit a copy | Загружает эту версию в редактор как основу следующего сохранения. При несохраненных правках сначала спрашивает подтверждение. |
| Preview | Рисует эту сохраненную версию в предпросмотре; Back to my edits возвращает вашу рабочую копию. |
| Хранение | Central хранит пять новейших версий и активную. Более старые неактивные версии удаляются при сохранении. |
Версия новее активной помечена Stored, not active, а над списком стоит предупреждение: v8 is stored but not active. Users still get v7. Версия никогда не правится на месте. Чтобы изменить форму, отредактируйте ее, нажмите Save as new version, затем Set active на новой версии. Если она ведет себя плохо, нажмите Set active на предыдущей. auth подхватывает изменение при следующей синхронизации конфигурации, а не мгновенно. Удалить форму нельзя: в central нет такого эндпоинта, поэтому на странице нет карточки удаления.
При выходе со страницы с несохраненными правками консоль просит подтверждение.
Создание формы
+ Create form открывает редактор с полем Form ID на вкладке Script, без версий. В ID допустимы строчные буквы, цифры и дефисы, после сохранения он не меняется. auth запрашивает только ID из таблицы выше, поэтому форма с другим ID сохранится, но не будет показана. Save as new version сохраняет v1 и открывает новую форму на вкладке Versions.
Что консоль может изменить, а что нет
Note: В консоли нет компилятора. Save as new version отправляет скомпилированный скрипт той версии, от которой вы отталкивались, без изменений, вместе с текстом из редактора исходника. Поэтому правка исходника Solid.js в консоли не меняет то, что видят пользователи. CSS, переводы и backend-свойства действуют. Чтобы изменить поведение формы, соберите ее вне консоли и передайте скомпилированный скрипт в поле
jsCompiledзапросаPUT /configuration/formsв Central API.
У встроенных форм backend-свойства объявлены, но значения берутся из других мест. credential объявляет primaryCredentials, inlinePassword и passkey, которые auth берет из настроек входа клиента. otp объявляет length и resendAfter, они приходят из настроек challenge тенанта.
Warning: Если в конфигурации
centralесть блокbootstrap, то при каждом запускеcentralсравнивает активную версию каждой встроенной формы с копией, вложенной в его образ. Если они различаются, он сохраняет вложенную копию как новую версию и делает ее активной. Ваша правка остается в списке версий, и ее можно активировать снова, но следующий перезапуск заменит ее еще раз. Вcentral.conf, который создаетversola configure, блокbootstrapесть.
Темы
Тема оформляет все формы и вынесена на отдельный экран: Themes. Выбор Theme в предпросмотре формы перечисляет темы, доступные выбранному тенанту, чтобы можно было увидеть форму в каждой из них.