Estou tentando melhorar o fluxo de cadastro no mobile para https://physicswithethan.discourse.diy, onde alguns usuários convidados deveriam, idealmente, usar autenticação externa em vez do formulário local de e-mail/senha.
No momento, no mobile, /signup exibe:
Cadastro Simples
E-mail
Nome de usuário
Senha
Cadastrar
OU
Tenho uma conta do Nottingham College
Tenho uma conta do Nova Education Trust
O problema é que muitos estudantes de escolas ou faculdades provavelmente chegarão diretamente a /signup, por exemplo, a partir de um código QR, página de convite ou link compartilhado. Eles podem não ir naturalmente a /login primeiro.
Portanto, embora os botões de login externo estejam disponíveis, a primeira coisa que veem é o formulário local de “Cadastro Simples”. Neste caso, essa não é a rota preferida. A rota preferida é que eles escolham o botão institucional relevante do Microsoft/SSO.
O que eu gostaria no mobile é algo mais próximo de:
Tenho uma conta do Nottingham College
Tenho uma conta do Nova Education Trust
OU
Cadastro Simples
E-mail
Nome de usuário
Senha
Cadastrar
Entendo que isso seja principalmente uma questão de ordem visual e que um componente de tema pode ser o lugar certo para lidar com isso.
Seria algo assim a abordagem correta?
.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;
}
Minhas perguntas são:
- Existe uma maneira suportada de tema/componente para mover os botões de autenticação externa acima do formulário de cadastro local no mobile?
- Os seletores relevantes são estáveis o suficiente para um componente de tema, ou existe um hook/classe melhor para mirar?
- Existe uma maneira mais limpa de fazer do SSO o caminho visualmente preferido em /signup, sem desabilitar completamente o cadastro local?
Estou especialmente interessado no caso do mobile, porque os botões de autenticação externa podem facilmente aparecer abaixo da dobra, enquanto “Cadastro Simples” parece ser a ação principal.