在我的移动端注册页面将外部登录按钮移至“简易注册”上方

支持
, ,
1

我正在尝试优化 https://physicswithethan.discourse.diy 的移动设备注册流程，理想情况下，部分受邀用户应使用外部认证，而非本地的邮箱/密码表单。

目前，在移动设备上访问 /signup 页面会显示：

简易注册

邮箱
用户名
密码

注册

或

我有诺丁汉学院账户
我有 Nova 教育信托账户

问题在于，许多中小学/学院学生可能直接从二维码、邀请页面或共享链接跳转到 /signup，而不会先访问 /login。

因此，尽管外部登录按钮已经存在，但用户首先看到的是本地“简易注册”表单。在这种情况下，这并不是首选路径。理想的做法是让他们直接选择相应的机构 Microsoft/SSO 按钮。

我希望在移动设备上看到类似以下的布局：

我有诺丁汉学院账户
我有 Nova 教育信托账户

或

简易注册

邮箱
用户名
密码

注册

我理解这主要是一个视觉顺序问题，可能通过主题组件来解决。

这样的做法是否正确？

.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. 相关的选择器是否足够稳定，适合在主题组件中使用？或者是否有更合适的钩子/类可以 targeting？
  3. 是否有更简洁的方式，使 SSO 成为 /signup 页面上的视觉首选路径，同时不彻底禁用本地注册？

我特别关注移动设备的情况，因为外部认证按钮很容易出现在首屏之外，而“简易注册”看起来像是主要操作。