From 1c953ed9d83a701ca106d67f886edd9183afbcbc Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Mon, 16 Feb 2026 18:07:48 +0700
Subject: [PATCH] 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    | 83 ++++++++++++------------------
 frontend/src/DomainsNewManager.jsx | 83 ++++++++++++------------------
 frontend/src/IPRangesManager.jsx   | 83 ++++++++++++------------------
 3 files changed, 102 insertions(+), 147 deletions(-)

diff --git a/frontend/src/ASNsNewManager.jsx b/frontend/src/ASNsNewManager.jsx
index a07b987..c95eebe 100644
--- a/frontend/src/ASNsNewManager.jsx
+++ b/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,57 +848,41 @@ function ASNsNewManager() {
         placeholder={'12345 65000:100'}
       />
       {/* Модальное окно редактирования community */}
-      {editModalOpen && itemBeingEdited && (
-        <div className="modal modal-blur fade show" style={{ display: 'block' }} tabIndex="-1">
-          <div className="modal-dialog modal-dialog-centered" role="document">
-            <div className="modal-content">
-              <button
-                type="button"
-                className="btn-close"
-                onClick={handleCancelEdit}
-                aria-label="Закрыть"
-              ></button>
-              <div className="modal-header">
-                <h3 className="modal-title">Редактировать community</h3>
-              </div>
-              <div className="modal-body">
-                <p className="text-muted mb-2">
-                  ASN: <span className="font-monospace">{itemBeingEdited.asn}</span>
-                </p>
-                <div className="mb-3">
-                  <label className="form-label">Community</label>
-                  <CommunityAutocompleteInput
-                    value={editingValue}
-                    onChange={setEditingValue}
-                    communities={communities}
-                    onKeyDown={handleEditKeyDown}
-                    className={`form-control${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
-                    useShortValue={true}
-                  />
-                  {!isValidCommunity(editingValue) && (
-                    <div className="invalid-feedback d-block">
-                      Введите корректное значение community (число или N:N).
-                    </div>
-                  )}
+      <FormModal
+        show={editModalOpen && !!itemBeingEdited}
+        onClose={handleCancelEdit}
+        onSubmit={handleSaveEdit}
+        title="Редактировать community"
+        submitLabel="Сохранить"
+        submitIcon={IconCheck}
+        size="md"
+        centered
+        disabled={!isValidCommunity(editingValue)}
+      >
+        {itemBeingEdited && (
+          <>
+            <p className="text-muted mb-2">
+              ASN: <span className="font-monospace">{itemBeingEdited.asn}</span>
+            </p>
+            <div className="mb-3">
+              <label className="form-label">Community</label>
+              <CommunityAutocompleteInput
+                value={editingValue}
+                onChange={setEditingValue}
+                communities={communities}
+                onKeyDown={handleEditKeyDown}
+                className={`form-control${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
+                useShortValue={true}
+              />
+              {!isValidCommunity(editingValue) && (
+                <div className="invalid-feedback d-block">
+                  Введите корректное значение community (число или N:N).
                 </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}
diff --git a/frontend/src/DomainsNewManager.jsx b/frontend/src/DomainsNewManager.jsx
index 614d30c..d3df82e 100644
--- a/frontend/src/DomainsNewManager.jsx
+++ b/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,57 +871,41 @@ function DomainsNewManager() {
         onClose={() => setWsOpen(false)}
       />
       {/* Модальное окно редактирования community */}
-      {editModalOpen && itemBeingEdited && (
-        <div className="modal modal-blur fade show" style={{ display: 'block' }} tabIndex="-1">
-          <div className="modal-dialog modal-dialog-centered" role="document">
-            <div className="modal-content">
-              <button
-                type="button"
-                className="btn-close"
-                onClick={handleCancelEdit}
-                aria-label="Закрыть"
-              ></button>
-              <div className="modal-header">
-                <h3 className="modal-title">Редактировать community</h3>
-              </div>
-              <div className="modal-body">
-                <p className="text-muted mb-2">
-                  Домен: <span className="font-monospace">{itemBeingEdited.domain}</span>
-                </p>
-                <div className="mb-3">
-                  <label className="form-label">Community</label>
-                  <CommunityAutocompleteInput
-                    value={editingValue}
-                    onChange={setEditingValue}
-                    communities={communities}
-                    onKeyDown={handleEditKeyDown}
-                    className={`form-control${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
-                    useShortValue={true}
-                  />
-                  {!isValidCommunity(editingValue) && (
-                    <div className="invalid-feedback d-block">
-                      Введите корректное значение community (число или N:N).
-                    </div>
-                  )}
+      <FormModal
+        show={editModalOpen && !!itemBeingEdited}
+        onClose={handleCancelEdit}
+        onSubmit={handleSaveEdit}
+        title="Редактировать community"
+        submitLabel="Сохранить"
+        submitIcon={IconCheck}
+        size="md"
+        centered
+        disabled={!isValidCommunity(editingValue)}
+      >
+        {itemBeingEdited && (
+          <>
+            <p className="text-muted mb-2">
+              Домен: <span className="font-monospace">{itemBeingEdited.domain}</span>
+            </p>
+            <div className="mb-3">
+              <label className="form-label">Community</label>
+              <CommunityAutocompleteInput
+                value={editingValue}
+                onChange={setEditingValue}
+                communities={communities}
+                onKeyDown={handleEditKeyDown}
+                className={`form-control${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
+                useShortValue={true}
+              />
+              {!isValidCommunity(editingValue) && (
+                <div className="invalid-feedback d-block">
+                  Введите корректное значение community (число или N:N).
                 </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)}
diff --git a/frontend/src/IPRangesManager.jsx b/frontend/src/IPRangesManager.jsx
index e0a1b3b..5c1d26a 100644
--- a/frontend/src/IPRangesManager.jsx
+++ b/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,57 +1085,41 @@ function IPRangesManager() {
         placeholder={'192.168.1.0/24 65000:100'}
       />
       {/* Модальное окно редактирования community */}
-      {editModalOpen && itemBeingEdited && (
-        <div className="modal modal-blur fade show" style={{ display: 'block' }} tabIndex="-1">
-          <div className="modal-dialog modal-dialog-centered" role="document">
-            <div className="modal-content">
-              <button
-                type="button"
-                className="btn-close"
-                onClick={handleCancelEdit}
-                aria-label="Закрыть"
-              ></button>
-              <div className="modal-header">
-                <h3 className="modal-title">Редактировать community</h3>
-              </div>
-              <div className="modal-body">
-                <p className="text-muted mb-2">
-                  IP-диапазон: <span className="font-monospace">{itemBeingEdited.ipRange}</span>
-                </p>
-                <div className="mb-3">
-                  <label className="form-label">Community</label>
-                  <CommunityAutocompleteInput
-                    value={editingValue}
-                    onChange={setEditingValue}
-                    communities={communities}
-                    onKeyDown={handleEditKeyDown}
-                    className={`form-control${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
-                    useShortValue={true}
-                  />
-                  {!isValidCommunity(editingValue) && (
-                    <div className="invalid-feedback d-block">
-                      Введите корректное значение community (число или N:N).
-                    </div>
-                  )}
+      <FormModal
+        show={editModalOpen && !!itemBeingEdited}
+        onClose={handleCancelEdit}
+        onSubmit={handleSaveEdit}
+        title="Редактировать community"
+        submitLabel="Сохранить"
+        submitIcon={IconCheck}
+        size="md"
+        centered
+        disabled={!isValidCommunity(editingValue)}
+      >
+        {itemBeingEdited && (
+          <>
+            <p className="text-muted mb-2">
+              IP-диапазон: <span className="font-monospace">{itemBeingEdited.ipRange}</span>
+            </p>
+            <div className="mb-3">
+              <label className="form-label">Community</label>
+              <CommunityAutocompleteInput
+                value={editingValue}
+                onChange={setEditingValue}
+                communities={communities}
+                onKeyDown={handleEditKeyDown}
+                className={`form-control${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
+                useShortValue={true}
+              />
+              {!isValidCommunity(editingValue) && (
+                <div className="invalid-feedback d-block">
+                  Введите корректное значение community (число или N:N).
                 </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}