Added initial layout for DHCP server config

client/package-lock.json

@@ -4126,6 +4126,11 @@
         "next-tick": "1"
       }
     },
+    "es6-error": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
+      "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg=="
+    },
     "es6-iterator": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
@@ -6588,7 +6593,7 @@
     },
     "html-webpack-plugin": {
       "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
+      "resolved": "http://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
       "integrity": "sha1-sBq71yOsqqeze2r0SS69oD2d03s=",
       "dev": true,
       "requires": {
@@ -6638,7 +6643,7 @@
         },
         "readable-stream": {
           "version": "1.0.34",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
           "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
           "dev": true,
           "requires": {
@@ -7387,8 +7392,7 @@
     "is-promise": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
-      "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=",
+      "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o="
-      "dev": true
     },
     "is-regex": {
       "version": "1.0.4",
@@ -13202,6 +13206,21 @@
         "reduce-reducers": "^0.1.0"
       }
     },
+    "redux-form": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/redux-form/-/redux-form-7.4.2.tgz",
+      "integrity": "sha512-QxC36s4Lelx5Cr8dbpxqvl23dwYOydeAX8c6YPmgkz/Dhj053C16S2qoyZN6LO6HJ2oUF00rKsAyE94GwOUhFA==",
+      "requires": {
+        "es6-error": "^4.1.1",
+        "hoist-non-react-statics": "^2.5.4",
+        "invariant": "^2.2.4",
+        "is-promise": "^2.1.0",
+        "lodash": "^4.17.10",
+        "lodash-es": "^4.17.10",
+        "prop-types": "^15.6.1",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "redux-thunk": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
@@ -15003,7 +15022,7 @@
     },
     "through": {
       "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
       "dev": true
     },

client/package.json

@@ -31,6 +31,7 @@
     "react-transition-group": "^2.4.0",
     "redux": "^4.0.0",
     "redux-actions": "^2.4.0",
+    "redux-form": "^7.4.2",
     "redux-thunk": "^2.3.0",
     "svg-url-loader": "^2.3.2",
     "whatwg-fetch": "2.0.3"

client/src/__locales/en.json

@@ -127,5 +127,16 @@
     "category_label": "Category",
     "rule_label": "Rule",
     "filter_label": "Filter",
-    "unknown_filter": "Unknown filter {{filterId}}"
+    "unknown_filter": "Unknown filter {{filterId}}",
+    "refresh_status": "Refresh status",
+    "save_config": "Save config",
+    "enabled_dhcp": "DHCP server enabled",
+    "disabled_dhcp": "DHCP server disabled",
+    "dhcp_title": "DHCP server",
+    "dhcp_description": "If your router does not provide DHCP settings, you can use AdGuard's own built-in DHCP server.",
+    "dhcp_enable": "Enable DHCP server",
+    "dhcp_disable": "Disable DHCP server",
+    "dhcp_not_found": "No active DHCP servers found on the network. It is safe to enable the built-in DHCP server.",
+    "dhcp_leases": "DHCP leases",
+    "dhcp_leases_not_found": "No DHCP leases found"
 }

client/src/actions/index.js

@@ -522,3 +522,73 @@ export const getLanguage = () => async (dispatch) => {
         dispatch(getLanguageFailure());
     }
 };
