https://physicswithethan.discourse.diy のモバイル向けサインアップフローを改善しようとしています。招待されたユーザーの中には、ローカルのメール/パスワードフォームではなく、外部認証を利用する方が望ましいケースがあります。
現状、モバイル環境では /signup にアクセスすると以下のような表示になります。
シンプルなサインアップ
メール
ユーザー名
パスワード
サインアップ
または
ノッティンガム・カレッジのアカウントをお持ちの方
ノヴァ・エデュケーション・トラストのアカウントをお持ちの方
問題点は、多くの学校やカレッジの生徒が、QR コード、招待ページ、共有リンクなどから直接 /signup にアクセスする可能性があることです。彼らはまず /login に移動するとは限りません。
そのため、外部ログインボタンが存在していても、最初に目にするのはローカルの「シンプルなサインアップ」フォームです。この場合、それは望ましい手順ではありません。望ましいのは、関連する機関の Microsoft/SSO ボタンを選択することです。
モバイル環境では、以下のような表示にしたいと考えています。
ノッティンガム・カレッジのアカウントをお持ちの方
ノヴァ・エデュケーション・トラストのアカウントをお持ちの方
または
シンプルなサインアップ
メール
ユーザー名
パスワード
サインアップ
これは主に視覚的な順序の問題であり、テーマコンポーネントで対応するのが適切だと理解しています。
このようなアプローチは正しいでしょうか？
.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;
}
質問は以下の通りです。
- モバイル環境で、外部認証ボタンをローカルサインアップフォームの上に移動させる、サポートされているテーマ/コンポーネントの方法はありますか？
- 関連するセレクタはテーマコンポーネントで使用するのに安定していますか？それとも、ターゲットとするべきより適切なフックやクラスはありますか？
- ローカルサインアップを完全に無効化することなく、/signup 上で SSO を視覚的に優先されるパスにする、よりクリーンな方法はありますか？
特にモバイルケースに関心があります。外部認証ボタンが折りたたみ以下（スクロールしないと見えない位置）に表示されやすく、「シンプルなサインアップ」が主要なアクションのように見えるためです。