Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-06-05 12:44:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

refactor(frontend): extract OutboundFormModal tls/reality security forms

Browse source 
Move the TLS and Reality field blocks into outbounds/security/{tls,reality}.tsx; the none/TLS/Reality Radio.Group selector stays in the modal. Drop now-unused ALPN_OPTIONS/UTLS_OPTIONS imports. OutboundFormModal.tsx down to ~918 lines (from 2238 originally). Verbatim relocation; outbound snapshots unchanged -> no behavior change. typecheck/lint/build green.
This commit is contained in:
MHSanaei 2026-05-30 18:09:33 +02:00
parent 543ede63aa
commit d40f6b9831
No known key found for this signature in database
GPG key ID: 7E4060F2FBE5AB7A
4 changed files with 105 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
frontend/src/pages/xray/outbounds/OutboundFormModal.tsx
View file

@ -46,13 +46,11 @@ import { antdRule } from '@/utils/zodForm';
import {
ADDRESS_PORT_STRATEGY_OPTIONS,
ALPN_OPTIONS,
FLOW_OPTIONS,
HYSTERIA_NETWORK_OPTION,
NETWORK_OPTIONS,
PROTOCOL_OPTIONS,
SERVER_PROTOCOLS,
UTLS_OPTIONS,
} from './outbound-form-constants';
import {
buildAddModeValues,
@ -82,6 +80,7 @@ import {
WsForm,
XhttpForm,
} from './transport';
import { RealityForm, TlsForm } from './security';
import './OutboundFormModal.css';
// Pattern A rewrite of OutboundFormModal. Built as a sibling `.new.tsx`
@ -603,91 +602,9 @@ export default function OutboundFormModal({
</Form.Item>
)}
{security === 'tls' && tlsAllowed && (
<>
<Form.Item
label="SNI"
name={['streamSettings', 'tlsSettings', 'serverName']}
>
<Input placeholder={t('pages.xray.outboundForm.serverNamePlaceholder')} />
</Form.Item>
<Form.Item
label="uTLS"
name={['streamSettings', 'tlsSettings', 'fingerprint']}
>
<Select
allowClear
placeholder={t('none')}
options={UTLS_OPTIONS}
/>
</Form.Item>
<Form.Item
label="ALPN"
name={['streamSettings', 'tlsSettings', 'alpn']}
>
<Select mode="multiple" options={ALPN_OPTIONS} />
</Form.Item>
<Form.Item
label="ECH"
name={['streamSettings', 'tlsSettings', 'echConfigList']}
>
<Input />
</Form.Item>
<Form.Item
label={t('pages.xray.outboundForm.verifyPeerName')}
name={['streamSettings', 'tlsSettings', 'verifyPeerCertByName']}
>
<Input placeholder="cloudflare-dns.com" />
</Form.Item>
<Form.Item
label={t('pages.xray.outboundForm.pinnedSha256')}
name={['streamSettings', 'tlsSettings', 'pinnedPeerCertSha256']}
>
<Input placeholder="base64 SHA256" />
</Form.Item>
</>
)}
{security === 'tls' && tlsAllowed && <TlsForm />}
{security === 'reality' && realityAllowed && (
<>
<Form.Item
label="SNI"
name={['streamSettings', 'realitySettings', 'serverName']}
>
<Input />
</Form.Item>
<Form.Item
label="uTLS"
name={['streamSettings', 'realitySettings', 'fingerprint']}
>
<Select options={UTLS_OPTIONS} />
</Form.Item>
<Form.Item
label={t('pages.xray.outboundForm.shortId')}
name={['streamSettings', 'realitySettings', 'shortId']}
>
<Input />
</Form.Item>
<Form.Item
label={t('pages.inbounds.form.spiderX')}
name={['streamSettings', 'realitySettings', 'spiderX']}
>
<Input />
</Form.Item>
<Form.Item
label={t('pages.inbounds.publicKey')}
name={['streamSettings', 'realitySettings', 'publicKey']}
>
<Input.TextArea autoSize={{ minRows: 2 }} />
</Form.Item>
<Form.Item
label={t('pages.inbounds.form.mldsa65Verify')}
name={['streamSettings', 'realitySettings', 'mldsa65Verify']}
>
<Input.TextArea autoSize={{ minRows: 2 }} />
</Form.Item>
</>
)}
{security === 'reality' && realityAllowed && <RealityForm />}
{((streamAllowed && network) || !streamAllowed) && (
<Form.Item shouldUpdate noStyle>

2
frontend/src/pages/xray/outbounds/security/index.ts Normal file
View file

@ -0,0 +1,2 @@
export { default as TlsForm } from './tls';
export { default as RealityForm } from './reality';

48
frontend/src/pages/xray/outbounds/security/reality.tsx Normal file
View file

@ -0,0 +1,48 @@
import { useTranslation } from 'react-i18next';
import { Form, Input, Select } from 'antd';
import { UTLS_OPTIONS } from '../outbound-form-constants';
export default function RealityForm() {
const { t } = useTranslation();
return (
<>
<Form.Item
label="SNI"
name={['streamSettings', 'realitySettings', 'serverName']}
>
<Input />
</Form.Item>
<Form.Item
label="uTLS"
name={['streamSettings', 'realitySettings', 'fingerprint']}
>
<Select options={UTLS_OPTIONS} />
</Form.Item>
<Form.Item
label={t('pages.xray.outboundForm.shortId')}
name={['streamSettings', 'realitySettings', 'shortId']}
>
<Input />
</Form.Item>
<Form.Item
label={t('pages.inbounds.form.spiderX')}
name={['streamSettings', 'realitySettings', 'spiderX']}
>
<Input />
</Form.Item>
<Form.Item
label={t('pages.inbounds.publicKey')}
name={['streamSettings', 'realitySettings', 'publicKey']}
>
<Input.TextArea autoSize={{ minRows: 2 }} />
</Form.Item>
<Form.Item
label={t('pages.inbounds.form.mldsa65Verify')}
name={['streamSettings', 'realitySettings', 'mldsa65Verify']}
>
<Input.TextArea autoSize={{ minRows: 2 }} />
</Form.Item>
</>
);
}

52
frontend/src/pages/xray/outbounds/security/tls.tsx Normal file
View file

@ -0,0 +1,52 @@
import { useTranslation } from 'react-i18next';
import { Form, Input, Select } from 'antd';
import { ALPN_OPTIONS, UTLS_OPTIONS } from '../outbound-form-constants';
export default function TlsForm() {
const { t } = useTranslation();
return (
<>
<Form.Item
label="SNI"
name={['streamSettings', 'tlsSettings', 'serverName']}
>
<Input placeholder={t('pages.xray.outboundForm.serverNamePlaceholder')} />
</Form.Item>
<Form.Item
label="uTLS"
name={['streamSettings', 'tlsSettings', 'fingerprint']}
>
<Select
allowClear
placeholder={t('none')}
options={UTLS_OPTIONS}
/>
</Form.Item>
<Form.Item
label="ALPN"
name={['streamSettings', 'tlsSettings', 'alpn']}
>
<Select mode="multiple" options={ALPN_OPTIONS} />
</Form.Item>
<Form.Item
label="ECH"
name={['streamSettings', 'tlsSettings', 'echConfigList']}
>
<Input />
</Form.Item>
<Form.Item
label={t('pages.xray.outboundForm.verifyPeerName')}
name={['streamSettings', 'tlsSettings', 'verifyPeerCertByName']}
>
<Input placeholder="cloudflare-dns.com" />
</Form.Item>
<Form.Item
label={t('pages.xray.outboundForm.pinnedSha256')}
name={['streamSettings', 'tlsSettings', 'pinnedPeerCertSha256']}
>
<Input placeholder="base64 SHA256" />
</Form.Item>
</>
);
}