+
+export const getDhcpStatusRequest = createAction('GET_DHCP_STATUS_REQUEST');
+export const getDhcpStatusSuccess = createAction('GET_DHCP_STATUS_SUCCESS');
+export const getDhcpStatusFailure = createAction('GET_DHCP_STATUS_FAILURE');
+
+export const getDhcpStatus = () => async (dispatch) => {
+    dispatch(getDhcpStatusRequest());
+    try {
+        const status = await apiClient.getDhcpStatus();
+        dispatch(getDhcpStatusSuccess(status));
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(getDhcpStatusFailure());
+    }
+};
+
+export const setDhcpConfigRequest = createAction('SET_DHCP_CONFIG_REQUEST');
+export const setDhcpConfigSuccess = createAction('SET_DHCP_CONFIG_SUCCESS');
+export const setDhcpConfigFailure = createAction('SET_DHCP_CONFIG_FAILURE');
+
+export const setDhcpConfig = config => async (dispatch) => {
+    dispatch(setDhcpConfigRequest());
+    try {
+        await apiClient.setDhcpConfig(config);
+        dispatch(setDhcpConfigSuccess());
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(setDhcpConfigFailure());
+    }
+};
+
+export const findActiveDhcpRequest = createAction('FIND_ACTIVE_DHCP_REQUEST');
+export const findActiveDhcpSuccess = createAction('FIND_ACTIVE_DHCP_SUCCESS');
+export const findActiveDhcpFailure = createAction('FIND_ACTIVE_DHCP_FAILURE');
+
+export const findActiveDhcp = () => async (dispatch) => {
+    dispatch(findActiveDhcpRequest());
+    try {
+        const result = await apiClient.findActiveDhcp();
+        dispatch(findActiveDhcpSuccess(result));
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(findActiveDhcpFailure());
+    }
+};
+
+export const toggleDhcpRequest = createAction('TOGGLE_DHCP_REQUEST');
+export const toggleDhcpFailure = createAction('TOGGLE_DHCP_FAILURE');
+export const toggleDhcpSuccess = createAction('TOGGLE_DHCP_SUCCESS');
+
+export const toggleDhcp = status => async (dispatch) => {
+    dispatch(toggleDhcpRequest());
+    let successMessage = '';
+
+    try {
+        if (status) {
+            successMessage = 'disabled_dhcp';
+            await apiClient.disableGlobalProtection();
+        } else {
+            successMessage = 'enabled_dhcp';
+            await apiClient.enableGlobalProtection();
+        }
+
+        dispatch(addSuccessToast(successMessage));
+        dispatch(toggleDhcpSuccess());
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(toggleDhcpFailure());
+    }
+};

client/src/api/Api.js

@@ -302,4 +302,71 @@ export default class Api {
         };
         return this.makeRequest(path, method, parameters);
     }
+
+    // DHCP
+    DHCP_STATUS = { path: 'dhcp/status', method: 'GET' };
+    DHCP_SET_CONFIG = { path: 'dhcp/set_config', method: 'POST' };
+    DHCP_FIND_ACTIVE = { path: 'dhcp/find_active_dhcp', method: 'GET' };
+
+    getDhcpStatus() {
+        // const { path, method } = this.DHCP_STATUS;
+        // return this.makeRequest(path, method);
+
+        const example = {
+            config: {
+                enabled: false,
+                gateway_ip: '192.168.1.1',
+                subnet_mask: '255.255.255.0',
+                range_start: '192.168.1.2',
+                range_end: '192.168.10.50',
+                lease_duration: '43200',
+            },
+            leases: [
+                {
+                    mac: '001109b3b3b8',
+                    ip: '192.168.1.22',
+                    hostname: 'dell',
+                    expires: '2017-07-21T17:32:28Z',
+                },
+                {
+                    mac: '001109b3b3b9',
+                    ip: '192.168.1.23',
+                    hostname: 'dell',
+                    expires: '2017-07-21T17:32:28Z',
+                },
+            ],
+        };
+
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve(example);
+            }, 1000);
+        });
+    }
+
+    setDhcpConfig(config) {
+        // const { path, method } = this.DHCP_SET_CONFIG;
+        // const parameters = config;
+        // return this.makeRequest(path, method, parameters);
+
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve(window.alert(`Set config:\n\n${JSON.stringify(config, null, 2)}`));
+            }, 1000);
+        });
+    }
+
+    findActiveDhcp() {
+        // const { path, method } = this.DHCP_FIND_ACTIVE;
+        // return this.makeRequest(path, method);
+
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve({
+                    gateway_ip: '127.0.0.1',
+                    found: true,
+                });
+            }, 10000);
+        });
+    }
 }

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

