Show port in interface and dns address

client/src/install/Setup/Settings.js

@@ -36,9 +36,13 @@ let Settings = (props) => {
     const {
         handleSubmit,
         interfaceIp,
+        interfacePort,
         dnsIp,
+        dnsPort,
         invalid,
     } = props;
+    const dnsAddress = dnsPort && dnsPort !== 53 ? `${dnsIp}:${dnsPort}` : dnsIp;
+    const interfaceAddress = interfacePort ? `http://${interfaceIp}:${interfacePort}` : `http://${interfaceIp}`;
 
     return (
         <form className="setup__step" onSubmit={handleSubmit}>
@@ -82,7 +86,7 @@ let Settings = (props) => {
                 <div className="setup__desc">
                     <Trans
                         components={[<a href={`http://${interfaceIp}`} key="0">link</a>]}
-                        values={{ link: `http://${interfaceIp}` }}
+                        values={{ link: interfaceAddress }}
                     >
                         install_settings_interface_link
                     </Trans>
@@ -128,7 +132,7 @@ let Settings = (props) => {
                 <p className="setup__desc">
                     <Trans
                         components={[<strong key="0">ip</strong>]}
-                        values={{ ip: dnsIp }}
+                        values={{ ip: dnsAddress }}
                     >
                         install_settings_dns_desc
                     </Trans>
@@ -143,24 +147,38 @@ Settings.propTypes = {
     handleSubmit: PropTypes.func.isRequired,
     interfaceIp: PropTypes.string.isRequired,
     dnsIp: PropTypes.string.isRequired,
+    interfacePort: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+    ]),
+    dnsPort: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+    ]),
     invalid: PropTypes.bool.isRequired,
     initialValues: PropTypes.object,
 };
 
 Settings.defaultProps = {
     interfaceIp: '192.168.0.1',
+    interfacePort: 3000,
     dnsIp: '192.168.0.1',
+    dnsPort: 53,
 };
 
 const selector = formValueSelector('install');
 
 Settings = connect((state) => {
     const interfaceIp = selector(state, 'web.ip');
+    const interfacePort = selector(state, 'web.port');
     const dnsIp = selector(state, 'dns.ip');
+    const dnsPort = selector(state, 'dns.port');
 
     return {
         interfaceIp,
+        interfacePort,
         dnsIp,
+        dnsPort,
     };
 })(Settings);