From 97a3c58f0f990bd813b4ba022d1d2b580c94b35d Mon Sep 17 00:00:00 2001
From: shiyu <im@shiyu.dev>
Date: Mon, 9 Feb 2026 12:46:46 +0800
Subject: [PATCH] feat: update SystemSettingsPage to remove AuthSettingsTab and
 enhance AppSettingsTab with registration settings

---
 .../SystemSettingsPage/SystemSettingsPage.tsx |  23 +---
 .../components/AppSettingsTab.tsx             |  91 +++++++++++++-
 .../components/AuthSettingsTab.tsx            | 112 ------------------
 3 files changed, 90 insertions(+), 136 deletions(-)
 delete mode 100644 web/src/pages/SystemSettingsPage/components/AuthSettingsTab.tsx

diff --git a/web/src/pages/SystemSettingsPage/SystemSettingsPage.tsx b/web/src/pages/SystemSettingsPage/SystemSettingsPage.tsx
index 533e10c..9add5ab 100644
--- a/web/src/pages/SystemSettingsPage/SystemSettingsPage.tsx
+++ b/web/src/pages/SystemSettingsPage/SystemSettingsPage.tsx
@@ -2,21 +2,20 @@ import { Alert, message, Tabs, Space } from 'antd';
 import { useEffect, useState } from 'react';
 import PageCard from '../../components/PageCard';
 import { getAllConfig, setConfig } from '../../api/config';
-import { AppstoreOutlined, RobotOutlined, DatabaseOutlined, SkinOutlined, MailOutlined, CloudSyncOutlined, UserOutlined } from '@ant-design/icons';
+import { AppstoreOutlined, RobotOutlined, DatabaseOutlined, SkinOutlined, MailOutlined, CloudSyncOutlined } from '@ant-design/icons';
 import { useTheme } from '../../contexts/ThemeContext';
 import '../../styles/settings-tabs.css';
 import { useI18n } from '../../i18n';
 import AppearanceSettingsTab from './components/AppearanceSettingsTab';
 import AppSettingsTab from './components/AppSettingsTab';
-import AuthSettingsTab from './components/AuthSettingsTab';
 import AiSettingsTab from './components/AiSettingsTab';
 import VectorDbSettingsTab from './components/VectorDbSettingsTab';
 import EmailSettingsTab from './components/EmailSettingsTab';
 import ProtocolMappingsTab from './components/ProtocolMappingsTab';
 
-type TabKey = 'appearance' | 'app' | 'auth' | 'email' | 'ai' | 'vector-db' | 'mappings';
+type TabKey = 'appearance' | 'app' | 'email' | 'ai' | 'vector-db' | 'mappings';
 
-const TAB_KEYS: TabKey[] = ['appearance', 'app', 'auth', 'email', 'ai', 'vector-db', 'mappings'];
+const TAB_KEYS: TabKey[] = ['appearance', 'app', 'email', 'ai', 'vector-db', 'mappings'];
 const DEFAULT_TAB: TabKey = 'appearance';
 
 const isValidTab = (key?: string): key is TabKey => !!key && (TAB_KEYS as string[]).includes(key);
@@ -169,22 +168,6 @@ export default function SystemSettingsPage({ tabKey, onTabNavigate }: SystemSett
                 />
               ),
             },
