Вход, регистрация и восстановление пароля — экраны с одной задачей. Кит собирает их узкой колонкой по центру, как вход GitHub: знак и заголовок сверху, поля с подписями, основная кнопка во всю ширину, разделитель «или», кнопки провайдеров со значками брендов и рамочная строка «Нет аккаунта? Зарегистрироваться» под формой. Всё лишнее убрано: каркас вокруг узкой страницы печатает только знак и переключатель темы — без дорог, кнопки «Войти» и единого меню; вошедшему — ещё его учётку с меню без дорог.

Страница целиком — образец входа: откройте его на телефоне и в обеих темах.

Узкая страница#

Кит.УзкаяСтраница(д…) — узел рода «узкая»: колонка шириной 360 пикселей по центру с отступом сверху, на телефоне — во всю ширину с полями страницы. Блоки внутри идут с ритмом --space-4. Слово Шапка(Логотип, Заголовок, Подпись) ставит первым шапку колонки: знак 48 пикселей (адрес картинки — картинкой, узел — как есть: иконка, бренд), заголовок первого уровня шрифтом headline-small и строку подписи по центру. Заголовок обязателен — это имя страницы для глаза и скринридера.

Страница входа — колонка целиком

Вход в Ромашку

Проекты, участники, сборки

или

Войти через GitHub Войти через Keycloak

Нет аккаунта? Зарегистрироваться

HTML = Кит.УзкаяСтраница(
	Кит.Форма("/вход",
		Кит.Поле("логин", "Логин или почта").Автозаполнение("username").Обязательное(),
		Кит.Поле("пароль", "Пароль").Секрет().Автозаполнение("current-password").Обязательное()
			.СсылкаРядом("/вход/пароль", "Забыли пароль?"),
		Кит.Кнопка("Войти").Основная().ВоВсюШирину()).Вид("столбик").Токен("т0кен-сессии"),
	Кит.Разделитель("или"),
	Кит.Область(
		Кит.Кнопка("Войти через GitHub").Вторичная().Иконка("бренд:github").ВоВсюШирину().Адрес("/вход/github"),
		Кит.Кнопка("Войти через Keycloak").Вторичная().Иконка("бренд:keycloak").ВоВсюШирину().Адрес("/вход/keycloak"))
		.Вид("столбик"),
	Кит.Примечание("Нет аккаунта? ", Кит.Ссылка("/регистрация", "Зарегистрироваться")).Вид("рамка"))
	.Шапка(Кит.Иконка("куб"), "Вход в Ромашку", "Проекты, участники, сборки").Рендер();

Подпись шапки — лид страницы: строка или узел — текст со ссылкой, кодом, логином (дев-сборка 10). Абзац длиннее строки переносится по словам по центру и не шире колонки, поэтому вводный абзац ворот («Назовите логин или почту — пришлём ссылку…») и причина отказа стоят в шапке, а не отдельным примечанием под ней.

Лид ворот — абзац в подписи шапки

Восстановление пароля

Назовите логин или почту — пришлём ссылку для нового пароля. Ссылка живёт час; вернуться ко входу.

HTML = Кит.УзкаяСтраница(
	Кит.Форма("/вход/пароль",
		Кит.Поле("логин", "Логин или почта").Автозаполнение("username").Обязательное(),
		Кит.Кнопка("Прислать ссылку").Основная().ВоВсюШирину()).Вид("столбик").Токен("т0кен-сессии"))
	.Шапка(Кит.Иконка("ключ"), "Восстановление пароля",
		Кит.Холст("Назовите логин или почту — пришлём ссылку для нового пароля. Ссылка живёт час; ",
			Кит.Ссылка("/вход", "вернуться ко входу"), ".")).Рендер();

Кнопки провайдеров — обычные кнопки со значком бренда (Иконка("бренд:github"), см. иконки) во всю ширину; столбик кнопок — область вида столбик, зазор между ними --space-2. Тёмный логотип (GitHub, Keycloak) в тёмной теме рисуется цветом текста — на контурной кнопке он читается.

Вошедший на узкой странице#

Узкой колонкой печатаются и ворота, куда приходит уже вошедший: подтверждение входа из командной строки, подтверждение адреса почты. Ему каркас оставляет справа от пилюли темы его учётку (дев-сборка 10): кнопка с логином открывает единое меню без дорог — кто он, его дела и настройки, «Выйти». Иначе на таких страницах не видно, под каким аккаунтом действуешь, и не выйти. Гостю — по-прежнему только знак и пилюля. Ничего писать не нужно: учётку и выход каркас берёт из слота МенюХаба обрамления — как на любой странице. Вариант «вошедший» — образец ворот.

