github/new-api
1
0
Fork 0
mirror of https://github.com/QuantumNous/new-api.git synced 2026-04-19 16:08:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

imporve oauth provider UI/UX (#2983)

Browse Source 
* feat: imporve UI/UX

* fix: stabilize provider enabled toggle and polish custom OAuth settings UX

* fix: add access policy/message templates and persist advanced fields reliably

* fix: move template fill actions below fields and keep advanced form flow cleaner
This commit is contained in:
Seefs
2026-02-22 15:41:29 +08:00
committed by GitHub
parent dbc3236245
commit e0a6ee1cb8
12 changed files with 1375 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/src/components/auth/LoginForm.jsx
View File

@@ -29,6 +29,7 @@ import {
showSuccess,
updateAPI,
getSystemName,
getOAuthProviderIcon,
setUserData,
onGitHubOAuthClicked,
onDiscordOAuthClicked,
@@ -130,6 +131,17 @@ const LoginForm = () => {
return {};
}
}, [statusState?.status]);
const hasCustomOAuthProviders =
(status.custom_oauth_providers || []).length > 0;
const hasOAuthLoginOptions = Boolean(
status.github_oauth ||
status.discord_oauth ||
status.oidc_enabled ||
status.wechat_login ||
status.linuxdo_oauth ||
status.telegram_oauth ||
hasCustomOAuthProviders,
);
useEffect(() => {
if (status?.turnstile_check) {
@@ -598,7 +610,7 @@ const LoginForm = () => {
theme='outline'
className='w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors'
type='tertiary'
icon={<IconLock size='large' />}
icon={getOAuthProviderIcon(provider.icon || '', 20)}
onClick={() => handleCustomOAuthClick(provider)}
loading={customOAuthLoading[provider.slug]}
>
@@ -817,12 +829,7 @@ const LoginForm = () => {
</div>
</Form>
{(status.github_oauth ||
status.discord_oauth ||
status.oidc_enabled ||
status.wechat_login ||
status.linuxdo_oauth ||
status.telegram_oauth) && (
{hasOAuthLoginOptions && (
<>
<Divider margin='12px' align='center'>
{t('或')}
@@ -952,14 +959,7 @@ const LoginForm = () => {
/>
<div className='w-full max-w-sm mt-[60px]'>
{showEmailLogin ||
!(
status.github_oauth ||
status.discord_oauth ||
status.oidc_enabled ||
status.wechat_login ||
status.linuxdo_oauth ||
status.telegram_oauth
)
!hasOAuthLoginOptions
? renderEmailLoginForm()
: renderOAuthOptions()}
{renderWeChatLoginModal()}