From 5fa9966a4e6f613f17d524ccebbade85ff66540c Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Wed, 4 Jun 2025 08:34:52 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Refactor:=20Conditionally=20render?=
 =?UTF-8?q?=20OAuth=20options=20in=20login=20and=20registration=20forms?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 web/src/components/auth/LoginForm.js          | 38 +++++++++++--------
 .../components/auth/PasswordResetConfirm.js   |  2 +-
 web/src/components/auth/PasswordResetForm.js  |  2 +-
 web/src/components/auth/RegisterForm.js       | 36 ++++++++++--------
 4 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/web/src/components/auth/LoginForm.js b/web/src/components/auth/LoginForm.js
index ec28dba8..1e92b5ff 100644
--- 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'>
-                {t('或')}
-              </Divider>
+              {(status.github_oauth || status.oidc_enabled || status.wechat_login || status.linuxdo_oauth || status.telegram_oauth) && (
+                <>
+                  <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 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-6 text-center text-sm">
+                <Text>{t('没有账户？')} <Link to="/register" className="text-blue-600 hover:text-blue-800 font-medium">{t('注册')}</Link></Text>
               </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"
diff --git a/web/src/components/auth/PasswordResetConfirm.js b/web/src/components/auth/PasswordResetConfirm.js
index 6e9086a9..dc69ccdc 100644
--- 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"
diff --git a/web/src/components/auth/PasswordResetForm.js b/web/src/components/auth/PasswordResetForm.js
index 8431cee8..6abdfaa5 100644
--- 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"
diff --git a/web/src/components/auth/RegisterForm.js b/web/src/components/auth/RegisterForm.js
index e224cb99..7bc171c6 100644
--- 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'>
-                {t('或')}
-              </Divider>
+              {(status.github_oauth || status.oidc_enabled || status.wechat_login || status.linuxdo_oauth || status.telegram_oauth) && (
+                <>
+                  <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={handleOtherRegisterOptionsClick}
-                  loading={otherRegisterOptionsLoading}
-                >
-                  {t('其他注册选项')}
-                </Button>
-              </div>
+                  <div className="mt-4 text-center">
+                    <Button
+                      theme="outline"
+                      type="tertiary"
+                      className="w-full !rounded-full"
+                      size="large"
+                      onClick={handleOtherRegisterOptionsClick}
+                      loading={otherRegisterOptionsLoading}
+                    >
+                      {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={{