Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-05-31 10:14:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refactor(forms): modernize random buttons in client + outbound modals

Browse source 
Replace the last holdouts of the old random-affordance patterns:
- ClientFormModal's five "↻" text buttons (email / subId / auth /
  password / uuid) now use <Button icon={<ReloadOutlined />} /> so
  they match the icon-based actions elsewhere in the form.
- OutboundFormModal's WireGuard private-key SyncOutlined-in-label
  becomes a real button inside a Space.Compact next to the key
  field — same pattern the inbound side already uses.

The shared .random-icon CSS class has no remaining consumers after
this and the previous inbound-form pass, so drop it from utils.css.
This commit is contained in:
MHSanaei 2026-05-27 13:43:35 +02:00
parent 9d2a4f217e
commit 43288e6686
No known key found for this signature in database
GPG key ID: 7E4060F2FBE5AB7A
3 changed files with 21 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/pages/clients/ClientFormModal.tsx
View file

@ -14,6 +14,7 @@ import {
Tag,
message,
} from 'antd';
import { ReloadOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import type { Dayjs } from 'dayjs';
@ -369,7 +370,7 @@ export default function ClientFormModal({
style={{ flex: 1 }}
onChange={(e) => update('email', e.target.value)}
/>
<Button onClick={() => update('email', RandomUtil.randomLowerAndNum(12))}>↻</Button>
<Button icon={<ReloadOutlined />} onClick={() => update('email', RandomUtil.randomLowerAndNum(12))} />
</Space.Compact>
</Form.Item>
</Col>
@ -377,7 +378,7 @@ export default function ClientFormModal({
<Form.Item label={t('pages.clients.subId')}>
<Space.Compact style={{ display: 'flex' }}>
<Input value={form.subId} style={{ flex: 1 }} onChange={(e) => update('subId', e.target.value)} />
<Button onClick={() => update('subId', RandomUtil.randomLowerAndNum(16))}>↻</Button>
<Button icon={<ReloadOutlined />} onClick={() => update('subId', RandomUtil.randomLowerAndNum(16))} />
</Space.Compact>
</Form.Item>
</Col>
@ -388,7 +389,7 @@ export default function ClientFormModal({
<Form.Item label={t('pages.clients.hysteriaAuth')}>
<Space.Compact style={{ display: 'flex' }}>
<Input value={form.auth} style={{ flex: 1 }} onChange={(e) => update('auth', e.target.value)} />
<Button onClick={() => update('auth', RandomUtil.randomLowerAndNum(16))}>↻</Button>
<Button icon={<ReloadOutlined />} onClick={() => update('auth', RandomUtil.randomLowerAndNum(16))} />
</Space.Compact>
</Form.Item>
</Col>
@ -396,7 +397,7 @@ export default function ClientFormModal({
<Form.Item label={t('pages.clients.password')}>
<Space.Compact style={{ display: 'flex' }}>
<Input value={form.password} style={{ flex: 1 }} onChange={(e) => update('password', e.target.value)} />
<Button onClick={() => update('password', RandomUtil.randomLowerAndNum(16))}>↻</Button>
<Button icon={<ReloadOutlined />} onClick={() => update('password', RandomUtil.randomLowerAndNum(16))} />
</Space.Compact>
</Form.Item>
</Col>
@ -407,7 +408,7 @@ export default function ClientFormModal({
<Form.Item label={t('pages.clients.uuid')}>
<Space.Compact style={{ display: 'flex' }}>
<Input value={form.uuid} style={{ flex: 1 }} onChange={(e) => update('uuid', e.target.value)} />
<Button onClick={() => update('uuid', RandomUtil.randomUUID())}>↻</Button>
<Button icon={<ReloadOutlined />} onClick={() => update('uuid', RandomUtil.randomUUID())} />
</Space.Compact>
</Form.Item>
</Col>

33
frontend/src/pages/xray/OutboundFormModal.tsx
View file

@ -13,7 +13,7 @@ import {
Tabs,
message,
} from 'antd';
import { DeleteOutlined, MinusOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
import { DeleteOutlined, MinusOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons';
import FinalMaskForm from '@/components/FinalMaskForm';
import HeaderMapEditor from '@/components/HeaderMapEditor';
@ -977,23 +977,20 @@ export default function OutboundFormModal({
<Form.Item label={t('pages.inbounds.address')} name={['settings', 'address']}>
<Input placeholder="comma-separated, e.g. 10.0.0.1,fd00::1" />
</Form.Item>
<Form.Item
label={
<>
{t('pages.inbounds.privatekey')}
<SyncOutlined
className="random-icon"
onClick={() => {
const pair = Wireguard.generateKeypair();
form.setFieldValue(['settings', 'secretKey'], pair.privateKey);
form.setFieldValue(['settings', 'pubKey'], pair.publicKey);
}}
/>
</>
}
name={['settings', 'secretKey']}
>
<Input />
<Form.Item label={t('pages.inbounds.privatekey')}>
<Space.Compact block>
<Form.Item name={['settings', 'secretKey']} noStyle>
<Input style={{ width: 'calc(100% - 32px)' }} />
</Form.Item>
<Button
icon={<ReloadOutlined />}
onClick={() => {
const pair = Wireguard.generateKeypair();
form.setFieldValue(['settings', 'secretKey'], pair.privateKey);
form.setFieldValue(['settings', 'pubKey'], pair.publicKey);
}}
/>
</Space.Compact>
</Form.Item>
<Form.Item label={t('pages.inbounds.publicKey')} name={['settings', 'pubKey']}>
<Input disabled />

6
frontend/src/styles/utils.css
View file

@ -16,12 +16,6 @@
.zero-margin { margin: 0; }
.random-icon {
margin-left: 4px;
cursor: pointer;
color: var(--ant-color-primary);
}
.danger-icon {
margin-left: 8px;
cursor: pointer;