From 5f4acb755e3eca299f9081e20afb5766c572ac5f Mon Sep 17 00:00:00 2001
From: xtcnet <xtcnet@users.noreply.github.com>
Date: Sun, 8 Mar 2026 10:29:37 +0700
Subject: [PATCH] fix: resolve cancel and close buttons not working on server
 modals

---
 .../modals/WireGuardLinkedServersModal.tsx    | 121 ++++++-------
 frontend/src/modals/WireGuardServerModal.tsx  | 161 +++++++++---------
 2 files changed, 131 insertions(+), 151 deletions(-)

diff --git a/frontend/src/modals/WireGuardLinkedServersModal.tsx b/frontend/src/modals/WireGuardLinkedServersModal.tsx
index cdaf2fe..2c3e61a 100644
--- a/frontend/src/modals/WireGuardLinkedServersModal.tsx
+++ b/frontend/src/modals/WireGuardLinkedServersModal.tsx
@@ -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,77 +35,64 @@ 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">
-							Linked Servers for {wgInterface.name}
-						</h5>
-						<button
-							type="button"
-							className="btn-close"
-							onClick={onHide}
-							aria-label="Close"
-						></button>
-					</div>
-					<div className="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>
+		<Modal show={modal.visible} onHide={handleClose} backdrop="static">
+			<Modal.Header closeButton>
+				<Modal.Title>
+					Linked Servers for {wgInterface.name}
+				</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>
 
-						{availableServers.length === 0 ? (
-							<div className="alert alert-info border-0 mb-0">
-								There are no other servers available to link to.
-							</div>
-						) : (
-							<div className="list-group list-group-flush mb-3">
-								{availableServers.map(server => (
-									<label key={server.id} className="list-group-item d-flex align-items-center cursor-pointer px-0">
-										<input
-											className="form-check-input mt-0 me-3"
-											type="checkbox"
-											checked={selected.has(server.id)}
-											onChange={() => toggleServer(server.id)}
-										/>
-										<div className="flex-grow-1">
-											<div><strong>{server.name}</strong></div>
-											<div className="text-muted small border border-light border-1 bg-light rounded mt-1 p-1 d-inline-block">
-												Subnet: {server.ipv4Cidr}
-											</div>
-										</div>
-									</label>
-								))}
-							</div>
-						)}
+				{availableServers.length === 0 ? (
+					<div className="alert alert-info border-0 mb-0">
+						There are no other servers available to link to.
 					</div>
-					<div className="modal-footer">
-						<button
-							type="button"
-							className="btn btn-link link-secondary me-auto"
-							onClick={onHide}
-						>
-							<IconX size={16} className="me-1" /> Cancel
-						</button>
-						<button type="button" className="btn btn-primary" onClick={onSave} disabled={availableServers.length === 0 && selected.size === 0}>
-							<IconDeviceFloppy size={16} className="me-1" /> Save Links
-						</button>
+				) : (
+					<div className="list-group list-group-flush mb-3">
+						{availableServers.map(server => (
+							<label key={server.id} className="list-group-item d-flex align-items-center cursor-pointer px-0">
+								<input
+									className="form-check-input mt-0 me-3"
+									type="checkbox"
+									checked={selected.has(server.id)}
+									onChange={() => toggleServer(server.id)}
+								/>
+								<div className="flex-grow-1">
+									<div><strong>{server.name}</strong></div>
+									<div className="text-muted small border border-light border-1 bg-light rounded mt-1 p-1 d-inline-block">
+										Subnet: {server.ipv4Cidr}
+									</div>
+								</div>
+							</label>
+						))}
 					</div>
-				</div>
-			</div>
-		</div>
+				)}
+			</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="ms-auto btn-primary" onClick={onSave} disabled={availableServers.length === 0 && selected.size === 0}>
+					<IconDeviceFloppy size={16} className="me-1" /> Save Links
+				</Button>
+			</Modal.Footer>
+		</Modal>
 	);
-}
+});
 
 export default WireGuardLinkedServersModal;
