+
+ {`Vesta - ${i18n.BACKUP}`}
+
+
+ handleRestore(`?backup=${props.backup}`)} showLeftMenu={true} />
+
+ {state.loading
+ ?
+ );
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Backup/RestoreSettings/BackupRestoreSettings.scss b/web/js/react/src/components/Backup/RestoreSettings/BackupRestoreSettings.scss
new file mode 100644
index 000000000..86b9d6d31
--- /dev/null
+++ b/web/js/react/src/components/Backup/RestoreSettings/BackupRestoreSettings.scss
@@ -0,0 +1,21 @@
+.backups-restore-settings {
+ .toolbar {
+ .backup-details-icon {
+ svg {
+ transform: translateX(2px);
+ }
+ }
+ }
+
+ .mail-accounts-wrapper {
+ .list-item {
+ .l-col {
+ .star {
+ .checkbox + div {
+ display: none;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/web/js/react/src/components/ControlPanel/AddItemLayout/AddItemLayout.jsx b/web/js/react/src/components/ControlPanel/AddItemLayout/AddItemLayout.jsx
new file mode 100644
index 000000000..38120f257
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/AddItemLayout/AddItemLayout.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import Container from '../Container/Container';
+
+import './AddItemLayout.scss';
+
+const AddItemLayout = ({ date = '', time = '', status = '', children }) => {
+ const renderDate = () => {
+ if (date.length > 0) {
+ let newDate = new Date(date);
+ let day = newDate.getDate();
+ let month = newDate.getMonth();
+ let year = newDate.getFullYear();
+ let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+ return
+
+
+ props.changeSearchTerm(term)} />
+
+
+
+
+ {`${i18n['Listing']} ${props.backup}`}
+
+ {listBackups()}
+
+
+
+ )
+ }
+
+ {state.totalAmount}
+
+ {i18n['Back']}
+
+ {day} {months[month]} {year}
;
+ }
+ }
+
+ return (
+
+
+ {renderDate()}
+
+ {children}
+
+ );
+}
+
+export default AddItemLayout;
\ No newline at end of file
diff --git a/web/js/react/src/components/ControlPanel/AddItemLayout/AddItemLayout.scss b/web/js/react/src/components/ControlPanel/AddItemLayout/AddItemLayout.scss
new file mode 100644
index 000000000..809eaf3f4
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/AddItemLayout/AddItemLayout.scss
@@ -0,0 +1,268 @@
+$textColor: #555;
+$addButtonBackground: #9FBF0C;
+$addButtonBackgroundHover: #C0E60F;
+$optionalButtonHover: #9FBF0C;
+$optionalButtonActive: #c0e60f;
+$deleteButtonColorHover: #FF3438;
+$deleteButtonColorActive: #FF5F5F;
+$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;
+
+ .toolbar {
+ justify-content: unset;
+
+ > div {
+ width: 14.3%;
+ display: flex;
+ align-items: center;
+ }
+
+ div.error,
+ div.success {
+ width: fit-content;
+
+ span {
+ font-weight: bold;
+ font-size: 14px;
+
+ svg {
+ font-size: 13px;
+ }
+ }
+
+ span.error-message {
+ color: $errorColor;
+
+ svg {
+ margin-right: 7px;
+ font-size: 13px;
+ color: $errorColor;
+ }
+ }
+
+ span.ok-message {
+ color: $successColor;
+
+ svg {
+ color: $successColor;
+ }
+ }
+ }
+
+ .search-toolbar-name {
+ padding: 10px 0;
+ margin-left: 0;
+ }
+ }
+}
+
+.hide {
+ display: none;
+}
+
+.show {
+ display: flex;
+}
+
+.edit-item,
+.login-layout {
+ display: flex;
+ font-size: 15px;
+ margin-top: 3rem;
+ margin-bottom: 1rem;
+
+ .l-col {
+ margin-right: 1.75%;
+ }
+
+ form {
+ button,
+ a {
+ color:#2C9491;
+ font-weight: bold;
+
+ &:hover {
+ color: #ff6701;
+ }
+
+ &:active {
+ color: #F7D616;
+ }
+ }
+
+ button.optional {
+ &:hover {
+ color: $optionalButtonHover;
+ }
+
+ &:active {
+ color: $optionalButtonActive;
+ }
+ }
+
+ button.delete {
+ &:hover {
+ color: $deleteButtonColorHover;
+ }
+
+ &:active {
+ color: $deleteButtonColorActive;
+ }
+ }
+
+ .form-group {
+ input[type=text],
+ input[type=password],
+ input[type=email],
+ textarea,
+ select {
+ width: 50%;
+ }
+ }
+
+ width: 100%;
+
+ .form-group select,
+ .form-group textarea {
+ border-radius: 0;
+
+ &:hover {
+ border-color: #909090;
+ }
+
+ &:focus,
+ &:active {
+ outline: none;
+ border-color: #55C9C0;
+ box-shadow: unset;
+ }
+ }
+
+ textarea {
+ &:focus {
+ background: #D7F9FF;;
+ }
+ }
+
+ button {
+ background: unset;
+ border: none;
+ box-shadow: unset;
+
+ &:focus,
+ &:active {
+ outline: none;
+ }
+ }
+
+ input {
+ height: calc(1.5em + 0.75rem + 6px);
+ border-radius: 0;
+
+ &:hover {
+ border-color: #909090;
+ }
+
+ &:focus,
+ &:active {
+ box-shadow: unset;
+ border-color: #55C9C0;
+ background: #D7F9FF;
+ }
+ }
+
+ label {
+ color: $textColor;
+ font-weight: bold;
+ }
+
+ label.label-wrapper {
+ display: flex;
+ align-items: flex-end;
+ width: fit-content;
+
+ span {
+ font-weight: normal;
+ text-transform: uppercase;
+ margin-left: 5px;
+ font-size: 12px;
+ }
+ }
+
+ .checkbox-wrapper {
+ display: flex;
+ align-items: center;
+
+ label {
+ margin: 0 12px;
+ }
+ }
+
+ input {
+ color: $textColor;
+ }
+
+ .buttons-wrapper {
+ margin-top: 2.5rem;
+
+ button {
+ font-weight: bold;
+ font-size: 13px;
+ margin-right: 10px;
+ padding: .35rem 2.25rem;
+ border-radius: 4px;
+ transition: $transition;
+ }
+
+ .add {
+ color: white;
+ background: $addButtonBackground;
+
+ &:hover {
+ color: #555;
+ background: $addButtonBackgroundHover;
+ }
+ }
+
+ .back {
+ color: #777;
+ background: $backButtonBackground;
+
+ &:hover {
+ color: white;
+ background: $backButtonBackgroundHover;
+ }
+ }
+ }
+ }
+
+ .l-col {
+ padding: 20px 0 0;
+
+ .date,
+ .time {
+ margin: 10px 0 0;
+ color: #777;
+ font-size: 12px;
+ letter-spacing: 1px;
+ }
+
+ .time {
+ margin: 6px 0 10px;
+ }
+
+ .status {
+ color: #9FBF0C;
+ font-size: 11px;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ font-weight: bold;
+ }
+ }
+}
\ No newline at end of file
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
new file mode 100644
index 000000000..2f2c9df53
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/Checkbox/Checkbox.jsx
@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+
+const Checkbox = ({ name, id, title, defaultChecked = false, onChange = () => { }, checked }) => {
+ const [checkedState, setCheckedState] = useState(false);
+
+ useEffect(() => {
+ if (!!checked) {
+ setCheckedState(checked);
+ }
+
+ if (!!defaultChecked) {
+ setCheckedState(defaultChecked);
+ }
+ }, [checked, defaultChecked]);
+
+ const changeCheckbox = event => {
+ setCheckedState(event.target.checked);
+ onChange(event.target.checked);
+ }
+
+ return (
+
+ {time}
+
+
+ {status}
+
+
+
+ );
+}
+
+export default Checkbox;
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
new file mode 100644
index 000000000..f4d90da98
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/NameServers/NameServers.jsx
@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+
+const NameServers = props => {
+ const { i18n } = window.GLOBAL.App;
+ const [state, setState] = useState({
+ nameServersAmount: [],
+ usersNS: []
+ });
+
+ useEffect(() => {
+ if (props.usersNS) {
+ let initNameServersAmount = props.usersNS.map((userNS, index) => index + 1);
+ setState({ ...state, usersNS: props.usersNS, nameServersAmount: initNameServersAmount });
+ }
+ }, [props.usersNS]);
+
+ const renderNameServerInputs = () => {
+ return state.nameServersAmount.map((nameServer, index) => {
+ if (nameServer < 9) {
+ return (
+
+
+
+
+
+
+
+
+ );
+ }
+ });
+ }
+
+ const addNameServerClassName = () => {
+ return state.nameServersAmount.length === 8 ? 'hide' : 'show optional';
+ }
+
+ const addNameServer = () => {
+ let nameServersLength = state.nameServersAmount.length;
+ let nameServersDuplicate = [...state.nameServersAmount];
+
+ nameServersDuplicate.push(nameServersLength + 1);
+
+ setState({ ...state, nameServersAmount: nameServersDuplicate });
+ }
+
+ const onDeleteNameServer = index => {
+ let nameServersDuplicate = [...state.nameServersAmount];
+
+ nameServersDuplicate.splice(index - 1, 1);
+
+ setState({ ...state, nameServersAmount: nameServersDuplicate });
+ }
+
+ return (
+ <>
+
+
+ {renderNameServerInputs()}
+
+
+
+
+ );
+}
+
+export default NameServers;
\ No newline at end of file
diff --git a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/NameServers/NameServers.scss b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/NameServers/NameServers.scss
new file mode 100644
index 000000000..e69de29bb
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
new file mode 100644
index 000000000..47c63347b
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/Password/Password.jsx
@@ -0,0 +1,70 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { useEffect, useState } from 'react';
+
+const Password = ({ defaultValue, onChange = () => { }, id, name, title, showGenerationButton = true, ...props }) => {
+ const { i18n } = window.GLOBAL.App;
+ const [state, setState] = useState({
+ hidePassword: false,
+ generatedPassword: ''
+ });
+
+ useEffect(() => {
+ if (defaultValue && !state.generatedPassword) {
+ setState({ ...state, generatedPassword: defaultValue });
+ }
+ }, [defaultValue]);
+
+ const hidePasswordHandler = () => {
+ setState({ ...state, hidePassword: !state.hidePassword });
+ }
+
+ const generatePassword = () => {
+ let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
+ let stringLength = 10;
+ let result = '';
+
+ for (var i = 0; i < stringLength; i++) {
+ let randomNumber = Math.floor(Math.random() * chars.length);
+ result += chars.substr(randomNumber, 1);
+ }
+
+ setState({ ...state, generatedPassword: result });
+ }
+
+ const passwordInputHandler = value => {
+ setState({ ...state, generatedPassword: value });
+ onChange(value);
+ }
+
+ return (
+
+
+
+ );
+}
+
+export default Password;
diff --git a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/Password/Password.scss b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/Password/Password.scss
new file mode 100644
index 000000000..e69de29bb
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
new file mode 100644
index 000000000..acb06c82e
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/SelectInput/SelectInput.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+const SelectInput = ({ options = [], id, name, title, optionalTitle = '', selected = '', onChange = () => { }, disabled = false }) => {
+ const { i18n } = window.GLOBAL.App;
+
+ const renderOptions = () => {
+ return options.map((option, index) =>
+
+ );
+ }
+
+ return (
+ <>
+ {
+ options
+ ? (
+
+ passwordInputHandler(event.target.value)}
+ {...props} />
+
+
+
+
+
+
+ )
+ : null
+ }
+
+ );
+}
+
+export default SelectInput;
diff --git a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/SelectInput/SelectInput.scss b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/SelectInput/SelectInput.scss
new file mode 100644
index 000000000..a67efb96e
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/SelectInput/SelectInput.scss
@@ -0,0 +1,7 @@
+.form-group.select-group {
+ label {
+ span {
+ text-transform: uppercase;
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextArea/TextArea.jsx b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextArea/TextArea.jsx
new file mode 100644
index 000000000..f440497f1
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextArea/TextArea.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const TextArea = ({ id, name, defaultValue = '', title, optionalTitle = '', rows = '3', disabled = false }) => {
+ return (
+
+
+
+
+ );
+}
+
+export default TextArea;
\ No newline at end of file
diff --git a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextArea/TextArea.scss b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextArea/TextArea.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextInput/TextInput.jsx b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextInput/TextInput.jsx
new file mode 100644
index 000000000..843eb4ffc
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextInput/TextInput.jsx
@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from 'react';
+
+const TextInput = ({ id, name, title, optionalTitle = '', type = 'text', onChange = () => { }, value = '', disabled = false }) => {
+ const [inputValue, setInputValue] = useState('');
+
+ useEffect(() => {
+ if (value) {
+ setInputValue(value);
+ }
+ }, [value]);
+
+ const changeCheckbox = event => {
+ setInputValue(event.target.value);
+ onChange(event);
+ }
+
+ return (
+
+
+
+
+ );
+}
+
+export default TextInput;
\ No newline at end of file
diff --git a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextInput/TextInput.scss b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextInput/TextInput.scss
new file mode 100644
index 000000000..e69de29bb
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
new file mode 100644
index 000000000..7895e3cb1
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextInputWithExtraButton/TextInputWithExtraButton.jsx
@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+
+const TextInputWithExtraButton = props => {
+ const [state, setState] = useState({
+ value: '',
+ previousValue: ''
+ });
+
+ useEffect(() => {
+ if (props.value !== 'unlimited') {
+ setState({ ...state, value: state.previousValue });
+ } else {
+ setState({ ...state, value: props.value });
+ }
+ }, [props.value]);
+
+ useEffect(() => {
+ setState({ ...state, value: props.value, previousValue: props.value });
+ }, []);
+
+ const changeValue = event => {
+ let inputValue = event.target.value;
+
+ setState({ ...state, value: inputValue, previousValue: inputValue });
+ }
+
+ return (
+
+
+
+ );
+}
+
+export default TextInputWithExtraButton;
\ No newline at end of file
diff --git a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextInputWithExtraButton/TextInputWithExtraButton.scss b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextInputWithExtraButton/TextInputWithExtraButton.scss
new file mode 100644
index 000000000..e69de29bb
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
new file mode 100644
index 000000000..b6b35ba83
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextInputWithTextOnTheRight/TextInputWithTextOnTheRight.jsx
@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from 'react';
+
+import './TextInputWithTextOnTheRight.scss';
+
+const TextInputWithTextOnTheRight = ({ id, title, name, defaultValue = '', optionalTitle = '', disabled = false }) => {
+ const [inputValue, setInputValue] = useState('');
+
+ useEffect(() => {
+ if (defaultValue) {
+ setInputValue(defaultValue);
+ }
+ }, [defaultValue]);
+
+ return (
+
+
+ {props.children}
+
+
+
+
+ );
+}
+
+export default TextInputWithTextOnTheRight;
\ No newline at end of file
diff --git a/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextInputWithTextOnTheRight/TextInputWithTextOnTheRight.scss b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextInputWithTextOnTheRight/TextInputWithTextOnTheRight.scss
new file mode 100644
index 000000000..311fc502a
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/AddItemLayout/Form/TextInputWithTextOnTheRight/TextInputWithTextOnTheRight.scss
@@ -0,0 +1,11 @@
+.form-group.text-on-the-right {
+ .input-wrapper {
+ display: flex;
+ align-items: center;
+
+ span {
+ margin-left: 15px;
+ color: #777;
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/ControlPanel/Container/Container.jsx b/web/js/react/src/components/ControlPanel/Container/Container.jsx
new file mode 100644
index 000000000..1ab24f8a3
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/Container/Container.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import './Container.scss';
+
+const Container = props => {
+ return(
+
+ setInputValue(event.target.value)}
+ disabled={disabled}
+ name={name} />
+ {`admin_${inputValue}`}
+
+
+ {props.children}
+
+ );
+}
+
+export default Container;
\ No newline at end of file
diff --git a/web/js/react/src/components/ControlPanel/Container/Container.scss b/web/js/react/src/components/ControlPanel/Container/Container.scss
new file mode 100644
index 000000000..13ca12e1a
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/Container/Container.scss
@@ -0,0 +1,47 @@
+.l-col {
+ padding-left: 15px;
+}
+
+.r-col {
+ font-size: 13px;
+}
+
+.w-14 {
+ width: 14.3%;
+}
+
+.w-20 {
+ width: 20%;
+}
+
+.w-25 {
+ width: 25%;
+}
+
+.w-30 {
+ width: 30%;
+}
+
+.w-35 {
+ width: 35%;
+}
+
+.w-40 {
+ width: 40%;
+}
+
+.w-45 {
+ width: 45%;
+}
+
+.w-50 {
+ width: 50%;
+}
+
+.w-60 {
+ width: 60%;
+}
+
+.w-85 {
+ width: 85%;
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/ControlPanel/Hotkeys/Hotkeys.jsx b/web/js/react/src/components/ControlPanel/Hotkeys/Hotkeys.jsx
new file mode 100644
index 000000000..3822f46c3
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/Hotkeys/Hotkeys.jsx
@@ -0,0 +1,106 @@
+import React, { useEffect } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import './Hotkeys.scss';
+
+const Hotkeys = props => {
+ const { i18n } = window.GLOBAL.App;
+
+ useEffect(() => {
+ window.addEventListener("keyup", toggleShortcutsLit);
+
+ return () => window.removeEventListener("keyup", toggleShortcutsLit);
+ }, [props.reference]);
+
+ const toggleShortcutsLit = event => {
+ let isSearchInputFocused = document.querySelector('input:focus') || document.querySelector('textarea:focus');
+
+ if (event.keyCode === 72 && !isSearchInputFocused) {
+ props.toggleHotkeys();
+ }
+ }
+
+ return (
+
+
+ );
+}
+
+export default Hotkeys;
\ No newline at end of file
diff --git a/web/js/react/src/components/ControlPanel/Hotkeys/Hotkeys.scss b/web/js/react/src/components/ControlPanel/Hotkeys/Hotkeys.scss
new file mode 100644
index 000000000..f302e94b9
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/Hotkeys/Hotkeys.scss
@@ -0,0 +1,79 @@
+.hotkeys-list {
+ position: fixed;
+ bottom: 0;
+ right: 0;
+ display: flex;
+ flex-direction: column;
+ transform: translateX(-45%);
+ width: 53%;
+ background: rgba(50, 50, 50, 0.9);
+ font-size: 13px;
+
+ .head {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid #333;
+
+ .name {
+ text-transform: uppercase;
+ padding: 5px 0 5px 10px;
+ font-size: 12px;
+ font-weight: bold;
+ color: #ffcc00;
+ letter-spacing: 2px;
+ padding: 15px;
+ }
+
+ .close {
+ padding: 12px;
+
+ svg {
+ color: #a1a1a1;
+ }
+
+ &:hover {
+ cursor: pointer;
+ background: black;
+ }
+
+ &:active {
+ background: #55c9c0;
+ }
+ }
+ }
+
+ .body {
+ display: flex;
+
+ ul {
+ padding: 25px 10px;
+ margin: 0;
+ width: 50%;
+ list-style: none;
+ margin-left: 3rem;
+
+ li {
+ padding: 5px;
+
+ span.name {
+ margin-right: 15px;
+ color: #48F4EF;
+ font-weight: bold;
+ }
+
+ span.description {
+ color: #929292;
+ }
+ }
+
+ li.space-top {
+ padding-top: 30px;
+ }
+ }
+ }
+}
+
+.hide {
+ display: none;
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/ControlPanel/ListItem/ListItem.jsx b/web/js/react/src/components/ControlPanel/ListItem/ListItem.jsx
new file mode 100644
index 000000000..e4a10d0f3
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/ListItem/ListItem.jsx
@@ -0,0 +1,100 @@
+import React, { Component } from 'react';
+import Container from '../Container/Container';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import './ListItem.scss';
+
+class ListItem extends Component {
+ state = {
+ starred: false
+ }
+
+ UNSAFE_componentWillMount() {
+ this.setState({ starred: this.props.starred === 1 });
+ }
+
+ UNSAFE_componentWillReceiveProps(nextProps) {
+ this.setState({
+ starred: nextProps.starred === 1
+ });
+ }
+
+ printDate = date => {
+ if (date) {
+ let newDate = new Date(date);
+ let day = newDate.getDate();
+ let month = newDate.getMonth() + 1;
+ let year = newDate.getFullYear();
+ let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+ return
+
+ {i18n.Shortcuts}
+ props.toggleHotkeys()}>
+
+
+ -
+
- + a + {i18n['Add New object']} + +
- + Ctrl + Open + {i18n['Save Form']} + +
- + Ctrl + Backspace + {i18n['Cancel saving form']} + +
- + 1 + {i18n['Go to USER list']} + +
- + 2 + {i18n['Go to WEB list']} + +
- + 3 + {i18n['Go to DNS list']} + +
- + 4 + {i18n['Go to MAIL list']} + +
- + 5 + {i18n['Go to DB list']} + +
- + 6 + {i18n['Go to CRON list']} + +
- + 7 + {i18n['Go to BACKUP list']} + +
-
+
- + f + {i18n['Focus on search']} + +
- + h + {i18n['Display/Close shortcuts']} + +
- + ← + {i18n['Move backward through top menu']} + +
- + → + {i18n['Move forward through top menu']} + +
- + Enter + {i18n['Enter focused element']} + +
- + ↑ + {i18n['Move up through elements list']} + +
- + ↓ + {i18n['Move down through elements list']} + +
{day} {months[month - 1]} {year}
;
+ }
+ }
+
+ toggleItem = () => {
+ this.props.checkItem();
+ }
+
+ starItem = () => {
+ this.setState({ starred: !this.state.starred }, () => {
+ this.props.toggleFav(this.state.starred);
+ });
+ }
+
+ className = () => {
+ const { starred } = this.state;
+ const { checked, outdated, suspended, stopped, focused, sysInfo } = this.props;
+ let className = 'list-item';
+
+ if (checked) {
+ className += ' toggled';
+ }
+
+ if (starred) {
+ className += ' starred';
+ }
+
+ if (outdated) {
+ className += ' outdated';
+ }
+
+ if (suspended) {
+ className += ' suspended';
+ }
+
+ if (stopped) {
+ className += ' stopped';
+ }
+
+ if (focused) {
+ className += ' focused';
+ }
+
+ if (sysInfo) {
+ className += ' sys-info';
+ }
+
+ return className;
+ }
+
+ render() {
+ return (
+
+
+ {this.printDate(this.props.date)}
+
+ {this.props.children}
+
+ );
+ }
+}
+
+export default ListItem;
\ No newline at end of file
diff --git a/web/js/react/src/components/ControlPanel/ListItem/ListItem.scss b/web/js/react/src/components/ControlPanel/ListItem/ListItem.scss
new file mode 100644
index 000000000..579796c30
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/ListItem/ListItem.scss
@@ -0,0 +1,148 @@
+.list-item {
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+ padding-left: 15px;
+ font-size: 18px;
+ position: relative;
+ padding: 25px 0;
+ border-left: 2px solid white;
+ border-bottom: 1px solid #ddd;
+ color: rgb(104, 104, 104);
+
+ &:hover .l-col div.star div svg,
+ &:hover .actions {
+ opacity: 1;
+ }
+
+ .l-col {
+ .suspended {
+ letter-spacing: 3px;
+ }
+
+ .text-status {
+ font-size: 10px;
+ }
+
+ div.star {
+ display: flex;
+ align-items: center;
+
+ div.checkbox {
+ margin: 0 25% 4px 0;
+ }
+ }
+ }
+
+ .r-col {
+ .stats {
+ div > span {
+ width: 50%;
+ text-align: left;
+ }
+
+ .c-2 div > span {
+ width: 50%;
+ }
+ }
+
+ div.bandwidth span,
+ div.disk span {
+ width: auto;
+ }
+ }
+
+ .date {
+ font-size: 13px;
+ margin: 20px 0 10px;
+ }
+}
+
+.list-item.toggled {
+ background: #feef9a;
+}
+
+.list-item.starred {
+ border-left: 2px solid #ff6701;
+
+ .l-col div.star {
+ div > svg {
+ opacity: 1;
+ color: #ff6701;
+ }
+ }
+}
+
+.list-item.suspended {
+ background: #eaeaea;
+ color: #c0c0c0;
+
+ .r-col div, .r-col span {
+ color: #c0c0c0 !important;
+ }
+}
+
+.list-item.suspended.toggled {
+ background: #f2eab8;
+ color: #b2ac87;
+
+ .l-col,
+ .r-col .name,
+ .r-col .stats {
+ color: #b2ac87 !important;
+ }
+}
+
+.list-item.outdated {
+ background: #ffcaca;
+ border-left: 5px solid #ff6f6f;
+}
+
+.list-item.toggled.outdated {
+ background: #755d5d;
+ color: black;
+
+ .stat {
+ color: black;
+ }
+}
+
+.list-item.stopped {
+ background: #eaeaea;
+}
+
+.list-item.focused {
+ border-left: 2px solid #5edad0;
+
+ .actions {
+ opacity: 1;
+
+ div > a,
+ div > button {
+ padding-top: 6.5px;
+ padding-bottom: 6.5px;
+
+ .shortcut-button {
+ border-radius: 50%;
+ width: 25px;
+ height: 25px;
+ margin-left: 15px;
+ background: #69a298;
+ color: white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 14px;
+ }
+
+ .shortcut-button.html-unicode {
+ align-items: flex-end;
+ }
+
+ .shortcut-button.del {
+ text-transform: capitalize;
+ font-size: 10px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/ControlPanel/LoginLayout/LoginLayout.jsx b/web/js/react/src/components/ControlPanel/LoginLayout/LoginLayout.jsx
new file mode 100644
index 000000000..c2e5c90c1
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/LoginLayout/LoginLayout.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import '../AddItemLayout/AddItemLayout.scss';
+import './LoginLayout.scss';
+
+const LoginLayout = ({ children }) => {
+ return (
+
+
+ this.toggleItem(e)} checked={this.props.checked} />
+ {this.props.leftNameText}
+
+
+ {this.props.suspended && this.toggleItem(e)} checked={this.props.checked} />
+ {window.GLOBAL.App.i18n.suspended}
}
+
+ {children}
+
+ );
+}
+
+export default LoginLayout;
\ No newline at end of file
diff --git a/web/js/react/src/components/ControlPanel/LoginLayout/LoginLayout.scss b/web/js/react/src/components/ControlPanel/LoginLayout/LoginLayout.scss
new file mode 100644
index 000000000..f7bcbe6a1
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/LoginLayout/LoginLayout.scss
@@ -0,0 +1,4 @@
+.login-layout {
+ margin-top: 1rem;
+ padding: 2rem 3rem;
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/ControlPanel/Modal/Modal.jsx b/web/js/react/src/components/ControlPanel/Modal/Modal.jsx
new file mode 100644
index 000000000..2e00b02b5
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/Modal/Modal.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import './Modal.scss';
+
+const { i18n } = window.GLOBAL.App;
+
+const Modal = ({ show, text, onSave, onCancel, showSaveButton = true, showCancelButton = true }) => {
+ return (
+
+
+
+ )
+};
+
+export default Modal;
diff --git a/web/js/react/src/components/ControlPanel/Modal/Modal.scss b/web/js/react/src/components/ControlPanel/Modal/Modal.scss
new file mode 100644
index 000000000..ad8d0f49d
--- /dev/null
+++ b/web/js/react/src/components/ControlPanel/Modal/Modal.scss
@@ -0,0 +1,18 @@
+div.modal {
+ z-index: 2;
+}
+
+div.content .modal .modal-content {
+ width: 75%;
+
+ .modal-header button.close {
+ color: white;
+ }
+
+ .modal-footer {
+ .btn-primary {
+ background: #9FBF0C;
+ border: 1px solid #9FBF0C;
+ }
+ }
+}
diff --git a/web/js/react/src/components/CronJob/Add/AddCronJob.jsx b/web/js/react/src/components/CronJob/Add/AddCronJob.jsx
new file mode 100644
index 000000000..945309ec4
--- /dev/null
+++ b/web/js/react/src/components/CronJob/Add/AddCronJob.jsx
@@ -0,0 +1,198 @@
+import React, { useEffect, useState } from 'react';
+
+import { addActiveElement, removeFocusedElement } from "../../../actions/MainNavigation/mainNavigationActions";
+import AddItemLayout from '../../ControlPanel/AddItemLayout/AddItemLayout';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { addCronJob } from '../../../ControlPanelService/Cron';
+import Toolbar from '../../MainNav/Toolbar/Toolbar';
+import Generator from '../Generator/Generator';
+import { useHistory } from 'react-router-dom';
+import Spinner from '../../Spinner/Spinner';
+import { useDispatch } from 'react-redux';
+
+import './AddCronJob.scss';
+import { Helmet } from 'react-helmet';
+
+const AddCronJob = props => {
+ const { i18n } = window.GLOBAL.App;
+ const token = localStorage.getItem("token");
+ const history = useHistory();
+ const dispatch = useDispatch();
+ const [state, setState] = useState({
+ loading: false,
+ okMessage: '',
+ errorMessage: '',
+ generatedCronJob: {
+ h_min: '*',
+ h_hour: '*',
+ h_day: '*',
+ h_wday: '*',
+ h_month: '*'
+ }
+ });
+
+ useEffect(() => {
+ dispatch(addActiveElement('/list/cron/'));
+ dispatch(removeFocusedElement());
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let newCronJob = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ newCronJob[name] = value;
+ }
+
+ 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;
+
+ if (error_msg) {
+ setState({ ...state, errorMessage: error_msg, okMessage: '', loading: false });
+ } else if (ok_msg) {
+ setState({ ...state, errorMessage: '', okMessage: ok_msg, loading: false });
+ } else {
+ setState({ ...state, loading: false })
+ }
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ const saveGeneratedCronJob = generatedCronJob => {
+ setState({
+ ...state,
+ generatedCronJob
+ });
+ }
+
+ const changeInput = input => {
+ let updatedGeneratedCronJob = {
+ ...state.generatedCronJob,
+ [input.id]: input.value
+ };
+
+ setState({
+ ...state,
+ generatedCronJob: updatedGeneratedCronJob
+ });
+ }
+
+ return (
+
+
+ {`Vesta - ${i18n.CRON}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default AddCronJob;
\ No newline at end of file
diff --git a/web/js/react/src/components/CronJob/Add/AddCronJob.scss b/web/js/react/src/components/CronJob/Add/AddCronJob.scss
new file mode 100644
index 000000000..d96fdf014
--- /dev/null
+++ b/web/js/react/src/components/CronJob/Add/AddCronJob.scss
@@ -0,0 +1,31 @@
+.edit-template.add-cron {
+ form {
+ .form-group {
+ width: 100%;
+
+ input {
+ width: inherit;
+ }
+ }
+
+ .form-group.command {
+ width: 100%;
+ }
+
+ .cron-form-body {
+ display: flex;
+
+ .body-col-1 {
+ width: 30%;
+ }
+
+ .body-col-2 {
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+ padding: 1.7rem 1rem;
+ width: 70%;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/CronJob/CronJob.jsx b/web/js/react/src/components/CronJob/CronJob.jsx
new file mode 100644
index 000000000..98c2dcfa4
--- /dev/null
+++ b/web/js/react/src/components/CronJob/CronJob.jsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import ListItem from '../ControlPanel/ListItem/ListItem';
+import Container from '../ControlPanel/Container/Container';
+import './CronJob.scss';
+import { Link } from 'react-router-dom';
+
+const CronJob = props => {
+ const { data } = props;
+ const { i18n } = window.GLOBAL.App;
+ const token = localStorage.getItem("token");
+
+ const toggleFav = (starred) => {
+ if (starred) {
+ props.toggleFav(props.data.NAME, 'add');
+ } else {
+ props.toggleFav(props.data.NAME, 'delete');
+ }
+ }
+
+ const checkItem = () => {
+ props.checkItem(props.data.NAME);
+ }
+
+ const handleSuspend = () => {
+ let suspendedStatus = data.SUSPENDED === 'yes' ? 'unsuspend' : 'suspend' === 'yes' ? 'unsuspend' : 'suspend';
+ props.handleModal(data.suspend_conf, `/${suspendedStatus}/cron/?job=${data.NAME}&token=${token}`);
+ }
+
+ const handleDelete = () => {
+ props.handleModal(data.delete_conf, `/delete/cron/?job=${data.NAME}&token=${token}`);
+ }
+
+ return (
+ {i18n['Adding Cron Job']}
+
+
+ {state.errorMessage ?
+
+
+ {state.okMessage ?
+ {data.CMD}
+
+
+
+
+
+
+
+
+
+
+
+
+ {i18n.Min} {data.MIN}
+ {i18n.Hour} {data.HOUR}
+ {i18n.Day} {data.DAY}
+ {i18n.Month} {data.MONTH}
+ {i18n['Day of week']} {data.WDAY}
+
+
+
+
+
+ {i18n.edit}
+ {data.FOCUSED ? ↩ :
+
+
+
+
+
+
+
+
+
+
+
+ {`Vesta - ${i18n.CRON}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default EditMail;
\ No newline at end of file
diff --git a/web/js/react/src/components/CronJob/Edit/EditCronJob.scss b/web/js/react/src/components/CronJob/Edit/EditCronJob.scss
new file mode 100644
index 000000000..53a774ad6
--- /dev/null
+++ b/web/js/react/src/components/CronJob/Edit/EditCronJob.scss
@@ -0,0 +1,39 @@
+.edit-cron {
+ form {
+ .form-group {
+ width: 100%;
+
+ input {
+ width: inherit;
+ }
+ }
+
+ .form-group.command {
+ width: 100%;
+ }
+
+ .cron-form-body {
+ display: flex;
+
+ .body-col-1 {
+ width: 30%;
+
+ input {
+ width: 100%;
+ }
+ }
+
+ .body-col-2 {
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+ padding: 1.7rem 1rem;
+ width: 70%;
+ }
+ }
+ }
+}
+
+#edit-cron > .form-group input {
+ width: 95% !important;
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/CronJob/Generator/Generator.jsx b/web/js/react/src/components/CronJob/Generator/Generator.jsx
new file mode 100644
index 000000000..9df8f28e6
--- /dev/null
+++ b/web/js/react/src/components/CronJob/Generator/Generator.jsx
@@ -0,0 +1,74 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import RunCommandSelect from './RunCommandSelect/RunCommandSelect';
+import SelectsWrapper from './OtherSelects/SelectsWrapper';
+import { Link, useHistory } from 'react-router-dom';
+import QS from 'qs';
+
+import './Generator.scss';
+
+const Generator = props => {
+ const formElement = useRef(null);
+ const { i18n } = window.GLOBAL.App;
+ const history = useHistory();
+ const [state, setState] = useState({
+ activeTab: '1'
+ });
+
+ useEffect(() => {
+ let parsedQuery = QS.parse(history.location.search, { ignoreQueryPrefix: true });
+ let activeTab = parsedQuery.activeTab || '1';
+
+ setState({ ...state, activeTab });
+ }, [history.location.search]);
+
+ const activeClassName = tab => {
+ return state.activeTab === tab ? 'active' : '';
+ }
+
+ const emulateFormSubmit = () => {
+ let generatedCronJob = {};
+
+ for (let i = 0; i <= 4; i++) {
+ let iterableFormElement = formElement.current[i];
+
+ generatedCronJob[iterableFormElement.name] = iterableFormElement.value;
+ }
+
+ props.generatedCronJob(generatedCronJob);
+ }
+
+ const formatLink = tab => {
+ const { job, mode } = props;
+
+ return `/${mode}/cron/?${!!job ? `job=${job}&` : ''}activeTab=${tab}`;
+ }
+
+ return (
+ {i18n['Editing Cron Job']}
+
+
+ {state.data.errorMessage ?
+
+
+ {state.okMessage ?
+
+
+ );
+}
+
+export default Generator;
\ No newline at end of file
diff --git a/web/js/react/src/components/CronJob/Generator/Generator.scss b/web/js/react/src/components/CronJob/Generator/Generator.scss
new file mode 100644
index 000000000..654c69d09
--- /dev/null
+++ b/web/js/react/src/components/CronJob/Generator/Generator.scss
@@ -0,0 +1,108 @@
+.cron-job-generator {
+ border: 1px solid #d9d9d9;
+ padding: 1rem 1.5rem;
+ margin-left: 2rem;
+ width: 90%;
+
+ .header {
+ display: flex;
+ padding: .4rem 0;
+
+ a {
+ color: #222222;
+ text-transform: uppercase;
+ font-size: 11px;
+ font-weight: bolder;
+ margin-right: 2.3rem;
+ text-decoration: none;
+
+ &:hover {
+ color: #ff6701;
+ }
+
+ &:active {
+ color: #55C9C0;
+ }
+ }
+
+ a.active {
+ color: #ff6701;
+ }
+ }
+
+ .body {
+ padding: 2rem 0 .4rem;
+
+ form {
+
+ .form-group {
+ display: flex;
+ align-items: center;
+
+ label {
+ width: 26%;
+ font-size: 13px;
+ margin: 0;
+ }
+
+ input {
+ width: auto;
+ }
+ }
+
+ .form-group.minute select {
+ width: 70px;
+ }
+
+ .form-group select,
+ .form-group textarea {
+ border-radius: 0;
+
+ &:hover {
+ border-color: #909090;
+ }
+
+ &:focus,
+ &:active {
+ outline: none;
+ border-color: #55C9C0;
+ box-shadow: unset;
+ }
+ }
+
+ .form-group select {
+ padding: .4rem .25rem;
+ border-color: #d9d9d9;
+ color: #555;
+ }
+
+ .form-actions {
+ button {
+ background: #55C9C0;
+ color: white;
+ border-radius: 3px;
+ padding: .35rem 1.1rem;
+ font-size: 14px;
+
+ &:hover {
+ color: #555;
+ background: #5BD8CF;
+ }
+
+ &:active {
+ color: white;
+ background: #D1D70D;
+ }
+ }
+ }
+
+ .form-group.show {
+ display: block;
+ }
+
+ .form-group.hide {
+ display: none;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/CronJob/Generator/OtherSelects/FifthTabSelects.jsx b/web/js/react/src/components/CronJob/Generator/OtherSelects/FifthTabSelects.jsx
new file mode 100644
index 000000000..a9b919478
--- /dev/null
+++ b/web/js/react/src/components/CronJob/Generator/OtherSelects/FifthTabSelects.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { dailyMinutesOptions, hoursOptions, dateOptions } from '../../../../ControlPanelService/GeneratorOptions';
+
+export default function FifthTabSelects() {
+ const { i18n } = window.GLOBAL.App;
+
+ const renderDate = () => {
+ return dateOptions.map((option, index) => );
+ }
+
+ const renderHours = () => {
+ return hoursOptions.map((option, index) => );
+ }
+
+ const renderMinutes = () => {
+ return dailyMinutesOptions.map((option, index) => );
+ }
+
+ return (
+
+ {i18n.Minutes}
+ {i18n.Hourly}
+ {i18n.Daily}
+ {i18n.Weekly}
+ {i18n.Monthly}
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/CronJob/Generator/OtherSelects/FourthTabSelects.jsx b/web/js/react/src/components/CronJob/Generator/OtherSelects/FourthTabSelects.jsx
new file mode 100644
index 000000000..93b63719d
--- /dev/null
+++ b/web/js/react/src/components/CronJob/Generator/OtherSelects/FourthTabSelects.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { dailyMinutesOptions, hoursOptions } from '../../../../ControlPanelService/GeneratorOptions';
+
+export default function FourthTabSelects() {
+ const { i18n } = window.GLOBAL.App;
+
+ const renderHours = () => {
+ return hoursOptions.map((option, index) => );
+ }
+
+ const renderMinutes = () => {
+ return dailyMinutesOptions.map((option, index) => );
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/CronJob/Generator/OtherSelects/SecondTabSelects.jsx b/web/js/react/src/components/CronJob/Generator/OtherSelects/SecondTabSelects.jsx
new file mode 100644
index 000000000..fba59b8f7
--- /dev/null
+++ b/web/js/react/src/components/CronJob/Generator/OtherSelects/SecondTabSelects.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { hourlyMinutesOptions } from '../../../../ControlPanelService/GeneratorOptions';
+
+export default function SecondTabSelects() {
+ const { i18n } = window.GLOBAL.App;
+
+ const renderOptions = () => {
+ return hourlyMinutesOptions.map((option, index) => );
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/CronJob/Generator/OtherSelects/SelectsWrapper.jsx b/web/js/react/src/components/CronJob/Generator/OtherSelects/SelectsWrapper.jsx
new file mode 100644
index 000000000..7d66054f6
--- /dev/null
+++ b/web/js/react/src/components/CronJob/Generator/OtherSelects/SelectsWrapper.jsx
@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+
+import SecondTabSelects from './SecondTabSelects';
+import ThirdTabSelects from './ThirdTabSelects';
+import FourthTabSelects from './FourthTabSelects';
+import FifthTabSelects from './FifthTabSelects';
+
+import './SelectsWrapper.scss';
+
+const OtherSelects = props => {
+ const [state, setState] = useState({
+ activeTab: ''
+ });
+
+ useEffect(() => {
+ setState({ ...state, activeTab: props.activeTab });
+ }, [props.activeTab]);
+
+ const renderSelects = () => {
+ switch (state.activeTab) {
+ case '1': return (
+
+
+
+
+
+
+
+
+
+
+ )
+ case '2': return
+ {renderSelects()}
+
+ );
+}
+
+export default OtherSelects;
diff --git a/web/js/react/src/components/CronJob/Generator/OtherSelects/SelectsWrapper.scss b/web/js/react/src/components/CronJob/Generator/OtherSelects/SelectsWrapper.scss
new file mode 100644
index 000000000..05812b215
--- /dev/null
+++ b/web/js/react/src/components/CronJob/Generator/OtherSelects/SelectsWrapper.scss
@@ -0,0 +1,60 @@
+.cron-form-body {
+ .third-tab-selects,
+ .fourth-tab-selects {
+ display: flex;
+
+ div.hour {
+ select {
+ width: 70px;
+ margin-left: 4.8rem;
+ }
+ }
+
+ div.minute {
+ label {
+ margin: 0;
+ }
+
+ select {
+ margin: 0;
+ }
+ }
+ }
+
+ .fifth-tab-selects {
+ display: flex;
+
+ > div {
+ width: 10%;
+
+ select {
+ width: 70px;
+ }
+ }
+
+ > div.date {
+ margin: 0 0 1rem 0;
+ }
+
+ > div.minute {
+ width: 200px;
+ }
+
+ > div.hour {
+ width: 155px;
+ margin-left: 1rem;
+
+ select {
+ margin-left: .75rem;
+ }
+ }
+
+ > div.date {
+ width: 240px;
+
+ select {
+ margin-left: 5.85rem;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/CronJob/Generator/OtherSelects/ThirdTabSelects.jsx b/web/js/react/src/components/CronJob/Generator/OtherSelects/ThirdTabSelects.jsx
new file mode 100644
index 000000000..7b06e718d
--- /dev/null
+++ b/web/js/react/src/components/CronJob/Generator/OtherSelects/ThirdTabSelects.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { dailyMinutesOptions, hoursOptions } from '../../../../ControlPanelService/GeneratorOptions';
+
+export default function ThirdTabSelects() {
+ const { i18n } = window.GLOBAL.App;
+
+ const renderHours = () => {
+ return hoursOptions.map((option, index) => );
+ }
+
+ const renderOptions = () => {
+ return dailyMinutesOptions.map((option, index) => );
+ }
+
+ return (
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/CronJob/Generator/RunCommandSelect/RunCommandSelect.jsx b/web/js/react/src/components/CronJob/Generator/RunCommandSelect/RunCommandSelect.jsx
new file mode 100644
index 000000000..83ed676ea
--- /dev/null
+++ b/web/js/react/src/components/CronJob/Generator/RunCommandSelect/RunCommandSelect.jsx
@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import { daysRunCommandsOptions, hoursRunCommandsOptions, minutesRunCommandsOptions, monthlyRunCommandOptions, weeklyRunCommandOptions } from '../../../../ControlPanelService/GeneratorOptions';
+
+const RunCommandSelect = props => {
+ const { i18n } = window.GLOBAL.App;
+
+ const [state, setState] = useState({
+ activeTab: ''
+ });
+
+ useEffect(() => {
+ setState({ ...state, activeTab: props.activeTab });
+ }, [props]);
+
+ const renderOptions = () => {
+ switch (state.activeTab) {
+ case '1': return minutesRunCommandsOptions.map(option => );
+ case '2': return hoursRunCommandsOptions.map(option => );
+ case '3': return daysRunCommandsOptions.map(option => );
+ case '4': return weeklyRunCommandOptions.map(option => );
+ case '5': return monthlyRunCommandOptions.map(option => );
+ default: break;
+ }
+ }
+
+ const selectName = () => {
+ switch (state.activeTab) {
+ case '1': return 'h_min';
+ case '2': return 'h_hour';
+ case '3': return 'h_day';
+ case '4': return 'h_wday';
+ case '5': return 'h_month';
+ default: break;
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default RunCommandSelect;
\ No newline at end of file
diff --git a/web/js/react/src/components/CronJob/Generator/RunCommandSelect/RunCommandSelect.scss b/web/js/react/src/components/CronJob/Generator/RunCommandSelect/RunCommandSelect.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/js/react/src/components/DNSRecord/Add/AddDNSRecord.jsx b/web/js/react/src/components/DNSRecord/Add/AddDNSRecord.jsx
new file mode 100644
index 000000000..c9f77793f
--- /dev/null
+++ b/web/js/react/src/components/DNSRecord/Add/AddDNSRecord.jsx
@@ -0,0 +1,142 @@
+import React, { useEffect, useState } from 'react';
+
+import { addActiveElement, removeFocusedElement } from "../../../actions/MainNavigation/mainNavigationActions";
+import SelectInput from 'src/components/ControlPanel/AddItemLayout/Form/SelectInput/SelectInput';
+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';
+import Spinner from '../../Spinner/Spinner';
+import { useDispatch } from 'react-redux';
+
+import './AddDNSRecord.scss'
+import { Helmet } from 'react-helmet';
+
+export default function AddDNSRecord(props) {
+ const { i18n } = window.GLOBAL.App;
+ const dispatch = useDispatch();
+ const token = localStorage.getItem("token");
+ const history = useHistory();
+ const [state, setState] = useState({
+ data: {},
+ selectOptions: [
+ 'A',
+ 'AAAA',
+ 'NS',
+ 'CNAME',
+ 'MX',
+ 'TXT',
+ 'SRV',
+ 'DNSKEY',
+ 'KEY',
+ 'IPSECKEY',
+ 'PTR',
+ 'SPF',
+ 'TLSA',
+ 'CAA'
+ ],
+ loading: false,
+ okMessage: '',
+ errorMessage: '',
+ });
+
+ useEffect(() => {
+ dispatch(addActiveElement(`/list/dns/`));
+ dispatch(removeFocusedElement());
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let newDnsRecord = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ newDnsRecord[name] = value;
+ }
+
+ newDnsRecord['ok_rec'] = 'add';
+ newDnsRecord['token'] = token;
+ newDnsRecord['v_domain'] = props.domain;
+
+ if (Object.keys(newDnsRecord).length !== 0 && newDnsRecord.constructor === Object) {
+ setState({ loading: true });
+ addDomainNameSystemRecord(newDnsRecord)
+ .then(result => {
+ if (result.status === 200) {
+ const { error_msg, ok_msg } = 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 });
+ }
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ return (
+
+
+ {`Vesta - ${i18n.DNS}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/DNSRecord/Add/AddDNSRecord.scss b/web/js/react/src/components/DNSRecord/Add/AddDNSRecord.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/js/react/src/components/DNSRecord/DNSRecord.jsx b/web/js/react/src/components/DNSRecord/DNSRecord.jsx
new file mode 100644
index 000000000..dff0aedbd
--- /dev/null
+++ b/web/js/react/src/components/DNSRecord/DNSRecord.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Container from '../ControlPanel/Container/Container';
+import ListItem from '../ControlPanel/ListItem/ListItem';
+import { Link } from 'react-router-dom';
+
+export default function DnsRecord({ data, domain, handleModal, ...props }) {
+ const { i18n } = window.GLOBAL.App;
+ const token = localStorage.getItem("token");
+
+ const toggleFav = (starred) => {
+ if (starred) {
+ props.toggleFav(data.NAME, 'add');
+ } else {
+ props.toggleFav(data.NAME, 'delete');
+ }
+ }
+
+ const checkItem = () => {
+ props.checkItem(data.NAME);
+ }
+
+ const handleDelete = () => {
+ handleModal(data.delete_conf, `/delete/dns/?domain=${domain}&record_id=${data.ID}&token=${token}`);
+ }
+
+ return (
+ {i18n['Adding DNS Record']}
+
+
+ {state.errorMessage ?
+
+
+ {state.okMessage ?
+ {data.dnsRecord}
+ +
+
+ {`${data.RECORD.substring(0, 12)}${data.RECORD.length > 12 ? '...' : ''}`}
+
+
+ {data.TYPE}
+
+
+ {data.PRIORITY}
+
+
+ {data.VALUE}
+
+
+
+
+
+
+ {i18n.edit}
+ {data.FOCUSED ? ↩ :
+
+
+
+
+
+
+ {`Vesta - ${i18n.DNS}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Database/Add/AddDatabase.jsx b/web/js/react/src/components/Database/Add/AddDatabase.jsx
new file mode 100644
index 000000000..c6ff7ae44
--- /dev/null
+++ b/web/js/react/src/components/Database/Add/AddDatabase.jsx
@@ -0,0 +1,220 @@
+import React, { useEffect, useState } from 'react';
+
+import { addActiveElement, removeFocusedElement } from "../../../actions/MainNavigation/mainNavigationActions";
+import { dbCharsets, addDatabase, getDbOptionalInfo } from '../../../ControlPanelService/Db';
+import AddItemLayout from '../../ControlPanel/AddItemLayout/AddItemLayout';
+import Password from '../../ControlPanel/AddItemLayout/Form/Password/Password';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Toolbar from '../../MainNav/Toolbar/Toolbar';
+import { useHistory } from 'react-router-dom';
+import Spinner from '../../Spinner/Spinner';
+import { useDispatch } from 'react-redux';
+
+import './AddDatabase.scss'
+import { Helmet } from 'react-helmet';
+
+const AddDatabase = props => {
+ const { i18n } = window.GLOBAL.App;
+ const token = localStorage.getItem("token");
+ const dispatch = useDispatch();
+ const history = useHistory();
+ const [state, setState] = useState({
+ loading: false,
+ okMessage: '',
+ errorMessage: '',
+ dbTypes: [],
+ dbHosts: [],
+ dbCharsets: [],
+ user: '',
+ maxCharLength: '',
+ databaseInputValue: '',
+ databaseUserInputValue: '',
+ prefixI18N: ''
+ });
+
+ useEffect(() => {
+ dispatch(addActiveElement('/list/db/'));
+ dispatch(removeFocusedElement());
+
+ setState({ ...state, loading: true });
+
+ getDbOptionalInfo()
+ .then(result => {
+ if (result.status === 200) {
+ setState({
+ ...state,
+ dbCharsets,
+ user: result.data.user,
+ dbTypes: result.data.dbTypes,
+ prefixI18N: result.data.prefixI18N,
+ maxCharLength: result.data.maxCharLength,
+ dbHosts: result.data.dbHosts,
+ loading: false
+ });
+ }
+ })
+ .catch(err => console.err(err));
+ }, []);
+
+ const renderDatabaseTypesOptions = () => {
+ return state.dbTypes.map((dbType, index) => )
+ }
+
+ const renderDatabaseHostsOptions = () => {
+ return state.dbHosts.map((dbHost, index) => )
+ }
+
+ const renderDatabaseCharsetOptions = () => {
+ return state.dbCharsets.map((dbCharset, index) =>
+
+ );
+ }
+
+ const databaseUserInputHandler = value => {
+ setState({ ...state, databaseUserInputValue: value });
+ }
+
+ const databaseInputHandler = value => {
+ setState({ ...state, databaseInputValue: value });
+ }
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let newDatabase = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ newDatabase[name] = value;
+ }
+
+ newDatabase['v_database'] = `${state.user}_${state.databaseInputValue}`;
+ newDatabase['v_dbuser'] = `${state.user}_${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;
+
+ if (error_msg) {
+ setState({ ...state, errorMessage: error_msg, okMessage: '', loading: false });
+ } else if (ok_msg) {
+ setState({ ...state, errorMessage: '', okMessage: ok_msg, loading: false });
+ } else {
+ setState({ ...state, loading: false })
+ }
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ return (
+ {i18n['Editing DNS Record']}
+
+
+ {state.data.errorMessage ?
+
+
+ {state.okMessage ?
+
+
+ {`Vesta - ${i18n.DB}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default AddDatabase;
\ No newline at end of file
diff --git a/web/js/react/src/components/Database/Add/AddDatabase.scss b/web/js/react/src/components/Database/Add/AddDatabase.scss
new file mode 100644
index 000000000..ff9bf4f2b
--- /dev/null
+++ b/web/js/react/src/components/Database/Add/AddDatabase.scss
@@ -0,0 +1,45 @@
+.edit-template.add-db {
+ form {
+ span.italic {
+ font-style: italic;
+ }
+
+ .form-group {
+ .label-wrapper {
+ display: flex;
+
+ span.italic {
+ margin-left: 1.5rem;
+ color: #555;
+ }
+ }
+
+ .input-wrapper {
+ display: flex;
+ align-items: center;
+
+ span.italic {
+ font-size: 15px;
+ font-weight: bold;
+ margin-left: 1.5rem;
+ color: #777;
+ }
+ }
+
+ .input-wrapper {
+ span.italic {
+ font-weight: normal;
+ }
+ }
+ }
+
+ .form-group.database {
+ margin-top: 1rem;
+ }
+
+ span.prefix {
+ color: #777;
+ font-style: italic;
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Database/Database.jsx b/web/js/react/src/components/Database/Database.jsx
new file mode 100644
index 000000000..a7255bfcf
--- /dev/null
+++ b/web/js/react/src/components/Database/Database.jsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import ListItem from '../ControlPanel/ListItem/ListItem';
+import Container from '../ControlPanel/Container/Container';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Link } from 'react-router-dom';
+
+const Database = props => {
+ const { data } = props;
+ const { i18n } = window.GLOBAL.App;
+ const token = localStorage.getItem("token");
+
+ const toggleFav = (starred) => {
+ if (starred) {
+ props.toggleFav(data.NAME, 'add');
+ } else {
+ props.toggleFav(data.NAME, 'delete');
+ }
+ }
+
+ const checkItem = () => {
+ props.checkItem(data.NAME);
+ }
+
+ const handleSuspend = () => {
+ let suspendedStatus = data.SUSPENDED === 'yes' ? 'unsuspend' : 'suspend' === 'yes' ? 'unsuspend' : 'suspend';
+ props.handleModal(data.suspend_conf, `/${suspendedStatus}/db/?database=${data.NAME}&token=${token}`);
+ }
+
+ const handleDelete = () => {
+ props.handleModal(data.delete_conf, `/delete/db/?database=${data.NAME}&token=${token}`);
+ }
+
+ return (
+ {i18n['Adding database']}
+
+
+ {state.errorMessage ?
+
+
+ {state.okMessage ?
+ {data.DATABASE}
+ +
+
+
+
+
+
+
+
+ {i18n.Disk}: {data.U_DISK}{i18n.mb}
+ {i18n.User}: {data.DBUSER}
+ {i18n.Charset}: {data.CHARSET}
+ {i18n.Host}: {data.HOST}
+ {i18n.Type}: {data.TYPE}
+
+
+
+
+ {i18n.edit}
+ {data.FOCUSED ? ↩ :
+
+
+
+
+
+
+
+
+
+
+ {`Vesta - ${i18n.DB}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default EditDatabase;
\ No newline at end of file
diff --git a/web/js/react/src/components/Database/Edit/EditDatabase.scss b/web/js/react/src/components/Database/Edit/EditDatabase.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/js/react/src/components/DomainNameSystem/Add/AddDomainNameSystem.jsx b/web/js/react/src/components/DomainNameSystem/Add/AddDomainNameSystem.jsx
new file mode 100644
index 000000000..b81eb7f1c
--- /dev/null
+++ b/web/js/react/src/components/DomainNameSystem/Add/AddDomainNameSystem.jsx
@@ -0,0 +1,152 @@
+import React, { useEffect, useState } from 'react';
+
+import { addActiveElement, removeFocusedElement } from "../../../actions/MainNavigation/mainNavigationActions";
+import AddItemLayout from '../../ControlPanel/AddItemLayout/AddItemLayout';
+import { getUserNS } from '../../../ControlPanelService/UserNS';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Toolbar from '../../MainNav/Toolbar/Toolbar';
+import { useHistory } from 'react-router-dom';
+import Spinner from '../../Spinner/Spinner';
+import { useDispatch } from 'react-redux';
+
+import './AddDomainNameSystem.scss';
+import AdvancedOptions from './AdvancedOptions/AdvancedOptions';
+import { addDomainNameSystem } from '../../../ControlPanelService/Dns';
+import { Helmet } from 'react-helmet';
+
+const AddDomainNameSystem = props => {
+ const { i18n } = window.GLOBAL.App;
+ const dispatch = useDispatch();
+ const token = localStorage.getItem("token");
+ const history = useHistory();
+ const [state, setState] = useState({
+ loading: false,
+ showAdvancedOptions: false,
+ okMessage: '',
+ domain: '',
+ errorMessage: '',
+ userNS: []
+ });
+
+ useEffect(() => {
+ dispatch(addActiveElement('/list/dns/'));
+ dispatch(removeFocusedElement());
+
+ setState({ ...state, loading: true });
+
+ getUserNS()
+ .then(result => {
+ if (result.data.length) {
+ setState({ ...state, userNS: result.data, loading: false });
+ }
+ })
+ .catch(err => console.error(err));
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let domainNameSystem = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ domainNameSystem[name] = value;
+ }
+
+ 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;
+
+ if (error_msg) {
+ setState({ ...state, errorMessage: error_msg, okMessage: '', loading: false });
+ } else if (ok_msg) {
+ setState({ ...state, errorMessage: '', okMessage: ok_msg, loading: false });
+ } else {
+ setState({ ...state, loading: false });
+ }
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ const renderAdvancedOptions = () => {
+ if (state.showAdvancedOptions) {
+ return {i18n['Editing Database']}
+
+
+ {state.data.errorMessage ?
+
+
+ {state.okMessage ?
+
+
+ {`Vesta - ${i18n.DNS}`}
+
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default AddDomainNameSystem;
\ No newline at end of file
diff --git a/web/js/react/src/components/DomainNameSystem/Add/AddDomainNameSystem.scss b/web/js/react/src/components/DomainNameSystem/Add/AddDomainNameSystem.scss
new file mode 100644
index 000000000..f8c8be1e1
--- /dev/null
+++ b/web/js/react/src/components/DomainNameSystem/Add/AddDomainNameSystem.scss
@@ -0,0 +1,5 @@
+.add-dns form .advanced-options-button {
+ svg {
+ margin-left: 5px;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/DomainNameSystem/Add/AdvancedOptions/AdvancedOptions.jsx b/web/js/react/src/components/DomainNameSystem/Add/AdvancedOptions/AdvancedOptions.jsx
new file mode 100644
index 000000000..9dd11f24f
--- /dev/null
+++ b/web/js/react/src/components/DomainNameSystem/Add/AdvancedOptions/AdvancedOptions.jsx
@@ -0,0 +1,109 @@
+import React, { useEffect, useState } from 'react';
+import dayjs from 'dayjs';
+
+import './AdvancedOptions.scss';
+
+const AdvancedOptions = props => {
+ const { i18n } = window.GLOBAL.App;
+ const [state, setState] = useState({
+ nameServersAmount: [],
+ userNS: props.userNS
+ });
+
+ useEffect(() => {
+ if (props.userNS.length) {
+ let initNameServersAmount = props.userNS.map((userNS, index) => index + 1);
+ setState({ ...state, nameServersAmount: initNameServersAmount });
+ }
+ }, []);
+
+ const renderNameServerInputs = () => {
+ return state.nameServersAmount.map((nameServer, index) => {
+ return (
+ {i18n['Adding DNS Domain'] ?? 'Adding DNS Domain'}
+
+
+ {state.errorMessage ?
+
+
+ {state.okMessage ?
+
+
+
+
+ );
+ });
+ }
+
+ const onDeleteNameServer = index => {
+ let nameServersDuplicate = [...state.nameServersAmount];
+
+ nameServersDuplicate.splice(index - 1, 1);
+
+ setState({ ...state, nameServersAmount: nameServersDuplicate });
+ }
+
+ const addNameServer = () => {
+ let nameServersLength = state.nameServersAmount.length;
+ let nameServersDuplicate = [...state.nameServersAmount];
+
+ nameServersDuplicate.push(nameServersLength + 1);
+
+ setState({ ...state, nameServersAmount: nameServersDuplicate });
+ }
+
+ const addNameServerClassName = () => {
+ return state.nameServersAmount.length === 8 ? 'hide' : 'show optional';
+ }
+
+ const getCurrentDatePlusYear = () => {
+ let currentDatePlusYear = dayjs().add(1, 'year').format('YYYY-MM-DD');
+ return currentDatePlusYear;
+ }
+
+ return (
+
+
+ );
+}
+
+export default AdvancedOptions;
\ No newline at end of file
diff --git a/web/js/react/src/components/DomainNameSystem/Add/AdvancedOptions/AdvancedOptions.scss b/web/js/react/src/components/DomainNameSystem/Add/AdvancedOptions/AdvancedOptions.scss
new file mode 100644
index 000000000..f2f97588f
--- /dev/null
+++ b/web/js/react/src/components/DomainNameSystem/Add/AdvancedOptions/AdvancedOptions.scss
@@ -0,0 +1,17 @@
+.edit-item form {
+ div.name-server-input-wrapper {
+ display: flex;
+ align-items: center;
+ margin: 10px 0;
+
+ button {
+ margin-left: 10px;
+ }
+}
+
+.exp-date .optional {
+ font-size: 12px;
+ padding: 0 0 0 6px;
+ font-weight: normal;
+}
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/DomainNameSystem/DomainNameSystem.jsx b/web/js/react/src/components/DomainNameSystem/DomainNameSystem.jsx
new file mode 100644
index 000000000..e7c9acef9
--- /dev/null
+++ b/web/js/react/src/components/DomainNameSystem/DomainNameSystem.jsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import ListItem from '../ControlPanel/ListItem/ListItem';
+import Container from '../ControlPanel/Container/Container';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import './DomainNameSystem.scss';
+import { Link } from 'react-router-dom';
+
+const DomainNameSystem = props => {
+ const { data } = props;
+ const { i18n } = window.GLOBAL.App;
+ const token = localStorage.getItem("token");
+
+ const toggleFav = (starred) => {
+ if (starred) {
+ props.toggleFav(props.data.NAME, 'add');
+ } else {
+ props.toggleFav(props.data.NAME, 'delete');
+ }
+ }
+
+ const checkItem = () => {
+ props.checkItem(props.data.NAME);
+ }
+
+ const handleSuspend = () => {
+ let suspendedStatus = data.SUSPENDED === 'yes' ? 'unsuspend' : 'suspend' === 'yes' ? 'unsuspend' : 'suspend';
+ props.handleModal(data.suspend_conf, `/${suspendedStatus}/dns?domain=${data.NAME}&token=${token}`);
+ }
+
+ const handleDelete = () => {
+ props.handleModal(data.delete_conf, `/delete/dns?domain=${data.NAME}&token=${token}`);
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ {renderNameServerInputs()}
+
+
+
+ {data.NAME} / {data.RECORDS}
+ +
+
+
+
+
+
+
+
+ {data.IP}
+ {data.SOA}
+ {i18n.TTL}: {data.TTL}
+ {i18n.Serial}: {data.SERIAL}
+ {i18n.Template}: {data.TPL}
+ {i18n.Expire}: {data.EXP}
+
+
+
+
+ {data.RECORDS_I18N}
+ {data.FOCUSED ? L :
+
+
+
+ {i18n['add record']}
+ {data.FOCUSED ? N :
+
+
+
+ {i18n.edit}
+ {data.FOCUSED ? ↩ :
+
+
+
+
+
+
+
+
+
+
+ {`Vesta - ${i18n.DNS}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default EditDomainNameSystem;
\ No newline at end of file
diff --git a/web/js/react/src/components/DomainNameSystem/Edit/EditDomainNameSystem.scss b/web/js/react/src/components/DomainNameSystem/Edit/EditDomainNameSystem.scss
new file mode 100644
index 000000000..36562311d
--- /dev/null
+++ b/web/js/react/src/components/DomainNameSystem/Edit/EditDomainNameSystem.scss
@@ -0,0 +1,7 @@
+.edit-dns {
+ .label-wrapper {
+ span {
+ text-transform: uppercase !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Firewall/Add/AddFirewall.jsx b/web/js/react/src/components/Firewall/Add/AddFirewall.jsx
new file mode 100644
index 000000000..d6925d65a
--- /dev/null
+++ b/web/js/react/src/components/Firewall/Add/AddFirewall.jsx
@@ -0,0 +1,135 @@
+import React, { useEffect, useState } from 'react';
+
+import { addActiveElement, removeFocusedElement } from "../../../actions/MainNavigation/mainNavigationActions";
+import SelectInput from '../../ControlPanel/AddItemLayout/Form/SelectInput/SelectInput';
+import TextInput from '../../ControlPanel/AddItemLayout/Form/TextInput/TextInput';
+import AddItemLayout from '../../ControlPanel/AddItemLayout/AddItemLayout';
+import { addFirewall } from '../../../ControlPanelService/Firewalls';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Toolbar from '../../MainNav/Toolbar/Toolbar';
+import { useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+
+import './AddFirewall.scss';
+import { Helmet } from 'react-helmet';
+
+const AddFirewall = props => {
+ const token = localStorage.getItem("token");
+ const { i18n } = window.GLOBAL.App;
+ const dispatch = useDispatch();
+ const history = useHistory();
+ const [state, setState] = useState({
+ loading: false,
+ actions: [
+ i18n['DROP'],
+ i18n['ACCEPT']
+ ],
+ protocols: [
+ i18n['TCP'],
+ i18n['UDP'],
+ i18n['ICMP']
+ ],
+ okMessage: '',
+ errorMessage: ''
+ });
+
+ useEffect(() => {
+ dispatch(addActiveElement('/list/firewall/'));
+ dispatch(removeFocusedElement());
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let newFirewall = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ newFirewall[name] = value;
+ }
+
+ 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;
+
+ if (error_msg) {
+ setState({ ...state, errorMessage: error_msg, okMessage: '', loading: false });
+ } else if (ok_msg) {
+ setState({ ...state, errorMessage: '', okMessage: ok_msg, loading: false });
+ } else {
+ setState({ ...state, loading: false })
+ }
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ return (
+ {i18n['Editing DNS Domain']}
+
+
+ {state.data.errorMessage ?
+
+
+ {state.okMessage ?
+
+
+ {`Vesta - ${i18n.FIREWALL}`}
+
+
+
+
+
+
+
+
+ );
+}
+
+export default AddFirewall;
\ No newline at end of file
diff --git a/web/js/react/src/components/Firewall/Add/AddFirewall.scss b/web/js/react/src/components/Firewall/Add/AddFirewall.scss
new file mode 100644
index 000000000..aff53e9fd
--- /dev/null
+++ b/web/js/react/src/components/Firewall/Add/AddFirewall.scss
@@ -0,0 +1,9 @@
+.content .edit-template.add-firewall {
+ .toolbar .search-toolbar-name {
+ width: fit-content;
+ }
+
+ label.label-wrapper[for=ip] span {
+ text-transform: unset !important;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Firewall/Add/Banlist/index.jsx b/web/js/react/src/components/Firewall/Add/Banlist/index.jsx
new file mode 100644
index 000000000..0c41db3d6
--- /dev/null
+++ b/web/js/react/src/components/Firewall/Add/Banlist/index.jsx
@@ -0,0 +1,115 @@
+import React, { useEffect, useState } from 'react';
+import { addActiveElement, removeFocusedElement } from "src/actions/MainNavigation/mainNavigationActions";
+import AddItemLayout from 'src/components/ControlPanel/AddItemLayout/AddItemLayout';
+import { getBanIps, addBanIp } from 'src/ControlPanelService/Firewalls';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Spinner from 'src/components/Spinner/Spinner';
+import Toolbar from '../../../MainNav/Toolbar/Toolbar';
+import { useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { Helmet } from 'react-helmet';
+
+const AddBanIP = () => {
+ const { i18n } = window.GLOBAL.App;
+ const userLanguage = localStorage.getItem("language");
+ const history = useHistory();
+ const dispatch = useDispatch();
+ const [state, setState] = useState({
+ banIps: [],
+ errorMessage: '',
+ okMessage: '',
+ loading: false
+ });
+
+ useEffect(() => {
+ dispatch(addActiveElement('/list/firewall/'));
+ dispatch(removeFocusedElement());
+
+ setState({ ...state, loading: true });
+
+ getBanIps()
+ .then(result => {
+ setState({ ...state, ip: result.data.ip, chain: result.data.chain, loading: false });
+ });
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let newUser = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ newUser[name] = value;
+ }
+
+ if (Object.keys(newUser).length !== 0 && newUser.constructor === Object) {
+ addBanIp(newUser)
+ .then(result => {
+ if (result.status === 200) {
+ const { error_msg, ok_msg } = result.data;
+
+ if (error_msg) {
+ setState({ ...state, errorMessage: error_msg, okMessage: '' });
+ } else if (ok_msg) {
+ setState({ ...state, errorMessage: '', okMessage: ok_msg });
+ }
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ const renderChainOptions = () => {
+ return ['SSH', 'WEB', 'FTP', 'DNS', 'MAIL', 'DB', 'VESTA'].map((chain, index) => (
+
+ ));
+ }
+
+ return (
+ {i18n['Adding Firewall Rule']}
+
+
+ {state.errorMessage ?
+
+
+ {state.okMessage ?
+
+
+ {`Vesta - ${i18n.FIREWALL}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default AddBanIP;
diff --git a/web/js/react/src/components/Firewall/Ban/index.jsx b/web/js/react/src/components/Firewall/Ban/index.jsx
new file mode 100644
index 000000000..e13a2105e
--- /dev/null
+++ b/web/js/react/src/components/Firewall/Ban/index.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import ListItem from 'src/components/ControlPanel/ListItem/ListItem';
+import Container from 'src/components/ControlPanel/Container/Container';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const Ban = ({ data, ...props }) => {
+ const { i18n } = window.GLOBAL.App;
+ const token = localStorage.getItem("token");
+
+ const checkItem = () => {
+ props.checkItem(data.NAME);
+ }
+
+ const handleDelete = () => {
+ props.handleModal(data.delete_conf, `/api/delete/firewall/banlist/?ip=${data.NAME}&chain=${data.CHAIN}&token=${token}`);
+ }
+
+ return (
+ {i18n['Adding IP Address to Banlist']}
+ {state.errorMessage ?
+
+ {state.okMessage ?
+
+
+
+
+
+
+
+
+
+
+
+ {data.DATE} {data.TIME}
+ {data.CHAIN}
+ {data.NAME}
+
+
+
+
+
+
+
+ {`Vesta - ${i18n.FIREWALL}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default EditFirewall;
\ No newline at end of file
diff --git a/web/js/react/src/components/Firewall/Edit/EditFirewall.scss b/web/js/react/src/components/Firewall/Edit/EditFirewall.scss
new file mode 100644
index 000000000..352827b89
--- /dev/null
+++ b/web/js/react/src/components/Firewall/Edit/EditFirewall.scss
@@ -0,0 +1,11 @@
+.edit-firewall {
+ form {
+ .form-group {
+ .label-wrapper {
+ span {
+ text-transform: initial;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Firewall/Firewall.jsx b/web/js/react/src/components/Firewall/Firewall.jsx
new file mode 100644
index 000000000..6db1a9604
--- /dev/null
+++ b/web/js/react/src/components/Firewall/Firewall.jsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Container from '../ControlPanel/Container/Container';
+import ListItem from '../ControlPanel/ListItem/ListItem';
+import { Link } from 'react-router-dom';
+import './Firewall.scss';
+
+const Firewall = ({ data, ...props }) => {
+ const token = localStorage.getItem("token");
+ const { i18n } = window.GLOBAL.App;
+
+ const toggleFav = (starred) => {
+ if (starred) {
+ props.toggleFav(props.data.NAME, 'add');
+ } else {
+ props.toggleFav(props.data.NAME, 'delete');
+ }
+ }
+
+ const checkItem = () => {
+ props.checkItem(props.data.NAME);
+ }
+
+ const handleSuspend = () => {
+ let suspendedStatus = data.SUSPENDED === 'yes' ? 'unsuspend' : 'suspend';
+ props.handleModal(data.suspend_conf, `/${suspendedStatus}/firewall/?rule=${data.NAME}&token=${token}`);
+ }
+
+ const handleDelete = () => {
+ props.handleModal(data.delete_conf, `/delete/firewall/?rule=${data.NAME}&token=${token}`);
+ }
+
+ return (
+ {i18n['Editing Firewall Rule']}
+
+
+ {state.data.errorMessage ?
+
+
+ {state.okMessage ?
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {data.ACTION}
+ {data.PROTOCOL} / {data.COMMENT}
+ {data.PORT}
+ {data.IP}
+
+
+
+
+ {i18n.edit}
+ {data.FOCUSED ? ↩ :
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Hotkeys;
\ No newline at end of file
diff --git a/web/js/react/src/components/Hotkeys/Hotkeys.scss b/web/js/react/src/components/Hotkeys/Hotkeys.scss
new file mode 100644
index 000000000..5a787ba3a
--- /dev/null
+++ b/web/js/react/src/components/Hotkeys/Hotkeys.scss
@@ -0,0 +1,72 @@
+.panel {
+ margin: 0;
+ position: absolute;
+ right: 30%;
+ bottom: 0;
+ width: 40%;
+ font-size: 15px;
+ background: #38383891;
+
+ .panel-heading {
+ background: #474646b0;
+ text-align: center;
+ color: #ffcc00;
+ padding: 10px;
+
+ .close {
+ position: absolute;
+ color: white;
+ right: 10px;
+ top: 10px;
+ opacity: 1;
+
+ &:hover,&:focus{
+ color: #333;
+ outline: none;
+ text-decoration: none;
+ cursor: pointer;
+ }
+ }
+ }
+
+ .panel-body {
+ display: flex;
+ justify-content: space-between;
+ background: rgba(56,56,56,0.4);
+
+ ul {
+ width: 50%;
+ color: white;
+
+ li {
+ list-style-type: none;
+ margin-bottom: 10px;
+
+ .shortcut {
+ color: #48F4EF;
+ }
+ }
+ }
+ }
+}
+
+.hotkeys-button {
+ color: white;
+ background: rgb(170, 166, 166);
+ position: absolute;
+ right: 5px;
+ bottom: 5px;
+ width: 40px;
+ height: 38px;
+ text-align: center;
+ border-radius: 30px;
+ cursor: pointer;
+
+ svg {
+ margin-top: 7px;
+ }
+
+ &:hover {
+ background: #aacc0d;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Hotkeys/HotkeysButton.jsx b/web/js/react/src/components/Hotkeys/HotkeysButton.jsx
new file mode 100644
index 000000000..6934915b9
--- /dev/null
+++ b/web/js/react/src/components/Hotkeys/HotkeysButton.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import './Hotkeys.scss'
+
+const HotkeysButton = (props) => {
+ return (
+
+
+ Shortcuts
+ +
+
+ -
+
- u {i18n.Upload} +
- n {i18n['New File']} +
- F7 {i18n['New Folder']} +
- d {i18n.Download} +
- F2 / Shift + F6 {i18n.Rename} +
- m {i18n.Move} +
- F5 {i18n.Copy} +
- F8 / Del {i18n.Delete} +
- F2 {i18n['Save File (in text editor)']} +
- h {i18n[['Display/Close shortcuts']]} +
- Esc {i18n['Close Popup / Cancel']} +
- F10 Close Preview / Editor +
-
+
- ↑ {i18n['Move Cursor Up']} +
- ↓ {i18n['Move Cursor Down']} +
- ← {i18n['Switch to Left Tab']} +
- → {i18n['Switch to Right Tab']} +
- a {i18n.Archive} +
- Tab {i18n['Switch Tab']} +
- Enter {i18n['Open File / Enter Directory']} +
- F4{i18n['Edit File']} +
- Backspace {i18n['Go to Parent Directory']} +
- Ctr + Click {i18n['Add File to the Current Selection']} +
- Shift + Cursor up/down {i18n['Select Bunch of Files']} +
+
+ );
+}
+
+export default HotkeysButton;
\ No newline at end of file
diff --git a/web/js/react/src/components/InternetProtocol/Add/AddInternetProtocol.jsx b/web/js/react/src/components/InternetProtocol/Add/AddInternetProtocol.jsx
new file mode 100644
index 000000000..e5433a9f8
--- /dev/null
+++ b/web/js/react/src/components/InternetProtocol/Add/AddInternetProtocol.jsx
@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from 'react';
+
+import { addActiveElement, removeFocusedElement } from "../../../actions/MainNavigation/mainNavigationActions";
+import { addInternetProtocol, getAdditionalInfo } from '../../../ControlPanelService/Ip';
+import SelectInput from '../../ControlPanel/AddItemLayout/Form/SelectInput/SelectInput';
+import TextInput from '../../ControlPanel/AddItemLayout/Form/TextInput/TextInput';
+import Checkbox from '../../ControlPanel/AddItemLayout/Form/Checkbox/Checkbox';
+import AddItemLayout from '../../ControlPanel/AddItemLayout/AddItemLayout';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Toolbar from '../../MainNav/Toolbar/Toolbar';
+import { useHistory } from 'react-router-dom';
+import Spinner from '../../Spinner/Spinner';
+import { useDispatch, useSelector } from 'react-redux';
+
+import './AddInternetProtocol.scss';
+import { Helmet } from 'react-helmet';
+
+const AddInternetProtocol = props => {
+ const token = localStorage.getItem("token");
+ const { i18n } = window.GLOBAL.App;
+ const session = useSelector(state => state.session);
+ const dispatch = useDispatch();
+ const history = useHistory();
+ const [state, setState] = useState({
+ loading: false,
+ dedicated: true,
+ okMessage: '',
+ errorMessage: '',
+ interfaces: [],
+ users: []
+ });
+
+ useEffect(() => {
+ dispatch(addActiveElement('/list/ip/'));
+ dispatch(removeFocusedElement());
+
+ setState({ ...state, loading: true });
+
+ fetchData();
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let newIp = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ newIp[name] = value;
+ }
+
+ 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;
+
+ if (error_msg) {
+ setState({ ...state, errorMessage: error_msg, okMessage: '', loading: false });
+ } else if (ok_msg) {
+ setState({ ...state, errorMessage: '', okMessage: ok_msg, loading: false });
+ } else {
+ setState({ ...state, loading: false })
+ }
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ const fetchData = () => {
+ getAdditionalInfo()
+ .then(result => {
+ setState({ ...state, interfaces: result.data.interfaces, users: result.data.users, loading: false });
+ })
+ .catch(err => console.error(err));
+ }
+
+ const onChangeDedicated = value => {
+ setState({ ...state, dedicated: value });
+ }
+
+ return (
+
+
+ {`Vesta - ${i18n.IP}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default AddInternetProtocol;
\ No newline at end of file
diff --git a/web/js/react/src/components/InternetProtocol/Add/AddInternetProtocol.scss b/web/js/react/src/components/InternetProtocol/Add/AddInternetProtocol.scss
new file mode 100644
index 000000000..3fd53d254
--- /dev/null
+++ b/web/js/react/src/components/InternetProtocol/Add/AddInternetProtocol.scss
@@ -0,0 +1,19 @@
+div.edit-item {
+ form {
+ label.label-wrapper {
+ align-items: center;
+
+ span {
+ text-transform: lowercase;
+ }
+ }
+
+ div.assigned-user {
+ padding-left: 25px;
+
+ select {
+ width: 48.4%;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/InternetProtocol/Edit/EditInternetProtocol.jsx b/web/js/react/src/components/InternetProtocol/Edit/EditInternetProtocol.jsx
new file mode 100644
index 000000000..044332b64
--- /dev/null
+++ b/web/js/react/src/components/InternetProtocol/Edit/EditInternetProtocol.jsx
@@ -0,0 +1,146 @@
+import React, { useEffect, useState } from 'react';
+
+import { addActiveElement, removeFocusedElement } from "../../../actions/MainNavigation/mainNavigationActions";
+import { getInternetProtocolInfo, updateInternetProtocol } from '../../../ControlPanelService/Ip';
+import SelectInput from '../../ControlPanel/AddItemLayout/Form/SelectInput/SelectInput';
+import TextInput from '../../ControlPanel/AddItemLayout/Form/TextInput/TextInput';
+import Checkbox from '../../ControlPanel/AddItemLayout/Form/Checkbox/Checkbox';
+import AddItemLayout from '../../ControlPanel/AddItemLayout/AddItemLayout';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Spinner from '../../../components/Spinner/Spinner';
+import Toolbar from '../../MainNav/Toolbar/Toolbar';
+import { useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import QS from 'qs';
+
+import './EditInternetProtocol.scss';
+import { Helmet } from 'react-helmet';
+
+const EditInternetProtocol = () => {
+ const token = localStorage.getItem("token");
+ const { i18n } = window.GLOBAL.App;
+ const history = useHistory();
+ const dispatch = useDispatch();
+ const [state, setState] = useState({
+ data: {},
+ loading: false,
+ dedicated: false,
+ errorMessage: '',
+ okMessage: ''
+ });
+
+ useEffect(() => {
+ let queryParams = QS.parse(history.location.search, { ignoreQueryPrefix: true });
+ const { ip } = queryParams;
+
+ dispatch(addActiveElement('/list/ip/'));
+ dispatch(removeFocusedElement());
+
+ if (ip) {
+ setState({ ...state, loading: true });
+
+ getInternetProtocolInfo(ip)
+ .then(response => {
+ setState({
+ ...state,
+ data: response.data,
+ dedicated: !response.data.dedicated,
+ errorMessage: response.data['error_msg'],
+ okMessage: response.data['ok_msg'],
+ loading: false
+ });
+ })
+ .catch(err => console.error(err));
+ }
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let updatedIP = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ updatedIP[name] = value;
+ }
+
+ updatedIP['token'] = token;
+ updatedIP['save'] = 'save';
+ updatedIP['v_ip'] = state.data.database;
+
+ if (Object.keys(updatedIP).length !== 0 && updatedIP.constructor === Object) {
+ setState({ ...state, loading: true });
+
+ 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 });
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ const onChangeDedicated = value => {
+ setState({ ...state, dedicated: value });
+ }
+
+ return (
+ {i18n['Adding Package']}
+
+
+ {state.errorMessage ?
+
+
+ {state.okMessage ?
+
+
+ {`Vesta - ${i18n.IP}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default EditInternetProtocol;
\ No newline at end of file
diff --git a/web/js/react/src/components/InternetProtocol/Edit/EditInternetProtocol.scss b/web/js/react/src/components/InternetProtocol/Edit/EditInternetProtocol.scss
new file mode 100644
index 000000000..fa65bb0ae
--- /dev/null
+++ b/web/js/react/src/components/InternetProtocol/Edit/EditInternetProtocol.scss
@@ -0,0 +1,8 @@
+.edit-ip {
+ form {
+ .dedicated-form-group {
+ transform: translateX(3rem);
+ margin-bottom: 2rem;
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/InternetProtocol/InternetProtocol.jsx b/web/js/react/src/components/InternetProtocol/InternetProtocol.jsx
new file mode 100644
index 000000000..ef169410d
--- /dev/null
+++ b/web/js/react/src/components/InternetProtocol/InternetProtocol.jsx
@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import ListItem from '../ControlPanel/ListItem/ListItem';
+import Container from '../ControlPanel/Container/Container';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import './InternetProtocol.scss';
+import { Link } from 'react-router-dom';
+
+const InternetProtocol = props => {
+ const { data } = props;
+ const { i18n } = window.GLOBAL.App;
+ const token = localStorage.getItem("token");
+
+ const toggleFav = (starred) => {
+ if (starred) {
+ props.toggleFav(data.NAME, 'add');
+ } else {
+ props.toggleFav(data.NAME, 'delete');
+ }
+ }
+
+ const checkItem = () => {
+ props.checkItem(data.NAME);
+ }
+
+ const handleDelete = () => {
+ props.handleModal(data.delete_conf, `/delete/ip/?ip=${data.NAME}&token=${token}`);
+ }
+
+ return (
+ {i18n['Editing IP Address']}
+
+
+ {state.data.errorMessage ?
+
+
+ {state.okMessage ?
+ {data.NAME}
+ +
+
+
+
+
+
+
+
+ {data.NETMASK}
+ {data.INTERFACE}
+ {i18n.Domains}: {data.U_WEB_DOMAINS}
+ {i18n.Status}: {data.STATUS}
+ {i18n.Owner}: {data.OWNER}
+ {i18n.Users}: {data.U_SYS_USERS.replace(',', ', ')}
+
+
+
+
+ {i18n.edit}
+ {data.FOCUSED ? ↩ :
+
+
+
+
+
+
+ );
+ }
+}
+
+export default DirectoryList;
diff --git a/web/js/react/src/components/Lists/List.scss b/web/js/react/src/components/Lists/List.scss
new file mode 100644
index 000000000..ae3a3ceb8
--- /dev/null
+++ b/web/js/react/src/components/Lists/List.scss
@@ -0,0 +1,56 @@
+.list {
+ width: 50%;
+ height: 100vh;
+ flex: 1 1 50%;
+
+ .list-container {
+ margin-top: 10px;
+ height: calc(100% - 100px);
+ overflow: auto;
+
+ ul {
+ margin-top: 5px;
+ padding: 0;
+ color: #3a3a3a;
+
+ li {
+ display: block;
+ height: 34px;
+ line-height: 30px;
+ font-size: 15px;
+ margin-top: 2px;
+ list-style: none;
+
+ span {
+ font-size: 13px;
+ }
+
+ &:hover{
+ background: #DEDEDE;
+ }
+ }
+
+ li.active {
+ background: #FFDC5A;
+
+ .marker {
+ float: left;
+ width: 4px;
+ height: 34px;
+ margin-right: 5px;
+ background: #79641a;
+ }
+ }
+
+ li.selected {
+ background: #fdfdbb;
+ }
+ }
+ }
+}
+
+@media screen and (max-width: 1200px){
+ .permissions, .owner {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Lists/Row/Row.jsx b/web/js/react/src/components/Lists/Row/Row.jsx
new file mode 100644
index 000000000..16c0684ee
--- /dev/null
+++ b/web/js/react/src/components/Lists/Row/Row.jsx
@@ -0,0 +1,191 @@
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faJs, faCss3, faPhp, faHtml5, faSass } from '@fortawesome/free-brands-svg-icons';
+import './Row.scss';
+
+class Row extends Component {
+ static propTypes = {
+ selectMultiple: PropTypes.func,
+ selectOnClick: PropTypes.func,
+ openDirectory: PropTypes.func,
+ modalVisible: PropTypes.bool,
+ isActiveList: PropTypes.bool,
+ activeRow: PropTypes.bool,
+ selected: PropTypes.func,
+ download: PropTypes.func,
+ cursor: PropTypes.number,
+ path: PropTypes.string,
+ key: PropTypes.number,
+ data: PropTypes.array
+ }
+
+ componentDidMount = () => {
+ document.addEventListener("keydown", this.openOnEnter);
+ }
+
+ componentWillUnmount = () => {
+ document.removeEventListener("keydown", this.openOnEnter);
+ }
+
+ openOnEnter = (e) => {
+ const { activeRow, data: { name, type }, isActiveList, modalVisible, openDirectory, cursor, download, path } = this.props;
+
+ if (modalVisible || !activeRow || !isActiveList) {
+ return;
+ }
+
+ if (e.keyCode === 13) {
+ if (this.isArchive(name) || type === "l") {
+ download();
+ } else if (this.isFile(type) && cursor !== 0) {
+ this.changePath(path, name);
+ } else {
+ openDirectory(name);
+ }
+ }
+ }
+
+ openItem = () => {
+ const { data: { type, name }, openDirectory, download, path, isActiveList } = this.props;
+
+ if (!isActiveList) {
+ return;
+ }
+
+ if (this.isArchive(name) || type === "l" || name.match('.mp4')) {
+ return download();
+ } else if (this.isFile(type)) {
+ return this.changePath(path, name);
+ } else if (type === 'd') {
+ return openDirectory(name);
+ }
+ }
+
+ changePath = (path, name) => {
+ this.props.history.push({
+ pathname: '/list/directory/preview/',
+ search: `?path=${path}/${name}`
+ });
+ }
+
+ selectRow = (e) => {
+ const { data: { name, permissions, type }, selectMultiple, selectOnClick, cursor, activeRow } = this.props;
+
+ if (e.ctrlKey && cursor !== 0) {
+ selectMultiple();
+ }
+
+ if (activeRow) {
+ return;
+ }
+
+ selectOnClick(cursor, name, permissions, type);
+ }
+
+ className = () => {
+ const { activeRow, selected, isActiveList } = this.props;
+
+ if (isActiveList) {
+ let isActive = activeRow ? 'active' : '';
+ let isSelected = selected ? 'selected' : '';
+ return isActive.length ? isActive : isSelected;
+ } else {
+ let isActive = activeRow ? 'inactive' : '';
+ let isSelected = selected ? 'inactive-selected' : '';
+ return isActive.length ? isActive : isSelected;
+ }
+ }
+
+ sizeFormatter = (bytes, decimals) => {
+ if (bytes === undefined || this.props.data.type === "d") {
+ return null;
+ };
+
+ if (bytes === "0") {
+ return 0 b;
+ }
+
+ let k = 1024,
+ dm = decimals <= 0 ? 0 : decimals || 2,
+ sizes = ['b', 'kb', 'Mb', 'GB'],
+ i = Math.floor(Math.log(bytes) / Math.log(k));
+ return ({parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} {sizes[i]});
+ }
+
+ dateFormatter = (fDate) => {
+ if (fDate === undefined) {
+ return null;
+ }
+
+ let date = new Date(fDate),
+ months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+ appMonths = window.GLOBAL.App.i18n,
+ getDay = date.getDate(),
+ getMonth = appMonths[months[date.getMonth()]];
+ return ({getMonth} {getDay});
+ }
+
+ glyph = () => {
+ const { data: { type, name } } = this.props;
+
+ if (type === 'd') {
+ return
+
+ -
+ {loading && isActive ?
{day} {months[month]} {year}
;
+ }
+
+ return (
+
+
+ {printDate(data.DATE)}
+ {data.TIME}
+
+
+
+
+ );
+}
+
+export default Log;
\ 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
new file mode 100644
index 000000000..f53e343ae
--- /dev/null
+++ b/web/js/react/src/components/Log/Log.scss
@@ -0,0 +1,28 @@
+.logs-list {
+ .statistic-item {
+ .l-col {
+ font-size: 13px;
+ color: #888;
+
+ .date {
+ margin: 1rem 0;
+ margin-bottom: 1.5rem;
+ }
+ }
+
+ .r-col {
+ .name {
+ margin-top: .7rem;
+ font-size: 18px;
+ }
+ }
+ }
+
+ .statistic-item.focused {
+ border-left: 2px solid #5edad0;
+
+ div.name {
+ color: #5edad0;
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Login/Login.scss b/web/js/react/src/components/Login/Login.scss
new file mode 100644
index 000000000..1043628dd
--- /dev/null
+++ b/web/js/react/src/components/Login/Login.scss
@@ -0,0 +1,90 @@
+.login-page {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100vh;
+ background-color: #eee;
+
+ .login-form-wrapper {
+ background-color: #fff;
+ box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
+ font-family: Arial,Helvetica,sans-serif;
+ margin: 0;
+ padding: 0;
+ text-align: left;
+ width: 575px;
+
+ .login-layout {
+ position: relative;
+
+ > span {
+ position: absolute;
+ bottom: 0;
+ right: 20px;
+ font-size: 11px;
+
+ a {
+ color: #505050;
+ }
+ }
+ }
+
+ form {
+ display: flex;
+ position: relative;
+
+ > div {
+ input[type="text"],
+ input[type="password"] {
+ width: 100%;
+ }
+ }
+
+ .c1 {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 30%;
+ }
+
+ .c2 {
+ width: 70%;
+ margin-left: 3.5rem;
+
+ .forgot-password {
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: .75px;
+ text-decoration: none;
+ }
+
+ button[type="submit"] {
+ background-color: #9FBF0C;
+ border: 1px solid #9FBF0C;
+ padding: 1px 16px 3px;
+ font-size: 13px;;
+ width: 100px;
+ height: 35px;
+ color: #fafafa;
+ border-radius: 3px;
+
+ &:hover {
+ border: 1px solid #C0E60F;
+ background-color: #C0E60F;
+ color: #555;
+ }
+
+ .disabled {
+ cursor: not-allowed;
+ }
+ }
+
+ div.error-message {
+ margin-top: 1rem;
+ color: #BE5ABF;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Login/LoginForm.jsx b/web/js/react/src/components/Login/LoginForm.jsx
new file mode 100644
index 000000000..9e0c96de5
--- /dev/null
+++ b/web/js/react/src/components/Login/LoginForm.jsx
@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react';
+
+import { Link, useHistory } from 'react-router-dom';
+import Spinner from '../Spinner/Spinner';
+import { useDispatch, useSelector } from 'react-redux';
+import { login } from '../../actions/Session/sessionActions';
+import LoginLayout from '../ControlPanel/LoginLayout/LoginLayout';
+import TextInput from '../ControlPanel/AddItemLayout/Form/TextInput/TextInput';
+
+import './Login.scss';
+import { Helmet } from 'react-helmet';
+
+export default function LoginForm() {
+ const { i18n } = window.GLOBAL.App;
+ const dispatch = useDispatch();
+ const history = useHistory();
+ const [loading, setLoading] = useState(false);
+ const [formValues, setFormValues] = useState({
+ user: '',
+ password: ''
+ });
+ const session = useSelector(state => state.session);
+ const [errorMessage, setErrorMessage] = useState('');
+
+ useEffect(() => {
+ if (session.error) {
+ setErrorMessage(session.error);
+ return;
+ }
+
+ if (session.token) {
+ history.push('/list/user/');
+ }
+ }, [session]);
+
+ const submitHandler = event => {
+ event.preventDefault();
+ const { user, password } = formValues;
+
+ setLoading(true);
+
+ dispatch(login(user, password))
+ .then((res) => {
+ setLoading(false);
+ });
+ }
+
+ const changeInputHandler = event => {
+ const { value, name } = event.target;
+
+ setFormValues({
+ ...formValues,
+ [name]: value
+ });
+ }
+
+ return (
+
+ );
+}
diff --git a/web/js/react/src/components/Mail/Add/AddMail.jsx b/web/js/react/src/components/Mail/Add/AddMail.jsx
new file mode 100644
index 000000000..30a4c9ebf
--- /dev/null
+++ b/web/js/react/src/components/Mail/Add/AddMail.jsx
@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from 'react';
+
+import { addActiveElement, removeFocusedElement } from "../../../actions/MainNavigation/mainNavigationActions";
+import AddItemLayout from '../../ControlPanel/AddItemLayout/AddItemLayout';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { addMail } from '../../../ControlPanelService/Mail';
+import Toolbar from '../../MainNav/Toolbar/Toolbar';
+import { useHistory } from 'react-router-dom';
+import Spinner from '../../Spinner/Spinner';
+import { useDispatch } from 'react-redux';
+
+import './AddMail.scss'
+import { Helmet } from 'react-helmet';
+
+const AddMail = props => {
+ const { i18n } = window.GLOBAL.App;
+ const dispatch = useDispatch();
+ const token = localStorage.getItem("token");
+ const history = useHistory();
+ const [state, setState] = useState({
+ loading: false,
+ antiSpamChecked: true,
+ antiVirusChecked: true,
+ dkimChecked: true,
+ okMessage: '',
+ errorMessage: '',
+ });
+
+ useEffect(() => {
+ dispatch(addActiveElement('/list/mail/'));
+ dispatch(removeFocusedElement());
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let newMailDomain = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ newMailDomain[name] = value;
+ }
+
+ if (Object.keys(newMailDomain).length !== 0 && newMailDomain.constructor === Object) {
+ addMail(newMailDomain)
+ .then(result => {
+ if (result.status === 200) {
+ const { error_msg, ok_msg } = result.data;
+
+ if (error_msg) {
+ setState({ ...state, errorMessage: error_msg, okMessage: '' });
+ } else if (ok_msg) {
+ setState({ ...state, errorMessage: '', okMessage: ok_msg });
+ }
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ return (
+ {data.CMD}
+
+
+ {`Vesta - ${i18n.MAIL}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default AddMail;
\ No newline at end of file
diff --git a/web/js/react/src/components/Mail/Add/AddMail.scss b/web/js/react/src/components/Mail/Add/AddMail.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/js/react/src/components/Mail/Edit/EditMail.jsx b/web/js/react/src/components/Mail/Edit/EditMail.jsx
new file mode 100644
index 000000000..b2e048ad3
--- /dev/null
+++ b/web/js/react/src/components/Mail/Edit/EditMail.jsx
@@ -0,0 +1,143 @@
+import React, { useEffect, useState } from 'react';
+import { addActiveElement, removeFocusedElement } from "../../../actions/MainNavigation/mainNavigationActions";
+import TextInput from '../../ControlPanel/AddItemLayout/Form/TextInput/TextInput';
+import Checkbox from '../../ControlPanel/AddItemLayout/Form/Checkbox/Checkbox';
+import { getMailInfo, updateMail } from '../../../ControlPanelService/Mail';
+import AddItemLayout from '../../ControlPanel/AddItemLayout/AddItemLayout';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Spinner from '../../../components/Spinner/Spinner';
+import Toolbar from '../../MainNav/Toolbar/Toolbar';
+import { useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import QS from 'qs';
+
+import './EditMail.scss';
+import { Helmet } from 'react-helmet';
+
+const EditMail = props => {
+ const token = localStorage.getItem("token");
+ const { i18n } = window.GLOBAL.App;
+ const history = useHistory();
+ const dispatch = useDispatch();
+ const [state, setState] = useState({
+ data: {},
+ loading: false,
+ errorMessage: '',
+ okMessage: ''
+ });
+
+ useEffect(() => {
+ let queryParams = QS.parse(history.location.search, { ignoreQueryPrefix: true });
+ const { domain } = queryParams;
+
+ dispatch(addActiveElement('/list/mail/'));
+ dispatch(removeFocusedElement());
+
+ if (domain) {
+ setState({ ...state, loading: true });
+
+ getMailInfo(domain)
+ .then(response => {
+ setState({
+ ...state,
+ data: response.data,
+ errorMessage: response.data['error_msg'],
+ okMessage: response.data['ok_msg'],
+ loading: false
+ });
+ })
+ .catch(err => console.error(err));
+ }
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let updatedDomain = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ updatedDomain[name] = value;
+ }
+
+ updatedDomain['v_domain'] = state.data.domain;
+
+ if (Object.keys(updatedDomain).length !== 0 && updatedDomain.constructor === Object) {
+ setState({ ...state, loading: true });
+
+ updateMail(updatedDomain, state.data.domain)
+ .then(result => {
+ if (result.status === 200) {
+ const { error_msg, ok_msg } = 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 });
+ } else {
+ setState({ ...state, loading: false });
+ }
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ return (
+ {i18n['Adding Mail Domain']}
+
+
+ {state.errorMessage ?
+
+
+ {state.okMessage ?
+
+
+ {`Vesta - ${i18n.MAIL}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default EditMail;
\ No newline at end of file
diff --git a/web/js/react/src/components/Mail/Edit/EditMail.scss b/web/js/react/src/components/Mail/Edit/EditMail.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/js/react/src/components/Mail/Mail.jsx b/web/js/react/src/components/Mail/Mail.jsx
new file mode 100644
index 000000000..0923d4ca9
--- /dev/null
+++ b/web/js/react/src/components/Mail/Mail.jsx
@@ -0,0 +1,110 @@
+import React, { Component } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Container from '../ControlPanel/Container/Container';
+import ListItem from '../ControlPanel/ListItem/ListItem';
+import { Link } from 'react-router-dom';
+import './Mail.scss';
+
+const Mail = props => {
+ const { data } = props;
+ const { i18n } = window.GLOBAL.App;
+ const token = localStorage.getItem("token");
+ const printStat = (stat, text) => {
+ if (text === 'no') {
+ return {i18n['Editing Mail Domain']}
+
+
+ {state.data.errorMessage ?
+
+
+ {state.okMessage ?
+ {stat}
;
+ }
+
+ return {stat}: {text}
;
+ }
+
+ const toggleFav = (starred) => {
+ if (starred) {
+ props.toggleFav(props.data.NAME, 'add');
+ } else {
+ props.toggleFav(props.data.NAME, 'delete');
+ }
+ }
+
+ const checkItem = () => {
+ props.checkItem(props.data.NAME);
+ }
+
+ const handleSuspend = () => {
+ let suspendedStatus = data.SUSPENDED === 'yes' ? 'unsuspend' : 'suspend' === 'yes' ? 'unsuspend' : 'suspend';
+ props.handleModal(data.suspend_conf, `/${suspendedStatus}/mail?domain=${data.NAME}&token=${token}`);
+ }
+
+ const handleDelete = () => {
+ props.handleModal(data.delete_conf, `/delete/mail?domain=${data.NAME}&token=${token}`);
+ }
+
+ return (
+ {data.NAME}
+
+
+
+
+ {printStat(i18n['AntiVirus Support'], data.ANTIVIRUS)}
+ {printStat(i18n['DKIM Support'], data.DKIM)}
+
+
+ {printStat(i18n['AntiSpam Support'], data.ANTISPAM)}
+
+
+ {i18n.Disk} {data.U_DISK}{i18n.mb}
+ {i18n['Catchall email']}: {data.CATCHALL}
+
+
+
+
+ {data.list_accounts_button}
+ {data.FOCUSED ? L :
+
+
+
+ {i18n['add account']}
+ {data.FOCUSED ? N :
+
+
+
+ {i18n.edit}
+ {data.FOCUSED ? ↩ :
+
+
+
+
+
+
+
+
+
+
+ {`Vesta - ${i18n.MAIL}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/MailAccount/Add/AddMailAccount.scss b/web/js/react/src/components/MailAccount/Add/AddMailAccount.scss
new file mode 100644
index 000000000..45f10a5f0
--- /dev/null
+++ b/web/js/react/src/components/MailAccount/Add/AddMailAccount.scss
@@ -0,0 +1,48 @@
+.content .edit-template.add-mail-account {
+ .search-toolbar-name {
+ width: fit-content;
+ }
+
+ form {
+ .r-1 {
+ display: flex;
+
+ .c-1 {
+ width: 55%;
+
+ .form-group {
+ > * {
+ width: 85%;
+ }
+
+ .password-wrapper {
+ input {
+ width: 100%;
+ }
+ }
+ }
+ }
+
+ .c-2 {
+ width: 45%;
+ border: 1px solid #d9d9d9;
+ padding: 0px 5px 12px 20px;
+ }
+ }
+
+ .r-2 {
+ > button {
+ padding-left: 0;
+ margin-bottom: 1.5rem;
+
+ svg {
+ margin-left: .75rem;
+ }
+ }
+
+ .form-group .input-wrapper {
+ display: flex;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/MailAccount/Edit/EditMailAccount.jsx b/web/js/react/src/components/MailAccount/Edit/EditMailAccount.jsx
new file mode 100644
index 000000000..d5fe7091f
--- /dev/null
+++ b/web/js/react/src/components/MailAccount/Edit/EditMailAccount.jsx
@@ -0,0 +1,218 @@
+import React, { useEffect, useState } from 'react';
+
+import TextInputWithExtraButton from 'src/components/ControlPanel/AddItemLayout/Form/TextInputWithExtraButton/TextInputWithExtraButton';
+import { addActiveElement, removeFocusedElement } from "../../../actions/MainNavigation/mainNavigationActions";
+import TextInput from 'src/components/ControlPanel/AddItemLayout/Form/TextInput/TextInput';
+import Password from 'src/components/ControlPanel/AddItemLayout/Form/Password/Password';
+import TextArea from 'src/components/ControlPanel/AddItemLayout/Form/TextArea/TextArea';
+import Checkbox from 'src/components/ControlPanel/AddItemLayout/Form/Checkbox/Checkbox';
+import { addMailAccount, editMailAccount, getMailAccountInfo } from '../../../ControlPanelService/Mail';
+import AddItemLayout from '../../ControlPanel/AddItemLayout/AddItemLayout';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import MailInfoBlock from '../MailInfoBlock/MailInfoBlock';
+import Toolbar from '../../MainNav/Toolbar/Toolbar';
+import { useHistory } from 'react-router-dom';
+import Spinner from '../../Spinner/Spinner';
+import { useDispatch } from 'react-redux';
+import { Helmet } from 'react-helmet';
+
+export default function EditMailAccount(props) {
+ const [autoreplyChecked, setAutoreplyChecked] = useState(false);
+ const token = localStorage.getItem("token");
+ const { i18n } = window.GLOBAL.App;
+ const dispatch = useDispatch();
+ const history = useHistory();
+ const [state, setState] = useState({
+ data: {},
+ quotaValue: '',
+ loading: false,
+ password: '',
+ okMessage: '',
+ errorMessage: '',
+ });
+
+ useEffect(() => {
+ dispatch(addActiveElement(`/list/mail/`));
+ dispatch(removeFocusedElement());
+ setState({ ...state, loading: true });
+
+ fetchData();
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let newMailDomain = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ newMailDomain[name] = value;
+ }
+
+ newMailDomain['v_domain'] = props.domain;
+ newMailDomain['v_account'] = props.account;
+ newMailDomain['Password'] = newMailDomain['v_password'];
+
+ if (Object.keys(newMailDomain).length !== 0 && newMailDomain.constructor === Object) {
+ setState({ ...state, loading: true });
+ editMailAccount(newMailDomain, props.domain, props.account)
+ .then(result => {
+ if (result.status === 200) {
+ const { error_msg, ok_msg } = 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 });
+ }
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ const fetchData = () => {
+ setState({ ...state, loading: true });
+
+ getMailAccountInfo(props.domain, props.account)
+ .then(response => {
+ setState({
+ ...state,
+ data: response.data,
+ errorMessage: response.data['error_msg'],
+ okMessage: response.data['ok_msg'],
+ loading: false
+ });
+
+ setAutoreplyChecked(response.data.autoreply === 'yes');
+ })
+ .catch(err => console.error(err));
+ }
+
+ const toggleQuotaValue = () => {
+ if (state.quotaValue !== 'unlimited') {
+ setState({ ...state, quotaValue: 'unlimited' });
+ } else {
+ setState({ ...state, quotaValue: '' });
+ }
+ }
+
+ const goBack = () => {
+ history.push(`/list/mail/?domain=${props.domain}`);
+ }
+
+ return (
+ {i18n['Adding Mail Account']}
+
+
+ {state.errorMessage ?
+
+
+ {state.okMessage ?
+
+
+ {`Vesta - ${i18n.MAIL}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/MailAccount/MailAccount.jsx b/web/js/react/src/components/MailAccount/MailAccount.jsx
new file mode 100644
index 000000000..7249ff022
--- /dev/null
+++ b/web/js/react/src/components/MailAccount/MailAccount.jsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Container from '../ControlPanel/Container/Container';
+import ListItem from '../ControlPanel/ListItem/ListItem';
+import { Link } from 'react-router-dom';
+
+export default function MailAccount(props) {
+ const { data, domain } = props;
+ const { i18n } = window.GLOBAL.App;
+ const token = localStorage.getItem("token");
+ const printStat = (stat, text) => {
+ if (text === 'no') {
+ return {i18n['Editing Mail Account']}
+
+
+ {state.errorMessage ?
+
+
+ {state.okMessage ?
+ {stat}
;
+ }
+
+ return {stat}: {text}
;
+ }
+
+ const toggleFav = (starred) => {
+ if (starred) {
+ props.toggleFav(props.data.NAME, 'add');
+ } else {
+ props.toggleFav(props.data.NAME, 'delete');
+ }
+ }
+
+ const checkItem = () => {
+ props.checkItem(props.data.NAME);
+ }
+
+ const handleSuspend = () => {
+ let suspendedStatus = data.SUSPENDED === 'yes' ? 'unsuspend' : 'suspend' === 'yes' ? 'unsuspend' : 'suspend';
+ props.handleModal(data.suspend_conf, `/${suspendedStatus}/mail?domain=${domain}&account=${data.NAME}&token=${token}`);
+ }
+
+ const handleDelete = () => {
+ props.handleModal(data.delete_conf, `/delete/mail?domain=${domain}&account=${data.NAME}&token=${token}`);
+ }
+
+ return (
+ {`${data.NAME}@${domain}`}
+
+
+
+
+
+
+ {printStat(i18n['Autoreply'], data.AUTOREPLY)}
+
+
+ {i18n.Disk} {data.U_DISK} {i18n.mb}
+ {i18n['Quota']}: {data.QUOTA} {i18n.mb}
+ {i18n['Forward to']}: {data.FWD}
+
+
+
+
+
+ {i18n.edit}
+ {data.FOCUSED ? ↩ :
+
+
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/MailAccount/MailInfoBlock/MailInfoBlock.scss b/web/js/react/src/components/MailAccount/MailInfoBlock/MailInfoBlock.scss
new file mode 100644
index 000000000..828501486
--- /dev/null
+++ b/web/js/react/src/components/MailAccount/MailInfoBlock/MailInfoBlock.scss
@@ -0,0 +1,28 @@
+.mail-info-block {
+ .select-group {
+ select {
+ margin-bottom: 10px;
+ margin-top: 5px;
+ padding: 0;
+ border: none;
+ color: #2c9491;
+ text-transform: uppercase;
+ font-size: 11px;
+ font-weight: bold;
+ cursor: pointer;
+ }
+
+ .details {
+ font-size: 14px;
+ color: #777;
+
+ > div {
+ display: flex;
+
+ span:nth-child(1) {
+ width: 50%;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/MainNav/MainNav.jsx b/web/js/react/src/components/MainNav/MainNav.jsx
new file mode 100644
index 000000000..133a4c4eb
--- /dev/null
+++ b/web/js/react/src/components/MainNav/MainNav.jsx
@@ -0,0 +1,158 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { addFocusedElement, addActiveElement, removeActiveElement, removeFocusedElement } from "../../actions/MainNavigation/mainNavigationActions";
+import * as ControlPanelContentActions from "../../actions/ControlPanelContent/controlPanelContentActions";
+import { useSelector, useDispatch } from "react-redux";
+import MobileTopNav from '../MainNav/Mobile/MobileTopNav';
+import Menu from '../MainNav/Stat-menu/Menu';
+import Panel from '../MainNav/Panel/Panel';
+import './MainNav.scss';
+
+const MainNav = props => {
+ const [state, setState] = useState({
+ menuHeight: 135,
+ showTopNav: false
+ });
+
+ const { activeElement, focusedElement, menuTabs } = useSelector(state => state.mainNavigation);
+ const { controlPanelFocusedElement } = useSelector(state => state.controlPanelContent);
+ const dispatch = useDispatch();
+
+ const controlFocusedTabWithCallback = useCallback(event => {
+ let isSearchInputFocused = document.querySelector('input:focus') || document.querySelector('textarea:focus') || document.querySelector('textarea:focus');
+ let currentActiveTabPositionInArray;
+
+ if (isSearchInputFocused) {
+ return;
+ }
+
+ if (event.keyCode === 37 || event.keyCode === 39) {
+ if (controlPanelFocusedElement) {
+ dispatch(ControlPanelContentActions.removeControlPanelContentFocusedElement());
+ }
+
+ if (!focusedElement) {
+ dispatch(addFocusedElement(activeElement));
+ currentActiveTabPositionInArray = menuTabs.indexOf(activeElement);
+ } else {
+ currentActiveTabPositionInArray = menuTabs.indexOf(focusedElement);
+ }
+ }
+
+ if (currentActiveTabPositionInArray === -1) {
+ return;
+ }
+
+ if (event.keyCode === 37) {
+ let newFocusedMenuTab = handleLeftArrowKey(menuTabs, currentActiveTabPositionInArray);
+ dispatch(addFocusedElement(newFocusedMenuTab));
+ } else if (event.keyCode === 39) {
+ let newFocusedMenuTab = handleRightArrowKey(menuTabs, currentActiveTabPositionInArray);
+ dispatch(addFocusedElement(newFocusedMenuTab));
+ } else if (event.keyCode === 13) {
+ if (!controlPanelFocusedElement && focusedElement) {
+ props.history.push({ pathname: focusedElement });
+ dispatch(addActiveElement(focusedElement));
+ dispatch(removeFocusedElement());
+ }
+ }
+ }, [activeElement, focusedElement, controlPanelFocusedElement]);
+
+ useEffect(() => {
+ window.addEventListener("resize", handleTopNav);
+ window.addEventListener("keyup", controlFocusedTabWithCallback);
+ window.addEventListener("scroll", hideMenu);
+
+ return () => {
+ window.removeEventListener("resize", handleTopNav);
+ window.removeEventListener("keyup", controlFocusedTabWithCallback);
+ window.removeEventListener("scroll", hideMenu);
+ };
+ }, [controlFocusedTabWithCallback]);
+
+ useEffect(() => {
+ dispatch(removeFocusedElement());
+ }, [activeElement]);
+
+ useEffect(() => {
+ dispatch(addActiveElement(props.history.location.pathname));
+ }, []);
+
+ const handleLeftArrowKey = (array, indexInArray) => {
+ if (indexInArray === 0) {
+ return array[array.length - 1];
+ } else {
+ return array[indexInArray - 1];
+ }
+ }
+
+ const handleRightArrowKey = (array, indexInArray) => {
+ if (indexInArray === (array.length - 1)) {
+ return array[0];
+ } else {
+ return array[indexInArray + 1];
+ }
+ }
+
+ const handleTopNav = () => {
+ if (document.documentElement.clientWidth < 900) {
+ setState({
+ ...state,
+ menuHeight: 45
+ });
+ } else {
+ setState({
+ ...state,
+ menuHeight: 135
+ });
+ }
+ }
+
+ const hideMenu = () => {
+ if (document.documentElement.clientWidth > 900) {
+ let scrollTop = window.scrollY;
+ let menuHeight = Math.max(45, 135 - scrollTop);
+ setState({ ...state, menuHeight });
+ }
+ }
+
+ const showTopNav = () => {
+ let showTopNav = !state.showTopNav;
+ setState({ ...state, showTopNav });
+ }
+
+ const topNavClassName = () => {
+ if (state.showTopNav) {
+ return "nav-wrapper show-nav";
+ } else {
+ return "nav-wrapper hide-nav";
+ }
+ }
+
+ const topNavMobile = () => {
+ if (state.showTopNav) {
+ return "mobile-top-nav-wrapper show";
+ } else {
+ return "mobile-top-nav-wrapper hide";
+ }
+ }
+ const topNavigation = () => {
+ if (document.documentElement.clientWidth > 900) {
+ return (
+
+
+
+
+
+
+
+ {i18n['Username']}:
+ {`${userName}@${domain}`}
+
+
+
+ {i18n['Password']}:
+ {password || '******'}
+
+
+
+ {i18n['IMAP hostname']}:
+ {state.imapHostName}
+
+
+
+ {i18n['IMAP port']}:
+ {state.imapPort}
+
+
+
+ {i18n['IMAP security']}:
+ {state.imapEncryption}
+
+
+
+ {i18n['IMAP auth method']}:
+ {i18n['Normal password']}
+
+
+
+ {i18n['SMTP hostname']}:
+ {state.smtpHostName}
+
+
+
+ {i18n['SMTP port']}:
+ {state.smtpPort}
+
+
+
+ {i18n['SMTP security']}:
+ {state.smtpEncryption}
+
+
+
+ {i18n['SMTP auth method']}:
+ {i18n['Normal password']}
+
+
+
+ {i18n['Webmail URL']}:
+ {webMail}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ } else {
+ return
+
+ );
+}
+
+export default MainNav;
\ No newline at end of file
diff --git a/web/js/react/src/components/MainNav/MainNav.scss b/web/js/react/src/components/MainNav/MainNav.scss
new file mode 100644
index 000000000..c200c6827
--- /dev/null
+++ b/web/js/react/src/components/MainNav/MainNav.scss
@@ -0,0 +1,28 @@
+.main-nav {
+ width: 100%;
+ height: 249px;
+
+ .nav-wrapper {
+ position: fixed;
+ width: 100%;
+ animation: toggleNav .75s forwards;
+ z-index: 1;
+ }
+}
+
+// Small Devices
+@media (max-width: 900px) {
+ .main-nav {
+ height: 0;
+ }
+
+ @keyframes toggleNav {
+ from {
+ transform: translateY(-150px);
+ }
+
+ to {
+ transform: translateY(50px);
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/MainNav/Mobile/MobileTopNav.jsx b/web/js/react/src/components/MainNav/Mobile/MobileTopNav.jsx
new file mode 100644
index 000000000..ec14f0248
--- /dev/null
+++ b/web/js/react/src/components/MainNav/Mobile/MobileTopNav.jsx
@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import Menu from '../../MainNav/Stat-menu/Menu';
+import Toolbar from '../../MainNav/Toolbar/Toolbar';
+import './MobileTopNav.scss';
+
+class MobileTopNav extends Component {
+ render() {
+ return (
+
+
+ );
+ }
+}
+
+export default MobileTopNav;
\ No newline at end of file
diff --git a/web/js/react/src/components/MainNav/Mobile/MobileTopNav.scss b/web/js/react/src/components/MainNav/Mobile/MobileTopNav.scss
new file mode 100644
index 000000000..c498d360c
--- /dev/null
+++ b/web/js/react/src/components/MainNav/Mobile/MobileTopNav.scss
@@ -0,0 +1,76 @@
+.mobile-top-nav-wrapper.hide {
+ opacity: 0;
+}
+
+.mobile-top-nav-wrapper.show {
+ opacity: 1;
+ position: fixed;
+ width: 100%;
+ height: 100vh;
+ background: white;
+ display: flex;
+ flex-direction: column;
+ animation: showMobileNav forwards .3s;
+ margin-top: 34px;
+
+ > div {
+ height: 33.33%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .toolbar {
+ margin: 0;
+ position: relative;
+ border: none;
+ }
+
+
+ .mobile-stat-menu .menu-wrapper {
+ position: relative;
+ height: auto;
+ min-height: auto;
+
+ .menu-stat {
+ margin: 0;
+ }
+ }
+}
+
+@media (max-width: 900px) {
+ .mobile-toolbar .toolbar {
+ padding: 0 1%;
+ }
+}
+
+@media (max-width: 450px) {
+ .mobile-top-nav-wrapper.show .mobile-menu {
+ padding: 15px 0 0 15px;
+ font-size: 19px;
+ height: 27%;
+
+ > div {
+ width: 50%;
+ height: 100%;
+
+ > div {
+ padding: 2px;
+
+ &:hover {
+ color: #ff6701;
+ }
+ }
+ }
+ }
+}
+
+@keyframes showMobileNav {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
diff --git a/web/js/react/src/components/MainNav/Panel/Notifications/Notifications.jsx b/web/js/react/src/components/MainNav/Panel/Notifications/Notifications.jsx
new file mode 100644
index 000000000..d0f223d40
--- /dev/null
+++ b/web/js/react/src/components/MainNav/Panel/Notifications/Notifications.jsx
@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from 'react';
+import { getAppNotifications, deleteNotification } from '../../../../ControlPanelService/Notifications';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import './Notifications.scss';
+
+const Notifications = () => {
+ const [notifications, setNotifications] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ fetchData();
+ }, []);
+
+ const fetchData = () => {
+ getAppNotifications()
+ .then(res => {
+ if (res.data) {
+ const result = [];
+
+ for (let notification in res.data) {
+ result.push(res.data[notification]);
+ }
+
+ setNotifications(result);
+ setLoading(false);
+ }
+ })
+ .catch(err => console.error(err))
+ }
+
+ const removeNotification = id => {
+ deleteNotification(id)
+ .then(() => {
+ fetchData();
+ })
+ .catch(err => console.error(err));
+ }
+
+ const renderOptions = () => {
+ if (notifications.length) {
+ return notifications.map(item => {
+ return (
+
+
+
+
+ Packages
+ IP
+ Graphs
+ Statistics
+ Log
+
+
+ Updates
+ Firewall
+ File Manager
+ Apps
+ Server
+
+
+
+
+
+
+ {item.TOPIC}
+ removeNotification(item.ID)}>
+
+
+
+
+ {window.GLOBAL.App.Constants.NOTIFICATIONS_EMPTY}
+
+ );
+ }
+ }
+
+ return (
+
+
+
+ );
+};
+
+export default Notifications;
\ No newline at end of file
diff --git a/web/js/react/src/components/MainNav/Panel/Notifications/Notifications.scss b/web/js/react/src/components/MainNav/Panel/Notifications/Notifications.scss
new file mode 100644
index 000000000..eef105360
--- /dev/null
+++ b/web/js/react/src/components/MainNav/Panel/Notifications/Notifications.scss
@@ -0,0 +1,115 @@
+.top-panel .profile-menu {
+ div {
+ width: auto;
+ height: auto;
+ }
+
+ button {
+ cursor: default;
+ background: none;
+ box-shadow: unset;
+ width: 100%;
+ height: 100%;
+
+ &:hover {
+ background: none;
+ }
+
+ &:active, &:focus {
+ outline: none;
+ border: unset;
+ background: unset;
+ background-color: unset;
+ border-color: unset;
+ }
+ }
+
+ .btn-danger:not(:disabled):not(.disabled).active,
+ .btn-danger:not(:disabled):not(.disabled):active,
+ .show>.btn-danger.dropdown-toggle {
+ background-color: unset;
+ border-color: unset;
+ box-shadow: unset;
+ }
+
+ .dropdown-menu {
+ display: none;
+ height: auto;
+ max-height: 75vh;
+ overflow: auto;
+ cursor: default;
+ background: #454545;
+
+ > div {
+ cursor: default;
+ }
+ }
+
+ .dropdown-menu.show {
+ display: flex;
+ flex-direction: column;
+ width: auto;
+ width: 340px;
+ margin: 0;
+
+ .dropdown-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding-left: 0;
+ padding-right: 5px;
+
+ span.title {
+ display: block;
+ width: 100%;
+ padding: 10px 0 0 10px;
+ text-align: left;
+ color: #C4DA5E;
+ }
+
+ span.delete-notification {
+ width: 10px;
+ height: 10px;
+ background: #C4DA5E;
+ border-radius: 50%;
+ cursor: pointer;
+
+ &:hover {
+ border: 2px solid #C4DA5E;
+ background: transparent;
+ }
+ }
+
+ &:hover {
+ background: none;
+ }
+ }
+
+ .dropdown-item + div {
+ text-align: left;
+ width: 100%;
+ padding: 0 10px 20px 10px;
+ color: #ABABAB;
+
+ a {
+ display: contents;
+ color: #5ABDB5;
+
+ &:hover {
+ color: #2CA99B;
+ }
+ }
+ }
+
+ .dropdown-divider {
+ margin: 0;
+ border-color: #555;
+ width: 100%;
+
+ &:last-child {
+ display: none;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/MainNav/Panel/Panel.jsx b/web/js/react/src/components/MainNav/Panel/Panel.jsx
new file mode 100644
index 000000000..00aa169c9
--- /dev/null
+++ b/web/js/react/src/components/MainNav/Panel/Panel.jsx
@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import { addActiveElement } from '../../../actions/MainNavigation/mainNavigationActions';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { logout } from 'src/actions/Session/sessionActions';
+import Notifications from './Notifications/Notifications';
+import { useSelector, useDispatch } from "react-redux";
+import Spinner from 'src/components/Spinner/Spinner';
+import { Link, useHistory } from "react-router-dom";
+import './Panel.scss';
+
+const Panel = props => {
+ const { i18n } = window.GLOBAL.App;
+ const session = useSelector(state => state.session);
+ const { activeElement, focusedElement } = useSelector(state => state.mainNavigation);
+ const dispatch = useDispatch();
+ const history = useHistory();
+ const [loading, setLoading] = useState(false);
+ const [state, setState] = useState({
+ smallNavigationClass: 'small-navigation hidden'
+ });
+
+ const toggleNavigation = event => {
+ props.showTopNav();
+
+ if (state.smallNavigationClass === 'small-navigation hidden') {
+ setState({ ...state, smallNavigationClass: 'small-navigation show' });
+ } else {
+ setState({ ...state, smallNavigationClass: 'small-navigation hidden' });
+ }
+ }
+
+ const className = activeName => {
+ let className = 'top-link';
+
+ if (activeName === activeElement) {
+ className += ' active';
+ }
+
+ if (activeName === focusedElement) {
+ className += ' focus';
+ }
+
+ return className;
+ }
+
+ const handleState = (tab, event) => {
+ event.preventDefault();
+ history.push(tab);
+ dispatch(addActiveElement(tab));
+ }
+
+ const signOut = () => {
+ setLoading(true);
+
+ dispatch(logout())
+ .then(() => {
+ history.push('/login/');
+ setLoading(false);
+ },
+ error => {
+ setLoading(false);
+ console.error(error);
+ });
+ }
+
+ return (
+
+ {loading ? 'Loading' : renderOptions()}
+
+
+ {loading &&
+ );
+}
+
+export default Panel;
\ No newline at end of file
diff --git a/web/js/react/src/components/MainNav/Panel/Panel.scss b/web/js/react/src/components/MainNav/Panel/Panel.scss
new file mode 100644
index 000000000..f90b80fbb
--- /dev/null
+++ b/web/js/react/src/components/MainNav/Panel/Panel.scss
@@ -0,0 +1,258 @@
+.top-panel.small-device {
+ display: none;
+}
+
+.top-panel {
+ display: flex;
+ flex-direction: row;
+ font-size: 12px;
+ position: fixed;
+ width: 100%;
+ text-align: center;
+ color: white;
+ background: #111;
+ height: 34px;
+ align-items: center;
+ padding: 0 13%;
+ z-index: 2;
+
+ .container {
+ display: flex;
+ flex-direction: row;
+ width: 80%;
+ height: 100%;
+
+ .logo .logo-img {
+ background-image: url("/images/sprite.png?1446554103");
+ background-position: -117px -57px;
+ background-repeat: no-repeat;
+ height: 22px;
+ width: 70px;
+ margin-left: -2px;
+
+ &:hover {
+ background-color: transparent;
+ }
+ }
+
+ div {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ a, button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0 5px;
+ width: 100%;
+ height: 100%;
+ text-decoration: none;
+ color: white;
+ }
+
+ button {
+ background: none;
+ border: none;
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+
+ div.active {
+ background: white;
+
+ a, button {
+ color: #f79b44;
+ font-weight: bold;
+
+ &:hover {
+ color: white;
+ }
+
+ &:active {
+ background: #ff6701;
+ color: white;
+ }
+ }
+
+ &:hover {
+ background: #f79b44;
+ }
+ }
+ }
+
+ .left-menu {
+ width: 80%;
+ padding-left: 0;
+
+ div {
+ width: 7rem;
+ height: 100%;
+
+ &:hover {
+ background: #f79b44;
+ }
+ }
+
+ div.logo {
+ img {
+ width: 90%;
+ }
+
+ &:hover {
+ background: transparent;
+ }
+ }
+
+ div.fm {
+ width: 10rem;
+ }
+
+ .top-link.focus {
+ a, button {
+ color: #5edad0;
+ text-decoration: underline;
+ }
+ }
+ }
+
+ .profile-menu {
+ width: 20%;
+
+ div {
+ width: 4rem;
+ height: 100%;
+ }
+
+ div.bell {
+ width: auto;
+ color: #C0E60E;
+
+ svg {
+ border-radius: 30px;
+ width: 25px;
+ height: 25px;
+ padding: 5px;
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.4);
+ }
+
+ &:hover {
+ background: #c0e6198a;
+ }
+ }
+ }
+
+ div + div a {
+ color: #a4abad;
+ font-weight: 700;
+
+ &:hover {
+ color: #ffd62e;
+ }
+
+ &:active {
+ color: #f79b44;
+ }
+ }
+
+ div + div + div a,
+ div + div + div button {
+ color: white;
+ cursor: pointer;
+ font-weight: 100;
+
+ &:hover {
+ color: #C0E60E;
+ }
+
+ &:active {
+ color: #ffd62e;
+ }
+ }
+ }
+}
+
+@media screen and (max-width: 1350px) {
+ .top-panel {
+ padding: 0 10%;
+ }
+}
+
+@media screen and (max-width: 1024px) {
+ .top-panel {
+ padding: 0 5%;
+ }
+}
+
+//Small Devices
+@media (max-width: 900px) {
+ .top-panel {
+ display: none;
+ }
+
+ .top-panel.small-device {
+ display: flex;
+ padding: 0;
+
+ > .container {
+ justify-content: center;
+ align-items: center;
+ width: 30%;
+ }
+
+ .profile-menu {
+ padding-left: 10%;
+ }
+
+ .hamburger {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+
+ .bar {
+ height: 2px;
+ margin: 2px;
+ width: 20px;
+ background: white;
+ }
+ }
+ }
+
+ @keyframes toggleNav {
+ from {
+ transform: translateY(-20px);
+ }
+
+ to {
+ transform: translateY(50px);
+ }
+ }
+}
+
+@media (max-width: 420px) {
+ .top-panel.small-device {
+ .profile-menu {
+ padding: 0;
+ margin-right: 5px;
+
+ .bell {
+ width: 20%;
+ }
+
+ .bell + div {
+ width: 40%;
+ }
+
+ .bell + div + div {
+ width: 40%;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/MainNav/Stat-menu/Menu.jsx b/web/js/react/src/components/MainNav/Stat-menu/Menu.jsx
new file mode 100644
index 000000000..07675b88f
--- /dev/null
+++ b/web/js/react/src/components/MainNav/Stat-menu/Menu.jsx
@@ -0,0 +1,125 @@
+import React, { useEffect } from 'react';
+import { addActiveElement } from '../../../actions/MainNavigation/mainNavigationActions';
+import { useSelector, useDispatch } from "react-redux";
+import { useHistory } from "react-router-dom";
+
+import './Menu.scss';
+
+const className = height => {
+ if (height === 35) {
+ return "menu-stat shadow";
+ } else {
+ return "menu-stat";
+ }
+}
+
+const style = ({ menuHeight, mobile }) => {
+ if (mobile) {
+ return;
+ }
+
+ if (document.documentElement.clientWidth > 900) {
+ return menuHeight
+ } else {
+ return 45;
+ }
+}
+
+const Menu = props => {
+ const session = useSelector(state => state.session);
+ const { activeElement, focusedElement } = useSelector(state => state.mainNavigation);
+ const { user } = useSelector(state => state.session);
+ const { i18n } = window.GLOBAL.App;
+ const dispatch = useDispatch();
+ const history = useHistory();
+
+ useEffect(() => {
+ if (user.LANGUAGE) {
+ localStorage.setItem("language", user.LANGUAGE);
+ }
+ }, [user]);
+
+ const handleState = (tab, event) => {
+ event.preventDefault();
+ history.push(tab);
+ dispatch(addActiveElement(tab));
+ }
+
+ const statClassName = activeName => {
+ return `stat ${activeName === activeElement && 'l-active'} ${activeName === focusedElement && 'focus'}`;
+ }
+
+ return (
+
+
+
+
+
+
+ dispatch(addActiveElement('/list/user/'))}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {session.session.FIREWALL_SYSTEM &&
+
+
}
+ {session.session.FILEMANAGER_KEY && }
+ {session.session.SOFTACULOUS === "yes" && }
+
+
+
+
+ {session.userName}
+
+
+
+
+
+ LOGO
+
+
+
+
+
+
+
+
+
+ {session.userName}
+
+
+
+ );
+}
+
+export default Menu;
\ No newline at end of file
diff --git a/web/js/react/src/components/MainNav/Stat-menu/Menu.scss b/web/js/react/src/components/MainNav/Stat-menu/Menu.scss
new file mode 100644
index 000000000..67def7320
--- /dev/null
+++ b/web/js/react/src/components/MainNav/Stat-menu/Menu.scss
@@ -0,0 +1,211 @@
+.menu-wrapper {
+ position: fixed;
+ width: 100%;
+ font-size: 15px;
+ background: white;
+
+ .menu-stat {
+ display: flex;
+ flex-direction: row;
+ margin-top: 70px;
+ min-height: 45px;
+ max-height: 135px;
+ height: 145px;
+ width: 100%;
+ padding: 0 13%;
+
+ > div {
+ border-bottom: 3px solid white;
+ overflow: hidden;
+ width: 14.3%;
+
+ h3, div {
+ width: 100%;
+ }
+
+ h3 {
+ font-weight: bold;
+ font-size: 14px;
+ text-transform: uppercase;
+ margin-bottom: 30px;
+ }
+
+ div {
+ display: flex;
+ justify-content: space-between;
+ font-size: 12px;
+ color: #a0a0a0;
+ text-align: left;
+
+ > span:nth-child(1) {
+ width: 120px;
+ }
+
+ > span:nth-child(2) {
+ width: 80px;
+ padding-left: 10px;
+ }
+ }
+ }
+
+ .stat {
+ a, button {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ color: black;
+ text-decoration: none;
+ text-align: left;
+ }
+
+ button {
+ background: none;
+ border: none;
+ padding: 0;
+ }
+
+ h3 {
+ font-size: 14px;
+ }
+
+ &:hover {
+ cursor: pointer;
+ border-bottom: 3px solid #ff6701;
+
+ h3 {
+ color: #ff6701;
+ }
+
+ .stats {
+ overflow: hidden;
+ }
+ }
+
+ &:active {
+ border-color: #f72b44;
+
+ h3 {
+ color: #f72b44;
+ }
+ }
+
+ .stats {
+ display: flex;
+ flex-direction: column;
+ padding-left: 0;
+ }
+ }
+
+ .stat.last {
+ flex: 1;
+ }
+
+ .l-active {
+ border-bottom: 3px solid #ff6701;
+
+ h3 {
+ color: #ff6701;
+ font-size: 18px;
+ margin-bottom: 25px;
+ }
+ }
+
+ .stat.focus {
+ border-bottom: 3px solid #5edad0 !important;
+
+ a, h3 {
+ color: #36B3A9 !important;
+ }
+ }
+ }
+}
+
+.menu-wrapper.shadow {
+ box-shadow: rgba(200, 200, 200, 0.5);
+}
+
+@media (max-width: 1350px) {
+ .menu-wrapper .menu-stat {
+ padding: 0 10%;
+ }
+}
+
+@media screen and (max-width: 1200px) {
+ .menu-wrapper {
+ padding: 0 10%;
+
+ .menu-stat {
+ padding: 0;
+ }
+ }
+}
+
+@media screen and (max-width: 1024px) {
+ .menu-wrapper {
+ padding: 0 10%;
+ }
+}
+
+@media (max-width: 900px) {
+ .menu-wrapper {
+ padding: 1%;
+
+ .menu-stat {
+ height: auto;
+ min-height: auto;
+
+ .stat {
+ flex-grow: 1;
+ height: 30px;
+ padding-left: 5px;
+ min-width: 14%;
+ text-align: left;
+
+ h3 {
+ padding: 0;
+ }
+
+ .stats {
+ display: none;
+ }
+ }
+ }
+ }
+}
+
+@media (max-width: 450px) {
+ .main-nav .mobile-top-nav-wrapper.show .mobile-stat-menu {
+ border: 1px solid black;
+ border-width: 1px 0;
+ margin-top: 15px;
+
+ .menu-wrapper {
+ height: 100%;
+ padding: 0;
+
+ .menu-stat {
+ flex-wrap: wrap;
+ max-height: 100%;
+ min-height: 100%;
+
+ .stat {
+ display: flex;
+ align-items: center;
+ border: none;
+ padding: 5px 5px 5px 15px;
+ min-width: 50%;
+ height: auto;
+
+ h3 {
+ margin: 0;
+ }
+ }
+
+ .stat.l-active {
+ background: #ff67010d;
+ }
+ }
+ }
+ }
+}
diff --git a/web/js/react/src/components/MainNav/Toolbar/Checkbox/Checkbox.jsx b/web/js/react/src/components/MainNav/Toolbar/Checkbox/Checkbox.jsx
new file mode 100644
index 000000000..e1277dd1f
--- /dev/null
+++ b/web/js/react/src/components/MainNav/Toolbar/Checkbox/Checkbox.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import './Checkbox.scss';
+
+function toggleAll(props, e) {
+ props.toggleAll(e.target.checked);
+}
+
+const Checkbox = (props) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Checkbox;
\ No newline at end of file
diff --git a/web/js/react/src/components/MainNav/Toolbar/Checkbox/Checkbox.scss b/web/js/react/src/components/MainNav/Toolbar/Checkbox/Checkbox.scss
new file mode 100644
index 000000000..d9bf56ba1
--- /dev/null
+++ b/web/js/react/src/components/MainNav/Toolbar/Checkbox/Checkbox.scss
@@ -0,0 +1,3 @@
+input {
+ border-radius: 0;
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/MainNav/Toolbar/DropdownFilter/DropdownFilter.jsx b/web/js/react/src/components/MainNav/Toolbar/DropdownFilter/DropdownFilter.jsx
new file mode 100644
index 000000000..f4659d164
--- /dev/null
+++ b/web/js/react/src/components/MainNav/Toolbar/DropdownFilter/DropdownFilter.jsx
@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import './DropdownFilter.scss';
+const { i18n } = window.GLOBAL.App;
+
+class DropdownFilter extends Component {
+ state = {
+ usersList: [i18n.Date, i18n.Username, i18n.Disk, i18n.Bandwidth, i18n.Starred],
+ webList: [i18n.Date, i18n.Domain, i18n['IP Addresses'], i18n.Disk, i18n.Bandwidth, i18n.Starred],
+ dnsList: [i18n.Date, i18n.Expire, i18n.Domain, i18n['IP Addresses'], i18n.Records, i18n.Starred],
+ mailList: [i18n.Date, i18n.Domain, i18n.Accounts, i18n.Disk, i18n.Starred],
+ mailAccountList: [i18n.Date, i18n.Accounts, i18n.Disk, i18n.Starred],
+ dbList: [i18n.Date, i18n.Database, i18n.Disk, i18n.User, i18n.Host, i18n.Starred],
+ cronList: [i18n.Date, i18n.Command, i18n.Starred],
+ packagesList: [i18n.Date, i18n['Package Name'], i18n.Starred],
+ internetProtocolsList: [i18n.Date, i18n.IP, i18n.Netmask, i18n.Interface, i18n.Domain, i18n.Owner, i18n.Starred],
+ firewallList: [i18n.Action, i18n.Protocol, i18n.Port, i18n['IP Addresses'], i18n.Comment, i18n.Starred],
+ searchList: [i18n.Date, i18n.Name, i18n.Starred]
+ }
+
+ changeSorting = (type, order) => {
+ this.props.changeSorting(type, order);
+ }
+
+ filterClassName = (sorting, order) => {
+ if (this.props.sorting === sorting && this.props.order === order) {
+ return "dropdown-item active";
+ }
+
+ return "dropdown-item";
+ }
+
+ renderFilters = () => {
+ const { list } = this.props;
+ let activeListFilter = this.state[list];
+
+ return activeListFilter.map((item, index) => {
+ return (
+
+ toggleAll(props, e)} aria-label="Checkbox for following text input" id="checkbox" checked={props.toggled} />
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default DropdownFilter;
\ No newline at end of file
diff --git a/web/js/react/src/components/MainNav/Toolbar/DropdownFilter/DropdownFilter.scss b/web/js/react/src/components/MainNav/Toolbar/DropdownFilter/DropdownFilter.scss
new file mode 100644
index 000000000..8f62ead12
--- /dev/null
+++ b/web/js/react/src/components/MainNav/Toolbar/DropdownFilter/DropdownFilter.scss
@@ -0,0 +1,79 @@
+.btn-group button {
+ border: 0;
+
+ > span {
+ display: inline-block;
+ vertical-align: bottom;
+ margin-left: 5px;
+ height: 100%;
+ width: auto;
+ }
+
+ &::after {
+ display: none;
+ }
+}
+
+.dropdown-menu {
+ padding: 0;
+ border-radius: 0;
+ font-size: 13px;
+ width: 200px;
+
+ ul {
+ padding: 0;
+ margin: 0;
+ display: inline-block;
+ list-style: none;
+ height: auto;
+ width: 100%;
+ color: #333;
+
+ li {
+ display: flex;
+ width: 100%;
+ height: 37.5px;
+ border-top: 1px solid #dbdbdb;
+
+ .arrow-down {
+ float: right;
+ }
+
+ .dropdown-item {
+ &:hover {
+ background: #bdbdbd;
+ }
+ }
+
+ > span:nth-child(1) {
+ width: 75%;
+ padding: 0 5px;
+ }
+
+ > span:nth-child(2) {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 25%;
+ }
+
+ span {
+ padding: 0 5px 0 10px;
+ line-height: 38px;
+ }
+
+ span.active{
+ background: #ffc900;
+ }
+
+ span + span {
+ text-align: center;
+ width: 100px;
+ }
+ }
+
+ li:nth-child(1) {
+ border-width: 0 0 1px 0;
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/MainNav/Toolbar/LeftButton/LeftButton.jsx b/web/js/react/src/components/MainNav/Toolbar/LeftButton/LeftButton.jsx
new file mode 100644
index 000000000..2aa98d985
--- /dev/null
+++ b/web/js/react/src/components/MainNav/Toolbar/LeftButton/LeftButton.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import './LeftButton.scss';
+import { Link } from 'react-router-dom';
+
+const LeftButton = ({ showLeftMenu, list, name, href, onClick = () => { } }) => {
+ const leftMenuClassName = () => {
+ if (!showLeftMenu) {
+ return "l-menu none";
+ }
+
+ if (list === 'server') {
+ return "l-menu server-icon";
+ } else if (list === 'backup-details') {
+ return "l-menu backup-details-icon";
+ }
+
+ return "l-menu";
+ }
+
+ const renderIcon = () => {
+ if (list === 'server') {
+ return
+
+ -
+ {this.renderFilters()}
+
+ {
+ href
+ ? (
+ {renderIcon()}
+ {name}
+ )
+ : ()
+ }
+
+ );
+}
+
+export default LeftButton;
diff --git a/web/js/react/src/components/MainNav/Toolbar/LeftButton/LeftButton.scss b/web/js/react/src/components/MainNav/Toolbar/LeftButton/LeftButton.scss
new file mode 100644
index 000000000..2f9d67ede
--- /dev/null
+++ b/web/js/react/src/components/MainNav/Toolbar/LeftButton/LeftButton.scss
@@ -0,0 +1,63 @@
+.l-menu {
+ transform: translate(35px, 50%);
+
+ a, button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #aacb0c;
+ border-radius: 100%;
+ color: white;
+ width: 45px;
+ height: 43px;
+ outline: none;
+ border: none;
+ text-decoration: none;
+
+ &:hover {
+ background: #c1e411;
+
+ span.add {
+ display: block;
+ }
+ }
+
+ span.add {
+ width: max-content;
+ display: none;
+ padding: 4px 10px 4px 25px;
+ background: #aacb0c;
+ border-radius: 15px;
+ color: white;
+ font-size: 15px;
+ position: absolute;
+ left: 25px;
+ z-index: -1;
+ text-align: right;
+ }
+
+ svg {
+ width: 31px;
+ height: 21px;
+ }
+ }
+}
+
+.l-menu.none {
+ display: none;
+}
+
+.servers-list,
+.exclusions-list {
+ .l-menu {
+ &.server-icon {
+ a, span.add {
+ background: #55c9c0;
+ }
+ }
+
+ &.backup-details-icon {
+ transform: translateX(2px);
+ }
+ }
+}
diff --git a/web/js/react/src/components/MainNav/Toolbar/SearchInput/SearchInput.jsx b/web/js/react/src/components/MainNav/Toolbar/SearchInput/SearchInput.jsx
new file mode 100644
index 000000000..00b2b88c5
--- /dev/null
+++ b/web/js/react/src/components/MainNav/Toolbar/SearchInput/SearchInput.jsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import './SearchInput.scss';
+
+const SearchInput = props => {
+ const [searchTerm, setSearchTerm] = useState('');
+ let inputElement = useRef(null);
+
+ const handleClick = () => {
+ if (searchTerm && searchTerm !== '') {
+ return props.handleSearchTerm(searchTerm);
+ }
+
+ return;
+ }
+
+ useEffect(() => {
+ window.addEventListener("keyup", focusInput);
+
+ return () => window.removeEventListener("keyup", focusInput);
+ }, []);
+
+ const focusInput = event => {
+ if (event.keyCode === 70) {
+ return inputElement.current.focus();
+ }
+ }
+
+ return (
+
+ setSearchTerm(e.target.value)} ref={inputElement} />
+
+
+ );
+}
+
+export default SearchInput;
\ No newline at end of file
diff --git a/web/js/react/src/components/MainNav/Toolbar/SearchInput/SearchInput.scss b/web/js/react/src/components/MainNav/Toolbar/SearchInput/SearchInput.scss
new file mode 100644
index 000000000..d8e18634c
--- /dev/null
+++ b/web/js/react/src/components/MainNav/Toolbar/SearchInput/SearchInput.scss
@@ -0,0 +1,19 @@
+.search-input-form {
+ display: flex;
+ width: 180px;
+
+ input {
+ height: 30px;
+ margin-left: 10px;
+ border-radius: 0;
+ }
+
+ button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 0;
+ border: 1px groove #ffffff;
+ height: 30px;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/MainNav/Toolbar/Select/Select.jsx b/web/js/react/src/components/MainNav/Toolbar/Select/Select.jsx
new file mode 100644
index 000000000..1c79cab31
--- /dev/null
+++ b/web/js/react/src/components/MainNav/Toolbar/Select/Select.jsx
@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { values } from '../../../../ControlPanelService/Select';
+import './Select.scss';
+
+const { i18n } = window.GLOBAL.App;
+const listValues = values(i18n);
+
+class Select extends Component {
+ state = {
+ usersList: listValues.usersList,
+ webList: listValues.webList,
+ dnsList: listValues.dnsList,
+ mailList: listValues.mailList,
+ dbList: listValues.dbList,
+ cronList: listValues.cronList,
+ backupList: listValues.backupList,
+ packagesList: listValues.packagesList,
+ internetProtocolsList: listValues.internetProtocolsList,
+ statisticsList: [],
+ updatesList: listValues.updatesList,
+ firewallList: listValues.firewallList,
+ serverList: listValues.serverList,
+ backupDetailList: listValues.backupDetailList,
+ banList: listValues.banList,
+ selected: '',
+ };
+
+ defaultValue = () => {
+ if (this.props.list === 'statisticsList') {
+ return i18n['show per user'];
+ }
+
+ return i18n['apply to selected'];
+ }
+
+ componentDidMount() {
+ const { list } = this.props;
+
+ this.setState({ list });
+ }
+
+ renderOptions = () => {
+ const { list } = this.props;
+ let activeList = this.state[list];
+
+ if (list === 'statisticsList') {
+ return this.props.users.map((item, index) => { return });
+ } else {
+ return activeList.map((item, index) => { return });
+ }
+ }
+
+ handleSelect = event => {
+ this.setState({ selected: event.target.value });
+ }
+
+ bulkAction = () => {
+ this.props.bulkAction(this.state.selected);
+ }
+
+ render() {
+ return (
+
+
+
+ );
+ }
+}
+
+export default Select;
\ No newline at end of file
diff --git a/web/js/react/src/components/MainNav/Toolbar/Select/Select.scss b/web/js/react/src/components/MainNav/Toolbar/Select/Select.scss
new file mode 100644
index 000000000..95104561f
--- /dev/null
+++ b/web/js/react/src/components/MainNav/Toolbar/Select/Select.scss
@@ -0,0 +1,7 @@
+.select-wrapper {
+ display: flex;
+
+ select, button {
+ border-radius: 0;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/MainNav/Toolbar/Toolbar.jsx b/web/js/react/src/components/MainNav/Toolbar/Toolbar.jsx
new file mode 100644
index 000000000..8fce58e5e
--- /dev/null
+++ b/web/js/react/src/components/MainNav/Toolbar/Toolbar.jsx
@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import './Toolbar.scss';
+
+class Toolbar extends Component {
+ state = {
+ toolbarHeight: 205
+ }
+
+ componentDidMount() {
+ window.addEventListener("resize", this.handleToolbar);
+ document.addEventListener("scroll", this.changeToolbarHeight);
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener("resize", this.handleToolbar);
+ document.removeEventListener("scroll", this.changeToolbarHeight);
+ }
+
+ handleToolbar = () => {
+ if (document.documentElement.clientWidth < 900) {
+ this.setState({
+ toolbarHeight: 115
+ });
+ } else {
+ this.setState({
+ toolbarHeight: 205
+ });
+ }
+ }
+
+ changeToolbarHeight = () => {
+ if (document.documentElement.clientWidth > 900) {
+ let scrollTop = window.scrollY;
+ let toolbarHeight = Math.max(115, 205 - scrollTop);
+ this.setState({ toolbarHeight });
+ }
+ }
+
+ className = () => {
+ const { className } = this.props;
+
+ if (className === "justify-right") {
+ return this.state.toolbarHeight === 115 ? "toolbar t-shadow " + className : "toolbar " + className;
+ }
+
+ return this.state.toolbarHeight === 115 ? "toolbar t-shadow" : "toolbar";
+ }
+
+ style = () => {
+ if (this.props.mobile) {
+ return;
+ }
+
+ if (document.documentElement.clientWidth > 900) {
+ return { marginTop: this.state.toolbarHeight };
+ } else {
+ return { marginTop: 145 };
+ }
+ }
+
+ render() {
+ return (
+
+
+
+
+ {this.props.children}
+
+ );
+ }
+}
+
+export default Toolbar;
\ No newline at end of file
diff --git a/web/js/react/src/components/MainNav/Toolbar/Toolbar.scss b/web/js/react/src/components/MainNav/Toolbar/Toolbar.scss
new file mode 100644
index 000000000..6949d0b92
--- /dev/null
+++ b/web/js/react/src/components/MainNav/Toolbar/Toolbar.scss
@@ -0,0 +1,193 @@
+.toolbar {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ background: white;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ z-index: 1;
+ padding: 0 13%;
+ border-bottom: 1px solid #e0e0e0;
+ padding-top: 5px;
+
+ .r-menu {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ a.button-extra, button.button-extra {
+ background: none;
+ border: none;
+ padding: 0 0.75rem;
+ text-decoration: none;
+ color: rgb(129, 125, 125);
+ font-size: 14px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &:hover {
+ color: rgb(78, 76, 76);
+ }
+ }
+
+ .input-group .input-group-prepend {
+ height: 30px;
+ margin-right: 15px;
+
+ div, span {
+ padding-left: 0;
+ background: none;
+ border: none;
+ }
+
+ label {
+ margin-bottom: 0;
+ }
+ }
+
+ #inputGroupSelect04 {
+ height: 30px;
+ padding-top: 2px;
+ outline: none;
+
+ &:focus {
+ outline: none;
+ box-shadow: none;
+ }
+ }
+
+ select + div {
+ &:focus {
+ outline: none;
+ }
+
+ &:hover {
+ background: #b3b8bd;
+ }
+
+ button {
+ border-color: #ced4da;
+ }
+ }
+
+ .input-group-append {
+ height: 30px;
+
+ button {
+ padding-top: 3px;
+ }
+ }
+
+ .btn:focus, button:focus, .button:focus {
+ outline: none;
+ box-shadow: none;
+ border-color: none;
+ }
+
+ .btn.btn-sm {
+ height: 30px;
+ margin-left: 15px;
+
+ &:hover {
+ color: #212529;
+ background-color: white;
+ border-color: none ;
+ }
+
+ &:active {
+ background: white;
+ }
+
+ div {
+ padding-top: 3px;
+ }
+ }
+
+ .btn-group.show .btn-outline-secondary {
+ background-color: white;
+ color: #212529;
+
+ &:hover {
+ background-color: white;
+ }
+ }
+ }
+}
+
+.toolbar.justify-right {
+ justify-content: flex-end;
+
+ .r-menu > div > * {
+ margin: 0 10px;
+ }
+}
+
+.toolbar.t-shadow {
+ box-shadow: rgba(200, 200, 200, 0.5) 0px 5px 3px 0px;
+}
+
+@media (max-width: 1350px) {
+ .toolbar {
+ padding: 5px 10% 0;
+ }
+}
+
+@media (max-width: 450px) {
+ .mobile-toolbar .toolbar {
+ display: flex;
+ flex-direction: column-reverse;
+ padding-bottom: 5px;
+ height: 100%;
+
+ .r-menu {
+ height: 50%;
+ margin-top: 15px;
+
+ .input-group {
+ > div:nth-child(1) {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ margin: 15px 0;
+ }
+
+ select {
+ margin-left: 100px;
+ }
+
+ select + div {
+ margin-right: 85px;
+ }
+
+ > .btn-group {
+ width: 60%;
+ margin-left: 75px;
+ margin-top: 15px;
+ }
+ }
+ }
+
+ .l-menu {
+ display: flex;
+ flex-direction: column-reverse;
+ justify-content: flex-end;
+ align-items: center;
+ transform: none;
+ height: 50%;
+ margin-top: 40px;
+
+ button {
+ width: 30px;
+ height: 30px;
+
+ svg {
+ width: 17px;
+ height: 30px;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Menu/Menu.jsx b/web/js/react/src/components/Menu/Menu.jsx
new file mode 100644
index 000000000..89e0174c1
--- /dev/null
+++ b/web/js/react/src/components/Menu/Menu.jsx
@@ -0,0 +1,183 @@
+import React, { Component } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import './Menu.scss';
+
+class Menu extends Component {
+
+ componentDidMount = () => {
+ document.addEventListener("keydown", this.hotKeys);
+ }
+
+ componentWillUnmount = () => {
+ document.removeEventListener("keydown", this.hotKeys);
+ }
+
+ newFile = () => {
+ this.props.openModal("Add file");
+ }
+
+ newDirectory = () => {
+ this.props.openModal("Add directory");
+ }
+
+ delete = () => {
+ const { selection, openModal, cursor } = this.props;
+ if (selection.length === 0) {
+ if (cursor === 0) {
+ openModal("Nothing selected");
+ } else {
+ openModal("Delete");
+ }
+ } else {
+ openModal("Delete", selection.length);
+ }
+ }
+
+ rename = () => {
+ if (this.props.cursor === 0) {
+ this.props.openModal("Nothing selected");
+ } else {
+ this.props.openModal("Rename");
+ }
+ }
+
+ permissions = () => {
+ if (this.props.cursor === 0) {
+ this.props.openModal("Nothing selected");
+ } else {
+ this.props.openModal("Permissions");
+ }
+ }
+
+ move = () => {
+ const { selection, openModal, cursor } = this.props;
+ if (selection.length === 0) {
+ if (cursor === 0) {
+ openModal("Nothing selected");
+ } else {
+ openModal("Move");
+ }
+ } else {
+ openModal("Move", selection.length);
+ }
+ }
+
+ archive = () => {
+ const { selection, openModal, cursor } = this.props;
+
+ if (selection.length === 0) {
+ if (cursor === 0) {
+ openModal("Nothing selected");
+ } else {
+ openModal("Archive");
+ }
+ } else {
+ openModal("Archive", selection.length);
+ }
+ }
+
+ extract = () => {
+ if (this.props.cursor === 0) {
+ this.props.openModal("Nothing selected");
+ } else {
+ this.props.openModal("Extract");
+ }
+ }
+
+ copy = () => {
+ const { selection, openModal, cursor } = this.props;
+ if (selection.length === 0) {
+ if (cursor === 0) {
+ openModal("Nothing selected");
+ } else {
+ openModal("Copy");
+ }
+ } else {
+ openModal("Copy", selection.length);
+ }
+ }
+
+ upload = (e) => {
+ if (e.target.files.length === 0) {
+ return;
+ }
+
+ this.props.upload(e.target.files);
+ }
+
+ download = () => {
+ if (this.props.cursor === 0) {
+ this.props.openModal("Nothing selected");
+ } else if (this.props.itemType === "d") {
+ this.props.openModal("Nothing selected", null, true);
+ } else {
+ this.props.download();
+ }
+ }
+
+ hotKeys = (e) => {
+ if (this.props.modalVisible) {
+ return;
+ }
+
+ if (e.shiftKey && e.keyCode === 117) {
+ this.rename();
+ }
+
+ switch (e.keyCode) {
+ case 46: return this.delete();
+ case 65: return this.archive();
+ case 68: return this.download();
+ case 77: return this.move();
+ case 78: return this.newFile();
+ case 85: return this.inputFile.click();
+ case 113: return this.rename();
+ case 115: return this.permissions();
+ case 116: return this.copy();
+ case 118: return this.newDirectory();
+ case 119: return this.delete();
+ default: break;
+ }
+ }
+
+ render() {
+ let matchArchive = this.props.name.match(/.zip|.tgz|.tar.gz|.gzip|.tbz|.tar.bz|.gz|.zip|.tar|.rar/g);
+ const { i18n } = window.GLOBAL.App;
+
+ return (
+
+
+ );
+ }
+}
+
+export default Menu;
\ No newline at end of file
diff --git a/web/js/react/src/components/Menu/Menu.scss b/web/js/react/src/components/Menu/Menu.scss
new file mode 100644
index 000000000..0291028c6
--- /dev/null
+++ b/web/js/react/src/components/Menu/Menu.scss
@@ -0,0 +1,116 @@
+.menu {
+ display: flex;
+ background: #f8f9fa;
+ height: 40px;
+
+ .logo {
+ padding-left: 5px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ img {
+ width: 80%;
+ }
+ }
+
+ .btn-group {
+ padding: 0;
+ margin: 0;
+ font-size: 17px;
+ border-radius: 0;
+ background: #F8F9FA;
+
+ .small {
+ display: none;
+ }
+
+ #upload {
+ line-height: 0;
+ margin-top: 7px;
+ margin-bottom: 7px;
+ padding-top: 8px;
+ padding-bottom: 7px;
+ margin-left: 2px;
+ color: white;
+ border-radius: 4px;
+ background: #AACC0D;
+
+ &:hover {
+ color: white;
+ background: rgb(184, 221, 17);
+ }
+ }
+
+ button {
+ text-transform: uppercase;
+ font-size: 12px;
+ margin: 2px;
+ padding-top: 11px;
+ padding-bottom: 12px;
+ margin-top: 0;
+ margin-bottom: 0;
+ margin-right: 25px;
+ text-align: center;
+
+ &:hover {
+ color: rgb(1, 148, 148);
+ }
+
+ &:focus {
+ box-shadow: none;
+ outline: none;
+ }
+ }
+
+ .btn-hidden {
+ display: none;
+ }
+
+ .upload {
+ display: none;
+ }
+
+ .delete:hover{
+ color: rgb(221, 57, 57);
+ }
+ }
+}
+
+@media screen and (max-width: 1200px){
+ .menu .btn-group {
+ .small {
+ font-size: 18px;
+ padding-top: 8px;
+ display: inline-block;
+ }
+
+ .icon {
+ color: #777;
+ }
+
+ .small {
+ &:hover {
+ .file, .folder-close, .download, .copy {
+ color: #aacc0d;
+ }
+
+ .italic, .user, .paste {
+ color: #44a8b3;
+ }
+
+ .trash {
+ color: rgb(221, 57, 57);
+ }
+
+ .book {
+ color: rgb(216, 186, 77);
+ }
+ }
+ }
+ }
+
+ .big {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Modal/AddDirectory.jsx b/web/js/react/src/components/Modal/AddDirectory.jsx
new file mode 100644
index 000000000..7bc069ba0
--- /dev/null
+++ b/web/js/react/src/components/Modal/AddDirectory.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const { i18n } = window.GLOBAL.App;
+
+const AddDirectory = (props) => {
+ return (
+
+
+ 
+
+
+
+
+
+ this.inputFile = inputFile} />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {matchArchive ? null : }
+ {matchArchive ? null : }
+ {matchArchive ? : null}
+ {matchArchive ? : null}
+
+
+
+
+
+ );
+}
+
+export default AddDirectory;
\ No newline at end of file
diff --git a/web/js/react/src/components/Modal/AddFile.jsx b/web/js/react/src/components/Modal/AddFile.jsx
new file mode 100644
index 000000000..76af4985b
--- /dev/null
+++ b/web/js/react/src/components/Modal/AddFile.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const { i18n } = window.GLOBAL.App;
+
+const AddFile = (props) => {
+ return (
+
+
+ {i18n['Create directory']}
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default AddFile;
\ No newline at end of file
diff --git a/web/js/react/src/components/Modal/Archive.jsx b/web/js/react/src/components/Modal/Archive.jsx
new file mode 100644
index 000000000..449d06e29
--- /dev/null
+++ b/web/js/react/src/components/Modal/Archive.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+const { i18n } = window.GLOBAL.App;
+
+const Archive = (props) => {
+ return (
+
+
+ {i18n['Create file']}
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Archive;
\ No newline at end of file
diff --git a/web/js/react/src/components/Modal/Copy.jsx b/web/js/react/src/components/Modal/Copy.jsx
new file mode 100644
index 000000000..298a00c2c
--- /dev/null
+++ b/web/js/react/src/components/Modal/Copy.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+const Copy = (props) => {
+ const { Constants } = window.GLOBAL.App;
+
+ return (
+
+ {props.items > 0 ?
+
+ {i18n.Compress} ({props.items})?
: +{i18n.Compress} "{props.fName}"?
} +
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Copy;
\ No newline at end of file
diff --git a/web/js/react/src/components/Modal/Delete.jsx b/web/js/react/src/components/Modal/Delete.jsx
new file mode 100644
index 000000000..181ef9600
--- /dev/null
+++ b/web/js/react/src/components/Modal/Delete.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const Delete = (props) => {
+ const { Constants } = window.GLOBAL.App;
+
+ return (
+
+ {props.items > 0 ?
+
+ {Constants.FM_COPY_BULK} ({props.items}) {Constants.FM_INTO_KEYWORD}:
: +{Constants.FM_COPY} "{props.fName}" {Constants.FM_INTO_KEYWORD}:
} +
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Delete;
\ No newline at end of file
diff --git a/web/js/react/src/components/Modal/Extract.jsx b/web/js/react/src/components/Modal/Extract.jsx
new file mode 100644
index 000000000..3698fdce0
--- /dev/null
+++ b/web/js/react/src/components/Modal/Extract.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Extract = (props) => {
+ const { Constants } = window.GLOBAL.App;
+
+ return (
+
+ {props.items > 0 ?
+
+ {Constants.FM_CONFIRM_DELETE_BULK} ({props.items}) ?
: +{Constants.FM_CONFIRM_DELETE} "{props.fName}"?
} +
+
+
+
+
+
+ );
+}
+
+export default Extract;
\ No newline at end of file
diff --git a/web/js/react/src/components/Modal/Modal.jsx b/web/js/react/src/components/Modal/Modal.jsx
new file mode 100644
index 000000000..ff71a69db
--- /dev/null
+++ b/web/js/react/src/components/Modal/Modal.jsx
@@ -0,0 +1,94 @@
+import React, { Component } from 'react';
+import AddFile from './AddFile';
+import AddDirectory from './AddDirectory';
+import Rename from './Rename';
+import Delete from './Delete';
+import NothingSelected from './NothingSelected';
+import Permissions from './Permissions';
+import Move from './Move';
+import Archive from './Archive';
+import Extract from './Extract';
+import Copy from './Copy';
+import './Modal.scss';
+import Replace from './Replace';
+
+class Modal extends Component {
+
+ componentDidMount = () => {
+ window.addEventListener("click", this.closeOutside);
+ document.addEventListener("keydown", this.hotkeys);
+ }
+
+ componentWillUnmount = () => {
+ window.removeEventListener("click", this.closeOutside);
+ document.removeEventListener("keydown", this.hotkeys);
+ }
+
+ hotkeys = (e) => {
+ if (e.keyCode === 27) {
+ this.closeModal();
+ } else if (e.keyCode === 13) {
+ this.saveAndClose();
+ }
+ }
+
+ saveAndClose = () => {
+ this.props.onClick();
+ this.props.onClose();
+ }
+
+ changePermissions = (permissions) => {
+ this.props.onChangePermissions(permissions);
+ }
+
+ replace = (file) => {
+ this.props.onClick(file);
+ this.props.onClose();
+ }
+
+ onChange = (e) => {
+ this.props.onChangeValue(e.target.value);
+ }
+
+ closeModal = () => {
+ this.props.onClose();
+ }
+
+ closeOutside = (e) => {
+ let modal = document.getElementById("modal");
+ if (e.target === modal) {
+ this.props.onClose();
+ }
+ }
+
+ content = () => {
+ const { type, reference, fName, permissions, items, path, files, notAvailable } = this.props;
+ switch (type) {
+ case 'Copy': return
+
+ {Constants.FM_EXTRACT} "{props.fName}"{Constants.FM_INTO_KEYWORD}
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/web/js/react/src/components/Modal/Modal.scss b/web/js/react/src/components/Modal/Modal.scss
new file mode 100644
index 000000000..e36ceac03
--- /dev/null
+++ b/web/js/react/src/components/Modal/Modal.scss
@@ -0,0 +1,184 @@
+$black: #000;
+
+.modal {
+ display: block;
+ text-align: center;
+ position: fixed;
+ z-index: 1;
+ padding-top: 200px;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: $black;
+ background-color: rgba(0,0,0,0.4);
+
+ .modal-content {
+ box-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.5);
+ background: #333;
+ margin: auto;
+ border: 1px solid #888;
+ width: 25%;
+ height: auto;
+ color: white;
+ margin-top: 100px;
+
+ .modal-body {
+ margin-bottom: 40px;
+
+ input {
+ background: #333;
+ border: 1px solid #111;
+ color: white;
+ margin-top: 10px;
+ width: 85%;
+ }
+ }
+
+ .modal-header {
+ border-bottom: none;
+ padding-bottom: 0;
+ word-break: break-word;
+
+ h3 {
+ color: #EBE697;
+ }
+
+ .replace {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ }
+
+ .quot {
+ color: rgb(182, 120, 28);
+ }
+ }
+
+ .modal-footer {
+ border-top: 1px solid #555;
+
+ button {
+ color: white;
+ border-color: none;
+ background: none;
+ text-transform: uppercase;
+ font-size: 12px;
+
+ &:focus {
+ outline: none;
+ box-shadow: none;
+ }
+ }
+
+ button.btn-danger {
+ border-color: transparent;
+
+ &:focus {
+ outline: none;
+ border: none;
+ }
+ }
+
+ button.btn-danger:hover {
+ background: #00cccb;
+ border-color: #00cccb;
+ }
+
+ button + button {
+ padding: 6px 30px;
+ background: #CACE33;
+ border-color: #CACE33;
+
+ &:hover {
+ background: #00cccb;
+ border-color: #00cccb;
+ color: white;
+ }
+ }
+ }
+
+ .header .quot {
+ color: rgb(182, 120, 28);
+ }
+
+ .close {
+ top: 0;
+ right: 0;
+ color: $black;
+ }
+ }
+
+ .nothing-selected {
+ h3 {
+ padding: 15px;
+ }
+
+ .modal-footer {
+ margin-top: 20px;
+
+ button {
+ background: #d9534f;
+ border-color: #d9534f;
+ color: white;
+ }
+ }
+ }
+
+ .delete .modal-header {
+ border-bottom: none;
+ padding-bottom: 30px;
+
+ .close {
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ }
+ }
+
+ .permissions {
+ height: auto;
+ width: 30%;
+ margin-top: 0;
+
+ .error, &:focus {
+ border: 1px solid red;
+ }
+
+ input[type="text"] {
+ size: 40px;
+ width: 60px;
+ margin: auto auto 10px auto;
+ display: inline-block;
+ }
+
+ .header h3 {
+ margin-bottom: 40px;
+ font-size: 30px;
+ }
+
+ form {
+ margin-top: 20px;
+
+ div {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin-bottom: 30px;
+ margin-left: 40px;
+
+ label {
+ display: inherit;
+ cursor: pointer;
+ font-size: 18px;
+
+ input {
+ margin-top: 6px;
+ margin-right: 5px;
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Modal/Move.jsx b/web/js/react/src/components/Modal/Move.jsx
new file mode 100644
index 000000000..9589c4532
--- /dev/null
+++ b/web/js/react/src/components/Modal/Move.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+const Move = (props) => {
+ const { Constants } = window.GLOBAL.App;
+
+ return (
+
+ {this.content()}
+
+
+
+ );
+}
+
+export default Move;
\ No newline at end of file
diff --git a/web/js/react/src/components/Modal/NothingSelected.jsx b/web/js/react/src/components/Modal/NothingSelected.jsx
new file mode 100644
index 000000000..2876719a3
--- /dev/null
+++ b/web/js/react/src/components/Modal/NothingSelected.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const NothingSelected = (props) => {
+ const { Constants } = window.GLOBAL.App;
+
+ return (
+
+ {props.items > 0 ?
+
+ {Constants.FM_MOVE_BULK} ({props.items}) {Constants.FM_INTO_KEYWORD}:
: +{Constants.FM_MOVE} "{props.fName}" {Constants.FM_INTO_KEYWORD}:
} +
+
+
+
+
+
+
+
+
+ );
+}
+
+export default NothingSelected;
\ No newline at end of file
diff --git a/web/js/react/src/components/Modal/Permissions.jsx b/web/js/react/src/components/Modal/Permissions.jsx
new file mode 100644
index 000000000..ad064ad93
--- /dev/null
+++ b/web/js/react/src/components/Modal/Permissions.jsx
@@ -0,0 +1,144 @@
+import React, { Component } from 'react';
+import classNames from 'classname';
+
+const defaultPermissions = {
+ owner: {
+ read: 0,
+ write: 0,
+ execute: 0,
+ },
+ group: {
+ read: 0,
+ write: 0,
+ execute: 0,
+ },
+ others: {
+ read: 0,
+ write: 0,
+ execute: 0,
+ },
+}
+
+class Permissions extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ permissions: this.decode(this.props.permissions) || defaultPermissions,
+ inputInvalid: false,
+ }
+ }
+
+ inArray(number, array) {
+ return !!~array.indexOf(number);
+ }
+
+ decodeSingleNumber = (string) => {
+ const number = parseInt(string, 0);
+
+ return {
+ read: this.inArray(number, [4, 5, 6, 7]) ? 4 : 0,
+ write: this.inArray(number, [2, 3, 6, 7]) ? 2 : 0,
+ execute: this.inArray(number, [1, 3, 5, 7]) ? 1 : 0
+ };
+ }
+
+ isValid(numbers = '') {
+ if (numbers.length !== 3 || numbers === '000' || numbers.match(/[A-Za-z]/)) {
+ return false;
+ }
+
+ return numbers.split('').find((number) => parseInt(number, 0) < 0 || parseInt(number, 0) > 7) === undefined;
+ }
+
+ decode(numbers) {
+ if (!this.isValid(numbers)) {
+ return null;
+ }
+
+ const numbersArray = numbers.split('');
+ const result = numbersArray.map(this.decodeSingleNumber);
+ return { owner: result[0], group: result[1], others: result[2] };
+ }
+
+ encode() {
+ function sumPermissions(permissionObject) {
+ return Object.values(permissionObject).map((number) => parseInt(number, 0)).reduce((acc, n) => acc + n, 0);
+ }
+ return ['owner', 'group', 'others'].reduce((acc, role) => {
+ const roleObject = this.state.permissions[role];
+ return acc + sumPermissions(roleObject);
+ }, '');
+ }
+
+ onChangeForm = (event) => {
+ const checkbox = event.target;
+ const [role, permissionName] = checkbox.name.split('_');
+ this.setState({
+ permissions: {
+ ...this.state.permissions,
+ [role]: {
+ ...this.state.permissions[role],
+ [permissionName]: checkbox.checked ? checkbox.value : 0,
+ }
+ }
+ }, (state) => {
+ this.inputRef.value = this.encode();
+ this.props.changePermissions(this.inputRef.value);
+ });
+ }
+
+ handleInputChange = (event) => {
+ const value = event.target.value;
+ if (!this.isValid(value)) {
+ return this.setState({ inputInvalid: true });
+ }
+
+ this.setState({
+ permissions: this.decode(value),
+ inputInvalid: false,
+ });
+ this.props.changePermissions(this.inputRef.value);
+ }
+
+ render() {
+ const { Constants } = window.GLOBAL.App;
+ const { inputInvalid } = this.state;
+ const { close, save, fName } = this.props;
+ const inputClasses = classNames({
+ 'form-control total': true,
+ 'error': inputInvalid,
+ });
+
+ return (
+
+ {props.notAvailable ?
+ {Constants.FM_DirDownloadNotAvailable}
:{Constants.FM_NO_FILE_SELECTED}
} +
+
+
+
+
+ );
+ }
+}
+
+export default Permissions;
\ No newline at end of file
diff --git a/web/js/react/src/components/Modal/Rename.jsx b/web/js/react/src/components/Modal/Rename.jsx
new file mode 100644
index 000000000..01b1158b7
--- /dev/null
+++ b/web/js/react/src/components/Modal/Rename.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Rename = (props) => {
+ const { Constants } = window.GLOBAL.App;
+
+ return (
+
+
+
+ this.inputRef = ref} onChange={this.handleInputChange} maxLength="3" />
+ {Constants.FM_CHMOD} "{fName}"
+
+
+
+
+
+
+ );
+}
+
+export default Rename;
\ No newline at end of file
diff --git a/web/js/react/src/components/Modal/Replace.jsx b/web/js/react/src/components/Modal/Replace.jsx
new file mode 100644
index 000000000..f75de46ef
--- /dev/null
+++ b/web/js/react/src/components/Modal/Replace.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+const Replace = (props) => {
+ return (
+
+
+ {Constants.FM_RENAME} "{props.fName}"
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Replace;
\ No newline at end of file
diff --git a/web/js/react/src/components/Package/Add/AddPackage.jsx b/web/js/react/src/components/Package/Add/AddPackage.jsx
new file mode 100644
index 000000000..a8595ed69
--- /dev/null
+++ b/web/js/react/src/components/Package/Add/AddPackage.jsx
@@ -0,0 +1,262 @@
+import React, { useEffect, useState } from 'react';
+
+import TextInputWithExtraButton from '../../ControlPanel/AddItemLayout/Form/TextInputWithExtraButton/TextInputWithExtraButton';
+import { addActiveElement, removeFocusedElement } from "../../../actions/MainNavigation/mainNavigationActions";
+import { getAdditionalPackageInfo, addPackage } from '../../../ControlPanelService/Package';
+import NameServers from '../../ControlPanel/AddItemLayout/Form/NameServers/NameServers';
+import SelectInput from '../../ControlPanel/AddItemLayout/Form/SelectInput/SelectInput';
+import TextInput from '../../ControlPanel/AddItemLayout/Form/TextInput/TextInput';
+import AddItemLayout from '../../ControlPanel/AddItemLayout/AddItemLayout';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Toolbar from '../../MainNav/Toolbar/Toolbar';
+import { useHistory } from 'react-router-dom';
+import Spinner from '../../Spinner/Spinner';
+import { useDispatch } from 'react-redux';
+
+import './AddPackage.scss';
+import { Helmet } from 'react-helmet';
+
+const AddPackage = props => {
+ const token = localStorage.getItem("token");
+ const { i18n } = window.GLOBAL.App;
+ const dispatch = useDispatch();
+ const history = useHistory();
+ const [state, setState] = useState({
+ loading: false,
+ okMessage: '',
+ errorMessage: '',
+ webTemplates: [],
+ webSystem: '',
+ backendTemplates: [],
+ backendSystem: '',
+ proxySystem: '',
+ proxyTemplates: [],
+ dnsTemplates: [],
+ dnsSystem: '',
+ sshTemplates: [],
+ usersNS: [],
+ webDomains: '1',
+ webAliases: '1',
+ dnsDomains: '1',
+ dnsRecords: '1',
+ mailDomains: '1',
+ mailAccounts: '1',
+ databases: '1',
+ cronJobs: '1',
+ quota: '1000',
+ bandwidth: '1000',
+ });
+
+ useEffect(() => {
+ dispatch(addActiveElement('/list/package/'));
+ dispatch(removeFocusedElement());
+
+ setState({ ...state, loading: true });
+
+ fetchData();
+ }, []);
+
+ const fetchData = () => {
+ getAdditionalPackageInfo()
+ .then(result => {
+ setState({
+ ...state,
+ webTemplates: result.data.web_templates,
+ webSystem: result.data.web_system,
+ backendTemplates: result.data.backend_templates,
+ backendSystem: result.data.web_backend,
+ dnsTemplates: result.data.dns_templates,
+ dnsSystem: result.data.dns_system,
+ proxySystem: result.data.proxy_system,
+ proxyTemplates: result.data.proxy_templates,
+ sshTemplates: result.data.ssh_access,
+ loading: false
+ });
+ })
+ .catch(err => console.err(err));
+ }
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let newPackage = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ newPackage[name] = value;
+ }
+
+ newPackage['token'] = token;
+ newPackage['ok'] = 'Add';
+
+ if (Object.keys(newPackage).length !== 0 && newPackage.constructor === Object) {
+ setState({ ...state, loading: true });
+
+ addPackage(newPackage)
+ .then(result => {
+ if (result.status === 200) {
+ const { error_msg, ok_msg } = 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 });
+ } else {
+ setState({ ...state, loading: false })
+ }
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ const toggleUnlimited = inputName => {
+ let inputNameToUpdate = state[inputName];
+ let defaultValue;
+
+ if (inputName === 'quota' || inputName === 'bandwidth') {
+ defaultValue = '1000';
+ } else {
+ defaultValue = '1';
+ }
+
+ if (inputNameToUpdate !== 'unlimited') {
+ setState({ ...state, [inputName]: 'unlimited' });
+ } else {
+ setState({ ...state, [inputName]: defaultValue });
+ }
+ }
+
+ return (
+
+ {props.files.length > 1 ?
+ :
+
+ }
+
+ These files already exist
+ {props.files.map(item => + "{item.name}" + )} +This file already exists
+ "{props.files[0].name}" +
+
+
+
+
+
+ {`Vesta - ${i18n.PACKAGE}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default AddPackage;
\ No newline at end of file
diff --git a/web/js/react/src/components/Package/Add/AddPackage.scss b/web/js/react/src/components/Package/Add/AddPackage.scss
new file mode 100644
index 000000000..b91b760d2
--- /dev/null
+++ b/web/js/react/src/components/Package/Add/AddPackage.scss
@@ -0,0 +1,35 @@
+.edit-template.add-package {
+ form {
+ label.label-wrapper {
+ display: flex;
+ align-items: flex-end;
+ width: fit-content;
+
+ span {
+ font-weight: normal;
+ text-transform: uppercase;
+ margin-left: 5px;
+ font-size: 12px;
+ }
+
+ span.lowercase {
+ text-transform: lowercase;
+ }
+ }
+
+ .input-wrapper {
+ display: flex;
+ align-items: center;
+
+ svg {
+ cursor: pointer;
+ color: #bec4ca;
+ margin-left: 10px;
+
+ &:hover {
+ color: #abb1b6;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Package/Edit/EditPackage.jsx b/web/js/react/src/components/Package/Edit/EditPackage.jsx
new file mode 100644
index 000000000..81fec2b19
--- /dev/null
+++ b/web/js/react/src/components/Package/Edit/EditPackage.jsx
@@ -0,0 +1,302 @@
+import React, { useEffect, useState } from 'react';
+
+import TextInputWithExtraButton from '../../ControlPanel/AddItemLayout/Form/TextInputWithExtraButton/TextInputWithExtraButton';
+import { addActiveElement, removeFocusedElement } from "../../../actions/MainNavigation/mainNavigationActions";
+import SelectInput from '../../ControlPanel/AddItemLayout/Form/SelectInput/SelectInput';
+import NameServers from '../../ControlPanel/AddItemLayout/Form/NameServers/NameServers';
+import { getPackageInfo, updatePackage } from '../../../ControlPanelService/Package';
+import TextInput from '../../ControlPanel/AddItemLayout/Form/TextInput/TextInput';
+import AddItemLayout from '../../ControlPanel/AddItemLayout/AddItemLayout';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Spinner from '../../../components/Spinner/Spinner';
+import Toolbar from '../../MainNav/Toolbar/Toolbar';
+import { useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import QS from 'qs';
+
+import './EditPackage.scss';
+import { Helmet } from 'react-helmet';
+
+const EditPackage = props => {
+ const token = localStorage.getItem("token");
+ const { i18n } = window.GLOBAL.App;
+ const history = useHistory();
+ const dispatch = useDispatch();
+ const [state, setState] = useState({
+ data: {},
+ loading: false,
+ errorMessage: '',
+ okMessage: ''
+ });
+
+ useEffect(() => {
+ let queryParams = QS.parse(history.location.search, { ignoreQueryPrefix: true });
+
+ dispatch(addActiveElement('/list/package/'));
+ dispatch(removeFocusedElement());
+
+ if (queryParams.package) {
+ setState({ ...state, loading: true });
+
+ getPackageInfo(queryParams.package)
+ .then(response => {
+ setState({
+ ...state,
+ data: response.data,
+ errorMessage: response.data['error_msg'],
+ okMessage: response.data['ok_msg'],
+ loading: false
+ });
+ })
+ .catch(err => console.error(err));
+ }
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let updatedPackage = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ updatedPackage[name] = value;
+ }
+
+ updatedPackage['token'] = token;
+ updatedPackage['save'] = 'save';
+ updatedPackage['v_package'] = state.data.package;
+
+ if (Object.keys(updatedPackage).length !== 0 && updatedPackage.constructor === Object) {
+ setState({ ...state, loading: true });
+
+ updatePackage(updatedPackage, state.data.package)
+ .then(result => {
+ if (result.status === 200) {
+ const { error_msg, ok_msg } = result.data;
+ setState({ ...state, errorMessage: error_msg || '', okMessage: ok_msg || '', loading: false });
+ history.push('/list/package/');
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ const toggleUnlimited = inputName => {
+ let inputNameToUpdate = state.data[inputName];
+ let defaultValue;
+
+ if (inputName === 'quota' || inputName === 'bandwidth') {
+ defaultValue = '1000';
+ } else {
+ defaultValue = '1';
+ }
+
+ setState({
+ ...state,
+ data: {
+ ...state.data,
+ [inputName]: inputNameToUpdate !== 'unlimited' ? 'unlimited' : defaultValue
+ }
+ });
+ }
+
+ return (
+ {i18n['Adding Package']}
+
+
+ {state.errorMessage ?
+
+
+ {state.okMessage ?
+
+
+ {`Vesta - ${i18n.PACKAGE}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default EditPackage;
\ No newline at end of file
diff --git a/web/js/react/src/components/Package/Edit/EditPackage.scss b/web/js/react/src/components/Package/Edit/EditPackage.scss
new file mode 100644
index 000000000..330d8b738
--- /dev/null
+++ b/web/js/react/src/components/Package/Edit/EditPackage.scss
@@ -0,0 +1,14 @@
+.edit-package {
+ form {
+ .form-group {
+ .input-wrapper {
+ display: flex;
+ align-items: center;
+
+ button {
+ transform: translateX(5px);
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Package/Package.jsx b/web/js/react/src/components/Package/Package.jsx
new file mode 100644
index 000000000..6041a7bf6
--- /dev/null
+++ b/web/js/react/src/components/Package/Package.jsx
@@ -0,0 +1,94 @@
+import React, { } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Container from '../ControlPanel/Container/Container';
+import ListItem from '../ControlPanel/ListItem/ListItem';
+import './Package.scss';
+import { Link } from 'react-router-dom';
+
+const Package = props => {
+ const { data } = props;
+ const { i18n } = window.GLOBAL.App;
+ const token = localStorage.getItem("token");
+
+ const printNameServers = servers => {
+ let serversArray = servers.split(',');
+
+ return serversArray.map(
+ (server, index) => {i18n['Editing Package']}
+
+
+ {state.data.errorMessage ?
+
+
+ {state.okMessage ?
+ {server}
+ );
+ }
+
+ const toggleFav = (starred) => {
+ if (starred) {
+ props.toggleFav(data.NAME, 'add');
+ } else {
+ props.toggleFav(data.NAME, 'delete');
+ }
+ }
+
+ const checkItem = () => {
+ props.checkItem(data.NAME);
+ }
+
+ const handleDelete = () => {
+ props.handleModal(data.delete_conf, `/delete/package?package=${data.NAME}&token=${token}`);
+ }
+
+ return (
+ {data.NAME}
+ {data.FNAME} {data.LNAME}
+
+
+
+
+
+
+
+
+ {i18n['Web Template']}: {data.WEB_TEMPLATE}
+ {i18n['Proxy Template']}: {data.PROXY_TEMPLATE}
+ {i18n['DNS Template']}: {data.DNS_TEMPLATE}
+ {i18n['SSH Access']}: {data.SHELL}
+ {i18n['Web Domains']}: {data.WEB_DOMAINS}
+ {i18n['Web Aliases']}: {data.WEB_ALIASES}
+ {i18n['DNS domains']}: {data.DNS_DOMAINS}
+ {i18n['DNS records']}: {data.DNS_RECORDS}
+ {i18n['Mail Domains']}: {data.MAIL_DOMAINS}
+ {i18n['Mail Accounts']}: {data.MAIL_ACCOUNTS}
+ {i18n.Databases}: {data.DATABASES}
+ {i18n['Cron Jobs']}: {data.CRON_JOBS}
+ {i18n.Backups}: {data.BACKUPS}
+ {i18n.Bandwidth}: {data.BANDWIDTH} {i18n.mb}
+ {i18n.Disk}: {data.DISK_QUOTA} {i18n.mb}
+ {i18n['Name Servers']}: {printNameServers(data.NS)}
+
+
+
+
+ {i18n.edit}
+ {data.FOCUSED ? ↩ :
+
+
+
+
+
+ {button(props.sorting, props.order)}
+
+
+ );
+}
+
+export default Dropdown;
\ No newline at end of file
diff --git a/web/js/react/src/components/Path/Dropdown/Dropdown.scss b/web/js/react/src/components/Path/Dropdown/Dropdown.scss
new file mode 100644
index 000000000..d6f425cfe
--- /dev/null
+++ b/web/js/react/src/components/Path/Dropdown/Dropdown.scss
@@ -0,0 +1,52 @@
+.btn-group button {
+ border: 0;
+}
+
+.dropdown-menu {
+ padding: 0;
+
+ ul {
+ padding: 0;
+ margin: 0;
+ display: inline-block;
+ list-style: none;
+ height: 150px;
+ width: 100%;
+ color: #333;
+
+ li {
+ display: inline-flex;
+ width: 100%;
+ height: 37.5px;
+ border-top: 1px solid #dbdbdb;
+
+ .arrow-down {
+ float: right;
+ }
+
+ .dropdown-item {
+ &:hover {
+ background: #bdbdbd;
+ }
+ }
+
+ span {
+ padding: 0 5px 0 10px;
+ line-height: 38px;
+ }
+
+ span.active{
+ background: #ffc900;
+ }
+
+ span + span {
+ text-align: center;
+ width: 100px;
+ }
+ }
+ }
+}
+
+.lists-container .dropdown-menu.show{
+ transform: translate3d(-57%, 39px, 0px)!important;
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Path/Path.jsx b/web/js/react/src/components/Path/Path.jsx
new file mode 100644
index 000000000..80ca95de4
--- /dev/null
+++ b/web/js/react/src/components/Path/Path.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+
+import Dropdown from './Dropdown/Dropdown';
+import './Path.scss';
+
+const Path = ({ path, isActive, className, openDirectory, changeSorting, sorting, order }) => {
+ const clickablePath = () => {
+ let splitPath = path.split('/');
+ splitPath.splice(0, 3);
+
+ if (path !== window.GLOBAL.ROOT_DIR) {
+ return (
+ splitPath.map((item, index) => openDirectoryHandler(index)}> / {item})
+ );
+ }
+ }
+
+ const openDirectoryHandler = index => {
+ let pathArray = path.split('/');
+
+ if (!isActive) {
+ return;
+ } else {
+ if (index !== undefined) {
+ let newPathArray = pathArray.splice(0, index + 4);
+ let newPath = newPathArray.join('/');
+ openDirectory(newPath);
+ }
+ }
+ }
+
+ return (
+
+
+ );
+}
+
+export default Path;
diff --git a/web/js/react/src/components/Path/Path.scss b/web/js/react/src/components/Path/Path.scss
new file mode 100644
index 000000000..b6befee9d
--- /dev/null
+++ b/web/js/react/src/components/Path/Path.scss
@@ -0,0 +1,159 @@
+$white: #fff;
+
+.path {
+ display: flex;
+ justify-content: space-between;
+ font-size: 15px;
+ padding: 1px 0 0 5px;
+ height: 40px;
+ background: #7b7b7b;
+ color: $white;
+ box-shadow: 0 2px 10px -4px gray;
+
+ .btn-group {
+ width: 75px;
+ margin-left: 15px;
+ background: none;
+ box-shadow: none;
+ background: #7b7b7b;
+
+ .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
+ border-color: #7b7b7b;
+ background-color: #7b7b7b;
+ }
+
+ button {
+ padding-left: 0;
+ padding-right: 5px;
+ color: white;
+ background: #7b7b7b;
+ transition: none;
+
+ span {
+ color: #fff;
+ padding: 0 0 0 5px;
+ }
+
+ &:active, &:focus {
+ background-color: #7b7b7b;
+ border-color: #7b7b7b;
+ }
+ }
+
+ .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
+ box-shadow: none;
+ outline: none;
+ background-color: #7b7b7b;
+ border-color: #7b7b7b;
+ }
+
+ .btn-secondary {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &:hover {
+ color: rgb(1, 148, 148);
+ background: #7b7b7b;
+ border-color: #7b7b7b;
+
+ span {
+ color: rgb(1, 148, 148);
+ }
+ }
+ }
+ }
+
+ .clickable {
+ padding-top: 8px;
+ cursor: pointer;
+
+ &:hover {
+ color: goldenrod;
+ }
+ }
+}
+
+.active-path {
+ display: flex;
+ justify-content: space-between;
+ font-size: 15px;
+ padding: 1px 0 0 5px;
+ height: 40px;
+ background: #333;
+ color: $white;
+ box-shadow: 0 2px 6px -2px gray;
+
+ .clickable-wrapper {
+ display: flex;
+ flex-wrap: nowrap;
+ overflow: auto;
+ }
+
+ .btn-group {
+ width: 75px;
+ background: none;
+ box-shadow: none;
+ background: #333;
+
+ .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
+ border-color: #333;
+ background-color: #333;
+ }
+
+ button {
+ padding-left: 0;
+ padding-right: 5px;
+ color: white;
+ background: #333;
+ transition: none;
+
+ span {
+ color: #fff;
+ padding: 0 0 0 5px;
+ }
+
+ &:active, &:focus {
+ background-color: #333;
+ border-color: #333;
+ }
+ }
+
+ .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
+ box-shadow: none;
+ outline: none;
+ background-color: #333;
+ border-color: #333;
+ }
+
+ .btn-secondary {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &:hover {
+ color: rgb(1, 148, 148);
+ background: #333;
+ border-color: #333;
+
+ span {
+ color: rgb(1, 148, 148);
+ }
+ }
+ }
+ }
+
+ .clickable {
+ padding-top: 8px;
+ cursor: pointer;
+
+ &:hover {
+ color: goldenrod;
+ }
+ }
+}
+
+.clickable-path {
+ display: flex;
+ float: 0 0 auto;
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Preview/Editor/Editor.jsx b/web/js/react/src/components/Preview/Editor/Editor.jsx
new file mode 100644
index 000000000..7dcc57d62
--- /dev/null
+++ b/web/js/react/src/components/Preview/Editor/Editor.jsx
@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from 'react';
+import CodeMirror from 'react-codemirror';
+import './Editor.scss';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/markdown/markdown';
+import 'codemirror/mode/php/php';
+import 'codemirror/mode/css/css';
+import 'codemirror/mode/htmlmixed/htmlmixed';
+import axios from 'axios';
+import Spinner from '../../Spinner/Spinner';
+import { useHistory } from 'react-router-dom';
+import { toast, ToastContainer } from 'react-toastify';
+
+const Editor = ({ close, name }) => {
+ const { i18n } = window.GLOBAL.App;
+ const history = useHistory();
+ const [state, setState] = useState({
+ code: '',
+ loading: false
+ });
+
+ useEffect(() => {
+ document.addEventListener("keydown", hotKey);
+
+ let path = `${history.location.search.substring(6, history.location.search.lastIndexOf('/'))}/${name}`;
+ setState({ ...state, loading: true });
+
+ checkFileType(path)
+ .then(res => {
+ if (res.data.result) {
+ axios.get(`${window.location.origin}/edit/file/?path=${encodePath(path)}`)
+ .then(result => {
+ if (result.data.error) {
+ return showToast(res.data.error);
+ }
+
+ setState({ ...state, code: result.data.content, loading: false });
+ })
+ .catch(err => console.error(err));
+ } else {
+ console.error('Something went wrong with file type!');
+ }
+ })
+ .catch(err => console.error(err));
+
+ return () => {
+ document.removeEventListener("keydown", hotKey);
+ }
+ }, []);
+
+ const checkFileType = path => {
+ return axios.get(`${window.location.origin}/file_manager/fm_api.php?dir=${path}&action=check_file_type`);
+ }
+
+ const encodePath = path => {
+ return path.split('/').join('%2F');
+ }
+
+ const hotKey = e => {
+ if (e.keyCode === 113) {
+ save();
+ }
+ }
+
+ const save = () => {
+ let formData = new FormData();
+ let path = history.location.search.substring(6, history.location.search.lastIndexOf('/'));
+
+ formData.append('save', 'Save');
+ formData.append('contents', state.code);
+
+ setState({ ...state, loading: true });
+ axios.post(`${window.location.origin}/edit/file/?path=${path}%2F${name}`, formData)
+ .then(res => {
+ if (res.data.error) {
+ showToast(res.data.error);
+ } else {
+ showToast('Saved successfully!');
+ }
+ setState({ ...state, loading: false });
+ })
+ .catch(err => console.error(err));
+ }
+
+ const showToast = text => {
+ toast.success(text, {
+ position: "top-center",
+ autoClose: 3000,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true
+ });
+ }
+
+ const updateCode = newCode => {
+ setState({ ...state, code: newCode });
+ }
+
+ const getModeFromFileName = () => {
+ const fileExtension = name.split('.').pop();
+
+ switch (fileExtension) {
+ case 'js': return 'javascript';
+ case 'jsx': return 'javascript';
+ case 'php': return 'php';
+ case 'css': return 'css';
+ case 'scss': return 'css';
+ case 'html': return 'htmlmixed';
+ default: return 'markdown';
+ }
+ }
+
+ let options = {
+ mode: getModeFromFileName(),
+ lineNumbers: true
+ };
+
+ return (
+
+
+ openDirectory(window.GLOBAL.ROOT_DIR)}>{window.GLOBAL.ROOT_DIR}
+ {clickablePath()}
+
+
+
+
+ );
+}
+
+export default Editor;
diff --git a/web/js/react/src/components/Preview/Editor/Editor.scss b/web/js/react/src/components/Preview/Editor/Editor.scss
new file mode 100644
index 000000000..3bb218d12
--- /dev/null
+++ b/web/js/react/src/components/Preview/Editor/Editor.scss
@@ -0,0 +1,64 @@
+.editor {
+ width: 100%;
+
+ .panel-editor {
+ display: flex;
+ justify-content: flex-end;
+ width: 100%;
+ height: 40px;
+ position: absolute;
+ padding: 3px;
+ margin: 0;
+ background: #000000bf;
+ z-index: 4;
+ transition: 0.5s all ease-in-out;
+ border-bottom: 1px solid black;
+ border-radius: 0;
+
+ button {
+ font-size: 17px;
+ height: 98%;
+ margin: 0 0 0 30px;
+ padding: 0 10px;
+
+ &:focus {
+ outline: none;
+ box-shadow: none;
+ }
+ }
+ }
+
+ .close {
+ z-index: 4;
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ font-size: 40px;
+ opacity: 1;
+ color: #000;
+
+ &:hover {
+ color: rgb(139, 139, 139);
+ }
+ }
+
+ .CodeMirror {
+ height: 100vh;
+ padding-top: 4vh;
+
+ .CodeMirror-selected {
+ background:#ACCEF7;
+ }
+
+ .CodeMirror-scroll {
+ font-size: 14px;
+ }
+ }
+
+ .save {
+ font-size: 20px;
+ left: 95%;
+ bottom: 10px;
+ position: absolute;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Preview/Photo/Photo.jsx b/web/js/react/src/components/Preview/Photo/Photo.jsx
new file mode 100644
index 000000000..77f130ddb
--- /dev/null
+++ b/web/js/react/src/components/Preview/Photo/Photo.jsx
@@ -0,0 +1,105 @@
+import React, { Component } from 'react';
+import classNames from 'classname';
+import * as FM from '../../../FileManagerHelper';
+import './Photo.scss';
+import Spinner from '../../Spinner/Spinner';
+
+class Photo extends Component {
+ state = {
+ activeSlide: 0,
+ photoGallery: [],
+ loading: false
+ }
+
+ imgClass = (item) => {
+ if (item.match(/.gif/i)) {
+ return "gif";
+ } else {
+ return "img";
+ }
+ }
+
+ encodePath = (path) => {
+ let splitPath = path.split('/');
+ splitPath.splice(splitPath.length - 1, 1);
+ splitPath.splice(0, 1);
+ return splitPath.join('%2F');
+ }
+
+ formatPath = (path) => {
+ let splitPath = path.split('/');
+ splitPath.splice(splitPath.length - 1, 1);
+ return splitPath.join('/');
+ }
+
+ carouselIndicators = () => {
+ const gallery = this.state.photoGallery;
+ return gallery.map((item, i) => {
+ const imageClasses = classNames({ 'control-photo': true, 'active': i === this.state.activeSlide });
+ const result = (
+
+
+
+ {state.loading ?
+ }/${item}&raw=true`})
+
);
+ return result;
+ });
+ }
+
+ carouselPhotos = () => {
+ const gallery = this.state.photoGallery || [];
+ return gallery.map((item, i) => (
+
+
+ ));
+ }
+
+ setStateAsync = updater => new Promise(resolve => this.setState(updater, resolve));
+
+ setPhotoGallery = async () => {
+ await this.setStateAsync({ loading: true });
+ const result = await FM.getData(this.encodePath(this.props.path));
+ let photoGallery = [...this.state.photoGallery];
+ result.data.listing.filter(item => item.name.match(/.png|.jpg|.jpeg|.gif/g) && !item.name.match(/.zip|.tgz|.tar.gz|.gzip|.tbz|.tar.bz|.gz|.zip|.tar|.rar/g) ? photoGallery.push(item.name) : null)
+ await this.setStateAsync({ photoGallery, loading: false })
+ this.setActiveImage();
+ }
+
+ setActiveImage = () => {
+ let activeImage = this.props.activeImage;
+ let activeImageIndex = this.state.photoGallery.indexOf(activeImage);
+ this.setState({ activeSlide: activeImageIndex });
+ }
+
+ componentDidMount() {
+ this.setPhotoGallery();
+ }
+
+ render() {
+ return (
+
+
+
+
+ {this.state.loading ?
+ );
+ }
+}
+
+export default Photo;
\ No newline at end of file
diff --git a/web/js/react/src/components/Preview/Photo/Photo.scss b/web/js/react/src/components/Preview/Photo/Photo.scss
new file mode 100644
index 000000000..e72366af6
--- /dev/null
+++ b/web/js/react/src/components/Preview/Photo/Photo.scss
@@ -0,0 +1,66 @@
+.carousel {
+ width: 100%;
+ position: relative;
+
+ a {
+ width: 5%;
+ }
+
+ .carousel-inner {
+ .carousel-item {
+ background: #000;
+ width: 100%;
+ height: 100vh;
+
+ .gif {
+ height: 50%;
+ width: 50%;
+ }
+
+ .img {
+ height: 90vh;
+ width: 90%;
+ }
+ }
+ }
+
+ .carousel-indicators {
+ .indicator {
+ margin: 0 15px;
+ width: 80px;
+ height: 80px;
+
+ .control-photo {
+ width: 100px;
+ height: 80px;
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &.active > img {
+ border: 3px solid #3cc3f0;
+ }
+
+ .active {
+ border: 3px solid #3cc3f0;
+ }
+ }
+ }
+}
+
+span.close {
+ z-index: 10;
+ font-size: 30px;
+ position: absolute;
+ top: 5px;
+ right: 10px;
+ opacity: 1;
+ color: white;
+ cursor: pointer;
+
+ &:hover {
+ color: white;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Preview/Preview.jsx b/web/js/react/src/components/Preview/Preview.jsx
new file mode 100644
index 000000000..e03881701
--- /dev/null
+++ b/web/js/react/src/components/Preview/Preview.jsx
@@ -0,0 +1,56 @@
+import React, { useEffect } from 'react';
+import { useHistory } from 'react-router';
+import Editor from './Editor/Editor';
+import Photo from './Photo/Photo';
+import Video from './Video/Video';
+
+const Preview = (props) => {
+ const history = useHistory();
+
+ useEffect(() => {
+ document.addEventListener("keydown", hotkeys);
+
+ return () => {
+ document.removeEventListener("keydown", hotkeys);
+ }
+ }, []);
+
+ const hotkeys = e => {
+ if (e.keyCode === 121) {
+ props.onClose();
+ }
+ }
+
+ const onClose = () => {
+ let lastOpenedDirectory = history.location.search.substring(6, history.location.search.lastIndexOf('/'));
+ history.push({
+ pathname: '/list/directory',
+ search: `?path=${lastOpenedDirectory}`
+ })
+ }
+
+ const content = () => {
+ let split = history.location.search.split('/');
+ let name = split[split.length - 1];
+
+ if (history.location.pathname !== '/list/directory/preview/') {
+ return;
+ }
+
+ if (name.match('.mp4')) {
+ return ;
+ } else if (name.match(/png|jpg|jpeg|gif/g)) {
+ return
+ {content()}
+
+ );
+}
+
+export default Preview;
\ No newline at end of file
diff --git a/web/js/react/src/components/Preview/Video/Video.jsx b/web/js/react/src/components/Preview/Video/Video.jsx
new file mode 100644
index 000000000..d253e7873
--- /dev/null
+++ b/web/js/react/src/components/Preview/Video/Video.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+// import video from '../../../2.mp4';
+import './Video.scss';
+
+const Video = (props) => {
+ return (
+
+ ×
+
+
+ );
+}
+
+export default Video;
\ No newline at end of file
diff --git a/web/js/react/src/components/Preview/Video/Video.scss b/web/js/react/src/components/Preview/Video/Video.scss
new file mode 100644
index 000000000..83594f2e3
--- /dev/null
+++ b/web/js/react/src/components/Preview/Video/Video.scss
@@ -0,0 +1,28 @@
+.video-preview {
+ padding-bottom: 17px;
+ width: 100%;
+ background: #000;
+
+ .close {
+ z-index: 1;
+ font-size: 30px;
+ position: absolute;
+ top: 5px;
+ right: 2px;
+ opacity: 1;
+ color: #fff;
+
+ &:hover {
+ color: #000;
+ }
+ }
+
+ .video {
+ width: 100%;
+ height: auto;
+
+ &:focus {
+ outline: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/ProgressBar/ProgressBar.jsx b/web/js/react/src/components/ProgressBar/ProgressBar.jsx
new file mode 100644
index 000000000..6a712f406
--- /dev/null
+++ b/web/js/react/src/components/ProgressBar/ProgressBar.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import './ProgressBar.scss';
+
+const ProgressBar = (props) => {
+ return (
+
+
+
+ );
+}
+
+export default ProgressBar;
\ No newline at end of file
diff --git a/web/js/react/src/components/ProgressBar/ProgressBar.scss b/web/js/react/src/components/ProgressBar/ProgressBar.scss
new file mode 100644
index 000000000..3dd31fd47
--- /dev/null
+++ b/web/js/react/src/components/ProgressBar/ProgressBar.scss
@@ -0,0 +1,13 @@
+.spinner-wrapper .progress {
+ position: absolute;
+ top: 0;
+ z-index: 5;
+ width: 100%;
+ margin: 0;
+ height: 6px;
+ display: inline-table;
+
+ .progress-bar {
+ height: 10px;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/RRD/RRD.jsx b/web/js/react/src/components/RRD/RRD.jsx
new file mode 100644
index 000000000..76ae702a3
--- /dev/null
+++ b/web/js/react/src/components/RRD/RRD.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFileDownload } from '@fortawesome/free-solid-svg-icons';
+import Container from '../ControlPanel/Container/Container';
+import { generateImagePath } from '../../ControlPanelService/RRD';
+import './RRD.scss';
+
+const RRD = props => {
+ const { data } = props;
+ const { i18n } = window.GLOBAL.App;
+
+ const printDate = date => {
+ let newDate = new Date(date);
+ let day = newDate.getDate();
+ let month = newDate.getMonth();
+ let year = newDate.getFullYear();
+ let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+ return {day} {months[month - 1]} {year}
;
+ }
+
+ return (
+
+ );
+}
+
+export default RRD;
\ No newline at end of file
diff --git a/web/js/react/src/components/RRD/RRD.scss b/web/js/react/src/components/RRD/RRD.scss
new file mode 100644
index 000000000..f4678701b
--- /dev/null
+++ b/web/js/react/src/components/RRD/RRD.scss
@@ -0,0 +1,43 @@
+.rrd-item {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-bottom: 1px solid #eee;
+ position: relative;
+
+ .l-col {
+ .date {
+ font-size: 13px;
+ margin-top: 3rem;
+ }
+
+ .time {
+ font-size: 13px;
+ margin-top: 2rem;
+ text-align: left;
+ }
+ }
+
+ .r-col {
+ .name {
+ font-size: 32px;
+ }
+
+ .rrd-image {
+ font-size: 20px;
+ text-transform: lowercase;
+ }
+ }
+}
+
+.rrd-item.focused {
+ border-left: 2px solid #5edad0;
+
+ .l-col {
+ padding-left: 11px;
+ }
+
+ div.actions {
+ opacity: 1;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/RRD/Timer/Timer.jsx b/web/js/react/src/components/RRD/Timer/Timer.jsx
new file mode 100644
index 000000000..0172f69b4
--- /dev/null
+++ b/web/js/react/src/components/RRD/Timer/Timer.jsx
@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import './Timer.scss';
+
+const Timer = props => {
+ const [isActive, setIsActive] = useState(true);
+
+ useEffect(() => {
+ let interval = null;
+
+ if (isActive) {
+ interval = setInterval(props.countDown, 1000);
+ } else if (!isActive && props.time !== 0) {
+ clearInterval(interval);
+ }
+
+ return () => clearInterval(interval);
+ }, [isActive, props.time]);
+
+ const handlePause = () => {
+ setIsActive(!isActive);
+ }
+
+ return (
+
+
+
+ )
+}
+
+export default Timer;
\ No newline at end of file
diff --git a/web/js/react/src/components/RRD/Timer/Timer.scss b/web/js/react/src/components/RRD/Timer/Timer.scss
new file mode 100644
index 000000000..6291834ec
--- /dev/null
+++ b/web/js/react/src/components/RRD/Timer/Timer.scss
@@ -0,0 +1,45 @@
+.timer-wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ button {
+ border: none;
+ background: none;
+
+ &:active, &:focus {
+ outline: none;
+ }
+ }
+
+ .circle-wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 30px;
+ height: 30px;
+
+ span.seconds {
+ &:hover, &:active {
+ background: unset;
+ }
+ }
+
+ svg {
+ height: 30px;
+ width: 30px;
+
+ circle {
+ stroke: black;
+ fill: white;
+ stroke-width: 3%;
+ stroke-dasharray: 72;
+ stroke-dashoffset: 9;
+ transform-box: fill-box;
+ transform-origin: center;
+ transform: rotate(270deg);
+ transition: all 1s linear;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Searchitem/SearchItem.jsx b/web/js/react/src/components/Searchitem/SearchItem.jsx
new file mode 100644
index 000000000..d3d38addf
--- /dev/null
+++ b/web/js/react/src/components/Searchitem/SearchItem.jsx
@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import ListItem from '../ControlPanel/ListItem/ListItem';
+import Container from '../ControlPanel/Container/Container';
+import './SearchItem.scss';
+
+class SearchItem extends Component {
+ render() {
+ const { data } = this.props;
+ const { i18n } = window.GLOBAL.App;
+
+ return (
+
+ {/* */}
+ {props.time}
+
+ {data.RESULT}
+
+
+
+
+
+
+
+
+ {i18n[data.object]}
+ {i18n.Owner}: {data.USER}
+ {i18n.Status}: {data.status}
+
+
+ {`Vesta - ${i18n.SERVER}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default Bind9;
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/Bind9/Bind9.scss b/web/js/react/src/components/Server/Edit/Bind9/Bind9.scss
new file mode 100644
index 000000000..612d1a073
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/Bind9/Bind9.scss
@@ -0,0 +1,15 @@
+.content .edit-template.edit-bind9 {
+ .toolbar {
+ .search-toolbar-name {
+ width: fit-content;
+ }
+ }
+
+ textarea {
+ width: 75%;
+ }
+
+ .checkbox-wrapper label {
+ text-transform: capitalize;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/Dovecot/Dovecot.jsx b/web/js/react/src/components/Server/Edit/Dovecot/Dovecot.jsx
new file mode 100644
index 000000000..5e9b47765
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/Dovecot/Dovecot.jsx
@@ -0,0 +1,206 @@
+import React, { useEffect, useState } from 'react';
+import { addActiveElement, removeFocusedElement } from "../../../../actions/MainNavigation/mainNavigationActions";
+import Checkbox from '../../../ControlPanel/AddItemLayout/Form/Checkbox/Checkbox';
+import TextArea from '../../../ControlPanel/AddItemLayout/Form/TextArea/TextArea';
+import { getServiceInfo, updateService } from 'src/ControlPanelService/Server';
+import AddItemLayout from '../../../ControlPanel/AddItemLayout/AddItemLayout';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Spinner from '../../../../components/Spinner/Spinner';
+import Toolbar from '../../../MainNav/Toolbar/Toolbar';
+import { useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+
+import './Dovecot.scss';
+import { Helmet } from 'react-helmet';
+
+const Dovecot = () => {
+ const token = localStorage.getItem("token");
+ const { i18n } = window.GLOBAL.App;
+ const history = useHistory();
+ const dispatch = useDispatch();
+ const [state, setState] = useState({
+ data: {},
+ loading: false,
+ errorMessage: '',
+ okMessage: ''
+ });
+
+ useEffect(() => {
+ dispatch(addActiveElement('/list/server/'));
+ dispatch(removeFocusedElement());
+
+ setState({ ...state, loading: true });
+
+ getServiceInfo('dovecot')
+ .then(response => {
+ if (!response.data.config) {
+ history.push('/list/server');
+ }
+
+ setState({
+ ...state,
+ data: response.data,
+ errorMessage: response.data['error_msg'],
+ okMessage: response.data['ok_msg'],
+ loading: false
+ });
+ })
+ .catch(err => console.error(err));
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let updatedService = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ updatedService[name] = value;
+ }
+
+ if (Object.keys(updatedService).length !== 0 && updatedService.constructor === Object) {
+ setState({ ...state, loading: true });
+
+ updateService(updatedService, '/dovecot')
+ .then(result => {
+ if (result.status === 200) {
+ const { error_msg, ok_msg } = 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 });
+ } else {
+ setState({ ...state, loading: false });
+ }
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ return (
+
+ {i18n['Configuring Server']} / {state.data.service_name}
+
+
+
+ {state.data.errorMessage ?
+
+
+ {state.okMessage ?
+
+
+ {`Vesta - ${i18n.SERVER}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default Dovecot;
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/Dovecot/Dovecot.scss b/web/js/react/src/components/Server/Edit/Dovecot/Dovecot.scss
new file mode 100644
index 000000000..612d1a073
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/Dovecot/Dovecot.scss
@@ -0,0 +1,15 @@
+.content .edit-template.edit-bind9 {
+ .toolbar {
+ .search-toolbar-name {
+ width: fit-content;
+ }
+ }
+
+ textarea {
+ width: 75%;
+ }
+
+ .checkbox-wrapper label {
+ text-transform: capitalize;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/EditBackupOption.jsx b/web/js/react/src/components/Server/Edit/EditBackupOption.jsx
new file mode 100644
index 000000000..dd0e4d220
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/EditBackupOption.jsx
@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+
+import SelectInput from 'src/components/ControlPanel/AddItemLayout/Form/SelectInput/SelectInput';
+import TextInput from 'src/components/ControlPanel/AddItemLayout/Form/TextInput/TextInput';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const EditBackupOption = ({ data, visible }) => {
+ const { i18n } = window.GLOBAL.App;
+ const [remoteBackup, setRemoteBackup] = useState(false);
+
+ return (
+
+ {i18n['Configuring Server']} / {state.data.service_name}
+
+
+
+ {state.data.errorMessage ?
+
+
+ {state.okMessage ?
+
+
+ );
+}
+
+export default EditBackupOption;
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/EditDatabaseOption.jsx b/web/js/react/src/components/Server/Edit/EditDatabaseOption.jsx
new file mode 100644
index 000000000..8ae114fb3
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/EditDatabaseOption.jsx
@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from 'react';
+
+import SelectInput from 'src/components/ControlPanel/AddItemLayout/Form/SelectInput/SelectInput';
+import TextInput from 'src/components/ControlPanel/AddItemLayout/Form/TextInput/TextInput';
+import Checkbox from 'src/components/ControlPanel/AddItemLayout/Form/Checkbox/Checkbox';
+import { Link } from 'react-router-dom';
+
+const EditDatabaseOption = ({ data, visible }) => {
+ const { i18n } = window.GLOBAL.App;
+
+ const printPhpMyAdminHosts = () => {
+ if (data.mysql_hosts.length) {
+ return data.mysql_hosts.map((host, index) => (
+
+
+ ));
+ }
+ }
+
+ const printPgSqlHosts = () => {
+ return data.pgsql_hosts.map((host, index) => (
+
+
+ ));
+ }
+
+ return (
+
+ {i18n['configure']}}
+ title={i18n['MySQL Support'] + ' / '}
+ selected={data.mysql}
+ options={[i18n['no'], i18n['yes']]}
+ name="v_mysql"
+ id="mysql"
+ disabled />
+
+ {
+ data.mysql === 'yes' && (
+ <>
+ {i18n['configure']}}
+ title={i18n['PostgreSQL Support'] + ' / '}
+ selected={data.pgsql}
+ options={[i18n['no'], i18n['yes']]}
+ name="v_pgsql"
+ id="pgsql"
+ disabled />
+
+ {
+ data.pgsql === 'yes' && (
+ <>
+
+ );
+}
+
+export default EditDatabaseOption;
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/EditMailOption.jsx b/web/js/react/src/components/Server/Edit/EditMailOption.jsx
new file mode 100644
index 000000000..807cee612
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/EditMailOption.jsx
@@ -0,0 +1,153 @@
+import React, { useEffect, useState } from 'react';
+
+import SelectInput from 'src/components/ControlPanel/AddItemLayout/Form/SelectInput/SelectInput';
+import TextInput from 'src/components/ControlPanel/AddItemLayout/Form/TextInput/TextInput';
+import Checkbox from 'src/components/ControlPanel/AddItemLayout/Form/Checkbox/Checkbox';
+import { Link } from 'react-router-dom';
+
+const EditMailOption = ({ data, visible }) => {
+ const { i18n } = window.GLOBAL.App;
+ const [mailCertificateSystem, setMailCertificateSystem] = useState(false);
+
+ useEffect(() => {
+ if (data.mail_certificate) {
+ setMailCertificateSystem(true);
+ }
+ }, []);
+
+ const getMailCertificateOptions = () => {
+ let result = ['', ...data.ssl_domains];
+ return result;
+ }
+
+ return (
+
+ {i18n['configure']}}
+ title={i18n['MAIL Server'] + ' / '}
+ name="v_mail_system"
+ value={data.mail_system}
+ id="mail_system"
+ disabled />
+
+ {
+ data.antivirus_system && (
+ {i18n['configure']}}
+ title={i18n['Antivirus'] + ' / '}
+ name="v_antivirus_system"
+ value={data.antivirus_system}
+ id="antivirus_system"
+ disabled />
+ )
+ }
+
+ {
+ data.antispam_system && (
+ {i18n['configure']}}
+ title={i18n['DNS Server'] + ' / '}
+ name="v_antispam_system"
+ value={data.antispam_system}
+ id="antispam_system"
+ disabled />
+ )
+ }
+
+
+ + setMailCertificateSystem(checked)}
+ title={i18n['Use Web Domain SSL Certificate']}
+ name="v_mail_ssl_domain_checkbox"
+ id="mail-ssl-domain-checkbox"
+ checked={!!data.mail_certificate} />
+
+ {
+ mailCertificateSystem && (
+
+ );
+}
+
+export default EditMailOption;
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/EditServer.jsx b/web/js/react/src/components/Server/Edit/EditServer.jsx
new file mode 100644
index 000000000..f77c7ebba
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/EditServer.jsx
@@ -0,0 +1,208 @@
+import React, { useEffect, useState } from 'react';
+import { addActiveElement, removeFocusedElement } from "../../../actions/MainNavigation/mainNavigationActions";
+import { getServerAdditionalInfo, updateService } from '../../../ControlPanelService/Server';
+import SelectInput from '../../ControlPanel/AddItemLayout/Form/SelectInput/SelectInput';
+import TextInput from '../../ControlPanel/AddItemLayout/Form/TextInput/TextInput';
+import AddItemLayout from '../../ControlPanel/AddItemLayout/AddItemLayout';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Spinner from '../../../components/Spinner/Spinner';
+import EditServerWebOption from './EditServerWebOption';
+import EditServerDnsOption from './EditServerDnsOption';
+import EditVestaPluginsOption from './EditVestaPlugins';
+import EditVestaSslOption from './EditVestaSslOption';
+import EditDatabaseOption from './EditDatabaseOption';
+import Toolbar from '../../MainNav/Toolbar/Toolbar';
+import EditBackupOption from './EditBackupOption';
+import EditMailOption from './EditMailOption';
+import { useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+
+import './EditServer.scss';
+import { Helmet } from 'react-helmet';
+
+const EditServer = props => {
+ const token = localStorage.getItem("token");
+ const { i18n } = window.GLOBAL.App;
+ const history = useHistory();
+ const dispatch = useDispatch();
+ const [state, setState] = useState({
+ data: {},
+ loading: false,
+ webOption: false,
+ dnsOption: false,
+ mailOption: false,
+ backupOption: false,
+ sslOption: false,
+ pluginsOption: false,
+ dbOption: false,
+ errorMessage: '',
+ okMessage: ''
+ });
+
+ useEffect(() => {
+ dispatch(addActiveElement('/list/server/'));
+ dispatch(removeFocusedElement());
+
+ setState({ ...state, loading: true });
+
+ getServerAdditionalInfo()
+ .then(response => {
+ setState({
+ ...state,
+ data: response.data,
+ errorMessage: response.data['error_msg'],
+ okMessage: response.data['ok_msg'],
+ loading: false
+ });
+ })
+ .catch(err => console.error(err));
+
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let updatedServer = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ updatedServer[name] = value;
+ }
+
+ updatedServer['save'] = 'save';
+ updatedServer['token'] = token;
+
+ if (Object.keys(updatedServer).length !== 0 && updatedServer.constructor === Object) {
+ setState({ ...state, loading: true });
+
+ updateService(updatedServer)
+ .then(result => {
+ if (result.status === 200) {
+ const { error_msg, ok_msg } = result.data;
+ setState({ ...state, errorMessage: error_msg || '', okMessage: ok_msg || '', loading: false });
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ const toggleOption = option => {
+ setState({
+ ...state,
+ [option]: !state[option]
+ });
+ }
+
+ return (
+ + +
+
+ )
+ }
+
+ {
+ data.sys_ssl_subject && (
+
+
+ {i18n['SUBJECT']}:
+ {data.sys_ssl_subject}
+
+ )
+ }
+
+ {
+ data.sys_ssl_aliases && (
+
+ {i18n['ALIASES']}:
+ {data.sys_ssl_aliases}
+
+ )
+ }
+
+ {
+ data.sys_ssl_not_before && (
+
+ {i18n['NOT_BEFORE']}:
+ {data.sys_ssl_not_before}
+
+ )
+ }
+
+ {
+ data.sys_ssl_not_after && (
+
+ {i18n['NOT_AFTER']}:
+ {data.sys_ssl_not_after}
+
+ )
+ }
+
+ {
+ data.sys_ssl_signature && (
+
+ {i18n['SIGNATURE']}:
+ {data.sys_ssl_signature}
+
+ )
+ }
+
+ {
+ data.sys_ssl_pub_key && (
+
+ {i18n['PUB_KEY']}:
+ {data.sys_ssl_pub_key}
+
+ )
+ }
+
+ {
+ data.sys_ssl_issuer && (
+
+ {i18n['ISSUER']}:
+ {data.sys_ssl_issuer}
+
+ )
+ }
+
+
+ {`Vesta - ${i18n.SERVER}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default EditServer;
diff --git a/web/js/react/src/components/Server/Edit/EditServer.scss b/web/js/react/src/components/Server/Edit/EditServer.scss
new file mode 100644
index 000000000..90a8cc628
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/EditServer.scss
@@ -0,0 +1,149 @@
+.edit-server {
+ .modules {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ > div {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ margin: 5px 0;
+ }
+
+ > button {
+ margin: 15px 0;
+
+ svg {
+ margin-left: 10px;
+ }
+ }
+
+ .form-group {
+ a {
+ text-decoration: none;
+ color: #2C9491;
+ font-weight: bold;
+ font-size: 14px;
+
+ &:hover {
+ color: #ff6701;
+ }
+ }
+ }
+
+ .additional-info {
+ margin-top: 10px;
+ transform: translateX(3rem);
+
+ > div {
+ display: flex;
+ margin: 5px 0;
+
+ span {
+ font-size: 12px;
+ color: #555;
+ }
+
+ span:nth-child(1) {
+ width: 180px;
+ }
+ }
+ }
+
+ .server-web-option,
+ .server-dns-option,
+ .server-ssl-option,
+ .server-mail-option {
+ transform: translateX(3rem);
+ }
+
+ .server-mail-option {
+ transform: translateX(3rem);
+
+ .mail-cert-info {
+ transform: translateX(3rem);
+ }
+ }
+
+ .server-mail-option {
+ .hosts {
+ transform: translateX(3rem);
+ }
+ }
+
+ .server-ssl-option {
+ transform: translateX(3rem);
+
+ .domain-group {
+ transform: translateX(3rem);
+ }
+ }
+
+ .server-plugins-option {
+ transform: translateX(3rem);
+
+ .sftp-module,
+ .soft-module,
+ .fm-module {
+ transform: translateX(3rem);
+ }
+
+ .sftp-module,
+ .fm-module {
+ font-size: 15px;
+ color: #555;
+ }
+
+ .buy-license {
+ display: flex;
+ margin: 5px 0;
+
+ a {
+ color: #FFF;
+ background: #9fbf0c;
+ border: none;
+ border-radius: 3px;
+ font-size: 13px;
+ font-weight: bold;
+ padding: 7px 15px;
+ text-transform: capitalize;
+ text-decoration: none;
+ width: fit-content;
+ margin-right: 10px;
+
+ &:hover {
+ color: #555;
+ background: #c0e60f;
+ }
+ }
+
+ + span {
+ display: block;
+ margin-top: 15px;
+ font-style: italic;
+ font-size: 12px;
+ }
+ }
+
+ .license-description {
+ display: flex;
+ align-items: center;
+ margin: 1rem 0;
+
+ > span {
+ color: #2c9491;
+ }
+
+ .form-group {
+ margin: 0 0 0 20px;
+ width: 60%;
+
+ label {
+ display: none;
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/EditServerDnsOption.jsx b/web/js/react/src/components/Server/Edit/EditServerDnsOption.jsx
new file mode 100644
index 000000000..0c3bc3d65
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/EditServerDnsOption.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+import SelectInput from 'src/components/ControlPanel/AddItemLayout/Form/SelectInput/SelectInput';
+import TextInput from 'src/components/ControlPanel/AddItemLayout/Form/TextInput/TextInput';
+import { Link } from 'react-router-dom';
+
+const EditServerDnsOption = ({ dnsSystem, selected, dnsCluster, visible }) => {
+ const { i18n } = window.GLOBAL.App;
+
+ const printHosts = () => {
+ return dnsCluster.map((cluster, index) => (
+ {i18n['Configuring Server']}
+
+
+ {state.data.errorMessage ?
+
+
+ {state.okMessage ?
+
+ {i18n['configure']}}
+ title={i18n['DNS Server'] + ' / '}
+ name="v_dns_system"
+ value={dnsSystem}
+ id="dns_system"
+ disabled />
+
+
+ );
+}
+
+export default EditServerDnsOption;
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/EditServerWebOption.jsx b/web/js/react/src/components/Server/Edit/EditServerWebOption.jsx
new file mode 100644
index 000000000..afafbbad0
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/EditServerWebOption.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+
+import TextInput from 'src/components/ControlPanel/AddItemLayout/Form/TextInput/TextInput';
+import { Link } from 'react-router-dom';
+
+const EditServerWebOption = ({ proxySystem, webSystem, webBackend, webBackendPool, visible = false }) => {
+ const { i18n } = window.GLOBAL.App;
+
+ return (
+
+ {printHosts()}
+
+ )
+ }
+
+
+ {
+ proxySystem && (
+ {i18n['configure']}}
+ title={i18n['Proxy Server'] + ' / '}
+ name="v_proxy_system"
+ value={proxySystem}
+ id="proxy_system"
+ disabled />
+ )
+ }
+
+ {
+ webSystem && (
+ {i18n['configure']}}
+ title={i18n['Web Server'] + ' / '}
+ name="v_web_system"
+ value={webSystem}
+ id="web_system"
+ disabled />
+ )
+ }
+
+ {
+ webBackend && (
+ {i18n['configure']}}
+ title={i18n['Backend Pool Mode']}
+ name="v_web_backend_pool"
+ value={webBackendPool}
+ id="web_backend_pool"
+ disabled
+ />
+ )
+ }
+
+
+ );
+}
+
+export default EditServerWebOption;
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/EditVestaPlugins.jsx b/web/js/react/src/components/Server/Edit/EditVestaPlugins.jsx
new file mode 100644
index 000000000..3206987aa
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/EditVestaPlugins.jsx
@@ -0,0 +1,248 @@
+import React, { useEffect, useState } from 'react';
+
+import SelectInput from 'src/components/ControlPanel/AddItemLayout/Form/SelectInput/SelectInput';
+import TextInput from 'src/components/ControlPanel/AddItemLayout/Form/TextInput/TextInput';
+import { Link } from 'react-router-dom';
+
+const EditVestaPluginsOption = ({ data, visible }) => {
+ const { i18n } = window.GLOBAL.App;
+ const [sftpOptions, setSftpOptions] = useState([]);
+ const [fmOptions, setFmOptions] = useState([]);
+ const [sftpDescription, setSftpDescription] = useState(false);
+ const [fmDescription, setFmDescription] = useState(false);
+ const [softaculousDescription, setSoftaculousDescription] = useState(false);
+
+ useEffect(() => {
+ let sftpOptionsArray = [];
+ let fmOptionsArray = [];
+
+ if (data.sftpjail_key) {
+ sftpOptionsArray.push(i18n['Disable and Cancel Licence']);
+ }
+
+ sftpOptionsArray.push(i18n['yes']);
+
+ if (data.fm_key) {
+ fmOptionsArray.push(i18n['Disable and Cancel Licence']);
+ }
+
+ fmOptionsArray.push(i18n['yes']);
+
+ setSftpOptions(sftpOptionsArray);
+ setFmOptions(fmOptionsArray);
+
+ if (data.lead === 'sftp' || data.sftpjail_key != '') {
+ setSftpDescription(true);
+ }
+
+ if (data.lead === 'filemanager' || data.fm_key != '') {
+ setFmDescription(true);
+ }
+
+ if (data.lead === 'softaculous' || data.softaculous != '') {
+ setSoftaculousDescription(true);
+ }
+ }, []);
+
+ const onChangeSftpChroot = value => {
+ if (value !== i18n['yes']) {
+ setSftpDescription(false);
+ } else {
+ setSftpDescription(true);
+ }
+ }
+
+ const onChangeFm = value => {
+ if (value !== i18n['yes']) {
+ setFmDescription(false);
+ } else {
+ setFmDescription(true);
+ }
+ }
+
+ const onChangeSoftaculous = value => {
+ if (value !== i18n['yes']) {
+ setSoftaculousDescription(true);
+ } else {
+ setSoftaculousDescription(false);
+ }
+ }
+
+ return (
+
+
+ +
+ +
+ +
+ );
+}
+
+export default EditVestaPluginsOption;
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/EditVestaSslOption.jsx b/web/js/react/src/components/Server/Edit/EditVestaSslOption.jsx
new file mode 100644
index 000000000..b591c5eaa
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/EditVestaSslOption.jsx
@@ -0,0 +1,128 @@
+import React, { useEffect, useState } from 'react';
+
+import SelectInput from 'src/components/ControlPanel/AddItemLayout/Form/SelectInput/SelectInput';
+import TextArea from 'src/components/ControlPanel/AddItemLayout/Form/TextArea/TextArea';
+import Checkbox from 'src/components/ControlPanel/AddItemLayout/Form/Checkbox/Checkbox';
+import { Link } from 'react-router-dom';
+
+const EditVestaSslOption = ({ data, visible }) => {
+ const { i18n } = window.GLOBAL.App;
+ const [domainsVisible, setDomainsVisible] = useState(false);
+ const [sslDomains, setSslDomains] = useState([]);
+
+ useEffect(() => {
+ const { ssl_domains } = data;
+
+ if (ssl_domains) {
+ setSslDomains(['', ...ssl_domains]);
+ } else {
+ setSslDomains(['']);
+ }
+
+ }, []);
+
+ return (
+ + +
+
+ )
+ : (
+ {i18n['Restrict users so that they cannot use SSH and access only their home directory.']}
+
+ {i18n['Licence Key']}:
+
+
+ <>
+ {i18n['Restrict users so that they cannot use SSH and access only their home directory.']}
+ {i18n['This is a commercial module, you would need to purchace license key to enable it.']}
+
+
+ )
+ }
+
+
+ {i18n['Enter License Key']}:
+
+
+
+
+ 2Checkout.com Inc. (Ohio, USA) is a payment facilitator for goods and services provided by vestacp.com.
+ + +
+
+ )
+ : (
+ {i18n['Browse, copy, edit, view, and retrieve all of your web domain files using fully featured File Manager.']}
+
+ {i18n['Licence Key']}:
+
+
+ <>
+ {i18n['Browse, copy, edit, view, and retrieve all of your web domain files using fully featured File Manager.']}
+ {i18n['This is a commercial module, you would need to purchace license key to enable it.']}
+
+
+ )
+ }
+
+
+ {i18n['Enter License Key']}:
+
+
+
+
+ 2Checkout.com Inc. (Ohio, USA) is a payment facilitator for goods and services provided by vestacp.com.
+ + +
+
+ )
+ }
+ {i18n['Browse, copy, edit, view, and retrieve all of your web domain files using fully featured File Manager.']}
+
+
+ Softaculous is a great Auto Installer having 426 great scripts, 1115 PHP Classes
+ and we are still adding more. Softaculous is ideal for Web Hosting companies and
+ it could give a significant boost to your sales. These scripts cover most of the
+ uses a customer could ever have. We have covered a wide array of Categories so that
+ everyone could find the required script one would need to power their Web Site.
+
+
+ {i18n['Get Premium License']}
+
+
+
+ setDomainsVisible(checked)}
+ title={i18n['Use Web Domain SSL Certificate']}
+ defaultChecked={data.vesta_certificate}
+ name="v_web_ssl_domain_checkbox"
+ id="web_ssl_domain_checkbox"
+ checked={domainsVisible}
+ />
+
+ {
+ domainsVisible && (
+
+ );
+}
+
+export default EditVestaSslOption;
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/Httpd/EditHttpd.jsx b/web/js/react/src/components/Server/Edit/Httpd/EditHttpd.jsx
new file mode 100644
index 000000000..19d4ea6b9
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/Httpd/EditHttpd.jsx
@@ -0,0 +1,129 @@
+import React, { useEffect, useState } from 'react';
+import { addActiveElement, removeFocusedElement } from "../../../../actions/MainNavigation/mainNavigationActions";
+import Checkbox from '../../../ControlPanel/AddItemLayout/Form/Checkbox/Checkbox';
+import TextArea from '../../../ControlPanel/AddItemLayout/Form/TextArea/TextArea';
+import AddItemLayout from '../../../ControlPanel/AddItemLayout/AddItemLayout';
+import { getServiceInfo, updateService } from 'src/ControlPanelService/Server';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Spinner from '../../../../components/Spinner/Spinner';
+import Toolbar from '../../../MainNav/Toolbar/Toolbar';
+import { Link, useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+
+import './EditHttpd.scss';
+import { Helmet } from 'react-helmet';
+
+const EditHttpd = props => {
+ const token = localStorage.getItem("token");
+ const { i18n } = window.GLOBAL.App;
+ const history = useHistory();
+ const dispatch = useDispatch();
+ const [state, setState] = useState({
+ data: {},
+ loading: false,
+ errorMessage: '',
+ okMessage: ''
+ });
+
+ useEffect(() => {
+ dispatch(addActiveElement('/list/server/'));
+ dispatch(removeFocusedElement());
+
+ setState({ ...state, loading: true });
+
+ getServiceInfo('httpd')
+ .then(response => {
+ setState({
+ ...state,
+ data: response.data,
+ errorMessage: response.data['error_msg'],
+ okMessage: response.data['ok_msg'],
+ loading: false
+ });
+ })
+ .catch(err => console.error(err));
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let updatedService = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ updatedService[name] = value;
+ }
+
+ if (Object.keys(updatedService).length !== 0 && updatedService.constructor === Object) {
+ setState({ ...state, loading: true });
+
+ updateService(updatedService, '/httpd')
+ .then(result => {
+ if (result.status === 200) {
+ const { error_msg, ok_msg } = 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 });
+ } else {
+ setState({ ...state, loading: false });
+ }
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ return (
+
+
+ )
+ }
+
+
+
+
+
+
+ {
+ data.sys_ssl_subject && (
+
+
+ {i18n['SUBJECT']}:
+ {data.sys_ssl_subject}
+
+ )
+ }
+
+ {
+ data.sys_ssl_aliases && (
+
+ {i18n['ALIASES']}:
+ {data.sys_ssl_aliases}
+
+ )
+ }
+
+ {
+ data.sys_ssl_not_before && (
+
+ {i18n['NOT_BEFORE']}:
+ {data.sys_ssl_not_before}
+
+ )
+ }
+
+ {
+ data.sys_ssl_not_after && (
+
+ {i18n['NOT_AFTER']}:
+ {data.sys_ssl_not_after}
+
+ )
+ }
+
+ {
+ data.sys_ssl_signature && (
+
+ {i18n['SIGNATURE']}:
+ {data.sys_ssl_signature}
+
+ )
+ }
+
+ {
+ data.sys_ssl_pub_key && (
+
+ {i18n['PUB_KEY']}:
+ {data.sys_ssl_pub_key}
+
+ )
+ }
+
+ {
+ data.sys_ssl_issuer && (
+
+ {i18n['ISSUER']}:
+ {data.sys_ssl_issuer}
+
+ )
+ }
+
+
+ {`Vesta - ${i18n.SERVER}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default EditHttpd;
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/Httpd/EditHttpd.scss b/web/js/react/src/components/Server/Edit/Httpd/EditHttpd.scss
new file mode 100644
index 000000000..16ec9e23e
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/Httpd/EditHttpd.scss
@@ -0,0 +1,45 @@
+.content .edit-template.edit-httpd {
+ .toolbar {
+ .search-toolbar-name {
+ width: fit-content;
+
+ a {
+ color: #ff6701;
+ text-decoration: none;
+
+ &:hover {
+ color: rgb(119, 119, 119);
+ }
+ }
+ }
+
+ .link {
+ width: fit-content;
+ margin-left: 15px;
+
+ a {
+ text-decoration: none;
+ font-size: 12px;
+ text-transform: uppercase;
+ color: rgb(119, 119, 119);
+ font-weight: 700;
+
+ &:hover {
+ color: #ff6701;
+ }
+ }
+ }
+ }
+
+ textarea {
+ width: 75%;
+ }
+
+ .checkbox-wrapper label {
+ text-transform: capitalize;
+ }
+
+ svg {
+ margin-left: 5px;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/Mysql/Mysql.jsx b/web/js/react/src/components/Server/Edit/Mysql/Mysql.jsx
new file mode 100644
index 000000000..a4172f031
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/Mysql/Mysql.jsx
@@ -0,0 +1,210 @@
+import React, { useEffect, useState } from 'react';
+import { addActiveElement, removeFocusedElement } from "../../../../actions/MainNavigation/mainNavigationActions";
+import TextInput from '../../../ControlPanel/AddItemLayout/Form/TextInput/TextInput';
+import Checkbox from '../../../ControlPanel/AddItemLayout/Form/Checkbox/Checkbox';
+import TextArea from '../../../ControlPanel/AddItemLayout/Form/TextArea/TextArea';
+import { getServiceInfo, updateService } from 'src/ControlPanelService/Server';
+import AddItemLayout from '../../../ControlPanel/AddItemLayout/AddItemLayout';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Spinner from '../../../../components/Spinner/Spinner';
+import Toolbar from '../../../MainNav/Toolbar/Toolbar';
+import { useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+
+import './Mysql.scss';
+import { Helmet } from 'react-helmet';
+
+const Mysql = ({ serviceName = '' }) => {
+ const token = localStorage.getItem("token");
+ const { i18n } = window.GLOBAL.App;
+ const history = useHistory();
+ const dispatch = useDispatch();
+ const [state, setState] = useState({
+ data: {},
+ loading: false,
+ basicOptions: true,
+ advancedOptions: false,
+ errorMessage: '',
+ okMessage: ''
+ });
+
+ useEffect(() => {
+ dispatch(addActiveElement('/list/server/'));
+ dispatch(removeFocusedElement());
+
+ if (!serviceName) {
+ history.push('/list/server');
+ }
+
+ setState({ ...state, loading: true });
+
+ getServiceInfo('mysql')
+ .then(response => {
+ if (response.data.config.includes('Error')) {
+ history.push('/list/server');
+ }
+
+ setState({
+ ...state,
+ data: response.data,
+ errorMessage: response.data['error_msg'],
+ okMessage: response.data['ok_msg'],
+ loading: false
+ });
+ })
+ .catch(err => console.error(err));
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let updatedService = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ updatedService[name] = value;
+ }
+
+ if (Object.keys(updatedService).length !== 0 && updatedService.constructor === Object) {
+ setState({ ...state, loading: true });
+
+ updateService(updatedService, `/${serviceName}`)
+ .then(result => {
+ if (result.status === 200) {
+ const { error_msg, ok_msg } = 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 });
+ } else {
+ setState({ ...state, loading: false });
+ }
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ const toggleOptions = () => {
+ setState({
+ ...state,
+ advancedOptions: !state.advancedOptions,
+ basicOptions: !state.basicOptions
+ });
+ }
+
+ return (
+ {i18n['Configuring Server']} / {state.data.service_name}
+ {i18n['Configure']} php.ini
+
+
+ {state.data.errorMessage ?
+
+
+ {state.okMessage ?
+
+
+ {`Vesta - ${i18n.SERVER}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default Mysql;
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/Mysql/Mysql.scss b/web/js/react/src/components/Server/Edit/Mysql/Mysql.scss
new file mode 100644
index 000000000..b53f1479a
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/Mysql/Mysql.scss
@@ -0,0 +1,19 @@
+.content .edit-template.edit-mysql {
+ .toolbar {
+ .search-toolbar-name {
+ width: fit-content;
+ }
+ }
+
+ textarea {
+ width: 75%;
+ }
+
+ .checkbox-wrapper label {
+ text-transform: capitalize;
+ }
+
+ svg {
+ margin-left: 5px;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/Nginx/EditServerNginx.jsx b/web/js/react/src/components/Server/Edit/Nginx/EditServerNginx.jsx
new file mode 100644
index 000000000..9af48fab4
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/Nginx/EditServerNginx.jsx
@@ -0,0 +1,233 @@
+import React, { useEffect, useState } from 'react';
+import { addActiveElement, removeFocusedElement } from "../../../../actions/MainNavigation/mainNavigationActions";
+import TextInput from '../../../ControlPanel/AddItemLayout/Form/TextInput/TextInput';
+import Checkbox from '../../../ControlPanel/AddItemLayout/Form/Checkbox/Checkbox';
+import TextArea from '../../../ControlPanel/AddItemLayout/Form/TextArea/TextArea';
+import AddItemLayout from '../../../ControlPanel/AddItemLayout/AddItemLayout';
+import { getServiceInfo, updateService } from 'src/ControlPanelService/Server';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Spinner from '../../../../components/Spinner/Spinner';
+import Toolbar from '../../../MainNav/Toolbar/Toolbar';
+import { Link, useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+
+import './EditServerNginx.scss';
+import { Helmet } from 'react-helmet';
+
+const EditServerNginx = props => {
+ const token = localStorage.getItem("token");
+ const { i18n } = window.GLOBAL.App;
+ const history = useHistory();
+ const dispatch = useDispatch();
+ const [state, setState] = useState({
+ data: {},
+ loading: false,
+ basicOptions: true,
+ advancedOptions: false,
+ errorMessage: '',
+ okMessage: ''
+ });
+
+ useEffect(() => {
+ dispatch(addActiveElement('/list/server/'));
+ dispatch(removeFocusedElement());
+
+ setState({ ...state, loading: true });
+
+ getServiceInfo('nginx')
+ .then(response => {
+ setState({
+ ...state,
+ data: response.data,
+ errorMessage: response.data['error_msg'],
+ okMessage: response.data['ok_msg'],
+ loading: false
+ });
+ })
+ .catch(err => console.error(err));
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let updatedService = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ updatedService[name] = value;
+ }
+
+ if (Object.keys(updatedService).length !== 0 && updatedService.constructor === Object) {
+ setState({ ...state, loading: true });
+
+ updateService(updatedService, '/nginx')
+ .then(result => {
+ if (result.status === 200) {
+ const { error_msg, ok_msg } = 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 });
+ } else {
+ setState({ ...state, loading: false });
+ }
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ const toggleOptions = () => {
+ setState({
+ ...state,
+ advancedOptions: !state.advancedOptions,
+ basicOptions: !state.basicOptions
+ });
+ }
+
+ return (
+ {i18n['Configuring Server']} / {state.data.service_name}
+
+
+ {state.data.errorMessage ?
+
+
+ {state.okMessage ?
+
+
+ {`Vesta - ${i18n.SERVER}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default EditServerNginx;
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/Nginx/EditServerNginx.scss b/web/js/react/src/components/Server/Edit/Nginx/EditServerNginx.scss
new file mode 100644
index 000000000..53609fe0e
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/Nginx/EditServerNginx.scss
@@ -0,0 +1,36 @@
+.content .edit-template.edit-nginx {
+ .toolbar {
+ .search-toolbar-name {
+ width: fit-content;
+ }
+
+ .link {
+ width: fit-content;
+ margin-left: 15px;
+
+ a {
+ text-decoration: none;
+ font-size: 12px;
+ text-transform: uppercase;
+ color: rgb(119, 119, 119);
+ font-weight: 700;
+
+ &:hover {
+ color: #ff6701;
+ }
+ }
+ }
+ }
+
+ textarea {
+ width: 75%;
+ }
+
+ .checkbox-wrapper label {
+ text-transform: capitalize;
+ }
+
+ svg {
+ margin-left: 5px;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/PHP/EditPhp.jsx b/web/js/react/src/components/Server/Edit/PHP/EditPhp.jsx
new file mode 100644
index 000000000..9496494f7
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/PHP/EditPhp.jsx
@@ -0,0 +1,219 @@
+import React, { useEffect, useState } from 'react';
+import { addActiveElement, removeFocusedElement } from "../../../../actions/MainNavigation/mainNavigationActions";
+import TextInput from '../../../ControlPanel/AddItemLayout/Form/TextInput/TextInput';
+import Checkbox from '../../../ControlPanel/AddItemLayout/Form/Checkbox/Checkbox';
+import TextArea from '../../../ControlPanel/AddItemLayout/Form/TextArea/TextArea';
+import { getServiceInfo, updateService } from 'src/ControlPanelService/Server';
+import AddItemLayout from '../../../ControlPanel/AddItemLayout/AddItemLayout';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Spinner from '../../../../components/Spinner/Spinner';
+import Toolbar from '../../../MainNav/Toolbar/Toolbar';
+import { Link, useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+
+import './EditPhp.scss';
+import { Helmet } from 'react-helmet';
+
+const EditPhp = ({ serviceName = '' }) => {
+ const token = localStorage.getItem("token");
+ const { i18n } = window.GLOBAL.App;
+ const history = useHistory();
+ const dispatch = useDispatch();
+ const [state, setState] = useState({
+ data: {},
+ loading: false,
+ basicOptions: true,
+ advancedOptions: false,
+ errorMessage: '',
+ okMessage: ''
+ });
+
+ useEffect(() => {
+ dispatch(addActiveElement('/list/server/'));
+ dispatch(removeFocusedElement());
+
+ if (!serviceName) {
+ history.push('/list/server');
+ }
+
+ setState({ ...state, loading: true });
+
+ getServiceInfo(serviceName)
+ .then(response => {
+ setState({
+ ...state,
+ data: response.data,
+ errorMessage: response.data['error_msg'],
+ okMessage: response.data['ok_msg'],
+ loading: false
+ });
+ })
+ .catch(err => console.error(err));
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let updatedService = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ updatedService[name] = value;
+ }
+
+ if (Object.keys(updatedService).length !== 0 && updatedService.constructor === Object) {
+ setState({ ...state, loading: true });
+
+ updateService(updatedService, `/${serviceName}`)
+ .then(result => {
+ if (result.status === 200) {
+ const { error_msg, ok_msg } = 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 });
+ } else {
+ setState({ ...state, loading: false });
+ }
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ const toggleOptions = () => {
+ setState({
+ ...state,
+ advancedOptions: !state.advancedOptions,
+ basicOptions: !state.basicOptions
+ });
+ }
+
+ return (
+ {i18n['Configuring Server']} / {state.data.service_name}
+ {i18n['Configure']} php.ini
+
+
+ {state.data.errorMessage ?
+
+
+ {state.okMessage ?
+
+
+ {`Vesta - ${i18n.SERVER}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default EditPhp;
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/PHP/EditPhp.scss b/web/js/react/src/components/Server/Edit/PHP/EditPhp.scss
new file mode 100644
index 000000000..742ae2115
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/PHP/EditPhp.scss
@@ -0,0 +1,49 @@
+.content .edit-template.edit-php {
+ .toolbar {
+ .search-toolbar-name {
+ width: fit-content;
+ color: rgb(119, 119, 119);
+ }
+
+ .search-toolbar-name,
+ .link {
+ width: fit-content;
+
+ a {
+ text-decoration: none;
+ font-size: 12px;
+ text-transform: uppercase;
+ color: rgb(119, 119, 119);
+ font-weight: 700;
+
+ &:hover {
+ color: #ff6701;
+ }
+ }
+ }
+
+ .link {
+ margin-left: 15px;
+
+ a {
+ color: #ff6701;
+
+ &:hover {
+ color: rgb(119, 119, 119);
+ }
+ }
+ }
+ }
+
+ textarea {
+ width: 75%;
+ }
+
+ .checkbox-wrapper label {
+ text-transform: capitalize;
+ }
+
+ svg {
+ margin-left: 5px;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/Postgresql/Postgresql.jsx b/web/js/react/src/components/Server/Edit/Postgresql/Postgresql.jsx
new file mode 100644
index 000000000..bda2fc2c1
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/Postgresql/Postgresql.jsx
@@ -0,0 +1,143 @@
+import React, { useEffect, useState } from 'react';
+import { addActiveElement, removeFocusedElement } from "../../../../actions/MainNavigation/mainNavigationActions";
+import Checkbox from '../../../ControlPanel/AddItemLayout/Form/Checkbox/Checkbox';
+import TextArea from '../../../ControlPanel/AddItemLayout/Form/TextArea/TextArea';
+import { getServiceInfo, updateService } from 'src/ControlPanelService/Server';
+import AddItemLayout from '../../../ControlPanel/AddItemLayout/AddItemLayout';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Spinner from '../../../../components/Spinner/Spinner';
+import Toolbar from '../../../MainNav/Toolbar/Toolbar';
+import { useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+
+import './Postgresql.scss';
+import { Helmet } from 'react-helmet';
+
+const Postgresql = () => {
+ const token = localStorage.getItem("token");
+ const { i18n } = window.GLOBAL.App;
+ const history = useHistory();
+ const dispatch = useDispatch();
+ const [state, setState] = useState({
+ data: {},
+ loading: false,
+ errorMessage: '',
+ okMessage: ''
+ });
+
+ useEffect(() => {
+ dispatch(addActiveElement('/list/server/'));
+ dispatch(removeFocusedElement());
+
+ setState({ ...state, loading: true });
+
+ getServiceInfo('postgresql')
+ .then(response => {
+ if (!response.data.config) {
+ history.push('/list/server');
+ }
+
+ setState({
+ ...state,
+ data: response.data,
+ errorMessage: response.data['error_msg'],
+ okMessage: response.data['ok_msg'],
+ loading: false
+ });
+ })
+ .catch(err => console.error(err));
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let updatedService = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ updatedService[name] = value;
+ }
+
+ if (Object.keys(updatedService).length !== 0 && updatedService.constructor === Object) {
+ setState({ ...state, loading: true });
+
+ updateService(updatedService, '/postgresql')
+ .then(result => {
+ if (result.status === 200) {
+ const { error_msg, ok_msg } = 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 });
+ } else {
+ setState({ ...state, loading: false });
+ }
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ return (
+ {i18n['Configuring Server']} / {state.data.web_system}
+ {i18n['Configure']} php.ini
+
+
+ {state.data.errorMessage ?
+
+
+ {state.okMessage ?
+
+
+ {`Vesta - ${i18n.SERVER}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default Postgresql;
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/Postgresql/Postgresql.scss b/web/js/react/src/components/Server/Edit/Postgresql/Postgresql.scss
new file mode 100644
index 000000000..f27f28899
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/Postgresql/Postgresql.scss
@@ -0,0 +1,15 @@
+.content .edit-template.edit-pgsql {
+ .toolbar {
+ .search-toolbar-name {
+ width: fit-content;
+ }
+ }
+
+ textarea {
+ width: 75%;
+ }
+
+ .checkbox-wrapper label {
+ text-transform: capitalize;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/Service/Service.jsx b/web/js/react/src/components/Server/Edit/Service/Service.jsx
new file mode 100644
index 000000000..156696c9f
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/Service/Service.jsx
@@ -0,0 +1,140 @@
+import React, { useEffect, useState } from 'react';
+import { addActiveElement, removeFocusedElement } from "../../../../actions/MainNavigation/mainNavigationActions";
+import Checkbox from '../../../ControlPanel/AddItemLayout/Form/Checkbox/Checkbox';
+import TextArea from '../../../ControlPanel/AddItemLayout/Form/TextArea/TextArea';
+import AddItemLayout from '../../../ControlPanel/AddItemLayout/AddItemLayout';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { getServiceInfo, updateService } from 'src/ControlPanelService/Server';
+import Spinner from '../../../../components/Spinner/Spinner';
+import Toolbar from '../../../MainNav/Toolbar/Toolbar';
+import { useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+
+import './Service.scss';
+import { Helmet } from 'react-helmet';
+
+const Service = ({ serviceName = '' }) => {
+ const token = localStorage.getItem("token");
+ const { i18n } = window.GLOBAL.App;
+ const history = useHistory();
+ const dispatch = useDispatch();
+ const [state, setState] = useState({
+ data: {},
+ loading: false,
+ errorMessage: '',
+ okMessage: ''
+ });
+
+ useEffect(() => {
+ dispatch(addActiveElement('/list/server/'));
+ dispatch(removeFocusedElement());
+
+ if (!serviceName) {
+ history.push('/list/server');
+ }
+
+ setState({ ...state, loading: true });
+
+ getServiceInfo(serviceName)
+ .then(response => {
+ const { config } = response.data;
+
+ if (!config || config.includes("file doesn't exist")) {
+ history.push('/list/server');
+ }
+
+ setState({
+ ...state,
+ data: response.data,
+ errorMessage: response.data['error_msg'],
+ okMessage: response.data['ok_msg'],
+ loading: false
+ });
+ })
+ .catch(err => console.error(err));
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let updatedService = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ updatedService[name] = value;
+ }
+
+ if (Object.keys(updatedService).length !== 0 && updatedService.constructor === Object) {
+ setState({ ...state, loading: true });
+
+ updateService(updatedService, serviceName)
+ .then(result => {
+ if (result.status === 200) {
+ const { error_msg, ok_msg } = 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 });
+ } else {
+ setState({ ...state, loading: false });
+ }
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ return (
+
+ {i18n['Configuring Server']} / {state.data.service_name}
+
+
+
+ {state.data.errorMessage ?
+
+
+ {state.okMessage ?
+
+
+ {`Vesta - ${i18n.SERVER}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default Service;
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Edit/Service/Service.scss b/web/js/react/src/components/Server/Edit/Service/Service.scss
new file mode 100644
index 000000000..a2ac8de06
--- /dev/null
+++ b/web/js/react/src/components/Server/Edit/Service/Service.scss
@@ -0,0 +1,15 @@
+.content .edit-template.edit-service {
+ .toolbar {
+ .search-toolbar-name {
+ width: fit-content;
+ }
+ }
+
+ textarea {
+ width: 75%;
+ }
+
+ .checkbox-wrapper label {
+ text-transform: capitalize;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/Server/Server.jsx b/web/js/react/src/components/Server/Server.jsx
new file mode 100644
index 000000000..ef580b6b2
--- /dev/null
+++ b/web/js/react/src/components/Server/Server.jsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Container from '../ControlPanel/Container/Container';
+import ListItem from '../ControlPanel/ListItem/ListItem';
+import './Server.scss';
+import { Link } from 'react-router-dom';
+
+const Server = props => {
+ const { data } = props;
+ const { i18n } = window.GLOBAL.App;
+
+ const printTime = seconds => {
+ let hours = seconds / 60;
+ let days = Math.floor(hours / 24);
+ return days;
+ }
+
+ const checkItem = () => {
+ props.checkItem(data.NAME);
+ }
+
+ return (
+
+ {i18n['Configuring Server']} / {state.data.service_name}
+
+
+
+ {state.data.errorMessage ?
+
+
+ {state.okMessage ?
+ {data.NAME}
+
+
+
+
+
+
+
+
+
+
+ {i18n[data.SYSTEM]}
+ {i18n.CPU}: {data.CPU}
+ {i18n.Memory}: {data.MEM} {i18n.mb}
+ {i18n.Uptime}: {printTime(data.RTIME)} {i18n.days}
+
+
+
+
+
+ {i18n.configure}
+ {data.FOCUSED ? ↩ :
+
+
+
+
+
+
+
+
+
+ {data.HOSTNAME}
+
+
+
+
+
+
+
+
+ {data.OS} {data.VERSION} {`(${data.ARCH})`}
+ {i18n['Load Average']}: {data.LOADAVERAGE}
+ {i18n.Uptime}: {printTime(data.UPTIME)} {i18n.days}
+
+
+
+
+
+ {i18n.configure}
+ {data.FOCUSED ? ↩ :
+
+
+
+
+ );
+}
+
+export default Spinner;
\ No newline at end of file
diff --git a/web/js/react/src/components/Spinner/Spinner.scss b/web/js/react/src/components/Spinner/Spinner.scss
new file mode 100644
index 000000000..1f8248ce1
--- /dev/null
+++ b/web/js/react/src/components/Spinner/Spinner.scss
@@ -0,0 +1,7 @@
+.spinner-wrapper {
+ position: absolute;
+ bottom: 5px;
+ width: 15%;
+ left: 42%;
+ height: 10px;
+}
diff --git a/web/js/react/src/components/Statistic/Statistic.jsx b/web/js/react/src/components/Statistic/Statistic.jsx
new file mode 100644
index 000000000..a8fc839b4
--- /dev/null
+++ b/web/js/react/src/components/Statistic/Statistic.jsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import Container from '../ControlPanel/Container/Container';
+import './Statistic.scss';
+
+const Statistic = props => {
+ const { data } = props;
+ const { i18n } = window.GLOBAL.App;
+
+ const printDate = date => {
+ let newDate = new Date(date);
+ let day = newDate.getDate();
+ let month = newDate.getMonth();
+ let year = newDate.getFullYear();
+ let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+ return
+
+
+ {day} {months[month]} {year}
;
+ }
+
+ const printName = date => {
+ let newDate = new Date(date);
+ let month = newDate.getMonth();
+ let year = newDate.getFullYear();
+ let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+ return {months[month]} {year}
;
+ }
+
+ return (
+
+
+ {printDate(data.DATE)}
+
+
+
+
+ );
+}
+
+export default Statistic;
\ No newline at end of file
diff --git a/web/js/react/src/components/Statistic/Statistic.scss b/web/js/react/src/components/Statistic/Statistic.scss
new file mode 100644
index 000000000..7e2d9c3b6
--- /dev/null
+++ b/web/js/react/src/components/Statistic/Statistic.scss
@@ -0,0 +1,54 @@
+.statistic-item {
+ display: flex;
+ justify-content: center;
+ padding: 25px 0;
+ border-bottom: 1px solid #eee;
+
+ .l-col {
+ .date {
+ font-size: 13px;
+ margin-top: 3rem;
+ }
+ }
+
+ .r-col {
+ .name {
+ font-size: 32px;
+ }
+
+ .c-1 {
+ .bandwidth, .disk {
+ width: 220px;
+ }
+
+ div.sub-disk-stats {
+ width: 250px;
+ }
+ }
+
+ .c-2 {
+ margin-right: 0;
+
+ div>span:nth-child(2) {
+ margin: 0;
+ padding: 0;
+ }
+ }
+
+ .c-3.w-35 {
+ span.stat {
+ width: 80px;
+ }
+
+
+ div > span {
+ width: 50%;
+ text-align: left;
+ }
+
+ div>span:nth-child(2) {
+ width: 100px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/TopPanel/TopPanel.jsx b/web/js/react/src/components/TopPanel/TopPanel.jsx
new file mode 100644
index 000000000..20533c1d8
--- /dev/null
+++ b/web/js/react/src/components/TopPanel/TopPanel.jsx
@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { addActiveElement } from 'src/actions/MainNavigation/mainNavigationActions';
+import { logout } from 'src/actions/Session/sessionActions';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link, useHistory } from 'react-router-dom';
+import Spinner from '../Spinner/Spinner';
+
+import './TopPanel.scss';
+
+const TopPanel = ({ menuItems = [], extraMenuItems = [] }) => {
+ const mainNavigation = useSelector(state => state.mainNavigation);
+ const [loading, setLoading] = useState(false);
+ const { i18n } = window.GLOBAL.App;
+ const dispatch = useDispatch();
+ const history = useHistory();
+ const { userName } = useSelector(state => state.session);
+
+ const className = cls => {
+ let className = 'nav-link';
+
+ if (mainNavigation.activeElement === cls) {
+ return className += ' active';
+ }
+
+ return className;
+ }
+
+ const renderMenuItems = () => {
+ if (!menuItems.length) return;
+
+ return menuItems.map(({ route, name }) => (
+ {printName(data.DATE)}
+
+
+
+
+
+
+
+
+ {i18n.Bandwidth} {data.U_BANDWIDTH}{i18n.mb}
+ {i18n.Disk}: {data.U_DISK}{i18n.mb}
+
+
+
+
+ {i18n.Web}: {data.U_DISK_WEB}{i18n.mb}
+ {i18n.Mail}: {data.U_DISK_MAIL}{i18n.mb}
+
+
+ {i18n.Databases}: {data.U_DATABASES}{i18n.mb}
+ {i18n['User Directories']}: {data.U_DISK_DIRS}{i18n.mb}
+ {i18n['Web Domains']}: {data.U_WEB_DOMAINS}
+ {i18n['SSL Domains']}: {data.U_WEB_SSL}
+ {i18n['Web Aliases']}: {data.U_WEB_ALIASES}
+ {i18n['DNS Domains']}: {data.U_DNS_DOMAINS}
+ {i18n['DNS records']}: {data.U_DNS_RECORDS}
+ {i18n['Mail Domains']}: {data.U_MAIL_DOMAINS}
+ {i18n['Mail Accounts']}: {data.U_MAIL_ACCOUNTS}
+ {i18n['Databases']}: {data.U_DATABASES}
+ {i18n['Cron Jobs']}: {data.U_CRON_JOBS}
+ {i18n['IP Addresses']}: {data.IP_OWNED}
+
+
+
+ ));
+ }
+
+ const renderExtraMenuItems = () => {
+ if (!extraMenuItems.length) return;
+
+ return extraMenuItems.map(({ link, text }, index) => (
+
+ {text}
+
+ ));
+ }
+
+ const handleState = (event, route) => {
+ event.preventDefault();
+ history.push(route);
+ dispatch(addActiveElement(route));
+ }
+
+ const signOut = () => {
+ setLoading(true);
+
+ dispatch(logout())
+ .then(() => {
+ history.push('/login/');
+ setLoading(false);
+ },
+ error => {
+ setLoading(false);
+ console.error(error);
+ });
+ }
+
+ return (
+
+ {loading &&
+ );
+}
+
+export default TopPanel;
diff --git a/web/js/react/src/components/TopPanel/TopPanel.scss b/web/js/react/src/components/TopPanel/TopPanel.scss
new file mode 100644
index 000000000..c575dd403
--- /dev/null
+++ b/web/js/react/src/components/TopPanel/TopPanel.scss
@@ -0,0 +1,79 @@
+.panel-wrapper {
+ .logo-img {
+ background-image: url("/images/sprite.png?1446554103");
+ background-position: -117px -57px;
+ background-repeat: no-repeat;
+ height: 22px;
+ width: 70px;
+ margin-left: -2px;
+
+ &:hover {
+ background-color: transparent;
+ }
+ }
+
+ .nav-link {
+ padding: 0;
+ }
+
+ .left-menu {
+ a, button {
+ padding: 0 !important;
+ outline: none;
+ }
+
+ > div.nav-link {
+ padding: 0;
+ width: fit-content;
+ }
+ }
+
+ .profile-menu {
+ > div:nth-child(1) a {
+ &:hover {
+ color: #ffd62e;
+ }
+
+ &:active {
+ color: #f79b44;
+ }
+ }
+
+ > div:nth-child(2) a {
+ &:hover {
+ color: #C0E60E;
+ }
+
+ &:active {
+ color: #ffd62e;
+ }
+ }
+
+ .user {
+ color: #a4abad;
+ font-weight: 700;
+
+ &:hover {
+ color: #ffd62e;
+ }
+
+ &:active {
+ color: #f79b44;
+ }
+ }
+
+ .log-out {
+ color: white;
+ cursor: pointer;
+ font-weight: 100;
+
+ &:hover {
+ color: #C0E60E;
+ }
+
+ &:active {
+ color: #ffd62e;
+ }
+ }
+ }
+}
diff --git a/web/js/react/src/components/Update/Update.jsx b/web/js/react/src/components/Update/Update.jsx
new file mode 100644
index 000000000..c95debd70
--- /dev/null
+++ b/web/js/react/src/components/Update/Update.jsx
@@ -0,0 +1,55 @@
+import React, { } from 'react';
+import Container from '../ControlPanel/Container/Container';
+import ListItem from '../ControlPanel/ListItem/ListItem';
+import './Update.scss';
+
+const Update = props => {
+ const { data } = props;
+ const { i18n } = window.GLOBAL.App;
+
+ const isUpdated = status => {
+ if (status === 'no') {
+ return 'OUTDATED';
+ }
+
+ return 'UPDATED';
+ }
+
+ const isOutdated = status => {
+ return status === "no";
+ }
+
+ const checkItem = () => {
+ props.checkItem(props.data.NAME);
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {renderMenuItems()}
+
+ {renderExtraMenuItems()}
+
+
+ {userName}
+
+ {data.NAME}
+
+
+
+
+
+
+
+
+ {data.DESCR}
+ {i18n.Version}: {data.VERSION} {`(${data.ARCH})`}
+ {i18n.Release}: {data.RELEASE}
+
+
+ {`Vesta - ${i18n.USER}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default AddUser;
\ No newline at end of file
diff --git a/web/js/react/src/components/User/Add/AddUser.scss b/web/js/react/src/components/User/Add/AddUser.scss
new file mode 100644
index 000000000..507af9a1f
--- /dev/null
+++ b/web/js/react/src/components/User/Add/AddUser.scss
@@ -0,0 +1,59 @@
+$textColor: #555;
+
+.password-wrapper {
+ display: flex;
+
+ button {
+ color: #2C9491;
+
+ &:hover {
+ color: #ff6701;
+ }
+ }
+
+ span.eye {
+ margin-left: 9px;
+ }
+
+ span.eye-slash {
+ margin-left: 7px;
+ }
+}
+
+button.generate-password {
+ color:#2C9491;
+ font-weight: bold;
+
+ &:hover {
+ color: #ff6701;
+ }
+
+ &:active {
+ color: #F7D616;
+ }
+}
+
+input {
+ color: $textColor;
+}
+
+label[for=email] {
+ width: 100%;
+ display: flex;
+ align-items: center;
+
+ > div {
+ display: flex;
+ align-items: center;
+
+ input {
+ height: fit-content;
+ margin: 0 10px;
+ }
+
+ label {
+ margin: 0;
+ font-size: 12px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/User/Edit/EditUser.jsx b/web/js/react/src/components/User/Edit/EditUser.jsx
new file mode 100644
index 000000000..00fde50d8
--- /dev/null
+++ b/web/js/react/src/components/User/Edit/EditUser.jsx
@@ -0,0 +1,160 @@
+import React, { useEffect, useState } from 'react';
+import { addActiveElement, removeFocusedElement } from "../../../actions/MainNavigation/mainNavigationActions";
+import Password from '../../../components/ControlPanel/AddItemLayout/Form/Password/Password';
+import SelectInput from '../../ControlPanel/AddItemLayout/Form/SelectInput/SelectInput';
+import NameServers from '../../ControlPanel/AddItemLayout/Form/NameServers/NameServers';
+import TextInput from '../../ControlPanel/AddItemLayout/Form/TextInput/TextInput';
+import { updateUser, getUserInfo } from '../../../ControlPanelService/Users';
+import AddItemLayout from '../../ControlPanel/AddItemLayout/AddItemLayout';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Spinner from '../../../components/Spinner/Spinner';
+import Toolbar from '../../MainNav/Toolbar/Toolbar';
+import { useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import QS from 'qs';
+
+import './EditUser.scss';
+import { Helmet } from 'react-helmet';
+
+const EditUser = props => {
+ const token = localStorage.getItem("token");
+ const { i18n } = window.GLOBAL.App;
+ const history = useHistory();
+ const dispatch = useDispatch();
+ const [state, setState] = useState({
+ data: {},
+ loading: false,
+ username: '',
+ errorMessage: '',
+ okMessage: ''
+ });
+
+ useEffect(() => {
+ let queryParams = QS.parse(history.location.search, { ignoreQueryPrefix: true });
+ const { user } = queryParams;
+
+ dispatch(addActiveElement('/list/user/'));
+ dispatch(removeFocusedElement());
+
+ if (user) {
+ setState({ ...state, loading: true });
+
+ getUserInfo(user)
+ .then(response => {
+ setState({
+ ...state,
+ username: user,
+ data: response.data, errorMessage: response.data['error_msg'], okMessage: response.data['ok_msg'],
+ loading: false
+ });
+ })
+ .catch(err => console.error(err));
+ }
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let updatedUser = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ updatedUser[name] = value;
+ }
+
+ updatedUser['v_username'] = state.username;
+
+ if (Object.keys(updatedUser).length !== 0 && updatedUser.constructor === Object) {
+ setState({ ...state, loading: true });
+
+ updateUser(updatedUser, state.username)
+ .then(result => {
+ if (result.status === 200) {
+ const { error_msg, ok_msg } = 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 });
+ } else {
+ setState({ ...state, loading: false });
+ }
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ const convertObjectOfObjectsToArrayOfObjects = object => {
+ let result = [];
+
+ for (let i in object) {
+ result.push(i);
+ }
+
+ return result;
+ }
+
+ return (
+ {i18n['Adding User']}
+ {state.errorMessage ?
+
+ {state.okMessage ?
+
+
+ {`Vesta - ${i18n.USER}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default EditUser;
\ No newline at end of file
diff --git a/web/js/react/src/components/User/Edit/EditUser.scss b/web/js/react/src/components/User/Edit/EditUser.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/js/react/src/components/User/User.jsx b/web/js/react/src/components/User/User.jsx
new file mode 100644
index 000000000..17a122e9a
--- /dev/null
+++ b/web/js/react/src/components/User/User.jsx
@@ -0,0 +1,161 @@
+import React, { useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { loginAs, logout } from 'src/actions/Session/sessionActions';
+import Container from '../ControlPanel/Container/Container';
+import ListItem from '../ControlPanel/ListItem/ListItem';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link, useHistory } from 'react-router-dom';
+
+import './User.scss';
+
+const { i18n } = window.GLOBAL.App;
+
+const User = ({ data, toggleFav, handleModal, checkItem }) => {
+ const [loading, setLoading] = useState(false);
+ const session = useSelector(state => state.session);
+ const token = localStorage.getItem("token");
+ const history = useHistory();
+ const dispatch = useDispatch();
+
+ const printNameServers = servers => {
+ let serversArray = servers.split(',');
+
+ return serversArray.map(
+ (server, index) => {i18n['Editing User']}
+ {state.data.errorMessage ?
+
+ {state.okMessage ?
+ {server}
+ );
+ }
+
+ const signInAs = username => {
+ setLoading(true);
+
+ dispatch(loginAs(username))
+ .then(() => {
+ setLoading(false);
+ });
+ }
+
+ const signOut = () => {
+ setLoading(true);
+
+ dispatch(logout())
+ .then(() => {
+ history.push('/login/');
+ setLoading(false);
+ });
+ }
+
+ const printLoginActionButton = user => {
+ let currentUser = session.userName;
+ if (currentUser === user) {
+ return (
+
+
+
+ );
+ } else {
+ return (
+
+
+
+ );
+ }
+ }
+
+ const toggleFavorite = (starred) => {
+ if (starred) {
+ toggleFav(data.NAME, 'add');
+ } else {
+ toggleFav(data.NAME, 'delete');
+ }
+ }
+
+ const checkItemName = () => {
+ checkItem(data.NAME);
+ }
+
+ const handleSuspend = () => {
+ let suspendedStatus = data.SUSPENDED === 'yes' ? 'unsuspend' : 'suspend';
+ handleModal(data.spnd_conf, `/${suspendedStatus}/user?user=${data.NAME}&token=${token}`);
+ }
+
+ const handleDelete = () => {
+ handleModal(data.delete_conf, `/delete/user/?user=${data.NAME}&token=${token}`);
+ }
+
+ return (
+ {data.NAME}
+ {data.FNAME} {data.LNAME}
+
+
+
+
+
+
+
+
+ {i18n.Bandwidth} {data.U_BANDWIDTH} {i18n.mb}
+ {i18n.Disk}: {data.U_DISK} {i18n.mb}
+
+
+
+
+ {i18n.Web}: {data.U_DISK_WEB} {i18n.mb}
+ {i18n.Mail}: {data.U_DISK_MAIL} {i18n.mb}
+
+
+ {i18n.Databases}: {data.U_DATABASES} {i18n.mb}
+ {i18n['User Directories']}: {data.U_DISK_DIRS} {i18n.mb}
+ {i18n['Web Domains']}: {data.U_WEB_DOMAINS} / {data.WEB_DOMAINS}
+ {i18n['DNS Domains']}: {data.U_DNS_DOMAINS} / {data.DNS_DOMAINS}
+ {i18n['Mail Domains']}: {data.U_MAIL_DOMAINS} / {data.MAIL_DOMAINS}
+ {i18n.Databases}: {data.U_DATABASES} / {data.DATABASES}
+ {i18n['Cron Jobs']}: {data.U_CRON_JOBS} / {data.CRON_JOBS}
+ {i18n.Backups}: {data.U_BACKUPS} / {data.BACKUPS}
+ {i18n.Email}: {data.CONTACT}
+ {i18n.Package}: {data.PACKAGE}
+ {i18n['SSH Access']}: {data.SHELL}
+ {i18n['IP Addresses']}: {data.IP_OWNED}
+ {i18n['Name Servers']}: {printNameServers(data.NS)}
+
+ {printLoginActionButton(data.NAME)}
+
+
+ {i18n.edit}
+ {data.FOCUSED ? ↩ :
+
+
+
+
+
+
+
+
+ {`Vesta - ${i18n.WEB}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default AddWebDomain;
\ No newline at end of file
diff --git a/web/js/react/src/components/WebDomain/Add/AddWebDomain.scss b/web/js/react/src/components/WebDomain/Add/AddWebDomain.scss
new file mode 100644
index 000000000..da8368584
--- /dev/null
+++ b/web/js/react/src/components/WebDomain/Add/AddWebDomain.scss
@@ -0,0 +1,26 @@
+.add-web {
+ form {
+ .form-group {
+ .checkbox-wrapper {
+ display: flex;
+ align-items: center;
+
+ label {
+ margin: 0 10px;
+ };
+ }
+ }
+
+ .advanced-options-button {
+ button {
+ display: flex;
+ align-items: center;
+ padding: 0;
+
+ svg {
+ margin-left: 10px;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/WebDomain/Add/AdditionalFtp/AdditionalFtp.jsx b/web/js/react/src/components/WebDomain/Add/AdditionalFtp/AdditionalFtp.jsx
new file mode 100644
index 000000000..54e98ca56
--- /dev/null
+++ b/web/js/react/src/components/WebDomain/Add/AdditionalFtp/AdditionalFtp.jsx
@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import Password from '../../../../components/ControlPanel/AddItemLayout/Form/Password/Password';
+
+import './AdditionalFtp.scss';
+
+const AdditionalFtp = ({ domain, data = {}, index, onDeleteAdditionalFtp, prefixI18N }) => {
+ const { i18n } = window.GLOBAL.App;
+ const { userName } = useSelector(state => state.session);
+ const [state, setState] = useState({
+ path: '',
+ username: ''
+ });
+
+ return (
+ {i18n['Adding Domain']}
+
+
+ {state.errorMessage ?
+
+
+ {state.okMessage ?
+
+
+ );
+}
+
+export default AdditionalFtp;
\ No newline at end of file
diff --git a/web/js/react/src/components/WebDomain/Add/AdditionalFtp/AdditionalFtp.scss b/web/js/react/src/components/WebDomain/Add/AdditionalFtp/AdditionalFtp.scss
new file mode 100644
index 000000000..50d04b0e3
--- /dev/null
+++ b/web/js/react/src/components/WebDomain/Add/AdditionalFtp/AdditionalFtp.scss
@@ -0,0 +1,48 @@
+.additional-ftp {
+ .title {
+ span:nth-child(1) {
+ color: #555;
+ font-size: 15px;
+ font-weight: bold;
+ }
+ }
+
+ .form-transform {
+ margin-top: 15px;
+ transform: translateX(3rem);
+
+ .form-group.username {
+ display: flex;
+ flex-direction: column;
+
+ label {
+ margin: 0;
+ }
+
+ span {
+ font-size: 10pt;
+ color: #777;
+ font-weight: bold;
+ margin-bottom: 10px;
+ }
+
+ .input-wrapper {
+ display: flex;
+ align-items: center;
+
+ span {
+ color: #777;
+ font-size: 15px;
+ font-style: italic;
+ font-weight: normal;
+ margin-left: 15px;
+ }
+ }
+ }
+ }
+
+ .path-note {
+ font-weight: bold;
+ color: #555;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/WebDomain/Add/AdditionalFtpForEditing/AdditionalFtpForEditing.jsx b/web/js/react/src/components/WebDomain/Add/AdditionalFtpForEditing/AdditionalFtpForEditing.jsx
new file mode 100644
index 000000000..c7a9c1f45
--- /dev/null
+++ b/web/js/react/src/components/WebDomain/Add/AdditionalFtpForEditing/AdditionalFtpForEditing.jsx
@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import Password from '../../../../components/ControlPanel/AddItemLayout/Form/Password/Password';
+
+import './AdditionalFtpForEditing.scss';
+
+const AdditionalFtpForEditing = ({ domain, data = {}, index, onDeleteAdditionalFtp, prefixI18N }) => {
+ const { i18n } = window.GLOBAL.App;
+ const { user } = useSelector(state => state.session);
+ const [state, setState] = useState({
+ username: '',
+ path: ''
+ });
+
+ return (
+
+ {i18n.FTP} #{index}
+
+
+
+
+
+
+
+
+
+
+ {prefixI18N}
+
+
+
+ setState({ ...state, username: event.target.value })}
+ type="text"
+ className="form-control"
+ id={`username_${index}`}
+ name={`v_ftp_user[${index}][v_ftp_user]`} />
+ {userName + '_'}{state.username}
+
+
+
+ setState({ ...state, path: event.target.value })}
+ className="form-control"
+ id={`path${index}`}
+ name={`v_ftp_user[${index}][v_ftp_path]`} />
+ {`/web/${domain ? domain + '/' : ''}${state.path}`}
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default AdditionalFtpForEditing;
\ No newline at end of file
diff --git a/web/js/react/src/components/WebDomain/Add/AdditionalFtpForEditing/AdditionalFtpForEditing.scss b/web/js/react/src/components/WebDomain/Add/AdditionalFtpForEditing/AdditionalFtpForEditing.scss
new file mode 100644
index 000000000..3b8f94a54
--- /dev/null
+++ b/web/js/react/src/components/WebDomain/Add/AdditionalFtpForEditing/AdditionalFtpForEditing.scss
@@ -0,0 +1,7 @@
+.edit-web {
+ .additional-ftp {
+ .title .indexed-name {
+ font-weight: bold;
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/WebDomain/Add/AdditionalFtpWrapper/AdditionalFtpWrapper.jsx b/web/js/react/src/components/WebDomain/Add/AdditionalFtpWrapper/AdditionalFtpWrapper.jsx
new file mode 100644
index 000000000..dee8820f9
--- /dev/null
+++ b/web/js/react/src/components/WebDomain/Add/AdditionalFtpWrapper/AdditionalFtpWrapper.jsx
@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react';
+
+import AdditionalFtp from '../AdditionalFtp/AdditionalFtp';
+import AdditionalFtpForEditing from '../AdditionalFtpForEditing/AdditionalFtpForEditing';
+
+const AdditionalFtpWrapper = props => {
+ const { i18n } = window.GLOBAL.App;
+ const [state, setState] = useState({
+ additionalFtp: [1],
+ editIndexing: false
+ });
+
+ useEffect(() => {
+ if (props.ftps) {
+ // For EditWeb.jsx. Second state is kept for indexing Additional Ftp ( starting from 0 )
+ setState({ ...state, additionalFtp: props.ftps, editIndexing: true });
+ }
+ }, [props.ftps]);
+
+ const renderAdditionalFtps = () => {
+ if (state.additionalFtp.length) {
+ return state.additionalFtp.map((ftp, index) => {
+ if (state.editIndexing) {
+ return
+
+
+
+ {i18n.FTP} #{index + 1}
+
+
+
+
+
+
+
+
+
+
+ {prefixI18N}
+
+
+
+ setState({ ...state, username: event.target.value })}
+ type="text"
+ className="form-control"
+ id={`ftp_user_${index}`}
+ name={`v_ftp_user[${index}][v_ftp_user]`} />
+ {user + '_'}{state.username}
+
+
+
+
+
+
+ setState({ ...state, path: event.target.value })}
+ className="form-control"
+ id={`path${index}`}
+ name={`v_ftp_user[${index}][v_ftp_path]`} />
+ {`${data.v_ftp_pre_path ? data.v_ftp_pre_path : ''}/${state.path}`}
+
+
+ {
+ data.is_new === 1
+ && (
+
+
+
+
+ )
+ }
+
+
+ {renderAdditionalFtps()}
+
+
+
+ );
+}
+
+export default AdditionalFtpWrapper;
\ No newline at end of file
diff --git a/web/js/react/src/components/WebDomain/Add/AdditionalFtpWrapper/AdditionalFtpWrapper.scss b/web/js/react/src/components/WebDomain/Add/AdditionalFtpWrapper/AdditionalFtpWrapper.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/js/react/src/components/WebDomain/Add/AdvancedOptions/AdvancedOptions.jsx b/web/js/react/src/components/WebDomain/Add/AdvancedOptions/AdvancedOptions.jsx
new file mode 100644
index 000000000..e824c7f34
--- /dev/null
+++ b/web/js/react/src/components/WebDomain/Add/AdvancedOptions/AdvancedOptions.jsx
@@ -0,0 +1,124 @@
+import React, { useEffect, useState } from 'react';
+import Password from '../../../../components/ControlPanel/AddItemLayout/Form/Password/Password';
+import AdditionalFtpWrapper from '../AdditionalFtpWrapper/AdditionalFtpWrapper';
+import SslSupport from '../SslSupport/SslSupport';
+
+import './AdvancedOptions.scss';
+
+const AdvancedOptions = props => {
+ const { i18n } = window.GLOBAL.App;
+ const [state, setState] = useState({
+ sslSupport: false,
+ additionalFtp: false,
+ statisticsAuthCheckbox: false,
+ statisticsAuth: false,
+ aliases: ''
+ });
+
+ useEffect(() => {
+ let updatedDomain = `www.${props.domain}`;
+ setState({ ...state, aliases: updatedDomain });
+ }, [props.domain]);
+
+ const renderSslSupport = () => {
+ if (state.sslSupport) {
+ return
+
+ );
+}
+
+export default AdvancedOptions;
\ No newline at end of file
diff --git a/web/js/react/src/components/WebDomain/Add/AdvancedOptions/AdvancedOptions.scss b/web/js/react/src/components/WebDomain/Add/AdvancedOptions/AdvancedOptions.scss
new file mode 100644
index 000000000..c721bb263
--- /dev/null
+++ b/web/js/react/src/components/WebDomain/Add/AdvancedOptions/AdvancedOptions.scss
@@ -0,0 +1,9 @@
+.statistics-authorization {
+ transform: translateX(3rem);
+}
+
+.web-stats-wrapper {
+ display: flex;
+ flex-direction: column;
+ transform: translateX(3rem);
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/WebDomain/Add/SslSupport/SslSupport.jsx b/web/js/react/src/components/WebDomain/Add/SslSupport/SslSupport.jsx
new file mode 100644
index 000000000..1f3441f96
--- /dev/null
+++ b/web/js/react/src/components/WebDomain/Add/SslSupport/SslSupport.jsx
@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+
+import './SslSupport.scss';
+
+const SslSupport = props => {
+ const { i18n } = window.GLOBAL.App;
+ const [letsEncrypt, setLetsEncrypt] = useState(false);
+
+ return (
+
+
+
+
+
+
+
+
+ {renderSslSupport()}
+
+
+ setState({ ...state, sslSupport: !state.sslSupport })} />
+
+
+
+
+
+
+
+
+
+
+
+ setState({ ...state, statisticsAuthCheckbox: !state.statisticsAuthCheckbox })} />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {renderAdditionalFtp()}
+
+ setState({ ...state, additionalFtp: !state.additionalFtp })} />
+
+
+
+
+ );
+}
+
+export default SslSupport;
\ No newline at end of file
diff --git a/web/js/react/src/components/WebDomain/Add/SslSupport/SslSupport.scss b/web/js/react/src/components/WebDomain/Add/SslSupport/SslSupport.scss
new file mode 100644
index 000000000..7ea191a32
--- /dev/null
+++ b/web/js/react/src/components/WebDomain/Add/SslSupport/SslSupport.scss
@@ -0,0 +1,8 @@
+.ssl-support {
+ transform: translateX(3rem);
+
+ .lets-encrypt-span {
+ font-style: italic;
+ color: #89a40a;
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/WebDomain/Edit/EditWeb.jsx b/web/js/react/src/components/WebDomain/Edit/EditWeb.jsx
new file mode 100644
index 000000000..31be57f3a
--- /dev/null
+++ b/web/js/react/src/components/WebDomain/Edit/EditWeb.jsx
@@ -0,0 +1,287 @@
+import React, { useEffect, useState } from 'react';
+import { addActiveElement, removeFocusedElement } from "../../../actions/MainNavigation/mainNavigationActions";
+import { updateWebDomain, getDomainInfo } from '../../../ControlPanelService/Web';
+import Password from '../../../components/ControlPanel/AddItemLayout/Form/Password/Password';
+import SelectInput from '../../ControlPanel/AddItemLayout/Form/SelectInput/SelectInput';
+import AdditionalFtpWrapper from '../Add/AdditionalFtpWrapper/AdditionalFtpWrapper';
+import TextInput from '../../ControlPanel/AddItemLayout/Form/TextInput/TextInput';
+import Checkbox from '../../ControlPanel/AddItemLayout/Form/Checkbox/Checkbox';
+import AddItemLayout from '../../ControlPanel/AddItemLayout/AddItemLayout';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Spinner from '../../../components/Spinner/Spinner';
+import Toolbar from '../../MainNav/Toolbar/Toolbar';
+import SslSupport from './SslSupport/SslSupport';
+import { useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import QS from 'qs';
+
+import './EditWeb.scss';
+import TextArea from '../../ControlPanel/AddItemLayout/Form/TextArea/TextArea';
+import { Helmet } from 'react-helmet';
+
+const EditWeb = props => {
+ const token = localStorage.getItem("token");
+ const { i18n } = window.GLOBAL.App;
+ const history = useHistory();
+ const dispatch = useDispatch();
+ const [state, setState] = useState({
+ data: {},
+ domain: '',
+ webStat: '',
+ sslSupport: false,
+ letsEncrypt: false,
+ additionalFtp: true,
+ statAuth: false,
+ loading: false,
+ errorMessage: '',
+ okMessage: ''
+ });
+
+ useEffect(() => {
+ let queryParams = QS.parse(history.location.search, { ignoreQueryPrefix: true });
+ const { domain } = queryParams;
+
+ dispatch(addActiveElement('/list/web/'));
+ dispatch(removeFocusedElement());
+
+ if (domain) {
+ setState({ ...state, loading: true });
+
+ getDomainInfo(domain)
+ .then(response => {
+ setState({
+ ...state,
+ domain,
+ webStat: response.data.v_stats ? response.data.v_stats : 'none',
+ sslSupport: response.data.ssl === 'yes',
+ letsEncrypt: response.data.letsencrypt === 'yes',
+ data: response.data,
+ errorMessage: response.data['error_msg'],
+ okMessage: response.data['ok_msg'],
+ loading: false
+ });
+ })
+ .catch(err => console.error(err));
+ }
+ }, []);
+
+ const submitFormHandler = event => {
+ event.preventDefault();
+ let updatedDomain = {};
+
+ for (var [name, value] of (new FormData(event.target)).entries()) {
+ updatedDomain[name] = value;
+ }
+
+ updatedDomain['v_domain'] = state.domain;
+
+ if (Object.keys(updatedDomain).length !== 0 && updatedDomain.constructor === Object) {
+ setState({ ...state, loading: true });
+
+ updateWebDomain(updatedDomain, state.domain)
+ .then(result => {
+ if (result.status === 200) {
+ const { error_msg, ok_msg } = 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 });
+ } else {
+ setState({ ...state, loading: false });
+ }
+ }
+ })
+ .catch(err => console.error(err));
+ }
+ }
+
+ const formatData = object => {
+ let result = [];
+
+ for (let i in object) {
+ result.push(i);
+ }
+
+ return result;
+ }
+
+ const onChangeSslSupport = checked => {
+ setState({ ...state, sslSupport: checked });
+ }
+
+ const onChangeWebStats = webStat => {
+ setState({ ...state, webStat });
+ }
+
+ const onChangeStatisticsAuth = statAuth => {
+ setState({ ...state, statAuth });
+ }
+
+ const onChangeAdditionalFtp = additionalFtp => {
+ setState({ ...state, additionalFtp });
+ }
+
+ return (
+
+
+
+
+ setLetsEncrypt(!letsEncrypt)} />
+
+
+ {letsEncrypt ? i18n['Your certificate will be automatically issued in 5 minutes'] : null}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {`Vesta - ${i18n.WEB}`}
+
+
+
+
+
+ {state.loading ?
+
+ );
+}
+
+export default EditWeb;
\ No newline at end of file
diff --git a/web/js/react/src/components/WebDomain/Edit/EditWeb.scss b/web/js/react/src/components/WebDomain/Edit/EditWeb.scss
new file mode 100644
index 000000000..6ad6d3d84
--- /dev/null
+++ b/web/js/react/src/components/WebDomain/Edit/EditWeb.scss
@@ -0,0 +1,5 @@
+.edit-web {
+ .web-stat-additional {
+ transform: translateX(3rem);
+ }
+}
\ No newline at end of file
diff --git a/web/js/react/src/components/WebDomain/Edit/SslSupport/SslSupport.jsx b/web/js/react/src/components/WebDomain/Edit/SslSupport/SslSupport.jsx
new file mode 100644
index 000000000..ac33f25c8
--- /dev/null
+++ b/web/js/react/src/components/WebDomain/Edit/SslSupport/SslSupport.jsx
@@ -0,0 +1,143 @@
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import Checkbox from '../../../ControlPanel/AddItemLayout/Form/Checkbox/Checkbox';
+import SelectInput from '../../../ControlPanel/AddItemLayout/Form/SelectInput/SelectInput';
+import TextArea from '../../../ControlPanel/AddItemLayout/Form/TextArea/TextArea';
+
+import './SslSupport.scss';
+
+const SslSupport = props => {
+ const { i18n } = window.GLOBAL.App;
+ const [letsEncrypt, setLetsEncrypt] = useState(false);
+ const [sslHomeOptions, setSslHomeOptions] = useState(['public_html', 'public_shtml']);
+
+ useEffect(() => {
+ setLetsEncrypt(props.letsEncrypt);
+ }, []);
+
+ const onChangeLetsEncrypt = checked => {
+ setLetsEncrypt(checked);
+ }
+
+ return (
+ {i18n['Editing Domain']}
+ {state.data.errorMessage ?
+
+ {state.okMessage ?
+
+