diff options
7 files changed, 63 insertions, 25 deletions
diff --git a/synapse_topology/view/webui/js/actions/index.js b/synapse_topology/view/webui/js/actions/index.js index fb77130f54..1c68daf3f5 100644 --- a/synapse_topology/view/webui/js/actions/index.js +++ b/synapse_topology/view/webui/js/actions/index.js @@ -66,12 +66,12 @@ export const generate_secret_keys = consent => { } } -export const set_tls_cert_paths = (cert_path, cert_key_path) => { +export const set_tls_cert_paths = (cert_path, cert_key_path, callback) => { return dispatch => { dispatch(testing_tls_cert_paths(true)); post_cert_paths(cert_path, cert_key_path) .then( - result => dispatch(check_tls_cert_path_validity(result)), + result => dispatch(check_tls_cert_path_validity(result, callback)), error => dispatch(fail(error)) ) } @@ -88,14 +88,14 @@ const testing_tls_cert_paths = testing => ({ testing, }); -const check_tls_cert_path_validity = (args) => { - const { cert_path, cert_key_path } = args +const check_tls_cert_path_validity = ({ cert_path, cert_key_path }, callback) => { return dispatch => { dispatch(testing_tls_cert_paths(false)); dispatch(set_tls_certs(cert_path.absolute_path, cert_key_path.absolute_path)) dispatch(set_cert_path_validity({ cert_path, cert_key_path })); if (!cert_path.invalid && !cert_key_path.invalid) { dispatch(advance_ui()); + callback(); } } } @@ -199,7 +199,7 @@ export const set_tls = tls_type => ({ tls_type, }); -export const set_synapse_ports = (federation_port, client_port) => { +export const set_synapse_ports = (federation_port, client_port, callback) => { const fed_port_priv = federation_port < 1024; const client_port_priv = client_port < 1024; return dispatch => { @@ -213,14 +213,15 @@ export const set_synapse_ports = (federation_port, client_port) => { .then( results => dispatch(update_ports_free( fed_port_priv ? true : results.ports[0], - client_port_priv ? true : results.ports[1] + client_port_priv ? true : results.ports[1], + callback, )), error => dispatch(fail(error)), ) } }; -export const update_ports_free = (synapse_federation_port_free, synapse_client_port_free) => { +export const update_ports_free = (synapse_federation_port_free, synapse_client_port_free, callback) => { return dispatch => { dispatch(testing_synapse_ports(false)); dispatch({ @@ -229,7 +230,8 @@ export const update_ports_free = (synapse_federation_port_free, synapse_client_p synapse_client_port_free, }); if (synapse_federation_port_free && synapse_client_port_free) { - dispatch(advance_ui()) + callback(); + dispatch(advance_ui()); } } } diff --git a/synapse_topology/view/webui/js/components/Database.jsx b/synapse_topology/view/webui/js/components/Database.jsx index 8ed3018cae..cb6b877322 100644 --- a/synapse_topology/view/webui/js/components/Database.jsx +++ b/synapse_topology/view/webui/js/components/Database.jsx @@ -2,19 +2,26 @@ import React, { useState } from 'react'; import Accordion from 'react-bootstrap/Accordion'; import Card from 'react-bootstrap/Card'; +import useAccordionToggle from 'react-bootstrap/useAccordionToggle'; import { DATABASE_TYPES } from '../actions/constants' import { DATABASE_UI } from '../reducers/ui_constants'; + import AccordionToggle from '../containers/AccordionToggle'; +import { next_ui } from '../reducers/setup-ui-reducer'; + export default ({ onClick, }) => { const defaultDatabase = DATABASE_TYPES.POSTGRES; const [database, setDatabase] = useState(defaultDatabase) + + const toggle = useAccordionToggle(next_ui(DATABASE_UI)); + return <Card> <AccordionToggle as={Card.Header} eventKey={DATABASE_UI}> Database @@ -28,7 +35,10 @@ export default ({ <option value={DATABASE_TYPES.POSTGRES}>PostgreSQL</option> <option value={DATABASE_TYPES.SQLITE3}>SQLite3</option> </select> - <button onClick={() => onClick(database)}>Next</button> + <button onClick={() => { + toggle(); + onClick(database) + }}>Next</button> </Card.Body> </Accordion.Collapse> </Card> diff --git a/synapse_topology/view/webui/js/components/DelegationOptions.jsx b/synapse_topology/view/webui/js/components/DelegationOptions.jsx index b20529dcff..317d318fc1 100644 --- a/synapse_topology/view/webui/js/components/DelegationOptions.jsx +++ b/synapse_topology/view/webui/js/components/DelegationOptions.jsx @@ -6,10 +6,12 @@ import Accordion from 'react-bootstrap/Accordion'; import Card from 'react-bootstrap/Card'; import Tabs from 'react-bootstrap/Tabs'; import Tab from 'react-bootstrap/Tab'; +import useAccordionToggle from 'react-bootstrap/useAccordionToggle'; import { DELEGATION_TYPES } from '../actions/constants'; import { DELEGATION_OPTIONS_UI } from '../reducers/ui_constants'; import AccordionToggle from '../containers/AccordionToggle'; +import { next_ui } from '../reducers/setup-ui-reducer'; export default ({ servername, skip, onClick }) => { const defaultType = DELEGATION_TYPES.DNS; @@ -39,10 +41,15 @@ export default ({ servername, skip, onClick }) => { updateValidity(val, setClientPortValid); } + const toggle = useAccordionToggle(next_ui(DELEGATION_OPTIONS_UI)); + return <Card> <AccordionToggle as={Card.Header} eventKey={DELEGATION_OPTIONS_UI}> Delegation (optional) - <button onClick={skip}> + <button onClick={() => { + toggle(); + skip(); + }}> Skip </button> </AccordionToggle> @@ -115,7 +122,10 @@ export default ({ servername, skip, onClick }) => { /> <button disabled={delegatedServername && clientPortValid && fedPortValid ? undefined : true} - onClick={() => onClick(type, delegatedServername, fedPort, clientPort)} + onClick={() => { + toggle(); + onClick(type, delegatedServername, fedPort, clientPort) + }} > Use {type} </button> diff --git a/synapse_topology/view/webui/js/components/PortSelection.jsx b/synapse_topology/view/webui/js/components/PortSelection.jsx index 08e48c8662..0797146138 100644 --- a/synapse_topology/view/webui/js/components/PortSelection.jsx +++ b/synapse_topology/view/webui/js/components/PortSelection.jsx @@ -1,12 +1,15 @@ import React, { useState } from 'react'; -import ContentWrapper from '../containers/ContentWrapper'; - import Accordion from 'react-bootstrap/Accordion'; import Card from 'react-bootstrap/Card'; +import useAccordionToggle from 'react-bootstrap/useAccordionToggle'; + import { PORT_SELECTION_UI } from '../reducers/ui_constants'; + import AccordionToggle from '../containers/AccordionToggle'; -import ServerName from '../containers/ServerName'; +import ContentWrapper from '../containers/ContentWrapper'; + +import { next_ui } from '../reducers/setup-ui-reducer'; export default ({ servername, @@ -51,6 +54,8 @@ export default ({ updateValidity(val, setClientPortValid); } + const toggle = useAccordionToggle(next_ui(PORT_SELECTION_UI)); + return <Card> <AccordionToggle as={Card.Header} eventKey={PORT_SELECTION_UI}> {servername}'s ports @@ -108,7 +113,7 @@ export default ({ <div> <button disabled={clientPortValid && fedPortValid ? undefined : true} - onClick={() => onClick(parseInt(fedPort), parseInt(clientPort))} + onClick={() => onClick(parseInt(fedPort), parseInt(clientPort), toggle)} >Verify These Ports</button> </div> </Card.Body> diff --git a/synapse_topology/view/webui/js/components/TLS.jsx b/synapse_topology/view/webui/js/components/TLS.jsx index 9132b97d47..584a658608 100644 --- a/synapse_topology/view/webui/js/components/TLS.jsx +++ b/synapse_topology/view/webui/js/components/TLS.jsx @@ -6,10 +6,12 @@ import Accordion from 'react-bootstrap/Accordion'; import Card from 'react-bootstrap/Card'; import Tabs from 'react-bootstrap/Tabs'; import Tab from 'react-bootstrap/Tab'; +import useAccordionToggle from 'react-bootstrap/useAccordionToggle'; import { TLS_UI } from '../reducers/ui_constants'; import { TLS_TYPES, REVERSE_PROXY_TYPES } from '../actions/constants'; import AccordionToggle from '../containers/AccordionToggle'; +import { next_ui } from '../reducers/setup-ui-reducer'; const tlsLink = "https://en.wikipedia.org/wiki/Transport_Layer_Security"; const apacheLink = "http://httpd.apache.org/"; @@ -31,6 +33,8 @@ export default ({ testingCertPaths, uploadingCerts, certPathInvalid, certKeyPath const defaultValue = REVERSE_PROXY_TYPES.NGINX; const [reverseProxy, setReverseProxy] = useState(defaultValue); + const toggle = useAccordionToggle(next_ui(TLS_UI)); + return <Card> <AccordionToggle as={Card.Header} eventKey={TLS_UI}> TLS @@ -85,7 +89,10 @@ export default ({ testingCertPaths, uploadingCerts, certPathInvalid, certKeyPath <option value={REVERSE_PROXY_TYPES.OTHER}>Some other Reverse Proxy</option> </select> <div> - <button onClick={() => onClickReverseProxy(reverseProxy)}> + <button onClick={() => { + toggle(); + onClickReverseProxy(reverseProxy) + }}> I already/will use a Reverse Proxy with TLS </button> </div> @@ -102,7 +109,10 @@ export default ({ testingCertPaths, uploadingCerts, certPathInvalid, certKeyPath usually requires root privileges. Do not run Synapse as root. Use a Reverse Proxy or Authbind </p> - <button onClick={() => onClickACME()}>Use ACME</button> + <button onClick={() => { + toggle(); + onClickACME() + }}>Use ACME</button> </Tab> <Tab eventKey={TLS_TYPES.TLS} title="Provide your own TLS certs"> <p> @@ -128,7 +138,7 @@ export default ({ testingCertPaths, uploadingCerts, certPathInvalid, certKeyPath <button disabled={certPath && certKeyPath ? undefined : true} - onClick={() => onClickCertPath(certPath, certKeyPath)} + onClick={() => onClickCertPath(certPath, certKeyPath, toggle)} >Use TLS Path</button> <h3>OR..</h3> @@ -137,7 +147,7 @@ export default ({ testingCertPaths, uploadingCerts, certPathInvalid, certKeyPath <input type="file" name="cert" onChange={e => setCertFile(e.target.files[0])} /> <p>Upload the cert's private key file.</p> <input type="file" name="certkey" onChange={e => setCertKeyFile(e.target.files[0])} /> - <button disabled={certFile && certKeyFile ? undefined : true} onClick={() => onClickCertUpload(certFile, certKeyFile)}>Upload cert</button> + <button disabled={certFile && certKeyFile ? undefined : true} onClick={() => onClickCertUpload(certFile, certKeyFile, toggle)}>Upload cert</button> </Tab> </Tabs> diff --git a/synapse_topology/view/webui/js/containers/PortSelection.js b/synapse_topology/view/webui/js/containers/PortSelection.js index ec2b40367e..93c3ac7f89 100644 --- a/synapse_topology/view/webui/js/containers/PortSelection.js +++ b/synapse_topology/view/webui/js/containers/PortSelection.js @@ -33,8 +33,8 @@ const mapStateToProps = ({ base_config }) => ({ }); const mapDispathToProps = (dispatch) => ({ - onClick: (fedPort, clientPort) => { - dispatch(set_synapse_ports(fedPort, clientPort)); + onClick: (fedPort, clientPort, callback) => { + dispatch(set_synapse_ports(fedPort, clientPort, callback)); } }); diff --git a/synapse_topology/view/webui/js/containers/TLS.js b/synapse_topology/view/webui/js/containers/TLS.js index 6566954db6..cca3f1fa94 100644 --- a/synapse_topology/view/webui/js/containers/TLS.js +++ b/synapse_topology/view/webui/js/containers/TLS.js @@ -23,11 +23,12 @@ const mapDispathToProps = (dispatch) => ({ dispatch(set_tls(TLS_TYPES.REVERSE_PROXY)) dispatch(set_reverse_proxy(proxy_type)) }, - onClickCertPath: (cert_path, cert_key_path) => { - dispatch(set_tls_cert_paths(cert_path, cert_key_path)); + onClickCertPath: (cert_path, cert_key_path, callback) => { + dispatch(set_tls_cert_paths(cert_path, cert_key_path, callback)); }, - onClickCertUpload: (tls_cert_file, tls_key_file) => { - dispatch(upload_tls_cert_files(tls_cert_file, tls_key_file)); + onClickCertUpload: (tls_cert_file, tls_key_file, callback) => { + dispatch(set_tls_cert_files(tls_cert_file, tls_key_file)); + callback(); }, }); |