fix(ui): подтверждать сохранение формы GRE
This commit is contained in:
Denozordec committed
1 parent
66b439cc2e
commit
3d518ff902
5 files changed
+111
-16
No files matched your search
+33
-12
@@ -275,6 +275,8 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on
|
||||
const [tunnelMode, setTunnelMode] = useState<"create" | "edit">("create")
|
||||
const [editingTunnel, setEditingTunnel] = useState<GreTunnel | null>(null)
|
||||
const [pendingDelete, setPendingDelete] = useState<GreTunnel | null>(null)
|
||||
const formLock = useRef(false)
|
||||
const [formError, setFormError] = useState<string | null>(null)
|
||||
const toggleLock = useRef(false)
|
||||
const [toggleStatus, setToggleStatus] = useState<string | null>(null)
|
||||
const [toggleError, setToggleError] = useState<string | null>(null)
|
||||
@@ -441,6 +443,8 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on
|
||||
}
|
||||
|
||||
async function submitTunnel() {
|
||||
if (formLock.current || mutationsLocked) return
|
||||
setFormError(null)
|
||||
if (!isLive) {
|
||||
toast.info("Создание на роутер доступно только в live-режиме")
|
||||
return
|
||||
@@ -450,17 +454,18 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on
|
||||
return
|
||||
}
|
||||
if (!tForm.name.trim() || !tForm.serverId || !tForm.remoteAddress.trim()) {
|
||||
toast.error("Заполните имя, сервер и удалённый адрес")
|
||||
setFormError("Заполните имя, сервер и удалённый адрес")
|
||||
return
|
||||
}
|
||||
if (tForm.ipsecEnabled && tForm.ipsecSecret.trim().length < 8) {
|
||||
toast.error("Для IPsec нужен PSK не короче 8 символов")
|
||||
setFormError("Для IPsec нужен PSK не короче 8 символов")
|
||||
return
|
||||
}
|
||||
formLock.current = true
|
||||
setMutateBusy(true)
|
||||
try {
|
||||
if (tunnelMode === "edit" && editingTunnel) {
|
||||
await apiFetch("/api/gre/tunnels", {
|
||||
const result = await apiFetch<{ ok: boolean }>("/api/gre/tunnels", {
|
||||
method: "PATCH",
|
||||
body: JSON.stringify({
|
||||
...tunnelWriteBody(tForm),
|
||||
@@ -468,20 +473,30 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on
|
||||
name: editingTunnel.name,
|
||||
}),
|
||||
})
|
||||
if (result?.ok !== true) throw new Error("Сервер не подтвердил сохранение туннеля")
|
||||
toast.success(`Туннель ${tForm.name} обновлён`)
|
||||
} else {
|
||||
await apiFetch("/api/gre/tunnels", {
|
||||
const result = await apiFetch<unknown>("/api/gre/tunnels", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(tunnelWriteBody(tForm)),
|
||||
})
|
||||
const confirmed = typeof result === "object" && result !== null && "name" in result && result.name === tForm.name.trim() && (
|
||||
("ok" in result && result.ok === true) ||
|
||||
("id" in result && typeof result.id === "string" && result.id.length > 0 &&
|
||||
"serverId" in result && String(result.serverId) === tForm.serverId &&
|
||||
"remoteAddress" in result && result.remoteAddress === tForm.remoteAddress.trim() &&
|
||||
"enabled" in result && result.enabled === tForm.enabled)
|
||||
)
|
||||
if (!confirmed) throw new Error("Сервер не подтвердил создание туннеля")
|
||||
toast.success(`Туннель ${tForm.name} создан`)
|
||||
}
|
||||
setTunnelOpen(false)
|
||||
setEditingTunnel(null)
|
||||
await loadLive()
|
||||
} catch (err) {
|
||||
toast.error("Не удалось сохранить туннель", { description: String(err) })
|
||||
setFormError(err instanceof Error ? err.message : "Не удалось сохранить туннель")
|
||||
} finally {
|
||||
formLock.current = false
|
||||
setMutateBusy(false)
|
||||
}
|
||||
}
|
||||
@@ -539,6 +554,7 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on
|
||||
}
|
||||
|
||||
function openCreateTunnel() {
|
||||
setFormError(null)
|
||||
setTunnelMode("create")
|
||||
setEditingTunnel(null)
|
||||
setTForm({
|
||||
@@ -549,6 +565,7 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on
|
||||
}
|
||||
|
||||
function openEditTunnel(t: GreTunnel) {
|
||||
setFormError(null)
|
||||
setTunnelMode("edit")
|
||||
setEditingTunnel(t)
|
||||
setTForm({
|
||||
@@ -883,28 +900,29 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on
|
||||
/>
|
||||
|
||||
{/* ══ Sheet: Add Tunnel ══════════════════════════════════════════════════ */}
|
||||
<Sheet open={tunnelOpen} onOpenChange={setTunnelOpen}>
|
||||
<SheetContent side="right" className="w-full sm:max-w-lg flex flex-col gap-0 p-0">
|
||||
<Sheet open={tunnelOpen} onOpenChange={v => { if (!formLock.current) setTunnelOpen(v) }}>
|
||||
<SheetContent showCloseButton={!mutateBusy} side="right" className="w-full sm:max-w-lg flex flex-col gap-0 p-0">
|
||||
<SheetHeader className="px-6 pt-6 pb-4 border-b shrink-0">
|
||||
<SheetTitle>{tunnelMode === "edit" ? "Редактировать GRE-туннель" : "Новый GRE-туннель"}</SheetTitle>
|
||||
<SheetDescription>RouterOS 7.20+ · /interface gre {tunnelMode === "edit" ? "set" : "add"}</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-6 py-5 flex flex-col gap-5">
|
||||
<fieldset disabled={mutateBusy} className="flex flex-col gap-5">
|
||||
<div className="flex flex-col gap-4">
|
||||
<SectionTitle>Основные</SectionTitle>
|
||||
<FormField label="Имя интерфейса" required hint="Только латиница, цифры и дефис, например gre-msk-spb">
|
||||
<Input className="font-mono" placeholder="gre-msk-spb" value={tForm.name} disabled={tunnelMode === "edit"} onChange={(e) => setT("name", e.target.value)} />
|
||||
<Input className="font-mono" placeholder="gre-msk-spb" aria-label="Имя интерфейса" value={tForm.name} disabled={tunnelMode === "edit"} onChange={(e) => setT("name", e.target.value)} />
|
||||
</FormField>
|
||||
<FormField label="Сервер (MikroTik)" required>
|
||||
<select value={tForm.serverId} onChange={(e) => setT("serverId", e.target.value)} disabled={tunnelMode === "edit"}
|
||||
<select aria-label="Сервер (MikroTik)" value={tForm.serverId} onChange={(e) => setT("serverId", e.target.value)} disabled={tunnelMode === "edit"}
|
||||
className="h-8 w-full rounded-lg border border-input bg-background px-2.5 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50">
|
||||
<option value="" disabled>Выбрать сервер…</option>
|
||||
{displayServers.map((s) => <option key={s.id} value={s.id}>{s.name} ({s.site})</option>)}
|
||||
</select>
|
||||
</FormField>
|
||||
<FormField label="Комментарий">
|
||||
<Input placeholder="Описание туннеля" value={tForm.comment} onChange={(e) => setT("comment", e.target.value)} />
|
||||
<Input placeholder="Описание туннеля" aria-label="Комментарий" value={tForm.comment} onChange={(e) => setT("comment", e.target.value)} />
|
||||
</FormField>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">Включён</span>
|
||||
@@ -918,7 +936,7 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on
|
||||
<Input className="font-mono" placeholder="0.0.0.0" value={tForm.localAddress} onChange={(e) => setT("localAddress", e.target.value)} />
|
||||
</FormField>
|
||||
<FormField label="Удалённый адрес" required hint="Внешний IP удалённого MikroTik">
|
||||
<Input className="font-mono" placeholder="203.0.113.1" value={tForm.remoteAddress} onChange={(e) => setT("remoteAddress", e.target.value)} />
|
||||
<Input className="font-mono" placeholder="203.0.113.1" aria-label="Удалённый адрес" value={tForm.remoteAddress} onChange={(e) => setT("remoteAddress", e.target.value)} />
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
@@ -1042,10 +1060,13 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
{mutateBusy && <p role="status" className="px-6 text-sm text-muted-foreground">Ожидание результата сохранения…</p>}
|
||||
{formError && <p role="alert" className="px-6 text-sm text-destructive">{formError}</p>}
|
||||
<SheetFooter className="px-6 py-4 border-t shrink-0 flex-row gap-2">
|
||||
<SheetClose render={<Button variant="outline" className="flex-1" />}>Отмена</SheetClose>
|
||||
<SheetClose render={<Button variant="outline" className="flex-1" disabled={mutateBusy} />}>Отмена</SheetClose>
|
||||
<Button className="flex-1" onClick={() => void submitTunnel()} disabled={mutateBusy}>
|
||||
{tunnelMode === "edit" ? "Сохранить" : "Создать туннель"}
|
||||
</Button>
|
||||
|
||||
Reference in new issue
Block a user