oadmin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Apple\Apple
2025-06-04 08:34:52 +08:00
parent ce88b75f61
commit 5fa9966a4e
4 changed files with 45 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
web/src/components/auth/LoginForm.js
View File

@@ -442,21 +442,29 @@ const LoginForm = () => {
</div> </div>
</Form> </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"> <div className="mt-4 text-center">
<Button <Button
theme="outline" theme="outline"
type="tertiary" type="tertiary"
className="w-full !rounded-full" className="w-full !rounded-full"
size="large" size="large"
onClick={handleOtherLoginOptionsClick} onClick={handleOtherLoginOptionsClick}
loading={otherLoginOptionsLoading} loading={otherLoginOptionsLoading}
> >
{t('其他登录选项')} {t('其他登录选项')}
</Button> </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>
</div> </div>
</Card> </Card>
@@ -503,7 +511,7 @@ const LoginForm = () => {
}; };
return ( 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 <div
className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100" className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100"

2
web/src/components/auth/PasswordResetConfirm.js
View File

@@ -69,7 +69,7 @@ const PasswordResetConfirm = () => {
} }
return ( 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 <div
className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100" className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100"

2
web/src/components/auth/PasswordResetForm.js
View File

@@ -76,7 +76,7 @@ const PasswordResetForm = () => {
} }
return ( 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 <div
className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100" className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100"

36
web/src/components/auth/RegisterForm.js
View File

@@ -485,22 +485,26 @@ const RegisterForm = () => {
</div> </div>
</Form> </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"> <div className="mt-4 text-center">
<Button <Button
theme="outline" theme="outline"
type="tertiary" type="tertiary"
className="w-full !rounded-full" className="w-full !rounded-full"
size="large" size="large"
onClick={handleOtherRegisterOptionsClick} onClick={handleOtherRegisterOptionsClick}
loading={otherRegisterOptionsLoading} loading={otherRegisterOptionsLoading}
> >
{t('其他注册选项')} {t('其他注册选项')}
</Button> </Button>
</div> </div>
</>
)}
<div className="mt-6 text-center text-sm"> <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> <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 ( 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 <div
className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100" className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100"
style={{ style={{