В этом задании необходимо разработать экран авторизации пользователя в приложение.
Для реализации вам понадобятся знания об элементах пользовательского интерфейса: UIView, CALayer, UIViewController, UITextField, UIButton, UILabel, UIAlertController.
- Приложение поддерживает только светлую тему
- Минимальная версия операционной системы: iOS 12.1
- Для реализации приложения необходимо использовать только Objective-C
- Для реализации пользовательского интерфейса можно:
- использовать xib
- описывать элементы интерфейса в коде
- LaunchScreen - белый экран (стандартный)
- Шрифт: системный. link
- Использовать storyboard (кроме LaunchScreen) нельзя
- Требования к
cross-check - Форма для оценки задания
При запуске приложения пользователь попадает на экран авторизации. На экране расположены интерактивные элементы:
- поля ввода
login,password - кнопка
authorize
Также здесь расположен неинтерактивный текстовый элемент text.
Для того, чтобы пользователь смог войти в приложение, ему необходимо ввести значения в поля login и password.
При нажатии на кнопку authorize значения в полях login и password проверяются на совпадение с имеющимися в системе значениями. Корректными являются следующие значения:
- для поля
login- значение "username" - для поля
password- значение "password"
В случае неудачной проверки - несовпадение значений в полях с имеющимися в системе - отображается следующее состояние. Изменяют своё отображение только те поля, в которых оказалось некорректное значение. В случае, если в одном поле оказалось корректное значение, а в другом - некорректное, отображение меняет только поле с некорректным значением.
При возобновлении ввода в поле с некорректным значением оно возвращает своё отображение к базовому.
В случае удачной проверки - совпадение значений в обоих полях с имеющимися в системе - экран переходит в следующее состояние. Элементы управления login, password и authorize изменяют состояние на неактивное. На экране появляется поле secure, которое имеет активное состояние. Поле secure содержит три кнопки - 1, 2, 3 - и текстовый элемент result.
Пользователю нужно нажать кнопки 1, 2 и 3 в корректной последовательности, чтобы авторизоваться в приложении. Корректной последовательностью является следующая:
132
Вводимая пользователем последовательность отображается в элементе result
В случае, если пользователю ввёл некорректную последовательность, в элементе secure отображается индикация состояния error. Значение элемента result возвращается к исходному.
Предел количества элементв в вводимой последовательности равен 3. Состояние error соответствует случаю, когда пользователь ввёл три значения последовательности и результат не совпал с корректным, записанным в системе.
Если пользователь начинает вводить последовательность, когда элемент secure находится в состоянии error, элемент secure переходит в состояние ready.
Если пользователь ввёл корректную последовательность, элемент secure переходит в состояние success. На экране отображается модальное окно с заголовком "Welcome" и сообщением "You are successfuly authorized!". Интерактивная кнопка имеет заголовок "Refresh".
При нажатии на интерактивную кнопку:
- модальное окно пропадает
- экран авторизации возвращается в базовое состояние
Набор требуемых размеров иконки
Текстовый элемент, содержит название приложения. Текст элемента: "RSSchool"
Текстовые поля login и password.
Поле login позволяет вводить только символы латинского алфавита. Ввод предлагается с нижнего начертания.
Поле password предназначено для ввода пароля. Значение, вводимое в это поле, экранируется.
Текстовое поле находится в одном из трёх состояний:
readyerrorsuccess
При нажатии на текстовое поле на экране появляется системная клавиатура. Необходимо реализовать возможности для её скрытия:
- при нажатии на кнопку "return" на клавиатуре последняя пропадает с экрана
- при нажатии на любое место экрана, кроме текстовых полей, клавиатура пропадает с экрана
Состояние active, поле активно
Состояние error, поле активно
Состояние success, поле неактивно
Кнопка авторизации позволяет пользователю проверить корректность введённых данных и продолжить процесс авторизации.
Для иконки пользователя используется элемент SF Symbols - person и person.fill.
Отображение кнопки может находиться в одном из трёх состояний:
defaulthighlighteddisabled
default соответствует состоянию, в котором кнопка является интерактивной, но пользователь на неё не нажимает.
highlighted - состояние, когда пользователь нажал на кнопку. Фоновый цвет кнопки меняется. Когда пользователь убирает палец с кнопки, она переходит в состояние default.
Состояние disabled соответствует тому, при котором кнопка является неинтерактивной. Любые взаимодействия пользователя с ней не приводят к изменениям в её отображении.
Состояние default, кнопка активна
Состояние default, кнопка активна
Состояние default, кнопка активна
Состояние highlighted, кнопка активна
Состояние disabled, кнопка неактивна
Поле secure содержит в себе три интерактивных элемента 1, 2, 3 и текстовый элемент result. Пользователь поочерёдно нажимает интерактивные элементы 1, 2, 3, а в result отображается вводимая последовательность в виде чисел, соответствующих нажимаемым элементам.
Поле secure может находиться в одном из трёх состояний:
defaulterrorsuccess
В состоянии default интерактивные элементы 1, 2, 3 активны, граница поля secure не отображается.
В состоянии error у поля secure отображается граница соответствующего цвета. Когда secure находится в состоянии error и пользователь начинает ввод последовательности, поле secure переходит в состояние default.
В состоянии success поле secure отображает границу соответствующего цвета.
Состояние default
Состояние success
Состояние error
Ух ты, ты здесь? 🤪 Удачи! 🙏
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent