mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-05-31 10:14:15 +00:00
bee8288d41
The "create" form opened with a 9-char random email default, the bulk modal's random portion was only 6 chars, and the inbound-defaults seed used 8 — all below the 10-char minimum we want for new clients. Bring each generator to 10 so an unedited auto-generated email meets the threshold without the user having to extend it.
350 lines
11 KiB
TypeScript
350 lines
11 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { AutoComplete, Button, Form, Input, InputNumber, Modal, Select, Space, Switch, message } from 'antd';
|
|
import { ReloadOutlined } from '@ant-design/icons';
|
|
import dayjs from 'dayjs';
|
|
import type { Dayjs } from 'dayjs';
|
|
|
|
import { RandomUtil, SizeFormatter } from '@/utils';
|
|
import { TLS_FLOW_CONTROL } from '@/schemas/primitives';
|
|
import DateTimePicker from '@/components/DateTimePicker';
|
|
import { useClients, type InboundOption } from '@/hooks/useClients';
|
|
import { ClientBulkAddFormSchema, type ClientBulkAddFormValues } from '@/schemas/client';
|
|
|
|
const FLOW_OPTIONS = Object.values(TLS_FLOW_CONTROL);
|
|
|
|
const MULTI_CLIENT_PROTOCOLS = new Set([
|
|
'shadowsocks', 'vless', 'vmess', 'trojan', 'hysteria',
|
|
]);
|
|
|
|
interface ClientBulkAddModalProps {
|
|
open: boolean;
|
|
inbounds: InboundOption[];
|
|
ipLimitEnable?: boolean;
|
|
groups?: string[];
|
|
onOpenChange: (open: boolean) => void;
|
|
onSaved?: () => void;
|
|
}
|
|
|
|
type FormState = ClientBulkAddFormValues;
|
|
|
|
function emptyForm(): FormState {
|
|
return {
|
|
emailMethod: 0,
|
|
firstNum: 1,
|
|
lastNum: 1,
|
|
emailPrefix: '',
|
|
emailPostfix: '',
|
|
quantity: 1,
|
|
subId: '',
|
|
group: '',
|
|
comment: '',
|
|
flow: '',
|
|
limitIp: 0,
|
|
totalGB: 0,
|
|
expiryTime: 0,
|
|
reset: 0,
|
|
inboundIds: [],
|
|
};
|
|
}
|
|
|
|
export default function ClientBulkAddModal({
|
|
open,
|
|
inbounds,
|
|
ipLimitEnable = false,
|
|
groups = [],
|
|
onOpenChange,
|
|
onSaved,
|
|
}: ClientBulkAddModalProps) {
|
|
const { t } = useTranslation();
|
|
const [messageApi, messageContextHolder] = message.useMessage();
|
|
const { bulkCreate } = useClients();
|
|
|
|
const [form, setForm] = useState<FormState>(emptyForm);
|
|
const [delayedStart, setDelayedStart] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
|
|
setForm(emptyForm());
|
|
setDelayedStart(false);
|
|
|
|
}, [open]);
|
|
|
|
function update<K extends keyof FormState>(key: K, value: FormState[K]) {
|
|
setForm((prev) => ({ ...prev, [key]: value }));
|
|
}
|
|
|
|
const flowCapableIds = useMemo(() => {
|
|
const ids = new Set<number>();
|
|
for (const row of inbounds || []) {
|
|
if (row?.tlsFlowCapable) ids.add(row.id);
|
|
}
|
|
return ids;
|
|
}, [inbounds]);
|
|
|
|
const showFlow = useMemo(
|
|
() => (form.inboundIds || []).some((id) => flowCapableIds.has(id)),
|
|
[form.inboundIds, flowCapableIds],
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!showFlow && form.flow) {
|
|
|
|
update('flow', '');
|
|
}
|
|
}, [showFlow, form.flow]);
|
|
|
|
const inboundOptions = useMemo(
|
|
() => (inbounds || [])
|
|
.filter((ib) => MULTI_CLIENT_PROTOCOLS.has(ib.protocol || ''))
|
|
.map((ib) => ({
|
|
label: `${ib.remark || `#${ib.id}`} · ${ib.protocol}:${ib.port}`,
|
|
value: ib.id,
|
|
})),
|
|
[inbounds],
|
|
);
|
|
|
|
const expiryDate = useMemo<Dayjs | null>(
|
|
() => (form.expiryTime > 0 ? dayjs(form.expiryTime) : null),
|
|
[form.expiryTime],
|
|
);
|
|
|
|
const delayedExpireDays = form.expiryTime < 0 ? form.expiryTime / -86400000 : 0;
|
|
|
|
function buildEmails(): string[] {
|
|
const method = form.emailMethod;
|
|
const out: string[] = [];
|
|
let start: number;
|
|
let end: number;
|
|
if (method > 1) {
|
|
start = form.firstNum;
|
|
end = form.lastNum + 1;
|
|
} else {
|
|
start = 0;
|
|
end = form.quantity;
|
|
}
|
|
const prefix = method > 0 && form.emailPrefix.length > 0 ? form.emailPrefix : '';
|
|
const useNum = method > 1;
|
|
const postfix = method > 2 && form.emailPostfix.length > 0 ? form.emailPostfix : '';
|
|
for (let i = start; i < end; i++) {
|
|
let email = '';
|
|
if (method !== 4) email = RandomUtil.randomLowerAndNum(10);
|
|
email += useNum ? prefix + String(i) + postfix : prefix + postfix;
|
|
out.push(email);
|
|
}
|
|
return out;
|
|
}
|
|
|
|
async function submit() {
|
|
const validated = ClientBulkAddFormSchema.safeParse(form);
|
|
if (!validated.success) {
|
|
messageApi.error(t(validated.error.issues[0]?.message ?? 'somethingWentWrong'));
|
|
return;
|
|
}
|
|
const emails = buildEmails();
|
|
if (emails.length === 0) return;
|
|
|
|
setSaving(true);
|
|
try {
|
|
const payloads = emails.map((email) => ({
|
|
client: {
|
|
email,
|
|
subId: form.subId || RandomUtil.randomLowerAndNum(16),
|
|
id: RandomUtil.randomUUID(),
|
|
password: RandomUtil.randomLowerAndNum(16),
|
|
auth: RandomUtil.randomLowerAndNum(16),
|
|
flow: showFlow ? (form.flow || '') : '',
|
|
totalGB: Math.round((form.totalGB || 0) * SizeFormatter.ONE_GB),
|
|
expiryTime: form.expiryTime,
|
|
reset: Number(form.reset) || 0,
|
|
limitIp: Number(form.limitIp) || 0,
|
|
group: form.group,
|
|
comment: form.comment,
|
|
enable: true,
|
|
},
|
|
inboundIds: form.inboundIds,
|
|
}));
|
|
const msg = await bulkCreate(payloads);
|
|
const ok = msg?.obj?.created ?? 0;
|
|
const skipped = msg?.obj?.skipped ?? [];
|
|
const failed = skipped.length;
|
|
const firstError = skipped[0]?.reason ?? msg?.msg ?? '';
|
|
if (failed === 0 && msg?.success) {
|
|
messageApi.success(t('pages.clients.toasts.bulkCreated', { count: ok }));
|
|
} else {
|
|
messageApi.warning(firstError
|
|
? `${t('pages.clients.toasts.bulkCreatedMixed', { ok, failed })} — ${firstError}`
|
|
: t('pages.clients.toasts.bulkCreatedMixed', { ok, failed }));
|
|
}
|
|
onSaved?.();
|
|
onOpenChange(false);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{messageContextHolder}
|
|
<Modal
|
|
open={open}
|
|
title={t('pages.clients.bulk')}
|
|
okText={t('create')}
|
|
cancelText={t('close')}
|
|
confirmLoading={saving}
|
|
mask={{ closable: false }}
|
|
width={640}
|
|
onOk={submit}
|
|
onCancel={() => onOpenChange(false)}
|
|
>
|
|
<Form colon={false} labelCol={{ sm: { span: 8 } }} wrapperCol={{ sm: { span: 14 } }}>
|
|
<Form.Item label={t('pages.clients.attachedInbounds')} required>
|
|
<Select
|
|
mode="multiple"
|
|
value={form.inboundIds}
|
|
onChange={(v) => update('inboundIds', v)}
|
|
options={inboundOptions}
|
|
placeholder={t('pages.clients.selectInbound')}
|
|
showSearch={{
|
|
filterOption: (input, option) => ((option?.label as string) || '').toLowerCase().includes(input.toLowerCase()),
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
|
|
<Form.Item label={t('pages.clients.method')}>
|
|
<Select
|
|
value={form.emailMethod}
|
|
onChange={(v) => update('emailMethod', v)}
|
|
options={[
|
|
{ value: 0, label: 'Random' },
|
|
{ value: 1, label: 'Random + Prefix' },
|
|
{ value: 2, label: 'Random + Prefix + Num' },
|
|
{ value: 3, label: 'Random + Prefix + Num + Postfix' },
|
|
{ value: 4, label: 'Prefix + Num + Postfix' },
|
|
]}
|
|
/>
|
|
</Form.Item>
|
|
|
|
{form.emailMethod > 1 && (
|
|
<>
|
|
<Form.Item label={t('pages.clients.first')}>
|
|
<InputNumber value={form.firstNum} min={1} onChange={(v) => update('firstNum', Number(v) || 1)} />
|
|
</Form.Item>
|
|
<Form.Item label={t('pages.clients.last')}>
|
|
<InputNumber value={form.lastNum} min={form.firstNum} onChange={(v) => update('lastNum', Number(v) || 1)} />
|
|
</Form.Item>
|
|
</>
|
|
)}
|
|
{form.emailMethod > 0 && (
|
|
<Form.Item label={t('pages.clients.prefix')}>
|
|
<Input value={form.emailPrefix} onChange={(e) => update('emailPrefix', e.target.value)} />
|
|
</Form.Item>
|
|
)}
|
|
{form.emailMethod > 2 && (
|
|
<Form.Item label={t('pages.clients.postfix')}>
|
|
<Input value={form.emailPostfix} onChange={(e) => update('emailPostfix', e.target.value)} />
|
|
</Form.Item>
|
|
)}
|
|
{form.emailMethod < 2 && (
|
|
<Form.Item label={t('pages.clients.clientCount')}>
|
|
<InputNumber value={form.quantity} min={1} max={100} onChange={(v) => update('quantity', Number(v) || 1)} />
|
|
</Form.Item>
|
|
)}
|
|
|
|
<Form.Item label={t('pages.clients.subId')}>
|
|
<Space.Compact style={{ display: 'flex' }}>
|
|
<Input
|
|
value={form.subId}
|
|
onChange={(e) => update('subId', e.target.value)}
|
|
style={{ flex: 1 }}
|
|
/>
|
|
<Button
|
|
icon={<ReloadOutlined />}
|
|
onClick={() => update('subId', RandomUtil.randomLowerAndNum(16))}
|
|
/>
|
|
</Space.Compact>
|
|
</Form.Item>
|
|
|
|
<Form.Item label={t('pages.clients.group')} tooltip={t('pages.clients.groupDesc')}>
|
|
<AutoComplete
|
|
value={form.group}
|
|
placeholder={t('pages.clients.groupPlaceholder')}
|
|
options={groups.map((g) => ({ value: g }))}
|
|
onChange={(v) => update('group', v ?? '')}
|
|
filterOption={(input, option) =>
|
|
String(option?.value ?? '').toLowerCase().includes((input || '').toLowerCase())
|
|
}
|
|
allowClear
|
|
style={{ width: '100%' }}
|
|
/>
|
|
</Form.Item>
|
|
|
|
<Form.Item label={t('comment')}>
|
|
<Input value={form.comment} onChange={(e) => update('comment', e.target.value)} />
|
|
</Form.Item>
|
|
|
|
{showFlow && (
|
|
<Form.Item label={t('pages.clients.flow')}>
|
|
<Select
|
|
value={form.flow}
|
|
onChange={(v) => update('flow', v)}
|
|
style={{ width: 220 }}
|
|
options={[
|
|
{ value: '', label: t('none') },
|
|
...FLOW_OPTIONS.map((k) => ({ value: k, label: k })),
|
|
]}
|
|
/>
|
|
</Form.Item>
|
|
)}
|
|
|
|
{ipLimitEnable && (
|
|
<Form.Item label={t('pages.clients.limitIp')}>
|
|
<InputNumber value={form.limitIp} min={0} onChange={(v) => update('limitIp', Number(v) || 0)} />
|
|
</Form.Item>
|
|
)}
|
|
|
|
<Form.Item label={t('pages.clients.totalGB')}>
|
|
<InputNumber value={form.totalGB} min={0} step={1} onChange={(v) => update('totalGB', Number(v) || 0)} />
|
|
</Form.Item>
|
|
|
|
<Form.Item label={t('pages.clients.delayedStart')}>
|
|
<Switch
|
|
checked={delayedStart}
|
|
onClick={() => { setDelayedStart(!delayedStart); update('expiryTime', 0); }}
|
|
/>
|
|
</Form.Item>
|
|
|
|
{delayedStart ? (
|
|
<Form.Item label={t('pages.clients.expireDays')}>
|
|
<InputNumber
|
|
value={delayedExpireDays}
|
|
min={0}
|
|
onChange={(v) => update('expiryTime', -86400000 * (Number(v) || 0))}
|
|
/>
|
|
</Form.Item>
|
|
) : (
|
|
<Form.Item label={t('pages.inbounds.expireDate')}>
|
|
<DateTimePicker
|
|
value={expiryDate}
|
|
onChange={(next) => update('expiryTime', next ? next.valueOf() : 0)}
|
|
/>
|
|
</Form.Item>
|
|
)}
|
|
|
|
<Form.Item
|
|
label={t('pages.clients.renew')}
|
|
tooltip={t('pages.clients.renewDesc')}
|
|
>
|
|
<InputNumber
|
|
value={form.reset}
|
|
min={0}
|
|
onChange={(v) => update('reset', Number(v) || 0)}
|
|
/>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|