From 095e2e9e4abeee25ef203a4123a2ba219b23c135 Mon Sep 17 00:00:00 2001 From: Alexander Date: Fri, 22 Oct 2021 17:55:25 +0300 Subject: [PATCH] React integration ready for v1.0.0 release. --- web/js/react/public/index.html | 4 +- .../react/src/ControlPanelService/Backup.js | 29 +- web/js/react/src/ControlPanelService/Cron.js | 26 +- web/js/react/src/ControlPanelService/Db.js | 26 +- web/js/react/src/ControlPanelService/Dns.js | 27 +- .../src/ControlPanelService/Favorites.js | 4 +- .../src/ControlPanelService/Firewalls.js | 32 +- .../ControlPanelService/GeneratorOptions.js | 284 +++++++++--------- web/js/react/src/ControlPanelService/Ip.js | 27 +- .../src/ControlPanelService/Languages.js | 2 +- web/js/react/src/ControlPanelService/Logs.js | 2 +- web/js/react/src/ControlPanelService/Mail.js | 31 +- .../src/ControlPanelService/Notifications.js | 14 +- .../react/src/ControlPanelService/Package.js | 25 +- web/js/react/src/ControlPanelService/RRD.js | 6 +- .../src/ControlPanelService/ResetPassword.js | 2 +- .../react/src/ControlPanelService/Search.js | 9 +- .../react/src/ControlPanelService/Server.js | 26 +- .../src/ControlPanelService/Statistics.js | 2 +- .../react/src/ControlPanelService/Updates.js | 26 +- .../react/src/ControlPanelService/UserNS.js | 2 +- web/js/react/src/ControlPanelService/Users.js | 34 ++- web/js/react/src/ControlPanelService/Web.js | 26 +- .../react/src/ControlPanelService/WebLogs.js | 2 +- web/js/react/src/FileManagerHelper.js | 20 +- .../Notification/notificationActions.js | 15 + .../actions/Notification/notificationTypes.js | 2 + .../src/actions/Session/sessionActions.js | 66 ++-- .../react/src/actions/Session/sessionTypes.js | 1 + web/js/react/src/components/Backup/Backup.jsx | 5 +- .../Backup/Exclusion/Edit/index.jsx | 4 +- .../src/components/Backup/Exclusion/index.jsx | 5 +- .../Backup/RestoreSetting/RestoreSetting.jsx | 3 +- .../Backup/RestoreSetting/RestoreSetting.scss | 25 +- .../RestoreSettings/BackupRestoreSettings.jsx | 6 +- .../AddItemLayout/AddItemLayout.scss | 54 ++-- .../AddItemLayout/Form/Checkbox/Checkbox.jsx | 12 +- .../Form/NameServers/NameServers.jsx | 3 +- .../AddItemLayout/Form/Password/Password.jsx | 5 +- .../Form/SelectInput/SelectInput.jsx | 3 +- .../ControlPanel/Hotkeys/Hotkeys.jsx | 3 +- .../ControlPanel/Hotkeys/Hotkeys.scss | 21 +- .../ControlPanel/ListItem/ListItem.jsx | 81 +++-- .../ControlPanel/ListItem/ListItem.scss | 22 +- .../components/ControlPanel/Modal/Modal.jsx | 5 +- .../components/ControlPanel/Modal/Modal.scss | 6 +- .../src/components/CronJob/Add/AddCronJob.jsx | 4 +- .../react/src/components/CronJob/CronJob.jsx | 7 +- .../components/CronJob/Edit/EditCronJob.jsx | 4 +- .../CronJob/Generator/Generator.jsx | 3 +- .../CronJob/Generator/Generator.scss | 29 +- .../OtherSelects/FifthTabSelects.jsx | 6 +- .../OtherSelects/FourthTabSelects.jsx | 6 +- .../OtherSelects/SecondTabSelects.jsx | 6 +- .../OtherSelects/ThirdTabSelects.jsx | 6 +- .../RunCommandSelect/RunCommandSelect.jsx | 7 +- .../components/DNSRecord/Add/AddDNSRecord.jsx | 4 +- .../src/components/DNSRecord/DNSRecord.jsx | 5 +- .../DNSRecord/Edit/EditDNSRecord.jsx | 10 +- .../components/Database/Add/AddDatabase.jsx | 4 +- .../src/components/Database/Database.jsx | 7 +- .../components/Database/Edit/EditDatabase.jsx | 4 +- .../Add/AddDomainNameSystem.jsx | 4 +- .../Add/AdvancedOptions/AdvancedOptions.jsx | 3 +- .../DomainNameSystem/DomainNameSystem.jsx | 7 +- .../Edit/EditDomainNameSystem.jsx | 4 +- .../components/Firewall/Add/AddFirewall.jsx | 4 +- .../components/Firewall/Add/Banlist/index.jsx | 4 +- .../src/components/Firewall/Ban/index.jsx | 5 +- .../components/Firewall/Edit/EditFirewall.jsx | 4 +- .../src/components/Firewall/Firewall.jsx | 7 +- .../src/components/ForgotPassword/index.jsx | 6 +- .../react/src/components/Hotkeys/Hotkeys.jsx | 159 +++++++--- .../react/src/components/Hotkeys/Hotkeys.scss | 104 ++++--- .../Add/AddInternetProtocol.jsx | 2 +- .../Edit/EditInternetProtocol.jsx | 4 +- .../InternetProtocol/InternetProtocol.jsx | 5 +- .../Lists/DirectoryList/DirectoryList.jsx | 2 +- web/js/react/src/components/Lists/Row/Row.jsx | 12 +- .../react/src/components/Lists/Row/Row.scss | 15 +- web/js/react/src/components/Login/Login.scss | 35 ++- .../react/src/components/Login/LoginForm.jsx | 16 +- .../react/src/components/Mail/Add/AddMail.jsx | 4 +- .../src/components/Mail/Edit/EditMail.jsx | 4 +- web/js/react/src/components/Mail/Mail.jsx | 7 +- .../MailAccount/Add/AddMailAccount.jsx | 4 +- .../MailAccount/Edit/EditMailAccount.jsx | 6 +- .../components/MailAccount/MailAccount.jsx | 7 +- .../MailInfoBlock/MailInfoBlock.jsx | 5 +- .../react/src/components/MainNav/MainNav.jsx | 45 ++- .../MainNav/Mobile/MobileTopNav.scss | 4 +- .../MainNav/Panel/Notifications/Bell.jsx | 9 + .../Panel/Notifications/BellUnread.jsx | 9 + .../Panel/Notifications/Notifications.jsx | 45 +-- .../Panel/Notifications/Notifications.scss | 31 +- .../src/components/MainNav/Panel/Panel.jsx | 82 +++-- .../src/components/MainNav/Panel/Panel.scss | 89 ++++-- .../src/components/MainNav/Stat-menu/Menu.jsx | 70 +++-- .../components/MainNav/Stat-menu/Menu.scss | 29 +- .../MainNav/Toolbar/Checkbox/Checkbox.jsx | 5 +- .../Toolbar/DropdownFilter/DropdownFilter.jsx | 64 ++-- .../Toolbar/LeftButton/LeftButton.scss | 39 ++- .../MainNav/Toolbar/Select/Select.jsx | 73 +++-- web/js/react/src/components/Menu/Menu.jsx | 185 ++++++------ web/js/react/src/components/Menu/Menu.scss | 30 +- .../src/components/Modal/AddDirectory.jsx | 4 +- web/js/react/src/components/Modal/AddFile.jsx | 5 +- web/js/react/src/components/Modal/Archive.jsx | 5 +- web/js/react/src/components/Modal/Copy.jsx | 11 +- web/js/react/src/components/Modal/Delete.jsx | 11 +- web/js/react/src/components/Modal/Extract.jsx | 9 +- web/js/react/src/components/Modal/Modal.scss | 41 ++- web/js/react/src/components/Modal/Move.jsx | 11 +- .../src/components/Modal/NothingSelected.jsx | 7 +- .../src/components/Modal/Permissions.jsx | 35 ++- web/js/react/src/components/Modal/Rename.jsx | 9 +- .../src/components/Package/Add/AddPackage.jsx | 4 +- .../components/Package/Edit/EditPackage.jsx | 4 +- .../react/src/components/Package/Package.jsx | 5 +- .../src/components/Path/Dropdown/Dropdown.jsx | 81 ++--- web/js/react/src/components/Path/Path.jsx | 7 +- web/js/react/src/components/Path/Path.scss | 93 +++--- .../src/components/Preview/Editor/Editor.jsx | 7 +- .../src/components/Preview/Photo/Photo.jsx | 4 +- .../react/src/components/Preview/Preview.jsx | 4 + web/js/react/src/components/RRD/RRD.jsx | 3 +- .../src/components/Searchitem/SearchItem.jsx | 81 +++-- .../components/Server/Edit/Bind9/Bind9.jsx | 4 +- .../Server/Edit/Dovecot/Dovecot.jsx | 4 +- .../Server/Edit/EditBackupOption.jsx | 3 +- .../Server/Edit/EditDatabaseOption.jsx | 3 +- .../components/Server/Edit/EditMailOption.jsx | 3 +- .../src/components/Server/Edit/EditServer.jsx | 30 +- .../components/Server/Edit/EditServer.scss | 31 +- .../Server/Edit/EditServerDnsOption.jsx | 3 +- .../Server/Edit/EditServerWebOption.jsx | 3 +- .../Server/Edit/EditVestaPlugins.jsx | 28 +- .../Server/Edit/EditVestaSslOption.jsx | 3 +- .../Server/Edit/Httpd/EditHttpd.jsx | 4 +- .../Server/Edit/Httpd/EditHttpd.scss | 7 +- .../components/Server/Edit/Mysql/Mysql.jsx | 4 +- .../Server/Edit/Nginx/EditServerNginx.jsx | 4 +- .../Server/Edit/Nginx/EditServerNginx.scss | 4 +- .../components/Server/Edit/PHP/EditPhp.jsx | 4 +- .../components/Server/Edit/PHP/EditPhp.scss | 14 +- .../Server/Edit/Postgresql/Postgresql.jsx | 4 +- .../Server/Edit/Service/Service.jsx | 4 +- web/js/react/src/components/Server/Server.jsx | 7 +- .../react/src/components/Server/ServerSys.jsx | 3 +- .../src/components/Statistic/Statistic.jsx | 3 +- .../src/components/TopPanel/TopPanel.jsx | 14 +- .../src/components/TopPanel/TopPanel.scss | 38 ++- web/js/react/src/components/Update/Update.jsx | 3 +- .../react/src/components/User/Add/AddUser.jsx | 4 +- .../src/components/User/Add/AddUser.scss | 20 +- .../src/components/User/Edit/EditUser.jsx | 4 +- web/js/react/src/components/User/User.jsx | 30 +- web/js/react/src/components/User/User.scss | 22 +- .../components/WebDomain/Add/AddWebDomain.jsx | 4 +- .../Add/AdditionalFtp/AdditionalFtp.jsx | 37 ++- .../AdditionalFtpForEditing.jsx | 148 +++++---- .../AdditionalFtpWrapper.jsx | 74 ++--- .../Add/AdvancedOptions/AdvancedOptions.jsx | 3 +- .../WebDomain/Add/SslSupport/SslSupport.jsx | 3 +- .../src/components/WebDomain/Edit/EditWeb.jsx | 29 +- .../WebDomain/Edit/SslSupport/SslSupport.jsx | 3 +- .../WebDomain/Edit/SslSupport/SslSupport.scss | 13 +- .../src/components/WebDomain/WebDomain.jsx | 7 +- .../AddDNSWrapper/AddDNSWrapper.jsx | 3 +- .../AddMailWrapper/AddMailWrapper.jsx | 3 +- web/js/react/src/containers/App/App.js | 79 +++-- web/js/react/src/containers/App/App.scss | 102 ++++++- .../BackupWrapper/BackupWrapper.jsx | 3 +- .../react/src/containers/Backups/Backups.jsx | 8 +- .../containers/Backups/Exclusions/index.jsx | 2 +- .../ControlPanelContent.jsx | 181 ++++++----- .../ControlPanelContent.scss | 31 +- .../src/containers/CronJobs/CronJobs.jsx | 10 +- .../src/containers/CronJobs/CronJobs.scss | 18 +- .../src/containers/DNSRecords/DNSRecords.jsx | 6 +- .../src/containers/DNSRecords/DNSRecords.scss | 14 +- .../src/containers/DNSWrapper/DNSWrapper.jsx | 3 +- .../src/containers/Databases/Databases.jsx | 7 +- .../DomainNameSystems/DomainNameSystems.jsx | 7 +- .../EditDNSWrapper/EditDNSWrapper.jsx | 3 +- .../EditMailWrapper/EditMailWrapper.jsx | 3 +- .../src/containers/FileManager/FileManager.js | 43 ++- .../containers/Firewalls/Banlist/index.jsx | 4 +- .../src/containers/Firewalls/Firewalls.jsx | 8 +- .../InternetProtocols/InternetProtocols.jsx | 6 +- web/js/react/src/containers/Logs/Logs.jsx | 2 +- .../containers/MailAccounts/MailAccounts.jsx | 7 +- .../containers/MailAccounts/MailAccounts.scss | 4 +- .../containers/MailWrapper/MailWrapper.jsx | 3 +- web/js/react/src/containers/Mails/Mails.jsx | 7 +- .../src/containers/Packages/Packages.jsx | 7 +- web/js/react/src/containers/RRDs/RRDs.jsx | 2 +- web/js/react/src/containers/RRDs/RRDs.scss | 24 +- web/js/react/src/containers/Search/Search.jsx | 157 +++++----- .../react/src/containers/Search/Search.scss | 4 +- .../react/src/containers/Servers/Servers.jsx | 8 +- .../src/containers/ServiceInfo/index.jsx | 11 +- .../src/containers/Statistics/Statistics.jsx | 2 +- .../react/src/containers/Updates/Updates.jsx | 3 +- web/js/react/src/containers/Users/Users.jsx | 18 +- web/js/react/src/containers/Web/Web.jsx | 10 +- .../react/src/containers/WebLogs/WebLogs.jsx | 19 +- .../react/src/containers/WebLogs/WebLogs.scss | 5 + .../MainNavigation/mainNavigationReducer.js | 16 +- .../Notification/notificationReducer.js | 25 ++ .../src/reducers/Session/sessionReducer.js | 17 +- web/js/react/src/reducers/rootReducer.js | 2 + web/js/react/src/services/session.js | 46 ++- 213 files changed, 2699 insertions(+), 1713 deletions(-) create mode 100644 web/js/react/src/actions/Notification/notificationActions.js create mode 100644 web/js/react/src/actions/Notification/notificationTypes.js create mode 100644 web/js/react/src/components/MainNav/Panel/Notifications/Bell.jsx create mode 100644 web/js/react/src/components/MainNav/Panel/Notifications/BellUnread.jsx create mode 100644 web/js/react/src/reducers/Notification/notificationReducer.js diff --git a/web/js/react/public/index.html b/web/js/react/public/index.html index 578b67f6a..745e5e138 100755 --- a/web/js/react/public/index.html +++ b/web/js/react/public/index.html @@ -3,12 +3,10 @@ - + - - Vesta diff --git a/web/js/react/src/ControlPanelService/Backup.js b/web/js/react/src/ControlPanelService/Backup.js index 3ae0daf96..42c5d37f3 100644 --- a/web/js/react/src/ControlPanelService/Backup.js +++ b/web/js/react/src/ControlPanelService/Backup.js @@ -1,14 +1,14 @@ import axios from "axios"; +import { getAuthToken } from "src/utils/token"; -const token = localStorage.getItem("token"); const BASE_URL = window.location.origin; -const webApiUri = '/list/backup/backup.php'; +const webApiUri = '/api/v1/list/backup/index.php'; const scheduleBackupUri = '/schedule/backup/'; -const backupDetailsUri = '/list/backup/backup.php'; -const backupExclusionsUri = '/api/list/backup/exclusions/index.php'; -const backupExclusionsInfoUri = '/api/edit/backup/exclusions/index.php'; -const backupRestoreSettingUri = '/api/schedule/restore/index.php'; -const bulkRestoreUri = '/api/bulk/restore/index.php'; +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'; +const backupRestoreSettingUri = '/api/v1/schedule/restore/index.php'; +const bulkRestoreUri = '/api/v1/bulk/restore/index.php'; export const getBackupList = () => { return axios.get(BASE_URL + webApiUri); @@ -17,18 +17,21 @@ export const getBackupList = () => { export const bulkAction = (action, backups) => { const formData = new FormData(); formData.append("action", action); - formData.append("token", token); + formData.append("token", getAuthToken()); backups.forEach(backup => { formData.append("backup[]", backup); - formData.append("delete_url", `/delete/backup/?backup=${backup}&token=${token}`); }); - return axios.post(BASE_URL + '/bulk/backup/', formData); + return axios.post(BASE_URL + '/api/v1/bulk/backup/', formData); }; export const handleAction = uri => { - return axios.get(BASE_URL + uri); + return axios.get(BASE_URL + uri, { + params: { + token: getAuthToken() + } + }); } export const scheduleBackup = () => { @@ -45,7 +48,7 @@ export const restoreBackupSetting = params => { export const bulkRestore = (action, selection, backup) => { const formData = new FormData(); - formData.append("token", token); + formData.append("token", getAuthToken()); formData.append("action", action); formData.append("backup", backup); @@ -73,7 +76,7 @@ export const updateBackupExclusions = data => { return axios.post(BASE_URL + backupExclusionsInfoUri, formDataObject, { params: { - token + token: getAuthToken() } }); } diff --git a/web/js/react/src/ControlPanelService/Cron.js b/web/js/react/src/ControlPanelService/Cron.js index e46f14b0c..fe6f37b24 100644 --- a/web/js/react/src/ControlPanelService/Cron.js +++ b/web/js/react/src/ControlPanelService/Cron.js @@ -1,11 +1,11 @@ import axios from "axios"; +import { getAuthToken } from "src/utils/token"; -const token = localStorage.getItem("token"); const BASE_URL = window.location.origin; -const webApiUri = '/list/cron/cron.php'; -const cronAddApiUri = '/api/add/cron/index.php'; -const jobInfoUri = '/api/edit/cron/index.php'; -const updateCronJobUri = '/api/edit/cron/index.php'; +const webApiUri = '/api/v1/list/cron/index.php'; +const cronAddApiUri = '/api/v1/add/cron/index.php'; +const jobInfoUri = '/api/v1/edit/cron/index.php'; +const updateCronJobUri = '/api/v1/edit/cron/index.php'; export const getCronList = () => { return axios.get(BASE_URL + webApiUri); @@ -14,19 +14,21 @@ export const getCronList = () => { export const bulkAction = (action, domainNameSystems) => { const formData = new FormData(); formData.append("action", action); - formData.append("token", token); + formData.append("token", getAuthToken()); domainNameSystems.forEach(domainNameSystem => { formData.append("job[]", domainNameSystem); - formData.append("suspend_url", `/suspend/cron/?job=${domainNameSystem}&token=${token}`); - formData.append("delete_url", `/delete/cron/?job=${domainNameSystem}&token=${token}`); }); - return axios.post(BASE_URL + '/bulk/cron/', formData); + return axios.post(BASE_URL + '/api/v1/bulk/cron/', formData); }; export const handleAction = uri => { - return axios.get(BASE_URL + uri); + return axios.get(BASE_URL + uri, { + params: { + token: getAuthToken() + } + }); } export const addCronJob = data => { @@ -43,7 +45,7 @@ export const getCronJobInfo = job => { return axios.get(BASE_URL + jobInfoUri, { params: { job, - token + token: getAuthToken() } }); } @@ -58,7 +60,7 @@ export const updateCronJob = (data, job) => { return axios.post(BASE_URL + updateCronJobUri, formDataObject, { params: { job, - token + token: getAuthToken() } }); } \ No newline at end of file diff --git a/web/js/react/src/ControlPanelService/Db.js b/web/js/react/src/ControlPanelService/Db.js index f93220477..ecf5586a9 100644 --- a/web/js/react/src/ControlPanelService/Db.js +++ b/web/js/react/src/ControlPanelService/Db.js @@ -1,12 +1,12 @@ import axios from "axios"; +import { getAuthToken } from "src/utils/token"; -const token = localStorage.getItem("token"); const BASE_URL = window.location.origin; -const webApiUri = '/list/db/db.php'; -const addDbApiUri = '/api/add/db/index.php'; -const optionalDbInfoUri = '/api/add/db/index.php'; -const dbInfoUri = '/api/edit/db/index.php'; -const updateDatabaseUri = '/api/edit/db/index.php'; +const webApiUri = '/api/v1/list/db/index.php'; +const addDbApiUri = '/api/v1/add/db/index.php'; +const optionalDbInfoUri = '/api/v1/add/db/index.php'; +const dbInfoUri = '/api/v1/edit/db/index.php'; +const updateDatabaseUri = '/api/v1/edit/db/index.php'; export const getDatabaseList = () => { return axios.get(BASE_URL + webApiUri); @@ -15,17 +15,21 @@ export const getDatabaseList = () => { export const bulkAction = (action, domainNameSystems) => { const formData = new FormData(); formData.append("action", action); - formData.append("token", token); + formData.append("token", getAuthToken()); domainNameSystems.forEach(domainNameSystem => { formData.append("database[]", domainNameSystem); }); - return axios.post(BASE_URL + '/bulk/db/', formData); + return axios.post(BASE_URL + '/api/v1/bulk/db/', formData); }; export const handleAction = uri => { - return axios.get(BASE_URL + uri); + return axios.get(BASE_URL + uri, { + params: { + token: getAuthToken() + } + }); } export const getDbOptionalInfo = () => { @@ -85,7 +89,7 @@ export const getDatabaseInfo = database => { return axios.get(BASE_URL + dbInfoUri, { params: { database, - token + token: getAuthToken() } }); } @@ -100,7 +104,7 @@ export const updateDatabase = (data, database) => { return axios.post(BASE_URL + updateDatabaseUri, formDataObject, { params: { database, - token + token: getAuthToken() } }); } \ No newline at end of file diff --git a/web/js/react/src/ControlPanelService/Dns.js b/web/js/react/src/ControlPanelService/Dns.js index 4cde0d76e..d9258cb90 100644 --- a/web/js/react/src/ControlPanelService/Dns.js +++ b/web/js/react/src/ControlPanelService/Dns.js @@ -1,11 +1,11 @@ import axios from "axios"; +import { getAuthToken } from "src/utils/token"; -const updateDNSUri = '/api/edit/dns/index.php'; -const addDnsApiUri = '/api/add/dns/index.php'; -const dNSInfoUri = '/api/edit/dns/index.php'; -const token = localStorage.getItem("token"); +const updateDNSUri = '/api/v1/edit/dns/index.php'; +const addDnsApiUri = '/api/v1/add/dns/index.php'; +const dNSInfoUri = '/api/v1/edit/dns/index.php'; const BASE_URL = window.location.origin; -const dnsApiUri = '/list/dns/dns.php'; +const dnsApiUri = '/api/v1/list/dns/index.php'; export const getDnsList = () => { return axios.get(BASE_URL + dnsApiUri); @@ -22,17 +22,21 @@ export const getDNSRecordInfo = (domain, recordId) => { export const bulkAction = (action, domainNameSystems) => { const formData = new FormData(); formData.append("action", action); - formData.append("token", token); + formData.append("token", getAuthToken()); domainNameSystems.forEach(domainNameSystem => { formData.append("domain[]", domainNameSystem); }); - return axios.post(BASE_URL + '/bulk/dns/', formData); + return axios.post(BASE_URL + '/api/v1/bulk/dns/', formData); }; export const handleAction = uri => { - return axios.get(BASE_URL + uri); + return axios.get(BASE_URL + uri, { + params: { + token: getAuthToken() + } + }); } export const addDomainNameSystem = data => { @@ -59,12 +63,12 @@ export const getDNSInfo = domain => { return axios.get(BASE_URL + dNSInfoUri, { params: { domain, - token + token: getAuthToken() } }); } -export const updateDNS = (data, domain) => { +export const updateDNS = (data, domain, recordId) => { let formDataObject = new FormData(); for (let key in data) { @@ -74,7 +78,8 @@ export const updateDNS = (data, domain) => { return axios.post(BASE_URL + updateDNSUri, formDataObject, { params: { domain, - token + record_id: recordId, + token: getAuthToken() } }); } \ No newline at end of file diff --git a/web/js/react/src/ControlPanelService/Favorites.js b/web/js/react/src/ControlPanelService/Favorites.js index 00f489c73..21ac96eb1 100644 --- a/web/js/react/src/ControlPanelService/Favorites.js +++ b/web/js/react/src/ControlPanelService/Favorites.js @@ -1,6 +1,6 @@ import axios from "axios"; -let addFavoriteUri = '/add/favorite/index.php'; -let deleteFavoriteUri = '/delete/favorite/index.php'; +let addFavoriteUri = '/api/v1/add/favorite/index.php'; +let deleteFavoriteUri = '/api/v1/delete/favorite/index.php'; let BASE_URL = window.location.origin; diff --git a/web/js/react/src/ControlPanelService/Firewalls.js b/web/js/react/src/ControlPanelService/Firewalls.js index 65e117fd6..e882c67e1 100644 --- a/web/js/react/src/ControlPanelService/Firewalls.js +++ b/web/js/react/src/ControlPanelService/Firewalls.js @@ -1,13 +1,13 @@ import axios from 'axios'; +import { getAuthToken } from 'src/utils/token'; const BASE_URL = window.location.origin; -const token = localStorage.getItem("token"); -const usersUri = '/list/firewall/firewall.php'; -const addFirewallUri = '/api/add/firewall/index.php'; -const firewallInfoUri = '/api/edit/firewall/index.php'; -const updateFirewallUri = '/api/edit/firewall/index.php'; -const addBanIpsUri = '/api/add/firewall/banlist/index.php'; -const banListUri = '/list/firewall/banlist/banlist.php'; +const usersUri = '/api/v1/list/firewall/index.php'; +const addFirewallUri = '/api/v1/add/firewall/index.php'; +const firewallInfoUri = '/api/v1/edit/firewall/index.php'; +const updateFirewallUri = '/api/v1/edit/firewall/index.php'; +const addBanIpsUri = '/api/v1/add/firewall/banlist/index.php'; +const banListUri = '/api/v1/list/firewall/banlist/index.php'; export const getFirewallList = () => { return axios.get(BASE_URL + usersUri); @@ -20,17 +20,21 @@ export const getBanList = () => { export const bulkAction = (action, firewalls) => { const formData = new FormData(); formData.append("action", action); - formData.append("token", token); + formData.append("token", getAuthToken()); firewalls.forEach(firewall => { formData.append("rule[]", firewall); }); - return axios.post(BASE_URL + '/bulk/firewall/', formData); + return axios.post(BASE_URL + '/api/v1/bulk/firewall/', formData); }; export const handleAction = uri => { - return axios.get(BASE_URL + uri); + return axios.get(BASE_URL + uri, { + params: { + token: getAuthToken() + } + }); } export const getBanIps = data => { @@ -42,7 +46,7 @@ export const getBanIps = data => { return axios.get(BASE_URL + addBanIpsUri, { params: { - token + token: getAuthToken() } }); } @@ -56,7 +60,7 @@ export const addBanIp = (data) => { return axios.get(BASE_URL + addBanIpsUri, { params: { - token + token: getAuthToken() } }); } @@ -75,7 +79,7 @@ export const getFirewallInfo = rule => { return axios.get(BASE_URL + firewallInfoUri, { params: { rule, - token + token: getAuthToken() } }); } @@ -90,7 +94,7 @@ export const updateFirewall = (data, rule) => { return axios.post(BASE_URL + updateFirewallUri, formDataObject, { params: { rule, - token + token: getAuthToken() } }); } \ No newline at end of file diff --git a/web/js/react/src/ControlPanelService/GeneratorOptions.js b/web/js/react/src/ControlPanelService/GeneratorOptions.js index 763b0d171..5153c9cfa 100644 --- a/web/js/react/src/ControlPanelService/GeneratorOptions.js +++ b/web/js/react/src/ControlPanelService/GeneratorOptions.js @@ -1,145 +1,139 @@ -const { i18n } = window.GLOBAL.App; - -export const minutesRunCommandsOptions = [ - { name: i18n['every minute'] ?? 'every minute', value: '*' }, - { name: i18n['every two minutes'] ?? 'every two minutes', value: '*/2' }, - { name: `${i18n.every || 'every'} 5`, value: '*/5' }, - { name: `${i18n.every || 'every'} 10`, value: '*/10' }, - { name: `${i18n.every || 'every'} 15`, value: '*/15' }, - { name: `${i18n.every || 'every'} 30`, value: '*/30' } -]; - -export const hoursRunCommandsOptions = [ - { name: i18n['every hour'] ?? 'every hour', value: '*' }, - { name: i18n['every two hours'] ?? 'every two hours', value: '*/2' }, - { name: `${i18n.every || 'every'} 6`, value: '*/6' }, - { name: `${i18n.every || 'every'} 12`, value: '*/12' } -]; - -export const daysRunCommandsOptions = [ - { name: i18n['every day'] ?? 'every day', value: '*' }, - { name: i18n['every odd day'] ?? 'every odd day', value: '1-31/2' }, - { name: i18n['every even day'] ?? 'every even day', value: '*/2' }, - { name: `${i18n.every || 'every'} 3`, value: '*/3' }, - { name: `${i18n.every || 'every'} 5`, value: '*/5' }, - { name: `${i18n.every || 'every'} 10`, value: '*/10' }, - { name: `${i18n.every || 'every'} 15`, value: '*/15' } -]; - -export const hoursOptions = [ - { name: '00', value: '0' }, - { name: '01', value: '1' }, - { name: '02', value: '2' }, - { name: '03', value: '3' }, - { name: '04', value: '4' }, - { name: '05', value: '5' }, - { name: '06', value: '6' }, - { name: '07', value: '7' }, - { name: '08', value: '8' }, - { name: '09', value: '9' }, - { name: '10', value: '10' }, - { name: '11', value: '11' }, - { name: '12', value: '12' }, - { name: '13', value: '13' }, - { name: '14', value: '14' }, - { name: '15', value: '15' }, - { name: '16', value: '16' }, - { name: '17', value: '17' }, - { name: '18', value: '18' }, - { name: '19', value: '19' }, - { name: '20', value: '20' }, - { name: '21', value: '21' }, - { name: '22', value: '22' }, - { name: '23', value: '23' } -]; - -export const hourlyMinutesOptions = [ - { name: '00', value: '0' }, - { name: '15', value: '15' }, - { name: '30', value: '30' }, - { name: '45', value: '45' } -]; - -export const dailyMinutesOptions = [ - { name: '00', value: '0' }, - { name: '01', value: '1' }, - { name: '02', value: '2' }, - { name: '05', value: '5' }, - { name: '10', value: '10' }, - { name: '15', value: '15' }, - { name: '20', value: '20' }, - { name: '25', value: '25' }, - { name: '30', value: '30' }, - { name: '35', value: '35' }, - { name: '40', value: '40' }, - { name: '45', value: '45' }, - { name: '50', value: '50' }, - { name: '55', value: '55' } -]; - -export const weeklyRunCommandOptions = [ - { name: i18n['every day'] ?? 'every day', value: '*' }, - { name: i18n['weekdays (5 days)'] ?? 'weekdays (5 days)', value: '1,2,3,4,5' }, - { name: i18n['weekend (2 days)'] ?? 'weekend (2 days)', value: '0,6' }, - { name: i18n.Monday ?? 'Monday', value: '1' }, - { name: i18n.Tuesday ?? 'Tuesday', value: '2' }, - { name: i18n.Wednesday ?? 'Wednesday', value: '3' }, - { name: i18n.Thursday ?? 'Thursday', value: '4' }, - { name: i18n.Friday ?? 'Friday', value: '5' }, - { name: i18n.Saturday ?? 'Saturday', value: '6' }, - { name: i18n.Sunday ?? 'Sunday', value: '0' } -]; - -export const monthlyRunCommandOptions = [ - { name: i18n['every month'] ?? 'every month', value: '*' }, - { name: i18n['every odd month'] ?? 'every odd month', value: '1-11/2' }, - { name: i18n['every even month'] ?? 'every even month', value: '*/2' }, - { name: `${i18n.every || 'every'} 3`, value: '*/3' }, - { name: `${i18n.every || 'every'} 6`, value: '*/6' }, - { name: i18n.Jan ?? 'Jan', value: '1' }, - { name: i18n.Feb ?? 'Feb', value: '2' }, - { name: i18n.Mar ?? 'Mar', value: '3' }, - { name: i18n.Apr ?? 'Apr', value: '4' }, - { name: i18n.May ?? 'May', value: '5' }, - { name: i18n.Jun ?? 'Jun', value: '6' }, - { name: i18n.Jul ?? 'Jul', value: '7' }, - { name: i18n.Aug ?? 'Aug', value: '8' }, - { name: i18n.Sep ?? 'Sep', value: '9' }, - { name: i18n.Oct ?? 'Oct', value: '10' }, - { name: i18n.Nov ?? 'Nov', value: '11' }, - { name: i18n.Dec ?? 'Dec', value: '12' } -]; - -export const dateOptions = [ - { name: '1', value: '1' }, - { name: '2', value: '2' }, - { name: '3', value: '3' }, - { name: '4', value: '4' }, - { name: '5', value: '5' }, - { name: '6', value: '6' }, - { name: '7', value: '7' }, - { name: '8', value: '8' }, - { name: '9', value: '9' }, - { name: '10', value: '10' }, - { name: '11', value: '11' }, - { name: '12', value: '12' }, - { name: '13', value: '13' }, - { name: '14', value: '14' }, - { name: '15', value: '15' }, - { name: '16', value: '16' }, - { name: '17', value: '17' }, - { name: '18', value: '18' }, - { name: '19', value: '19' }, - { name: '20', value: '20' }, - { name: '21', value: '21' }, - { name: '22', value: '22' }, - { name: '23', value: '23' }, - { name: '24', value: '24' }, - { name: '25', value: '25' }, - { name: '26', value: '26' }, - { name: '27', value: '27' }, - { name: '28', value: '28' }, - { name: '29', value: '29' }, - { name: '30', value: '30' }, - { name: '31', value: '31' } -]; \ No newline at end of file +export const generatorOptions = i18n => { + return { + minutesRunCommandsOptions: [ + { name: i18n['every minute'] ?? 'every minute', value: '*' }, + { name: i18n['every two minutes'] ?? 'every two minutes', value: '*/2' }, + { name: `${i18n.every || 'every'} 5`, value: '*/5' }, + { name: `${i18n.every || 'every'} 10`, value: '*/10' }, + { name: `${i18n.every || 'every'} 15`, value: '*/15' }, + { name: `${i18n.every || 'every'} 30`, value: '*/30' } + ], + hoursRunCommandsOptions: [ + { name: i18n['every hour'] ?? 'every hour', value: '*' }, + { name: i18n['every two hours'] ?? 'every two hours', value: '*/2' }, + { name: `${i18n.every || 'every'} 6`, value: '*/6' }, + { name: `${i18n.every || 'every'} 12`, value: '*/12' } + ], + daysRunCommandsOptions: [ + { name: i18n['every day'] ?? 'every day', value: '*' }, + { name: i18n['every odd day'] ?? 'every odd day', value: '1-31/2' }, + { name: i18n['every even day'] ?? 'every even day', value: '*/2' }, + { name: `${i18n.every || 'every'} 3`, value: '*/3' }, + { name: `${i18n.every || 'every'} 5`, value: '*/5' }, + { name: `${i18n.every || 'every'} 10`, value: '*/10' }, + { name: `${i18n.every || 'every'} 15`, value: '*/15' } + ], + hoursOptions: [ + { name: '00', value: '0' }, + { name: '01', value: '1' }, + { name: '02', value: '2' }, + { name: '03', value: '3' }, + { name: '04', value: '4' }, + { name: '05', value: '5' }, + { name: '06', value: '6' }, + { name: '07', value: '7' }, + { name: '08', value: '8' }, + { name: '09', value: '9' }, + { name: '10', value: '10' }, + { name: '11', value: '11' }, + { name: '12', value: '12' }, + { name: '13', value: '13' }, + { name: '14', value: '14' }, + { name: '15', value: '15' }, + { name: '16', value: '16' }, + { name: '17', value: '17' }, + { name: '18', value: '18' }, + { name: '19', value: '19' }, + { name: '20', value: '20' }, + { name: '21', value: '21' }, + { name: '22', value: '22' }, + { name: '23', value: '23' } + ], + hourlyMinutesOptions: [ + { name: '00', value: '0' }, + { name: '15', value: '15' }, + { name: '30', value: '30' }, + { name: '45', value: '45' } + ], + dailyMinutesOptions: [ + { name: '00', value: '0' }, + { name: '01', value: '1' }, + { name: '02', value: '2' }, + { name: '05', value: '5' }, + { name: '10', value: '10' }, + { name: '15', value: '15' }, + { name: '20', value: '20' }, + { name: '25', value: '25' }, + { name: '30', value: '30' }, + { name: '35', value: '35' }, + { name: '40', value: '40' }, + { name: '45', value: '45' }, + { name: '50', value: '50' }, + { name: '55', value: '55' } + ], + weeklyRunCommandOptions: [ + { name: i18n['every day'] ?? 'every day', value: '*' }, + { name: i18n['weekdays (5 days)'] ?? 'weekdays (5 days)', value: '1,2,3,4,5' }, + { name: i18n['weekend (2 days)'] ?? 'weekend (2 days)', value: '0,6' }, + { name: i18n.Monday ?? 'Monday', value: '1' }, + { name: i18n.Tuesday ?? 'Tuesday', value: '2' }, + { name: i18n.Wednesday ?? 'Wednesday', value: '3' }, + { name: i18n.Thursday ?? 'Thursday', value: '4' }, + { name: i18n.Friday ?? 'Friday', value: '5' }, + { name: i18n.Saturday ?? 'Saturday', value: '6' }, + { name: i18n.Sunday ?? 'Sunday', value: '0' } + ], + monthlyRunCommandOptions: [ + { name: i18n['every month'] ?? 'every month', value: '*' }, + { name: i18n['every odd month'] ?? 'every odd month', value: '1-11/2' }, + { name: i18n['every even month'] ?? 'every even month', value: '*/2' }, + { name: `${i18n.every || 'every'} 3`, value: '*/3' }, + { name: `${i18n.every || 'every'} 6`, value: '*/6' }, + { name: i18n.Jan ?? 'Jan', value: '1' }, + { name: i18n.Feb ?? 'Feb', value: '2' }, + { name: i18n.Mar ?? 'Mar', value: '3' }, + { name: i18n.Apr ?? 'Apr', value: '4' }, + { name: i18n.May ?? 'May', value: '5' }, + { name: i18n.Jun ?? 'Jun', value: '6' }, + { name: i18n.Jul ?? 'Jul', value: '7' }, + { name: i18n.Aug ?? 'Aug', value: '8' }, + { name: i18n.Sep ?? 'Sep', value: '9' }, + { name: i18n.Oct ?? 'Oct', value: '10' }, + { name: i18n.Nov ?? 'Nov', value: '11' }, + { name: i18n.Dec ?? 'Dec', value: '12' } + ], + dateOptions: [ + { name: '1', value: '1' }, + { name: '2', value: '2' }, + { name: '3', value: '3' }, + { name: '4', value: '4' }, + { name: '5', value: '5' }, + { name: '6', value: '6' }, + { name: '7', value: '7' }, + { name: '8', value: '8' }, + { name: '9', value: '9' }, + { name: '10', value: '10' }, + { name: '11', value: '11' }, + { name: '12', value: '12' }, + { name: '13', value: '13' }, + { name: '14', value: '14' }, + { name: '15', value: '15' }, + { name: '16', value: '16' }, + { name: '17', value: '17' }, + { name: '18', value: '18' }, + { name: '19', value: '19' }, + { name: '20', value: '20' }, + { name: '21', value: '21' }, + { name: '22', value: '22' }, + { name: '23', value: '23' }, + { name: '24', value: '24' }, + { name: '25', value: '25' }, + { name: '26', value: '26' }, + { name: '27', value: '27' }, + { name: '28', value: '28' }, + { name: '29', value: '29' }, + { name: '30', value: '30' }, + { name: '31', value: '31' } + ] + } +} diff --git a/web/js/react/src/ControlPanelService/Ip.js b/web/js/react/src/ControlPanelService/Ip.js index 54431e6d7..9a8904954 100644 --- a/web/js/react/src/ControlPanelService/Ip.js +++ b/web/js/react/src/ControlPanelService/Ip.js @@ -1,12 +1,12 @@ import axios from "axios"; +import { getAuthToken } from "src/utils/token"; -const token = localStorage.getItem("token"); const BASE_URL = window.location.origin; -const webApiUri = '/list/ip/ip.php'; -const addIpApiUri = '/api/add/ip/index.php'; -const additionalInfoUri = '/api/add/ip/index.php'; -const ipInfoUri = '/api/edit/ip/index.php'; -const updateIpUri = '/api/edit/ip/index.php'; +const webApiUri = '/api/v1/list/ip/index.php'; +const addIpApiUri = '/api/v1/add/ip/index.php'; +const additionalInfoUri = '/api/v1/add/ip/index.php'; +const ipInfoUri = '/api/v1/edit/ip/index.php'; +const updateIpUri = '/api/v1/edit/ip/index.php'; export const getIpList = () => { return axios.get(BASE_URL + webApiUri); @@ -15,18 +15,21 @@ export const getIpList = () => { export const bulkAction = (action, internetProtocols) => { const formData = new FormData(); formData.append("action", action); - formData.append("token", token); + formData.append("token", getAuthToken()); internetProtocols.forEach(internetProtocol => { formData.append("ip[]", internetProtocol); - formData.append("delete_url", `/delete/ip/?ip=${internetProtocol}&token=${token}`); }); - return axios.post(BASE_URL + '/bulk/ip/', formData); + return axios.post(BASE_URL + '/api/v1/bulk/ip/', formData); }; export const handleAction = uri => { - return axios.get(BASE_URL + uri); + return axios.get(BASE_URL + uri, { + params: { + token: getAuthToken() + } + }); } export const getAdditionalInfo = () => { @@ -47,7 +50,7 @@ export const getInternetProtocolInfo = ip => { return axios.get(BASE_URL + ipInfoUri, { params: { ip, - token + token: getAuthToken() } }); } @@ -62,7 +65,7 @@ export const updateInternetProtocol = (data, ip) => { return axios.post(BASE_URL + updateIpUri, formDataObject, { params: { ip, - token + token: getAuthToken() } }); } \ No newline at end of file diff --git a/web/js/react/src/ControlPanelService/Languages.js b/web/js/react/src/ControlPanelService/Languages.js index a56cab164..4b901d947 100644 --- a/web/js/react/src/ControlPanelService/Languages.js +++ b/web/js/react/src/ControlPanelService/Languages.js @@ -1,6 +1,6 @@ import axios from "axios"; -const webApiUri = '/api/languages.php'; +const webApiUri = '/api/v1/languages.php'; const BASE_URL = window.location.origin; export const getLanguages = () => { diff --git a/web/js/react/src/ControlPanelService/Logs.js b/web/js/react/src/ControlPanelService/Logs.js index 49f794722..30f95f848 100644 --- a/web/js/react/src/ControlPanelService/Logs.js +++ b/web/js/react/src/ControlPanelService/Logs.js @@ -1,7 +1,7 @@ import axios from "axios"; const BASE_URL = window.location.origin; -const webApiUri = '/list/log/log.php'; +const webApiUri = '/api/v1/list/log/index.php'; export const getLogsList = () => { return axios.get(BASE_URL + webApiUri); diff --git a/web/js/react/src/ControlPanelService/Mail.js b/web/js/react/src/ControlPanelService/Mail.js index 80c8f76e3..3f7e400e7 100644 --- a/web/js/react/src/ControlPanelService/Mail.js +++ b/web/js/react/src/ControlPanelService/Mail.js @@ -1,12 +1,11 @@ import axios from "axios"; +import { getAuthToken } from "src/utils/token"; -const token = localStorage.getItem("token"); -const { i18n } = window.GLOBAL.App; const BASE_URL = window.location.origin; -const webApiUri = '/list/mail/mail.php'; -const addMailApiUri = '/api/add/mail/index.php'; -const mailInfoUri = '/api/edit/mail/index.php'; -const updateMailUri = '/api/edit/mail/index.php'; +const webApiUri = '/api/v1/list/mail/index.php'; +const addMailApiUri = '/api/v1/add/mail/index.php'; +const mailInfoUri = '/api/v1/edit/mail/index.php'; +const updateMailUri = '/api/v1/edit/mail/index.php'; export const getMailList = () => { return axios.get(BASE_URL + webApiUri); @@ -23,30 +22,34 @@ export const getMailAccountInfo = (domain, account) => { export const bulkAction = (action, domainNameSystems) => { const formData = new FormData(); formData.append("action", action); - formData.append("token", token); + formData.append("token", getAuthToken()); domainNameSystems.forEach(domainNameSystem => { formData.append("domain[]", domainNameSystem); }); - return axios.post(BASE_URL + '/bulk/mail/', formData); + return axios.post(BASE_URL + '/api/v1/bulk/mail/', formData); }; export const bulkMailAccountAction = (action, domain, accounts = []) => { const formData = new FormData(); formData.append("action", action); - formData.append("token", token); + formData.append("token", getAuthToken()); formData.append("domain", domain); accounts.forEach(account => { formData.append("account[]", account); }); - return axios.post(BASE_URL + '/bulk/mail/', formData); + return axios.post(BASE_URL + '/api/v1/bulk/mail/', formData); }; export const handleAction = uri => { - return axios.get(BASE_URL + uri); + return axios.get(BASE_URL + uri, { + params: { + token: getAuthToken() + } + }); } export const addMail = data => { @@ -83,7 +86,7 @@ export const getMailInfo = domain => { return axios.get(BASE_URL + mailInfoUri, { params: { domain, - token + token: getAuthToken() } }); } @@ -98,12 +101,12 @@ export const updateMail = (data, domain) => { return axios.post(BASE_URL + updateMailUri, formDataObject, { params: { domain, - token + token: getAuthToken() } }); } -export const mailInfoBlockSelectOptions = [ +export const mailInfoBlockSelectOptions = i18n => [ { value: i18n['Use server hostname'], type: 'hostname', diff --git a/web/js/react/src/ControlPanelService/Notifications.js b/web/js/react/src/ControlPanelService/Notifications.js index c143d299c..894d5bab1 100644 --- a/web/js/react/src/ControlPanelService/Notifications.js +++ b/web/js/react/src/ControlPanelService/Notifications.js @@ -1,10 +1,16 @@ import axios from "axios"; +import { getAuthToken } from "src/utils/token"; let BASE_URL = window.location.origin; -let getNotificationsUri = '/list/notifications/?ajax=1'; -let deleteNotificationsUri = '/delete/notification'; +let getNotificationsUri = '/api/v1/list/notifications/index.php'; +let deleteNotificationsUri = '/api/v1/delete/notification/index.php'; export const getAppNotifications = () => { - return axios.get(BASE_URL + getNotificationsUri); + return axios.get(BASE_URL + getNotificationsUri, { + params: { + ajax: 1, + token: getAuthToken() + } + }); } export const deleteNotification = id => { @@ -12,7 +18,7 @@ export const deleteNotification = id => { params: { 'delete': 1, 'notification_id': id, - 'token': localStorage.getItem("token") + token: getAuthToken() } }); } \ No newline at end of file diff --git a/web/js/react/src/ControlPanelService/Package.js b/web/js/react/src/ControlPanelService/Package.js index 1a64605c8..ca8619b2b 100644 --- a/web/js/react/src/ControlPanelService/Package.js +++ b/web/js/react/src/ControlPanelService/Package.js @@ -1,12 +1,12 @@ import axios from "axios"; +import { getAuthToken } from "src/utils/token"; const BASE_URL = window.location.origin; -const token = localStorage.getItem("token"); -const webApiUri = '/list/package/package.php'; -const additionalPackageInfoUri = '/api/add/package/index.php'; -const addPackageUri = '/api/add/package/index.php'; -const packageInfoUri = '/api/edit/package/index.php'; -const updatePackageUri = '/api/edit/package/index.php'; +const webApiUri = '/api/v1/list/package/index.php'; +const additionalPackageInfoUri = '/api/v1/add/package/index.php'; +const addPackageUri = '/api/v1/add/package/index.php'; +const packageInfoUri = '/api/v1/edit/package/index.php'; +const updatePackageUri = '/api/v1/edit/package/index.php'; export const getPackageList = () => { return axios.get(BASE_URL + webApiUri); @@ -15,18 +15,21 @@ export const getPackageList = () => { export const bulkAction = (action, backups) => { const formData = new FormData(); formData.append("action", action); - formData.append("token", token); + formData.append("token", getAuthToken()); backups.forEach(backup => { formData.append("package[]", backup); - formData.append("delete_url", `/delete/package/?package=${backup}&token=${token}`); }); - return axios.post(BASE_URL + '/bulk/package/', formData); + return axios.post(BASE_URL + '/api/v1/bulk/package/', formData); }; export const handleAction = uri => { - return axios.get(BASE_URL + uri); + return axios.get(BASE_URL + uri, { + params: { + token: getAuthToken() + } + }); } export const addPackage = data => { @@ -47,7 +50,7 @@ export const getPackageInfo = item => { return axios.get(BASE_URL + packageInfoUri, { params: { package: item, - token + token: getAuthToken() } }); } diff --git a/web/js/react/src/ControlPanelService/RRD.js b/web/js/react/src/ControlPanelService/RRD.js index 3b8b0ca5c..5c836dba7 100644 --- a/web/js/react/src/ControlPanelService/RRD.js +++ b/web/js/react/src/ControlPanelService/RRD.js @@ -1,12 +1,12 @@ import axios from "axios"; const BASE_URL = window.location.origin; -const webApiUri = '/list/rrd/rrd.php'; +const webApiUri = '/api/v1/list/rrd/index.php'; export const getRrdList = () => { return axios.get(BASE_URL + webApiUri); } export function generateImagePath(period, type, rrd) { - return `/list/rrd/image.php?/rrd/${type}/${period}-${rrd}.png`; -} \ No newline at end of file + return `/api/v1/list/rrd/image.php?/rrd/${type}/${period}-${rrd}.png`; +} diff --git a/web/js/react/src/ControlPanelService/ResetPassword.js b/web/js/react/src/ControlPanelService/ResetPassword.js index ce2249912..d353cd6c9 100644 --- a/web/js/react/src/ControlPanelService/ResetPassword.js +++ b/web/js/react/src/ControlPanelService/ResetPassword.js @@ -1,7 +1,7 @@ import axios from "axios"; const BASE_URL = window.location.origin; -const resetPasswordUri = '/api/reset/index.php'; +const resetPasswordUri = '/api/v1/reset/index.php'; export const resetPassword = (user = '', code = '', password = '', confirmPassword = '') => { const formData = new FormData(); diff --git a/web/js/react/src/ControlPanelService/Search.js b/web/js/react/src/ControlPanelService/Search.js index 8e31f02e6..187859720 100644 --- a/web/js/react/src/ControlPanelService/Search.js +++ b/web/js/react/src/ControlPanelService/Search.js @@ -1,4 +1,5 @@ import axios from "axios"; +import { getAuthToken } from "src/utils/token"; const BASE_URL = window.location.origin; const webApiUri = '/search/search.php'; @@ -8,5 +9,9 @@ export const getSearchResultsList = term => { } export const handleAction = uri => { - return axios.get(BASE_URL + uri); -} \ No newline at end of file + return axios.get(BASE_URL + uri, { + params: { + token: getAuthToken() + } + }); +} diff --git a/web/js/react/src/ControlPanelService/Server.js b/web/js/react/src/ControlPanelService/Server.js index 8dda84cde..8b26491d5 100644 --- a/web/js/react/src/ControlPanelService/Server.js +++ b/web/js/react/src/ControlPanelService/Server.js @@ -1,9 +1,9 @@ import axios from "axios"; +import { getAuthToken } from "src/utils/token"; const BASE_URL = window.location.origin; -const token = localStorage.getItem("token"); -const webApiUri = '/list/server/server.php'; -const serverAdditionalInfoUri = '/api/edit/server/index.php'; +const webApiUri = '/api/v1/list/server/index.php'; +const serverAdditionalInfoUri = '/api/v1/edit/server/index.php'; export const getServersList = () => { return axios.get(BASE_URL + webApiUri); @@ -12,23 +12,27 @@ export const getServersList = () => { export const bulkAction = (action, services) => { const formData = new FormData(); formData.append("action", action); - formData.append("token", token); + formData.append("token", getAuthToken()); services.forEach(service => { formData.append("service[]", service); }); - return axios.post(BASE_URL + '/api/bulk/service/', formData); + return axios.post(BASE_URL + '/api/v1/bulk/service/', formData); }; export const handleAction = uri => { - return axios.get(BASE_URL + uri); + return axios.get(BASE_URL + uri, { + params: { + token: getAuthToken() + } + }); } export const getServerAdditionalInfo = () => { return axios.get(BASE_URL + serverAdditionalInfoUri, { params: { - token + token: getAuthToken() } }); } @@ -40,19 +44,19 @@ export const updateService = (data, uri = '') => { formDataObject.append(key, data[key]); } - return axios.post(BASE_URL + `/api/edit/server/${uri}/index.php`, formDataObject, { + return axios.post(BASE_URL + `/api/v1/edit/server/${uri}/index.php`, formDataObject, { params: { - token + token: getAuthToken() } }); } export const getServiceInfo = service => { - return axios.get(`${BASE_URL}/api/edit/server/${service}/index.php`); + return axios.get(`${BASE_URL}/api/v1/edit/server/${service}/index.php`); } export const getServiceLogs = service => { - return axios.get(`${BASE_URL}/list/server/server.php?${service}`); + return axios.get(`${BASE_URL}${webApiUri}?${service}`); } export const services = [ diff --git a/web/js/react/src/ControlPanelService/Statistics.js b/web/js/react/src/ControlPanelService/Statistics.js index d66cebf3c..8d039d866 100644 --- a/web/js/react/src/ControlPanelService/Statistics.js +++ b/web/js/react/src/ControlPanelService/Statistics.js @@ -1,7 +1,7 @@ import axios from "axios"; const BASE_URL = window.location.origin; -const webApiUri = '/list/stats/stats.php'; +const webApiUri = '/api/v1/list/stats/index.php'; export const getStatisticsList = user => { return axios.get(BASE_URL + webApiUri + '?user=' + user); diff --git a/web/js/react/src/ControlPanelService/Updates.js b/web/js/react/src/ControlPanelService/Updates.js index f2bb9c49e..334cf7d26 100644 --- a/web/js/react/src/ControlPanelService/Updates.js +++ b/web/js/react/src/ControlPanelService/Updates.js @@ -1,9 +1,9 @@ import axios from "axios"; +import { getAuthToken } from "src/utils/token"; const deleteAutoUpdateUri = '/delete/cron/autoupdate/'; const addAutoUpdateUri = '/add/cron/autoupdate/'; -const webApiUri = '/list/updates/updates.php'; -const token = localStorage.getItem("token"); +const webApiUri = '/api/v1/list/updates/index.php'; const BASE_URL = window.location.origin; export const getUpdatesList = () => { @@ -13,23 +13,35 @@ export const getUpdatesList = () => { export const bulkAction = (action, updates) => { const formData = new FormData(); formData.append("action", action); - formData.append("token", token); + formData.append("token", getAuthToken()); updates.forEach(update => { formData.append("pkg[]", update); }); - return axios.post(BASE_URL + '/bulk/vesta/', formData); + return axios.post(BASE_URL + '/api/v1/bulk/vesta/', formData); }; export const handleAction = uri => { - return axios.get(`${BASE_URL}${uri}?token=${token}`); + return axios.get(BASE_URL + uri, { + params: { + token: getAuthToken() + } + }); } export const enableAutoUpdate = () => { - return axios.get(`${BASE_URL}${addAutoUpdateUri}?token=${token}`); + return axios.get(`${BASE_URL}${addAutoUpdateUri}`, { + params: { + token: getAuthToken() + } + }); }; export const disableAutoUpdate = () => { - return axios.get(`${BASE_URL}${deleteAutoUpdateUri}?token=${token}`); + return axios.get(`${BASE_URL}${deleteAutoUpdateUri}`, { + params: { + token: getAuthToken() + } + }); }; \ No newline at end of file diff --git a/web/js/react/src/ControlPanelService/UserNS.js b/web/js/react/src/ControlPanelService/UserNS.js index a78f6ef6f..c0fb1aaf4 100644 --- a/web/js/react/src/ControlPanelService/UserNS.js +++ b/web/js/react/src/ControlPanelService/UserNS.js @@ -1,7 +1,7 @@ import axios from "axios"; const BASE_URL = window.location.origin; -const userNSApiUri = '/api/list-user-ns.php'; +const userNSApiUri = '/api/v1/list-user-ns.php'; export const getUserNS = () => { return axios.get(BASE_URL + userNSApiUri); diff --git a/web/js/react/src/ControlPanelService/Users.js b/web/js/react/src/ControlPanelService/Users.js index 12f8c4895..1de526756 100644 --- a/web/js/react/src/ControlPanelService/Users.js +++ b/web/js/react/src/ControlPanelService/Users.js @@ -1,30 +1,38 @@ import axios from 'axios'; +import { getAuthToken } from 'src/utils/token'; -let token = localStorage.getItem('token'); const BASE_URL = window.location.origin; -const usersUri = '/list/user/user.php'; -const addUsersUri = '/api/add/user/index.php'; -const userInfoUri = '/api/edit/user/index.php'; -const updateUserUri = '/api/edit/user/index.php'; +const usersUri = '/api/v1/list/user/index.php'; +const addUsersUri = '/api/v1/add/user/index.php'; +const userInfoUri = '/api/v1/edit/user/index.php'; +const updateUserUri = '/api/v1/edit/user/index.php'; export const getUsersList = () => { - return axios.get(BASE_URL + usersUri); + return axios.get(BASE_URL + usersUri, { + params: { + token: getAuthToken() + } + }); } export const bulkAction = (action, selectedUsers) => { const formData = new FormData(); - formData.append("token", token); + formData.append("token", getAuthToken()); formData.append("action", action); selectedUsers.forEach(user => { formData.append("user[]", user); }); - return axios.post(BASE_URL + '/bulk/user/', formData); + return axios.post(BASE_URL + '/api/v1/bulk/user/', formData); }; export const handleAction = uri => { - return axios.get(BASE_URL + uri); + return axios.get(BASE_URL + uri, { + params: { + token: getAuthToken() + } + }); } export const addUser = data => { @@ -34,7 +42,7 @@ export const addUser = data => { formDataObject.append(key, data[key]); } - formDataObject.append("token", token); + formDataObject.append("token", getAuthToken()); formDataObject.append("ok", "Add"); return axios.post(BASE_URL + addUsersUri, formDataObject); @@ -44,7 +52,7 @@ export const getUserInfo = username => { return axios.get(BASE_URL + userInfoUri, { params: { user: username, - token + token: getAuthToken() } }); } @@ -59,7 +67,7 @@ export const updateUser = (data, user) => { return axios.post(BASE_URL + updateUserUri, formDataObject, { params: { user, - token + token: getAuthToken() } }); -} \ No newline at end of file +} diff --git a/web/js/react/src/ControlPanelService/Web.js b/web/js/react/src/ControlPanelService/Web.js index 40aa32557..633881d5b 100644 --- a/web/js/react/src/ControlPanelService/Web.js +++ b/web/js/react/src/ControlPanelService/Web.js @@ -1,12 +1,12 @@ import axios from "axios"; +import { getAuthToken } from "src/utils/token"; -const token = localStorage.getItem("token"); const BASE_URL = window.location.origin; -const addWebUri = '/api/add/web/index.php'; -const webApiUri = '/list/web/web.php'; -const webStatsUri = '/api/web-stats.php'; -const domainInfoUri = '/api/edit/web/index.php'; -const updateDomainUri = '/api/edit/web/index.php'; +const addWebUri = '/api/v1/add/web/index.php'; +const webApiUri = '/api/v1/list/web/index.php'; +const webStatsUri = '/api/v1/web-stats.php'; +const domainInfoUri = '/api/v1/edit/web/index.php'; +const updateDomainUri = '/api/v1/edit/web/index.php'; export const getWebList = () => { return axios.get(BASE_URL + webApiUri); @@ -15,17 +15,21 @@ export const getWebList = () => { export const bulkAction = (action, webDomains) => { const formData = new FormData(); formData.append("action", action); - formData.append("token", token); + formData.append("token", getAuthToken()); webDomains.forEach(webDomain => { formData.append("domain[]", webDomain); }); - return axios.post(BASE_URL + '/bulk/web/', formData); + return axios.post(BASE_URL + '/api/v1/bulk/web/', formData); }; export const handleAction = uri => { - return axios.get(BASE_URL + uri); + return axios.get(BASE_URL + uri, { + params: { + token: getAuthToken() + } + }); } export const addWeb = data => { @@ -46,7 +50,7 @@ export const getDomainInfo = domain => { return axios.get(BASE_URL + domainInfoUri, { params: { domain, - token + token: getAuthToken() } }); } @@ -61,7 +65,7 @@ export const updateWebDomain = (data, domain) => { return axios.post(BASE_URL + updateDomainUri, formDataObject, { params: { domain, - token + token: getAuthToken() } }); } \ No newline at end of file diff --git a/web/js/react/src/ControlPanelService/WebLogs.js b/web/js/react/src/ControlPanelService/WebLogs.js index 0146bc042..fd3504796 100644 --- a/web/js/react/src/ControlPanelService/WebLogs.js +++ b/web/js/react/src/ControlPanelService/WebLogs.js @@ -3,5 +3,5 @@ import axios from "axios"; const BASE_URL = window.location.origin; export const getWebLogs = uri => { - return axios.get(BASE_URL + uri); + return axios.get(BASE_URL + '/api/v1' +uri); } \ No newline at end of file diff --git a/web/js/react/src/FileManagerHelper.js b/web/js/react/src/FileManagerHelper.js index 176a1a583..fa1940efe 100644 --- a/web/js/react/src/FileManagerHelper.js +++ b/web/js/react/src/FileManagerHelper.js @@ -1,23 +1,35 @@ import axios from "axios"; +import QueryString from "qs"; const server = window.location.origin + "/file_manager/fm_api.php?"; export function validateAction(url) { return axios.get(url); } -export function cacheData(currentUser, history) { +export function cacheData(currentUser, history, rootDir) { + const parsedQueryString = QueryString.parse(history.location.search, { ignoreQueryPrefix: true }); + + if (parsedQueryString.path) { + localStorage.setItem("activeWindow", "left"); + localStorage.setItem("leftListPath", parsedQueryString.path); + localStorage.setItem("rightListPath", parsedQueryString.path); + return; + } + if (localStorage.getItem("lastUser") === null || currentUser !== localStorage.getItem("lastUser")) { localStorage.setItem("lastUser", currentUser); localStorage.setItem("activeWindow", "left"); - localStorage.setItem("leftListPath", window.GLOBAL.ROOT_DIR); - localStorage.setItem("rightListPath", window.GLOBAL.ROOT_DIR); + localStorage.setItem("leftListPath", rootDir); + localStorage.setItem("rightListPath", rootDir); + return; } if (localStorage.getItem("activeWindow") === null || localStorage.getItem("leftListPath") === null || localStorage.getItem("rightListPath") === null) { let path = history.location.search.substring(6).split('/'); localStorage.setItem("activeWindow", "left"); localStorage.setItem("leftListPath", path); - localStorage.setItem("rightListPath", window.GLOBAL.ROOT_DIR); + localStorage.setItem("rightListPath", rootDir); + return; } } diff --git a/web/js/react/src/actions/Notification/notificationActions.js b/web/js/react/src/actions/Notification/notificationActions.js new file mode 100644 index 000000000..eae604b49 --- /dev/null +++ b/web/js/react/src/actions/Notification/notificationActions.js @@ -0,0 +1,15 @@ +import { ADD_NOTIFICATIONS, REMOVE_NOTIFICATIONS } from './notificationTypes'; + +export const addNotifications = value => { + return { + type: ADD_NOTIFICATIONS, + value + }; +}; + +export const removeNotifications = () => { + return { + type: REMOVE_NOTIFICATIONS, + value: [] + }; +}; diff --git a/web/js/react/src/actions/Notification/notificationTypes.js b/web/js/react/src/actions/Notification/notificationTypes.js new file mode 100644 index 000000000..1aa46d00d --- /dev/null +++ b/web/js/react/src/actions/Notification/notificationTypes.js @@ -0,0 +1,2 @@ +export const ADD_NOTIFICATIONS = 'ADD_NOTIFICATIONS'; +export const REMOVE_NOTIFICATIONS = 'REMOVE_NOTIFICATIONS'; diff --git a/web/js/react/src/actions/Session/sessionActions.js b/web/js/react/src/actions/Session/sessionActions.js index 0bcf22446..8fedafc35 100644 --- a/web/js/react/src/actions/Session/sessionActions.js +++ b/web/js/react/src/actions/Session/sessionActions.js @@ -1,29 +1,31 @@ -import { LOGIN, LOGOUT, LOGGED_OUT_AS, RESET_PASSWORD } from './sessionTypes'; +import { LOGIN, LOGOUT, LOGGED_OUT_AS, CHECK_AUTH, RESET_PASSWORD } from './sessionTypes'; import { checkAuth, signIn, signInAs, signOut } from 'src/services/session'; -import { resetAuthToken, setAuthToken } from 'src/utils/token'; import { resetPassword } from 'src/ControlPanelService/ResetPassword'; +import { resetAuthToken, setAuthToken } from 'src/utils/token'; const LOGOUT_RESPONSE = 'logged_out'; const LOGOUT_AS_RESPONSE = 'logged_out_as'; export const login = (user, password) => dispatch => { return new Promise((resolve, reject) => { - signIn(user, password).then((response) => { - const { error, session, token, panel, data, user } = response.data; + signIn({ user, password }).then((response) => { + const { error, session, token, panel, data, user, i18n } = response.data; + if (token) setAuthToken(token); dispatch({ type: LOGIN, value: { - token: data ? token : '', + token: token || '', panel, session, + i18n: i18n || {}, userName: user, user: data, error }, }); - resolve(response.data); + resolve(token); }, (error) => { reject(error); }); @@ -34,7 +36,6 @@ export const reset = ({ user = '', code = '', password = '', password_confirm = return new Promise((resolve, reject) => { resetPassword(user, code, password, password_confirm).then((response) => { const { error, session, token, panel, user } = response.data; - if (token) setAuthToken(token); dispatch({ type: RESET_PASSWORD, @@ -47,7 +48,7 @@ export const reset = ({ user = '', code = '', password = '', password_confirm = error }, }); - resolve(response.data); + resolve(token); }, (error) => { reject(error); }); @@ -57,22 +58,23 @@ export const reset = ({ user = '', code = '', password = '', password_confirm = export const loginAs = username => dispatch => { return new Promise((resolve, reject) => { signInAs(username).then((response) => { - const { error, token, session, panel, data, user } = response.data; + const { error, token, session, panel, data, user, i18n } = response.data; if (token) setAuthToken(token); dispatch({ type: LOGIN, value: { - token, - panel, - session, userName: user, user: data, - error, - }, + i18n, + session, + panel, + token, + error + } }); - resolve(response.data); + resolve(token); }, (error) => { console.error(error); reject(); @@ -83,7 +85,7 @@ export const loginAs = username => dispatch => { export const logout = () => (dispatch, getState) => { return new Promise((resolve, reject) => { signOut().then((response) => { - const { logout_response, panel, session, user, data, token } = response.data; + const { logout_response, error, userName, user, i18n, session, panel } = response.data; if (logout_response === LOGOUT_RESPONSE) { resetAuthToken(); @@ -91,27 +93,28 @@ export const logout = () => (dispatch, getState) => { dispatch({ type: LOGOUT, value: { - userName: user, + userName: '', user: {}, - token, - panel, - session, - error: '' + token: '', + panel: {}, + session: {}, + i18n: [], + error, }, }); resolve(); } else if (logout_response === LOGOUT_AS_RESPONSE) { - const { token } = getState().session; dispatch({ type: LOGGED_OUT_AS, value: { - userName: user, - user: data, + userName, + user, session, panel, - token, - error: '' + token: '', + i18n, + error, }, }); @@ -126,17 +129,18 @@ export const logout = () => (dispatch, getState) => { }); } -export const setToken = (token) => (dispatch, getState) => { +export const checkAuthHandler = () => (dispatch, getState) => { return new Promise((resolve, reject) => { - checkAuth(token) + checkAuth() .then(res => { - const { user, data, session, panel, error } = res.data; + const { user, data, session, panel, error, i18n, token } = res.data; dispatch({ - type: LOGIN, + type: CHECK_AUTH, value: { userName: user, user: data, + i18n, session, panel, token, @@ -144,7 +148,7 @@ export const setToken = (token) => (dispatch, getState) => { } }); - resolve(); + resolve(token); }) .catch(err => { reject(); diff --git a/web/js/react/src/actions/Session/sessionTypes.js b/web/js/react/src/actions/Session/sessionTypes.js index bfa373cbc..2dfd6c1e5 100644 --- a/web/js/react/src/actions/Session/sessionTypes.js +++ b/web/js/react/src/actions/Session/sessionTypes.js @@ -1,5 +1,6 @@ export const LOGIN = 'LOGIN'; export const LOGOUT = 'LOGOUT'; export const LOGIN_AS = 'LOGIN_AS'; +export const CHECK_AUTH = 'CHECK_AUTH'; export const LOGGED_OUT_AS = 'LOGGED_OUT_AS'; export const RESET_PASSWORD = 'RESET_PASSWORD'; \ No newline at end of file diff --git a/web/js/react/src/components/Backup/Backup.jsx b/web/js/react/src/components/Backup/Backup.jsx index 6518eb871..e0e02c08a 100644 --- a/web/js/react/src/components/Backup/Backup.jsx +++ b/web/js/react/src/components/Backup/Backup.jsx @@ -5,10 +5,11 @@ import Container from '../ControlPanel/Container/Container'; import { faFileDownload } from '@fortawesome/free-solid-svg-icons' import './Backup.scss'; import { Link } from 'react-router-dom'; +import { useSelector } from 'react-redux'; const Backup = props => { const { data } = props; - const { i18n } = window.GLOBAL.App; + const { i18n } = useSelector(state => state.session); const token = localStorage.getItem("token"); const toggleFav = (starred) => { @@ -24,7 +25,7 @@ const Backup = props => { } const handleDelete = () => { - props.handleModal(data.delete_conf, `/delete/backup/?backup=${data.NAME}&token=${token}`); + props.handleModal(data.delete_conf, `/api/v1/delete/backup/?backup=${data.NAME}`); } return ( 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 9ede3f769..12dfba2f8 100644 --- a/web/js/react/src/components/Backup/Exclusion/Edit/index.jsx +++ b/web/js/react/src/components/Backup/Exclusion/Edit/index.jsx @@ -7,14 +7,14 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import Toolbar from 'src/components/MainNav/Toolbar/Toolbar'; import Spinner from 'src/components/Spinner/Spinner'; import { useHistory } from 'react-router-dom'; -import { useDispatch } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { Helmet } from 'react-helmet'; import './style.scss'; const EditBackupExclusions = () => { const token = localStorage.getItem("token"); - const { i18n } = window.GLOBAL.App; + const { i18n } = useSelector(state => state.session); const history = useHistory(); const dispatch = useDispatch(); const [state, setState] = useState({ diff --git a/web/js/react/src/components/Backup/Exclusion/index.jsx b/web/js/react/src/components/Backup/Exclusion/index.jsx index d7d089731..2247423e8 100644 --- a/web/js/react/src/components/Backup/Exclusion/index.jsx +++ b/web/js/react/src/components/Backup/Exclusion/index.jsx @@ -1,16 +1,19 @@ import React from 'react'; +import { useSelector } from 'react-redux'; import Container from '../../ControlPanel/Container/Container'; import './style.scss'; const Exclusion = ({ data, focused }) => { + const { i18n } = useSelector(state => state.session); + const renderExclusionItems = () => { if (!Array.isArray(data.ITEMS)) { for (let item in data.ITEMS) { return <>{item}   {data.ITEMS[item]}
; } } else { - return window.GLOBAL.App.i18n['no exclusions']; + return i18n['no exclusions']; } } diff --git a/web/js/react/src/components/Backup/RestoreSetting/RestoreSetting.jsx b/web/js/react/src/components/Backup/RestoreSetting/RestoreSetting.jsx index 3a0356b27..72dbbba60 100644 --- a/web/js/react/src/components/Backup/RestoreSetting/RestoreSetting.jsx +++ b/web/js/react/src/components/Backup/RestoreSetting/RestoreSetting.jsx @@ -5,9 +5,10 @@ import ListItem from '../../ControlPanel/ListItem/ListItem'; import { Link } from 'react-router-dom'; import './RestoreSetting.scss'; +import { useSelector } from 'react-redux'; export default function RestoreSetting({ data, checkItemFunc = () => { }, restoreSetting = () => { } }) { - const { i18n } = window.GLOBAL.App; + const { i18n } = useSelector(state => state.session); const displayBackupDetailName = type => { switch (type) { diff --git a/web/js/react/src/components/Backup/RestoreSetting/RestoreSetting.scss b/web/js/react/src/components/Backup/RestoreSetting/RestoreSetting.scss index 53f1e097c..63ec7dcd4 100644 --- a/web/js/react/src/components/Backup/RestoreSetting/RestoreSetting.scss +++ b/web/js/react/src/components/Backup/RestoreSetting/RestoreSetting.scss @@ -1,3 +1,14 @@ +$whiteBackground: #ececec; +$primary: #2c54ac; +$primaryLight: #d7dcef; +$primaryActive: #1e5cb2; +$secondary: #fcac04; +$secondaryLight: #f8b014; +$secondaryActive: #fdb51c; +$hoverButtonText: #2c54ac; +$activeButtonText: #fff; +$textColor: #555; + .backups-restore-settings { .list-item { .r-col { @@ -18,12 +29,12 @@ display: flex; justify-content: center; align-items: center; - color: #777; + color: $textColor; padding: 10px 15px; text-decoration: none; &:hover { - background: rgb(145, 145, 145); + background: $whiteBackground; color: white; svg { @@ -33,7 +44,7 @@ } svg { - color: #777; + color: $textColor; } } @@ -43,7 +54,13 @@ } &:hover { - background-color: #9fbf0c; + color: $hoverButtonText; + background-color: $primaryLight; + } + + &:hover { + color: $activeButtonText; + background-color: $primaryActive; } } } diff --git a/web/js/react/src/components/Backup/RestoreSettings/BackupRestoreSettings.jsx b/web/js/react/src/components/Backup/RestoreSettings/BackupRestoreSettings.jsx index a59de8177..7043d56f7 100644 --- a/web/js/react/src/components/Backup/RestoreSettings/BackupRestoreSettings.jsx +++ b/web/js/react/src/components/Backup/RestoreSettings/BackupRestoreSettings.jsx @@ -17,7 +17,7 @@ import { Helmet } from 'react-helmet'; import './BackupRestoreSettings.scss'; export default function BackupRestoreSettings(props) { - const { i18n } = window.GLOBAL.App; + const { i18n } = useSelector(state => state.session); const token = localStorage.getItem("token"); const { controlPanelFocusedElement } = useSelector(state => state.controlPanelContent); const { focusedElement } = useSelector(state => state.mainNavigation); @@ -153,6 +153,8 @@ export default function BackupRestoreSettings(props) { setState({ ...state, totalAmount: result.data.totalAmount, + selection: [], + toggledAll: false, loading: false }); }) @@ -165,7 +167,7 @@ export default function BackupRestoreSettings(props) { acc.push({ type: cat, name: item, - restoreLinkParams: `?backup=${props.backup}&type=${cat.toLowerCase()}&object=${item}&token=${token}` + restoreLinkParams: `?backup=${props.backup}&type=${cat.toLowerCase()}&object=${item}` }); }); diff --git a/web/js/react/src/components/ControlPanel/AddItemLayout/AddItemLayout.scss b/web/js/react/src/components/ControlPanel/AddItemLayout/AddItemLayout.scss index 809eaf3f4..7a7b32498 100644 --- a/web/js/react/src/components/ControlPanel/AddItemLayout/AddItemLayout.scss +++ b/web/js/react/src/components/ControlPanel/AddItemLayout/AddItemLayout.scss @@ -1,15 +1,22 @@ +$whiteBackground: #ececec; +$primary: #2c54ac; +$primaryLight: #d7dcef; +$primaryActive: #1e5cb2; +$secondary: #fcac04; +$secondaryLight: #f8b014; +$secondaryActive: #fdb51c; +$hoverButtonText: #2c54ac; +$activeButtonText: #fff; $textColor: #555; -$addButtonBackground: #9FBF0C; -$addButtonBackgroundHover: #C0E60F; -$optionalButtonHover: #9FBF0C; -$optionalButtonActive: #c0e60f; -$deleteButtonColorHover: #FF3438; -$deleteButtonColorActive: #FF5F5F; + +$optionalButtonHover: $primary; +$optionalButtonActive: $primaryLight; +$deleteButtonColorHover: #b00e5b; +$deleteButtonColorActive: #b11661; $backButtonBackground: #DFDEDD; $backButtonBackgroundHover: #999; $transition: all 200ms cubic-bezier(0.4, 0.1, 0.5, 0.85); $errorColor: #BE5ABF; -$successColor: $addButtonBackground; .content .edit-template { padding-bottom: 2rem; @@ -25,7 +32,7 @@ $successColor: $addButtonBackground; div.error, div.success { - width: fit-content; + width: fit-content !important; span { font-weight: bold; @@ -47,10 +54,10 @@ $successColor: $addButtonBackground; } span.ok-message { - color: $successColor; + color: $primary; svg { - color: $successColor; + color: $primary; } } } @@ -84,15 +91,15 @@ $successColor: $addButtonBackground; form { button, a { - color:#2C9491; + color:$primary; font-weight: bold; &:hover { - color: #ff6701; + color: $secondaryLight; } &:active { - color: #F7D616; + color: $secondaryActive; } } @@ -139,14 +146,14 @@ $successColor: $addButtonBackground; &:focus, &:active { outline: none; - border-color: #55C9C0; + border-color: $primaryActive; box-shadow: unset; } } textarea { &:focus { - background: #D7F9FF;; + background: #D7F9FF; } } @@ -172,7 +179,7 @@ $successColor: $addButtonBackground; &:focus, &:active { box-shadow: unset; - border-color: #55C9C0; + border-color: $primaryActive; background: #D7F9FF; } } @@ -221,12 +228,17 @@ $successColor: $addButtonBackground; } .add { - color: white; - background: $addButtonBackground; + color: $activeButtonText; + background: $primary; &:hover { - color: #555; - background: $addButtonBackgroundHover; + color: $hoverButtonText; + background: $primaryLight; + } + + &:active { + color: $activeButtonText; + background: $primaryActive; } } @@ -258,7 +270,7 @@ $successColor: $addButtonBackground; } .status { - color: #9FBF0C; + color: $primary; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; diff --git a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/Checkbox/Checkbox.jsx b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/Checkbox/Checkbox.jsx index 2f2c9df53..96d602ee9 100644 --- a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/Checkbox/Checkbox.jsx +++ b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/Checkbox/Checkbox.jsx @@ -1,17 +1,11 @@ import React, { useEffect, useState } from 'react'; const Checkbox = ({ name, id, title, defaultChecked = false, onChange = () => { }, checked }) => { - const [checkedState, setCheckedState] = useState(false); + const [checkedState, setCheckedState] = useState(defaultChecked); useEffect(() => { - if (!!checked) { - setCheckedState(checked); - } - - if (!!defaultChecked) { - setCheckedState(defaultChecked); - } - }, [checked, defaultChecked]); + setCheckedState(checked); + }, [checked]); const changeCheckbox = event => { setCheckedState(event.target.checked); diff --git a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/NameServers/NameServers.jsx b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/NameServers/NameServers.jsx index f4d90da98..64cf9579c 100644 --- a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/NameServers/NameServers.jsx +++ b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/NameServers/NameServers.jsx @@ -1,7 +1,8 @@ import React, { useEffect, useState } from 'react'; +import { useSelector } from 'react-redux'; const NameServers = props => { - const { i18n } = window.GLOBAL.App; + const { i18n } = useSelector(state => state.session); const [state, setState] = useState({ nameServersAmount: [], usersNS: [] diff --git a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/Password/Password.jsx b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/Password/Password.jsx index 47c63347b..839e4f8ad 100644 --- a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/Password/Password.jsx +++ b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/Password/Password.jsx @@ -1,8 +1,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React, { useEffect, useState } from 'react'; +import { useSelector } from 'react-redux'; const Password = ({ defaultValue, onChange = () => { }, id, name, title, showGenerationButton = true, ...props }) => { - const { i18n } = window.GLOBAL.App; + const { i18n } = useSelector(state => state.session); const [state, setState] = useState({ hidePassword: false, generatedPassword: '' @@ -42,7 +43,7 @@ const Password = ({ defaultValue, onChange = () => { }, id, name, title, showGen {title ? title : i18n.Password} { showGenerationButton && ( - <>/ ) diff --git a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/SelectInput/SelectInput.jsx b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/SelectInput/SelectInput.jsx index acb06c82e..532173687 100644 --- a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/SelectInput/SelectInput.jsx +++ b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/SelectInput/SelectInput.jsx @@ -1,7 +1,8 @@ import React from 'react'; +import { useSelector } from 'react-redux'; const SelectInput = ({ options = [], id, name, title, optionalTitle = '', selected = '', onChange = () => { }, disabled = false }) => { - const { i18n } = window.GLOBAL.App; + const { i18n } = useSelector(state => state.session); const renderOptions = () => { return options.map((option, index) => diff --git a/web/js/react/src/components/ControlPanel/Hotkeys/Hotkeys.jsx b/web/js/react/src/components/ControlPanel/Hotkeys/Hotkeys.jsx index 3822f46c3..6a8dbea6f 100644 --- a/web/js/react/src/components/ControlPanel/Hotkeys/Hotkeys.jsx +++ b/web/js/react/src/components/ControlPanel/Hotkeys/Hotkeys.jsx @@ -1,9 +1,10 @@ import React, { useEffect } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import './Hotkeys.scss'; +import { useSelector } from 'react-redux'; const Hotkeys = props => { - const { i18n } = window.GLOBAL.App; + const { i18n } = useSelector(state => state.session); useEffect(() => { window.addEventListener("keyup", toggleShortcutsLit); diff --git a/web/js/react/src/components/ControlPanel/Hotkeys/Hotkeys.scss b/web/js/react/src/components/ControlPanel/Hotkeys/Hotkeys.scss index f302e94b9..254d5b1ab 100644 --- a/web/js/react/src/components/ControlPanel/Hotkeys/Hotkeys.scss +++ b/web/js/react/src/components/ControlPanel/Hotkeys/Hotkeys.scss @@ -1,3 +1,5 @@ +$secondary: #fcac04; + .hotkeys-list { position: fixed; bottom: 0; @@ -6,39 +8,36 @@ flex-direction: column; transform: translateX(-45%); width: 53%; - background: rgba(50, 50, 50, 0.9); + background: #222e44de; font-size: 13px; .head { display: flex; justify-content: space-between; align-items: center; - border-bottom: 1px solid #333; + border-bottom: 1px solid $secondary; .name { text-transform: uppercase; padding: 5px 0 5px 10px; font-size: 12px; font-weight: bold; - color: #ffcc00; + color: $secondary; letter-spacing: 2px; padding: 15px; } .close { padding: 12px; + opacity: 1 !important; svg { - color: #a1a1a1; + color: $secondary; } &:hover { cursor: pointer; - background: black; - } - - &:active { - background: #55c9c0; + background: #222e44; } } } @@ -58,12 +57,12 @@ span.name { margin-right: 15px; - color: #48F4EF; + color: $secondary; font-weight: bold; } span.description { - color: #929292; + color: white; } } diff --git a/web/js/react/src/components/ControlPanel/ListItem/ListItem.jsx b/web/js/react/src/components/ControlPanel/ListItem/ListItem.jsx index e4a10d0f3..cb8470681 100644 --- a/web/js/react/src/components/ControlPanel/ListItem/ListItem.jsx +++ b/web/js/react/src/components/ControlPanel/ListItem/ListItem.jsx @@ -1,24 +1,20 @@ -import React, { Component } from 'react'; +import React, { Component, useEffect, useState } from 'react'; import Container from '../Container/Container'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { useSelector } from 'react-redux'; import './ListItem.scss'; -class ListItem extends Component { - state = { - starred: false - } +const ListItem = (props) => { + const { i18n } = useSelector(state => state.session); + const [state, setState] = useState({ starred: false }); - UNSAFE_componentWillMount() { - this.setState({ starred: this.props.starred === 1 }); - } + useEffect(() => { + if (props.hasOwnProperty('starred')) { + setState({ ...state, starred: Boolean(props.starred) }); + } + }, [props.starred]); - UNSAFE_componentWillReceiveProps(nextProps) { - this.setState({ - starred: nextProps.starred === 1 - }); - } - - printDate = date => { + const printDate = date => { if (date) { let newDate = new Date(date); let day = newDate.getDate(); @@ -30,19 +26,18 @@ class ListItem extends Component { } } - toggleItem = () => { - this.props.checkItem(); + const toggleItem = () => { + props.checkItem(); } - starItem = () => { - this.setState({ starred: !this.state.starred }, () => { - this.props.toggleFav(this.state.starred); - }); + const starItem = () => { + setState({ ...state, starred: !state.starred }); + props.toggleFav(!state.starred); } - className = () => { - const { starred } = this.state; - const { checked, outdated, suspended, stopped, focused, sysInfo } = this.props; + const className = () => { + const { starred } = state; + const { checked, outdated, suspended, stopped, focused, sysInfo } = props; let className = 'list-item'; if (checked) { @@ -76,25 +71,23 @@ class ListItem extends Component { return className; } - render() { - return ( -
- - {this.printDate(this.props.date)} -
-
this.toggleItem(e)} checked={this.props.checked} />
- {this.props.leftNameText} -
-
-
this.toggleItem(e)} checked={this.props.checked} />
-
-
- {this.props.suspended &&
{window.GLOBAL.App.i18n.suspended}
} - - {this.props.children} -
- ); - } + return ( +
+ + {printDate(props.date)} +
+
+ {props.leftNameText} +
+
+
+
+
+ {props.suspended &&
{i18n.suspended}
} + + {props.children} +
+ ); } -export default ListItem; \ No newline at end of file +export default ListItem; diff --git a/web/js/react/src/components/ControlPanel/ListItem/ListItem.scss b/web/js/react/src/components/ControlPanel/ListItem/ListItem.scss index 579796c30..509906231 100644 --- a/web/js/react/src/components/ControlPanel/ListItem/ListItem.scss +++ b/web/js/react/src/components/ControlPanel/ListItem/ListItem.scss @@ -1,3 +1,11 @@ +$whiteBackground: #ececec; +$primary: #2c54ac; +$primaryLight: #2e5bb1; +$secondary: #fcac04; +$secondaryLight: #f8b014; +$secondaryActive: #fdb51c; +$textColor: #555; + .list-item { display: flex; justify-content: flex-start; @@ -63,12 +71,12 @@ } .list-item.starred { - border-left: 2px solid #ff6701; + border-left: 2px solid $primary; .l-col div.star { div > svg { opacity: 1; - color: #ff6701; + color: $primary; } } } @@ -112,7 +120,13 @@ } .list-item.focused { - border-left: 2px solid #5edad0; + border-left: 2px solid $secondaryLight; + + .l-col div.star { + div > svg { + color: $secondaryLight; + } + } .actions { opacity: 1; @@ -127,7 +141,7 @@ width: 25px; height: 25px; margin-left: 15px; - background: #69a298; + background: $secondaryLight; color: white; display: flex; justify-content: center; diff --git a/web/js/react/src/components/ControlPanel/Modal/Modal.jsx b/web/js/react/src/components/ControlPanel/Modal/Modal.jsx index 2e00b02b5..0947a11c7 100644 --- a/web/js/react/src/components/ControlPanel/Modal/Modal.jsx +++ b/web/js/react/src/components/ControlPanel/Modal/Modal.jsx @@ -1,9 +1,10 @@ import React from 'react'; +import { useSelector } from 'react-redux'; import './Modal.scss'; -const { i18n } = window.GLOBAL.App; - const Modal = ({ show, text, onSave, onCancel, showSaveButton = true, showCancelButton = true }) => { + const { i18n } = useSelector(state => state.session); + return (