refactor(Managers): replace modal implementation with FormModal for community editing in ASNs, Domains, and IPRanges managers to enhance code maintainability and user experience

frontend/src/ASNsNewManager.jsx

@@ -40,6 +40,7 @@ import BulkActionsBar from './components/BulkActionsBar.jsx';
 import Tooltip from './components/Tooltip.jsx';
 import Pagination from './components/Pagination.jsx';
 import AddItemModal from './components/AddItemModal.jsx';
+import FormModal from './components/FormModal.jsx';
 import { getAsnName, getAsnNameSync } from './lib/asn.js';
 import LastSaved from './components/LastSaved.jsx';
 
@@ -847,20 +848,19 @@ function ASNsNewManager() {
         placeholder={'12345 65000:100'}
       />
       {/* Модальное окно редактирования community */}
-      {editModalOpen && itemBeingEdited && (
+      <FormModal
-        <div className="modal modal-blur fade show" style={{ display: 'block' }} tabIndex="-1">
+        show={editModalOpen && !!itemBeingEdited}
-          <div className="modal-dialog modal-dialog-centered" role="document">
+        onClose={handleCancelEdit}
-            <div className="modal-content">
+        onSubmit={handleSaveEdit}
-              <button
+        title="Редактировать community"
-                type="button"
+        submitLabel="Сохранить"
-                className="btn-close"
+        submitIcon={IconCheck}
-                onClick={handleCancelEdit}
+        size="md"
-                aria-label="Закрыть"
+        centered
-              ></button>
+        disabled={!isValidCommunity(editingValue)}
-              <div className="modal-header">
+      >
-                <h3 className="modal-title">Редактировать community</h3>
+        {itemBeingEdited && (
-              </div>
+          <>
-              <div className="modal-body">
             <p className="text-muted mb-2">
               ASN: <span className="font-monospace">{itemBeingEdited.asn}</span>
             </p>
@@ -880,24 +880,9 @@ function ASNsNewManager() {
                 </div>
               )}
             </div>
-              </div>
+          </>
-              <div className="modal-footer">
-                <button className="btn" onClick={handleCancelEdit}>
-                  Отмена
-                </button>
-                <button
-                  className="btn btn-primary"
-                  onClick={handleSaveEdit}
-                  disabled={!isValidCommunity(editingValue)}
-                >
-                  <IconCheck className="icon me-1" size={18} />
-                  Сохранить
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
         )}
+      </FormModal>
       <HistoryModal
         resource="asns"
         show={historyOpen}

frontend/src/DomainsNewManager.jsx

@@ -47,6 +47,7 @@ import Tooltip from './components/Tooltip.jsx';
 import Pagination from './components/Pagination.jsx';
 import AddItemModal from './components/AddItemModal.jsx';
 import LastSaved from './components/LastSaved.jsx';
+import FormModal from './components/FormModal.jsx';
 import { useToast } from './components/ToastContainer.jsx';
 
 const API_URL = '/api';
@@ -870,20 +871,19 @@ function DomainsNewManager() {
         onClose={() => setWsOpen(false)}
       />
       {/* Модальное окно редактирования community */}
-      {editModalOpen && itemBeingEdited && (
+      <FormModal
-        <div className="modal modal-blur fade show" style={{ display: 'block' }} tabIndex="-1">
+        show={editModalOpen && !!itemBeingEdited}
-          <div className="modal-dialog modal-dialog-centered" role="document">
+        onClose={handleCancelEdit}
-            <div className="modal-content">
+        onSubmit={handleSaveEdit}
-              <button
+        title="Редактировать community"
-                type="button"
+        submitLabel="Сохранить"
-                className="btn-close"
+        submitIcon={IconCheck}
-                onClick={handleCancelEdit}
+        size="md"
-                aria-label="Закрыть"
+        centered
-              ></button>
+        disabled={!isValidCommunity(editingValue)}
-              <div className="modal-header">
+      >
-                <h3 className="modal-title">Редактировать community</h3>
+        {itemBeingEdited && (
-              </div>
+          <>
-              <div className="modal-body">
             <p className="text-muted mb-2">
               Домен: <span className="font-monospace">{itemBeingEdited.domain}</span>
             </p>
@@ -903,24 +903,9 @@ function DomainsNewManager() {
                 </div>
               )}
             </div>
-              </div>
+          </>
-              <div className="modal-footer">
-                <button className="btn" onClick={handleCancelEdit}>
-                  Отмена
-                </button>
-                <button
-                  className="btn btn-primary"
-                  onClick={handleSaveEdit}
-                  disabled={!isValidCommunity(editingValue)}
-                >
-                  <IconCheck className="icon me-1" size={18} />
-                  Сохранить
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
         )}
+      </FormModal>
       <ConfirmModal
         show={clearCommunitiesOpen}
         onClose={() => setClearCommunitiesOpen(false)}

frontend/src/IPRangesManager.jsx

@@ -43,6 +43,7 @@ import Tooltip from './components/Tooltip.jsx';
 import Pagination from './components/Pagination.jsx';
 import AddItemModal from './components/AddItemModal.jsx';
 import LastSaved from './components/LastSaved.jsx';
+import FormModal from './components/FormModal.jsx';
 
 const API_URL = '/api';
 
@@ -1084,20 +1085,19 @@ function IPRangesManager() {
         placeholder={'192.168.1.0/24 65000:100'}
       />
       {/* Модальное окно редактирования community */}
-      {editModalOpen && itemBeingEdited && (
+      <FormModal
-        <div className="modal modal-blur fade show" style={{ display: 'block' }} tabIndex="-1">
+        show={editModalOpen && !!itemBeingEdited}
-          <div className="modal-dialog modal-dialog-centered" role="document">
+        onClose={handleCancelEdit}
-            <div className="modal-content">
+        onSubmit={handleSaveEdit}
-              <button
+        title="Редактировать community"
-                type="button"
+        submitLabel="Сохранить"
-                className="btn-close"
+        submitIcon={IconCheck}
-                onClick={handleCancelEdit}
+        size="md"
-                aria-label="Закрыть"
+        centered
-              ></button>
+        disabled={!isValidCommunity(editingValue)}
-              <div className="modal-header">
+      >
-                <h3 className="modal-title">Редактировать community</h3>
+        {itemBeingEdited && (
-              </div>
+          <>
-              <div className="modal-body">
             <p className="text-muted mb-2">
               IP-диапазон: <span className="font-monospace">{itemBeingEdited.ipRange}</span>
             </p>
@@ -1117,24 +1117,9 @@ function IPRangesManager() {
                 </div>
               )}
             </div>
-              </div>
+          </>
-              <div className="modal-footer">
-                <button className="btn" onClick={handleCancelEdit}>
-                  Отмена
-                </button>
-                <button
-                  className="btn btn-primary"
-                  onClick={handleSaveEdit}
-                  disabled={!isValidCommunity(editingValue)}
-                >
-                  <IconCheck className="icon me-1" size={18} />
-                  Сохранить
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
         )}
+      </FormModal>
       <HistoryModal
         resource="ip-ranges"
         show={historyOpen}