@@ -0,0 +1,134 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Field, reduxForm } from 'redux-form';
+import { R_IPV4 } from '../../../helpers/constants';
+
+const required = (value) => {
+    if (value) {
+        return false;
+    }
+    return 'Required field';
+};
+
+const ipv4 = (value) => {
+    if (value && !new RegExp(R_IPV4).test(value)) {
+        return 'Invalid IPv4 format';
+    }
+    return false;
+};
+
+const renderField = ({
+    input, className, placeholder, type, disabled, meta: { touched, error },
+}) => (
+    <Fragment>
+        <input
+            {...input}
+            placeholder={placeholder}
+            type={type}
+            className={className}
+            disabled={disabled}
+        />
+        {!disabled && touched && (error && <span className="form__message form__message--error">{error}</span>)}
+    </Fragment>
+);
+
+const Form = (props) => {
+    const {
+        handleSubmit, pristine, submitting, enabled,
+    } = props;
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="row">
+                <div className="col-lg-6">
+                    <div className="form__group form__group--dhcp">
+                        <label>Gateway IP</label>
+                        <Field
+                            name="gateway_ip"
+                            component={renderField}
+                            type="text"
+                            className="form-control"
+                            placeholder="Gateway IP"
+                            validate={[ipv4, required]}
+                            disabled={!enabled}
+                        />
+                    </div>
+                    <div className="form__group form__group--dhcp">
+                        <label>Subnet mask</label>
+                        <Field
+                            name="subnet_mask"
+                            component={renderField}
+                            type="text"
+                            className="form-control"
+                            placeholder="Subnet mask"
+                            validate={[ipv4, required]}
+                            disabled={!enabled}
+                        />
+                    </div>
+                </div>
+                <div className="col-lg-6">
+                    <div className="form__group form__group--dhcp">
+                        <div className="row">
+                            <div className="col-12">
+                                <label>Range of IP addresses</label>
+                            </div>
+                            <div className="col">
+                                <Field
+                                    name="range_start"
+                                    component={renderField}
+                                    type="text"
+                                    className="form-control"
+                                    placeholder="Range start"
+                                    validate={[ipv4, required]}
+                                    disabled={!enabled}
+                                />
+                            </div>
+                            <div className="col">
+                                <Field
+                                    name="range_end"
+                                    component={renderField}
+                                    type="text"
+                                    className="form-control"
+                                    placeholder="Range end"
+                                    validate={[ipv4, required]}
+                                    disabled={!enabled}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    <div className="form__group form__group--dhcp">
+                        <label>DHCP lease time (in seconds)</label>
+                        <Field
+                            name="lease_duration"
+                            component={renderField}
+                            type="number"
+                            className="form-control"
+                            placeholder="Lease duration"
+                            validate={[required]}
+                            disabled={!enabled}
+                        />
+                    </div>
+                </div>
+            </div>
+
+            <button
+                type="submit"
+                className="btn btn-success btn-standart"
+                disabled={pristine || submitting || !enabled}
+            >
+                Save config
+            </button>
+        </form>
+    );
+};
+
+Form.propTypes = {
+    handleSubmit: PropTypes.func,
+    pristine: PropTypes.bool,
+    submitting: PropTypes.bool,
+    enabled: PropTypes.bool,
+};
+
+export default reduxForm({
+    form: 'dhcpForm',
+})(Form);

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactTable from 'react-table';
+import { withNamespaces } from 'react-i18next';
+
+const columns = [{
+    Header: 'MAC',
+    accessor: 'mac',
+}, {
+    Header: 'IP',
+    accessor: 'ip',
+}, {
+    Header: 'Hostname',
+    accessor: 'hostname',
+}, {
+    Header: 'Expires',
+    accessor: 'expires',
+}];
+
+const Leases = props => (
+    <ReactTable
+        data={props.leases}
+        columns={columns}
+        showPagination={false}
+        noDataText={ props.t('dhcp_leases_not_found') }
+        minRows={6}
+        className="-striped -highlight card-table-overflow"
+    />
+);
+
+Leases.propTypes = {
+    leases: PropTypes.array,
+    t: PropTypes.func,
+};
+
+export default withNamespaces()(Leases);

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

