Déplacer les boutons de connexion externe au-dessus de « Inscription simple » sur ma page d'inscription mobile

Soutien
, ,
1

J’essaie d’améliorer le flux d’inscription mobile pour https://physicswithethan.discourse.diy, où certains utilisateurs invités devraient idéalement utiliser une authentification externe plutôt que le formulaire local e-mail/mot de passe.

Actuellement, sur mobile, /signup affiche :

Inscription simple

E-mail
Nom d'utilisateur
Mot de passe

S'inscrire

OU

J'ai un compte Nottingham College
J'ai un compte Nova Education Trust

Le problème est que de nombreux élèves d’écoles ou d’établissements d’enseignement supérieur arrivent probablement directement sur /signup, par exemple via un code QR, une page d’invitation ou un lien partagé. Ils ne se rendent pas naturellement sur /login en premier.

Ainsi, bien que les boutons de connexion externe soient disponibles, la première chose qu’ils voient est le formulaire local « Inscription simple ». Dans ce cas, ce n’est pas la voie préférée. La voie préférée est qu’ils choisissent le bouton Microsoft/SSO institutionnel pertinent.

Ce que je souhaiterais sur mobile, c’est quelque chose de plus proche de :

J'ai un compte Nottingham College
J'ai un compte Nova Education Trust

OU

Inscription simple

E-mail
Nom d'utilisateur
Mot de passe

S'inscrire

Je comprends qu’il s’agit principalement d’un problème d’ordre visuel et qu’un composant de thème pourrait être le lieu approprié pour le gérer.

Une approche comme celle-ci serait-elle correcte ?

.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;
}

Mes questions sont :

  1. Existe-t-il une méthode prise en charge via un thème ou un composant pour placer les boutons d’authentification externe au-dessus du formulaire d’inscription local sur mobile ?
  2. Les sélecteurs pertinents sont-ils suffisamment stables pour un composant de thème, ou existe-t-il un meilleur point d’ancrage ou classe à cibler ?
  3. Existe-t-il une manière plus propre de rendre le SSO la voie visuellement préférée sur /signup, sans désactiver complètement l’inscription locale ?

Je suis particulièrement intéressé par le cas mobile, car les boutons d’authentification externe peuvent facilement apparaître en dessous de la zone visible, tandis que « Inscription simple » semble être l’action principale.