+ client: static_ip warnings

client/src/__locales/en.json

@@ -34,6 +34,8 @@
     "dhcp_table_expires": "Expires",
     "dhcp_warning": "If you want to enable DHCP server anyway, make sure that there is no other active DHCP server in your network. Otherwise, it can break the Internet for connected devices!",
     "dhcp_error": "We could not determine whether there is another DHCP server in the network.",
+    "dhcp_static_ip_error": "In order to use DHCP server a static IP address must be set. We failed to determine if this network interface is configured using static IP address. Please set a static IP address manually.",
+    "dhcp_dynamic_ip_found": "Your system uses dynamic IP address configuration for interface <0>{{interfaceName}}</0>. In order to use DHCP server a static IP address must be set. Your current IP address is <0>{{ipAddress}}</0>. We will automatically set this IP address as static if you press Enable DHCP button.",
     "error_details": "Error details",
     "back": "Back",
     "dashboard": "Dashboard",

client/src/components/Settings/Dhcp/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Trans, withNamespaces } from 'react-i18next';
 
+import { RESPONSE_STATUS } from '../../../helpers/constants';
 import Form from './Form';
 import Leases from './Leases';
 import Interface from './Interface';
@@ -20,9 +21,10 @@ class Dhcp extends Component {
 
     getToggleDhcpButton = () => {
         const {
-            config, active, processingDhcp, processingConfig,
+            config, check, processingDhcp, processingConfig,
         } = this.props.dhcp;
-        const activeDhcpFound = active && active.found;
+        const otherDhcpFound =
+            check && check.otherServer && check.otherServer.found === RESPONSE_STATUS.YES;
         const filledConfig = Object.keys(config).every((key) => {
             if (key === 'enabled' || key === 'icmp_timeout_msec') {
                 return true;
@@ -51,8 +53,8 @@ class Dhcp extends Component {
                 onClick={() => this.handleToggle(config)}
                 disabled={
                     !filledConfig
-                    || !active
+                    || !check
-                    || activeDhcpFound
+                    || otherDhcpFound
                     || processingDhcp
                     || processingConfig
                 }
@@ -62,15 +64,16 @@ class Dhcp extends Component {
         );
     }
 
-    getActiveDhcpMessage = (t, active) => {
+    getActiveDhcpMessage = (t, check) => {
-        if (active) {
+        const { found } = check.otherServer;
-            if (active.error) {
+
+        if (found === RESPONSE_STATUS.ERROR) {
             return (
                 <div className="text-danger mb-2">
                     <Trans>dhcp_error</Trans>
                     <div className="mt-2 mb-2">
                         <Accordion label={t('error_details')}>
-                                <span>{active.error}</span>
+                            <span>{check.otherServer.error}</span>
                         </Accordion>
                     </div>
                 </div>
@@ -79,7 +82,7 @@ class Dhcp extends Component {
 
         return (
             <div className="mb-2">
-                    {active.found ? (
+                {found === RESPONSE_STATUS.YES ? (
                     <div className="text-danger">
                         <Trans>dhcp_found</Trans>
                     </div>
@@ -92,11 +95,8 @@ class Dhcp extends Component {
         );
     }
 
-        return '';
+    getDhcpWarning = (check) => {
-    }
+        if (check.otherServer.found === RESPONSE_STATUS.NO) {
-
-    getDhcpWarning = (active) => {
-        if (!active || (active && active.found === false)) {
             return '';
         }
 
@@ -107,6 +107,49 @@ class Dhcp extends Component {
         );
     }
 
+    getStaticIpWarning = (t, check, interfaceName) => {
+        if (check.staticIP.static === RESPONSE_STATUS.ERROR) {
+            return (
+                <Fragment>
+                    <div className="text-danger mb-2">
+                        <Trans>dhcp_static_ip_error</Trans>
+                        <div className="mt-2 mb-2">
+                            <Accordion label={t('error_details')}>
+                                <span>{check.staticIP.error}</span>
+                            </Accordion>
+                        </div>
+                    </div>
+                    <hr className="mt-4 mb-4"/>
+                </Fragment>
+            );
+        } else if (
+            check.staticIP.static === RESPONSE_STATUS.YES
+            && check.staticIP.ip
+            && interfaceName
+        ) {
+            return (
+                <Fragment>
+                    <div className="text-secondary mb-2">
+                        <Trans
+                            components={[
+                                <strong key="0">example</strong>,
+                            ]}
+                            values={{
+                                interfaceName,
+                                ipAddress: check.staticIP.ip,
+                            }}
+                        >
+                            dhcp_dynamic_ip_found
+                        </Trans>
+                    </div>
+                    <hr className="mt-4 mb-4"/>
+                </Fragment>
+            );
+        }
+
+        return '';
+    }
+
     render() {
         const { t, dhcp } = this.props;
         const statusButtonClass = classnames({
@@ -156,10 +199,11 @@ class Dhcp extends Component {
                                         <Trans>check_dhcp_servers</Trans>
                                     </button>
                                 </div>
-                                {!enabled &&
+                                {!enabled && dhcp.check &&
                                     <Fragment>
-                                        {this.getActiveDhcpMessage(t, dhcp.active)}
+                                        {this.getStaticIpWarning(t, dhcp.check, interface_name)}
-                                        {this.getDhcpWarning(dhcp.active)}
+                                        {this.getActiveDhcpMessage(t, dhcp.check)}
+                                        {this.getDhcpWarning(dhcp.check)}
                                     </Fragment>
                                 }
                             </Fragment>

client/src/helpers/constants.js

@@ -157,3 +157,9 @@ export const UNSAFE_PORTS = [
 ];
 
 export const ALL_INTERFACES_IP = '0.0.0.0';
+
+export const RESPONSE_STATUS = {
+    YES: 'yes',
+    NO: 'no',
+    ERROR: 'error',
+};

client/src/reducers/index.js

@@ -292,11 +292,22 @@ const dhcp = handleActions({
 
     [actions.findActiveDhcpRequest]: state => ({ ...state, processingStatus: true }),
     [actions.findActiveDhcpFailure]: state => ({ ...state, processingStatus: false }),
-    [actions.findActiveDhcpSuccess]: (state, { payload }) => ({
+    [actions.findActiveDhcpSuccess]: (state, { payload }) => {
+        const {
+            other_server: otherServer,
+            static_ip: staticIP,
+        } = payload;
+
+        const newState = {
             ...state,
-        active: payload,
+            check: {
+                otherServer,
+                staticIP,
+            },
             processingStatus: false,
-    }),
+        };
+        return newState;
+    },
 
     [actions.toggleDhcpRequest]: state => ({ ...state, processingDhcp: true }),
     [actions.toggleDhcpFailure]: state => ({ ...state, processingDhcp: false }),
@@ -304,7 +315,7 @@ const dhcp = handleActions({
         const { config } = state;
         const newConfig = { ...config, enabled: !config.enabled };
         const newState = {
-            ...state, config: newConfig, active: null, processingDhcp: false,
+            ...state, config: newConfig, check: null, processingDhcp: false,
         };
         return newState;
     },
@@ -326,7 +337,7 @@ const dhcp = handleActions({
     config: {
         enabled: false,
     },
-    active: null,
+    check: null,
     leases: [],
 });