# НТО 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) состояние должны быть четко различимы визуально. В неактивном состоянии нажатие на кнопку должно быть заблокировано.


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

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