xtcnet/D3V-Server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: resolve cancel and close buttons not working on server modals

Browse source
This commit is contained in:
xtcnet 2026-03-08 10:29:37 +07:00
parent 36acc3ea65
commit 5f4acb755e
2 changed files with 131 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
frontend/src/modals/WireGuardLinkedServersModal.tsx
View file

@ -2,17 +2,19 @@ import {
IconDeviceFloppy,
IconX,
} from "@tabler/icons-react";
import EasyModal, { useModal } from "ez-modal-react";
import { useState, useEffect } from "react";
import Modal from "react-bootstrap/Modal";
import type { WgInterface } from "src/api/backend/wireguard";
import { Button } from "src/components";
interface WireGuardLinkedServersModalProps {
wgInterface: WgInterface;
allInterfaces: WgInterface[];
onHide?: () => void;
resolve?: (data: { linked_servers: number[] }) => void;
}
function WireGuardLinkedServersModal({ wgInterface, allInterfaces, onHide, resolve }: WireGuardLinkedServersModalProps) {
const WireGuardLinkedServersModal = EasyModal.create(({ wgInterface, allInterfaces }: WireGuardLinkedServersModalProps) => {
const modal = useModal<any>();
// A map or set to manage checked status easily
const [selected, setSelected] = useState<Set<number>>(new Set());
@ -33,32 +35,25 @@ function WireGuardLinkedServersModal({ wgInterface, allInterfaces, onHide, resol
};
const onSave = () => {
if (resolve) {
resolve({ linked_servers: Array.from(selected) });
}
if (onHide) {
onHide();
}
modal.resolve({ linked_servers: Array.from(selected) });
modal.hide();
};
const handleClose = () => {
modal.resolve(null);
modal.hide();
};
const availableServers = allInterfaces.filter(i => i.id !== wgInterface.id);
return (
<div className="modal modal-blur fade show d-block" tabIndex={-1}>
<div className="modal-dialog modal-dialog-centered" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">
<Modal show={modal.visible} onHide={handleClose} backdrop="static">
<Modal.Header closeButton>
<Modal.Title>
Linked Servers for {wgInterface.name}
</h5>
<button
type="button"
className="btn-close"
onClick={onHide}
aria-label="Close"
></button>
</div>
<div className="modal-body">
</Modal.Title>
</Modal.Header>
<Modal.Body>
<p className="text-muted mb-3">
Select the WireGuard servers that clients from <strong>{wgInterface.name}</strong> will be allowed to communicate with.
</p>
@ -87,23 +82,17 @@ function WireGuardLinkedServersModal({ wgInterface, allInterfaces, onHide, resol
))}
</div>
)}
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-link link-secondary me-auto"
onClick={onHide}
>
</Modal.Body>
<Modal.Footer>
<Button type="button" data-bs-dismiss="modal" onClick={handleClose}>
<IconX size={16} className="me-1" /> Cancel
</button>
<button type="button" className="btn btn-primary" onClick={onSave} disabled={availableServers.length === 0 && selected.size === 0}>
</Button>
<Button type="button" className="ms-auto btn-primary" onClick={onSave} disabled={availableServers.length === 0 && selected.size === 0}>
<IconDeviceFloppy size={16} className="me-1" /> Save Links
</button>
</div>
</div>
</div>
</div>
</Button>
</Modal.Footer>
</Modal>
);
}
});
export default WireGuardLinkedServersModal;

65
frontend/src/modals/WireGuardServerModal.tsx
View file

@ -2,19 +2,21 @@ import {
IconDeviceFloppy,
IconX,
} from "@tabler/icons-react";
import EasyModal, { useModal } from "ez-modal-react";
import { useEffect } from "react";
import Modal from "react-bootstrap/Modal";
import { useForm } from "react-hook-form";
import { Button } from "src/components";
interface WireGuardServerModalProps {
wgInterface?: any;
onHide?: () => void;
resolve?: (data: any) => void;
}
const WG_DEFAULT_MTU = 1420;
const WG_DEFAULT_DNS = "1.1.1.1, 8.8.8.8";
function WireGuardServerModal({ wgInterface, onHide, resolve }: WireGuardServerModalProps) {
const WireGuardServerModal = EasyModal.create(({ wgInterface }: WireGuardServerModalProps) => {
const modal = useModal<any>();
const {
register,
handleSubmit,
@ -44,30 +46,24 @@ function WireGuardServerModal({ wgInterface, onHide, resolve }: WireGuardServerM
...data,
mtu: Number(data.mtu) || WG_DEFAULT_MTU,
};
if (resolve) {
resolve(submitData);
}
if (onHide) {
onHide();
}
modal.resolve(submitData);
modal.hide();
};
const handleClose = () => {
modal.resolve(null);
modal.hide();
};
return (
<div className="modal modal-blur fade show d-block" tabIndex={-1}>
<div className="modal-dialog modal-dialog-centered" role="document">
<form className="modal-content" onSubmit={handleSubmit(onSubmit)}>
<div className="modal-header">
<h5 className="modal-title">
<Modal show={modal.visible} onHide={handleClose} backdrop="static">
<form onSubmit={handleSubmit(onSubmit)}>
<Modal.Header closeButton>
<Modal.Title>
{wgInterface ? `Edit Server: ${wgInterface.name}` : "New WireGuard Server"}
</h5>
<button
type="button"
className="btn-close"
onClick={onHide}
aria-label="Close"
></button>
</div>
<div className="modal-body">
</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className="mb-3">
<label className="form-label required">Host / Endpoint IP</label>
<input
@ -116,23 +112,18 @@ function WireGuardServerModal({ wgInterface, onHide, resolve }: WireGuardServerM
<span className="form-check-label">Prevent clients on this server from communicating with each other</span>
</label>
</div>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-link link-secondary me-auto"
onClick={onHide}
>
</Modal.Body>
<Modal.Footer>
<Button type="button" data-bs-dismiss="modal" onClick={handleClose}>
<IconX size={16} className="me-1" /> Cancel
</button>
<button type="submit" className="btn btn-primary">
</Button>
<Button type="submit" className="ms-auto btn-primary">
<IconDeviceFloppy size={16} className="me-1" /> Save
</button>
</div>
</Button>
</Modal.Footer>
</form>
</div>
</div>
</Modal>
);
}
});
export default WireGuardServerModal;