From 62d9652437f02cda1d8746cbd0be7cd59fa33762 Mon Sep 17 00:00:00 2001 From: Alexander Date: Mon, 1 Nov 2021 23:28:10 +0200 Subject: [PATCH] Improved LE support and CSR is now generted in modal window with cert prepopulating feature. --- .../AddItemLayout/Form/TextArea/TextArea.jsx | 2 +- src/react/src/components/MainNav/MainNav.jsx | 10 ++--- .../src/components/MainNav/Panel/Panel.jsx | 16 +++---- .../src/components/MainNav/Stat-menu/Menu.jsx | 4 +- src/react/src/components/User/Add/AddUser.jsx | 1 - .../components/WebDomain/Add/AddWebDomain.jsx | 36 +++++++++++++-- .../WebDomain/Add/AddWebDomain.scss | 24 ++++++++++ .../Add/AdvancedOptions/AdvancedOptions.jsx | 2 +- .../WebDomain/Add/SslSupport/SslSupport.jsx | 27 ++++++------ .../src/components/WebDomain/Edit/EditWeb.jsx | 44 +++++++++++++++++++ .../components/WebDomain/Edit/EditWeb.scss | 24 ++++++++++ .../WebDomain/Edit/SslSupport/SslSupport.jsx | 36 ++++++--------- .../ControlPanelContent.jsx | 2 - .../src/containers/GenerateCSR/index.jsx | 29 ++++-------- src/react/src/containers/Users/Users.jsx | 8 ++-- 15 files changed, 182 insertions(+), 83 deletions(-) diff --git a/src/react/src/components/ControlPanel/AddItemLayout/Form/TextArea/TextArea.jsx b/src/react/src/components/ControlPanel/AddItemLayout/Form/TextArea/TextArea.jsx index 39a0fefae..8cb226e4e 100644 --- a/src/react/src/components/ControlPanel/AddItemLayout/Form/TextArea/TextArea.jsx +++ b/src/react/src/components/ControlPanel/AddItemLayout/Form/TextArea/TextArea.jsx @@ -12,7 +12,7 @@ const TextArea = ({ id, name, defaultValue = '', title, optionalTitle = '', rows id={id} rows={rows} name={name} - disabled={disabled} + readOnly={disabled} defaultValue={defaultValue} {...rest} > diff --git a/src/react/src/components/MainNav/MainNav.jsx b/src/react/src/components/MainNav/MainNav.jsx index 9d0e81171..64f4c33c5 100644 --- a/src/react/src/components/MainNav/MainNav.jsx +++ b/src/react/src/components/MainNav/MainNav.jsx @@ -19,18 +19,18 @@ const MainNav = () => { }); const { userName } = useSelector(state => state.session); - const { session: { look } } = useSelector(state => state.userSession); + const { session } = useSelector(state => state.userSession); const { user } = useSelector(state => state.menuCounters); const { activeElement, focusedElement, adminMenuTabs, userMenuTabs } = useSelector(state => state.mainNavigation); const { controlPanelFocusedElement } = useSelector(state => state.controlPanelContent); const dispatch = useDispatch(); useEffect(() => { - if (!userName || !Object.entries(user).length) { + if (!userName || !Object.entries(user).length || !Object.entries(session).length) { return history.push('/login'); } - if (look) { + if (session.look) { const commonUserRoutes = ['package', 'ip', 'rrd', 'updates', 'firewall', 'server']; const splitPath = history.location.pathname.split('/')[2]; @@ -41,11 +41,11 @@ const MainNav = () => { } } - const tabs = look ? userMenuTabs : adminMenuTabs; + const tabs = session.look ? userMenuTabs : adminMenuTabs; setState({ ...state, tabs }); setLoading(false); - }, [userName, user, history, look]); + }, [userName, user, history, session]); const controlFocusedTabWithCallback = useCallback(event => { let isSearchInputFocused = document.querySelector('input:focus') || document.querySelector('textarea:focus') || document.querySelector('textarea:focus'); diff --git a/src/react/src/components/MainNav/Panel/Panel.jsx b/src/react/src/components/MainNav/Panel/Panel.jsx index a33a39d24..ad51de9d0 100644 --- a/src/react/src/components/MainNav/Panel/Panel.jsx +++ b/src/react/src/components/MainNav/Panel/Panel.jsx @@ -10,7 +10,7 @@ import './Panel.scss'; const Panel = props => { const { i18n, userName } = useSelector(state => state.session); - const { session: { look, user, FIREWALL_SYSTEM, FILEMANAGER_KEY, SOFTACULOUS } } = useSelector(state => state.userSession); + const { session } = useSelector(state => state.userSession); const { activeElement, focusedElement } = useSelector(state => state.mainNavigation); const dispatch = useDispatch(); const [loading, setLoading] = useState(false); @@ -67,7 +67,7 @@ const Panel = props => {
{loading && } -
+
dispatch(addActiveElement('/list/user/'))}> @@ -97,14 +97,14 @@ const Panel = props => {
handleState("/list/updates/", event)} onKeyPress={event => event.preventDefault()}>{i18n.Updates}
- {FIREWALL_SYSTEM &&
+ {session.FIREWALL_SYSTEM &&
handleState("/list/firewall/", event)} onKeyPress={event => event.preventDefault()}>{i18n.Firewall}
} )} - {FILEMANAGER_KEY &&
+ {session.FILEMANAGER_KEY &&
{i18n['File Manager']}
} - {SOFTACULOUS === "yes" &&
{i18n.Apps ?? 'Apps'} + {session.SOFTACULOUS === "yes" &&
{i18n.Apps ?? 'Apps'}
} {userName === 'admin' && (
@@ -116,11 +116,11 @@ const Panel = props => {
- {look + {session.look ?
- {user} + {session.user} - {look} + {session.look}
: userName } diff --git a/src/react/src/components/MainNav/Stat-menu/Menu.jsx b/src/react/src/components/MainNav/Stat-menu/Menu.jsx index 6720dfdb4..51672d657 100644 --- a/src/react/src/components/MainNav/Stat-menu/Menu.jsx +++ b/src/react/src/components/MainNav/Stat-menu/Menu.jsx @@ -28,7 +28,7 @@ const style = ({ menuHeight, mobile }) => { const Menu = props => { const { activeElement, focusedElement } = useSelector(state => state.mainNavigation); const { i18n } = useSelector(state => state.session); - const { session: { look } } = useSelector(state => state.userSession); + const { session } = useSelector(state => state.userSession); const { user } = useSelector(state => state.menuCounters); const dispatch = useDispatch(); @@ -72,7 +72,7 @@ const Menu = props => {

{i18n.USER}

{ - look + session.look ? (<>
{i18n.Disk}: {sizeFormatter(user.U_DISK)}
{i18n.Bandwidth}: {sizeFormatter(user.U_BANDWIDTH)}
diff --git a/src/react/src/components/User/Add/AddUser.jsx b/src/react/src/components/User/Add/AddUser.jsx index ebd978984..fecf74ba8 100644 --- a/src/react/src/components/User/Add/AddUser.jsx +++ b/src/react/src/components/User/Add/AddUser.jsx @@ -19,7 +19,6 @@ import HtmlParser from 'react-html-parser'; const AddUser = props => { const { i18n } = useSelector(state => state.session); const { session } = useSelector(state => state.userSession); - const userLanguage = localStorage.getItem("language"); const history = useHistory(); const dispatch = useDispatch(); const [state, setState] = useState({ diff --git a/src/react/src/components/WebDomain/Add/AddWebDomain.jsx b/src/react/src/components/WebDomain/Add/AddWebDomain.jsx index bd7313e51..1200bff38 100644 --- a/src/react/src/components/WebDomain/Add/AddWebDomain.jsx +++ b/src/react/src/components/WebDomain/Add/AddWebDomain.jsx @@ -6,7 +6,6 @@ import { addWeb, getWebDomainInfo } from '../../../ControlPanelService/Web'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import AdvancedOptions from './AdvancedOptions/AdvancedOptions'; import Checkbox from 'src/components/ControlPanel/AddItemLayout/Form/Checkbox/Checkbox'; -import SelectInput from 'src/components/ControlPanel/AddItemLayout/Form/SelectInput/SelectInput'; import TextArea from 'src/components/ControlPanel/AddItemLayout/Form/TextArea/TextArea'; import Toolbar from '../../MainNav/Toolbar/Toolbar'; import { useHistory } from 'react-router-dom'; @@ -14,6 +13,8 @@ import Spinner from '../../Spinner/Spinner'; import { useDispatch, useSelector } from 'react-redux'; import './AddWebDomain.scss'; +import GenerateSSL from 'src/containers/GenerateCSR'; +import 'src/components/Modal/Modal.scss'; import { Helmet } from 'react-helmet'; import { refreshCounters } from 'src/actions/MenuCounters/menuCounterActions'; import HtmlParser from 'react-html-parser'; @@ -23,6 +24,7 @@ const AddWebDomain = props => { const { session } = useSelector(state => state.userSession); const dispatch = useDispatch(); const token = localStorage.getItem("token"); + const [modalVisible, setModalVisible] = useState(false); const history = useHistory(); const [state, setState] = useState({ loading: false, @@ -31,6 +33,8 @@ const AddWebDomain = props => { proxySupport: true, showAdvancedOptions: false, okMessage: '', + ssl_crt: '', + ssl_key: '', domain: '', errorMessage: '', webStats: [], @@ -83,7 +87,14 @@ const AddWebDomain = props => { const renderAdvancedOptions = () => { if (state.showAdvancedOptions) { - return ; + return setModalVisible(bool)} + sslCertificate={state.ssl_crt} + sslKey={state.ssl_key} + domain={state.domain} + webStats={state.webStats} + prePath={state.prePath} />; } } @@ -239,8 +250,27 @@ const AddWebDomain = props => { )} +
); } -export default AddWebDomain; \ No newline at end of file +export default AddWebDomain; diff --git a/src/react/src/components/WebDomain/Add/AddWebDomain.scss b/src/react/src/components/WebDomain/Add/AddWebDomain.scss index da8368584..0fca5455b 100644 --- a/src/react/src/components/WebDomain/Add/AddWebDomain.scss +++ b/src/react/src/components/WebDomain/Add/AddWebDomain.scss @@ -23,4 +23,28 @@ } } } + + #c-panel-modal { + padding: 2rem; + + form .form-group input[type="text"] { + width: 90% !important; + } + + label { + color: white; + } + + .form-group { + padding-left: 1.5rem; + + textarea { + width: 90% !important; + } + } + + .l-col { + display: none; + } + } } \ No newline at end of file diff --git a/src/react/src/components/WebDomain/Add/AdvancedOptions/AdvancedOptions.jsx b/src/react/src/components/WebDomain/Add/AdvancedOptions/AdvancedOptions.jsx index 278d0aabf..eb649b73f 100644 --- a/src/react/src/components/WebDomain/Add/AdvancedOptions/AdvancedOptions.jsx +++ b/src/react/src/components/WebDomain/Add/AdvancedOptions/AdvancedOptions.jsx @@ -23,7 +23,7 @@ const AdvancedOptions = ({ prefixI18N, prePath, ...props }) => { const renderSslSupport = () => { if (state.sslSupport) { - return ; + return props.setModalVisible(bool)} />; } } diff --git a/src/react/src/components/WebDomain/Add/SslSupport/SslSupport.jsx b/src/react/src/components/WebDomain/Add/SslSupport/SslSupport.jsx index 877179a1d..125e2ea81 100644 --- a/src/react/src/components/WebDomain/Add/SslSupport/SslSupport.jsx +++ b/src/react/src/components/WebDomain/Add/SslSupport/SslSupport.jsx @@ -1,5 +1,7 @@ import React, { useState } from 'react'; import { useSelector } from 'react-redux'; +import { Link } from 'react-router-dom'; +import TextArea from 'src/components/ControlPanel/AddItemLayout/Form/TextArea/TextArea'; import './SslSupport.scss'; @@ -22,30 +24,27 @@ const SslSupport = props => { {letsEncrypt ? i18n['Your certificate will be automatically issued in 5 minutes'] : null}
-
- - -
+ -
- - -
+ +
- +
); } -export default SslSupport; \ No newline at end of file +export default SslSupport; diff --git a/src/react/src/components/WebDomain/Edit/EditWeb.jsx b/src/react/src/components/WebDomain/Edit/EditWeb.jsx index 49a348fd4..e38e5d181 100644 --- a/src/react/src/components/WebDomain/Edit/EditWeb.jsx +++ b/src/react/src/components/WebDomain/Edit/EditWeb.jsx @@ -13,6 +13,8 @@ import Toolbar from '../../MainNav/Toolbar/Toolbar'; import SslSupport from './SslSupport/SslSupport'; import { useHistory } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; +import GenerateSSL from 'src/containers/GenerateCSR'; +import 'src/components/Modal/Modal.scss'; import QS from 'qs'; import './EditWeb.scss'; @@ -28,6 +30,7 @@ const EditWeb = props => { const history = useHistory(); const dispatch = useDispatch(); const [errorMessage, setErrorMessage] = useState(''); + const [modalVisible, setModalVisible] = useState(false); const [okMessage, setOkMessage] = useState(''); const [state, setState] = useState({ data: {}, @@ -85,6 +88,26 @@ const EditWeb = props => { if (updatedDomain['v_ssl'] === 'on') { updatedDomain['v_ssl'] = 'yes'; + } else { + delete updatedDomain['v_ssl']; + } + + if (updatedDomain['v_letsencrypt'] === 'on') { + updatedDomain['v_letsencrypt'] = 'yes'; + } else { + delete updatedDomain['v_letsencrypt']; + } + + if (!updatedDomain['v_ssl_ca']) { + delete updatedDomain['v_ssl_ca']; + } + + if (!updatedDomain['v_ssl_crt']) { + delete updatedDomain['v_ssl_crt']; + } + + if (!updatedDomain['v_ssl_key']) { + delete updatedDomain['v_ssl_key']; } if (Object.keys(updatedDomain).length !== 0 && updatedDomain.constructor === Object) { @@ -246,6 +269,7 @@ const EditWeb = props => { sslIssuer={state.data.ssl_issuer} sslCertificate={state.data.ssl_crt} sslKey={state.data.ssl_key} + setModalVisible={bool => setModalVisible(bool)} sslCertificateAuthority={state.data.ssl_ca} domain={state.domain} sslHome={state.data.ssl_home} @@ -307,6 +331,26 @@ const EditWeb = props => { } + +
); } diff --git a/src/react/src/components/WebDomain/Edit/EditWeb.scss b/src/react/src/components/WebDomain/Edit/EditWeb.scss index 6ad6d3d84..d00b42b74 100644 --- a/src/react/src/components/WebDomain/Edit/EditWeb.scss +++ b/src/react/src/components/WebDomain/Edit/EditWeb.scss @@ -2,4 +2,28 @@ .web-stat-additional { transform: translateX(3rem); } + + #c-panel-modal { + padding: 2rem; + + form .form-group input[type="text"] { + width: 90% !important; + } + + label { + color: white; + } + + .form-group { + padding-left: 1.5rem; + + textarea { + width: 90% !important; + } + } + + .l-col { + display: none; + } + } } \ No newline at end of file diff --git a/src/react/src/components/WebDomain/Edit/SslSupport/SslSupport.jsx b/src/react/src/components/WebDomain/Edit/SslSupport/SslSupport.jsx index ba1672fd6..1117be528 100644 --- a/src/react/src/components/WebDomain/Edit/SslSupport/SslSupport.jsx +++ b/src/react/src/components/WebDomain/Edit/SslSupport/SslSupport.jsx @@ -1,16 +1,13 @@ import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; -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 } = useSelector(state => state.session); - const [letsEncrypt, setLetsEncrypt] = useState(false); - const [sslHomeOptions, setSslHomeOptions] = useState(['public_html', 'public_shtml']); + const [letsEncrypt, setLetsEncrypt] = useState(props.letsEncrypt); useEffect(() => { setLetsEncrypt(props.letsEncrypt); @@ -22,19 +19,18 @@ const SslSupport = props => { return (
- + <> + - + {!props.letsEncrypt && {letsEncrypt ? i18n['Your certificate will be automatically issued in 5 minutes'] : null}} + + +