НТО 2025. II отборочный этап. Командные задани — UI/UX

📖 Предыстория

В компании S есть возможность бронирования мест в пространствах, предназначенных под общее использование (open-space). На данный момент для бронирования места используются различные способы бронирования, разработанные в каждом офисе индивидуально. Администрации компании S требуется мобильное приложение, как для рядовых сотрудников, так и для администрации с возможностью просмотра забронированных мест.

📋 Системные требования

Параметр	Требование
Минимальная версия Android	9.0 (API 28)
Целевая версия Android	16 (API 36)
Поддерживаемые устройства	смартфоны, планшеты
Ориентация экранов	портретная
Языки	русский

📱 Техническое задание

Тебе предстоит доработать существующий проект, в котором уже реализована логика управления и передачи состояний. Твоя цель — создать полноценный визуальный интерфейс экрана авторизации, соответствующий всем требованиям Material Design 3 и условиям автотестов.

1. Основные элементы интерфейса

Тебе необходимо разработать экран авторизации, в котором присутствуют следующие компоненты:

Заголовок

• Тип: текстовое поле (без возможности ввода)
• Тег: auth_title
• Содержание: "Вход в систему"
• Стиль: MaterialTheme.typography.headlineMedium

Поле ввода Email

• Тип: Поле ввода с возможностью отображения следующих текстовых полей - введённый текст, текст при отсутствии введённого текста, подпись поля ввода.
• Тег: auth_input_email
• Содержание:
  • подпись поля ввода: "Email"
  • для отображения текущего значения использовать email
  • для ввода использовать onEmailChange
• Компонент: OutlinedTextField

Поле ввода пароля

• Тип: Поле ввода с возможностью отображения следующих текстовых полей - введённый текст, текст при отсутствии введённого текста, подпись поля ввода.
• Тег: auth_input_password
• Содержание:
  • подпись поля ввода: "Пароль"
  • соответствующий формат ввода для данных
  • обязательна иконка для показа/скрытия пароля (с тегом: auth_input_password_visibility)
  • для отображения текущего значения использовать password
  • для ввода использовать onPasswordChange
• Компонент: OutlinedTextField с VisualTransformation

Кнопка "Войти"

• Тип: Элемент с возможностью обработки экшена нажатия и содержащий внутри себя неизменяемое поле ввода
• Тег: auth_login
• Содержание:
  • текст: "Войти"
  • вызов функции: onLoginClick
• Особенности внешнего вида: fillMaxWidth()

Ссылки (текстовые кнопки)

• Тип: Элемент с возможностью обработки экшена нажатия
• Тег: auth_forgot_pass и auth_create_account
• Содержание:
  • текст: "Забыли пароль?" и "Создать аккаунт"
  • вызов функции: onForgotPasswordClick и onCreateAccountClick
• Особенности внешнего вида: расположить на одной строке по краям (Arrangement.SpaceBetween).

2. Поддержка состояний

Реализовать визуальное представление всех четырех логических состояний: Default, Loading, Error, Success.

Default

Отображается форма авторизации (см. 1. Основные элементы интерфейса).

Loading

Отображается индикатор загрузки (аналог ProgressBar).

Требование к компоненту: CircularProgressIndicator или кастомный индикатор.

Error

Тоже самое, что и состояние Default, но дополнительно появляется текстовое поле об ошибке.

• Тип: текстовое поле без возможности редактирования
• Тег: auth_error
• Содержание: "Ошибка: неверный логин или пароль"
• Особенности внешнего вида: MaterialTheme.colorScheme.error.

Success

Все элементы скрываются, отображается только одно текстовое поле.

• Тип: текстовое поле без возможности редактирования
• Тег: auth_success
• Содержание: "Добро пожаловать!"
• Особенности внешнего вида: MaterialTheme.typography.headlineSmall.

3. Поддержка UX и визуального отклика

Добавить визуальную отзывчивость, соответствующую Material Design 3 к существущим элементам.

Поле ввода Email

• Изменение: текст при отсутствии введённого текста: "Введите email"

Поле ввода пароля

• Изменение: текст при отсутствии введённого текста: "Введите пароль"

Кнопка "Войти"

• Изменения: обработка isButtonEnabled. Активное (enabled = true) и Неактивное (enabled = false) состояние должны быть четко различимы визуально. В неактивном состоянии нажатие на кнопку должно быть заблокировано.

✅ Особенности оценивания

Оценивание происходит с помощью автоматической системы тестирования, которая в автоматическом режиме находит элементы и взаимодействует с ними (именно для этого у каждого элемента указан уникальный идентификатор, по которому будет производится поиск). Каждый тест происходит с чистой установки приложения.