diff options
| author | Jorik Schellekens <joriks@matrix.org> | 2019-08-15 16:46:52 +0100 |
|---|---|---|
| committer | Jorik Schellekens <joriks@matrix.org> | 2019-08-28 15:59:54 +0100 |
| commit | 5414d470f507fbd2b657a1af1022a86f0dba45e2 (patch) | |
| tree | d3b6f17a952e8c0ba28057f72613bf7d61273002 /synapse_topology/webui | |
| parent | Ignore yarn errors (diff) | |
| download | synapse-5414d470f507fbd2b657a1af1022a86f0dba45e2.tar.xz | |
Linted and loaded.
Diffstat (limited to 'synapse_topology/webui')
53 files changed, 1867 insertions, 1594 deletions
diff --git a/synapse_topology/webui/.eslintrc.js b/synapse_topology/webui/.eslintrc.js index b3dd77da95..57884cab92 100644 --- a/synapse_topology/webui/.eslintrc.js +++ b/synapse_topology/webui/.eslintrc.js @@ -9,8 +9,8 @@ const path = require('path'); module.exports = { parser: "babel-eslint", plugins: [ - "react", - "babel" + "react", + "babel" ], env: { es6: true, @@ -21,7 +21,7 @@ module.exports = { } }, rules: { - // rules we've always adhered to or now do + // rules we've always adhered to or now do "max-len": ["error", { code: 90, ignoreComments: true, @@ -66,10 +66,9 @@ module.exports = { // we set these to warnings, and assert that the number // of warnings doesn't exceed a given threshold "no-var": ["warn"], - "brace-style": ["warn", "1tbs", {"allowSingleLine": true}], + "brace-style": ["warn", "1tbs", { "allowSingleLine": true }], "prefer-rest-params": ["warn"], "prefer-spread": ["warn"], - "one-var": ["warn"], "padded-blocks": ["warn"], "no-extend-native": ["warn"], "camelcase": ["warn"], diff --git a/synapse_topology/webui/src/index.html b/synapse_topology/webui/src/index.html deleted file mode 100644 index 6eac2d5e13..0000000000 --- a/synapse_topology/webui/src/index.html +++ /dev/null @@ -1,15 +0,0 @@ -<html> - -<head> - <meta charset="utf-8"> - <title>Topology - The synapse configuration tool</title> -</head> - -<link rel="stylesheet" href="scss/bootstrap.min.css"> - -<body> - <div id="content" /> - <script src="dist/bundle.js" type="text/javascript"></script> -</body> - -</html> \ No newline at end of file diff --git a/synapse_topology/webui/src/js/actions/constants.js b/synapse_topology/webui/src/js/actions/constants.js index 6fbe7d57f6..6dc27ee777 100644 --- a/synapse_topology/webui/src/js/actions/constants.js +++ b/synapse_topology/webui/src/js/actions/constants.js @@ -1,24 +1,24 @@ export const DELEGATION_TYPES = { - LOCAL: "local", - WELL_KNOWN: ".well_known", - DNS: "DNS SRV", -} + LOCAL: "local", + WELL_KNOWN: ".well_known", + DNS: "DNS SRV", +}; export const REVERSE_PROXY_TYPES = { - CADDY: "CADDY", - APACHE: "APACHE", - HAPROXY: "HAPROXY", - NGINX: "NGINX", - OTHER: "OTHER", -} + CADDY: "CADDY", + APACHE: "APACHE", + HAPROXY: "HAPROXY", + NGINX: "NGINX", + OTHER: "OTHER", +}; export const TLS_TYPES = { - ACME: "ACME", - TLS: "TLS", - REVERSE_PROXY: "REVERSE_PROXY", -} + ACME: "ACME", + TLS: "TLS", + REVERSE_PROXY: "REVERSE_PROXY", +}; export const DATABASE_TYPES = { - SQLITE3: "sqlite3", - POSTGRES: "psycopg2", -} \ No newline at end of file + SQLITE3: "sqlite3", + POSTGRES: "psycopg2", +}; \ No newline at end of file diff --git a/synapse_topology/webui/src/js/actions/index.js b/synapse_topology/webui/src/js/actions/index.js index 1c68daf3f5..f21bdad520 100644 --- a/synapse_topology/webui/src/js/actions/index.js +++ b/synapse_topology/webui/src/js/actions/index.js @@ -1,254 +1,301 @@ import { - ADVANCE_UI, - BACK_UI, - SET_SERVERNAME, - SET_STATS, - BASE_CONFIG_CHECKED, - FAIL, - SET_SECRET_KEY, - GETTING_SECRET_KEY, - SET_DELEGATION, - SET_DELEGATION_SERVERNAME, - SET_DELEGATION_PORTS, - SET_REVERSE_PROXY, - SET_TLS, - TESTING_TLS_CERT_PATHS, - SET_TLS_CERT_PATHS, - SET_TLS_CERT_PATHS_VALIDITY, - SET_TLS_CERT_FILES, - UPLOADING_TLS_CERT_PATHS, - TESTING_SYNAPSE_PORTS, - SET_SYNAPSE_PORTS, - SET_SYNAPSE_PORTS_FREE, - SET_DATABASE, - SET_CONFIG_DIR, - WRITE_CONFIG, + ADVANCE_UI, + BACK_UI, + SET_SERVERNAME, + SET_STATS, + BASE_CONFIG_CHECKED, + FAIL, + SET_SECRET_KEY, + GETTING_SECRET_KEY, + SET_DELEGATION, + SET_DELEGATION_SERVERNAME, + SET_DELEGATION_PORTS, + SET_REVERSE_PROXY, + SET_TLS, + TESTING_TLS_CERT_PATHS, + SET_TLS_CERT_PATHS, + SET_TLS_CERT_PATHS_VALIDITY, + SET_TLS_CERT_FILES, + UPLOADING_TLS_CERT_PATHS, + TESTING_SYNAPSE_PORTS, + SET_SYNAPSE_PORTS, + SET_SYNAPSE_PORTS_FREE, + SET_DATABASE, + SET_CONFIG_DIR, } from './types'; import { - get_server_setup, - post_server_name, - get_secretkey, - post_cert_paths, - post_certs, - test_ports, - post_config, - start_synapse, + getServerSetup, + postServerName, + getSecretkey, + postCertPaths, + postCerts, + testPorts, + postConfig, + startSynapse, } from '../api'; + import { CONFIG_LOCK, CONFIG_DIR } from '../api/constants'; -import { base_config_to_synapse_config } from '../utils/yaml'; +import { baseConfigToSynapseConfig } from '../utils/yaml'; export const startup = () => { - return dispatch => { - get_server_setup().then( - result => { - dispatch(start(result[CONFIG_LOCK])); - dispatch(set_config_dir(result[CONFIG_DIR])); - }, - error => dispatch(fail(error)), - ) - } -} - -const set_config_dir = dir => ({ - type: SET_CONFIG_DIR, - config_dir: dir, -}); - -export const generate_secret_keys = consent => { - return (dispatch, getState) => { - dispatch(getting_secret_keys()); - post_server_name(getState().base_config.servername, consent) - .then( - result => dispatch(get_secret_key()), - error => dispatch(fail(error)) - ) - } -} - -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, callback)), - error => dispatch(fail(error)) - ) - } -} - -const set_tls_certs = (cert_path, cert_key_path) => ({ - type: SET_TLS_CERT_PATHS, - cert_path, - cert_key_path, -}) -const testing_tls_cert_paths = testing => ({ - type: TESTING_TLS_CERT_PATHS, - testing, + return dispatch => { + + getServerSetup().then( + result => { + + dispatch(start(result[CONFIG_LOCK])); + dispatch(setConfigDir(result[CONFIG_DIR])); + + }, + error => dispatch(fail(error)), + ) + + }; + +}; + +const setConfigDir = dir => ({ + type: SET_CONFIG_DIR, + configDir: dir, }); -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(); - } - } -} - -export const upload_tls_cert_files = (tls_cert_file, tls_cert_key_file) => - dispatch => { - dispatch(set_tls_cert_files(tls_cert_file, tls_cert_key_file)); - dispatch(uploading_tls_cert_files(true)); - post_certs(tls_cert_file, tls_cert_key_file) - .then( - result => { - dispatch(uploading_tls_cert_files(false)); - dispatch(advance_ui()) - }, - error => dispatch(fail(error)), - ) - } - -const uploading_tls_cert_files = uploading => ({ - type: UPLOADING_TLS_CERT_PATHS, - uploading -}) +export const generateSecretKeys = consent => { + + return (dispatch, getState) => { + + dispatch(gettingSecretKeys()); + postServerName(getState().baseConfig.servername, consent) + .then( + result => dispatch(getSecretKey()), + error => dispatch(fail(error)), + ); + + }; + +}; + +export const setTlsCertPaths = (certPath, certKeyPath, callback) => { + + return dispatch => { + + dispatch(testingTlsCertPaths(true)); + postCertPaths(certPath, certKeyPath) + .then( + result => dispatch(checkTlsCertPathValidity(result, callback)), + error => dispatch(fail(error)), + ); + + }; + +}; + +const setTlsCerts = (certPath, certKeyPath) => ({ + type: SET_TLS_CERT_PATHS, + certPath: certPath, + certKeyPath: certKeyPath, +}); + +const testingTlsCertPaths = testing => ({ + type: TESTING_TLS_CERT_PATHS, + testing, +}); + +const checkTlsCertPathValidity = + ({ cert_path: certPath, cert_key_path: certKeyPath }, callback) => { + + return dispatch => { + + dispatch(testingTlsCertPaths(false)); + dispatch(setTlsCerts(certPath.absolute_path, certKeyPath.absolute_path)) + dispatch(setCertPathValidity({ certPath, certKeyPath })); + + if (!certPath.invalid && !certKeyPath.invalid) { + + dispatch(advanceUI()); + callback(); + + }; -export const set_tls_cert_files = (tls_cert_file, tls_cert_key_file) => ({ - type: SET_TLS_CERT_FILES, - tls_cert_file, - tls_cert_key_file, + }; + + }; + +export const uploadTlsCertFiles = (tlsCertFile, tlsCertKeyFile) => + + dispatch => { + + dispatch(setTlsCertFiles(tlsCertFile, tlsCertKeyFile)); + dispatch(uploadingTlsCertFiles(true)); + postCerts(tlsCertFile, tlsCertKeyFile) + .then( + result => { + + dispatch(uploadingTlsCertFiles(false)); + dispatch(advanceUI()) + + }, + error => dispatch(fail(error)), + ) + + }; + +const uploadingTlsCertFiles = uploading => ({ + type: UPLOADING_TLS_CERT_PATHS, + uploading, +}); + +export const setTlsCertFiles = (tlsCertFile, tlsCertKeyFile) => ({ + type: SET_TLS_CERT_FILES, + tlsCertFile, + tlsCertKeyFile, }) -const set_cert_path_validity = ({ cert_path, cert_key_path }) => ({ - type: SET_TLS_CERT_PATHS_VALIDITY, - cert_path_invalid: cert_path.invalid, - cert_key_path_invalid: cert_key_path.invalid, + +const setCertPathValidity = ({ certPath, certKeyPath }) => ({ + type: SET_TLS_CERT_PATHS_VALIDITY, + certPathInvalid: certPath.invalid, + certKeyPathInvalid: certKeyPath.invalid, }); -export const getting_secret_keys = () => ({ - type: GETTING_SECRET_KEY, +export const gettingSecretKeys = () => ({ + type: GETTING_SECRET_KEY, }); -export const get_secret_key = () => { - return dispatch => { - get_secretkey().then( - result => dispatch(set_secret_key(result)), - error => dispatch(fail(error)), - ) - } -} +export const getSecretKey = () => { + + return dispatch => { + + getSecretkey().then( + result => dispatch(setSecretKey(result)), + error => dispatch(fail(error)), + ) + + }; + +}; -export const set_secret_key = key => ({ - type: SET_SECRET_KEY, - key, +export const setSecretKey = key => ({ + type: SET_SECRET_KEY, + key, }); -export const start = setup_done => ({ - type: BASE_CONFIG_CHECKED, - setup_done, +export const start = setupDone => ({ + type: BASE_CONFIG_CHECKED, + setupDone, }); export const fail = reason => ({ - type: FAIL, - reason, + type: FAIL, + reason, }); -export const advance_ui = option => ({ - type: ADVANCE_UI, - option, +export const advanceUI = option => ({ + type: ADVANCE_UI, + option, }); -export const set_servername = servername => ({ - type: SET_SERVERNAME, - servername, +export const setServername = servername => ({ + type: SET_SERVERNAME, + servername, }); -export const set_stats = consent => ({ - type: SET_STATS, - consent, +export const setStats = consent => ({ + type: SET_STATS, + consent, }); -export const set_delegation = delegation_type => ({ - type: SET_DELEGATION, - delegation_type, +export const setDelegation = delegationType => ({ + type: SET_DELEGATION, + delegationType, }); -export const set_delegation_servername = servername => ({ - type: SET_DELEGATION_SERVERNAME, - servername, +export const setDelegationServername = servername => ({ + type: SET_DELEGATION_SERVERNAME, + servername, }); -export const set_delegation_ports = (federation_port, client_port) => ({ - type: SET_DELEGATION_PORTS, - federation_port, - client_port, +export const setDelegationPorts = (federationPort, clientPort) => ({ + type: SET_DELEGATION_PORTS, + federationPort, + clientPort, }); -export const set_reverse_proxy = proxy_type => ({ - type: SET_REVERSE_PROXY, - proxy_type, +export const setReverseProxy = proxyType => ({ + type: SET_REVERSE_PROXY, + proxyType, }); -export const set_tls = tls_type => ({ - type: SET_TLS, - tls_type, +export const setTls = tlsType => ({ + type: SET_TLS, + tlsType, }); -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 => { - dispatch(testing_synapse_ports(true)); - dispatch({ - type: SET_SYNAPSE_PORTS, - federation_port, - client_port, - }) - test_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], - callback, - )), - error => dispatch(fail(error)), - ) - } +export const setSynapsePorts = (federationPort, clientPort, callback) => { + + const fedPortPriv = federationPort < 1024; + const clientPortPriv = clientPort < 1024; + + return dispatch => { + + dispatch(testingSynapsePorts(true)); + dispatch({ + type: SET_SYNAPSE_PORTS, + federationPort, + clientPort, + }) + testPorts([federationPort, clientPort]) + .then( + results => dispatch(updatePortsFree( + fedPortPriv ? true : results.ports[0], + clientPortPriv ? true : results.ports[1], + callback, + )), + error => dispatch(fail(error)), + ) + + } + }; -export const update_ports_free = (synapse_federation_port_free, synapse_client_port_free, callback) => { - return dispatch => { - dispatch(testing_synapse_ports(false)); - dispatch({ - type: SET_SYNAPSE_PORTS_FREE, - synapse_federation_port_free, - synapse_client_port_free, - }); - if (synapse_federation_port_free && synapse_client_port_free) { - callback(); - dispatch(advance_ui()); +export const updatePortsFree = + (synapseFederationPortFree, synapseClientPortFree, callback) => { + + return dispatch => { + + dispatch(testingSynapsePorts(false)); + dispatch({ + type: SET_SYNAPSE_PORTS_FREE, + synapseFederationPortFree, + synapseClientPortFree, + }); + if (synapseFederationPortFree && synapseClientPortFree) { + callback(); + dispatch(advanceUI()); + + } + + } + } - } -} -export const testing_synapse_ports = verifying => ({ - type: TESTING_SYNAPSE_PORTS, - verifying, +export const testingSynapsePorts = verifying => ({ + type: TESTING_SYNAPSE_PORTS, + verifying, }) -export const set_database = database => ({ - type: SET_DATABASE, - database, +export const setDatabase = database => ({ + type: SET_DATABASE, + database, }) -export const write_config = (config, sub_config_name) => { - return (dispatch, getState) => { - post_config(base_config_to_synapse_config(getState().base_config), sub_config_name) - .then(res => start_synapse(), error => dispatch(fail(error))) - } +export const writeConfig = (config, subConfigName) => { + + return (dispatch, getState) => { + + postConfig(baseConfigToSynapseConfig(getState().baseConfig), subConfigName) + .then(res => startSynapse(), error => dispatch(fail(error))) + + } + } \ No newline at end of file diff --git a/synapse_topology/webui/src/js/api/index.js b/synapse_topology/webui/src/js/api/index.js index 521a5a5393..7fd2ee4a28 100644 --- a/synapse_topology/webui/src/js/api/index.js +++ b/synapse_topology/webui/src/js/api/index.js @@ -1,89 +1,92 @@ import fetchAbsolute from 'fetch-absolute'; import { - API_URL, - CONFIG, - SECRET_KEY, - SERVER_NAME, - SETUP_CHECK, - CERT_PATHS, - TEST_PORTS, - START, + API_URL, + CONFIG, + SECRET_KEY, + SERVER_NAME, + SETUP_CHECK, + CERT_PATHS, + TEST_PORTS, + START, } from './constants'; const fetchAbs = fetchAbsolute(fetch)(API_URL) -export const get_server_name = () => - fetchAbs(SERVER_NAME) - .then(res => res.json()) +export const getServerName = () => + fetchAbs(SERVER_NAME) + .then(res => res.json()) -export const post_server_name = (servername, consent) => - fetchAbs( - SERVER_NAME, - { - method: 'POST', - body: JSON.stringify({ - "server_name": servername, - "report_stats": consent - }) - } - ) +export const postServerName = (servername, consent) => + fetchAbs( + SERVER_NAME, + { + method: 'POST', + body: JSON.stringify({ + "server_name": servername, + "report_stats": consent, + }), + }, + ) -export const post_cert_paths = (cert_path, cert_key_path) => - fetchAbs( - CERT_PATHS, - { - method: 'POST', - body: JSON.stringify({ - cert_path, - cert_key_path, - }) - } - ).then(res => res.json()) +export const postCertPaths = (certPath, certKeyPath) => + fetchAbs( + CERT_PATHS, + { + method: 'POST', + body: JSON.stringify({ + // eslint-disable-next-line camelcase + cert_path: certPath, + // eslint-disable-next-line camelcase + cert_key_path: certKeyPath, + }), + }, + ).then(res => res.json()) -export const post_certs = (cert, cert_key) => - fetchAbs( - CERT_PATHS, - { - method: 'POST', - body: JSON.stringify({ - cert, - cert_key, - }) - } - ) +export const postCerts = (cert, certKey) => + fetchAbs( + CERT_PATHS, + { + method: 'POST', + body: JSON.stringify({ + cert, + // eslint-disable-next-line camelcase + cert_key: certKey, + }), + }, + ) -export const test_ports = (ports) => - fetchAbs( - TEST_PORTS, - { - method: 'POST', - body: JSON.stringify({ - ports - }) - } - ).then(res => res.json()) +export const testPorts = (ports) => + fetchAbs( + TEST_PORTS, + { + method: 'POST', + body: JSON.stringify({ + ports, + }), + }, + ).then(res => res.json()) -export const get_secretkey = () => - fetchAbs(SECRET_KEY) - .then(res => res.json()) - .then(json => json.secret_key) +export const getSecretkey = () => + fetchAbs(SECRET_KEY) + .then(res => res.json()) + .then(json => json.secret_key) -export const get_config = () => { +export const getConfig = () => { }; -export const post_config = (config, sub_config_name) => - fetchAbs( - sub_config_name ? CONFIG + "/" + sub_config_name : CONFIG, - { - method: 'POST', - body: JSON.stringify(config), - } - ) +export const postConfig = (config, subConfigName) => + fetchAbs( + subConfigName ? CONFIG + "/" + subConfigName : CONFIG, + { + method: 'POST', + body: JSON.stringify(config), + }, + ); // Checks if the server's base config has been setup. -export const get_server_setup = () => fetchAbs(SETUP_CHECK) - .then(res => res.json()) +export const getServerSetup = () => fetchAbs(SETUP_CHECK) + .then(res => res.json()) -export const start_synapse = () => fetchAbs(START) \ No newline at end of file +export const startSynapse = () => fetchAbs(START) \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/AccordionToggle.jsx b/synapse_topology/webui/src/js/components/AccordionToggle.jsx index c53ec75c4d..a44f192737 100644 --- a/synapse_topology/webui/src/js/components/AccordionToggle.jsx +++ b/synapse_topology/webui/src/js/components/AccordionToggle.jsx @@ -2,8 +2,10 @@ import React from 'react'; import useAccordionToggle from 'react-bootstrap/useAccordionToggle'; export default ({ active, children, eventKey, as }) => { - console.log(children) - const decoratedOnClick = active ? useAccordionToggle(eventKey) : undefined; - const As = as; - return <As onClick={decoratedOnClick} > {children}</As> + + console.log(children) + const decoratedOnClick = active ? useAccordionToggle(eventKey) : undefined; + const As = as; + return <As onClick={decoratedOnClick} > {children}</As> + } diff --git a/synapse_topology/webui/src/js/components/BaseIntro.jsx b/synapse_topology/webui/src/js/components/BaseIntro.jsx index 35824fb36d..22f54a859a 100644 --- a/synapse_topology/webui/src/js/components/BaseIntro.jsx +++ b/synapse_topology/webui/src/js/components/BaseIntro.jsx @@ -1,12 +1,11 @@ import React from 'react'; -import style from '../../scss/main.scss'; import ContentWrapper from '../containers/ContentWrapper'; import ButtonDisplay from './ButtonDisplay'; export default ({ onClick }) => - <ContentWrapper> - <h1>Synapse Topology</h1> - <p>Let's get started.</p> - <ButtonDisplay><button onClick={onClick}>SETUP</button></ButtonDisplay> - </ContentWrapper> \ No newline at end of file + <ContentWrapper> + <h1>Synapse Topology</h1> + <p>Let's get started.</p> + <ButtonDisplay><button onClick={onClick}>SETUP</button></ButtonDisplay> + </ContentWrapper> \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/CompleteSetup.jsx b/synapse_topology/webui/src/js/components/CompleteSetup.jsx index 6dfb172b81..f41f28354d 100644 --- a/synapse_topology/webui/src/js/components/CompleteSetup.jsx +++ b/synapse_topology/webui/src/js/components/CompleteSetup.jsx @@ -8,56 +8,60 @@ import DelegationSampleConfig from '../containers/DelegationSampleConfig'; import AccordionToggle from '../containers/AccordionToggle'; import { TLS_TYPES, DELEGATION_TYPES } from '../actions/constants'; -import { COMPLETE_UI } from '../reducers/ui_constants'; +import { COMPLETE_UI } from '../reducers/ui-constants'; export default ({ - tlsType, - delegationType, - onClick, + tlsType, + delegationType, + onClick, }) => { - const [body, setBody] = useState(); - - const revProxyBody = <Card.Body> - <ReverseProxySampleConfig /> - <button - onClick={ - () => delegationType != DELEGATION_TYPES.LOCAL ? - setBody(delegationBody) : - setBody(finishedBody) - } - >Next</button> - </Card.Body > - - const delegationBody = <Card.Body> - <DelegationSampleConfig /> - <button - onClick={ - () => setBody(finishedBody) - } - >Next</button> - </Card.Body> - - const finishedBody = <Card.Body> - <p>You done</p> - <button onClick={onClick}>Start Synapse</button> - </Card.Body> - - if (!body) { - setBody( - tlsType == TLS_TYPES.REVERSE_PROXY ? - revProxyBody : - delegationType != DELEGATION_TYPES.LOCAL ? - delegationBody : - finishedBody - ) - } - - return <Card> - <AccordionToggle as={Card.Header} eventKey={COMPLETE_UI}> - Setup Complete - </AccordionToggle> - <Accordion.Collapse eventKey={COMPLETE_UI}> - {body} - </Accordion.Collapse> - </Card> + + const [body, setBody] = useState(); + + const revProxyBody = <Card.Body> + <ReverseProxySampleConfig /> + <button + onClick={ + () => delegationType != DELEGATION_TYPES.LOCAL ? + setBody(delegationBody) : + setBody(finishedBody) + } + >Next</button> + </Card.Body > + + const delegationBody = <Card.Body> + <DelegationSampleConfig /> + <button + onClick={ + () => setBody(finishedBody) + } + >Next</button> + </Card.Body> + + const finishedBody = <Card.Body> + <p>You done</p> + <button onClick={onClick}>Start Synapse</button> + </Card.Body> + + if (!body) { + + setBody( + tlsType == TLS_TYPES.REVERSE_PROXY ? + revProxyBody : + delegationType != DELEGATION_TYPES.LOCAL ? + delegationBody : + finishedBody, + ) + + } + + return <Card> + <AccordionToggle as={Card.Header} eventKey={COMPLETE_UI}> + Setup Complete + </AccordionToggle> + <Accordion.Collapse eventKey={COMPLETE_UI}> + {body} + </Accordion.Collapse> + </Card> + } diff --git a/synapse_topology/webui/src/js/components/ConfigSelector.jsx b/synapse_topology/webui/src/js/components/ConfigSelector.jsx index 23f0f162ec..48102da83d 100644 --- a/synapse_topology/webui/src/js/components/ConfigSelector.jsx +++ b/synapse_topology/webui/src/js/components/ConfigSelector.jsx @@ -2,9 +2,11 @@ import React, { useState } from 'react'; import ContentWrapper from '../containers/ContentWrapper'; export default () => { - return <ContentWrapper> - <h1>Config selection</h1> - <p>The base config has already been setup. Please select a config to edit:</p> - <p>TODO: .. well .. this.</p> - </ContentWrapper>; + + return <ContentWrapper> + <h1>Config selection</h1> + <p>The base config has already been setup. Please select a config to edit:</p> + <p>TODO: .. well .. this.</p> + </ContentWrapper>; + } \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/ContentWrapper.jsx b/synapse_topology/webui/src/js/components/ContentWrapper.jsx index dfd68a6adb..487046ed06 100644 --- a/synapse_topology/webui/src/js/components/ContentWrapper.jsx +++ b/synapse_topology/webui/src/js/components/ContentWrapper.jsx @@ -3,14 +3,20 @@ import React from 'react'; import style from '../../scss/main.scss'; export default ({ servername, children }) => { - if (servername) { - return <div> - <p className={style.servername}>{servername}</p> - <div className={style.contentWrapper}> - {children} - </div> - </div> - } else { - return <div className={style.contentWrapper}>{children}</div> - } + + if (servername) { + + return <div> + <p className={style.servername}>{servername}</p> + <div className={style.contentWrapper}> + {children} + </div> + </div> + + } else { + + return <div className={style.contentWrapper}>{children}</div> + + } + } \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/Database.jsx b/synapse_topology/webui/src/js/components/Database.jsx index cb6b877322..2f5fb6f2e8 100644 --- a/synapse_topology/webui/src/js/components/Database.jsx +++ b/synapse_topology/webui/src/js/components/Database.jsx @@ -5,41 +5,47 @@ import Card from 'react-bootstrap/Card'; import useAccordionToggle from 'react-bootstrap/useAccordionToggle'; import { - DATABASE_TYPES + DATABASE_TYPES, } from '../actions/constants' -import { DATABASE_UI } from '../reducers/ui_constants'; +import { DATABASE_UI } from '../reducers/ui-constants'; import AccordionToggle from '../containers/AccordionToggle'; -import { next_ui } from '../reducers/setup-ui-reducer'; +import { nextUI } from '../reducers/setup-ui-reducer'; export default ({ - onClick, + 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 - </AccordionToggle> - <Accordion.Collapse eventKey={DATABASE_UI}> - <Card.Body> - <p>Synapse can use either SQLite3 or Postgres as it's database.</p> - <p>Postgres is recommended</p> - - <select defaultValue={defaultDatabase} onChange={event => setDatabase(event.target.value)}> - <option value={DATABASE_TYPES.POSTGRES}>PostgreSQL</option> - <option value={DATABASE_TYPES.SQLITE3}>SQLite3</option> - </select> - <button onClick={() => { - toggle(); - onClick(database) - }}>Next</button> - </Card.Body> - </Accordion.Collapse> - </Card> + + const defaultDatabase = DATABASE_TYPES.POSTGRES; + const [database, setDatabase] = useState(defaultDatabase) + + const toggle = useAccordionToggle(nextUI(DATABASE_UI)); + + return <Card> + <AccordionToggle as={Card.Header} eventKey={DATABASE_UI}> + Database + </AccordionToggle> + <Accordion.Collapse eventKey={DATABASE_UI}> + <Card.Body> + <p>Synapse can use either SQLite3 or Postgres as it's database.</p> + <p>Postgres is recommended</p> + + <select defaultValue={defaultDatabase} + onChange={event => setDatabase(event.target.value)} + > + <option value={DATABASE_TYPES.POSTGRES}>PostgreSQL</option> + <option value={DATABASE_TYPES.SQLITE3}>SQLite3</option> + </select> + <button onClick={() => { + + toggle(); + onClick(database) + + }}>Next</button> + </Card.Body> + </Accordion.Collapse> + </Card> + } diff --git a/synapse_topology/webui/src/js/components/DelegationOptions.jsx b/synapse_topology/webui/src/js/components/DelegationOptions.jsx index b63ed47795..1ff6e9e269 100644 --- a/synapse_topology/webui/src/js/components/DelegationOptions.jsx +++ b/synapse_topology/webui/src/js/components/DelegationOptions.jsx @@ -1,3 +1,4 @@ +/* eslint-disable max-len */ import React, { useState } from 'react'; import style from '../../scss/main.scss'; @@ -9,130 +10,143 @@ 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 { DELEGATION_OPTIONS_UI } from '../reducers/ui-constants'; import AccordionToggle from '../containers/AccordionToggle'; -import { next_ui } from '../reducers/setup-ui-reducer'; +import { nextUI } from '../reducers/setup-ui-reducer'; export default ({ servername, skip, onClick }) => { - const defaultType = DELEGATION_TYPES.DNS; - const [type, setType] = useState(defaultType); - const [delegatedServername, setDelegatedServerName] = useState(""); + const defaultType = DELEGATION_TYPES.DNS; + const [type, setType] = useState(defaultType); - const [fedPort, setFedPort] = useState(""); - const [clientPort, setClientPort] = useState(""); + const [delegatedServername, setDelegatedServerName] = useState(""); - const [clientPortValid, setClientPortValid] = useState(true) - const [fedPortValid, setFedPortValid] = useState(true) + const [fedPort, setFedPort] = useState(""); + const [clientPort, setClientPort] = useState(""); - const updateValidity = (port, setValid) => setValid( - !port || - (!isNaN(port) && 0 < port && port <= 65535) - ) + const [clientPortValid, setClientPortValid] = useState(true) + const [fedPortValid, setFedPortValid] = useState(true) - const onFederationChange = event => { - const val = event.target.value; - setFedPort(val); - updateValidity(val, setFedPortValid); - } + const updateValidity = (port, setValid) => setValid( + !port || + (!isNaN(port) && 0 < port && port <= 65535), + ) - const onClientChange = event => { - const val = event.target.value; - setClientPort(val); - updateValidity(val, setClientPortValid); - } + const onFederationChange = event => { - const toggle = useAccordionToggle(next_ui(DELEGATION_OPTIONS_UI)); + const val = event.target.value; + setFedPort(val); + updateValidity(val, setFedPortValid); - return <Card> - <AccordionToggle as={Card.Header} eventKey={DELEGATION_OPTIONS_UI}> - Delegation (optional) + } + + const onClientChange = event => { + + const val = event.target.value; + setClientPort(val); + updateValidity(val, setClientPortValid); + + } + + const toggle = useAccordionToggle(nextUI(DELEGATION_OPTIONS_UI)); + + return <Card> + <AccordionToggle as={Card.Header} eventKey={DELEGATION_OPTIONS_UI}> + Delegation (optional) <button onClick={() => { - toggle(); - skip(); - }}> - Skip + + toggle(); + skip(); + + }}> + Skip </button> - </AccordionToggle> - <Accordion.Collapse eventKey={DELEGATION_OPTIONS_UI}> - <Card.Body> - <p> - If you'd like your synapse to be hosted on a different server to the - one known on the network by '{servername}' you can use delegation. - </p> - <a href="https://github.com/matrix-org/synapse/blob/master/docs/federate.md" target="_blank"> - Learn more - </a> - <p> - Other federation servers will connect to {servername}:8448 over the network. - </p> - <p> - There are two forms of delegation: - </p> - - <Tabs defaultActiveKey={defaultType} onSelect={k => setType(k)}> - <Tab eventKey={DELEGATION_TYPES.DNS} title={DELEGATION_TYPES.DNS}> - <p> - You will need access to {servername}'s domain zone DNS records. - This method also requires the synapse install's server to provide - a valid TLS cert for {servername} - </p> - <p> - You will need to add an SRV record to {servername}'s DNS zone. (Once - again, we'll print the SRV record out for you later.) - </p> - </Tab> - <Tab eventKey={DELEGATION_TYPES.WELL_KNOWN} title={DELEGATION_TYPES.WELL_KNOWN}> - <p> - {servername} provides the url - https://{servername}/.well-known/matrix/server which gives - federating servers information about how to contact the actual - server hosting the synapse install. (Don't worry! We'll print out - the .well-known file for you later.) - </p> - </Tab> - </Tabs> - - <p>Please enter the domain name of the server synapse is installed on.</p> - <input - type="text" - onChange={e => setDelegatedServerName(e.target.value)} - autoFocus - placeholder="Enter server name" - /> - - <p> - Homeserver Port - </p> - <input - type="text" - onChange={onFederationChange} - className={fedPortValid ? undefined : "invalid"} - autoFocus - placeholder="Use Default 8448" - /> - {fedPortValid ? undefined : <p>Invalid port</p> } - <p> - Client Port - </p> - <input - type="text" - onChange={onClientChange} - className={clientPortValid ? undefined : "invalid"} - autoFocus - placeholder="Use Default 443" - /> - {clientPortValid ? undefined : <p>Invalid port</p> } - <button disabled={delegatedServername && clientPortValid && fedPortValid ? undefined : true} - onClick={() => { - toggle(); - onClick(type, delegatedServername, fedPort, clientPort) - }} - > - Use {type} - </button> - - </Card.Body> - </Accordion.Collapse> - </Card> + </AccordionToggle> + <Accordion.Collapse eventKey={DELEGATION_OPTIONS_UI}> + <Card.Body> + <p> + If you'd like your synapse to be hosted on a different server to the + one known on the network by '{servername}' you can use delegation. + </p> + <a + href="https://github.com/matrix-org/synapse/blob/master/docs/federate.md" + target="_blank" + > + Learn more + </a> + <p> + Other federation servers will connect to {servername}:8448 over the network. + </p> + <p> + There are two forms of delegation: + </p> + + <Tabs defaultActiveKey={defaultType} onSelect={k => setType(k)}> + <Tab eventKey={DELEGATION_TYPES.DNS} title={DELEGATION_TYPES.DNS}> + <p> + You will need access to {servername}'s domain zone DNS records. + This method also requires the synapse install's server to provide + a valid TLS cert for {servername} + </p> + <p> + You will need to add an SRV record to {servername}'s DNS zone. (Once + again, we'll print the SRV record out for you later.) + </p> + </Tab> + <Tab eventKey={DELEGATION_TYPES.WELL_KNOWN} title={DELEGATION_TYPES.WELL_KNOWN}> + <p> + {servername} provides the url + https://{servername}/.well-known/matrix/server which gives + federating servers information about how to contact the actual + server hosting the synapse install. (Don't worry! We'll print out + the .well-known file for you later.) + </p> + </Tab> + </Tabs> + + <p>Please enter the domain name of the server synapse is installed on.</p> + <input + type="text" + onChange={e => setDelegatedServerName(e.target.value)} + autoFocus + placeholder="Enter server name" + /> + + <p> + Homeserver Port + </p> + <input + type="text" + onChange={onFederationChange} + className={fedPortValid ? undefined : "invalid"} + autoFocus + placeholder="Use Default 8448" + /> + {fedPortValid ? undefined : <p>Invalid port</p>} + <p> + Client Port + </p> + <input + type="text" + onChange={onClientChange} + className={clientPortValid ? undefined : "invalid"} + autoFocus + placeholder="Use Default 443" + /> + {clientPortValid ? undefined : <p>Invalid port</p>} + <button disabled={delegatedServername && clientPortValid && fedPortValid ? undefined : true} + onClick={() => { + + toggle(); + onClick(type, delegatedServername, fedPort, clientPort) + + }} + > + Use {type} + </button> + + </Card.Body> + </Accordion.Collapse> + </Card> + } \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/DelegationSampleConfig.jsx b/synapse_topology/webui/src/js/components/DelegationSampleConfig.jsx index ab4dd7d280..629efdb01f 100644 --- a/synapse_topology/webui/src/js/components/DelegationSampleConfig.jsx +++ b/synapse_topology/webui/src/js/components/DelegationSampleConfig.jsx @@ -1,3 +1,4 @@ +/* eslint-disable max-len */ import React from 'react'; import ContentWrapper from '../containers/ContentWrapper'; @@ -6,61 +7,63 @@ import DownloadOrCopy from './DownloadOrCopy'; import { DELEGATION_TYPES } from '../actions/constants'; export default ({ - delegationType, - serverConfig, - clientConfig, - serverConfigFileName, - clientConfigFileName, - serverName, - onClick + delegationType, + serverConfig, + clientConfig, + serverConfigFileName, + clientConfigFileName, + serverName, + onClick, }) => { - if (delegationType == DELEGATION_TYPES.DNS) { - return <ContentWrapper> - <h1>ConfigureDelegation</h1> - <p> - You will need to add the following SRV record to your DNS zone. + if (delegationType == DELEGATION_TYPES.DNS) { + + return <ContentWrapper> + <h1>ConfigureDelegation</h1> + <p> + You will need to add the following SRV record to your DNS zone. </p> - <pre> - <code> - {clientConfig} - </code> - </pre> - <DownloadOrCopy content={clientConfig} fileName={clientConfigFileName} /> - <ButtonDisplay> - <button onClick={onClick}>Continue</button> - </ButtonDisplay> - </ContentWrapper> + <pre> + <code> + {clientConfig} + </code> + </pre> + <DownloadOrCopy content={clientConfig} fileName={clientConfigFileName} /> + <ButtonDisplay> + <button onClick={onClick}>Continue</button> + </ButtonDisplay> + </ContentWrapper> - } else { + } else { - return <ContentWrapper> - <h1>Configure delegation</h1> - <p> - The delegation configuration needs to take place outside the installer. - </p> - <p> - You'll need to host the following at https://{serverName}/.well-known/matrix/server - </p> - <pre> - <code> - {serverConfig} - </code> - </pre> - <DownloadOrCopy content={serverConfig} fileName={serverConfigFileName} /> - <p> - You'll also need to host the following at https://{serverName}/.well-known/matrix/client - </p> - <pre> - <code> - {clientConfig} - </code> - </pre> - <DownloadOrCopy content={clientConfig} fileName={clientConfigFileName} /> - <ButtonDisplay> - <button onClick={onClick}>Continue</button> - </ButtonDisplay> - </ContentWrapper>; + return <ContentWrapper> + <h1>Configure delegation</h1> + <p> + The delegation configuration needs to take place outside the installer. + </p> + <p> + You'll need to host the following at https://{serverName}/.well-known/matrix/server + </p> + <pre> + <code> + {serverConfig} + </code> + </pre> + <DownloadOrCopy content={serverConfig} fileName={serverConfigFileName} /> + <p> + You'll also need to host the following at https://{serverName}/.well-known/matrix/client + </p> + <pre> + <code> + {clientConfig} + </code> + </pre> + <DownloadOrCopy content={clientConfig} fileName={clientConfigFileName} /> + <ButtonDisplay> + <button onClick={onClick}>Continue</button> + </ButtonDisplay> + </ContentWrapper>; + + } - } } \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/DownloadOrCopy.jsx b/synapse_topology/webui/src/js/components/DownloadOrCopy.jsx index 34e2302755..9fddd1fe22 100644 --- a/synapse_topology/webui/src/js/components/DownloadOrCopy.jsx +++ b/synapse_topology/webui/src/js/components/DownloadOrCopy.jsx @@ -2,20 +2,22 @@ import React from 'react'; import ButtonDisplay from './ButtonDisplay'; const download = (filename, text) => { - const e = document.createElement('a'); - e.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); - e.setAttribute('download', filename); - e.style.display = 'none'; - document.body.appendChild(e); + const e = document.createElement('a'); + e.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); + e.setAttribute('download', filename); - e.click(); + e.style.display = 'none'; + document.body.appendChild(e); + + e.click(); + + document.body.removeChild(e); - document.body.removeChild(e); } export default ({ content, fileName }) => - <ButtonDisplay> - <button onClick={() => download(fileName, content)}>Download</button> - <button onClick={() => navigator.clipboard.writeText(content)}>Copy</button> - </ButtonDisplay> \ No newline at end of file + <ButtonDisplay> + <button onClick={() => download(fileName, content)}>Download</button> + <button onClick={() => navigator.clipboard.writeText(content)}>Copy</button> + </ButtonDisplay> \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/Error.jsx b/synapse_topology/webui/src/js/components/Error.jsx index 6f01286340..d10660fb0b 100644 --- a/synapse_topology/webui/src/js/components/Error.jsx +++ b/synapse_topology/webui/src/js/components/Error.jsx @@ -1,11 +1,12 @@ import React from 'react'; -import style from '../../scss/main.scss'; import ContentWrapper from '../containers/ContentWrapper'; export default () => { - return <ContentWrapper> - <h1>Damn!</h1> - <p>Has the config server been started?</p> - </ContentWrapper>; + + return <ContentWrapper> + <h1>Damn!</h1> + <p>Has the config server been started?</p> + </ContentWrapper>; + } \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/ExportKeys.jsx b/synapse_topology/webui/src/js/components/ExportKeys.jsx index 16b01ab69e..60a7e94c35 100644 --- a/synapse_topology/webui/src/js/components/ExportKeys.jsx +++ b/synapse_topology/webui/src/js/components/ExportKeys.jsx @@ -7,41 +7,53 @@ import useAccordionToggle from 'react-bootstrap/useAccordionToggle'; import ButtonDisplay from './ButtonDisplay'; import DownloadOrCopy from './DownloadOrCopy'; -import { KEY_EXPORT_UI } from '../reducers/ui_constants'; +import { KEY_EXPORT_UI } from '../reducers/ui-constants'; import AccordionToggle from '../containers/AccordionToggle'; -import { next_ui } from '../reducers/setup-ui-reducer'; - - -export default ({ secret_key_loaded, secret_key, onClick }) => { - const toggle = useAccordionToggle(next_ui(KEY_EXPORT_UI)); - - const decoratedOnClick = () => { - toggle(); - onClick(); - } - var body; - if (!secret_key_loaded) { - body = <Card.Body>Generating secret key</Card.Body> - } else { - body = <Card.Body> - <p> - Your server uses a secret key to identify itself to other servers. Keep - a copy of it to retain ownership of the server name in case the server - is inaccessible: +import { nextUI } from '../reducers/setup-ui-reducer'; + + +export default ({ secretKeyLoaded, secretKey, onClick }) => { + + const toggle = useAccordionToggle(nextUI(KEY_EXPORT_UI)); + + const decoratedOnClick = () => { + + toggle(); + onClick(); + + } + + let body; + + if (!secretKeyLoaded) { + + body = <Card.Body>Generating secret key</Card.Body> + + } else { + + body = <Card.Body> + <p> + Your server uses a secret key to identify itself to other servers. Keep + a copy of it to retain ownership of the server name in case the server + is inaccessible: </p> - <pre><code>{secret_key}</code></pre> - <p>Keep a copy of this key somewhere safe</p> - <DownloadOrCopy content={secret_key} fileName="secret_key.txt" /> - <ButtonDisplay><button onClick={decoratedOnClick}>Next</button></ButtonDisplay> - </Card.Body> - } - - return <Card> - <AccordionToggle as={Card.Header} eventKey={KEY_EXPORT_UI}> - Secret Key + <pre><code>{secretKey}</code></pre> + <p>Keep a copy of this key somewhere safe</p> + <DownloadOrCopy content={secretKey} fileName="secret_key.txt" /> + <ButtonDisplay> + <button onClick={decoratedOnClick}>Next</button> + </ButtonDisplay> + </Card.Body> + + } + + return <Card> + <AccordionToggle as={Card.Header} eventKey={KEY_EXPORT_UI}> + Secret Key </AccordionToggle> - <Accordion.Collapse eventKey={KEY_EXPORT_UI}> - {body} - </Accordion.Collapse> - </Card> + <Accordion.Collapse eventKey={KEY_EXPORT_UI}> + {body} + </Accordion.Collapse> + </Card> + } \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/Loading.jsx b/synapse_topology/webui/src/js/components/Loading.jsx index 8b8c598dff..c94f8deab7 100644 --- a/synapse_topology/webui/src/js/components/Loading.jsx +++ b/synapse_topology/webui/src/js/components/Loading.jsx @@ -1,10 +1,11 @@ import React from 'react'; -import style from '../../scss/main.scss'; import ContentWrapper from '../containers/ContentWrapper'; export default () => { - return <ContentWrapper> - <h1>loading..</h1> - </ContentWrapper>; + + return <ContentWrapper> + <h1>loading..</h1> + </ContentWrapper>; + } \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/PortSelection.jsx b/synapse_topology/webui/src/js/components/PortSelection.jsx index 273f79f3e9..e041956571 100644 --- a/synapse_topology/webui/src/js/components/PortSelection.jsx +++ b/synapse_topology/webui/src/js/components/PortSelection.jsx @@ -1,133 +1,142 @@ +/* eslint-disable max-len */ import React, { useState } from 'react'; 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 { PORT_SELECTION_UI } from '../reducers/ui-constants'; import AccordionToggle from '../containers/AccordionToggle'; import ContentWrapper from '../containers/ContentWrapper'; -import { next_ui } from '../reducers/setup-ui-reducer'; +import { nextUI } from '../reducers/setup-ui-reducer'; export default ({ - servername, - verifyingPorts, - fedPortInUse, - clientPortInUse, - canChangePorts, - defaultFedPort, - defaultClientPort, - onClick, + servername, + verifyingPorts, + fedPortInUse, + clientPortInUse, + canChangePorts, + defaultFedPort, + defaultClientPort, + onClick, }) => { - if (verifyingPorts) { - return <ContentWrapper><h1>Verifying ports.</h1></ContentWrapper> - } - - const [fedPort, setFedPort] = useState(defaultFedPort); - const [clientPort, setClientPort] = useState(defaultClientPort); - - const [clientPortValid, setClientPortValid] = useState(true) - const [fedPortValid, setFedPortValid] = useState(true) - - const [clientPortPriv, setClientPortPriv] = useState(defaultClientPort < 1024) - const [fedPortPriv, setFedPortPriv] = useState(defaultFedPort < 1024) - - const [_fedPortInUse, set_fedPortInUse] = useState(fedPortInUse) - const [_clientPortInUse, set_clientPortInUse] = useState(clientPortInUse) - - const updateValidity = (port, setValid) => setValid( - !isNaN(port) && 0 < port && port <= 65535 - ) - - const updatePriv = (port, setPriv) => setPriv( - port < 1024 - ) - - const onFederationChange = event => { - const val = event.target.value ? event.target.value : defaultFedPort; - set_fedPortInUse(false); - setFedPort(val); - updatePriv(val, setFedPortPriv); - updateValidity(val, setFedPortValid); - } - - const onClientChange = event => { - const val = event.target.value ? event.target.value : defaultClientPort; - set_clientPortInUse(false); - setClientPort(val); - updatePriv(val, setClientPortPriv); - updateValidity(val, setClientPortValid); - } - - const toggle = useAccordionToggle(next_ui(PORT_SELECTION_UI)); - - return <Card> - <AccordionToggle as={Card.Header} eventKey={PORT_SELECTION_UI}> - {servername}'s ports - </AccordionToggle> - <Accordion.Collapse eventKey={PORT_SELECTION_UI}> - <Card.Body> - - <p> - Synapse will be listening on the following ports on localhost. - </p> - { - canChangePorts ? - <p> - Since you're using a reverse proxy you can change these to anything you - like as long as synapse can bind to them. We recommend not using privileged - ports within the range 0 to 1024. - </p> - : - <p> - Since you're not using a reverse proxy synapse will have to listen on - these ports. If any of these ports are already in use (we'll test them when - you click the button) you will either need to reconfigure the ports used on - localhost, setup up delegation or use a reverse proxy. - </p> - } - - <p> - We will check that the ports are not in use. - </p> - <p> - Note: we can't check whether privileged ports are in use. If you've - set a privileged port <b>we will skip the check for that port</b>. - </p> - - <h3>Federation Port</h3> - <input - type="text" - className={_fedPortInUse|!fedPortValid?"invalid":undefined} - onChange={onFederationChange} - disabled={canChangePorts ? undefined : true} - autoFocus - placeholder={defaultFedPort} - /> - {_fedPortInUse ? <p>This port is in use.</p> : undefined} - {fedPortValid ? undefined : <p>Invalid port</p> } - {fedPortPriv ? <p>This is a privileged port.</p> : undefined} - <h3>Client Port</h3> - <input - type="text" - className={_clientPortInUse|!clientPortValid?"invalid":undefined} - onChange={onClientChange} - disabled={canChangePorts ? undefined : true} - autoFocus - placeholder={defaultClientPort} - /> - {_clientPortInUse ? <p>This port is in use.</p> : undefined} - {clientPortValid ? undefined : <p>Invalid port</p> } - {clientPortPriv ? <p>This is a privileged port.</p> : undefined} - <div> - <button - disabled={clientPortValid && fedPortValid ? undefined : true} - onClick={() => onClick(parseInt(fedPort), parseInt(clientPort), toggle)} - >Verify These Ports</button> - </div> - </Card.Body> - </Accordion.Collapse> - </Card> + + if (verifyingPorts) { + + return <ContentWrapper><h1>Verifying ports.</h1></ContentWrapper> + + } + + const [fedPort, setFedPort] = useState(defaultFedPort); + const [clientPort, setClientPort] = useState(defaultClientPort); + + const [clientPortValid, setClientPortValid] = useState(true) + const [fedPortValid, setFedPortValid] = useState(true) + + const [clientPortPriv, setClientPortPriv] = useState(defaultClientPort < 1024) + const [fedPortPriv, setFedPortPriv] = useState(defaultFedPort < 1024) + + const [internalFedPortInUse, setInternalFedPortInUse] = useState(fedPortInUse) + const [internalClientPortInUse, setInternalClientPortInUse] = useState(clientPortInUse) + + const updateValidity = (port, setValid) => setValid( + !isNaN(port) && 0 < port && port <= 65535, + ) + + const updatePriv = (port, setPriv) => setPriv( + port < 1024, + ) + + const onFederationChange = event => { + + const val = event.target.value ? event.target.value : defaultFedPort; + setInternalFedPortInUse(false); + setFedPort(val); + updatePriv(val, setFedPortPriv); + updateValidity(val, setFedPortValid); + + } + + const onClientChange = event => { + + const val = event.target.value ? event.target.value : defaultClientPort; + setInternalClientPortInUse(false); + setClientPort(val); + updatePriv(val, setClientPortPriv); + updateValidity(val, setClientPortValid); + + } + + const toggle = useAccordionToggle(nextUI(PORT_SELECTION_UI)); + + return <Card> + <AccordionToggle as={Card.Header} eventKey={PORT_SELECTION_UI}> + {servername}'s ports + </AccordionToggle> + <Accordion.Collapse eventKey={PORT_SELECTION_UI}> + <Card.Body> + + <p> + Synapse will be listening on the following ports on localhost. + </p> + { + canChangePorts ? + <p> + Since you're using a reverse proxy you can change these to anything you + like as long as synapse can bind to them. We recommend not using privileged + ports within the range 0 to 1024. + </p> + : + <p> + Since you're not using a reverse proxy synapse will have to listen on + these ports. If any of these ports are already in use (we'll test them when + you click the button) you will either need to reconfigure the ports used on + localhost, setup up delegation or use a reverse proxy. + </p> + } + + <p> + We will check that the ports are not in use. + </p> + <p> + Note: we can't check whether privileged ports are in use. If you've + set a privileged port <b>we will skip the check for that port</b>. + </p> + + <h3>Federation Port</h3> + <input + type="text" + className={internalFedPortInUse | !fedPortValid ? "invalid" : undefined} + onChange={onFederationChange} + disabled={canChangePorts ? undefined : true} + autoFocus + placeholder={defaultFedPort} + /> + {internalFedPortInUse ? <p>This port is in use.</p> : undefined} + {fedPortValid ? undefined : <p>Invalid port</p>} + {fedPortPriv ? <p>This is a privileged port.</p> : undefined} + <h3>Client Port</h3> + <input + type="text" + className={internalClientPortInUse | !clientPortValid ? "invalid" : undefined} + onChange={onClientChange} + disabled={canChangePorts ? undefined : true} + autoFocus + placeholder={defaultClientPort} + /> + {internalClientPortInUse ? <p>This port is in use.</p> : undefined} + {clientPortValid ? undefined : <p>Invalid port</p>} + {clientPortPriv ? <p>This is a privileged port.</p> : undefined} + <div> + <button + disabled={clientPortValid && fedPortValid ? undefined : true} + onClick={() => onClick(parseInt(fedPort), parseInt(clientPort), toggle)} + >Verify These Ports</button> + </div> + </Card.Body> + </Accordion.Collapse> + </Card> + } \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/ReverseProxySampleConfig.jsx b/synapse_topology/webui/src/js/components/ReverseProxySampleConfig.jsx index a5e7adea95..155ead0bf0 100644 --- a/synapse_topology/webui/src/js/components/ReverseProxySampleConfig.jsx +++ b/synapse_topology/webui/src/js/components/ReverseProxySampleConfig.jsx @@ -6,28 +6,31 @@ import DownloadOrCopy from './DownloadOrCopy'; import { REVERSE_PROXY_TYPES } from '../actions/constants'; export default ({ proxyType, sampleConfig, fileName }) => { - return <ContentWrapper> - <h1>Configure the ReverseProxy</h1> - <p> - It's time for you to setup the reverse proxy outside of this installer. - </p> - { - proxyType == REVERSE_PROXY_TYPES.OTHER ? - <p> - Here's a sample config for Apache. Since you chose 'other' for your reverse proxy. - You'll have to figure it out for yourself. We believe in you. - </p> - : + + return <ContentWrapper> + <h1>Configure the ReverseProxy</h1> <p> - We can't do it for you - but here's the sample configuration for your {proxyType} proxy. + It's time for you to setup the reverse proxy outside of this installer. </p> - } - <pre> - <code> - {sampleConfig} - </code> - </pre> - <DownloadOrCopy content={sampleConfig} fileName={fileName} /> - </ContentWrapper>; + { + proxyType == REVERSE_PROXY_TYPES.OTHER ? + <p> + Here's a sample config for Apache. Since you chose 'other' + for your reverse proxy. You'll have to figure it out + for yourself. We believe in you. + </p> + : + <p> + We can't do it for you + but here's the sample configuration for your {proxyType} proxy. + </p> + } + <pre> + <code> + {sampleConfig} + </code> + </pre> + <DownloadOrCopy content={sampleConfig} fileName={fileName} /> + </ContentWrapper>; + } \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/ServerName.jsx b/synapse_topology/webui/src/js/components/ServerName.jsx index e2f160a17b..938da625a6 100644 --- a/synapse_topology/webui/src/js/components/ServerName.jsx +++ b/synapse_topology/webui/src/js/components/ServerName.jsx @@ -2,43 +2,59 @@ import React, { useState } from 'react'; import Accordion from 'react-bootstrap/Accordion'; import Card from 'react-bootstrap/Card'; -import { SERVER_NAME_UI } from '../reducers/ui_constants'; +import { SERVER_NAME_UI } from '../reducers/ui-constants'; import AccordionToggle from '../containers/AccordionToggle'; import useAccordionToggle from 'react-bootstrap/useAccordionToggle'; -import { next_ui } from '../reducers/setup-ui-reducer'; +import { nextUI } from '../reducers/setup-ui-reducer'; export default ({ onClick }) => { - const [servername, setServerName] = useState(""); - - const onChange = event => { - setServerName(event.target.value); - }; - - const toggle = useAccordionToggle(next_ui(SERVER_NAME_UI)); - const decoratedOnClick = () => { - toggle(); - onClick(servername); - } - - return <Card> - <AccordionToggle as={Card.Header} eventKey={SERVER_NAME_UI} > - Name your server - </AccordionToggle> - <Accordion.Collapse eventKey={SERVER_NAME_UI}> - <Card.Body> - <p> - Your server name usually matches your domain. For example, the - matrix.org server is simply called `matrix.org`. - </p> - <p> - Your server name will be used to establish User IDs (e.g. - `@user:server.name`) and Room Aliases (e.g. `#room:server.name`). - </p> - <input type="text" onChange={onChange} autoFocus placeholder="Enter server name"></input> - <div> - <button disabled={servername ? undefined : true} onClick={decoratedOnClick}>Next</button> - </div> - </Card.Body> - </Accordion.Collapse> - </Card>; + + const [servername, setServerName] = useState(""); + + const onChange = event => { + + setServerName(event.target.value); + + }; + + const toggle = useAccordionToggle(nextUI(SERVER_NAME_UI)); + const decoratedOnClick = () => { + + toggle(); + onClick(servername); + + } + + return <Card> + <AccordionToggle as={Card.Header} eventKey={SERVER_NAME_UI} > + Name your server + </AccordionToggle> + <Accordion.Collapse eventKey={SERVER_NAME_UI}> + <Card.Body> + <p> + Your server name usually matches your domain. For example, the + matrix.org server is simply called `matrix.org`. + </p> + <p> + Your server name will be used to establish User IDs (e.g. + `@user:server.name`) and Room Aliases (e.g. `#room:server.name`). + </p> + <input + type="text" + onChange={onChange} + autoFocus + placeholder="Enter server name" + /> + <div> + <button + disabled={servername ? undefined : true} + onClick={decoratedOnClick} + > + Next + </button> + </div> + </Card.Body> + </Accordion.Collapse> + </Card>; + } \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/StatsReporter.jsx b/synapse_topology/webui/src/js/components/StatsReporter.jsx index 1ca896ca42..51c4ad0ece 100644 --- a/synapse_topology/webui/src/js/components/StatsReporter.jsx +++ b/synapse_topology/webui/src/js/components/StatsReporter.jsx @@ -4,39 +4,43 @@ import Accordion from 'react-bootstrap/Accordion'; import Card from 'react-bootstrap/Card'; import useAccordionToggle from 'react-bootstrap/useAccordionToggle'; -import { STATS_REPORT_UI } from '../reducers/ui_constants'; +import { STATS_REPORT_UI } from '../reducers/ui-constants'; import AccordionToggle from '../containers/AccordionToggle'; -import { next_ui } from '../reducers/setup-ui-reducer'; +import { nextUI } from '../reducers/setup-ui-reducer'; export default ({ onClick }) => { - const [consent, setConsent] = useState(false); - const toggle = useAccordionToggle(next_ui(STATS_REPORT_UI)); - const decoratedOnClick = () => { - toggle(); - onClick(consent); - } - - return <Card> - <AccordionToggle as={Card.Header} eventKey={STATS_REPORT_UI}> - Anonymous Statistics - </AccordionToggle> - <Accordion.Collapse eventKey={STATS_REPORT_UI}> - <Card.Body> - <p> - Would you like to report anonymous statistics to matrix.org? - Your server will send anonymised, aggregated statistics to matrix.org - on user usage so we can measure the health of the Matrix ecosystem. - </p> - <label> - <input - type="checkbox" - onChange={event => setConsent(event.target.checked)} - /> - Yes, send anonymous statistics - </label> - <button onClick={decoratedOnClick}>Next</button> - </Card.Body> - </Accordion.Collapse> - </Card > + + const [consent, setConsent] = useState(false); + const toggle = useAccordionToggle(nextUI(STATS_REPORT_UI)); + const decoratedOnClick = () => { + + toggle(); + onClick(consent); + + } + + return <Card> + <AccordionToggle as={Card.Header} eventKey={STATS_REPORT_UI}> + Anonymous Statistics + </AccordionToggle> + <Accordion.Collapse eventKey={STATS_REPORT_UI}> + <Card.Body> + <p> + Would you like to report anonymous statistics to matrix.org? + Your server will send anonymised, aggregated statistics to matrix.org + on user usage so we can measure the health of the Matrix ecosystem. + </p> + <label> + <input + type="checkbox" + onChange={event => setConsent(event.target.checked)} + /> + Yes, send anonymous statistics + </label> + <button onClick={decoratedOnClick}>Next</button> + </Card.Body> + </Accordion.Collapse> + </Card> + } \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/TLS.jsx b/synapse_topology/webui/src/js/components/TLS.jsx index 584a658608..77a2c97803 100644 --- a/synapse_topology/webui/src/js/components/TLS.jsx +++ b/synapse_topology/webui/src/js/components/TLS.jsx @@ -1,3 +1,4 @@ +/* eslint-disable max-len */ import React, { useState } from 'react'; import style from '../../scss/main.scss'; @@ -8,150 +9,164 @@ 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_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'; +import { nextUI } from '../reducers/setup-ui-reducer'; const tlsLink = "https://en.wikipedia.org/wiki/Transport_Layer_Security"; const apacheLink = "http://httpd.apache.org/"; const caddyLink = "https://caddyserver.com/"; const haproxyLink = "http://www.haproxy.org/"; const nginxLink = "https://www.nginx.com/"; -const proxyInfoLink = "https://github.com/matrix-org/synapse/blob/master/docs/reverse_proxy.rst"; - -export default ({ testingCertPaths, uploadingCerts, certPathInvalid, certKeyPathInvalid, onClickCertPath, onClickCertUpload, onClickACME, onClickReverseProxy }) => { - const defaultType = TLS_TYPES.REVERSE_PROXY; - - const [type, setType] = useState(defaultType); - - const [certPath, setCertPath] = useState(""); - const [certKeyPath, setCertKeyPath] = useState(""); - const [certFile, setCertFile] = useState(); - const [certKeyFile, setCertKeyFile] = useState(); - - 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 - </AccordionToggle> - <Accordion.Collapse eventKey={TLS_UI}> - <Card.Body> - <p> - Synapse uses TLS to ensure communication between homeservers is - secure. To use TLS, you’ll need a TLS certificate. Synapse supports - ACME, providing your own certificates, or reverse proxy handling TLS - certificates. - </p> - <Tabs defaultActiveKey={defaultType} onSelect={k => setType(k)}> - <Tab eventKey={TLS_TYPES.REVERSE_PROXY} title="Reverse Proxy"> - <p> - It is recommended to run Synapse behind a reverse proxy such as <a target="_blank" href={apacheLink}>Apache</a>, <a target="_blank" href={caddyLink}>Caddy</a>, <a target="_blank" href={haproxyLink}>HAProxy</a>, or <a target="_blank" href={nginxLink}>NGiNX</a>. - </p> - <p> - The main benefit to this is that the reverse proxy can listen on - the privileged port 443 (which clients like Riot expect to connect - to) on behalf of synapse. The incoming traffic is then forwarded - to Synapse on a non privileged port. - </p> - <p> - You need root to listen on ports 0 to 1024 inclusive and running - synapse with root privileges is <b>strongly discouraged</b>. - Reverse proxies are more secure, run with root and pass things on - like nobody's business. - </p> - <p> - (Note: you can also have synapse use a non privileged port by - using one of the delegation methods mentioned earlier.) - </p> - <p> - If you choose to use a Reverse Proxy we'll provide you with - configuration templates later. - </p> - <p>More information about Reverse Proxies - <a href="https://github.com/matrix-org/synapse/blob/master/docs/reverse_proxy.rst"> - in the docs</a>. - </p> - <p> - Please choose the reverse proxy you're using. This is just so we can provide - you with a template later, if you already know how you're going to set yours - up don't worry too much about this. - </p> - <select defaultValue={defaultValue} onChange={e => setReverseProxy(e.target.value)} > - <option value={REVERSE_PROXY_TYPES.APACHE}>Apache</option> - <option value={REVERSE_PROXY_TYPES.CADDY}>Caddy</option> - <option value={REVERSE_PROXY_TYPES.HAPROXY}>HAProxy</option> - <option value={REVERSE_PROXY_TYPES.NGINX}>NGiNX</option> - <option value={REVERSE_PROXY_TYPES.OTHER}>Some other Reverse Proxy</option> - </select> - <div> - <button onClick={() => { - toggle(); - onClickReverseProxy(reverseProxy) - }}> - I already/will use a Reverse Proxy with TLS - </button> - </div> - </Tab> - <Tab eventKey={TLS_TYPES.ACME} title="ACME"> - <p> - ACME is a protocol that allows TLS certificates to be requested - automagically. Synapse supports ACME by requesting certs from - Let's Encrypt, which is one of the easiest ways to manage your - certificates. - </p> - <p> - If you wish to use ACME you will need access to port 80 which - usually requires root privileges. Do not run Synapse as root. Use - a Reverse Proxy or Authbind - </p> - <button onClick={() => { - toggle(); - onClickACME() - }}>Use ACME</button> - </Tab> - <Tab eventKey={TLS_TYPES.TLS} title="Provide your own TLS certs"> - <p> - Specify a path to or upload TLS certs for the domain. - </p> - <p>Please enter {certPathInvalid ? "a valid" : "the"} path to the cert</p> - <input - className={certPathInvalid ? style.invalidInput : undefined} - type="text" - placeholder="/path/to/your/cert.pem" - value={certPath ? certPath : undefined} - onChange={e => setCertPath(e.target.value)} - /> - - <p>Please enter {certKeyPathInvalid ? "a valid" : "the"} path to the cert's key</p> - <input - className={certKeyPathInvalid ? style.invalidInput : undefined} - type="text" - placeholder="/path/to/your/cert/key.tls.key" - value={certKeyPath ? certKeyPath : undefined} - onChange={e => setCertKeyPath(e.target.value)} - /> - - <button - disabled={certPath && certKeyPath ? undefined : true} - onClick={() => onClickCertPath(certPath, certKeyPath, toggle)} - >Use TLS Path</button> - - <h3>OR..</h3> - <h1>Upload a TLS cert</h1> - <p>Upload a cert file.</p> - <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, toggle)}>Upload cert</button> - - </Tab> - </Tabs> - </Card.Body> - </Accordion.Collapse> - </Card> + +export default ({ + testingCertPaths, + uploadingCerts, + certPathInvalid, + certKeyPathInvalid, + onClickCertPath, + onClickCertUpload, + onClickACME, + onClickReverseProxy, +}) => { + + const defaultType = TLS_TYPES.REVERSE_PROXY; + + const [type, setType] = useState(defaultType); + + const [certPath, setCertPath] = useState(""); + const [certKeyPath, setCertKeyPath] = useState(""); + const [certFile, setCertFile] = useState(); + const [certKeyFile, setCertKeyFile] = useState(); + + const defaultValue = REVERSE_PROXY_TYPES.NGINX; + const [reverseProxy, setReverseProxy] = useState(defaultValue); + + const toggle = useAccordionToggle(nextUI(TLS_UI)); + + return <Card> + <AccordionToggle as={Card.Header} eventKey={TLS_UI}> + TLS + </AccordionToggle> + <Accordion.Collapse eventKey={TLS_UI}> + <Card.Body> + <p> + Synapse uses TLS to ensure communication between homeservers is + secure. To use TLS, you’ll need a TLS certificate. Synapse supports + ACME, providing your own certificates, or reverse proxy handling TLS + certificates. + </p> + <Tabs defaultActiveKey={defaultType} onSelect={k => setType(k)}> + <Tab eventKey={TLS_TYPES.REVERSE_PROXY} title="Reverse Proxy"> + <p> + It is recommended to run Synapse behind a reverse proxy such + as <a target="_blank" href={apacheLink}>Apache</a>, <a target="_blank" href={caddyLink}>Caddy</a>, <a target="_blank" href={haproxyLink}>HAProxy</a>, or <a target="_blank" href={nginxLink}>NGiNX</a>. + </p> + <p> + The main benefit to this is that the reverse proxy can listen on + the privileged port 443 (which clients like Riot expect to connect + to) on behalf of synapse. The incoming traffic is then forwarded + to Synapse on a non privileged port. + </p> + <p> + You need root to listen on ports 0 to 1024 inclusive and running + synapse with root privileges is <b>strongly discouraged</b>. + Reverse proxies are more secure, run with root and pass things on + like nobody's business. + </p> + <p> + (Note: you can also have synapse use a non privileged port by + using one of the delegation methods mentioned earlier.) + </p> + <p> + If you choose to use a Reverse Proxy we'll provide you with + configuration templates later. + </p> + <p>More information about Reverse Proxies + <a href="https://github.com/matrix-org/synapse/blob/master/docs/reverse_proxy.rst"> + in the docs</a>. + </p> + <p> + Please choose the reverse proxy you're using. This is just so we can provide + you with a template later, if you already know how you're going to set yours + up don't worry too much about this. + </p> + <select defaultValue={defaultValue} onChange={e => setReverseProxy(e.target.value)} > + <option value={REVERSE_PROXY_TYPES.APACHE}>Apache</option> + <option value={REVERSE_PROXY_TYPES.CADDY}>Caddy</option> + <option value={REVERSE_PROXY_TYPES.HAPROXY}>HAProxy</option> + <option value={REVERSE_PROXY_TYPES.NGINX}>NGiNX</option> + <option value={REVERSE_PROXY_TYPES.OTHER}>Some other Reverse Proxy</option> + </select> + <div> + <button onClick={() => { + + toggle(); + onClickReverseProxy(reverseProxy) + + }}> + I already/will use a Reverse Proxy with TLS + </button> + </div> + </Tab> + <Tab eventKey={TLS_TYPES.ACME} title="ACME"> + <p> + ACME is a protocol that allows TLS certificates to be requested + automagically. Synapse supports ACME by requesting certs from + Let's Encrypt, which is one of the easiest ways to manage your + certificates. + </p> + <p> + If you wish to use ACME you will need access to port 80 which + usually requires root privileges. Do not run Synapse as root. Use + a Reverse Proxy or Authbind + </p> + <button onClick={() => { + + toggle(); + onClickACME() + + }}>Use ACME</button> + </Tab> + <Tab eventKey={TLS_TYPES.TLS} title="Provide your own TLS certs"> + <p> + Specify a path to or upload TLS certs for the domain. + </p> + <p>Please enter {certPathInvalid ? "a valid" : "the"} path to the cert</p> + <input + className={certPathInvalid ? style.invalidInput : undefined} + type="text" + placeholder="/path/to/your/cert.pem" + value={certPath ? certPath : undefined} + onChange={e => setCertPath(e.target.value)} + /> + + <p>Please enter {certKeyPathInvalid ? "a valid" : "the"} path to the cert's key</p> + <input + className={certKeyPathInvalid ? style.invalidInput : undefined} + type="text" + placeholder="/path/to/your/cert/key.tls.key" + value={certKeyPath ? certKeyPath : undefined} + onChange={e => setCertKeyPath(e.target.value)} + /> + + <button + disabled={certPath && certKeyPath ? undefined : true} + onClick={() => onClickCertPath(certPath, certKeyPath, toggle)} + >Use TLS Path</button> + + <h3>OR..</h3> + <h1>Upload a TLS cert</h1> + <p>Upload a cert file.</p> + <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, toggle)}>Upload cert</button> + </Tab> + </Tabs> + </Card.Body> + </Accordion.Collapse> + </Card> + } \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/UI.jsx b/synapse_topology/webui/src/js/components/UI.jsx index b5c3297adf..82b66b3386 100644 --- a/synapse_topology/webui/src/js/components/UI.jsx +++ b/synapse_topology/webui/src/js/components/UI.jsx @@ -6,21 +6,21 @@ import Accordion from 'react-bootstrap/Accordion'; import Card from 'react-bootstrap/Card'; import { - SETUP_INTRO_UI, - SERVER_NAME_UI, - STATS_REPORT_UI, - KEY_EXPORT_UI, - DELEGATION_OPTIONS_UI, - TLS_UI, - PORT_SELECTION_UI, - REVERSE_PROXY_TEMPLATE_UI, - LOADING_UI, - ERROR_UI, - DELEGATION_TEMPLATE_UI, - DATABASE_UI, - COMPLETE_UI, - SETUP_ORDER, -} from '../reducers/ui_constants'; + SETUP_INTRO_UI, + SERVER_NAME_UI, + STATS_REPORT_UI, + KEY_EXPORT_UI, + DELEGATION_OPTIONS_UI, + TLS_UI, + PORT_SELECTION_UI, + REVERSE_PROXY_TEMPLATE_UI, + LOADING_UI, + ERROR_UI, + DELEGATION_TEMPLATE_UI, + DATABASE_UI, + COMPLETE_UI, + SETUP_ORDER, +} from '../reducers/ui-constants'; import Error from './Error'; import Loading from './Loading'; @@ -38,55 +38,66 @@ import Database from '../containers/Database'; import ConfigSelector from './ConfigSelector'; import CompleteSetup from '../containers/CompleteSetup'; -const block_mapping = ui_block => { - console.log(`fetching ${ui_block}`) - switch (ui_block) { - case LOADING_UI: - return <Loading key={ui_block} /> - case ERROR_UI: - return <Error key={ui_block} /> - case SETUP_INTRO_UI: - return < IntroUi key={ui_block} /> - case SERVER_NAME_UI: - return <ServerName key={ui_block} /> - case STATS_REPORT_UI: - return <StatsReporter key={ui_block} /> - case KEY_EXPORT_UI: - return <ExportKeys key={ui_block} /> - case DELEGATION_OPTIONS_UI: - return <DelegationOptions key={ui_block} /> - case TLS_UI: - return <TLS key={ui_block} /> - case PORT_SELECTION_UI: - return <PortSelection key={ui_block} /> - case REVERSE_PROXY_TEMPLATE_UI: - return <ReverseProxySampleConfig key={ui_block} /> - case DELEGATION_TEMPLATE_UI: - return <DelegationSampleConfig key={ui_block} /> - case DATABASE_UI: - return <Database key={ui_block} /> - case COMPLETE_UI: - return <CompleteSetup key={ui_block} /> - default: - return <h1>how did i get here?</h1> - } +const blockMapping = uiBlock => { + + console.log(`fetching ${uiBlock}`) + switch (uiBlock) { + + case LOADING_UI: + return <Loading key={uiBlock} /> + case ERROR_UI: + return <Error key={uiBlock} /> + case SETUP_INTRO_UI: + return <IntroUi key={uiBlock} /> + case SERVER_NAME_UI: + return <ServerName key={uiBlock} /> + case STATS_REPORT_UI: + return <StatsReporter key={uiBlock} /> + case KEY_EXPORT_UI: + return <ExportKeys key={uiBlock} /> + case DELEGATION_OPTIONS_UI: + return <DelegationOptions key={uiBlock} /> + case TLS_UI: + return <TLS key={uiBlock} /> + case PORT_SELECTION_UI: + return <PortSelection key={uiBlock} /> + case REVERSE_PROXY_TEMPLATE_UI: + return <ReverseProxySampleConfig key={uiBlock} /> + case DELEGATION_TEMPLATE_UI: + return <DelegationSampleConfig key={uiBlock} /> + case DATABASE_UI: + return <Database key={uiBlock} /> + case COMPLETE_UI: + return <CompleteSetup key={uiBlock} /> + default: + return <h1>how did i get here?</h1> + + } + } -export default ({ setup_ui, config_ui, base_config }) => { +export default ({ setupUI, configUI, baseConfig }) => { + + if (!baseConfig.baseConfigChecked) { + + return <Loading /> + + } + + if (baseConfig.setupDone) { + + console.log(`switching to ui ${configUI}`); + return <ConfigSelector></ConfigSelector> + + } + + if (!baseConfig.setupDone) { - if (!base_config.base_config_checked) { - return <Loading /> - } + console.log(setupUI); + return <Accordion defaultActiveKey="0"> + {SETUP_ORDER.map(blockMapping)} + </Accordion > - if (base_config.setup_done) { - console.log(`switching to ui ${config_ui}`); - return <ConfigSelector></ConfigSelector> - } + } - if (!base_config.setup_done) { - console.log(setup_ui); - return <Accordion defaultActiveKey="0"> - {SETUP_ORDER.map(block_mapping)} - </Accordion > - } } \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/WalkThrough.jsx b/synapse_topology/webui/src/js/components/WalkThrough.jsx deleted file mode 100644 index f353e5c477..0000000000 --- a/synapse_topology/webui/src/js/components/WalkThrough.jsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; - -import ButtonDisplay from './ButtonDisplay'; - -export default ({ children }) => - <div>{children}</div> \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/AccordionToggle.js b/synapse_topology/webui/src/js/containers/AccordionToggle.js index 95816f2679..b283a4e398 100644 --- a/synapse_topology/webui/src/js/containers/AccordionToggle.js +++ b/synapse_topology/webui/src/js/containers/AccordionToggle.js @@ -3,16 +3,16 @@ import { connect } from 'react-redux'; import AccordionToggle from '../components/AccordionToggle'; const mapStateToProps = (state, { eventKey, as, children }) => ({ - active: state.setup_ui.active_blocks.includes(eventKey), - eventKey, - as, - children, + active: state.setupUI.activeBlocks.includes(eventKey), + eventKey, + as, + children, }); const mapDispathToProps = (dispatch) => ({ }); export default connect( - mapStateToProps, - mapDispathToProps + mapStateToProps, + mapDispathToProps, )(AccordionToggle); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/BaseIntro.js b/synapse_topology/webui/src/js/containers/BaseIntro.js index 3095fec0a2..6d0a9b437f 100644 --- a/synapse_topology/webui/src/js/containers/BaseIntro.js +++ b/synapse_topology/webui/src/js/containers/BaseIntro.js @@ -2,17 +2,17 @@ import { connect } from 'react-redux'; import BaseIntro from '../components/BaseIntro'; -import { advance_ui } from '../actions'; +import { advanceUI } from '../actions'; const mapStateToProps = (state, ownProps) => ({ }); const mapDispathToProps = (dispatch) => ({ - onClick: () => dispatch(advance_ui()) + onClick: () => dispatch(advanceUI()), }); export default connect( - null, - mapDispathToProps + null, + mapDispathToProps, )(BaseIntro); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/CompleteSetup.js b/synapse_topology/webui/src/js/containers/CompleteSetup.js index 7c926b4f74..483522dd93 100644 --- a/synapse_topology/webui/src/js/containers/CompleteSetup.js +++ b/synapse_topology/webui/src/js/containers/CompleteSetup.js @@ -1,21 +1,19 @@ import { connect } from 'react-redux'; import CompleteSetup from '../components/CompleteSetup'; -import { write_config } from '../actions'; +import { writeConfig } from '../actions'; const mapStateToProps = (state) => ({ - tlsType: state.base_config.tls, - delegationType: state.base_config.delegation_type, + tlsType: state.baseConfig.tls, + delegationType: state.baseConfig.delegationType, }); const mapDispatchToProps = (dispatch) => ({ - onClick: () => { - dispatch(write_config()) - }, + onClick: () => dispatch(writeConfig()), }); export default connect( - mapStateToProps, - mapDispatchToProps, + mapStateToProps, + mapDispatchToProps, )(CompleteSetup); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/ContentWrapper.js b/synapse_topology/webui/src/js/containers/ContentWrapper.js index 47ebcadb21..dc1b0a3f28 100644 --- a/synapse_topology/webui/src/js/containers/ContentWrapper.js +++ b/synapse_topology/webui/src/js/containers/ContentWrapper.js @@ -3,14 +3,14 @@ import { connect } from 'react-redux'; import ContentWrapper from '../components/ContentWrapper'; const mapStateToProps = (state, { children }) => ({ - servername: state.base_config.servername, - children, -}) + servername: state.baseConfig.servername, + children, +}); const mapDispatchToProps = (dispatch) => ({ }); export default connect( - mapStateToProps + mapStateToProps, )(ContentWrapper); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/Database.js b/synapse_topology/webui/src/js/containers/Database.js index e590831405..8387c1df7f 100644 --- a/synapse_topology/webui/src/js/containers/Database.js +++ b/synapse_topology/webui/src/js/containers/Database.js @@ -1,20 +1,22 @@ import { connect } from 'react-redux'; import Database from '../components/Database'; -import { set_database, advance_ui } from '../actions'; +import { setDatabase, advanceUI } from '../actions'; const mapStateToProps = (state) => { -} +}; const mapDispatchToProps = (dispatch) => ({ - onClick: database => { - dispatch(set_database(database)); - dispatch(advance_ui()); - } + onClick: database => { + + dispatch(setDatabase(database)); + dispatch(advanceUI()); + + }, }); export default connect( - null, - mapDispatchToProps, + null, + mapDispatchToProps, )(Database); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/DelegationOptions.js b/synapse_topology/webui/src/js/containers/DelegationOptions.js index ce5855969e..d93b188ba6 100644 --- a/synapse_topology/webui/src/js/containers/DelegationOptions.js +++ b/synapse_topology/webui/src/js/containers/DelegationOptions.js @@ -1,31 +1,44 @@ import { connect } from 'react-redux'; import DelegationOptions from '../components/DelegationOptions'; -import { set_delegation, advance_ui, set_delegation_servername, set_delegation_ports } from '../actions'; + +import { + setDelegation, + advanceUI, + setDelegationServername, + setDelegationPorts, +} from '../actions'; + import { DELEGATION_TYPES } from '../actions/constants'; const mapStateToProps = (state, { children }) => { - return { - servername: state.base_config.servername, - } + + return { + servername: state.baseConfig.servername, + } + } const mapDispatchToProps = (dispatch) => ({ - onClick: (type, servername, fedPort, clientPort) => { - dispatch(advance_ui()); - dispatch(set_delegation(type)); - dispatch(set_delegation_servername(servername)); - dispatch(set_delegation_ports(fedPort, clientPort)); - }, - - skip: () => { - dispatch(advance_ui()); - dispatch(set_delegation(DELEGATION_TYPES.LOCAL)); - } + onClick: (type, servername, fedPort, clientPort) => { + + dispatch(advanceUI()); + dispatch(setDelegation(type)); + dispatch(setDelegationServername(servername)); + dispatch(setDelegationPorts(fedPort, clientPort)); + + }, + + skip: () => { + + dispatch(advanceUI()); + dispatch(setDelegation(DELEGATION_TYPES.LOCAL)); + + }, }); export default connect( - mapStateToProps, - mapDispatchToProps, + mapStateToProps, + mapDispatchToProps, )(DelegationOptions); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/DelegationSampleConfig.js b/synapse_topology/webui/src/js/containers/DelegationSampleConfig.js index 82deabef2f..430475d0f8 100644 --- a/synapse_topology/webui/src/js/containers/DelegationSampleConfig.js +++ b/synapse_topology/webui/src/js/containers/DelegationSampleConfig.js @@ -2,55 +2,73 @@ import { connect } from 'react-redux'; import DelegationSampleConfig from '../components/DelegationSampleConfig'; -import { advance_ui } from '../actions'; +import { advanceUI } from '../actions'; import DNSConfig from '../templates/dns-srv'; import FedWellKnownConfig from '../templates/federation-well-known' import ClientWellKnownConfig from '../templates/client-well-known' import { DELEGATION_TYPES } from '../actions/constants'; -// synapseServerName: state.base_config.delegation_server_name ? state.base_config.delegation_server_name : state.base_config.servername, +// synapseServerName: state.baseConfig.delegationServerName ? state.baseConfig.delegationServerName : state.baseConfig.servername, const serverConfig = state => { - if (state.delegation_type == DELEGATION_TYPES.DNS) { - return undefined; - } else { - return FedWellKnownConfig({ - synapseServerName: state.delegation_servername, - delegationSynapsePort: state.delegation_federation_port ? state.delegation_federation_port : 8448, - }); - } + + if (state.delegationType == DELEGATION_TYPES.DNS) { + + return undefined; + + } else { + + return FedWellKnownConfig({ + synapseServerName: state.delegationServerName, + delegationSynapsePort: state.delegationFederationPort ? + state.delegationFederationPort : + 8448, + }); + + } + } const clientConfig = state => { - if (state.delegation_type == DELEGATION_TYPES.WELL_KNOWN) { - return ClientWellKnownConfig({ - synapseServerName: state.delegation_servername, - delegationClientPort: state.delegation_client_port ? state.delegation_client_port : 443, - }); - } else { - return DNSConfig({ - serverName: state.servername, - synapseServerName: state.delegation_servername, - delegationClientPort: state.delegation_client_port ? state.delegation_client_port : 443, - }) - } + + if (state.delegationType == DELEGATION_TYPES.WELL_KNOWN) { + + return ClientWellKnownConfig({ + synapseServerName: state.delegationServerName, + delegationClientPort: state.delegationClientPort ? + state.delegationClientPort : + 443, + }); + + } else { + + return DNSConfig({ + serverName: state.servername, + synapseServerName: state.delegationServerName, + delegationClientPort: state.delegationClientPort ? + state.delegationClientPort : + 443, + }) + + } + } const mapStateToProps = state => ({ - delegationType: state.base_config.delegation_type, - serverConfig: serverConfig(state.base_config), - clientConfig: clientConfig(state.base_config), - serverConfigFileName: `${state.base_config.servername}_delegation.conf`, - clientConfigFileName: `${state.base_config.servername}_client_delegation.conf`, - serverName: state.base_config.servername, + delegationType: state.baseConfig.delegationType, + serverConfig: serverConfig(state.baseConfig), + clientConfig: clientConfig(state.baseConfig), + serverConfigFileName: `${state.baseConfig.servername}_delegation.conf`, + clientConfigFileName: `${state.baseConfig.servername}_client_delegation.conf`, + serverName: state.baseConfig.servername, }); const mapDispatchToProps = dispatch => ({ - onClick: () => dispatch(advance_ui()), + onClick: () => dispatch(advanceUI()), }); export default connect( - mapStateToProps, - mapDispatchToProps + mapStateToProps, + mapDispatchToProps, )(DelegationSampleConfig); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/ExportKeys.js b/synapse_topology/webui/src/js/containers/ExportKeys.js index 095d63b644..a473de36a1 100644 --- a/synapse_topology/webui/src/js/containers/ExportKeys.js +++ b/synapse_topology/webui/src/js/containers/ExportKeys.js @@ -2,22 +2,24 @@ import { connect } from 'react-redux'; import ExportKeys from '../components/ExportKeys'; -import { advance_ui } from '../actions'; +import { advanceUI } from '../actions'; + +const mapStateToProps = state => { + + const secretKeyLoaded = state.baseConfig.secretKeyLoaded; + const secretKey = state.baseConfig.secretKey; + return { + secretKeyLoaded, + secretKey, + } -const mapStateToProps = (state, ownProps) => { - const secret_key_loaded = state.base_config.secret_key_loaded; - const secret_key = state.base_config.secret_key; - return { - secret_key_loaded, - secret_key, - } }; -const mapDispatchToProps = (dispatch) => ({ - onClick: () => dispatch(advance_ui()) +const mapDispatchToProps = dispatch => ({ + onClick: () => dispatch(advanceUI()), }); export default connect( - mapStateToProps, - mapDispatchToProps + mapStateToProps, + mapDispatchToProps, )(ExportKeys); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/PortSelection.js b/synapse_topology/webui/src/js/containers/PortSelection.js index 93c3ac7f89..38d0f715e0 100644 --- a/synapse_topology/webui/src/js/containers/PortSelection.js +++ b/synapse_topology/webui/src/js/containers/PortSelection.js @@ -2,43 +2,59 @@ import { connect } from 'react-redux'; import PortSelection from '../components/PortSelection'; -import { set_synapse_ports } from '../actions'; +import { setSynapsePorts } from '../actions'; import { TLS_TYPES } from '../actions/constants'; const defaultFedPort = state => { - console.log(state) - if (state.tls == TLS_TYPES.REVERSE_PROXY) { - return 8008; - } - return state.delegation_federation_port ? state.delegation_federation_port : 8448; + console.log(state) + if (state.tls == TLS_TYPES.REVERSE_PROXY) { + + return 8008; + + } + + return state.delegationFederationPort ? state.delegationFederationPort : 8448; + } const defaultClientPort = state => { - if (state.tls == TLS_TYPES.REVERSE_PROXY) { - return 8008; - } - return state.delegation_federation_port ? state.delegation_federation_port : 443; + if (state.tls == TLS_TYPES.REVERSE_PROXY) { + + return 8008; + + } + + return state.delegationFederationPort ? + state.delegationFederationPort : + 443; + } -const mapStateToProps = ({ base_config }) => ({ - servername: base_config.servername, - verifyingPorts: base_config.verifying_ports, - fedPortInUse: base_config.synapse_federation_port_free != undefined ? !base_config.synapse_federation_port_free : false, - clientPortInUse: base_config.synapse_client_port_free != undefined ? !base_config.synapse_client_port_free : false, - canChangePorts: base_config.tls == TLS_TYPES.REVERSE_PROXY, - defaultFedPort: defaultFedPort(base_config), - defaultClientPort: defaultClientPort(base_config), +const mapStateToProps = ({ baseConfig }) => ({ + servername: baseConfig.servername, + verifyingPorts: baseConfig.verifyingPorts, + fedPortInUse: baseConfig.synapseFederationPortFree != undefined ? + !baseConfig.synapseFederationPortFree : + false, + clientPortInUse: baseConfig.synapseClientPortFree != undefined ? + !baseConfig.synapseClientPortFree : + false, + canChangePorts: baseConfig.tls == TLS_TYPES.REVERSE_PROXY, + defaultFedPort: defaultFedPort(baseConfig), + defaultClientPort: defaultClientPort(baseConfig), }); const mapDispathToProps = (dispatch) => ({ - onClick: (fedPort, clientPort, callback) => { - dispatch(set_synapse_ports(fedPort, clientPort, callback)); - } + onClick: (fedPort, clientPort, callback) => { + + dispatch(setSynapsePorts(fedPort, clientPort, callback)); + + }, }); export default connect( - mapStateToProps, - mapDispathToProps + mapStateToProps, + mapDispathToProps, )(PortSelection); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/ReverseProxySampleConfig.js b/synapse_topology/webui/src/js/containers/ReverseProxySampleConfig.js index 4c6bb94eb0..694e298682 100644 --- a/synapse_topology/webui/src/js/containers/ReverseProxySampleConfig.js +++ b/synapse_topology/webui/src/js/containers/ReverseProxySampleConfig.js @@ -2,7 +2,7 @@ import { connect } from 'react-redux'; import ReverseProxySampleConfig from '../components/ReverseProxySampleConfig'; -import { advance_ui } from '../actions'; +import { advanceUI } from '../actions'; import { REVERSE_PROXY_TYPES } from '../actions/constants'; import apacheConfig from '../templates/apache'; @@ -11,37 +11,47 @@ import haproxyConfig from '../templates/haproxy'; import nginxConfig from '../templates/nginx'; const sampleConfig = reverseProxyType => { - switch (reverseProxyType) { - case REVERSE_PROXY_TYPES.APACHE: - return apacheConfig; - case REVERSE_PROXY_TYPES.CADDY: - return caddyConfig; - case REVERSE_PROXY_TYPES.HAPROXY: - return haproxyConfig; - case REVERSE_PROXY_TYPES.NGINX: - return nginxConfig; - case REVERSE_PROXY_TYPES.OTHER: - return otherConfig; - } + + switch (reverseProxyType) { + + case REVERSE_PROXY_TYPES.APACHE: + return apacheConfig; + case REVERSE_PROXY_TYPES.CADDY: + return caddyConfig; + case REVERSE_PROXY_TYPES.HAPROXY: + return haproxyConfig; + case REVERSE_PROXY_TYPES.NGINX: + return nginxConfig; + case REVERSE_PROXY_TYPES.OTHER: + return otherConfig; + + } + } const mapStateToProps = state => ({ - proxyType: state.base_config.reverse_proxy, - sampleConfig: sampleConfig(state.base_config.reverse_proxy)({ - delegationFedPort: state.base_config.delegation_federation_port ? state.base_config.delegation_federation_port : 8448, - delegationClientPort: state.base_config.delegation_client_port ? state.base_config.delegation_client_port : 443, - fedPort: state.base_config.synapse_federation_port, - clientPort: state.base_config.synapse_client_port, - synapseServerName: state.base_config.delegation_server_name ? state.base_config.delegation_server_name : state.base_config.servername, - }), - fileName: "synapse_reverse_proxy.conf", + proxyType: state.baseConfig.reverseProxy, + sampleConfig: sampleConfig(state.baseConfig.reverseProxy)({ + delegationFedPort: state.baseConfig.delegationFederationPort ? + state.baseConfig.delegationFederationPort : + 8448, + delegationClientPort: state.baseConfig.delegationClientPort ? + state.baseConfig.delegationClientPort : + 443, + fedPort: state.baseConfig.synapseFederationPort, + clientPort: state.baseConfig.synapseClientPort, + synapseServerName: state.baseConfig.delegationServerName ? + state.baseConfig.delegationServerName : + state.baseConfig.servername, + }), + fileName: "synapse_reverse_proxy.conf", }); const mapDispatchToProps = dispatch => ({ - onClick: () => dispatch(advance_ui()), + onClick: () => dispatch(advanceUI()), }); export default connect( - mapStateToProps, - mapDispatchToProps + mapStateToProps, + mapDispatchToProps, )(ReverseProxySampleConfig); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/ServerName.js b/synapse_topology/webui/src/js/containers/ServerName.js index b7fa07982b..6fdf863b17 100644 --- a/synapse_topology/webui/src/js/containers/ServerName.js +++ b/synapse_topology/webui/src/js/containers/ServerName.js @@ -2,20 +2,20 @@ import { connect } from 'react-redux'; import ServerName from '../components/ServerName'; -import { advance_ui, set_servername } from '../actions'; +import { advanceUI, setServername } from '../actions'; const mapStateToProps = (state, ownProps) => ({ }); const mapDispathToProps = (dispatch) => ({ - onClick: servername => { - dispatch(advance_ui()); - dispatch(set_servername(servername)); - } + onClick: servername => { + dispatch(advanceUI()); + dispatch(setServername(servername)); + }, }); export default connect( - null, - mapDispathToProps + null, + mapDispathToProps, )(ServerName); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/StatsReporter.js b/synapse_topology/webui/src/js/containers/StatsReporter.js index 2ff9fd64e0..c7e3b06966 100644 --- a/synapse_topology/webui/src/js/containers/StatsReporter.js +++ b/synapse_topology/webui/src/js/containers/StatsReporter.js @@ -2,21 +2,23 @@ import { connect } from 'react-redux'; import StatsReporter from '../components/StatsReporter'; -import { advance_ui, set_stats, generate_secret_keys } from '../actions'; +import { advanceUI, setStats, generateSecretKeys } from '../actions'; const mapStateToProps = (state, ownProps) => ({ }); const mapDispathToProps = (dispatch) => ({ - onClick: consent => { - dispatch(advance_ui()); - dispatch(set_stats(consent)); - dispatch(generate_secret_keys(consent)) - } + onClick: consent => { + + dispatch(advanceUI()); + dispatch(setStats(consent)); + dispatch(generateSecretKeys(consent)) + + }, }); export default connect( - null, - mapDispathToProps + null, + mapDispathToProps, )(StatsReporter); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/TLS.js b/synapse_topology/webui/src/js/containers/TLS.js index cca3f1fa94..34150577ae 100644 --- a/synapse_topology/webui/src/js/containers/TLS.js +++ b/synapse_topology/webui/src/js/containers/TLS.js @@ -2,37 +2,51 @@ import { connect } from 'react-redux'; import TLS from '../components/TLS'; -import { advance_ui, set_tls, set_tls_cert_paths, set_tls_cert_files, set_reverse_proxy } from '../actions'; +import { + advanceUI, + setTls, + setTlsCertPaths, + setTlsCertFiles, + setReverseProxy, +} from '../actions'; import { TLS_TYPES } from '../actions/constants'; const mapStateToProps = (state, ownProps) => ({ - testingCertPaths: state.base_config.testing_cert_paths, - uploadingCertPaths: state.base_config.uploading_certs, - certPathInvalid: state.base_config.cert_path_invalid, - certKeyPathInvalid: state.base_config.cert_key_path_invalid, + testingCertPaths: state.baseConfig.testingCertPaths, + uploadingCertPaths: state.baseConfig.uploadingCerts, + certPathInvalid: state.baseConfig.certPathInvalid, + certKeyPathInvalid: state.baseConfig.certKeyPathInvalid, }); const mapDispathToProps = (dispatch) => ({ - onClickACME: () => { - dispatch(advance_ui(TLS_TYPES.ACME)); - dispatch(set_tls(TLS_TYPES.ACME)); - }, - onClickReverseProxy: proxy_type => { - dispatch(advance_ui()); - dispatch(set_tls(TLS_TYPES.REVERSE_PROXY)) - dispatch(set_reverse_proxy(proxy_type)) - }, - 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, callback) => { - dispatch(set_tls_cert_files(tls_cert_file, tls_key_file)); - callback(); - }, + onClickACME: () => { + + dispatch(advanceUI(TLS_TYPES.ACME)); + dispatch(setTls(TLS_TYPES.ACME)); + + }, + onClickReverseProxy: proxyType => { + + dispatch(advanceUI()); + dispatch(setTls(TLS_TYPES.REVERSE_PROXY)) + dispatch(setReverseProxy(proxyType)) + + }, + onClickCertPath: (certPath, certKeyPath, callback) => { + + dispatch(setTlsCertPaths(certPath, certKeyPath, callback)); + + }, + onClickCertUpload: (tlsCertFile, tlsKeyFile, callback) => { + + dispatch(setTlsCertFiles(tlsCertFile, tlsKeyFile)); + callback(); + + }, }); export default connect( - null, - mapDispathToProps + null, + mapDispathToProps, )(TLS) \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/UI.js b/synapse_topology/webui/src/js/containers/UI.js index 15acab3953..f4ee16c8fb 100644 --- a/synapse_topology/webui/src/js/containers/UI.js +++ b/synapse_topology/webui/src/js/containers/UI.js @@ -1,11 +1,11 @@ import { connect } from 'react-redux'; import UI from '../components/UI'; -const mapStateToProps = ({ setup_done, setup_ui, config_ui, base_config }) => ({ - setup_done, - setup_ui, - config_ui, - base_config, +const mapStateToProps = ({ setupDone, setupUI, configUI, baseConfig }) => ({ + setupDone, + setupUI, + configUI, + baseConfig, }) @@ -14,5 +14,5 @@ const mapDispathToProps = (dispatch, ownProps) => ({ }) export default connect( - mapStateToProps, + mapStateToProps, )(UI) \ No newline at end of file diff --git a/synapse_topology/webui/src/js/index.jsx b/synapse_topology/webui/src/js/index.jsx index e576539c7c..3995436fd1 100644 --- a/synapse_topology/webui/src/js/index.jsx +++ b/synapse_topology/webui/src/js/index.jsx @@ -5,23 +5,21 @@ import { createStore, applyMiddleware } from 'redux' import thunk from 'redux-thunk'; import rootReducer from './reducers'; import UI from './containers/UI'; -import style from '../scss/main.scss'; -import logo from '../fonts/matrix-logo.svg'; import { startup } from './actions'; const store = createStore( - rootReducer, - applyMiddleware(thunk), - //+ window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() + rootReducer, + applyMiddleware(thunk), + //+ window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ); store.dispatch(startup()); render( - <Provider store={store}> - {/* <img className={style.logo} src={logo} /> */} - <UI /> - </Provider>, - document.body, + <Provider store={store}> + {/* <img className={style.logo} src={logo} /> */} + <UI /> + </Provider>, + document.body, ); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/reducers/base-config-reducer.js b/synapse_topology/webui/src/js/reducers/base-config-reducer.js index fc7c9b0027..9d296a6a3a 100644 --- a/synapse_topology/webui/src/js/reducers/base-config-reducer.js +++ b/synapse_topology/webui/src/js/reducers/base-config-reducer.js @@ -1,136 +1,140 @@ import { - SET_SERVERNAME, - SET_STATS, - SET_SECRET_KEY, - GETTING_SECRET_KEY, - SET_DELEGATION, - SET_DELEGATION_SERVERNAME, - SET_REVERSE_PROXY, - SET_TLS, - TESTING_TLS_CERT_PATHS, - SET_TLS_CERT_PATHS, - SET_TLS_CERT_PATHS_VALIDITY, - SET_TLS_CERT_FILES, - UPLOADING_TLS_CERT_PATHS, - TESTING_SYNAPSE_PORTS, - SET_SYNAPSE_PORTS, - SET_SYNAPSE_PORTS_FREE, - SET_DATABASE, - SET_CONFIG_DIR, - BASE_CONFIG_CHECKED, + SET_SERVERNAME, + SET_STATS, + SET_SECRET_KEY, + GETTING_SECRET_KEY, + SET_DELEGATION, + SET_DELEGATION_SERVERNAME, + SET_REVERSE_PROXY, + SET_TLS, + TESTING_TLS_CERT_PATHS, + SET_TLS_CERT_PATHS, + SET_TLS_CERT_PATHS_VALIDITY, + SET_TLS_CERT_FILES, + UPLOADING_TLS_CERT_PATHS, + TESTING_SYNAPSE_PORTS, + SET_SYNAPSE_PORTS, + SET_SYNAPSE_PORTS_FREE, + SET_DATABASE, + SET_CONFIG_DIR, + BASE_CONFIG_CHECKED, } from "../actions/types"; export default (state, action) => { - switch (action.type) { - case BASE_CONFIG_CHECKED: - return { - ...state, - base_config_checked: true, - setup_done: action.setup_done, - } - case SET_SERVERNAME: - return { - ...state, - servername: action.servername, - } - case SET_STATS: - return { - ...state, - report_stats: action.consent, - } - case GETTING_SECRET_KEY: - return { - ...state, - secret_key_loaded: false, - } - case SET_SECRET_KEY: - return { - ...state, - secret_key_loaded: true, - secret_key: action.key, - }; - case SET_DELEGATION: - return { - ...state, - delegation_type: action.delegation_type, - } - case SET_DELEGATION_SERVERNAME: - return { - ...state, - delegation_servername: action.servername, - } - case SET_DELEGATION_SERVERNAME: - return { - ...state, - delegation_federation_port: action.federation_port, - delegation_client_port: action.client_port, - } - case SET_REVERSE_PROXY: - return { - ...state, - reverse_proxy: action.proxy_type, - } - case SET_TLS: - return { - ...state, - tls: action.tls_type, - } - case TESTING_TLS_CERT_PATHS: - return { - ...state, - testing_cert_paths: action.testing, - } - case SET_TLS_CERT_PATHS_VALIDITY: - return { - ...state, - cert_path_invalid: action.cert_path_invalid, - cert_key_path_invalid: action.cert_key_path_invalid, - } - case SET_TLS_CERT_PATHS: - return { - ...state, - tls_cert_path: action.cert_path, - tls_cert_key_path: action.cert_key_path, - } - case SET_TLS_CERT_FILES: - return { - ...state, - tls_cert_file: action.tls_cert_file, - tls_cert_key_file: action.tls_cert_key_file, - } - case UPLOADING_TLS_CERT_PATHS: - return { - ...state, - uploading_certs: action.uploading, - } - case TESTING_SYNAPSE_PORTS: - return { - ...state, - verifying_ports: action.verifying, - } - case SET_SYNAPSE_PORTS: - return { - ...state, - synapse_federation_port: action.federation_port, - synapse_client_port: action.client_port, - } - case SET_SYNAPSE_PORTS_FREE: - return { - ...state, - synapse_federation_port_free: action.synapse_federation_port_free, - synapse_client_port_free: action.synapse_client_port_free, - } - case SET_DATABASE: - return { - ...state, - database: action.database, - } - case SET_CONFIG_DIR: - return { - ...state, - config_dir: action.config_dir, - } - default: - return state; - } + + switch (action.type) { + + case BASE_CONFIG_CHECKED: + return { + ...state, + baseConfigChecked: true, + setupDone: action.setupDone, + } + case SET_SERVERNAME: + return { + ...state, + servername: action.servername, + } + case SET_STATS: + return { + ...state, + reportStats: action.consent, + } + case GETTING_SECRET_KEY: + return { + ...state, + secretKeyLoaded: false, + } + case SET_SECRET_KEY: + return { + ...state, + secretKeyLoaded: true, + secretKey: action.key, + }; + case SET_DELEGATION: + return { + ...state, + delegationType: action.delegationType, + } + case SET_DELEGATION_SERVERNAME: + return { + ...state, + delegationServername: action.servername, + } + case SET_DELEGATION_SERVERNAME: + return { + ...state, + delegationFederationPort: action.federationPort, + delegationClientPort: action.clientPort, + } + case SET_REVERSE_PROXY: + return { + ...state, + reverseProxy: action.proxyType, + } + case SET_TLS: + return { + ...state, + tls: action.tlsType, + } + case TESTING_TLS_CERT_PATHS: + return { + ...state, + testingCertPaths: action.testing, + } + case SET_TLS_CERT_PATHS_VALIDITY: + return { + ...state, + certPathInvalid: action.certPathInvalid, + certKeyPathInvalid: action.certKeyPathInvalid, + } + case SET_TLS_CERT_PATHS: + return { + ...state, + tlsCertPath: action.certPath, + tlsCertKeyPath: action.certKeyPath, + } + case SET_TLS_CERT_FILES: + return { + ...state, + tlsCertFile: action.tlsCertFile, + tlsCertKeyFile: action.tlsCerKeyFile, + } + case UPLOADING_TLS_CERT_PATHS: + return { + ...state, + uploadingCerts: action.uploading, + } + case TESTING_SYNAPSE_PORTS: + return { + ...state, + verifyingports: action.verifying, + } + case SET_SYNAPSE_PORTS: + return { + ...state, + synapseFederationPort: action.federationPort, + synapseClientPort: action.clientPort, + } + case SET_SYNAPSE_PORTS_FREE: + return { + ...state, + synapseFederationPortFree: action.synapseFederationPortFree, + synapseClientPortFree: action.synapseClientPortFree, + } + case SET_DATABASE: + return { + ...state, + database: action.database, + } + case SET_CONFIG_DIR: + return { + ...state, + configDir: action.configDir, + } + default: + return state; + + } + }; \ No newline at end of file diff --git a/synapse_topology/webui/src/js/reducers/config-ui-reducer.js b/synapse_topology/webui/src/js/reducers/config-ui-reducer.js index d9a268c681..aa3fb40952 100644 --- a/synapse_topology/webui/src/js/reducers/config-ui-reducer.js +++ b/synapse_topology/webui/src/js/reducers/config-ui-reducer.js @@ -1,13 +1,21 @@ const ADVANCED_CONFIG_UI_COMPONENTS = { - CONFIG_SELECTION_UI: "config_selection_ui" -} - -export default ({ config_ui, base_config }, action) => { - if (!base_config.base_config_checked) { - return config_ui; - } - if (!base_config.setup_done) { - return config_ui; - } - return config_ui; + CONFIG_SELECTION_UI: "config_selection_ui", +}; + +export default ({ configUI, baseConfig }, action) => { + + if (!baseConfig.baseConfigChecked) { + + return configUI; + + }; + + if (!baseConfig.setupDone) { + + return configUI; + + }; + + return configUI; + } \ No newline at end of file diff --git a/synapse_topology/webui/src/js/reducers/index.js b/synapse_topology/webui/src/js/reducers/index.js index 4c31d3931b..9cceb9332e 100644 --- a/synapse_topology/webui/src/js/reducers/index.js +++ b/synapse_topology/webui/src/js/reducers/index.js @@ -1,22 +1,22 @@ -import base_config_reducer from './base-config-reducer'; +import baseConfigReducer from './base-config-reducer'; -import config_ui_reducer from './config-ui-reducer'; -import setup_ui_reducer from './setup-ui-reducer'; +import configUIReducer from './config-ui-reducer'; +import setupUIReducer from './setup-ui-reducer'; -import { SETUP_INTRO_UI, SERVER_NAME_UI } from './ui_constants'; +import { SETUP_INTRO_UI, SERVER_NAME_UI } from './ui-constants'; export default (state = { - setup_ui: { - active_blocks: [SETUP_INTRO_UI, SERVER_NAME_UI], - }, - config_ui: { - }, - base_config: { - base_config_checked: false, - } + setupUI: { + activeBlocks: [SETUP_INTRO_UI, SERVER_NAME_UI], + }, + configUI: { + }, + baseConfig: { + baseConfigChecked: false, + }, }, action) => ({ - config_ui: config_ui_reducer(state, action), - setup_ui: setup_ui_reducer(state, action), - base_config: base_config_reducer(state.base_config, action) + configUI: configUIReducer(state, action), + setupUI: setupUIReducer(state, action), + baseConfig: baseConfigReducer(state.baseConfig, action), }); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/reducers/setup-ui-reducer.js b/synapse_topology/webui/src/js/reducers/setup-ui-reducer.js index 720f85ebed..e6219ad575 100644 --- a/synapse_topology/webui/src/js/reducers/setup-ui-reducer.js +++ b/synapse_topology/webui/src/js/reducers/setup-ui-reducer.js @@ -1,30 +1,39 @@ import { ADVANCE_UI, BACK_UI, BASE_CONFIG_CHECKED } from '../actions/types'; -import useAccordionToggle from 'react-bootstrap/useAccordionToggle' import { - SETUP_ORDER, -} from './ui_constants'; + SETUP_ORDER, +} from './ui-constants'; -const new_active_blocks = active_blocks => { - return SETUP_ORDER.slice(0, active_blocks.length + 1) +const newActiveBlocks = activeBlocks => { + + return SETUP_ORDER.slice(0, activeBlocks.length + 1) + } -export default ({ setup_ui, base_config }, action) => { - if (!base_config.base_config_checked) { - return setup_ui; - } - if (base_config.setup_done) { - return setup_ui; - } - switch (action.type) { - case ADVANCE_UI: - return { - active_blocks: new_active_blocks(setup_ui.active_blocks), - } - case BACK_UI: - default: - return setup_ui; - } +export default ({ setupUI, baseConfig }, action) => { + + if (!baseConfig.baseConfigChecked) { + + return setupUI; + + } + if (baseConfig.setupDone) { + + return setupUI; + + } + switch (action.type) { + + case ADVANCE_UI: + return { + activeBlocks: newActiveBlocks(setupUI.activeBlocks), + } + case BACK_UI: + default: + return setupUI; + + } + } -export const next_ui = current => SETUP_ORDER[SETUP_ORDER.lastIndexOf(current) + 1] \ No newline at end of file +export const nextUI = current => SETUP_ORDER[SETUP_ORDER.lastIndexOf(current) + 1] \ No newline at end of file diff --git a/synapse_topology/webui/src/js/reducers/state.js b/synapse_topology/webui/src/js/reducers/state.js index 398887221c..88982aa4c2 100644 --- a/synapse_topology/webui/src/js/reducers/state.js +++ b/synapse_topology/webui/src/js/reducers/state.js @@ -1,38 +1,38 @@ const state = { - setup_ui: { - active_blocks: ["block1"], - }, - config_ui: { + setupUI: { + activeBlocks: ["block1"], + }, + configUI: { - }, - base_config: { - setup_done: true, - base_config_checked: false, - servername: "server_name", - report_stats: false, - getting_secret_key: false, - secret_key: "asdfsadf", - delegation_type: "local|well_known|DNS_SRV", - delegation_server_name: "name", - delegation_federation_port: "\"\"|325", - delegation_client_port: "\"\"|325", - reverse_proxy: "nginx|caddy|apache|haproxy|other|none", - tls: "acme|tls|reverseproxy", - testing_cert_paths: true, - uploading_certs: true, - cert_path_invalid: true, - cert_key_path_invalid: true, - tls_cert_path: "sadfaf", - tls_cert_key_path: "sdfasdf", - tls_cert_file: "sadfa;dlf;sad;fkla;sdlfjkas;dlfkjas;dflkja;sdfkljadf ------", - tls_cert_key_file: "sadfa;dlf;sad;fkla;sdlfjkas;dlfkjas;dflkja;sdfkljadf ------", - tls_path: "sdasfaf/a/fdasfd/a/fasd/", - verifying_ports: true, - synapse_federation_port_free: true, - synapse_client_port_free: true, - synapse_federation_port: 1234, - synapse_client_port: 1234, - database: "sqlite3|postgres", - config_dir: "sadfasdf", - } + }, + baseConfig: { + setupDone: true, + baseConfigChecked: false, + servername: "server_name", + reportStats: false, + gettingSecretKey: false, + secretKey: "asdfsadf", + delegationType: "local|well_known|DNS_SRV", + delegationServerName: "name", + delegationFederationPort: "\"\"|325", + delegationClientPort: "\"\"|325", + reverseProxy: "nginx|caddy|apache|haproxy|other|none", + tls: "acme|tls|reverseproxy", + testingCertPaths: true, + uploadingCerts: true, + certPathInvalid: true, + certKeyPathInvalid: true, + tlsCertPath: "sadfaf", + tlsCertKeyPath: "sdfasdf", + tlsCertFile: "sadfa;dlf;sad;fkla;sdlfjkas;dlfkjas;dflkja;sdfkljadf ------", + tlsCertKeyFile: "sadfa;dlf;sad;fkla;sdlfjkas;dlfkjas;dflkja;sdfkljadf ------", + tlsPath: "sdasfaf/a/fdasfd/a/fasd/", + verifyingPorts: true, + synapseFederationPortFree: true, + synapseClientPortFree: true, + synapseFederationPort: 1234, + synapseClientPort: 1234, + database: "sqlite3|postgres", + configDir: "sadfasdf", + }, } \ No newline at end of file diff --git a/synapse_topology/webui/src/js/reducers/ui_constants.js b/synapse_topology/webui/src/js/reducers/ui-constants.js index 911ff5769e..8675654f3a 100644 --- a/synapse_topology/webui/src/js/reducers/ui_constants.js +++ b/synapse_topology/webui/src/js/reducers/ui-constants.js @@ -13,15 +13,15 @@ export const COMPLETE_UI = "complete_ui"; // Setup order export const SETUP_ORDER = [ - SETUP_INTRO_UI, - SERVER_NAME_UI, - STATS_REPORT_UI, - KEY_EXPORT_UI, - DELEGATION_OPTIONS_UI, - TLS_UI, - PORT_SELECTION_UI, - DATABASE_UI, - COMPLETE_UI + SETUP_INTRO_UI, + SERVER_NAME_UI, + STATS_REPORT_UI, + KEY_EXPORT_UI, + DELEGATION_OPTIONS_UI, + TLS_UI, + PORT_SELECTION_UI, + DATABASE_UI, + COMPLETE_UI, ]; diff --git a/synapse_topology/webui/src/js/templates/apache.js b/synapse_topology/webui/src/js/templates/apache.js index 1c9a489fe3..d896c9cb47 100644 --- a/synapse_topology/webui/src/js/templates/apache.js +++ b/synapse_topology/webui/src/js/templates/apache.js @@ -1,9 +1,9 @@ export default ({ - delegationFedPort, - delegationClientPort, - fedPort, - clientPort, - synapseServerName, + delegationFedPort, + delegationClientPort, + fedPort, + clientPort, + synapseServerName, }) => ` <VirtualHost *:${delegationClientPort}> SSLEngine on diff --git a/synapse_topology/webui/src/js/templates/caddy.js b/synapse_topology/webui/src/js/templates/caddy.js index d073358811..50c4abca61 100644 --- a/synapse_topology/webui/src/js/templates/caddy.js +++ b/synapse_topology/webui/src/js/templates/caddy.js @@ -1,9 +1,9 @@ export default ({ - delegationFedPort, - delegationClientPort, - fedPort, - clientPort, - synapseServerName, + delegationFedPort, + delegationClientPort, + fedPort, + clientPort, + synapseServerName, }) => `${synapseServerName}:${delegationClientPort} { proxy /_matrix http://localhost:${clientPort} { transparent diff --git a/synapse_topology/webui/src/js/templates/client-well-known.js b/synapse_topology/webui/src/js/templates/client-well-known.js index 2919695eab..2583d70f6d 100644 --- a/synapse_topology/webui/src/js/templates/client-well-known.js +++ b/synapse_topology/webui/src/js/templates/client-well-known.js @@ -1,6 +1,7 @@ +/* eslint-disable max-len */ export default ({ - synapseServerName, - delegationClientPort, + synapseServerName, + delegationClientPort, }) => `{ "m.homeserver": { "base_url": "https://${synapseServerName}${delegationClientPort ? `:${delegationClientPort}` : ""}" diff --git a/synapse_topology/webui/src/js/templates/dns-srv.js b/synapse_topology/webui/src/js/templates/dns-srv.js index 40826d6eb0..23d6327544 100644 --- a/synapse_topology/webui/src/js/templates/dns-srv.js +++ b/synapse_topology/webui/src/js/templates/dns-srv.js @@ -1,8 +1,9 @@ +/* eslint-disable max-len */ export default ({ - delegationFedPort, - delegationClientPort, - fedPort, - clientPort, - serverName, - synapseServerName, + delegationFedPort, + delegationClientPort, + fedPort, + clientPort, + serverName, + synapseServerName, }) => `_matrix._tcp.${serverName} 3600 IN SRV 10 5 ${delegationClientPort} ${synapseServerName}` \ No newline at end of file diff --git a/synapse_topology/webui/src/js/templates/federation-well-known.js b/synapse_topology/webui/src/js/templates/federation-well-known.js index 39c9f15c0a..5b6ffd5faf 100644 --- a/synapse_topology/webui/src/js/templates/federation-well-known.js +++ b/synapse_topology/webui/src/js/templates/federation-well-known.js @@ -1,6 +1,6 @@ export default ({ - synapseServerName, - delegationSynapsePort, + synapseServerName, + delegationSynapsePort, }) => `{ "m.server": "${synapseServerName}:${delegationSynapsePort}" }` \ No newline at end of file diff --git a/synapse_topology/webui/src/js/templates/haproxy.js b/synapse_topology/webui/src/js/templates/haproxy.js index 25b9cf1734..a1810c2cf7 100644 --- a/synapse_topology/webui/src/js/templates/haproxy.js +++ b/synapse_topology/webui/src/js/templates/haproxy.js @@ -1,12 +1,15 @@ +/* eslint-disable max-len */ export default ({ - delegationFedPort, - delegationClientPort, - fedPort, - clientPort, - synapseServerName, + delegationFedPort, + delegationClientPort, + fedPort, + clientPort, + synapseServerName, }) => { - if (fedPort == clientPort) { - return `frontend https + + if (fedPort == clientPort) { + + return `frontend https bind :::${delegationClientPort} v4v6 ssl crt /etc/ssl/haproxy/ strict-sni alpn h2,http/1.1 # Matrix client traffic @@ -22,8 +25,10 @@ frontend matrix-federation backend matrix server matrix 127.0.0.1:${fedPort} ` - } else { - return `frontend https + + } else { + + return `frontend https bind:::${delegationClientPort} v4v6 ssl crt /etc/ssl/haproxy/ strict-sni alpn h2, http / 1.1 # Matrix client traffic @@ -40,5 +45,7 @@ backend matrix server matrix 127.0.0.1:${fedPort} backend matrix-client 127.0.0.1:${clientPort}` - } + + } + } \ No newline at end of file diff --git a/synapse_topology/webui/src/js/templates/nginx.js b/synapse_topology/webui/src/js/templates/nginx.js index 294f47baf7..aa19ea7116 100644 --- a/synapse_topology/webui/src/js/templates/nginx.js +++ b/synapse_topology/webui/src/js/templates/nginx.js @@ -1,10 +1,10 @@ import React from 'react'; export default ({ - delegationFedPort, - delegationClientPort, - fedPort, - clientPort, - synapseServerName, + delegationFedPort, + delegationClientPort, + fedPort, + clientPort, + synapseServerName, }) => `listen {delegationClientPort} ssl; listen [::]:${delegationClientPort} ssl; server_name ${synapseServerName}; diff --git a/synapse_topology/webui/src/js/utils/yaml.js b/synapse_topology/webui/src/js/utils/yaml.js index 6b8dc5c6fb..191b604a8f 100644 --- a/synapse_topology/webui/src/js/utils/yaml.js +++ b/synapse_topology/webui/src/js/utils/yaml.js @@ -1,117 +1,149 @@ -import yaml from 'yaml'; +/* eslint-disable camelcase */ import { TLS_TYPES, REVERSE_PROXY_TYPES } from '../actions/constants'; import { CONFIG_LOCK } from '../api/constants'; const listeners = config => { - const listeners = []; - if (config.tls == TLS_TYPES.TLS) { - listeners.push({ - port: config.synapse_federation_port, - tls: true, - bind_addresses: ['::1', '127.0.0.1'], - type: "http", - x_forwarded: true, - - resources: [{ - names: ["federation"], - compress: false, - }], - }); - } else { - listeners.push({ - port: config.synapse_federation_port, - tls: true, - type: "http", - - resources: [{ - names: ["federation"], - }], - }); - } - - if (config.synapse_client_port == config.synapse_federation_port) { - listeners[0].resources[0].names.push("client"); - } else if (config.tls == TLS_TYPES.TLS) { - listeners.push({ - port: config.synapse_client_port, - tls: true, - bind_addresses: ['::1', '127.0.0.1'], - type: "http", - x_forwarded: true, - - resources: [{ - names: ["client"], - compress: false, - }], - }); - } else { - listeners.push({ - port: config.synapse_client_port, - tls: true, - type: "http", - - resources: [{ - names: ["client"], - }], - }); - } - return { listeners: listeners }; -} -const tls_paths = config => { - if (config.reverse_proxy == REVERSE_PROXY_TYPES.TLS) { - return { - tls_certificate_path: config.tls_cert_path, - tls_private_key_path: config.tls_cert_key_path, + const listeners = []; + if (config.tls == TLS_TYPES.TLS) { + + listeners.push({ + port: config.synapseFederationPort, + tls: true, + bind_addresses: ['::1', '127.0.0.1'], + type: "http", + x_forwarded: true, + + resources: [{ + names: ["federation"], + compress: false, + }], + }); + + } else { + + listeners.push({ + port: config.synapseFederationPort, + tls: true, + type: "http", + + resources: [{ + names: ["federation"], + }], + }); + } - } else if (config.reverser_proxy == REVERSE_PROXY_TYPES.ACME) { - return { - tls_certificate_path: config.config_dir + "/" + config.server_name + ".tls.cert", - tls_private_key_path: config.config_dir + "/" + config.server_name + ".tls.key", + + if (config.synapseClientPort == config.synapseFederationPort) { + + listeners[0].resources[0].names.push("client"); + + } else if (config.tls == TLS_TYPES.TLS) { + + listeners.push({ + port: config.synapseClientPort, + tls: true, + bind_addresses: ['::1', '127.0.0.1'], + type: "http", + x_forwarded: true, + + resources: [{ + names: ["client"], + compress: false, + }], + }); + + } else { + + listeners.push({ + port: config.synapseClientPort, + tls: true, + type: "http", + + resources: [{ + names: ["client"], + }], + }); + } - } else { - return {} - } + return { listeners: listeners }; + +} + +const tlsPaths = config => { + + if (config.reverseProxy == REVERSE_PROXY_TYPES.TLS) { + + return { + tls_certificate_path: config.tlsCertPath, + tls_private_key_path: config.tlsCertKeyPath, + } + + } else if (config.reverser_proxy == REVERSE_PROXY_TYPES.ACME) { + + return { + tls_certificate_path: + config.configDir + "/" + config.server_name + ".tls.cert", + tls_private_key_path: + config.configDir + "/" + config.server_name + ".tls.key", + } + + } else { + + return {} + + } + } const acme = config => { - if (config.tls == TLS_TYPES.ACME) { - return { - acme: { - url: "https://acme-v01.api.letsencrypt.org/directory", - port: 80, - bind_addresses: ['::', '0.0.0.0'], - reprovision_threshold: 30, - domain: config.delegation_server_name ? config.delegation_server_name : servername, - account_key_file: config.config_dir + "/data/acme_account.key", - } + + if (config.tls == TLS_TYPES.ACME) { + + return { + acme: { + url: "https://acme-v01.api.letsencrypt.org/directory", + port: 80, + bind_addresses: ['::', '0.0.0.0'], + reprovision_threshold: 30, + domain: config.delegationServerName ? + config.delegationServerName : + servername, + account_key_file: config.configDir + "/data/acme_account.key", + }, + } + + } else { + + return {} + } - } else { - return {} - } + } const database = config => ({ - database: { - name: config.database, - args: config.config_dir + "/data/homeserver.db" - } + database: { + name: config.database, + args: config.configDir + "/data/homeserver.db", + }, }) -export const base_config_to_synapse_config = config => { - const conf = { - server_name: config.servername, - report_stats: config.report_stats, - log_config: config.config_dir + "/" + config.servername + ".log.config", - media_store_path: config.config_dir + "/data/media_store", - uploads_path: config.config_dir + "/data/uploads", - pid_file: config.config_dir + "/data/homeserver.pid", - ...listeners(config), - ...tls_paths(config), - ...acme(config), - ...database(config), - [CONFIG_LOCK]: true, - } - console.log(conf) - return conf +export const baseConfigToSynapseConfig = config => { + + const conf = { + server_name: config.servername, + report_stats: config.reportStats, + log_config: config.configDir + "/" + config.servername + ".log.config", + media_store_path: config.configDir + "/data/media_store", + uploads_path: config.configDir + "/data/uploads", + pid_file: config.configDir + "/data/homeserver.pid", + ...listeners(config), + ...tlsPaths(config), + ...acme(config), + ...database(config), + [CONFIG_LOCK]: true, + } + console.log(conf) + return conf + } |