Port selection

11 files changed, 155 insertions, 19 deletions

diff --git a/synapse_topology/view/webui/js/actions/index.js b/synapse_topology/view/webui/js/actions/index.js
index 9993286060..adf99c6073 100644
--- a/synapse_topology/view/webui/js/actions/index.js
+++ b/synapse_topology/view/webui/js/actions/index.js
@@ -17,6 +17,9 @@ import {
   SET_TLS_CERT_PATHS_VALIDITY,
   SET_TLS_CERT_FILES,
   UPLOADING_TLS_CERT_PATHS,
+  TESTING_SYNAPSE_PORTS,
+  SET_SYNAPSE_PORTS,
+  SET_SYNAPSE_PORTS_FREE,
 } from './types';
 
 import {
@@ -25,6 +28,7 @@ import {
   fetch_secret_key,
   post_cert_paths,
   post_certs,
+  test_ports,
 } from '../api';
 
 export const startup = () => {
@@ -175,4 +179,44 @@ export const set_reverse_proxy = proxy_type => ({
 export const set_tls = tls_type => ({
   type: SET_TLS,
   tls_type,
-});
\ No newline at end of file
+});
+
+export const set_synapse_ports = (federation_port, client_port) => {
+  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]
+        )),
+        error => dispatch(fail(error)),
+      )
+  }
+};
+
+export const update_ports_free = (synapse_federation_port_free, synapse_client_port_free) => {
+  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) {
+      dispatch(advance_ui())
+    }
+  }
+}
+
+export const testing_synapse_ports = verifying => ({
+  type: TESTING_SYNAPSE_PORTS,
+  verifying,
+})
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/actions/types.js b/synapse_topology/view/webui/js/actions/types.js
index f7737f6e69..2dad5969a6 100644
--- a/synapse_topology/view/webui/js/actions/types.js
+++ b/synapse_topology/view/webui/js/actions/types.js
@@ -15,4 +15,7 @@ export const UPLOADING_TLS_CERT_PATHS = 'UPLOADING_TLS_CERT_PATHS';
 export const SET_TLS = 'SET_TLS';
 export const SET_TLS_CERT_PATHS = 'SET_TLS_CERT_PATHS';
 export const SET_TLS_CERT_PATHS_VALIDITY = 'SET_TLS_CERT_PATHS_VALIDITY';
-export const SET_TLS_CERT_FILES = 'SET_TLS_CERT_FILES';
\ No newline at end of file
+export const SET_TLS_CERT_FILES = 'SET_TLS_CERT_FILES';
+export const TESTING_SYNAPSE_PORTS = 'TESTING_SYNAPSE_PORTS';
+export const SET_SYNAPSE_PORTS = 'SET_SYNAPSE_PORTS';
+export const SET_SYNAPSE_PORTS_FREE = 'SET_SYNAPSE_PORTS_IN_USE';
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/api/constants.js b/synapse_topology/view/webui/js/api/constants.js
index bd3829755d..014833e773 100644
--- a/synapse_topology/view/webui/js/api/constants.js
+++ b/synapse_topology/view/webui/js/api/constants.js
@@ -5,4 +5,5 @@ export const CONFIG = "/config";
 export const CONFIG_SOMETHING = "/config_something";
 export const SETUP_CHECK = "/setup";
 export const CERT_PATHS = "/testcertpaths";
+export const TEST_PORTS = "/ports";
 export const CONFIG_LOCK = "server_config_in_use";
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/api/index.js b/synapse_topology/view/webui/js/api/index.js
index 07078cd463..49e2030df7 100644
--- a/synapse_topology/view/webui/js/api/index.js
+++ b/synapse_topology/view/webui/js/api/index.js
@@ -8,6 +8,7 @@ import {
   SERVER_NAME,
   SETUP_CHECK,
   CERT_PATHS,
+  TEST_PORTS,
 } from './constants';
 
 const fetchAbs = fetchAbsolute(fetch)(API_URL)
@@ -52,8 +53,21 @@ export const post_certs = (cert, cert_key) =>
     }
   )
 
+export const test_ports = (ports) =>
+  fetchAbs(
+    TEST_PORTS,
+    {
+      method: 'POST',
+      body: JSON.stringify({
+        ports
+      })
+    }
+  ).then(res => res.json())
+
 export const fetch_secret_key = () =>
