Fixed Packages, Firewall and Server tabs.

web/js/react/src/ControlPanelService/Firewalls.js

@@ -17,16 +17,17 @@ export const getBanList = () => {
   return axios.get(BASE_URL + banListUri);
 }
 
-export const bulkAction = (action, firewalls) => {
+export const bulkAction = (action, ips, banIps) => {
   const formData = new FormData();
   formData.append("action", action);
   formData.append("token", getAuthToken());
 
-  firewalls.forEach(firewall => {
+  ips.forEach(ip => {
-    formData.append("rule[]", firewall);
+    const banIp = banIps.find(banIp => banIp.NAME === ip);
+    formData.append("ipchain[]", `${ip}:${banIp['CHAIN']}`);
   });
 
-  return axios.post(BASE_URL + '/api/v1/bulk/firewall/', formData);
+  return axios.post(BASE_URL + '/api/v1/bulk/firewall/banlist/', formData);
 };
 
 export const handleAction = uri => {
@@ -54,11 +55,13 @@ export const getBanIps = data => {
 export const addBanIp = (data) => {
   let formDataObject = new FormData();
 
+  formDataObject.append('token', getAuthToken());
+
   for (let key in data) {
     formDataObject.append(key, data[key]);
   }
 
-  return axios.get(BASE_URL + addBanIpsUri, {
+  return axios.post(BASE_URL + addBanIpsUri, formDataObject, {
     params: {
       token: getAuthToken()
     }

web/js/react/src/ControlPanelService/Updates.js

@@ -1,8 +1,8 @@
 import axios from "axios";
 import { getAuthToken } from "src/utils/token";
 
-const deleteAutoUpdateUri = '/delete/cron/autoupdate/';
+const deleteAutoUpdateUri = '/api/v1/delete/cron/autoupdate/';
-const addAutoUpdateUri = '/add/cron/autoupdate/';
+const addAutoUpdateUri = '/api/v1/add/cron/autoupdate/';
 const webApiUri = '/api/v1/list/updates/index.php';
 const BASE_URL = window.location.origin;
 

web/js/react/src/components/ControlPanel/AddItemLayout/AddItemLayout.scss

@@ -207,7 +207,7 @@ $errorColor: #BE5ABF;
     label.label-wrapper {
       display: flex;
       align-items: flex-end;
-      width: fit-content;
+      width: max-content;
 
       span {
         font-weight: normal;

web/js/react/src/components/Firewall/Add/AddFirewall.scss

@@ -1,6 +1,6 @@
 .content .edit-template.add-firewall {
   .toolbar .search-toolbar-name {
-    width: fit-content;
+    width: max-content;
   }
 
   label.label-wrapper[for=ip] span {

web/js/react/src/components/Firewall/Add/Banlist/index.jsx

@@ -43,15 +43,18 @@ const AddBanIP = () => {
     }
 
     if (Object.keys(newUser).length !== 0 && newUser.constructor === Object) {
+      setState({ ...state, loading: true });
       addBanIp(newUser)
         .then(result => {
           if (result.status === 200) {
             const { error_msg, ok_msg } = result.data;
 
             if (error_msg) {
-              setState({ ...state, errorMessage: error_msg, okMessage: '' });
+              setState({ ...state, errorMessage: error_msg, okMessage: '', loading: false });
             } else if (ok_msg) {
-              setState({ ...state, errorMessage: '', okMessage: ok_msg });
+              setState({ ...state, errorMessage: '', okMessage: ok_msg, loading: false });
+            } else {
+              setState({ ...state, loading: false });
             }
           }
         })
@@ -81,6 +84,8 @@ const AddBanIP = () => {
       <AddItemLayout>
         {state.loading ? <Spinner /> :
           <form onSubmit={event => submitFormHandler(event)} id="add-user">
+            <input type="hidden" name="ok" value="add" />
+
             <div class="form-group">
               <label htmlFor="chain">{i18n.Banlist}</label>
               <select class="form-control" id="chain" name="v_chain">

web/js/react/src/components/Firewall/Ban/index.jsx

@@ -6,14 +6,13 @@ import { useSelector } from 'react-redux';
 
 const Ban = ({ data, ...props }) => {
   const { i18n } = useSelector(state => state.session);
-  const token = localStorage.getItem("token");
 
   const checkItem = () => {
     props.checkItem(data.NAME);
   }
 
   const handleDelete = () => {
-    props.handleModal(data.delete_conf, `/api/v1/delete/firewall/banlist/?ip=${data.NAME}&chain=${data.CHAIN}`);
+    props.handleModal(data.delete_confirmation, `/api/v1/delete/firewall/banlist/?ip=${data.NAME}&chain=${data.CHAIN}`);
   }
 
   return (
@@ -32,10 +31,10 @@ const Ban = ({ data, ...props }) => {
             <div></div>
           </Container>
           <Container className="c-2 w-30">
-            <div>{data.CHAIN}</div>
+            <div><b>{data.CHAIN}</b></div>
           </Container>
           <Container className="c-2 w-30">
-            <div>{data.NAME}</div>
+            <div><b>{data.NAME}</b></div>
           </Container>
         </div>
       </Container>

web/js/react/src/components/Firewall/Edit/EditFirewall.jsx

@@ -13,8 +13,6 @@ import QS from 'qs';
 
 import './EditFirewall.scss';
 import { Helmet } from 'react-helmet';
-import { checkAuthHandler } from 'src/actions/Session/sessionActions';
-import { refreshCounters } from 'src/actions/MenuCounters/menuCounterActions';
 import HtmlParser from 'react-html-parser';
 
 const EditFirewall = props => {
@@ -37,6 +35,11 @@ const EditFirewall = props => {
     dispatch(removeFocusedElement());
 
     if (rule) {
+      fetchData(rule);
+    }
+  }, []);
+
+  const fetchData = rule => {
     setState({ ...state, loading: true });
 
     getFirewallInfo(rule)
@@ -51,7 +54,6 @@ const EditFirewall = props => {
       })
       .catch(err => console.error(err));
   }
-  }, []);
 
   const submitFormHandler = event => {
     event.preventDefault();
@@ -64,7 +66,7 @@ const EditFirewall = props => {
     if (Object.keys(updatedDomain).length !== 0 && updatedDomain.constructor === Object) {
       setState({ ...state, loading: true });
 
-      updateFirewall(updatedDomain, state.data.domain)
+      updateFirewall(updatedDomain, state.data.rule)
         .then(result => {
           if (result.status === 200) {
             const { error_msg: errorMessage, ok_msg: okMessage } = result.data;
@@ -72,12 +74,11 @@ const EditFirewall = props => {
             if (errorMessage) {
               setState({ ...state, errorMessage, okMessage, loading: false });
             } else {
-              dispatch(refreshCounters()).then(() => {
               setState({ ...state, okMessage, errorMessage: '', loading: false });
-              });
             }
           }
         })
+        .then(() => fetchData(state.data.rule))
         .catch(err => console.error(err));
     }
   }

web/js/react/src/components/Firewall/Firewall.jsx

@@ -7,19 +7,18 @@ import './Firewall.scss';
 import { useSelector } from 'react-redux';
 
 const Firewall = ({ data, ...props }) => {
-  const token = localStorage.getItem("token");
   const { i18n } = useSelector(state => state.session);
 
   const toggleFav = (starred) => {
     if (starred) {
-      props.toggleFav(props.data.NAME, 'add');
+      props.toggleFav(data.NAME, 'add');
     } else {
-      props.toggleFav(props.data.NAME, 'delete');
+      props.toggleFav(data.NAME, 'delete');
     }
   }
 
   const checkItem = () => {
-    props.checkItem(props.data.NAME);
+    props.checkItem(data.NAME);
   }
 
   const handleSuspend = () => {

web/js/react/src/components/Log/Log.scss

@@ -1,6 +1,6 @@
 .logs-list {
   .toolbar {
-    padding: 6px 12.5%;
+    padding: 6px 13%;
   }
 
   .statistic-item {

web/js/react/src/components/MailAccount/Add/AddMailAccount.scss

@@ -1,6 +1,6 @@
 .content .edit-template.add-mail-account {
   .search-toolbar-name {
-    width: fit-content;
+    width: max-content;
   }
 
   form {

web/js/react/src/components/MainNav/Toolbar/Toolbar.scss

@@ -21,7 +21,7 @@ $textColor: #555;
   left: 0;
   width: 100%;
   z-index: 1;
-  padding: 3px 10% 1px;
+  padding: 3px 13% 1px;
   border-top: 1px solid #e0e0e0;
   border-bottom: 1px solid #e0e0e0;
 

web/js/react/src/components/Package/Add/AddPackage.scss

@@ -3,7 +3,7 @@
     label.label-wrapper {
       display: flex;
       align-items: flex-end;
-      width: fit-content;
+      width: max-content;
 
       span {
         font-weight: normal;

web/js/react/src/components/Server/Edit/Bind9/Bind9.scss

@@ -1,7 +1,7 @@
 .content .edit-template.edit-bind9 {
   .toolbar {
     .search-toolbar-name {
-      width: fit-content;
+      width: max-content;
     }
   }
 

web/js/react/src/components/Server/Edit/Dovecot/Dovecot.scss

@@ -1,7 +1,7 @@
 .content .edit-template.edit-bind9 {
   .toolbar {
     .search-toolbar-name {
-      width: fit-content;
+      width: max-content;
     }
   }
 

web/js/react/src/components/Server/Edit/EditServer.scss

@@ -121,7 +121,7 @@ $textColor: #555;
           padding: 7px 15px;
           text-transform: capitalize;
           text-decoration: none;
-          width: fit-content;
+          width: max-content;
           margin-right: 10px;
 
           &:hover {

web/js/react/src/components/Server/Edit/Httpd/EditHttpd.scss

@@ -4,7 +4,7 @@ $secondaryLight: #f8b014;
 .content .edit-template.edit-httpd {
   .toolbar {
     .search-toolbar-name {
-      width: fit-content;
+      width: max-content;
 
       a {
         color: $secondary;
@@ -17,7 +17,7 @@ $secondaryLight: #f8b014;
     }
 
     .link {
-      width: fit-content;
+      width: max-content;
       margin-left: 15px;
 
       a {

web/js/react/src/components/Server/Edit/Mysql/Mysql.scss

@@ -1,7 +1,7 @@
 .content .edit-template.edit-mysql {
   .toolbar {
     .search-toolbar-name {
-      width: fit-content;
+      width: max-content;
     }
   }
 

web/js/react/src/components/Server/Edit/Nginx/EditServerNginx.scss

@@ -3,11 +3,11 @@ $secondaryLight: #f8b014;
 .content .edit-template.edit-nginx {
   .toolbar {
     .search-toolbar-name {
-      width: fit-content;
+      width: max-content;
     }
 
     .link {
-      width: fit-content;
+      width: max-content;
       margin-left: 15px;
 
       a {

web/js/react/src/components/Server/Edit/PHP/EditPhp.scss

@@ -5,13 +5,13 @@ $textColor: #555;
 .content .edit-template.edit-php {
   .toolbar {
     .search-toolbar-name {
-      width: fit-content;
+      width: max-content;
       color: $textColor;
     }
     
     .search-toolbar-name,
     .link {
-      width: fit-content;
+      width: max-content;
 
       a {
         text-decoration: none;

web/js/react/src/components/Server/Edit/Postgresql/Postgresql.scss

@@ -1,7 +1,7 @@
 .content .edit-template.edit-pgsql {
   .toolbar {
     .search-toolbar-name {
-      width: fit-content;
+      width: max-content;
     }
   }
 

web/js/react/src/components/Server/Edit/Service/Service.scss

@@ -1,7 +1,7 @@
 .content .edit-template.edit-service {
   .toolbar {
     .search-toolbar-name {
-      width: fit-content;
+      width: max-content;
     }
   }
 

web/js/react/src/components/WebDomain/Edit/SslSupport/SslSupport.scss

@@ -19,7 +19,7 @@ $textColor: #555;
         }
 
         &:nth-child(2) {
-          width: fit-content;
+          width: max-content;
         }
       }
     }

web/js/react/src/containers/Firewalls/Banlist/index.jsx

@@ -233,11 +233,11 @@ const BanLists = props => {
     const { selection } = state;
 
     if (selection.length && action) {
-      bulkAction(action, selection)
+      bulkAction(action, selection, state.banIps)
         .then(result => {
           if (result.status === 200) {
             toggleAll(false);
-            fetchData().then(() => refreshMenuCounters());
+            fetchData();
           }
         })
         .catch(err => console.error(err));
@@ -261,15 +261,11 @@ const BanLists = props => {
           setLoading(false);
           return displayModal(res.data.error, '');
         }
-        fetchData().then(() => refreshMenuCounters())
+        fetchData();
       })
       .catch(err => { setLoading(false); console.error(err); });
   }
 
-  const refreshMenuCounters = () => {
-    dispatch(refreshCounters()).then(() => setLoading(false));
-  }
-
   const modalCancelHandler = () => {
     setModal({ ...modal, visible: !modal.visible, text: '', actionUrl: '' });
   }
@@ -289,18 +285,18 @@ const BanLists = props => {
           </div>
         </div>
       </Toolbar>
-      <div className="banlist-wrapper">
       {loading
         ? <Spinner />
         : (<>
+          <div className="banlist-wrapper">
             {banIps()}
             <div className="buttons-wrapper">
               <div className="total">{state.totalAmount}</div>
               <button type="button" className="back" onClick={() => history.push('/list/firewall/')}>{i18n.Back}</button>
             </div>
+          </div>
         </>)
       }
-      </div>
       <Modal
         onSave={modalConfirmHandler}
         onCancel={modalCancelHandler}

web/js/react/src/containers/Firewalls/Banlist/styles.scss

@@ -1,10 +1,21 @@
 .banlist-wrapper {
   display: flex;
+  flex-direction: column;
 
   > div {
     margin-right: 15px;
   }
 
+  .list-item {
+    .l-col {
+      div.star  {
+        .checkbox + div {
+          display: none;
+        }
+      }
+    }
+  }
+
   .buttons-wrapper {
     width: 100%;
     display: flex;

web/js/react/src/containers/RRDs/RRDs.scss

@@ -18,7 +18,7 @@ div.content {
   color: $textColor;
 
   .toolbar {
-    padding: 6px 12.5%;
+    padding: 6px 13%;
   }
 
   .rrd-item {

web/js/react/src/containers/Statistics/Statistics.scss

@@ -2,7 +2,7 @@
   color: #686868;
 
   .toolbar {
-    padding: 6px 12.5%;
+    padding: 6px 13%;
   }
 
   .l-col {

web/js/react/src/containers/Updates/Updates.jsx

@@ -5,6 +5,7 @@ import { bulkAction, getUpdatesList, enableAutoUpdate, disableAutoUpdate } from
 import * as MainNavigation from '../../actions/MainNavigation/mainNavigationActions';
 import SearchInput from '../../components/MainNav/Toolbar/SearchInput/SearchInput';
 import LeftButton from '../../components/MainNav/Toolbar/LeftButton/LeftButton';
+import Modal from 'src/components/ControlPanel/Modal/Modal';
 import Checkbox from '../../components/MainNav/Toolbar/Checkbox/Checkbox';
 import Select from '../../components/MainNav/Toolbar/Select/Select';
 import Toolbar from '../../components/MainNav/Toolbar/Toolbar';
@@ -27,6 +28,11 @@ const Updates = props => {
     loading: false,
     toggledAll: false
   });
+  const [modal, setModal] = useState({
+    text: '',
+    visible: false,
+    actionUrl: ''
+  });
 
   useEffect(() => {
     dispatch(addActiveElement('/list/updates/'));
@@ -126,7 +132,7 @@ const Updates = props => {
           ...state,
           selection: [],
           updates: reformatData(result.data.data),
-          autoUpdate: result.data.totalAmount,
+          autoUpdate: result.data.autoUpdate,
           loading: false
         });
       })
@@ -202,10 +208,16 @@ const Updates = props => {
 
     if (selection.length && action !== 'apply to selected') {
       bulkAction(action, selection)
-        .then(result => {
+        .then(res => {
-          if (result.status === 200) {
-            fetchData();
           toggleAll(false);
+          if (res.status === 200) {
+            if (res.data.error) {
+              setState({ ...state, loading: false });
+              return displayModal(res.data.error, '');
+            }
+
+            displayModal(res.data.message, '');
+            fetchData();
           }
         })
         .catch(err => console.error(err));
@@ -215,13 +227,54 @@ const Updates = props => {
   const handleAutoUpdate = () => {
     if (state.autoUpdate === 'Enabled') {
       disableAutoUpdate()
-        .then(() => fetchData())
+        .then(res => {
-        .catch(err => console.error(err));
+          if (res.data.error) {
+            setState({ ...state, loading: false });
+            return displayModal(res.data.error, '');
+          }
+
+          displayModal(res.data.message, '');
+          fetchData();
+        })
+        .catch(err => {
+          setState({ ...state, loading: false });
+          console.error(err);
+        });
     } else {
       enableAutoUpdate()
-        .then(() => fetchData())
+        .then(res => {
-        .catch(err => console.error(err));
+          if (res.data.error) {
+            setState({ ...state, loading: false });
+            return displayModal(res.data.error, '');
           }
+
+          displayModal(res.data.message, '');
+          fetchData();
+        })
+        .catch(err => {
+          setState({ ...state, loading: false });
+          console.error(err);
+        });
+    }
+  }
+
+  const displayModal = (text, url) => {
+    setState({ ...state, loading: true });
+    setModal({
+      ...modal,
+      visible: true,
+      text: text,
+      actionUrl: url
+    });
+  }
+
+  const modalCancelHandler = () => {
+    setModal({
+      ...modal,
+      visible: false,
+      text: '',
+      actionUrl: ''
+    });
   }
 
   const printAutoUpdateButtonName = () => {
@@ -249,6 +302,11 @@ const Updates = props => {
         </div>
       </Toolbar>
       {state.loading ? <Spinner /> : updates()}
+      <Modal
+        onSave={modalCancelHandler}
+        onCancel={modalCancelHandler}
+        show={modal.visible}
+        text={modal.text} />
     </div>
   );
 }