모바일 가입 페이지에서 '간단한 가입' 위에 외부 로그인 버튼을 배치해 주세요

지원
, ,
1

https://physicswithethan.discourse.diy의 모바일 가입 플로우를 개선하려고 합니다. 초대받은 일부 사용자는 로컬 이메일/비밀번호 양식 대신 외부 인증을 사용하는 것이 이상적입니다.

현재 모바일에서 /signup 페이지는 다음과 같이 표시됩니다:

Simple Sign Up

Email
Username
Password

Sign Up

OR

I have a Nottingham College account
I have a Nova Education Trust account

문제는 많은 학교/대학 학생들이 QR 코드, 초대 페이지 또는 공유 링크를 통해 /signup으로 직접 접속할 가능성이 높다는 점입니다. 그들은 자연스럽게 /login으로 먼저 이동하지 않을 수 있습니다.

따라서 외부 로그인 버튼은 사용 가능하지만, 사용자가 처음 보는 것은 로컬 “Simple Sign Up” 양식입니다. 이 경우 이는 선호되지 않는 경로입니다. 선호되는 경로는 사용자가 해당 기관의 Microsoft/SSO 버튼을 선택하는 것입니다.

모바일에서 제가 원하는 것은 다음과 더 유사한 것입니다:

I have a Nottingham College account
I have a Nova Education Trust account

OR

Simple Sign Up

Email
Username
Password

Sign Up

이것이 주로 시각적 순서 문제이며, 테마 구성 요소가 이를 처리하기에 적절한 장소일 수 있다는 것을 이해하고 있습니다.

다음과 같은 것이 올바른 접근 방식일까요?

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

제 질문은 다음과 같습니다:

  1. 모바일에서 외부 인증 버튼을 로컬 가입 양식 위로 이동시키기 위한 지원되는 테마/구성 요소 방식이 있습니까?
  2. 관련 셀렉터는 테마 구성 요소에 대해 충분히 안정적입니까, 아니면 더 나은 훅/클래스를 표적으로 삼아야 합니까?
  3. 로컬 가입을 완전히 비활성화하지 않고 /signup에서 SSO를 시각적으로 선호되는 경로로 만드는 더 깔끔한 방법이 있습니까?

특히 모바일 케이스에 관심이 많습니다. 외부 인증 버튼은 쉽게 화면 아래(폴드 아래)에 표시될 수 있는 반면, "Simple Sign Up"은 주요 동작처럼 보이기 때문입니다.