-  fetchAbs(SECRET_KEY).then(res => res.json()).then(json => json.secret_key)
+  fetchAbs(SECRET_KEY)
+    .then(res => res.json())
+    .then(json => json.secret_key)
 
 export const get_config = () => {
 
diff --git a/synapse_topology/view/webui/js/components/BaseIntro.jsx b/synapse_topology/view/webui/js/components/BaseIntro.jsx
index 18d624a0ff..91c9a9348e 100644
--- a/synapse_topology/view/webui/js/components/BaseIntro.jsx
+++ b/synapse_topology/view/webui/js/components/BaseIntro.jsx
@@ -2,10 +2,11 @@ import React from 'react';
 
 import style from '../../less/main.less';
 import ContentWrapper from '../containers/ContentWrapper';
+import ButtonDisplay from './ButtonDisplay';
 
 export default ({ onClick }) =>
   <ContentWrapper>
     <h1>Synapse Topology</h1>
     <p>Let's get started.</p>
-    <div><button onClick={onClick}>SETUP</button></div>
+    <ButtonDisplay><button onClick={onClick}>SETUP</button></ButtonDisplay>
   </ContentWrapper>
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/components/PortSelection.jsx b/synapse_topology/view/webui/js/components/PortSelection.jsx
index 084e2b2bed..143a9d5ccf 100644
--- a/synapse_topology/view/webui/js/components/PortSelection.jsx
+++ b/synapse_topology/view/webui/js/components/PortSelection.jsx
@@ -5,27 +5,25 @@ import ContentWrapper from './ContentWrapper';
 import style from '../../less/main.less';
 
 export default ({
-  serverName,
+  servername,
   verifyingPorts,
   fedPortInUse,
   clientPortInUse,
   canChangePorts,
   defaultFedPort,
   defaultClientPort,
-  justification,
-  onClickCheck,
-  onClickSkipCheck,
+  onClick,
 }) => {
   if (verifyingPorts) {
-    return <ContentWrapper ><h1>Verifying ports.</h1></ContentWrapper>
+    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(true)
-  const [fedPortPriv, setFedPortPriv] = useState(true)
+  const [clientPortPriv, setClientPortPriv] = useState(defaultClientPort < 1024)
+  const [fedPortPriv, setFedPortPriv] = useState(defaultFedPort < 1024)
 
   const updateValidity = (port, setValid) => setValid(
     !isNaN(port) && 0 < port && port <= 65535
@@ -50,7 +48,7 @@ export default ({
   }
 
   return <ContentWrapper>
-    <h1>{serverName}'s ports</h1>
+    <h1>{servername}'s ports</h1>
     <p>
       The synapse install itself will be listening on the following ports.
     </p>
@@ -76,8 +74,8 @@ export default ({
       or you can change the ports as explained above.
     </p>
     <p>
-      Note: we can't check the whether privileged ports are in use. If you've
-      set a privileged port <b>we will skip the check</b>.
+      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>
@@ -102,7 +100,7 @@ export default ({
     <div>
       <button
         disabled={clientPortValid && fedPortValid ? undefined : true}
-        onClick={() => onClick(fedPort, clientPort)}
+        onClick={() => onClick(parseInt(fedPort), parseInt(clientPort))}
       >Verify These Ports</button>
     </div>
   </ContentWrapper>
diff --git a/synapse_topology/view/webui/js/components/ReverseProxy.jsx b/synapse_topology/view/webui/js/components/ReverseProxy.jsx
index 85b1f2a863..9efbad8f3f 100644
--- a/synapse_topology/view/webui/js/components/ReverseProxy.jsx
+++ b/synapse_topology/view/webui/js/components/ReverseProxy.jsx
@@ -8,9 +8,12 @@ import {
 
 
 export default ({ onClick }) => {
-  const [reverseProxy, setReverseProxy] = useState(REVERSE_PROXY_TYPES.NONE);
+  const defaultValue = REVERSE_PROXY_TYPES.NGINX;
+  const [reverseProxy, setReverseProxy] = useState(defaultValue);
 
   const onChange = event => {
+    console.log("trigered")
+    console.log(event.target)
     setReverseProxy(event.target.value);
   }
 
@@ -21,7 +24,7 @@ export default ({ onClick }) => {
       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={REVERSE_PROXY_TYPES.NGINX} onChange={(e) => setReverseProxy(e.target.value)}>
+    <select defaultValue={defaultValue} onChange={onChange} >
       <option value={REVERSE_PROXY_TYPES.APACHE}>Apache</option>
       <option value={REVERSE_PROXY_TYPES.CADDY}>Caddy</option>
       <option value={REVERSE_PROXY_TYPES.HAPROXY}>HAProxy</option>
diff --git a/synapse_topology/view/webui/js/components/UI.jsx b/synapse_topology/view/webui/js/components/UI.jsx
index 4836d163b6..b24ec1aa53 100644
--- a/synapse_topology/view/webui/js/components/UI.jsx
+++ b/synapse_topology/view/webui/js/components/UI.jsx
@@ -35,6 +35,7 @@ import ReverseProxy from '../containers/ReverseProxy';
 import TLS from '../containers/TLS';
 import TLSCertPath from '../containers/TLSCertPath';
 import DelegationPortSelection from '../containers/DelegationPortSelection';
+import PortSelection from '../containers/PortSelection';
 
 export default ({ active_ui, dispatch }) => {
   console.log(`switching to ui ${active_ui}`)
@@ -63,10 +64,11 @@ export default ({ active_ui, dispatch }) => {
       return <TLS />
     case TLS_CERTPATH_UI:
       return <TLSCertPath />
+    case PORT_SELECTION_UI:
+      return <PortSelection />
     case WELL_KNOWN_UI:
     case DNS_UI:
     case WORKER_UI:
-    case PORT_SELECTION_UI:
     case REVERSE_PROXY_TEMPLATE_UI:
     default:
       return <h1>how did i get here?</h1>
diff --git a/synapse_topology/view/webui/js/containers/PortSelection.js b/synapse_topology/view/webui/js/containers/PortSelection.js
new file mode 100644
index 0000000000..7a317f0fbe
--- /dev/null
+++ b/synapse_topology/view/webui/js/containers/PortSelection.js
@@ -0,0 +1,44 @@
+import { connect } from 'react-redux';
+
+import PortSelection from '../components/PortSelection';
+
+import { set_synapse_ports } 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;
+}
+
+const defaultClientPort = state => {
+  if (state.tls == TLS_TYPES.REVERSE_PROXY) {
+    return 8008;
+  }
+
+  return state.delegation_federation_port ? state.delegation_federation_port : 443;
+}
+
+const mapStateToProps = (state, ownProps) => ({
+  servername: state.base_config.servername,
+  verifyingPorts: state.base_config.verifying_ports,
+  fedPortInUse: !state.base_config.synapse_federation_port_free,
+  clientPortInUse: !state.base_config.synapse_client_port_free,
+  canChangePorts: state.base_config.tls == TLS_TYPES.REVERSE_PROXY,
+  defaultFedPort: defaultFedPort(state.base_config),
+  defaultClientPort: defaultClientPort(state.base_config),
+});
+
+const mapDispathToProps = (dispatch) => ({
+  onClick: (fedPort, clientPort) => {
+    dispatch(set_synapse_ports(fedPort, clientPort));
+  }
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispathToProps
+)(PortSelection);
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/reducers/reducer-base-config.js b/synapse_topology/view/webui/js/reducers/reducer-base-config.js
index 842417dec9..0192b0ff22 100644
--- a/synapse_topology/view/webui/js/reducers/reducer-base-config.js
+++ b/synapse_topology/view/webui/js/reducers/reducer-base-config.js
@@ -12,6 +12,9 @@ import {
   SET_TLS_CERT_PATHS_VALIDITY,
   SET_TLS_CERT_FILES,
   UPLOADING_TLS_CERT_PATHS,
+  TESTING_SYNAPSE_PORTS,
+  SET_SYNAPSE_PORTS,
+  SET_SYNAPSE_PORTS_FREE,
 } from "../actions/types";
 
 export default (state = { servername: undefined }, action) => {
@@ -45,7 +48,7 @@ export default (state = { servername: undefined }, action) => {
     case SET_DELEGATION_SERVERNAME:
       return {
         ...state,
-        delegation_servername: action.delegation_servername,
+        delegation_servername: action.servername,
       }
     case SET_DELEGATION_SERVERNAME:
       return {
@@ -91,6 +94,24 @@ export default (state = { servername: undefined }, action) => {
         ...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,
+      }
+
     default:
       return state;
   }
diff --git a/synapse_topology/view/webui/js/reducers/state.js b/synapse_topology/view/webui/js/reducers/state.js
index 0e540e72f4..a15075e133 100644
--- a/synapse_topology/view/webui/js/reducers/state.js
+++ b/synapse_topology/view/webui/js/reducers/state.js
@@ -23,5 +23,10 @@ const state = {
     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,
   }
 }
\ No newline at end of file