Highlight invalid ports.

3 files changed, 21 insertions, 5 deletions

diff --git a/synapse_topology/webui/js/components/DelegationOptions.jsx b/synapse_topology/webui/js/components/DelegationOptions.jsx
index 317d318fc1..b63ed47795 100644
--- a/synapse_topology/webui/js/components/DelegationOptions.jsx
+++ b/synapse_topology/webui/js/components/DelegationOptions.jsx
@@ -21,6 +21,7 @@ export default ({ servername, skip, onClick }) => {
 
   const [fedPort, setFedPort] = useState("");
   const [clientPort, setClientPort] = useState("");
+
   const [clientPortValid, setClientPortValid] = useState(true)
   const [fedPortValid, setFedPortValid] = useState(true)
 
@@ -106,21 +107,22 @@ export default ({ servername, skip, onClick }) => {
         <input
           type="text"
           onChange={onFederationChange}
-          className={fedPortValid ? undefined : style.invalidInput}
+          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 : style.invalidInput}
+          className={clientPortValid ? undefined : "invalid"}
           autoFocus
           placeholder="Use Default 443"
         />
-
+        {clientPortValid ? undefined : <p>Invalid port</p> }
         <button disabled={delegatedServername && clientPortValid && fedPortValid ? undefined : true}
           onClick={() => {
             toggle();
diff --git a/synapse_topology/webui/js/components/PortSelection.jsx b/synapse_topology/webui/js/components/PortSelection.jsx
index 0797146138..273f79f3e9 100644
--- a/synapse_topology/webui/js/components/PortSelection.jsx
+++ b/synapse_topology/webui/js/components/PortSelection.jsx
@@ -27,11 +27,16 @@ export default ({
 
   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
   )
@@ -42,6 +47,7 @@ export default ({
 
   const onFederationChange = event => {
     const val = event.target.value ? event.target.value : defaultFedPort;
+    set_fedPortInUse(false);
     setFedPort(val);
     updatePriv(val, setFedPortPriv);
     updateValidity(val, setFedPortValid);
@@ -49,6 +55,7 @@ export default ({
 
   const onClientChange = event => {
     const val = event.target.value ? event.target.value : defaultClientPort;
+    set_clientPortInUse(false);
     setClientPort(val);
     updatePriv(val, setClientPortPriv);
     updateValidity(val, setClientPortValid);
@@ -93,22 +100,26 @@ export default ({
         <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}
+        {_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}
+        {_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
diff --git a/synapse_topology/webui/scss/main.scss b/synapse_topology/webui/scss/main.scss
index 6b0723fc01..1c379a42c3 100644
--- a/synapse_topology/webui/scss/main.scss
+++ b/synapse_topology/webui/scss/main.scss
@@ -28,6 +28,9 @@ a {
   text-decoration: none;
 }
 
+.invalid {
+    border-color: red;
+}
 .logo {
   position: absolute;
   top:0;