Show external address as host:port string (#2216)

* Show external address in peers page as host:port string

* Add peer with host:port string

* Update frontend build

frontend/src/components/Peers/index.js

@@ -61,17 +61,26 @@ const Peers = (props) => {
     return 'IPV4';
   };
 
+  const getExternalAddressStr = () => {
+    if (externalAddress) {
+      return `${externalAddress.getHost()}:${externalAddress.getPort()}`;
+    } else {
+      return '';
+    }
+  };
+
   function removeHttp(url) {
     return url.replace(/^https?:\/\//, '');
   }
 
   const savePeer = ({values}) => {
     const network = getNetwork(values.useTor);
-    const strippedHost = removeHttp(values.host);
+    const strippedAddress = removeHttp(values.address);
+    const url = new URL(`http://${strippedAddress}`);
     dispatch(setSavePeer({
       name: values.name,
-      host: strippedHost,
-      port: values.port,
+      host: url.hostname,
+      port: url.port,
       network: network,
     }));
     toggleSavePeerModal();
@@ -92,8 +101,7 @@ const Peers = (props) => {
       </div>
       <div className="edit-input-wrap">
         <Input class="informed-input" name="name" label="Peer Name (not required)" />
-        <Input class="informed-input" name="host" label="Host" />
-        <Input class="informed-input" name="port" type="number" label="Port" />
+        <Input class="informed-input" name="address" label="Address (host:port)" />
         <Checkbox class="informed-input" name="useTor" label="Connect With Tor: " />
       </div>
 
@@ -119,12 +127,12 @@ const Peers = (props) => {
       <div class="float-container">
         <div class="float-child">
           <div className="edit-input-wrap">
-            <Input class="informed-input" name="host" label="Host" initialValue={externalAddress && externalAddress.getHost()} readOnly />
+            <Input class="informed-input" name="external-address" label="External Address" initialValue={externalAddress && `${getExternalAddressStr()}`} readOnly />
           </div>
         </div>
         <div class="float-child">
           <CopyToClipboard
-            text={externalAddress && externalAddress.getHost()}
+            text={externalAddress && `${getExternalAddressStr()}`}
             >
             <a data-tip="Copy host">
               <button fullWidth={false}>
@@ -134,24 +142,6 @@ const Peers = (props) => {
           </CopyToClipboard>
         </div>
       </div>
-      <div class="float-container">
-        <div class="float-child">
-          <div className="edit-input-wrap">
-            <Input class="informed-input" name="port" label="Port" initialValue={externalAddress && externalAddress.getPort()} readOnly/>
-          </div>
-        </div>
-        <div class="float-child">
-          <CopyToClipboard
-            text={externalAddress && externalAddress.getPort()}
-            >
-            <a data-tip="Copy port">
-              <button fullWidth={false}>
-                <ICON_CLIPBOARD />
-              </button>
-            </a>
-          </CopyToClipboard>
-        </div>
-      </div>
       <ReactTooltip effect="solid" />
     </Form>
   );

squeaknode/admin/webapp/static/build/asset-manifest.json

@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "/static/css/main.fe6c5463.css",
-    "main.js": "/static/js/main.e69a9816.js",
+    "main.js": "/static/js/main.70c883a7.js",
     "static/css/306.7f7715a0.chunk.css": "/static/css/306.7f7715a0.chunk.css",
     "static/js/306.90b2a66c.chunk.js": "/static/js/306.90b2a66c.chunk.js",
     "static/css/900.5027b0a1.chunk.css": "/static/css/900.5027b0a1.chunk.css",
@@ -11,7 +11,7 @@
     "static/media/icon.svg": "/static/media/icon.982210ec9275956e4d3cc77fa90167fd.svg",
     "index.html": "/index.html",
     "main.fe6c5463.css.map": "/static/css/main.fe6c5463.css.map",
-    "main.e69a9816.js.map": "/static/js/main.e69a9816.js.map",
+    "main.70c883a7.js.map": "/static/js/main.70c883a7.js.map",
     "306.7f7715a0.chunk.css.map": "/static/css/306.7f7715a0.chunk.css.map",
     "306.90b2a66c.chunk.js.map": "/static/js/306.90b2a66c.chunk.js.map",
     "900.5027b0a1.chunk.css.map": "/static/css/900.5027b0a1.chunk.css.map",
@@ -21,6 +21,6 @@
   },
   "entrypoints": [
     "static/css/main.fe6c5463.css",
-    "static/js/main.e69a9816.js"
+    "static/js/main.70c883a7.js"
   ]
 }

squeaknode/admin/webapp/static/build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#1da1f2"/><meta nam="description" content="Squeaknode!"/><meta name="og:title" content="Squeaknode"/><meta name="og:description" content="check out my the Squeaknode I made"/><link href="https://fonts.googleapis.com/css2?family=Assistant&display=swap" rel="stylesheet"><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Squeaknode</title><script defer="defer" src="/static/js/main.e69a9816.js"></script><link href="/static/css/main.fe6c5463.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#1da1f2"/><meta nam="description" content="Squeaknode!"/><meta name="og:title" content="Squeaknode"/><meta name="og:description" content="check out my the Squeaknode I made"/><link href="https://fonts.googleapis.com/css2?family=Assistant&display=swap" rel="stylesheet"><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Squeaknode</title><script defer="defer" src="/static/js/main.70c883a7.js"></script><link href="/static/css/main.fe6c5463.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>