Розробка екрана авторизації по логіну та паролю
Екран логіну — перше, що бачить користувач після установки. І один з небагатьох екранів, де технічна реалізація впливає на конверсію: неправильний тип клавіатури, відсутній 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-тестами.