Форма — это один экран входа, который auth рисует в браузере: поле логина, пароль, одноразовый код, согласие и так далее. Экран Forms показывает их список, хранит версии, переключает активную версию и управляет темами оформления. Прежде чем что-то менять, прочитайте раздел о том, что консоль может изменить, а что нет.
Прежде чем начать
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 пользователя. |
auth показывает только активную версию формы и переводы тех языков, которые активны на странице Locales. Если формы нет, auth отвечает простой страницей «not found».
Список
Щёлкните по карточке, чтобы увидеть версии, новые сверху. У каждой версии есть номер (v1), значок Active у той, которую отдаёт auth, и кнопка Set Active у остальных. Раскройте версию, и вы увидите выбор Theme, элементы управления backend-свойствами и кнопку Preview.
Preview показывает форму во фрейме. Можно менять тему, язык, ширину и значения backend-свойств, чтобы увидеть каждое состояние. Предпросмотр запускает сохранённый скомпилированный скрипт.
Версии и откат
| Действие | Что происходит |
|---|---|
| Сохранение версии | Save as new version добавляет следующий номер (v2, v3 и так далее). Новая версия не становится активной, кроме первой версии формы: она активна сразу. |
| Set Active | Делает версию активной, остальные деактивирует. Работает для любой версии из списка, поэтому это и есть откат. |
| Хранение | Central хранит пять новейших версий и активную. Более старые неактивные версии удаляются при сохранении. |
Версия никогда не правится на месте. Чтобы изменить форму, нажмите ＋ в её карточке (New Version), отредактируйте, сохраните и нажмите Set Active у новой версии. Если она ведёт себя неправильно, нажмите Set Active у предыдущей. auth подхватывает изменение при следующей синхронизации конфигурации, а не мгновенно.
Редактирование формы
Кнопка ＋ рядом с заголовком Forms создаёт форму с новым ID. auth запрашивает только ID из таблицы выше, поэтому форма с другим ID сохраняется, но никогда не показывается.
| Раздел | Что в нём |
|---|---|
| Solid.js Source (JSX/TSX) | Исходник компонентов формы. |
| Per-form CSS | Стили этой формы поверх темы. |
| Localizations | По вкладке на каждый язык со страницы Locales. Каждый placeholder из шаблона — отдельная строка, значение — текст на этом языке. |
| Backend Properties | Свойства Boolean, AnyOf (список допустимых значений) и Number; добавляются кнопками + Add Boolean, + Add AnyOf и + Add Number. Предпросмотр их использует. |
| Theme и Preview | Тема и предпросмотр ещё не сохранённой формы. |
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есть.
Темы
Тема — это блок CSS, который оформляет все формы. Клиент выбирает тему в поле Forms Theme на своей странице (Клиент); если клиент не выбрал тему или её CSS пуст, применяется тема default.
Откройте Themes, и вы увидите глобальные темы, а под заголовком This tenant — темы выбранного тенанта. Кнопка ＋ открывает New Theme.
| Поле | Значение |
|---|---|
| Theme ID | Имя, которое выбирают клиенты, например acme-dark. После создания не меняется. |
| Scope | Global (все тенанты) или This tenant (тенант, выбранный в боковом меню). Выбирается при создании темы. |
| CSS | Стили. |
Карандаш у темы открывает правку её CSS; Delete находится на странице правки. Тему default удалить нельзя, как и тему, которую ещё использует клиент (API отвечает конфликтом). При запуске central также возвращает default к таблице стилей из своего образа, если они различаются, — так же, как и для форм. Свои стили положите в новую тему и выберите её в клиенте, а default не правьте.