Ссылка рядом с полем#

Слово поля СсылкаРядом(Адрес, Подпись) ставит ссылку над полем справа — «Забыли пароль?» у пароля. Ссылка стоит до поля и в обходе клавиатурой идёт первой; поле без слова печатается, как прежде.

Пароль со ссылкой «Забыли пароль?»

Забыли пароль?Пароль

HTML = Кит.Поле("пароль", "Пароль").Секрет().СсылкаРядом("/вход/пароль", "Забыли пароль?").Рендер();

Разделитель#

Кит.Разделитель("или") — горизонтальная линия цветом outline-variant с текстом посередине; без текста — просто линия (<hr>). Для форм в столбик и карточек: между входом паролем и входом через провайдера, между блоками без заголовков. Текст разделителя — обычный текст, скринридер его читает.

Разделитель с текстом и без

или

HTML = Кит.Холст(Кит.Разделитель("или"), Кит.Разделитель()).Рендер();

Рамочная строка#

Примечание вида рамка — строка по центру в рамке outline-variant со скруглением: «Нет аккаунта? Зарегистрироваться» под формой входа, «Уже есть аккаунт? Войти» под регистрацией.

Строка регистрации под формой

Нет аккаунта? Зарегистрироваться

HTML = Кит.Примечание("Нет аккаунта? ", Кит.Ссылка("/регистрация", "Зарегистрироваться")).Вид("рамка").Рендер();

Сноска#

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

Атрибуция базы стран внизу колонки

Продолжить

Страна по адресу — IP to Country by DB-IP.

HTML = Кит.УзкаяСтраница(
	Кит.Кнопка("Продолжить").Основная().ВоВсюШирину().Адрес("/вход"),
	Кит.Примечание("Страна по адресу — ", Кит.Ссылка("https://db-ip.com", "IP to Country by DB-IP"), ".")
		.Вид("сноска")).Рендер();

Гайдлайны#

Одна задача — одна колонка: на странице входа нет дорог и меню, есть путь назад по знаку.
Основная кнопка одна и во всю ширину; провайдеры — контурными кнопками под разделителем.
Подпись поля — что ввести («Логин или почта»), а не «Поле 1»; автозаполнение — username и current-password, иначе менеджер паролей не поможет.
Ссылку «Забыли пароль?» ставьте у поля пароля, а не под кнопкой: её ищут там, где ошиблись.

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

Заголовок колонки — <h1>: имя страницы для скринридера.
Знак в шапке колонки декоративен (пустой alt): имя страницы говорит заголовок.
Разделитель «или» читается текстом; линии — оформление листа.

Кит.УзкаяСтраница()src/Классы/холст/Кит.os

Узкая страница — одна колонка шириной ~360 px по центру: вход, регистрация, восстановление
пароля. На телефоне — во всю ширину с полями страницы. Шапка колонки — словом
Шапка(Логотип, Заголовок, Подпись): знак 48 px, заголовок и подпись по центру. Подпись —
лид ворот: строка или узел (текст со ссылкой, кодом), длинная переносится по словам по
центру в ширину колонки (дев-сборка 10). Каркас страницы вокруг узкой страницы печатает
только знак и переключатель темы — без дорог, действий и единого меню: со страницы входа
уводить некуда.

Параметры:
 Р1 - ЭлементЭкрана, Строка, Неопределено - (необязательный) содержимое колонки, до Р8.
 Р2 - ЭлементЭкрана, Строка, Неопределено - (необязательный)
 Р3 - ЭлементЭкрана, Строка, Неопределено - (необязательный)
 Р4 - ЭлементЭкрана, Строка, Неопределено - (необязательный)
 Р5 - ЭлементЭкрана, Строка, Неопределено - (необязательный)
 Р6 - ЭлементЭкрана, Строка, Неопределено - (необязательный)
 Р7 - ЭлементЭкрана, Строка, Неопределено - (необязательный)
 Р8 - ЭлементЭкрана, Строка, Неопределено - (необязательный)

Возвращаемое значение:
 ЭлементЭкрана - узел рода «узкая».

Кит.Разделитель()src/Классы/холст/Кит.os

Разделитель — горизонтальная линия цветом outline-variant; с текстом («или») — текст
посередине линии. Для форм в столбик и карточек: между входом паролем и входом через
провайдера, между блоками без заголовков.

Параметры:
 Текст - Строка - (необязательный) текст посередине; пусто — просто линия.

Возвращаемое значение:
 ЭлементЭкрана - узел рода «разделитель».