-            {
-              key: 'auth',
-              label: (
-                <span>
-                  <UserOutlined style={{ marginRight: 8 }} />
-                  {t('Registration Settings')}
-                </span>
-              ),
-              children: (
-                <AuthSettingsTab
-                  config={config}
-                  loading={loading}
-                  onSave={handleSave}
-                />
-              ),
-            },
             {
               key: 'email',
               label: (
diff --git a/web/src/pages/SystemSettingsPage/components/AppSettingsTab.tsx b/web/src/pages/SystemSettingsPage/components/AppSettingsTab.tsx
index a0609ff..221ac14 100644
--- a/web/src/pages/SystemSettingsPage/components/AppSettingsTab.tsx
+++ b/web/src/pages/SystemSettingsPage/components/AppSettingsTab.tsx
@@ -1,4 +1,6 @@
-import { Form, Input, Button } from 'antd';
+import { Alert, Button, Divider, Form, Input, Select, Switch, message } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import { rolesApi, type RoleInfo } from '../../../api/roles';
 import { useI18n } from '../../../i18n';
 
 interface AppConfigKey {
@@ -21,14 +23,56 @@ export default function AppSettingsTab({
   configKeys,
 }: AppSettingsTabProps) {
   const { t } = useI18n();
+  const [rolesLoading, setRolesLoading] = useState(false);
+  const [roles, setRoles] = useState<RoleInfo[]>([]);
+
+  useEffect(() => {
+    let mounted = true;
+    async function loadRoles() {
+      setRolesLoading(true);
+      try {
+        const list = await rolesApi.list();
+        if (!mounted) return;
+        setRoles(list);
+      } catch (e: any) {
+        message.error(e.message || t('Load failed'));
+      } finally {
+        if (mounted) setRolesLoading(false);
+      }
+    }
+    loadRoles();
+    return () => {
+      mounted = false;
+    };
+  }, [t]);
+
+  const initialValues = useMemo(() => {
+    const allowRegister = (config.AUTH_ALLOW_REGISTER || '').trim().toLowerCase() === 'true';
+    const roleIdRaw = (config.AUTH_DEFAULT_REGISTER_ROLE_ID || '').trim();
+    const roleId = roleIdRaw ? Number(roleIdRaw) : undefined;
+    return {
+      ...Object.fromEntries(configKeys.map(({ key, default: def }) => [key, config[key] ?? def ?? ''])),
+      AUTH_ALLOW_REGISTER: allowRegister,
+      AUTH_DEFAULT_REGISTER_ROLE_ID: Number.isFinite(roleId) ? roleId : undefined,
+    };
+  }, [config, configKeys]);
 
   return (
     <Form
       layout="vertical"
-      initialValues={{
-        ...Object.fromEntries(configKeys.map(({ key, default: def }) => [key, config[key] ?? def ?? ''])),
+      initialValues={initialValues}
+      onFinish={async (vals) => {
+        const payload: Record<string, unknown> = {};
+        for (const { key } of configKeys) {
+          payload[key] = vals[key];
+        }
+        const allow = !!vals.AUTH_ALLOW_REGISTER;
+        payload.AUTH_ALLOW_REGISTER = allow ? 'true' : 'false';
+        if (allow) {
+          payload.AUTH_DEFAULT_REGISTER_ROLE_ID = String(vals.AUTH_DEFAULT_REGISTER_ROLE_ID);
+        }
+        await onSave(payload);
       }}
-      onFinish={onSave}
       style={{ marginTop: 24 }}
       key={JSON.stringify(config)}
     >
@@ -37,6 +81,45 @@ export default function AppSettingsTab({
           <Input size="large" />
         </Form.Item>
       ))}
+
+      <Divider orientation="left">{t('Registration Settings')}</Divider>
+
+      <Alert
+        type="info"
+        showIcon
+        message={t('Enabling registration allows new users to sign up and assigns them the default role')}
+        style={{ marginBottom: 16 }}
+      />
+
+      <Form.Item
+        name="AUTH_ALLOW_REGISTER"
+        label={t('Enable Registration')}
+        valuePropName="checked"
+      >
+        <Switch />
+      </Form.Item>
+
+      <Form.Item dependencies={['AUTH_ALLOW_REGISTER']} noStyle>
+        {({ getFieldValue }) => {
+          const enabled = !!getFieldValue('AUTH_ALLOW_REGISTER');
+          return (
+            <Form.Item
+              name="AUTH_DEFAULT_REGISTER_ROLE_ID"
+              label={t('Default Role for New Registrations')}
+              rules={enabled ? [{ required: true, message: t('Please select default role') }] : []}
+            >
+              <Select
+                size="large"
+                loading={rolesLoading}
+                disabled={!enabled || rolesLoading}
+                placeholder={t('Select roles')}
+                options={roles.map((r) => ({ value: r.id, label: r.name }))}
+              />
+            </Form.Item>
+          );
+        }}
+      </Form.Item>
+
       <Form.Item>
         <Button type="primary" htmlType="submit" loading={loading} block>
           {t('Save')}
diff --git a/web/src/pages/SystemSettingsPage/components/AuthSettingsTab.tsx b/web/src/pages/SystemSettingsPage/components/AuthSettingsTab.tsx
deleted file mode 100644
index 4fd63c9..0000000
--- a/web/src/pages/SystemSettingsPage/components/AuthSettingsTab.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { Alert, Button, Form, Select, Switch, message } from 'antd';
-import { useEffect, useMemo, useState } from 'react';
-import { rolesApi, type RoleInfo } from '../../../api/roles';
-import { useI18n } from '../../../i18n';
-
-interface AuthSettingsTabProps {
-  config: Record<string, string>;
-  loading: boolean;
-  onSave: (values: Record<string, unknown>) => Promise<void>;
-}
-
-export default function AuthSettingsTab({
-  config,
-  loading,
-  onSave,
-}: AuthSettingsTabProps) {
-  const { t } = useI18n();
-  const [rolesLoading, setRolesLoading] = useState(false);
-  const [roles, setRoles] = useState<RoleInfo[]>([]);
-
-  useEffect(() => {
-    let mounted = true;
-    async function loadRoles() {
-      setRolesLoading(true);
-      try {
-        const list = await rolesApi.list();
-        if (!mounted) return;
-        setRoles(list);
-      } catch (e: any) {
-        message.error(e.message || t('Load failed'));
-      } finally {
-        if (mounted) setRolesLoading(false);
-      }
-    }
-    loadRoles();
-    return () => {
-      mounted = false;
-    };
-  }, [t]);
-
-  const initialValues = useMemo(() => {
-    const allowRegister = (config.AUTH_ALLOW_REGISTER || '').trim().toLowerCase() === 'true';
-    const roleIdRaw = (config.AUTH_DEFAULT_REGISTER_ROLE_ID || '').trim();
-    const roleId = roleIdRaw ? Number(roleIdRaw) : undefined;
-    return {
-      AUTH_ALLOW_REGISTER: allowRegister,
-      AUTH_DEFAULT_REGISTER_ROLE_ID: Number.isFinite(roleId) ? roleId : undefined,
-    };
-  }, [config]);
-
-  return (
-    <Form
-      layout="vertical"
-      initialValues={initialValues}
-      onFinish={async (vals) => {
-        const allow = !!vals.AUTH_ALLOW_REGISTER;
-        const payload: Record<string, unknown> = {
-          AUTH_ALLOW_REGISTER: allow ? 'true' : 'false',
-        };
-        if (allow) {
-          payload.AUTH_DEFAULT_REGISTER_ROLE_ID = String(vals.AUTH_DEFAULT_REGISTER_ROLE_ID);
-        }
-        await onSave(payload);
-      }}
-      style={{ marginTop: 24 }}
-      key={'auth-settings-' + (config.AUTH_ALLOW_REGISTER ?? '') + '-' + (config.AUTH_DEFAULT_REGISTER_ROLE_ID ?? '')}
-    >
-      <Alert
-        type="info"
-        showIcon
-        message={t('Enabling registration allows new users to sign up and assigns them the default role')}
-        style={{ marginBottom: 16 }}
-      />
-
-      <Form.Item
-        name="AUTH_ALLOW_REGISTER"
-        label={t('Enable Registration')}
-        valuePropName="checked"
-      >
-        <Switch />
-      </Form.Item>
-
-      <Form.Item dependencies={['AUTH_ALLOW_REGISTER']} noStyle>
-        {({ getFieldValue }) => {
-          const enabled = !!getFieldValue('AUTH_ALLOW_REGISTER');
-          return (
-            <Form.Item
-              name="AUTH_DEFAULT_REGISTER_ROLE_ID"
-              label={t('Default Role for New Registrations')}
-              rules={enabled ? [{ required: true, message: t('Please select default role') }] : []}
-            >
-              <Select
-                size="large"
-                loading={rolesLoading}
-                disabled={!enabled || rolesLoading}
-                placeholder={t('Select roles')}
-                options={roles.map((r) => ({ value: r.id, label: r.name }))}
-              />
-            </Form.Item>
-          );
-        }}
-      </Form.Item>
-
-      <Form.Item>
-        <Button type="primary" htmlType="submit" loading={loading} block>
-          {t('Save')}
-        </Button>
-      </Form.Item>
-    </Form>
-  );
-}
-