@@ -0,0 +1,93 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Trans, withNamespaces } from 'react-i18next';
+
+import Form from './Form';
+import Leases from './Leases';
+import Card from '../../ui/Card';
+
+class Dhcp extends Component {
+    handleFormSubmit = (values) => {
+        this.props.setDhcpConfig(values);
+    };
+
+    handleRefresh = () => {
+        this.props.findActiveDhcp();
+    }
+
+    getToggleDhcpButton = () => {
+        const { enabled } = this.props.dhcp.config;
+        const buttonText = enabled ? 'dhcp_disable' : 'dhcp_enable';
+        const buttonClass = enabled ? 'btn-gray' : 'btn-success';
+
+        return (
+            <button type="button" className={`btn btn-standart mr-2 ${buttonClass}`} onClick={() => this.props.toggleDhcp(enabled)}>
+                <Trans>{buttonText}</Trans>
+            </button>
+        );
+    }
+
+    render() {
+        const { t, dhcp } = this.props;
+        const statusButtonClass = classnames({
+            'btn btn-primary btn-standart': true,
+            'btn btn-primary btn-standart btn-loading': dhcp.processingStatus,
+        });
+
+        return (
+            <Fragment>
+                {!dhcp.processing &&
+                    <Card title={ t('dhcp_title') } subtitle={ t('dhcp_description') } bodyType="card-body box-body--settings">
+                        <div className="row">
+                            <div className="col">
+                                <div className="card-actions mt-0 mb-3">
+                                    {this.getToggleDhcpButton()}
+                                    <button
+                                        className={statusButtonClass}
+                                        type="button"
+                                        onClick={this.handleRefresh}
+                                    >
+                                        <Trans>refresh_status</Trans>
+                                    </button>
+                                </div>
+                                {dhcp.active && !dhcp.active.found &&
+                                    <div className="text-secondary">
+                                        <Trans>dhcp_not_found</Trans>
+                                    </div>
+                                }
+                                <hr/>
+                                <Form
+                                    onSubmit={this.handleFormSubmit}
+                                    initialValues={dhcp.config}
+                                    enabled={dhcp.config.enabled}
+                                />
+                            </div>
+                        </div>
+                    </Card>
+                }
+                {!dhcp.processing && dhcp.config.enabled &&
+                    <Card title={ t('dhcp_leases') } bodyType="card-body box-body--settings">
+                        <div className="row">
+                            <div className="col">
+                                <Leases leases={dhcp.leases} />
+                            </div>
+                        </div>
+                    </Card>
+                }
+            </Fragment>
+        );
+    }
+}
+
+Dhcp.propTypes = {
+    dhcp: PropTypes.object,
+    toggleDhcp: PropTypes.func,
+    getDhcpStatus: PropTypes.func,
+    setDhcpConfig: PropTypes.func,
+    findActiveDhcp: PropTypes.func,
+    handleSubmit: PropTypes.func,
+    t: PropTypes.func,
+};
+
+export default withNamespaces()(Dhcp);

client/src/components/Settings/Settings.css

@@ -1,4 +1,5 @@
 .form__group {
+    position: relative;
     margin-bottom: 15px;
 }
 
@@ -6,6 +7,10 @@
     margin-bottom: 0;
 }
 
+.form__group--dhcp:last-child {
+    margin-bottom: 15px;
+}
+
 .btn-standart {
     padding-left: 20px;
     padding-right: 20px;
@@ -18,3 +23,11 @@
 .form-control--textarea-large {
     min-height: 240px;
 }
+
+.form__message {
+    font-size: 11px;
+}
+
+.form__message--error {
+    color: #cd201f;
+}

client/src/components/Settings/index.js

@@ -2,6 +2,7 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withNamespaces, Trans } from 'react-i18next';
 import Upstream from './Upstream';
+import Dhcp from './Dhcp';
 import Checkbox from '../ui/Checkbox';
 import Loading from '../ui/Loading';
 import PageTitle from '../ui/PageTitle';
