Selecting ports for delegation.

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 => ({

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';

synapse_topology/view/webui/js/components/DelegationPortSelection.jsx

@@ -2,48 +2,75 @@ import React, { useState } from 'react';
 
 import ContentWrapper from './ContentWrapper';
 
-export default ({ onClick }) => {
-  const [delegationPort, setDelegationPort] = useState("");
-  const [validInput, setValidInput] = useState(true);
+import style from '../../less/main.less';
 
-  const onChange = event => {
+export default ({ onClick }) => {
+  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 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={onChange}
+      onChange={onFederationChange}
+      className={fedPortValid ? undefined : style.invalidInput}
       autoFocus
-      placeholder="Use Defaults"
+      placeholder="Use Default 8448"
+    ></input>
+    <p>
+      Please choose the port for clients to contact:
+    </p>
+    <input
+      type="text"
+      onChange={onClientChange}
+      className={clientPortValid ? undefined : style.invalidInput}
+      autoFocus
+      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>
 }

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));
   }
 });
 

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 {

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,