diff --git a/frontend/src/modals/WireGuardServerModal.tsx b/frontend/src/modals/WireGuardServerModal.tsx
index 531f717..660f365 100644
--- a/frontend/src/modals/WireGuardServerModal.tsx
+++ b/frontend/src/modals/WireGuardServerModal.tsx
@@ -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,95 +46,84 @@ 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">
-							{wgInterface ? `Edit Server: ${wgInterface.name}` : "New WireGuard Server"}
-						</h5>
-						<button
-							type="button"
-							className="btn-close"
-							onClick={onHide}
-							aria-label="Close"
-						></button>
+		<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"}
+					</Modal.Title>
+				</Modal.Header>
+				<Modal.Body>
+					<div className="mb-3">
+						<label className="form-label required">Host / Endpoint IP</label>
+						<input
+							type="text"
+							className={`form-control ${errors.host ? "is-invalid" : ""}`}
+							placeholder="e.g., 203.0.113.1"
+							{...register("host", { required: "Host IP is required" })}
+						/>
+						{errors.host && (
+							<div className="invalid-feedback">{errors.host.message as string}</div>
+						)}
+						<small className="form-hint">
+							The public IP or hostname domain that clients will use to connect.
+						</small>
+					</div>
+					
+					<div className="mb-3">
+						<label className="form-label">Client DNS Servers</label>
+						<input
+							type="text"
+							className="form-control"
+							placeholder={WG_DEFAULT_DNS}
+							{...register("dns")}
+						/>
+						<small className="form-hint">Comma separated list. Assigned to clients.</small>
 					</div>
-					<div className="modal-body">
-						<div className="mb-3">
-							<label className="form-label required">Host / Endpoint IP</label>
-							<input
-								type="text"
-								className={`form-control ${errors.host ? "is-invalid" : ""}`}
-								placeholder="e.g., 203.0.113.1"
-								{...register("host", { required: "Host IP is required" })}
-							/>
-							{errors.host && (
-								<div className="invalid-feedback">{errors.host.message as string}</div>
-							)}
-							<small className="form-hint">
-								The public IP or hostname domain that clients will use to connect.
-							</small>
-						</div>
-						
-						<div className="mb-3">
-							<label className="form-label">Client DNS Servers</label>
-							<input
-								type="text"
-								className="form-control"
-								placeholder={WG_DEFAULT_DNS}
-								{...register("dns")}
-							/>
-							<small className="form-hint">Comma separated list. Assigned to clients.</small>
-						</div>
 
-						<div className="mb-3">
-							<label className="form-label">MTU</label>
-							<input
-								type="number"
-								className="form-control"
-								placeholder={WG_DEFAULT_MTU.toString()}
-								{...register("mtu")}
-							/>
-						</div>
+					<div className="mb-3">
+						<label className="form-label">MTU</label>
+						<input
+							type="number"
+							className="form-control"
+							placeholder={WG_DEFAULT_MTU.toString()}
+							{...register("mtu")}
+						/>
+					</div>
 
-						<div className="mb-3">
-							<label className="form-label">Client Isolation</label>
-							<label className="form-check form-switch">
-								<input
-									className="form-check-input"
-									type="checkbox"
-									{...register("isolate_clients")}
-								/>
-								<span className="form-check-label">Prevent clients on this server from communicating with each other</span>
-							</label>
-						</div>
+					<div className="mb-3">
+						<label className="form-label">Client Isolation</label>
+						<label className="form-check form-switch">
+							<input
+								className="form-check-input"
+								type="checkbox"
+								{...register("isolate_clients")}
+							/>
+							<span className="form-check-label">Prevent clients on this server from communicating with each other</span>
+						</label>
 					</div>
-					<div className="modal-footer">
-						<button
-							type="button"
-							className="btn btn-link link-secondary me-auto"
-							onClick={onHide}
-						>
-							<IconX size={16} className="me-1" /> Cancel
-						</button>
-						<button type="submit" className="btn btn-primary">
-							<IconDeviceFloppy size={16} className="me-1" /> Save
-						</button>
-					</div>
-				</form>
-			</div>
-		</div>
+				</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="ms-auto btn-primary">
+						<IconDeviceFloppy size={16} className="me-1" /> Save
+					</Button>
+				</Modal.Footer>
+			</form>
+		</Modal>
 	);
-}
+});
 
 export default WireGuardServerModal;