t0ng7u b08febaa3c refactor: system settings UI for consistent, compact layouts
Redesign the system settings interface to align with the rest of the console experience by using fixed header actions, removing redundant subtitles, respecting global content width, and standardizing responsive form layouts.

Introduce reusable settings layout primitives for forms, switch rows, grouped controls, nested control sections, title status indicators, and page action portals. Replace duplicated card-style switch markup with explicit compact components, improve nested switch readability, and reduce visual noise across authentication, billing, content, integrations, maintenance, models, and request-limit settings.

Also complete missing i18n translations, remove obsolete subtitle translation keys, refine i18n sync reporting, fix sidebar truncation for long labels, and verify the frontend with type checking and lint diagnostics.
2026-05-25 00:34:26 +08:00

142 lines
5.4 KiB
TypeScript
Vendored

/*
Copyright (C) 2023-2026 QuantumNous
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import type { AuthSettings } from '../types'
import { createSectionRegistry } from '../utils/section-registry'
import { BasicAuthSection } from './basic-auth-section'
import { BotProtectionSection } from './bot-protection-section'
import { CustomOAuthSection } from './custom-oauth/custom-oauth-section'
import { OAuthSection } from './oauth-section'
import { PasskeySection } from './passkey-section'
const AUTH_SECTIONS = [
{
id: 'basic-auth',
titleKey: 'Basic Authentication',
build: (settings: AuthSettings) => (
<BasicAuthSection
defaultValues={{
PasswordLoginEnabled: settings.PasswordLoginEnabled,
PasswordRegisterEnabled: settings.PasswordRegisterEnabled,
EmailVerificationEnabled: settings.EmailVerificationEnabled,
RegisterEnabled: settings.RegisterEnabled,
EmailDomainRestrictionEnabled: settings.EmailDomainRestrictionEnabled,
EmailAliasRestrictionEnabled: settings.EmailAliasRestrictionEnabled,
EmailDomainWhitelist: settings.EmailDomainWhitelist,
}}
/>
),
},
{
id: 'oauth',
titleKey: 'OAuth Integrations',
build: (settings: AuthSettings) => (
<OAuthSection
defaultValues={{
GitHubOAuthEnabled: settings.GitHubOAuthEnabled,
GitHubClientId: settings.GitHubClientId,
GitHubClientSecret: settings.GitHubClientSecret,
'discord.enabled': settings['discord.enabled'],
'discord.client_id': settings['discord.client_id'],
'discord.client_secret': settings['discord.client_secret'],
'oidc.enabled': settings['oidc.enabled'],
'oidc.client_id': settings['oidc.client_id'],
'oidc.client_secret': settings['oidc.client_secret'],
'oidc.well_known': settings['oidc.well_known'],
'oidc.authorization_endpoint':
settings['oidc.authorization_endpoint'],
'oidc.token_endpoint': settings['oidc.token_endpoint'],
'oidc.user_info_endpoint': settings['oidc.user_info_endpoint'],
TelegramOAuthEnabled: settings.TelegramOAuthEnabled,
TelegramBotToken: settings.TelegramBotToken,
TelegramBotName: settings.TelegramBotName,
LinuxDOOAuthEnabled: settings.LinuxDOOAuthEnabled,
LinuxDOClientId: settings.LinuxDOClientId,
LinuxDOClientSecret: settings.LinuxDOClientSecret,
LinuxDOMinimumTrustLevel: settings.LinuxDOMinimumTrustLevel,
WeChatAuthEnabled: settings.WeChatAuthEnabled,
WeChatServerAddress: settings.WeChatServerAddress,
WeChatServerToken: settings.WeChatServerToken,
WeChatAccountQRCodeImageURL: settings.WeChatAccountQRCodeImageURL,
}}
/>
),
},
{
id: 'passkey',
titleKey: 'Passkey Authentication',
build: (settings: AuthSettings) => (
<PasskeySection
defaultValues={{
'passkey.enabled': settings['passkey.enabled'],
'passkey.rp_display_name': settings['passkey.rp_display_name'],
'passkey.rp_id': settings['passkey.rp_id'],
'passkey.origins': settings['passkey.origins'],
'passkey.allow_insecure_origin':
settings['passkey.allow_insecure_origin'],
'passkey.user_verification': settings['passkey.user_verification'] as
| 'required'
| 'preferred'
| 'discouraged',
'passkey.attachment_preference': (settings[
'passkey.attachment_preference'
] === ''
? 'none'
: settings['passkey.attachment_preference']) as
| 'none'
| 'platform'
| 'cross-platform',
}}
/>
),
},
{
id: 'bot-protection',
titleKey: 'Bot Protection',
build: (settings: AuthSettings) => (
<BotProtectionSection
defaultValues={{
TurnstileCheckEnabled: settings.TurnstileCheckEnabled,
TurnstileSiteKey: settings.TurnstileSiteKey,
TurnstileSecretKey: settings.TurnstileSecretKey,
}}
/>
),
},
{
id: 'custom-oauth',
titleKey: 'Custom OAuth',
build: () => <CustomOAuthSection />,
},
] as const
export type AuthSectionId = (typeof AUTH_SECTIONS)[number]['id']
const authRegistry = createSectionRegistry<AuthSectionId, AuthSettings>({
sections: AUTH_SECTIONS,
defaultSection: 'basic-auth',
basePath: '/system-settings/auth',
urlStyle: 'path',
})
export const AUTH_SECTION_IDS = authRegistry.sectionIds
export const AUTH_DEFAULT_SECTION = authRegistry.defaultSection
export const getAuthSectionNavItems = authRegistry.getSectionNavItems
export const getAuthSectionContent = authRegistry.getSectionContent
export const getAuthSectionMeta = authRegistry.getSectionMeta