@@ -34,6 +35,7 @@ class Settings extends Component {
 
     componentDidMount() {
         this.props.initSettings(this.settings);
+        this.props.getDhcpStatus();
     }
 
     handleUpstreamChange = (value) => {
@@ -92,6 +94,13 @@ class Settings extends Component {
                                     handleUpstreamSubmit={this.handleUpstreamSubmit}
                                     handleUpstreamTest={this.handleUpstreamTest}
                                 />
+                                <Dhcp
+                                    dhcp={this.props.dhcp}
+                                    toggleDhcp={this.props.toggleDhcp}
+                                    getDhcpStatus={this.props.getDhcpStatus}
+                                    findActiveDhcp={this.props.findActiveDhcp}
+                                    setDhcpConfig={this.props.setDhcpConfig}
+                                />
                             </div>
                         </div>
                     </div>

client/src/containers/Settings.js

@@ -1,10 +1,21 @@
 import { connect } from 'react-redux';
-import { initSettings, toggleSetting, handleUpstreamChange, setUpstream, testUpstream, addErrorToast } from '../actions';
+import {
+    initSettings,
+    toggleSetting,
+    handleUpstreamChange,
+    setUpstream,
+    testUpstream,
+    addErrorToast,
+    toggleDhcp,
+    getDhcpStatus,
+    setDhcpConfig,
+    findActiveDhcp,
+} from '../actions';
 import Settings from '../components/Settings';
 
 const mapStateToProps = (state) => {
-    const { settings, dashboard } = state;
+    const { settings, dashboard, dhcp } = state;
-    const props = { settings, dashboard };
+    const props = { settings, dashboard, dhcp };
     return props;
 };
 
@@ -15,6 +26,10 @@ const mapDispatchToProps = {
     setUpstream,
     testUpstream,
     addErrorToast,
+    toggleDhcp,
+    getDhcpStatus,
+    setDhcpConfig,
+    findActiveDhcp,
 };
 
 export default connect(

client/src/helpers/constants.js

@@ -1,4 +1,5 @@
 export const R_URL_REQUIRES_PROTOCOL = /^https?:\/\/\w[\w_\-.]*\.[a-z]{2,8}[^\s]*$/;
+export const R_IPV4 = /^(?:(?:^|\.)(?:2(?:5[0-5]|[0-4]\d)|1?\d?\d)){4}$/g;
 
 export const STATS_NAMES = {
     avg_processing_time: 'average_processing_time',

client/src/reducers/index.js

@@ -2,6 +2,7 @@ import { combineReducers } from 'redux';
 import { handleActions } from 'redux-actions';
 import { loadingBarReducer } from 'react-redux-loading-bar';
 import nanoid from 'nanoid';
+import { reducer as formReducer } from 'redux-form';
 import versionCompare from '../helpers/versionCompare';
 
 import * as actions from '../actions';
@@ -35,6 +36,7 @@ const settings = handleActions({
     processing: true,
     processingTestUpstream: false,
     processingSetUpstream: false,
+    processingDhcpStatus: false,
 });
 
 const dashboard = handleActions({
@@ -258,11 +260,44 @@ const toasts = handleActions({
     },
 }, { notices: [] });
 
+const dhcp = handleActions({
+    [actions.getDhcpStatusRequest]: state => ({ ...state, processing: true }),
+    [actions.getDhcpStatusFailure]: state => ({ ...state, processing: false }),
+    [actions.getDhcpStatusSuccess]: (state, { payload }) => {
+        const newState = {
+            ...state,
+            ...payload,
+            processing: false,
+        };
+        return newState;
+    },
+
+    [actions.findActiveDhcpRequest]: state => ({ ...state, processingStatus: true }),
+    [actions.findActiveDhcpFailure]: state => ({ ...state, processingStatus: false }),
+    [actions.findActiveDhcpSuccess]: (state, { payload }) => ({
+        ...state,
+        active: payload,
+        processingStatus: false,
+    }),
+
+    [actions.toggleDhcpSuccess]: (state) => {
+        const { config } = state;
+        const newConfig = { ...config, enabled: !config.enabled };
+        const newState = { ...state, config: newConfig };
+        return newState;
+    },
+}, {
+    processing: true,
+    processingStatus: false,
+});
+
 export default combineReducers({
     settings,
     dashboard,
     queryLogs,
     filtering,
     toasts,
+    dhcp,
     loadingBar: loadingBarReducer,
+    form: formReducer,
 });