✨ Refactor: Conditionally render OAuth options in login and registration forms

This commit refactors the login and registration forms to enhance user experience by conditionally displaying OAuth-related UI elements. - In `LoginForm.js` and `RegisterForm.js`: - The "Other login/registration options" button and the "or" divider are now only displayed if at least one OAuth provider is enabled in the system settings. - This change ensures a cleaner interface when no OAuth options are configured, preventing user confusion. - In `RegisterForm.js`: - Changed `div` class from `relative` to `min-h-screen relative` to ensure the registration form an take up the entire screen height.

✨ Refactor: Conditionally render OAuth options in login and registration forms
This commit refactors the login and registration forms to enhance user experience by conditionally displaying OAuth-related UI elements. - In `LoginForm.js` and `RegisterForm.js`: - The "Other login/registration options" button and the "or" divider are now only displayed if at least one OAuth provider is enabled in the system settings. - This change ensures a cleaner interface when no OAuth options are configured, preventing user confusion. - In `RegisterForm.js`: - Changed `div` class from `relative` to `min-h-screen relative` to ensure the registration form an take up the entire screen height.
80d43b00 · Apple\Apple · 618ed976 · 80d43b00 · 80d43b00 · 80d43b00
Commit 80d43b00 authored Jun 04, 2025 by $Apple\Apple's avatar$ Apple\Apple
Showing with 46 additions and 34 deletions

web/src/components/auth/LoginForm.js
+23 -15

web/src/components/auth/PasswordResetConfirm.js
+1 -1

web/src/components/auth/PasswordResetForm.js
+1 -1

web/src/components/auth/RegisterForm.js
+21 -17

No files found.
--- a/web/src/components/auth/LoginForm.js
+++ b/web/src/components/auth/LoginForm.js
@@ -442,21 +442,29 @@ const LoginForm = () => {
                </div>
              </Form>
-              <Divider margin='12px' align='center'>
+              {(status.github_oauth || status.oidc_enabled || status.wechat_login || status.linuxdo_oauth || status.telegram_oauth) && (
-                {t('或')}
+                <>
-              </Divider>
+                  <Divider margin='12px' align='center'>
+                    {t('或')}
+                  </Divider>
+                  <div className="mt-4 text-center">
+                    <Button
+                      theme="outline"
+                      type="tertiary"
+                      className="w-full !rounded-full"
+                      size="large"
+                      onClick={handleOtherLoginOptionsClick}
+                      loading={otherLoginOptionsLoading}
+                    >
+                      {t('其他登录选项')}
+                    </Button>
+                  </div>
+                </>
+              )}
-              <div className="mt-4 text-center">
+              <div className="mt-6 text-center text-sm">
-                <Button
+                <Text>{t('没有账户？')} <Link to="/register" className="text-blue-600 hover:text-blue-800 font-medium">{t('注册')}</Link></Text>
-                  theme="outline"
-                  type="tertiary"
-                  className="w-full !rounded-full"
-                  size="large"
-                  onClick={handleOtherLoginOptionsClick}
-                  loading={otherLoginOptionsLoading}
-                >
-                  {t('其他登录选项')}
-                </Button>
              </div>
            </div>
          </Card>
@@ -503,7 +511,7 @@ const LoginForm = () => {
  };
  return (
-    <div className="relative flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
+    <div className="min-h-screen relative flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
      {/* 背景图片容器 - 放大并保持居中 */}
      <div
        className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100"

--- a/web/src/components/auth/PasswordResetConfirm.js
+++ b/web/src/components/auth/PasswordResetConfirm.js
@@ -69,7 +69,7 @@ const PasswordResetConfirm = () => {
  }
  return (
-    <div className="relative flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
+    <div className="min-h-screen relative flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
      {/* 背景图片容器 - 放大并保持居中 */}
      <div
        className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100"

--- a/web/src/components/auth/PasswordResetForm.js
+++ b/web/src/components/auth/PasswordResetForm.js
@@ -76,7 +76,7 @@ const PasswordResetForm = () => {
  }
  return (
-    <div className="relative flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
+    <div className="min-h-screen relative flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
      {/* 背景图片容器 - 放大并保持居中 */}
      <div
        className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100"

--- a/web/src/components/auth/RegisterForm.js
+++ b/web/src/components/auth/RegisterForm.js
@@ -485,22 +485,26 @@ const RegisterForm = () => {
                </div>
              </Form>
-              <Divider margin='12px' align='center'>
+              {(status.github_oauth || status.oidc_enabled || status.wechat_login || status.linuxdo_oauth || status.telegram_oauth) && (
-                {t('或')}
+                <>
-              </Divider>
+                  <Divider margin='12px' align='center'>
+                    {t('或')}
-              <div className="mt-4 text-center">
+                  </Divider>
-                <Button
-                  theme="outline"
+                  <div className="mt-4 text-center">
-                  type="tertiary"
+                    <Button
-                  className="w-full !rounded-full"
+                      theme="outline"
-                  size="large"
+                      type="tertiary"
-                  onClick={handleOtherRegisterOptionsClick}
+                      className="w-full !rounded-full"
-                  loading={otherRegisterOptionsLoading}
+                      size="large"
-                >
+                      onClick={handleOtherRegisterOptionsClick}
-                  {t('其他注册选项')}
+                      loading={otherRegisterOptionsLoading}
-                </Button>
+                    >
-              </div>
+                      {t('其他注册选项')}
+                    </Button>
+                  </div>
+                </>
+              )}
              <div className="mt-6 text-center text-sm">
                <Text>{t('已有账户？')} <Link to="/login" className="text-blue-600 hover:text-blue-800 font-medium">{t('登录')}</Link></Text>
@@ -549,7 +553,7 @@ const RegisterForm = () => {
  };
  return (
-    <div className="relative flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
+    <div className="min-h-screen relative flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
      <div
        className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100"
        style={{