Разработка экрана авторизации по логину и паролю
Экран логина — первое, что видит пользователь после установки. И один из немногих экранов, где техническая реализация напрямую влияет на конверсию: неправильный тип клавиатуры, отсутствующий autofill, кнопка «Войти» под клавиатурой — и часть пользователей просто уходит.
Что чаще всего сделано неправильно
Поле пароля без secureTextEntry (iOS) или inputType="textPassword" (Android) — пароль виден в открытом виде. Это встречается реже, чем кажется, но встречается.
Клавиатура для email-поля без keyboardType = .emailAddress на iOS — пользователь не видит @ на первом экране клавиатуры. Мелочь, но раздражает.
Кнопка «Войти» перекрыта системной клавиатурой без реализации KeyboardAvoidingView (React Native) или adjustResize / WindowInsets (Android). Пользователь заполнил поля, не видит кнопку, не понимает что делать.
Отсутствие Password AutoFill. На iOS это textContentType = .password для поля пароля и textContentType = .username для логина — тогда iOS предложит сохранённый пароль из Keychain. На Android — атрибуты autofillHints с AUTOFILL_HINT_USERNAME и AUTOFILL_HINT_PASSWORD. Без этого пользователи с менеджерами паролей испытывают трудности.
Как реализуем
На iOS (Swift/UIKit): UITextField с textContentType, autocorrectionType = .no, autocapitalizationType = .none для поля логина. Кнопка «Войти» в inputAccessoryView — она всегда видна над клавиатурой, независимо от высоты экрана.
На iOS (SwiftUI): SecureField для пароля, .textContentType(.emailAddress) и .keyboardType(.emailAddress) модификаторы. .submitLabel(.next) на поле логина переводит фокус на пароль, .submitLabel(.go) на пароле сабмитит форму.
На Android (Kotlin/Compose): OutlinedTextField с keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email, imeAction = ImeAction.Next) для логина. Для пароля — visualTransformation = PasswordVisualTransformation(), иконка видимости реализована через trailingIcon с переключением трансформации.
React Native: TextInput с autoComplete="email", keyboardType="email-address", textContentType="emailAddress" для поля логина (да, три разных атрибута под три платформы). Пароль: secureTextEntry={!visible} с управляемым состоянием иконки глаза.
Валидация — на клиенте перед отправкой. Email regex не должен быть строгим: /.+@.+\..+/ достаточно. Пустое поле — не regex ошибка, а просто «Введите email». Минимальная длина пароля — проверяется локально, но реальные правила парольной политики диктует сервер.
Запросы на авторизацию идут только по HTTPS, credentials не пишутся в логи. После успешного входа — токен в Keychain (iOS) / EncryptedSharedPreferences (Android), не в UserDefaults/SharedPreferences в открытом виде.
Сроки: 3-7 рабочих дней с учётом UX-дизайна экрана, реализации под нужные платформы и базового покрытия UI-тестами.