Аутентификация
Здесь нет ни одного особого компонента — это обычная форма. Всё важное в решениях, и большинство из них о том, чего не говорить.
Что решает
Компонента входа в библиотеке нет, и эта страница не станет делать вид, что есть:
аутентификация собирается из GrForm, двух GrInput и кнопки. Ничего
необычного на экране.
Всё трудное — невидимо. Слишком услужливое сообщение об ошибке сообщает злоумышленнику, какие адреса зарегистрированы. Поле, воюющее с менеджером паролей, заставляет людей выбирать пароли попроще. Погашенная кнопка прячет причину, по которой она погашена. Ничего из этого не видно в макете.
Поэтому паттерн — про решения, и большинство из них про то, чего не говорить.
Анатомия
Части обычные, и условия те же, что везде:
- Форма держит проверку —
GrForm. Одно место решает, уйдёт ли попытка из браузера. - Поле связывает подпись, контрол и ошибку —
GrFormField. Как в любой форме: ошибка принадлежит полю, а не странице. - Вводится строка —
GrInputдля адреса и пароля, с верно заданным контрактом автозаполнения; о нём ниже, потому что в нём вся история про менеджеры паролей. - Флаг в форме —
GrCheckboxдля «оставаться в системе». Это выбор про конкретное устройство, и об этом стоит сказать словами. - Действие меняет состояние —
GrButton. Он отправляет, а не ведёт. - Сообщение относится к странице —
GrAlertдля того, что не так с попыткой целиком, в отличие от ошибки у поля. - Нужен переход —
GrLinkдля «забыли», «создать аккаунт», «другой способ»: это места, и у них есть адреса.
Пример
Так и не так
Так — Одно сообщение на неверный адрес и неверный пароль
«Неверная почта или пароль» расплывчато намеренно, и в расплывчатости весь смысл: оно не сообщает постороннему, у каких адресов есть аккаунты. Владельца аккаунта оно не путает — он знает, в чём из двух ошибся.
Так не надо — «Аккаунта с такой почтой нет»
Полезно человеку и ровно настолько же полезно тому, кто проверяет список адресов. То же и при регистрации: «эта почта уже занята» отвечает на тот же вопрос с другой стороны, и честная починка — сказать это письмом, а не на экране.
Так — Сказать браузеру, что это за поля
Контракт автозаполнения — то, что читают менеджеры паролей: имя пользователя для адреса, текущий пароль для входа, новый пароль при установке. Задан верно — менеджер заполнит форму; задан неверно — люди набирают по памяти, а пароль, набираемый по памяти, короткий.
Так не надо — Запрещать вставку или ограничивать длину
Запрет вставки в поле пароля не мешает никому: злоумышленник печатает, а человек с менеджером не может вставить. Короткий предел длины хуже: он сообщает, что пароль хранится способом, у которого есть предел размера, — а это не то, о чём стоит объявлять.
Так — Сказать, что произошло после многих попыток
Блокировка на несколько минут — нормально; молчание — нет. GrAlert несёт
причину и, где применимо, когда пробовать снова. Человек, не знающий про
ограничение, решит, что пароль неверен, и начнёт его менять.
Так не надо — Гасить кнопку, пока поля не выглядят верными
На форме входа проверять до отправки нечего — решает сервер. Погашенная кнопка не принимает фокус и ничего не объясняет, а человек остаётся проверять форму, которая и так заполнена правильно.
Доступность
Ошибка должна дойти до скринридера. Неудачная попытка кладёт сообщение в живую область, а не только на экран: адрес не изменился, форма выглядит так же, и без объявления не произошло ровным счётом ничего.
Кнопка «показать пароль» — кнопка с состоянием. Она сообщает, виден ли пароль сейчас, чтобы тот, кто пользуется скринридером, знал, что в поле, прежде чем набирать его при посторонних.
Ожидание должно быть видно. Промежуток между нажатием и ответом принадлежит
GrLoading — иначе люди жмут второй раз, и вторая попытка как раз и включает
ограничение.
Эта страница описывает экран, а не безопасность за ним. Хранение паролей, срок жизни сессии, второй фактор и политика блокировок решаются вне интерфейса, и никакой список компонентов этих решений не сделает безопаснее.
Компоненты паттерна
Список строится из frontmatter, а не из ссылок в тексте: переименование слага здесь не теряется.
GrFormФормыGrFormFieldФормыGrInputФормыGrCheckboxФормыGrButtonДействияGrAlertОбратная связьGrLinkДействияGrLoadingОбратная связь
Клавиатура
Контракты приходят из библиотеки. Паттерн их не пересказывает — он на них ссылается.
GrInputКонтракт компонентаGrCheckboxКонтракт компонента