Я пытаюсь улучшить процесс регистрации на мобильных устройствах для https://physicswithethan.discourse.diy, где некоторым приглашенным пользователям ideally следует использовать внешнюю аутентификацию, а не локальную форму с email и паролем.
В данный момент на мобильных устройствах страница /signup отображает:
Простая регистрация
Email
Имя пользователя
Пароль
Зарегистрироваться
ИЛИ
У меня есть аккаунт Nottingham College
У меня есть аккаунт Nova Education Trust
Проблема в том, что многие школьники и студенты, скорее всего, попадут напрямую на /signup, например, через QR-код, страницу приглашения или общую ссылку. Они могут не перейти сначала на /login.
Таким образом, хотя кнопки внешнего входа доступны, первое, что видят пользователи, — это локальная форма «Простая регистрация». В данном случае это не предпочтительный путь. Предпочтительный вариант — чтобы они выбрали соответствующую кнопку Microsoft/SSO своего учебного заведения.
На мобильных устройствах я хотел бы видеть что-то похожее на:
У меня есть аккаунт Nottingham College
У меня есть аккаунт Nova Education Trust
ИЛИ
Простая регистрация
Email
Имя пользователя
Пароль
Зарегистрироваться
Я понимаю, что это в основном вопрос визуального порядка, и, возможно, для этого лучше всего подойдет компонент темы.
Будет ли такой подход правильным?
.signup-page .signup-body {
display: flex;
flex-direction: column;
}
.signup-page .login-right-side {
order: -3;
margin-bottom: 1rem;
}
.signup-page .login-or-separator {
order: -2;
margin: 1rem 0;
}
Мои вопросы:
- Существует ли поддерживаемый способ через тему/компонент, чтобы переместить кнопки внешней аутентификации выше локальной формы регистрации на мобильных устройствах?
- Достаточно ли стабильны соответствующие селекторы для использования в компоненте темы, или есть более подходящий хук/класс для таргетинга?
- Есть ли более чистый способ сделать SSO визуально предпочтительным путем на /signup, не отключая полностью локальную регистрацию?
Меня особенно интересует случай с мобильными устройствами, поскольку кнопки внешней аутентификации могут легко оказаться ниже видимой области экрана, в то время как «Простая регистрация» выглядит как основное действие.