Selecting ports for delegation.

6 files changed, 55 insertions, 25 deletions

diff --git a/synapse_topology/view/webui/js/actions/index.js b/synapse_topology/view/webui/js/actions/index.js
index cc7fc414a4..9993286060 100644
--- a/synapse_topology/view/webui/js/actions/index.js
+++ b/synapse_topology/view/webui/js/actions/index.js
@@ -9,7 +9,7 @@ import {
   GETTING_SECRET_KEY,
   SET_DELEGATION,
   SET_DELEGATION_SERVERNAME,
-  SET_DELEGATION_PORT,
+  SET_DELEGATION_PORTS,
   SET_REVERSE_PROXY,
   SET_TLS,
   TESTING_TLS_CERT_PATHS,
@@ -161,9 +161,10 @@ export const set_delegation_servername = servername => ({
   servername,
 });
 
-export const set_delegation_port = port => ({
-  type: SET_DELEGATION_PORT,
-  port,
+export const set_delegation_ports = (federation_port, client_port) => ({
+  type: SET_DELEGATION_PORTS,
+  federation_port,
+  client_port,
 });
 
 export const set_reverse_proxy = proxy_type => ({
diff --git a/synapse_topology/view/webui/js/actions/types.js b/synapse_topology/view/webui/js/actions/types.js
index 3251d7ae9d..f7737f6e69 100644
--- a/synapse_topology/view/webui/js/actions/types.js
+++ b/synapse_topology/view/webui/js/actions/types.js
@@ -8,7 +8,7 @@ export const SET_SECRET_KEY = 'SET_SECRET_KEY';
 export const GETTING_SECRET_KEY = 'GETTING_SECRET_KEY';
 export const SET_DELEGATION = 'SET_DELEGATION';
 export const SET_DELEGATION_SERVERNAME = 'SET_DELEGATION_SERVERNAME';
-export const SET_DELEGATION_PORT = 'SET_DELEGATION_PORT';
+export const SET_DELEGATION_PORTS = 'SET_DELEGATION_PORTS';
 export const SET_REVERSE_PROXY = 'SET_REVERSE_PROXY';
 export const TESTING_TLS_CERT_PATHS = 'TESTING_TLS_CERT_PATHS';
 export const UPLOADING_TLS_CERT_PATHS = 'UPLOADING_TLS_CERT_PATHS';
diff --git a/synapse_topology/view/webui/js/components/DelegationPortSelection.jsx b/synapse_topology/view/webui/js/components/DelegationPortSelection.jsx
index d5a18589f8..1df4432bf1 100644
--- a/synapse_topology/view/webui/js/components/DelegationPortSelection.jsx
+++ b/synapse_topology/view/webui/js/components/DelegationPortSelection.jsx
@@ -2,48 +2,75 @@ import React, { useState } from 'react';
 
 import ContentWrapper from './ContentWrapper';
 
+import style from '../../less/main.less';
+
 export default ({ onClick }) => {
-  const [delegationPort, setDelegationPort] = useState("");
-  const [validInput, setValidInput] = useState(true);
+  const [fedPort, setFedPort] = useState("");
+  const [clientPort, setClientPort] = useState("");
+  const [clientPortValid, setClientPortValid] = useState(true)
+  const [fedPortValid, setFedPortValid] = useState(true)
+
+  const updateValidity = (port, setValid) => setValid(
+    !port ||
+    (!isNaN(port) && 0 < port && port <= 65535)
+  )
 
-  const onChange = event => {
+  const onFederationChange = event => {
     const val = event.target.value;
-    setValidInput(!isNaN(event.target.value) && 0 < val && val < 65535);
-    setDelegationPort(val);
+    setFedPort(val);
+    updateValidity(val, setFedPortValid);
+  }
+
+  const onClientChange = event => {
+    const val = event.target.value;
+    setClientPort(val);
+    updateValidity(val, setClientPortValid);
   }
 
   return <ContentWrapper>
     <h1>Outward facing port selection</h1>
     <p>
-      Normally other servers will try to contact the Synapse install's server on
+      Normally other matrix servers will try to contact the Synapse install's server on
       port 8448 and clients, such as riot, riotX, neo etc., will try to contact
       the install server on port 443.
     </p>
     <p>
       Delegation let's us tell those servers and clients to try a different port!
       (Flexible!)
-      However, we can only specify one port. That one port will be used for both
-      the servers and the clients.
     </p>
     <p>
       It's perfectly fine to leave the defaults. Only change them if you have a
       real need to.
     </p>
     <p>
-      I would recommend an unprivileged port but I would recommend the default ports
-      more strongly.
+      I would recommend using unprivileged ports but I would recommend the
+      default ports more strongly.
+    </p>
+    <p>
+      Please choose the port for other matrix servers to contact:
+    </p>
+    <input
+      type="text"
+      onChange={onFederationChange}
+      className={fedPortValid ? undefined : style.invalidInput}
+      autoFocus
+      placeholder="Use Default 8448"
+    ></input>
+    <p>
+      Please choose the port for clients to contact:
     </p>
     <input
       type="text"
-      onChange={onChange}
+      onChange={onClientChange}
+      className={clientPortValid ? undefined : style.invalidInput}
       autoFocus
-      placeholder="Use Defaults"
+      placeholder="Use Default 443"
     ></input>
     <div>
       <button
-        disabled={!delegationPort || validInput ? undefined : true}
-        onClick={() => onClick(delegationPort)}
-      >Use {delegationPort ? delegationPort : "default ports"}</button>
+        disabled={clientPortValid && fedPortValid ? undefined : true}
+        onClick={() => onClick(fedPort, clientPort)}
+      >Use These Ports</button>
     </div>
   </ContentWrapper>
 }
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/containers/DelegationPortSelection.js b/synapse_topology/view/webui/js/containers/DelegationPortSelection.js
index 24de6cc6b4..cd3f69a926 100644
--- a/synapse_topology/view/webui/js/containers/DelegationPortSelection.js
+++ b/synapse_topology/view/webui/js/containers/DelegationPortSelection.js
@@ -2,16 +2,16 @@ import { connect } from 'react-redux';
 
 import DelegationPortSelection from '../components/DelegationPortSelection';
 
-import { advance_ui, set_delegation_port } from '../actions';
+import { advance_ui, set_delegation_ports } from '../actions';
 
 const mapStateToProps = (state, ownProps) => ({
 
 });
 
 const mapDispathToProps = (dispatch) => ({
-  onClick: port => {
+  onClick: (fedPort, clientPort) => {
     dispatch(advance_ui());
-    dispatch(set_delegation_port(port));
+    dispatch(set_delegation_ports(fedPort, clientPort));
   }
 });
 
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 12a1825884..842417dec9 100644
--- a/synapse_topology/view/webui/js/reducers/reducer-base-config.js
+++ b/synapse_topology/view/webui/js/reducers/reducer-base-config.js
@@ -50,7 +50,8 @@ export default (state = { servername: undefined }, action) => {
     case SET_DELEGATION_SERVERNAME:
       return {
         ...state,
-        delegation_port: action.port,
+        delegation_federation_port: action.federation_port,
+        delegation_client_port: action.client_port,
       }
     case SET_REVERSE_PROXY:
       return {
diff --git a/synapse_topology/view/webui/js/reducers/state.js b/synapse_topology/view/webui/js/reducers/state.js
index 1337048a6a..0e540e72f4 100644
--- a/synapse_topology/view/webui/js/reducers/state.js
+++ b/synapse_topology/view/webui/js/reducers/state.js
@@ -10,7 +10,8 @@ const state = {
     secret_key: "asdfsadf",
     delegation_type: "local|well_known|DNS_SRV",
     delegation_server_name: "name",
-    delegation_port: "udefined|325",
+    delegation_federation_port: "\"\"|325",
+    delegation_client_port: "\"\"|325",
     reverse_proxy: "nginx|caddy|apache|haproxy|other|none",
     tls: "acme|tls|none|reverseproxy",
     testing_cert_paths: true,