feat: Implement edit server modal in ServerManager for improved server management

frontend/src/ServerManager.jsx

@@ -47,6 +47,9 @@ function ServerManager() {
   const editInputRef = useRef(null);
   const pageSize = 10;
 
+  const [editModalOpen, setEditModalOpen] = useState(false);
+  const [editModalServer, setEditModalServer] = useState(null);
+
   useEffect(() => {
     fetchServers();
   }, []);
@@ -76,16 +79,23 @@ function ServerManager() {
   };
 
   const handleEdit = (server) => {
-    setEditingServer(server.ip);
-    setEditingValues({ ...server });
+    setEditModalServer({ ...server });
+    setEditModalOpen(true);
   };
 
-  const handleSaveEdit = (serverIp) => {
-    const updatedServers = servers.map(s =>
-      s.ip === serverIp ? { ...s, ...editingValues } : s
-    );
-    setServers(updatedServers);
-    setEditingServer(null);
+  const handleEditModalChange = (updatedServer) => {
+    setEditModalServer(updatedServer);
+  };
+
+  const handleEditModalSave = () => {
+    setServers(servers.map(s => s.ip === editModalServer.ip ? { ...editModalServer } : s));
+    setEditModalOpen(false);
+    setEditModalServer(null);
+  };
+
+  const handleEditModalClose = () => {
+    setEditModalOpen(false);
+    setEditModalServer(null);
   };
 
   const handleCancelEdit = () => {
@@ -476,17 +486,8 @@ function ServerManager() {
                       <td>{server.provider}</td>
                       <td><span className="badge bg-green-lt text-green">{server.tunnel}</span></td>
                       <td className="text-end">
-                        {editingServer === server.ip ? (
-                          <>
-                            <button className="btn btn-success btn-icon me-1" onClick={() => handleSaveEdit(server.ip)}><IconCheck size={18} /></button>
-                            <button className="btn btn-secondary btn-icon" onClick={handleCancelEdit}><IconX size={18} /></button>
-                          </>
-                        ) : (
-                          <>
-                            <button className="btn btn-outline-primary btn-icon me-1" onClick={() => handleEdit(server)}><IconEdit size={18} /></button>
-                            <button className="btn btn-outline-danger btn-icon" onClick={() => confirmDelete(server)}><IconTrash size={18} /></button>
-                          </>
-                        )}
+                        <button className="btn btn-outline-primary btn-icon me-1" onClick={() => handleEdit(server)}><IconEdit size={18} /></button>
+                        <button className="btn btn-outline-danger btn-icon" onClick={() => confirmDelete(server)}><IconTrash size={18} /></button>
                       </td>
                     </tr>
                   ))}
@@ -540,8 +541,62 @@ function ServerManager() {
           </div>
         </div>
       )}
+
+      {/* Edit Server Modal */}
+      <EditServerModal
+        show={editModalOpen}
+        server={editModalServer}
+        onChange={handleEditModalChange}
+        onSave={handleEditModalSave}
+        onClose={handleEditModalClose}
+      />
     </>
   );
 }
 
+// Модальное окно для редактирования сервера
+function EditServerModal({ show, server, onChange, onSave, onClose }) {
+  if (!show || !server) return null;
+  return (
+    <div className="modal fade show" style={{display: 'block'}} tabIndex="-1">
+      <div className="modal-dialog">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title">Редактировать сервер</h5>
+            <button type="button" className="btn-close" onClick={onClose}></button>
+          </div>
+          <div className="modal-body">
+            <form onSubmit={e => { e.preventDefault(); onSave(); }}>
+              <div className="mb-3">
+                <label className="form-label">IP адрес</label>
+                <input type="text" className="form-control" value={server.ip} onChange={e => onChange({ ...server, ip: e.target.value })} />
+              </div>
+              <div className="mb-3">
+                <label className="form-label">DNS имя</label>
+                <input type="text" className="form-control" value={server.dns} onChange={e => onChange({ ...server, dns: e.target.value })} />
+              </div>
+              <div className="mb-3">
+                <label className="form-label">Страна</label>
+                <input type="text" className="form-control" value={server.country} onChange={e => onChange({ ...server, country: e.target.value })} />
+              </div>
+              <div className="mb-3">
+                <label className="form-label">Провайдер</label>
+                <input type="text" className="form-control" value={server.provider} onChange={e => onChange({ ...server, provider: e.target.value })} />
+              </div>
+              <div className="mb-3">
+                <label className="form-label">Тип туннеля</label>
+                <input type="text" className="form-control" value={server.tunnel} onChange={e => onChange({ ...server, tunnel: e.target.value })} />
+              </div>
+            </form>
+          </div>
+          <div className="modal-footer">
+            <button type="button" className="btn btn-secondary" onClick={onClose}>Отмена</button>
+            <button type="button" className="btn btn-primary" onClick={onSave}>Сохранить</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default ServerManager;