From 91e7d9ff4a2f66dbdb56afa5d441a02900b85625 Mon Sep 17 00:00:00 2001 From: Alexander Date: Wed, 27 Oct 2021 11:13:28 +0300 Subject: [PATCH 1/3] Updated react UI and UX part. --- .../react/src/ControlPanelService/Backup.js | 2 +- web/js/react/src/ControlPanelService/Dns.js | 19 ++- .../react/src/ControlPanelService/Search.js | 2 +- .../MenuCounters/menuCounterActions.js | 27 ++++ .../actions/MenuCounters/menuCounterTypes.js | 1 + .../src/actions/Session/sessionActions.js | 45 +++++- web/js/react/src/components/Backup/Backup.jsx | 2 +- .../Backup/Exclusion/Edit/index.jsx | 3 +- .../AddItemLayout/AddItemLayout.scss | 27 +++- .../TextInputWithExtraButton.jsx | 6 +- .../TextInputWithTextOnTheRight.jsx | 2 +- .../src/components/CronJob/Add/AddCronJob.jsx | 17 ++- .../react/src/components/CronJob/CronJob.jsx | 4 +- .../components/CronJob/Edit/EditCronJob.jsx | 17 ++- .../components/DNSRecord/Add/AddDNSRecord.jsx | 19 ++- .../src/components/DNSRecord/DNSRecord.jsx | 14 +- .../DNSRecord/Edit/EditDNSRecord.jsx | 17 ++- .../components/Database/Add/AddDatabase.jsx | 34 ++--- .../components/Database/Edit/EditDatabase.jsx | 41 ++++-- .../Database/Edit/EditDatabase.scss | 9 ++ .../Add/AddDomainNameSystem.jsx | 18 +-- .../Edit/EditDomainNameSystem.jsx | 17 ++- .../components/Firewall/Add/AddFirewall.jsx | 17 ++- .../components/Firewall/Add/Banlist/index.jsx | 3 +- .../components/Firewall/Edit/EditFirewall.jsx | 17 ++- .../Add/AddInternetProtocol.jsx | 17 ++- .../Edit/EditInternetProtocol.jsx | 16 +- .../react/src/components/Lists/Row/Row.scss | 4 +- web/js/react/src/components/Log/Log.scss | 10 ++ .../react/src/components/Mail/Add/AddMail.jsx | 18 ++- .../src/components/Mail/Edit/EditMail.jsx | 17 ++- web/js/react/src/components/Mail/Mail.jsx | 2 +- web/js/react/src/components/Mail/Mail.scss | 6 +- .../MailAccount/Add/AddMailAccount.jsx | 18 ++- .../MailAccount/Add/AddMailAccount.scss | 15 ++ .../MailAccount/Edit/EditMailAccount.jsx | 137 +++++++++--------- .../MailInfoBlock/MailInfoBlock.scss | 4 +- .../react/src/components/MainNav/MainNav.jsx | 3 +- .../Panel/Notifications/Notifications.jsx | 15 +- .../src/components/MainNav/Panel/Panel.jsx | 5 +- .../src/components/MainNav/Panel/Panel.scss | 43 ++++-- .../src/components/MainNav/Stat-menu/Menu.jsx | 3 +- .../Toolbar/LeftButton/LeftButton.scss | 6 - .../Toolbar/SearchInput/SearchInput.jsx | 20 ++- .../MainNav/Toolbar/Select/Select.jsx | 10 +- .../components/MainNav/Toolbar/Toolbar.scss | 32 +++- web/js/react/src/components/Modal/Modal.scss | 2 + .../src/components/Package/Add/AddPackage.jsx | 17 ++- .../components/Package/Edit/EditPackage.jsx | 17 ++- .../react/src/components/Package/Package.jsx | 3 +- web/js/react/src/components/Path/Path.jsx | 6 +- .../src/components/Searchitem/SearchItem.jsx | 58 +++++++- .../components/Server/Edit/Bind9/Bind9.jsx | 3 +- .../Server/Edit/Dovecot/Dovecot.jsx | 3 +- .../src/components/Server/Edit/EditServer.jsx | 3 +- .../Server/Edit/Httpd/EditHttpd.jsx | 3 +- .../components/Server/Edit/Mysql/Mysql.jsx | 3 +- .../Server/Edit/Nginx/EditServerNginx.jsx | 3 +- .../components/Server/Edit/PHP/EditPhp.jsx | 3 +- .../Server/Edit/Postgresql/Postgresql.jsx | 3 +- .../Server/Edit/Service/Service.jsx | 3 +- .../src/components/TopPanel/TopPanel.jsx | 3 +- .../react/src/components/User/Add/AddUser.jsx | 25 ++-- .../src/components/User/Edit/EditUser.jsx | 17 ++- web/js/react/src/components/User/User.jsx | 3 +- web/js/react/src/components/User/User.scss | 1 + .../components/WebDomain/Add/AddWebDomain.jsx | 17 ++- .../AdditionalFtpForEditing.jsx | 125 ++++++++-------- .../AdditionalFtpWrapper.jsx | 25 ++-- .../AdditionalFtpWrapper.scss | 48 ++++++ .../src/components/WebDomain/Edit/EditWeb.jsx | 17 ++- .../src/components/WebDomain/WebDomain.jsx | 4 +- .../src/components/WebDomain/WebDomain.scss | 2 +- web/js/react/src/containers/App/App.js | 4 - web/js/react/src/containers/App/App.scss | 4 + .../react/src/containers/Backups/Backups.jsx | 86 +++++++---- .../ControlPanelContent.jsx | 9 +- .../src/containers/CronJobs/CronJobs.jsx | 78 ++++++---- .../src/containers/DNSRecords/DNSRecords.jsx | 72 +++++---- .../src/containers/DNSRecords/DNSRecords.scss | 1 + .../src/containers/Databases/Databases.jsx | 71 +++++---- .../DomainNameSystems/DomainNameSystems.jsx | 72 +++++---- .../src/containers/FileManager/FileManager.js | 15 +- .../containers/Firewalls/Banlist/index.jsx | 65 ++++++--- .../src/containers/Firewalls/Firewalls.jsx | 77 ++++++---- .../InternetProtocols/InternetProtocols.jsx | 74 ++++++---- .../containers/MailAccounts/MailAccounts.jsx | 71 +++++---- .../containers/MailAccounts/MailAccounts.scss | 2 + web/js/react/src/containers/Mails/Mails.jsx | 70 +++++---- .../src/containers/Packages/Packages.jsx | 68 +++++---- web/js/react/src/containers/RRDs/RRDs.scss | 10 +- web/js/react/src/containers/Search/Search.jsx | 66 ++++++--- .../react/src/containers/Servers/Servers.jsx | 67 +++++---- .../src/containers/Statistics/Statistics.scss | 8 +- web/js/react/src/containers/Users/Users.jsx | 67 +++++---- web/js/react/src/containers/Web/Web.jsx | 70 +++++---- .../react/src/containers/WebLogs/WebLogs.jsx | 3 +- .../MenuCounters/menuCounterReducer.js | 19 +++ .../Notification/notificationReducer.js | 2 +- .../src/reducers/Session/sessionReducer.js | 5 - web/js/react/src/reducers/rootReducer.js | 2 + 101 files changed, 1524 insertions(+), 832 deletions(-) create mode 100644 web/js/react/src/actions/MenuCounters/menuCounterActions.js create mode 100644 web/js/react/src/actions/MenuCounters/menuCounterTypes.js create mode 100644 web/js/react/src/reducers/MenuCounters/menuCounterReducer.js diff --git a/web/js/react/src/ControlPanelService/Backup.js b/web/js/react/src/ControlPanelService/Backup.js index 42c5d37f3..92ee7654f 100644 --- a/web/js/react/src/ControlPanelService/Backup.js +++ b/web/js/react/src/ControlPanelService/Backup.js @@ -3,7 +3,7 @@ import { getAuthToken } from "src/utils/token"; const BASE_URL = window.location.origin; const webApiUri = '/api/v1/list/backup/index.php'; -const scheduleBackupUri = '/schedule/backup/'; +const scheduleBackupUri = '/api/v1/schedule/restore/'; const backupDetailsUri = '/api/v1/list/backup/index.php'; const backupExclusionsUri = '/api/v1/list/backup/exclusions/index.php'; const backupExclusionsInfoUri = '/api/v1/edit/backup/exclusions/index.php'; diff --git a/web/js/react/src/ControlPanelService/Dns.js b/web/js/react/src/ControlPanelService/Dns.js index d9258cb90..fb60f3ba6 100644 --- a/web/js/react/src/ControlPanelService/Dns.js +++ b/web/js/react/src/ControlPanelService/Dns.js @@ -19,13 +19,26 @@ export const getDNSRecordInfo = (domain, recordId) => { return axios.get(`${BASE_URL}${updateDNSUri}?domain=${domain}&record_id=${recordId}`); } -export const bulkAction = (action, domainNameSystems) => { +export const bulkDomainAction = (action, domains) => { const formData = new FormData(); formData.append("action", action); formData.append("token", getAuthToken()); - domainNameSystems.forEach(domainNameSystem => { - formData.append("domain[]", domainNameSystem); + domains.forEach(record => { + formData.append("domain[]", record); + }); + + return axios.post(BASE_URL + '/api/v1/bulk/dns/', formData); +}; + +export const bulkAction = (action, records, domain) => { + const formData = new FormData(); + formData.append("action", action); + formData.append("token", getAuthToken()); + formData.append("domain", domain); + + records.forEach(record => { + formData.append("record[]", record); }); return axios.post(BASE_URL + '/api/v1/bulk/dns/', formData); diff --git a/web/js/react/src/ControlPanelService/Search.js b/web/js/react/src/ControlPanelService/Search.js index 187859720..c0f2fc884 100644 --- a/web/js/react/src/ControlPanelService/Search.js +++ b/web/js/react/src/ControlPanelService/Search.js @@ -2,7 +2,7 @@ import axios from "axios"; import { getAuthToken } from "src/utils/token"; const BASE_URL = window.location.origin; -const webApiUri = '/search/search.php'; +const webApiUri = '/api/v1/search/'; export const getSearchResultsList = term => { return axios.get(BASE_URL + webApiUri + '?q=' + term); diff --git a/web/js/react/src/actions/MenuCounters/menuCounterActions.js b/web/js/react/src/actions/MenuCounters/menuCounterActions.js new file mode 100644 index 000000000..8dc5fcf5b --- /dev/null +++ b/web/js/react/src/actions/MenuCounters/menuCounterActions.js @@ -0,0 +1,27 @@ +import { REFRESH_COUNTERS } from './menuCounterTypes'; +import { checkAuth } from 'src/services/session'; +import { setAuthToken } from 'src/utils/token'; + +export const refreshCounters = () => (dispatch, getState) => { + return new Promise((resolve, reject) => { + checkAuth() + .then(res => { + const { data, token } = res.data; + + if (token) setAuthToken(token); + + dispatch({ + type: REFRESH_COUNTERS, + value: { + user: data + } + }); + + resolve(token); + }) + .catch(err => { + reject(); + console.error(err); + }); + }); +} diff --git a/web/js/react/src/actions/MenuCounters/menuCounterTypes.js b/web/js/react/src/actions/MenuCounters/menuCounterTypes.js new file mode 100644 index 000000000..e5175d6b0 --- /dev/null +++ b/web/js/react/src/actions/MenuCounters/menuCounterTypes.js @@ -0,0 +1 @@ +export const REFRESH_COUNTERS = 'REFRESH_COUNTERS'; \ No newline at end of file diff --git a/web/js/react/src/actions/Session/sessionActions.js b/web/js/react/src/actions/Session/sessionActions.js index 8fedafc35..b1cd92651 100644 --- a/web/js/react/src/actions/Session/sessionActions.js +++ b/web/js/react/src/actions/Session/sessionActions.js @@ -2,6 +2,7 @@ import { LOGIN, LOGOUT, LOGGED_OUT_AS, CHECK_AUTH, RESET_PASSWORD } from './sess import { checkAuth, signIn, signInAs, signOut } from 'src/services/session'; import { resetPassword } from 'src/ControlPanelService/ResetPassword'; import { resetAuthToken, setAuthToken } from 'src/utils/token'; +import { REFRESH_COUNTERS } from '../MenuCounters/menuCounterTypes'; const LOGOUT_RESPONSE = 'logged_out'; const LOGOUT_AS_RESPONSE = 'logged_out_as'; @@ -21,10 +22,15 @@ export const login = (user, password) => dispatch => { session, i18n: i18n || {}, userName: user, - user: data, error }, }); + dispatch({ + type: REFRESH_COUNTERS, + value: { + user: data, + } + }); resolve(token); }, (error) => { reject(error); @@ -44,10 +50,15 @@ export const reset = ({ user = '', code = '', password = '', password_confirm = panel, session, userName: user, - user: {}, error }, }); + dispatch({ + type: REFRESH_COUNTERS, + value: { + user: {}, + } + }); resolve(token); }, (error) => { reject(error); @@ -65,7 +76,6 @@ export const loginAs = username => dispatch => { type: LOGIN, value: { userName: user, - user: data, i18n, session, panel, @@ -73,6 +83,12 @@ export const loginAs = username => dispatch => { error } }); + dispatch({ + type: REFRESH_COUNTERS, + value: { + user: data, + } + }); resolve(token); }, (error) => { @@ -94,7 +110,6 @@ export const logout = () => (dispatch, getState) => { type: LOGOUT, value: { userName: '', - user: {}, token: '', panel: {}, session: {}, @@ -102,6 +117,12 @@ export const logout = () => (dispatch, getState) => { error, }, }); + dispatch({ + type: REFRESH_COUNTERS, + value: { + user: {}, + } + }); resolve(); } else if (logout_response === LOGOUT_AS_RESPONSE) { @@ -109,7 +130,6 @@ export const logout = () => (dispatch, getState) => { type: LOGGED_OUT_AS, value: { userName, - user, session, panel, token: '', @@ -117,6 +137,12 @@ export const logout = () => (dispatch, getState) => { error, }, }); + dispatch({ + type: REFRESH_COUNTERS, + value: { + user, + } + }); resolve(); } else { @@ -135,11 +161,12 @@ export const checkAuthHandler = () => (dispatch, getState) => { .then(res => { const { user, data, session, panel, error, i18n, token } = res.data; + if (token) setAuthToken(token); + dispatch({ type: CHECK_AUTH, value: { userName: user, - user: data, i18n, session, panel, @@ -147,6 +174,12 @@ export const checkAuthHandler = () => (dispatch, getState) => { error } }); + dispatch({ + type: REFRESH_COUNTERS, + value: { + user: data, + } + }); resolve(token); }) diff --git a/web/js/react/src/components/Backup/Backup.jsx b/web/js/react/src/components/Backup/Backup.jsx index e0e02c08a..b1c8d0d18 100644 --- a/web/js/react/src/components/Backup/Backup.jsx +++ b/web/js/react/src/components/Backup/Backup.jsx @@ -57,7 +57,7 @@ const Backup = props => { {data.UPDATED === 'no' &&
{i18n.update}
}
- + {i18n.download} {data.FOCUSED ? D : } diff --git a/web/js/react/src/components/Backup/Exclusion/Edit/index.jsx b/web/js/react/src/components/Backup/Exclusion/Edit/index.jsx index 12dfba2f8..9b2d7e970 100644 --- a/web/js/react/src/components/Backup/Exclusion/Edit/index.jsx +++ b/web/js/react/src/components/Backup/Exclusion/Edit/index.jsx @@ -11,6 +11,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { Helmet } from 'react-helmet'; import './style.scss'; +import HtmlParser from 'react-html-parser'; const EditBackupExclusions = () => { const token = localStorage.getItem("token"); @@ -90,7 +91,7 @@ const EditBackupExclusions = () => {
- {state.okMessage ? : ''} + {state.okMessage ? : ''} {HtmlParser(state.okMessage)}
diff --git a/web/js/react/src/components/ControlPanel/AddItemLayout/AddItemLayout.scss b/web/js/react/src/components/ControlPanel/AddItemLayout/AddItemLayout.scss index 7a7b32498..b4c255476 100644 --- a/web/js/react/src/components/ControlPanel/AddItemLayout/AddItemLayout.scss +++ b/web/js/react/src/components/ControlPanel/AddItemLayout/AddItemLayout.scss @@ -32,7 +32,7 @@ $errorColor: #BE5ABF; div.error, div.success { - width: fit-content !important; + width: max-content !important; span { font-weight: bold; @@ -40,6 +40,7 @@ $errorColor: #BE5ABF; svg { font-size: 13px; + margin-right: 10px; } } @@ -151,10 +152,24 @@ $errorColor: #BE5ABF; } } - textarea { - &:focus { - background: #D7F9FF; - } + input:-webkit-autofill, + input:-webkit-autofill:hover, + input:-webkit-autofill:focus, + input:-webkit-autofill:active { + background-color: $primaryLight; + border-color: $primaryActive; + filter: none; + box-shadow: none; + } + + input:autofill, + input:autofill:hover, + input:autofill:focus, + input:autofill:active { + background-color: $primaryLight; + border-color: $primaryActive; + filter: none; + box-shadow: none; } button { @@ -180,7 +195,7 @@ $errorColor: #BE5ABF; &:active { box-shadow: unset; border-color: $primaryActive; - background: #D7F9FF; + background: #d7dcef9e; } } diff --git a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextInputWithExtraButton/TextInputWithExtraButton.jsx b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextInputWithExtraButton/TextInputWithExtraButton.jsx index 7895e3cb1..bab4c6698 100644 --- a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextInputWithExtraButton/TextInputWithExtraButton.jsx +++ b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextInputWithExtraButton/TextInputWithExtraButton.jsx @@ -7,11 +7,7 @@ const TextInputWithExtraButton = props => { }); useEffect(() => { - if (props.value !== 'unlimited') { - setState({ ...state, value: state.previousValue }); - } else { - setState({ ...state, value: props.value }); - } + setState({ ...state, value: props.value }); }, [props.value]); useEffect(() => { diff --git a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextInputWithTextOnTheRight/TextInputWithTextOnTheRight.jsx b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextInputWithTextOnTheRight/TextInputWithTextOnTheRight.jsx index b6b35ba83..1b7f9d0d6 100644 --- a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextInputWithTextOnTheRight/TextInputWithTextOnTheRight.jsx +++ b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextInputWithTextOnTheRight/TextInputWithTextOnTheRight.jsx @@ -27,7 +27,7 @@ const TextInputWithTextOnTheRight = ({ id, title, name, defaultValue = '', optio onChange={event => setInputValue(event.target.value)} disabled={disabled} name={name} /> - {`admin_${inputValue}`} + {`${inputValue}`} ); diff --git a/web/js/react/src/components/CronJob/Add/AddCronJob.jsx b/web/js/react/src/components/CronJob/Add/AddCronJob.jsx index ed4bfdec5..e9d52c12c 100644 --- a/web/js/react/src/components/CronJob/Add/AddCronJob.jsx +++ b/web/js/react/src/components/CronJob/Add/AddCronJob.jsx @@ -12,6 +12,8 @@ import { useDispatch, useSelector } from 'react-redux'; import './AddCronJob.scss'; import { Helmet } from 'react-helmet'; +import { refreshCounters } from 'src/actions/MenuCounters/menuCounterActions'; +import HtmlParser from 'react-html-parser'; const AddCronJob = props => { const { i18n } = useSelector(state => state.session); @@ -46,18 +48,17 @@ const AddCronJob = props => { if (Object.keys(newCronJob).length !== 0 && newCronJob.constructor === Object) { setState({ ...state, loading: true }); - addCronJob(newCronJob) .then(result => { if (result.status === 200) { - const { error_msg, ok_msg } = result.data; + const { error_msg: errorMessage, ok_msg: okMessage } = result.data; - if (error_msg) { - setState({ ...state, errorMessage: error_msg, okMessage: '', loading: false }); - } else if (ok_msg) { - setState({ ...state, errorMessage: '', okMessage: ok_msg, loading: false }); + if (errorMessage) { + setState({ ...state, errorMessage, okMessage, loading: false }); } else { - setState({ ...state, loading: false }) + dispatch(refreshCounters()).then(() => { + setState({ ...state, okMessage, errorMessage: '', loading: false }); + }); } } }) @@ -100,7 +101,7 @@ const AddCronJob = props => {
{state.okMessage ? : ''} - + {HtmlParser(state.okMessage)}
diff --git a/web/js/react/src/components/CronJob/CronJob.jsx b/web/js/react/src/components/CronJob/CronJob.jsx index 253e9a8cc..0d4c8099d 100644 --- a/web/js/react/src/components/CronJob/CronJob.jsx +++ b/web/js/react/src/components/CronJob/CronJob.jsx @@ -25,11 +25,11 @@ const CronJob = props => { const handleSuspend = () => { let suspendedStatus = data.SUSPENDED === 'yes' ? 'unsuspend' : 'suspend' === 'yes' ? 'unsuspend' : 'suspend'; - props.handleModal(data.suspend_conf, `/${suspendedStatus}/cron/index.php?job=${data.NAME}`); + props.handleModal(data.suspend_conf, `/api/v1/${suspendedStatus}/cron/index.php?job=${data.NAME}`); } const handleDelete = () => { - props.handleModal(data.delete_conf, `/delete/cron/index.php?job=${data.NAME}`); + props.handleModal(data.delete_conf, `/api/v1/delete/cron/index.php?job=${data.NAME}`); } return ( diff --git a/web/js/react/src/components/CronJob/Edit/EditCronJob.jsx b/web/js/react/src/components/CronJob/Edit/EditCronJob.jsx index ad0274727..376832fd7 100644 --- a/web/js/react/src/components/CronJob/Edit/EditCronJob.jsx +++ b/web/js/react/src/components/CronJob/Edit/EditCronJob.jsx @@ -13,6 +13,9 @@ import QS from 'qs'; import './EditCronJob.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 EditMail = props => { const token = localStorage.getItem("token"); @@ -79,14 +82,14 @@ const EditMail = props => { updateCronJob(updatedJob, state.data.job) .then(result => { if (result.status === 200) { - const { error_msg, ok_msg } = result.data; + const { error_msg: errorMessage, ok_msg: okMessage } = result.data; - if (error_msg) { - setState({ ...state, errorMessage: error_msg, okMessage: '', loading: false }); - } else if (ok_msg) { - setState({ ...state, errorMessage: '', okMessage: ok_msg, loading: false }); + if (errorMessage) { + setState({ ...state, errorMessage, okMessage, loading: false }); } else { - setState({ ...state, loading: false }); + dispatch(refreshCounters()).then(() => { + setState({ ...state, okMessage, errorMessage: '', loading: false }); + }); } } }) @@ -128,7 +131,7 @@ const EditMail = props => {
- {state.okMessage ? : ''} + {state.okMessage ? : ''} {HtmlParser(state.okMessage)}
diff --git a/web/js/react/src/components/DNSRecord/Add/AddDNSRecord.jsx b/web/js/react/src/components/DNSRecord/Add/AddDNSRecord.jsx index 24030276a..084a7b580 100644 --- a/web/js/react/src/components/DNSRecord/Add/AddDNSRecord.jsx +++ b/web/js/react/src/components/DNSRecord/Add/AddDNSRecord.jsx @@ -5,7 +5,6 @@ import SelectInput from 'src/components/ControlPanel/AddItemLayout/Form/SelectIn import TextInput from 'src/components/ControlPanel/AddItemLayout/Form/TextInput/TextInput'; import AddItemLayout from '../../ControlPanel/AddItemLayout/AddItemLayout'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { addMail } from '../../../ControlPanelService/Mail'; import { addDomainNameSystemRecord } from '../../../ControlPanelService/Dns'; import Toolbar from '../../MainNav/Toolbar/Toolbar'; import { useHistory } from 'react-router-dom'; @@ -14,6 +13,8 @@ import { useDispatch, useSelector } from 'react-redux'; import './AddDNSRecord.scss' import { Helmet } from 'react-helmet'; +import { refreshCounters } from 'src/actions/MenuCounters/menuCounterActions'; +import HtmlParser from 'react-html-parser'; export default function AddDNSRecord(props) { const { i18n } = useSelector(state => state.session); @@ -61,16 +62,18 @@ export default function AddDNSRecord(props) { newDnsRecord['v_domain'] = props.domain; if (Object.keys(newDnsRecord).length !== 0 && newDnsRecord.constructor === Object) { - setState({ loading: true }); + setState({ ...state, loading: true }); addDomainNameSystemRecord(newDnsRecord) .then(result => { if (result.status === 200) { - const { error_msg, ok_msg } = result.data; + const { error_msg: errorMessage, ok_msg: okMessage } = result.data; - if (error_msg) { - setState({ ...state, errorMessage: error_msg, okMessage: '', loading: false }); - } else if (ok_msg) { - setState({ ...state, errorMessage: '', okMessage: ok_msg, loading: false }); + if (errorMessage) { + setState({ ...state, errorMessage, okMessage, loading: false }); + } else { + dispatch(refreshCounters()).then(() => { + setState({ ...state, okMessage, errorMessage: '', loading: false }); + }); } } }) @@ -94,7 +97,7 @@ export default function AddDNSRecord(props) {
{state.okMessage ? : ''} - + {HtmlParser(state.okMessage)}
diff --git a/web/js/react/src/components/DNSRecord/DNSRecord.jsx b/web/js/react/src/components/DNSRecord/DNSRecord.jsx index e6b19784c..11170ad8b 100644 --- a/web/js/react/src/components/DNSRecord/DNSRecord.jsx +++ b/web/js/react/src/components/DNSRecord/DNSRecord.jsx @@ -7,7 +7,6 @@ import { useSelector } from 'react-redux'; export default function DnsRecord({ data, domain, handleModal, ...props }) { const { i18n } = useSelector(state => state.session); - const token = localStorage.getItem("token"); const toggleFav = (starred) => { if (starred) { @@ -25,6 +24,10 @@ export default function DnsRecord({ data, domain, handleModal, ...props }) { handleModal(data.delete_conf, `/api/v1/delete/dns/?domain=${domain}&record_id=${data.ID}`); } + const handleSuspend = () => { + handleModal(data.suspend_conf, `/api/v1/${data.suspend_action}/dns/?domain=${domain}&record_id=${data.ID}`); + } + return ( +
+ +
+
- {state.okMessage ? : ''} + {state.okMessage ? : ''} {HtmlParser(state.okMessage)}
diff --git a/web/js/react/src/components/Database/Add/AddDatabase.jsx b/web/js/react/src/components/Database/Add/AddDatabase.jsx index fc86b619b..31ae1b7cf 100644 --- a/web/js/react/src/components/Database/Add/AddDatabase.jsx +++ b/web/js/react/src/components/Database/Add/AddDatabase.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { memo, useEffect, useState } from 'react'; import { addActiveElement, removeFocusedElement } from "../../../actions/MainNavigation/mainNavigationActions"; import { dbCharsets, addDatabase, getDbOptionalInfo } from '../../../ControlPanelService/Db'; @@ -9,11 +9,12 @@ import Toolbar from '../../MainNav/Toolbar/Toolbar'; import { useHistory } from 'react-router-dom'; import Spinner from '../../Spinner/Spinner'; import { useDispatch, useSelector } from 'react-redux'; - -import './AddDatabase.scss' import { Helmet } from 'react-helmet'; +import { refreshCounters } from 'src/actions/MenuCounters/menuCounterActions'; +import HtmlParser from 'react-html-parser'; +import './AddDatabase.scss' -const AddDatabase = props => { +const AddDatabase = memo(props => { const { i18n } = useSelector(state => state.session); const token = localStorage.getItem("token"); const dispatch = useDispatch(); @@ -91,23 +92,22 @@ const AddDatabase = props => { newDatabase[name] = value; } - newDatabase['v_database'] = `${state.user}_${state.databaseInputValue}`; - newDatabase['v_dbuser'] = `${state.user}_${state.databaseUserInputValue}`; + newDatabase['v_database'] = state.databaseInputValue; + newDatabase['v_dbuser'] = state.databaseUserInputValue; if (Object.keys(newDatabase).length !== 0 && newDatabase.constructor === Object) { setState({ ...state, loading: true }); - addDatabase(newDatabase) .then(result => { if (result.status === 200) { - const { error_msg, ok_msg } = result.data; + const { error_msg: errorMessage, ok_msg: okMessage } = result.data; - if (error_msg) { - setState({ ...state, errorMessage: error_msg, okMessage: '', loading: false }); - } else if (ok_msg) { - setState({ ...state, errorMessage: '', okMessage: ok_msg, loading: false }); + if (errorMessage) { + setState({ ...state, errorMessage, okMessage: '', loading: false }); } else { - setState({ ...state, loading: false }) + dispatch(refreshCounters()).then(() => { + setState({ ...state, okMessage, errorMessage: '', loading: false }); + }); } } }) @@ -131,7 +131,7 @@ const AddDatabase = props => {
{state.okMessage ? : ''} - + {HtmlParser(state.okMessage)}
@@ -141,7 +141,7 @@ const AddDatabase = props => { - + {HtmlParser(state.prefixI18N)}
@@ -215,6 +215,6 @@ const AddDatabase = props => {
); -} +}); -export default AddDatabase; \ No newline at end of file +export default AddDatabase; diff --git a/web/js/react/src/components/Database/Edit/EditDatabase.jsx b/web/js/react/src/components/Database/Edit/EditDatabase.jsx index f67575aa4..e1babafd5 100644 --- a/web/js/react/src/components/Database/Edit/EditDatabase.jsx +++ b/web/js/react/src/components/Database/Edit/EditDatabase.jsx @@ -14,15 +14,18 @@ import QS from 'qs'; import './EditDatabase.scss'; import { Helmet } from 'react-helmet'; +import { refreshCounters } from 'src/actions/MenuCounters/menuCounterActions'; +import HtmlParser from 'react-html-parser'; const EditDatabase = props => { const token = localStorage.getItem("token"); - const { i18n } = useSelector(state => state.session); + const { i18n, userName } = useSelector(state => state.session); const history = useHistory(); const dispatch = useDispatch(); const [state, setState] = useState({ data: {}, loading: false, + databaseUserInputValue: '', errorMessage: '', okMessage: '' }); @@ -42,6 +45,7 @@ const EditDatabase = props => { setState({ ...state, data: response.data, + databaseUserInputValue: response.data.dbuser.split('_').splice(1).join('_'), errorMessage: response.data['error_msg'], okMessage: response.data['ok_msg'], loading: false @@ -60,6 +64,7 @@ const EditDatabase = props => { } updatedDatabase['v_database'] = state.data.database; + updatedDatabase['v_dbuser'] = `${userName}_${state.databaseUserInputValue}`; if (Object.keys(updatedDatabase).length !== 0 && updatedDatabase.constructor === Object) { setState({ ...state, loading: true }); @@ -67,14 +72,14 @@ const EditDatabase = props => { updateDatabase(updatedDatabase, state.data.database) .then(result => { if (result.status === 200) { - const { error_msg, ok_msg } = result.data; + const { error_msg: errorMessage, ok_msg: okMessage } = result.data; - if (error_msg) { - setState({ ...state, errorMessage: error_msg, okMessage: '', loading: false }); - } else if (ok_msg) { - setState({ ...state, errorMessage: '', okMessage: ok_msg, loading: false }); + if (errorMessage) { + setState({ ...state, errorMessage, okMessage, loading: false }); } else { - setState({ ...state, loading: false }); + dispatch(refreshCounters()).then(() => { + setState({ ...state, okMessage, errorMessage: '', loading: false }); + }); } } }) @@ -82,6 +87,10 @@ const EditDatabase = props => { } } + const databaseUserInputHandler = value => { + setState({ ...state, databaseUserInputValue: value }); + } + return (
@@ -97,7 +106,7 @@ const EditDatabase = props => {
- {state.okMessage ? : ''} + {state.okMessage ? : ''} {HtmlParser(state.okMessage)}
@@ -109,7 +118,21 @@ const EditDatabase = props => { - +
+
+ +
+
+ databaseUserInputHandler(event.target.value)} + name="v_dbuser" /> + {`${userName}_${state.databaseUserInputValue}`} +
+
diff --git a/web/js/react/src/components/Database/Edit/EditDatabase.scss b/web/js/react/src/components/Database/Edit/EditDatabase.scss index e69de29bb..eef3c7568 100644 --- a/web/js/react/src/components/Database/Edit/EditDatabase.scss +++ b/web/js/react/src/components/Database/Edit/EditDatabase.scss @@ -0,0 +1,9 @@ +.input-wrapper { + display: flex; + align-items: center; + + span.italic { + margin-left: 15px; + color: #777; + } +} \ No newline at end of file diff --git a/web/js/react/src/components/DomainNameSystem/Add/AddDomainNameSystem.jsx b/web/js/react/src/components/DomainNameSystem/Add/AddDomainNameSystem.jsx index a5f8a1d45..7a3c61c1c 100644 --- a/web/js/react/src/components/DomainNameSystem/Add/AddDomainNameSystem.jsx +++ b/web/js/react/src/components/DomainNameSystem/Add/AddDomainNameSystem.jsx @@ -13,6 +13,8 @@ import './AddDomainNameSystem.scss'; import AdvancedOptions from './AdvancedOptions/AdvancedOptions'; import { addDomainNameSystem } from '../../../ControlPanelService/Dns'; import { Helmet } from 'react-helmet'; +import { refreshCounters } from 'src/actions/MenuCounters/menuCounterActions'; +import HtmlParser from 'react-html-parser'; const AddDomainNameSystem = props => { const { i18n } = useSelector(state => state.session); @@ -33,7 +35,6 @@ const AddDomainNameSystem = props => { dispatch(removeFocusedElement()); setState({ ...state, loading: true }); - getUserNS() .then(result => { if (result.data.length) { @@ -53,18 +54,17 @@ const AddDomainNameSystem = props => { if (Object.keys(domainNameSystem).length !== 0 && domainNameSystem.constructor === Object) { setState({ ...state, loading: true }); - addDomainNameSystem(domainNameSystem) .then(result => { if (result.status === 200) { - const { error_msg, ok_msg } = result.data; + const { error_msg: errorMessage, ok_msg: okMessage } = result.data; - if (error_msg) { - setState({ ...state, errorMessage: error_msg, okMessage: '', loading: false }); - } else if (ok_msg) { - setState({ ...state, errorMessage: '', okMessage: ok_msg, loading: false }); + if (errorMessage) { + setState({ ...state, errorMessage, okMessage, loading: false }); } else { - setState({ ...state, loading: false }); + dispatch(refreshCounters()).then(() => { + setState({ ...state, okMessage, errorMessage: '', loading: false }); + }); } } }) @@ -98,7 +98,7 @@ const AddDomainNameSystem = props => {
{state.okMessage ? : ''} - + {HtmlParser(state.okMessage)}
diff --git a/web/js/react/src/components/DomainNameSystem/Edit/EditDomainNameSystem.jsx b/web/js/react/src/components/DomainNameSystem/Edit/EditDomainNameSystem.jsx index 9c250c6d3..98916e6d0 100644 --- a/web/js/react/src/components/DomainNameSystem/Edit/EditDomainNameSystem.jsx +++ b/web/js/react/src/components/DomainNameSystem/Edit/EditDomainNameSystem.jsx @@ -13,6 +13,9 @@ import QS from 'qs'; import './EditDomainNameSystem.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 EditDomainNameSystem = props => { const token = localStorage.getItem("token"); @@ -66,14 +69,14 @@ const EditDomainNameSystem = props => { updateDNS(updatedDomain, state.data.domain) .then(result => { if (result.status === 200) { - const { error_msg, ok_msg } = result.data; + const { error_msg: errorMessage, ok_msg: okMessage } = result.data; - if (error_msg) { - setState({ ...state, errorMessage: error_msg, okMessage: '', loading: false }); - } else if (ok_msg) { - setState({ ...state, errorMessage: '', okMessage: ok_msg, loading: false }); + if (errorMessage) { + setState({ ...state, errorMessage, okMessage, loading: false }); } else { - setState({ ...state, loading: false }); + dispatch(refreshCounters()).then(() => { + setState({ ...state, okMessage, errorMessage: '', loading: false }); + }); } } }) @@ -96,7 +99,7 @@ const EditDomainNameSystem = props => {
- {state.okMessage ? : ''} + {state.okMessage ? : ''} {HtmlParser(state.okMessage)}
diff --git a/web/js/react/src/components/Firewall/Add/AddFirewall.jsx b/web/js/react/src/components/Firewall/Add/AddFirewall.jsx index 78397037a..848b4b487 100644 --- a/web/js/react/src/components/Firewall/Add/AddFirewall.jsx +++ b/web/js/react/src/components/Firewall/Add/AddFirewall.jsx @@ -12,6 +12,8 @@ import { useDispatch, useSelector } from 'react-redux'; import './AddFirewall.scss'; import { Helmet } from 'react-helmet'; +import { refreshCounters } from 'src/actions/MenuCounters/menuCounterActions'; +import HtmlParser from 'react-html-parser'; const AddFirewall = props => { const token = localStorage.getItem("token"); @@ -48,18 +50,17 @@ const AddFirewall = props => { if (Object.keys(newFirewall).length !== 0 && newFirewall.constructor === Object) { setState({ ...state, loading: true }); - addFirewall(newFirewall) .then(result => { if (result.status === 200) { - const { error_msg, ok_msg } = result.data; + const { error_msg: errorMessage, ok_msg: okMessage } = result.data; - if (error_msg) { - setState({ ...state, errorMessage: error_msg, okMessage: '', loading: false }); - } else if (ok_msg) { - setState({ ...state, errorMessage: '', okMessage: ok_msg, loading: false }); + if (errorMessage) { + setState({ ...state, errorMessage, okMessage, loading: false }); } else { - setState({ ...state, loading: false }) + dispatch(refreshCounters()).then(() => { + setState({ ...state, okMessage, errorMessage: '', loading: false }); + }); } } }) @@ -83,7 +84,7 @@ const AddFirewall = props => {
{state.okMessage ? : ''} - + {HtmlParser(state.okMessage)}
diff --git a/web/js/react/src/components/Firewall/Add/Banlist/index.jsx b/web/js/react/src/components/Firewall/Add/Banlist/index.jsx index b463a02c6..66d3d7136 100644 --- a/web/js/react/src/components/Firewall/Add/Banlist/index.jsx +++ b/web/js/react/src/components/Firewall/Add/Banlist/index.jsx @@ -8,6 +8,7 @@ import Toolbar from '../../../MainNav/Toolbar/Toolbar'; import { useHistory } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import { Helmet } from 'react-helmet'; +import HtmlParser from 'react-html-parser'; const AddBanIP = () => { const { i18n } = useSelector(state => state.session); @@ -74,7 +75,7 @@ const AddBanIP = () => {
{i18n['Adding IP Address to Banlist']}
{state.errorMessage ? : ''} {state.errorMessage}
- {state.okMessage ? : ''} + {state.okMessage ? : ''} {HtmlParser(state.okMessage)}
diff --git a/web/js/react/src/components/Firewall/Edit/EditFirewall.jsx b/web/js/react/src/components/Firewall/Edit/EditFirewall.jsx index 446c27c05..10057cf37 100644 --- a/web/js/react/src/components/Firewall/Edit/EditFirewall.jsx +++ b/web/js/react/src/components/Firewall/Edit/EditFirewall.jsx @@ -13,6 +13,9 @@ 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 => { const token = localStorage.getItem("token"); @@ -64,14 +67,14 @@ const EditFirewall = props => { updateFirewall(updatedDomain, state.data.domain) .then(result => { if (result.status === 200) { - const { error_msg, ok_msg } = result.data; + const { error_msg: errorMessage, ok_msg: okMessage } = result.data; - if (error_msg) { - setState({ ...state, errorMessage: error_msg, okMessage: '', loading: false }); - } else if (ok_msg) { - setState({ ...state, errorMessage: '', okMessage: ok_msg, loading: false }); + if (errorMessage) { + setState({ ...state, errorMessage, okMessage, loading: false }); } else { - setState({ ...state, loading: false }); + dispatch(refreshCounters()).then(() => { + setState({ ...state, okMessage, errorMessage: '', loading: false }); + }); } } }) @@ -94,7 +97,7 @@ const EditFirewall = props => {
- {state.okMessage ? : ''} + {state.okMessage ? : ''} {HtmlParser(state.okMessage)}
diff --git a/web/js/react/src/components/InternetProtocol/Add/AddInternetProtocol.jsx b/web/js/react/src/components/InternetProtocol/Add/AddInternetProtocol.jsx index 824555548..de9801ca3 100644 --- a/web/js/react/src/components/InternetProtocol/Add/AddInternetProtocol.jsx +++ b/web/js/react/src/components/InternetProtocol/Add/AddInternetProtocol.jsx @@ -14,6 +14,8 @@ import { useDispatch, useSelector } from 'react-redux'; import './AddInternetProtocol.scss'; import { Helmet } from 'react-helmet'; +import { refreshCounters } from 'src/actions/MenuCounters/menuCounterActions'; +import HtmlParser from 'react-html-parser'; const AddInternetProtocol = props => { const token = localStorage.getItem("token"); @@ -49,18 +51,17 @@ const AddInternetProtocol = props => { if (Object.keys(newIp).length !== 0 && newIp.constructor === Object) { setState({ ...state, loading: true }); - addInternetProtocol(newIp) .then(result => { if (result.status === 200) { - const { error_msg, ok_msg } = result.data; + const { error_msg: errorMessage, ok_msg: okMessage } = result.data; - if (error_msg) { - setState({ ...state, errorMessage: error_msg, okMessage: '', loading: false }); - } else if (ok_msg) { - setState({ ...state, errorMessage: '', okMessage: ok_msg, loading: false }); + if (errorMessage) { + setState({ ...state, errorMessage, okMessage, loading: false }); } else { - setState({ ...state, loading: false }) + dispatch(refreshCounters()).then(() => { + setState({ ...state, okMessage, errorMessage: '', loading: false }); + }); } } }) @@ -96,7 +97,7 @@ const AddInternetProtocol = props => {
{state.okMessage ? : ''} - + {HtmlParser(state.okMessage)}
diff --git a/web/js/react/src/components/InternetProtocol/Edit/EditInternetProtocol.jsx b/web/js/react/src/components/InternetProtocol/Edit/EditInternetProtocol.jsx index 34be5ae1a..7c3fd217e 100644 --- a/web/js/react/src/components/InternetProtocol/Edit/EditInternetProtocol.jsx +++ b/web/js/react/src/components/InternetProtocol/Edit/EditInternetProtocol.jsx @@ -15,6 +15,9 @@ import QS from 'qs'; import './EditInternetProtocol.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 EditInternetProtocol = () => { const token = localStorage.getItem("token"); @@ -72,8 +75,15 @@ const EditInternetProtocol = () => { updateInternetProtocol(updatedIP, state.data.ip) .then(result => { if (result.status === 200) { - const { error_msg, ok_msg } = result.data; - setState({ ...state, errorMessage: error_msg || '', okMessage: ok_msg || '', loading: false }); + const { error_msg: errorMessage, ok_msg: okMessage } = result.data; + + if (errorMessage) { + setState({ ...state, errorMessage, okMessage, loading: false }); + } else { + dispatch(refreshCounters()).then(() => { + setState({ ...state, okMessage, errorMessage: '', loading: false }); + }); + } } }) .catch(err => console.error(err)); @@ -99,7 +109,7 @@ const EditInternetProtocol = () => {
- {state.okMessage ? : ''} + {state.okMessage ? : ''} {HtmlParser(state.okMessage)}
diff --git a/web/js/react/src/components/Lists/Row/Row.scss b/web/js/react/src/components/Lists/Row/Row.scss index a3b08ac44..41264fcdf 100644 --- a/web/js/react/src/components/Lists/Row/Row.scss +++ b/web/js/react/src/components/Lists/Row/Row.scss @@ -169,8 +169,8 @@ li.inactive { background: rgb(220, 220, 220); } -@media (max-width: 1200px){ +@media (max-width: 1320px){ .fPermissions, .fOwner { display: none; } -} \ No newline at end of file +} diff --git a/web/js/react/src/components/Log/Log.scss b/web/js/react/src/components/Log/Log.scss index f53e343ae..cb9c2b715 100644 --- a/web/js/react/src/components/Log/Log.scss +++ b/web/js/react/src/components/Log/Log.scss @@ -1,4 +1,8 @@ .logs-list { + .toolbar { + padding: 6px 12.5%; + } + .statistic-item { .l-col { font-size: 13px; @@ -25,4 +29,10 @@ color: #5edad0; } } +} + +@media (max-width: 1350px) { + .logs-list .toolbar { + padding: 6px 9.5%; + } } \ No newline at end of file diff --git a/web/js/react/src/components/Mail/Add/AddMail.jsx b/web/js/react/src/components/Mail/Add/AddMail.jsx index 58a768fe7..f0740f804 100644 --- a/web/js/react/src/components/Mail/Add/AddMail.jsx +++ b/web/js/react/src/components/Mail/Add/AddMail.jsx @@ -11,6 +11,9 @@ import { useDispatch, useSelector } from 'react-redux'; import './AddMail.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 AddMail = props => { const { i18n } = useSelector(state => state.session); @@ -40,15 +43,18 @@ const AddMail = props => { } if (Object.keys(newMailDomain).length !== 0 && newMailDomain.constructor === Object) { + setState({ ...state, loading: true }); addMail(newMailDomain) .then(result => { if (result.status === 200) { - const { error_msg, ok_msg } = result.data; + const { error_msg: errorMessage, ok_msg: okMessage } = result.data; - if (error_msg) { - setState({ ...state, errorMessage: error_msg, okMessage: '' }); - } else if (ok_msg) { - setState({ ...state, errorMessage: '', okMessage: ok_msg }); + if (errorMessage) { + setState({ ...state, errorMessage, okMessage, loading: false }); + } else { + dispatch(refreshCounters()).then(() => { + setState({ ...state, okMessage, errorMessage: '', loading: false }); + }); } } }) @@ -72,7 +78,7 @@ const AddMail = props => {
{state.okMessage ? : ''} - + {HtmlParser(state.okMessage)}
diff --git a/web/js/react/src/components/Mail/Edit/EditMail.jsx b/web/js/react/src/components/Mail/Edit/EditMail.jsx index 57d008bad..6f6f1333b 100644 --- a/web/js/react/src/components/Mail/Edit/EditMail.jsx +++ b/web/js/react/src/components/Mail/Edit/EditMail.jsx @@ -13,6 +13,9 @@ import QS from 'qs'; import './EditMail.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 EditMail = props => { const token = localStorage.getItem("token"); @@ -66,14 +69,14 @@ const EditMail = props => { updateMail(updatedDomain, state.data.domain) .then(result => { if (result.status === 200) { - const { error_msg, ok_msg } = result.data; + const { error_msg: errorMessage, ok_msg: okMessage } = result.data; - if (error_msg) { - setState({ ...state, errorMessage: error_msg, okMessage: '', loading: false }); - } else if (ok_msg) { - setState({ ...state, errorMessage: '', okMessage: ok_msg, loading: false }); + if (errorMessage) { + setState({ ...state, errorMessage, okMessage, loading: false }); } else { - setState({ ...state, loading: false }); + dispatch(refreshCounters()).then(() => { + setState({ ...state, okMessage, errorMessage: '', loading: false }); + }); } } }) @@ -96,7 +99,7 @@ const EditMail = props => {
- {state.okMessage ? : ''} + {state.okMessage ? : ''} {HtmlParser(state.okMessage)}
diff --git a/web/js/react/src/components/Mail/Mail.jsx b/web/js/react/src/components/Mail/Mail.jsx index 09bbf6372..305038fd6 100644 --- a/web/js/react/src/components/Mail/Mail.jsx +++ b/web/js/react/src/components/Mail/Mail.jsx @@ -62,7 +62,7 @@ const Mail = props => { {printStat(i18n['AntiSpam Support'], data.ANTISPAM)} -
{i18n['Catchall email']}: {data.CATCHALL}
+
{i18n['Catchall email']}: {data.CATCHALL}
 diff --git a/web/js/react/src/components/Mail/Mail.scss b/web/js/react/src/components/Mail/Mail.scss index 2e8886349..452bf075f 100644 --- a/web/js/react/src/components/Mail/Mail.scss +++ b/web/js/react/src/components/Mail/Mail.scss @@ -1,3 +1,7 @@ .crossed { text-decoration: line-through; -} \ No newline at end of file +} + +.catchall-mail { + text-transform: none; +} diff --git a/web/js/react/src/components/MailAccount/Add/AddMailAccount.jsx b/web/js/react/src/components/MailAccount/Add/AddMailAccount.jsx index 6f9095d8a..1edadacae 100644 --- a/web/js/react/src/components/MailAccount/Add/AddMailAccount.jsx +++ b/web/js/react/src/components/MailAccount/Add/AddMailAccount.jsx @@ -17,6 +17,8 @@ import { useDispatch, useSelector } from 'react-redux'; import './AddMailAccount.scss'; import { Helmet } from 'react-helmet'; +import { refreshCounters } from 'src/actions/MenuCounters/menuCounterActions'; +import HtmlParser from 'react-html-parser'; export default function AddMailAccount(props) { const { i18n } = useSelector(state => state.session); @@ -26,6 +28,7 @@ export default function AddMailAccount(props) { const [state, setState] = useState({ data: {}, advancedOptions: false, + autoreplyChecked: false, quotaValue: '', loading: false, password: '', @@ -54,15 +57,18 @@ export default function AddMailAccount(props) { newMailDomain['Password'] = newMailDomain['v_password']; if (Object.keys(newMailDomain).length !== 0 && newMailDomain.constructor === Object) { + setState({ ...state, loading: true }); addMailAccount(newMailDomain, props.domain) .then(result => { if (result.status === 200) { - const { error_msg, ok_msg } = result.data; + const { error_msg: errorMessage, ok_msg: okMessage } = result.data; - if (error_msg) { - setState({ ...state, errorMessage: error_msg, okMessage: '' }); - } else if (ok_msg) { - setState({ ...state, errorMessage: '', okMessage: ok_msg }); + if (errorMessage) { + setState({ ...state, errorMessage, okMessage, loading: false }); + } else { + dispatch(refreshCounters()).then(() => { + setState({ ...state, okMessage, errorMessage: '', loading: false }); + }); } } }) @@ -114,7 +120,7 @@ export default function AddMailAccount(props) {
{state.okMessage ? : ''} - + {HtmlParser(state.okMessage)}
diff --git a/web/js/react/src/components/MailAccount/Add/AddMailAccount.scss b/web/js/react/src/components/MailAccount/Add/AddMailAccount.scss index 45f10a5f0..f09dd23d7 100644 --- a/web/js/react/src/components/MailAccount/Add/AddMailAccount.scss +++ b/web/js/react/src/components/MailAccount/Add/AddMailAccount.scss @@ -21,10 +21,25 @@ } } } + + .form-group:nth-child(3) { + > div { + display: flex; + + input { + width: 100%; + } + + input + button { + padding-left: 10px; + } + } + } } .c-2 { width: 45%; + height: 100%; border: 1px solid #d9d9d9; padding: 0px 5px 12px 20px; } diff --git a/web/js/react/src/components/MailAccount/Edit/EditMailAccount.jsx b/web/js/react/src/components/MailAccount/Edit/EditMailAccount.jsx index e5ae36a3c..49c0f9e89 100644 --- a/web/js/react/src/components/MailAccount/Edit/EditMailAccount.jsx +++ b/web/js/react/src/components/MailAccount/Edit/EditMailAccount.jsx @@ -15,6 +15,9 @@ import { useHistory } from 'react-router-dom'; import Spinner from '../../Spinner/Spinner'; import { useDispatch, useSelector } from 'react-redux'; 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'; export default function EditMailAccount(props) { const [autoreplyChecked, setAutoreplyChecked] = useState(false); @@ -56,13 +59,14 @@ export default function EditMailAccount(props) { editMailAccount(newMailDomain, props.domain, props.account) .then(result => { if (result.status === 200) { - const { error_msg, ok_msg } = result.data; + const { error_msg: errorMessage, ok_msg: okMessage } = result.data; - if (error_msg) { - setState({ ...state, errorMessage: error_msg, okMessage: '', loading: false }); - } else if (ok_msg) { - goBack(); - setState({ ...state, errorMessage: '', okMessage: ok_msg, loading: false }); + if (errorMessage) { + setState({ ...state, errorMessage, okMessage, loading: false }); + } else { + dispatch(refreshCounters()).then(() => { + setState({ ...state, okMessage, errorMessage: '', loading: false }); + }); } } }) @@ -88,12 +92,9 @@ export default function EditMailAccount(props) { .catch(err => console.error(err)); } - const toggleQuotaValue = () => { - if (state.quotaValue !== 'unlimited') { - setState({ ...state, quotaValue: 'unlimited' }); - } else { - setState({ ...state, quotaValue: '' }); - } + const toggleQuota = () => { + const value = state.data.quota === 'unlimited' ? '1000' : 'unlimited'; + setState({ ...state, data: { ...state.data, quota: value } }); } const goBack = () => { @@ -116,7 +117,7 @@ export default function EditMailAccount(props) {
{state.okMessage ? : ''} - + {HtmlParser(state.okMessage)}
@@ -135,13 +136,58 @@ export default function EditMailAccount(props) { id="domain" disabled /> - - setState({ ...state, password })} /> + + + + + +