Ich versuche, den Anmeldeprozess für Mobilgeräte unter https://physicswithethan.discourse.diy zu verbessern, wobei einige eingeladene Benutzer idealerweise eine externe Authentifizierung anstelle des lokalen Formulars für E-Mail/Passwort nutzen sollten.
Derzeit zeigt /signup auf Mobilgeräten Folgendes an:
Einfache Anmeldung
E-Mail
Benutzername
Passwort
Anmelden
ODER
Ich habe ein Konto bei Nottingham College
Ich habe ein Konto bei Nova Education Trust
Das Problem ist, dass viele Schüler oder Studenten möglicherweise direkt über /signup gelangen, beispielsweise über einen QR-Code, eine Einladungsseite oder einen geteilten Link. Sie gehen möglicherweise nicht zunächst zu /login.
Obwohl die externen Anmeldebuttons verfügbar sind, sehen sie als Erstes das lokale Formular „Einfache Anmeldung“. In diesem Fall ist dies jedoch nicht der bevorzugte Weg. Der bevorzugte Weg besteht darin, dass sie den entsprechenden institutionellen Microsoft-/SSO-Button wählen.
Was ich auf Mobilgeräten möchte, ist etwas Ähnliches wie:
Ich habe ein Konto bei Nottingham College
Ich habe ein Konto bei Nova Education Trust
ODER
Einfache Anmeldung
E-Mail
Benutzername
Passwort
Anmelden
Ich verstehe, dass dies hauptsächlich eine Frage der visuellen Reihenfolge ist und dass ein Theme-Komponente der richtige Ort sein könnte, um dies zu handhaben.
Wäre so etwas der richtige Ansatz?
.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;
}
Meine Fragen sind:
- Gibt es eine unterstützte Theme-/Komponenten-Methode, um die externen Authentifizierungs-Buttons auf Mobilgeräten über das lokale Anmeldeformular zu verschieben?
- Sind die relevanten Selektoren stabil genug für eine Theme-Komponente, oder gibt es einen besseren Hook/eine bessere Klasse, die man ansprechen kann?
- Gibt es einen saubereren Weg, SSO auf /signup visuell als bevorzugten Pfad zu kennzeichnen, ohne die lokale Anmeldung vollständig zu deaktivieren?
Besonders interessiert mich der Fall auf Mobilgeräten, da die externen Authentifizierungs-Buttons leicht unterhalb des sichtbaren Bereichs erscheinen können, während „Einfache Anmeldung“ wie die primäre Aktion wirkt.