+ client: Refactor DHCP settings

client/src/components/App/index.css

@@ -42,13 +42,6 @@ body {
     background: linear-gradient(45deg, rgba(99, 125, 120, 1) 0%, rgba(88, 177, 101, 1) 100%);
 }
 
-@media (max-width: 575px) {
-    .container {
-        padding-right: 0;
-        padding-left: 0;
-    }
-}
-
 .modal-body--medium {
     max-height: 20rem;
     overflow-y: scroll;
@@ -65,3 +58,11 @@ body {
 .mw-75 {
     max-width: 75% !important;
 }
+
+.cursor--not-allowed {
+    cursor: not-allowed;
+}
+
+.select--no-warning {
+    margin-bottom: 1.375rem;
+}

client/src/components/App/index.js

@@ -31,7 +31,7 @@ import SetupGuide from '../../containers/SetupGuide';
 import Settings from '../../containers/Settings';
 import Dns from '../../containers/Dns';
 import Encryption from '../../containers/Encryption';
-import Dhcp from '../../containers/Dhcp';
+import Dhcp from '../Settings/Dhcp';
 import Clients from '../../containers/Clients';
 import DnsBlocklist from '../../containers/DnsBlocklist';
 import DnsAllowlist from '../../containers/DnsAllowlist';
@@ -39,6 +39,7 @@ import DnsRewrites from '../../containers/DnsRewrites';
 import CustomRules from '../../containers/CustomRules';
 import Services from '../Filters/Services';
 
+
 const ROUTES = [
     {
         path: MENU_URLS.root,
@@ -96,10 +97,10 @@ const ROUTES = [
 ];
 
 const renderRoute = ({ path, component, exact }, idx) => <Route
-    key={idx}
-    exact={exact}
-    path={path}
-    component={component}
+        key={idx}
+        exact={exact}
+        path={path}
+        component={component}
 />;
 
 const App = () => {
@@ -142,34 +143,28 @@ const App = () => {
         window.location.reload();
     };
 
-    return (
-        <HashRouter hashType="noslash">
-            <>
-                {updateAvailable && <>
-                    <UpdateTopline />
-                    <UpdateOverlay />
-                </>}
-                {!processingEncryption && <EncryptionTopline />}
-                <LoadingBar className="loading-bar" updateTime={1000} />
-                <Header />
-                <div className="container container--wrap pb-5">
-                    {processing && <Loading />}
-                    {!isCoreRunning && (
-                        <div className="row row-cards">
-                            <div className="col-lg-12">
-                                <Status reloadPage={reloadPage} message="dns_start" />
-                                <Loading />
-                            </div>
-                        </div>
-                    )}
-                    {!processing && isCoreRunning && ROUTES.map(renderRoute)}
+    return <HashRouter hashType="noslash">
+        {updateAvailable && <>
+            <UpdateTopline />
+            <UpdateOverlay />
+        </>}
+        {!processingEncryption && <EncryptionTopline />}
+        <LoadingBar className="loading-bar" updateTime={1000} />
+        <Header />
+        <div className="container container--wrap pb-5">
+            {processing && <Loading />}
+            {!isCoreRunning && <div className="row row-cards">
+                <div className="col-lg-12">
+                    <Status reloadPage={reloadPage} message="dns_start" />
+                    <Loading />
                 </div>
-                <Footer />
-                <Toasts />
-                <Icons />
-            </>
-        </HashRouter>
-    );
+            </div>}
+            {!processing && isCoreRunning && ROUTES.map(renderRoute)}
+        </div>
+        <Footer />
+        <Toasts />
+        <Icons />
+    </HashRouter>;
 };
 
 renderRoute.propTypes = {

client/src/components/Dashboard/index.js

@@ -1,6 +1,6 @@
-import React, { Component, Fragment } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import Statistics from './Statistics';
 import Counters from './Counters';
@@ -13,144 +13,141 @@ import Loading from '../ui/Loading';
 import { BLOCK_ACTIONS } from '../../helpers/constants';
 import './Dashboard.css';
 
-class Dashboard extends Component {
-    componentDidMount() {
-        this.getAllStats();
-    }
+const Dashboard = ({
+    getAccessList,
+    getStats,
+    getStatsConfig,
+    dashboard,
+    toggleProtection,
+    toggleClientBlock,
+    stats,
+    access,
+}) => {
+    const { t } = useTranslation();
 
-    getAllStats = () => {
-        this.props.getAccessList();
-        this.props.getStats();
-        this.props.getStatsConfig();
+    const getAllStats = () => {
+        getAccessList();
+        getStats();
+        getStatsConfig();
     };
 
-    getToggleFilteringButton = () => {
-        const { protectionEnabled, processingProtection } = this.props.dashboard;
+    useEffect(() => {
+        getAllStats();
+    }, []);
+
+    const getToggleFilteringButton = () => {
+        const { protectionEnabled, processingProtection } = dashboard;
         const buttonText = protectionEnabled ? 'disable_protection' : 'enable_protection';
         const buttonClass = protectionEnabled ? 'btn-gray' : 'btn-success';
 
-        return (
-            <button
+        return <button
                 type="button"
                 className={`btn btn-sm mr-2 ${buttonClass}`}
-                onClick={() => this.props.toggleProtection(protectionEnabled)}
+                onClick={() => toggleProtection(protectionEnabled)}
                 disabled={processingProtection}
-            >
-                <Trans>{buttonText}</Trans>
-            </button>
-        );
+        >
+            <Trans>{buttonText}</Trans>
+        </button>;
     };
 
-    toggleClientStatus = (type, ip) => {
+    const toggleClientStatus = (type, ip) => {
         const confirmMessage = type === BLOCK_ACTIONS.BLOCK ? 'client_confirm_block' : 'client_confirm_unblock';
 
-        if (window.confirm(this.props.t(confirmMessage, { ip }))) {
-            this.props.toggleClientBlock(type, ip);
+        if (window.confirm(t(confirmMessage, { ip }))) {
+            toggleClientBlock(type, ip);
         }
     };
 
-    render() {
-        const {
-            dashboard, stats, access, t,
-        } = this.props;
-        const statsProcessing = stats.processingStats
+    const refreshButton = <button
+            type="button"
+            className="btn btn-icon btn-outline-primary btn-sm"
+            onClick={() => getAllStats()}
+    >
+        <svg className="icons">
+            <use xlinkHref="#refresh" />
+        </svg>
+    </button>;
+
+    const subtitle = stats.interval === 1
+        ? t('for_last_24_hours')
+        : t('for_last_days', { count: stats.interval });
+
+    const refreshFullButton = <button
+            type="button"
+            className="btn btn-outline-primary btn-sm"
+            onClick={() => getAllStats()}
+    >
+        <Trans>refresh_statics</Trans>
+    </button>;
+
+    const statsProcessing = stats.processingStats
             || stats.processingGetConfig
             || access.processing;
 
-        const subtitle = stats.interval === 1
-            ? t('for_last_24_hours')
-            : t('for_last_days', { count: stats.interval });
+    return <>
+        <PageTitle title={t('dashboard')}>
+            <div className="page-title__actions">
+                {getToggleFilteringButton()}
+                {refreshFullButton}
+            </div>
+        </PageTitle>
+        {statsProcessing && <Loading />}
+        {!statsProcessing && <div className="row row-cards">
+            <div className="col-lg-12">
+                <Statistics
+                        interval={stats.interval}
+                        dnsQueries={stats.dnsQueries}
+                        blockedFiltering={stats.blockedFiltering}
+                        replacedSafebrowsing={stats.replacedSafebrowsing}
+                        replacedParental={stats.replacedParental}
+                        numDnsQueries={stats.numDnsQueries}
+                        numBlockedFiltering={stats.numBlockedFiltering}
+                        numReplacedSafebrowsing={stats.numReplacedSafebrowsing}
+                        numReplacedParental={stats.numReplacedParental}
+                        refreshButton={refreshButton}
+                />
+            </div>
+            <div className="col-lg-6">
+                <Counters
+                        subtitle={subtitle}
 
-        const refreshFullButton = (
-            <button
-                type="button"
-                className="btn btn-outline-primary btn-sm"
-                onClick={() => this.getAllStats()}
-            >
-                <Trans>refresh_statics</Trans>
-            </button>
-        );
-
-        const refreshButton = (
-            <button
-                type="button"
-                className="btn btn-icon btn-outline-primary btn-sm"
-                onClick={() => this.getAllStats()}
-            >
-                <svg className="icons">
-                    <use xlinkHref="#refresh" />
-                </svg>
-            </button>
-        );
-
-        return (
-            <Fragment>
-                <PageTitle title={t('dashboard')}>
-                    <div className="page-title__actions">
-                        {this.getToggleFilteringButton()}
-                        {refreshFullButton}
-                    </div>
-                </PageTitle>
-                {statsProcessing && <Loading />}
-                {!statsProcessing && (
-                    <div className="row row-cards">
-                        <div className="col-lg-12">
-                            <Statistics
-                                interval={stats.interval}
-                                dnsQueries={stats.dnsQueries}
-                                blockedFiltering={stats.blockedFiltering}
-                                replacedSafebrowsing={stats.replacedSafebrowsing}
-                                replacedParental={stats.replacedParental}
-                                numDnsQueries={stats.numDnsQueries}
-                                numBlockedFiltering={stats.numBlockedFiltering}
-                                numReplacedSafebrowsing={stats.numReplacedSafebrowsing}
-                                numReplacedParental={stats.numReplacedParental}
-                                refreshButton={refreshButton}
-                            />
-                        </div>
-                        <div className="col-lg-6">
-                            <Counters
-                                subtitle={subtitle}
-                                refreshButton={refreshButton}
-                            />
-                        </div>
-                        <div className="col-lg-6">
-                            <Clients
-                                subtitle={subtitle}
-                                dnsQueries={stats.numDnsQueries}
-                                topClients={stats.topClients}
-                                clients={dashboard.clients}
-                                autoClients={dashboard.autoClients}
-                                refreshButton={refreshButton}
-                                toggleClientStatus={this.toggleClientStatus}
-                                processingAccessSet={access.processingSet}
-                                disallowedClients={access.disallowed_clients}
-                            />
-                        </div>
-                        <div className="col-lg-6">
-                            <QueriedDomains
-                                subtitle={subtitle}
-                                dnsQueries={stats.numDnsQueries}
-                                topQueriedDomains={stats.topQueriedDomains}
-                                refreshButton={refreshButton}
-                            />
-                        </div>
-                        <div className="col-lg-6">
-                            <BlockedDomains
-                                subtitle={subtitle}
-                                topBlockedDomains={stats.topBlockedDomains}
-                                blockedFiltering={stats.numBlockedFiltering}
-                                replacedSafebrowsing={stats.numReplacedSafebrowsing}
-                                replacedParental={stats.numReplacedParental}
-                                refreshButton={refreshButton}
-                            />
-                        </div>
-                    </div>
-                )}
-            </Fragment>
-        );
-    }
-}
+                        refreshButton={refreshButton}
+                />
+            </div>
+            <div className="col-lg-6">
+                <Clients
+                        subtitle={subtitle}
+                        dnsQueries={stats.numDnsQueries}
+                        topClients={stats.topClients}
+                        clients={dashboard.clients}
+                        autoClients={dashboard.autoClients}
+                        refreshButton={refreshButton}
+                        toggleClientStatus={toggleClientStatus}
+                        processingAccessSet={access.processingSet}
+                        disallowedClients={access.disallowed_clients}
+                />
+            </div>
+            <div className="col-lg-6">
+                <QueriedDomains
+                        subtitle={subtitle}
+                        dnsQueries={stats.numDnsQueries}
+                        topQueriedDomains={stats.topQueriedDomains}
+                        refreshButton={refreshButton}
+                />
+            </div>
+            <div className="col-lg-6">
+                <BlockedDomains
+                        subtitle={subtitle}
+                        topBlockedDomains={stats.topBlockedDomains}
+                        blockedFiltering={stats.numBlockedFiltering}
+                        replacedSafebrowsing={stats.numReplacedSafebrowsing}
+                        replacedParental={stats.numReplacedParental}
+                        refreshButton={refreshButton}
+                />
+            </div>
+        </div>}
+    </>;
+};
 
 Dashboard.propTypes = {
     dashboard: PropTypes.object.isRequired,
@@ -160,9 +157,8 @@ Dashboard.propTypes = {
     getStatsConfig: PropTypes.func.isRequired,
     toggleProtection: PropTypes.func.isRequired,
     getClients: PropTypes.func.isRequired,
-    t: PropTypes.func.isRequired,
     toggleClientBlock: PropTypes.func.isRequired,
     getAccessList: PropTypes.func.isRequired,
 };
 
-export default withTranslation()(Dashboard);
+export default Dashboard;

client/src/components/Filters/Form.js

@@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 import classNames from 'classnames';
 import { validatePath, validateRequiredValue } from '../../helpers/validators';
-import { renderInputField, renderSelectField } from '../../helpers/form';
+import { renderCheckboxField, renderInputField } from '../../helpers/form';
 import { MODAL_OPEN_TIMEOUT, MODAL_TYPE, FORM_NAME } from '../../helpers/constants';
 
 const getIconsData = (homepage, source) => ([
@@ -60,7 +60,7 @@ const renderFilters = ({ categories, filters }, selectedSources, t) => Object.ke
                     <Field
                         name={`${filter.id}`}
                         type="checkbox"
-                        component={renderSelectField}
+                        component={renderCheckboxField}
                         placeholder={t(name)}
                         disabled={isSelected}
                         checked={isSelected}
@@ -148,13 +148,13 @@ const Form = (props) => {
             >
                 {t('cancel_btn')}
             </button>
-            <button
+            {modalType !== MODAL_TYPE.SELECT_MODAL_TYPE && <button
                 type="submit"
                 className="btn btn-success"
                 disabled={processingAddFilter || processingConfigFilter}
             >
                 {t('save_btn')}
-            </button>
+            </button>}
         </div>
     </form>;
 };

client/src/components/Header/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { shallowEqual, useSelector } from 'react-redux';
-import { Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
 import Menu from './Menu';
 import logo from '../ui/svg/logo.svg';
@@ -9,6 +9,7 @@ import './Header.css';
 
 const Header = () => {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const { t } = useTranslation();
 
     const {
         protectionEnabled,
@@ -33,45 +34,42 @@ const Header = () => {
         'badge-danger': !protectionEnabled,
     });
 
-    return (
-        <div className="header">
-            <div className="header__container">
-                <div className="header__row">
-                    <div
-                        className="header-toggler d-lg-none ml-lg-0 collapsed"
-                        onClick={toggleMenuOpen}
-                    >
-                        <span className="header-toggler-icon" />
+    return <div className="header">
+        <div className="header__container">
+            <div className="header__row">
+                <div
+                    className="header-toggler d-lg-none ml-lg-0 collapsed"
+                    onClick={toggleMenuOpen}
+                >
+                    <span className="header-toggler-icon" />
+                </div>
+                <div className="header__column">
+                    <div className="d-flex align-items-center">
+                        <Link to="/" className="nav-link pl-0 pr-1">
+                            <img src={logo} alt="" className="header-brand-img" />
+                        </Link>
+                        {!processing && isCoreRunning
+                        && <span className={badgeClass}
+                        >{t(protectionEnabled ? 'on' : 'off')}
+                        </span>}
                     </div>
-                    <div className="header__column">
-                        <div className="d-flex align-items-center">
-                            <Link to="/" className="nav-link pl-0 pr-1">
-                                <img src={logo} alt="" className="header-brand-img" />
-                            </Link>
-                            {!processing && isCoreRunning && (
-                                <span className={badgeClass}>
-                                        <Trans>{protectionEnabled ? 'on' : 'off'}</Trans>
-                                    </span>
-                            )}
-                        </div>
-                    </div>
-                    <Menu
-                        pathname={pathname}
-                        isMenuOpen={isMenuOpen}
-                        closeMenu={closeMenu}
-                    />
-                    <div className="header__column">
-                        <div className="header__right">
-                            {!processingProfile && name
-                            && <a href="control/logout" className="btn btn-sm btn-outline-secondary">
-                                <Trans>sign_out</Trans>
-                            </a>}
-                        </div>
+                </div>
+                <Menu
+                    pathname={pathname}
+                    isMenuOpen={isMenuOpen}
+                    closeMenu={closeMenu}
+                />
+                <div className="header__column">
+                    <div className="header__right">
+                        {!processingProfile && name
+                        && <a href="control/logout" className="btn btn-sm btn-outline-secondary">
+                            {t('sign_out')}
+                        </a>}
                     </div>
                 </div>
             </div>
         </div>
-    );
+    </div>;
 };
 
 export default Header;

client/src/components/Logs/Filters/index.js

@@ -1,29 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import Form from './Form';
 
-const Filters = ({ filter, refreshLogs, setIsLoading }) => (
-        <div className="page-header page-header--logs">
-            <h1 className="page-title page-title--large">
-                <Trans>query_log</Trans>
-                <button
+const Filters = ({ filter, refreshLogs, setIsLoading }) => {
+    const { t } = useTranslation();
+
+    return <div className="page-header page-header--logs">
+        <h1 className="page-title page-title--large">
+            {t('query_log')}
+            <button
                     type="button"
                     className="btn btn-icon--green logs__refresh"
                     onClick={refreshLogs}
-                >
-                    <svg className="icons icon--24">
-                        <use xlinkHref="#update" />
-                    </svg>
-                </button>
-            </h1>
-            <Form
+            >
+                <svg className="icons icon--24">
+                    <use xlinkHref="#update" />
+                </svg>
+            </button>
+        </h1>
+        <Form
                 responseStatusClass="d-sm-block"
                 initialValues={filter}
                 setIsLoading={setIsLoading}
-            />
-        </div>
-);
+        />
+    </div>;
+};
 
 Filters.propTypes = {
     filter: PropTypes.object.isRequired,

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

@@ -15,7 +15,7 @@ import { toggleAllServices } from '../../../helpers/helpers';
 import {
     renderInputField,
     renderGroupField,
-    renderSelectField,
+    renderCheckboxField,
     renderServiceField,
 } from '../../../helpers/form';
 import { validateClientId, validateRequiredValue } from '../../../helpers/validators';
@@ -151,7 +151,7 @@ let Form = (props) => {
                         <Field
                             name={setting.name}
                             type="checkbox"
-                            component={renderSelectField}
+                            component={renderCheckboxField}
                             placeholder={t(setting.placeholder)}
                             disabled={
                                 setting.name !== 'use_global_settings'

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

@@ -1,235 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import { Field, reduxForm, formValueSelector } from 'redux-form';
-import { Trans, withTranslation } from 'react-i18next';
-import flow from 'lodash/flow';
-import { renderInputField, toNumber } from '../../../helpers/form';
-import { FORM_NAME } from '../../../helpers/constants';
-import { validateIpv4, validateIsPositiveValue, validateRequiredValue } from '../../../helpers/validators';
-
-const renderInterfaces = ((interfaces) => (
-    Object.keys(interfaces).map((item) => {
-        const option = interfaces[item];
-        const { name } = option;
-        const onlyIPv6 = option.ip_addresses.every((ip) => ip.includes(':'));
-        let interfaceIP = option.ip_addresses[0];
-
-        if (!onlyIPv6) {
-            option.ip_addresses.forEach((ip) => {
-                if (!ip.includes(':')) {
-                    interfaceIP = ip;
-                }
-            });
-        }
-
-        return (
-            <option value={name} key={name} disabled={onlyIPv6}>
-                {name} - {interfaceIP}
-            </option>
-        );
-    })
-));
-
-const renderInterfaceValues = ((interfaceValues) => (
-    <ul className="list-unstyled mt-1 mb-0">
-        <li>
-            <span className="interface__title">MTU: </span>
-            {interfaceValues.mtu}
-        </li>
-        <li>
-            <span className="interface__title"><Trans>dhcp_hardware_address</Trans>: </span>
-            {interfaceValues.hardware_address}
-        </li>
-        <li>
-            <span className="interface__title"><Trans>dhcp_ip_addresses</Trans>: </span>
-            {
-                interfaceValues.ip_addresses
-                    .map((ip) => <span key={ip} className="interface__ip">{ip}</span>)
-            }
-        </li>
-    </ul>
-));
-
-const clearFields = (change, resetDhcp, t) => {
-    const fields = {
-        interface_name: '',
-        gateway_ip: '',
-        subnet_mask: '',
-        range_start: '',
-        range_end: '',
-        lease_duration: 86400,
-    };
-
-    // eslint-disable-next-line no-alert
-    if (window.confirm(t('dhcp_reset'))) {
-        Object.keys(fields).forEach((field) => change(field, fields[field]));
-        resetDhcp();
-    }
-};
-
-let Form = (props) => {
-    const {
-        t,
-        handleSubmit,
-        submitting,
-        invalid,
-        enabled,
-        interfaces,
-        interfaceValue,
-        processingConfig,
-        processingInterfaces,
-        resetDhcp,
-        change,
-    } = props;
-
-    return (
-        <form onSubmit={handleSubmit}>
-            {!processingInterfaces && interfaces
-                && <div className="row">
-                    <div className="col-sm-12 col-md-6">
-                        <div className="form__group form__group--settings">
-                            <label>{t('dhcp_interface_select')}</label>
-                            <Field
-                                name="interface_name"
-                                component="select"
-                                className="form-control custom-select"
-                                validate={[validateRequiredValue]}
-                            >
-                                <option value="" disabled={enabled}>
-                                    {t('dhcp_interface_select')}
-                                </option>
-                                {renderInterfaces(interfaces)}
-                            </Field>
-                        </div>
-                    </div>
-                    {interfaceValue
-                        && <div className="col-sm-12 col-md-6">
-                            {interfaces[interfaceValue]
-                                && renderInterfaceValues(interfaces[interfaceValue])}
-                        </div>
-                    }
-                </div>
-            }
-            <hr/>
-            <div className="row">
-                <div className="col-lg-6">
-                    <div className="form__group form__group--settings">
-                        <label>{t('dhcp_form_gateway_input')}</label>
-                        <Field
-                            id="gateway_ip"
-                            name="gateway_ip"
-                            component={renderInputField}
-                            type="text"
-                            className="form-control"
-                            placeholder={t('dhcp_form_gateway_input')}
-                            validate={[validateIpv4, validateRequiredValue]}
-                        />
-                    </div>
-                    <div className="form__group form__group--settings">
-                        <label>{t('dhcp_form_subnet_input')}</label>
-                        <Field
-                            id="subnet_mask"
-                            name="subnet_mask"
-                            component={renderInputField}
-                            type="text"
-                            className="form-control"
-                            placeholder={t('dhcp_form_subnet_input')}
-                            validate={[validateIpv4, validateRequiredValue]}
-                        />
-                    </div>
-                </div>
-                <div className="col-lg-6">
-                    <div className="form__group form__group--settings">
-                        <div className="row">
-                            <div className="col-12">
-                                <label>{t('dhcp_form_range_title')}</label>
-                            </div>
-                            <div className="col">
-                                <Field
-                                    id="range_start"
-                                    name="range_start"
-                                    component={renderInputField}
-                                    type="text"
-                                    className="form-control"
-                                    placeholder={t('dhcp_form_range_start')}
-                                    validate={[validateIpv4, validateRequiredValue]}
-                                />
-                            </div>
-                            <div className="col">
-                                <Field
-                                    id="range_end"
-                                    name="range_end"
-                                    component={renderInputField}
-                                    type="text"
-                                    className="form-control"
-                                    placeholder={t('dhcp_form_range_end')}
-                                    validate={[validateIpv4, validateRequiredValue]}
-                                />
-                            </div>
-                        </div>
-                    </div>
-                    <div className="form__group form__group--settings">
-                        <label>{t('dhcp_form_lease_title')}</label>
-                        <Field
-                            name="lease_duration"
-                            component={renderInputField}
-                            type="number"
-                            className="form-control"
-                            placeholder={t('dhcp_form_lease_input')}
-                            validate={[validateRequiredValue, validateIsPositiveValue]}
-                            normalize={toNumber}
-                        />
-                    </div>
-                </div>
-            </div>
-
-            <div className="btn-list">
-                <button
-                    type="submit"
-                    className="btn btn-success btn-standard"
-                    disabled={submitting || invalid || processingConfig}
-                >
-                    {t('save_config')}
-                </button>
-                <button
-                    type="button"
-                    className="btn btn-secondary btn-standart"
-                    disabled={submitting || processingConfig}
-                    onClick={() => clearFields(change, resetDhcp, t)}
-                >
-                    <Trans>reset_settings</Trans>
-                </button>
-            </div>
-        </form>
-    );
-};
-
-Form.propTypes = {
-    handleSubmit: PropTypes.func.isRequired,
-    submitting: PropTypes.bool.isRequired,
-    invalid: PropTypes.bool.isRequired,
-    interfaces: PropTypes.object.isRequired,
-    interfaceValue: PropTypes.string,
-    initialValues: PropTypes.object.isRequired,
-    processingConfig: PropTypes.bool.isRequired,
-    processingInterfaces: PropTypes.bool.isRequired,
-    enabled: PropTypes.bool.isRequired,
-    t: PropTypes.func.isRequired,
-    resetDhcp: PropTypes.func.isRequired,
-    change: PropTypes.func.isRequired,
-};
-
-const selector = formValueSelector(FORM_NAME.DHCP);
-
-Form = connect((state) => {
-    const interfaceValue = selector(state, 'interface_name');
-    return {
-        interfaceValue,
-    };
-})(Form);
-
-export default flow([
-    withTranslation(),
-    reduxForm({ form: FORM_NAME.DHCP }),
-])(Form);

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

@@ -0,0 +1,145 @@
+import React, { useCallback } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Field, reduxForm } from 'redux-form';
+import { useTranslation } from 'react-i18next';
+
+import {
+    renderInputField,
+    toNumber,
+} from '../../../helpers/form';
+import { FORM_NAME } from '../../../helpers/constants';
+import {
+    validateIpv4,
+    validateIsPositiveValue,
+    validateRequiredValue,
+    validateIpv4RangeEnd,
+} from '../../../helpers/validators';
+
+const FormDHCPv4 = ({
+    handleSubmit,
+    submitting,
+    processingConfig,
+    ipv4placeholders,
+}) => {
+    const { t } = useTranslation();
+    const dhcp = useSelector((state) => state.form[FORM_NAME.DHCPv4], shallowEqual);
+    const interfaces = useSelector((state) => state.form[FORM_NAME.DHCP_INTERFACES], shallowEqual);
+    const interface_name = interfaces?.values?.interface_name;
+
+    const isInterfaceIncludesIpv4 = useSelector(
+        (state) => !!state.dhcp?.interfaces?.[interface_name]?.ipv4_addresses,
+    );
+
+    const isEmptyConfig = !Object.values(dhcp?.values?.v4 ?? {})
+        .some(Boolean);
+
+    const invalid = dhcp?.syncErrors || interfaces?.syncErrors || !isInterfaceIncludesIpv4
+        || isEmptyConfig || submitting || processingConfig;
+
+    const validateRequired = useCallback((value) => {
+        if (isEmptyConfig) {
+            return undefined;
+        }
+        return validateRequiredValue(value);
+    }, [isEmptyConfig]);
+
+    return <form onSubmit={handleSubmit}>
+        <div className="row">
+            <div className="col-lg-6">
+                <div className="form__group form__group--settings">
+                    <label>{t('dhcp_form_gateway_input')}</label>
+                    <Field
+                        name="v4.gateway_ip"
+                        component={renderInputField}
+                        type="text"
+                        className="form-control"
+                        placeholder={t(ipv4placeholders.gateway_ip)}
+                        validate={[validateIpv4, validateRequired]}
+                        disabled={!isInterfaceIncludesIpv4}
+                    />
+                </div>
+                <div className="form__group form__group--settings">
+                    <label>{t('dhcp_form_subnet_input')}</label>
+                    <Field
+                        name="v4.subnet_mask"
+                        component={renderInputField}
+                        type="text"
+                        className="form-control"
+                        placeholder={t(ipv4placeholders.subnet_mask)}
+                        validate={[validateIpv4, validateRequired]}
+                        disabled={!isInterfaceIncludesIpv4}
+                    />
+                </div>
+            </div>
+            <div className="col-lg-6">
+                <div className="form__group form__group--settings">
+                    <div className="row">
+                        <div className="col-12">
+                            <label>{t('dhcp_form_range_title')}</label>
+                        </div>
+                        <div className="col">
+                            <Field
+                                name="v4.range_start"
+                                component={renderInputField}
+                                type="text"
+                                className="form-control"
+                                placeholder={t(ipv4placeholders.range_start)}
+                                validate={[validateIpv4]}
+                                disabled={!isInterfaceIncludesIpv4}
+                            />
+                        </div>
+                        <div className="col">
+                            <Field
+                                name="v4.range_end"
+                                component={renderInputField}
+                                type="text"
+                                className="form-control"
+                                placeholder={t(ipv4placeholders.range_end)}
+                                validate={[validateIpv4, validateIpv4RangeEnd]}
+                                disabled={!isInterfaceIncludesIpv4}
+                            />
+                        </div>
+                    </div>
+                </div>
+                <div className="form__group form__group--settings">
+                    <label>{t('dhcp_form_lease_title')}</label>
+                    <Field
+                        name="v4.lease_duration"
+                        component={renderInputField}
+                        type="number"
+                        className="form-control"
+                        placeholder={t(ipv4placeholders.lease_duration)}
+                        validate={[validateIsPositiveValue, validateRequired]}
+                        normalize={toNumber}
+                        min={0}
+                        disabled={!isInterfaceIncludesIpv4}
+                    />
+                </div>
+            </div>
+        </div>
+        <div className="btn-list">
+            <button
+                type="submit"
+                className="btn btn-success btn-standard"
+                disabled={invalid}
+            >
+                {t('save_config')}
+            </button>
+        </div>
+    </form>;
+};
+
+FormDHCPv4.propTypes = {
+    handleSubmit: PropTypes.func.isRequired,
+    submitting: PropTypes.bool.isRequired,
+    initialValues: PropTypes.object.isRequired,
+    processingConfig: PropTypes.bool.isRequired,
+    change: PropTypes.func.isRequired,
+    reset: PropTypes.func.isRequired,
+    ipv4placeholders: PropTypes.object.isRequired,
+};
+
+export default reduxForm({
+    form: FORM_NAME.DHCPv4,
+})(FormDHCPv4);

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

@@ -0,0 +1,120 @@
+import React, { useCallback } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Field, reduxForm } from 'redux-form';
+import { useTranslation } from 'react-i18next';
+
+import {
+    renderInputField,
+    toNumber,
+} from '../../../helpers/form';
+import { FORM_NAME } from '../../../helpers/constants';
+import {
+    validateIpv6,
+    validateIsPositiveValue,
+    validateRequiredValue,
+} from '../../../helpers/validators';
+
+const FormDHCPv6 = ({
+    handleSubmit,
+    submitting,
+    processingConfig,
+    ipv6placeholders,
+}) => {
+    const { t } = useTranslation();
+    const dhcp = useSelector((state) => state.form[FORM_NAME.DHCPv6], shallowEqual);
+    const interfaces = useSelector((state) => state.form[FORM_NAME.DHCP_INTERFACES], shallowEqual);
+    const interface_name = interfaces?.values?.interface_name;
+
+    const isInterfaceIncludesIpv6 = useSelector(
+        (state) => !!state.dhcp?.interfaces?.[interface_name]?.ipv6_addresses,
+    );
+
+    const isEmptyConfig = !Object.values(dhcp?.values?.v6 ?? {})
+        .some(Boolean);
+
+    const invalid = dhcp?.syncErrors || interfaces?.syncErrors || !isInterfaceIncludesIpv6
+        || isEmptyConfig || submitting || processingConfig;
+
+    const validateRequired = useCallback((value) => {
+        if (isEmptyConfig) {
+            return undefined;
+        }
+        return validateRequiredValue(value);
+    }, [isEmptyConfig]);
+
+    return <form onSubmit={handleSubmit}>
+        <div className="row">
+            <div className="col-lg-6">
+                <div className="form__group form__group--settings">
+                    <div className="row">
+                        <div className="col-12">
+                            <label>{t('dhcp_form_range_title')}</label>
+                        </div>
+                        <div className="col">
+                            <Field
+                                name="v6.range_start"
+                                component={renderInputField}
+                                type="text"
+                                className="form-control"
+                                placeholder={t(ipv6placeholders.range_start)}
+                                validate={[validateIpv6, validateRequired]}
+                                disabled={!isInterfaceIncludesIpv6}
+                            />
+                        </div>
+                        <div className="col">
+                            <Field
+                                name="v6.range_end"
+                                component="input"
+                                type="text"
+                                className="form-control disabled cursor--not-allowed"
+                                placeholder={t(ipv6placeholders.range_end)}
+                                value={t(ipv6placeholders.range_end)}
+                                disabled
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div className="row">
+            <div className="col-lg-6 form__group form__group--settings">
+                <label>{t('dhcp_form_lease_title')}</label>
+                <Field
+                    name="v6.lease_duration"
+                    component={renderInputField}
+                    type="number"
+                    className="form-control"
+                    placeholder={t(ipv6placeholders.lease_duration)}
+                    validate={[validateIsPositiveValue, validateRequired]}
+                    normalizeOnBlur={toNumber}
+                    min={0}
+                    disabled={!isInterfaceIncludesIpv6}
+                />
+            </div>
+        </div>
+        <div className="btn-list">
+            <button
+                type="submit"
+                className="btn btn-success btn-standard"
+                disabled={invalid}
+            >
+                {t('save_config')}
+            </button>
+        </div>
+    </form>;
+};
+
+FormDHCPv6.propTypes = {
+    handleSubmit: PropTypes.func.isRequired,
+    submitting: PropTypes.bool.isRequired,
+    initialValues: PropTypes.object.isRequired,
+    processingConfig: PropTypes.bool.isRequired,
+    change: PropTypes.func.isRequired,
+    reset: PropTypes.func.isRequired,
+    ipv6placeholders: PropTypes.object.isRequired,
+};
+
+export default reduxForm({
+    form: FORM_NAME.DHCPv6,
+})(FormDHCPv6);

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

@@ -0,0 +1,109 @@
+import React from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+import { Field, reduxForm } from 'redux-form';
+import { Trans, useTranslation } from 'react-i18next';
+import propTypes from 'prop-types';
+import { renderSelectField } from '../../../helpers/form';
+import { validateRequiredValue } from '../../../helpers/validators';
+import { FORM_NAME } from '../../../helpers/constants';
+
+const renderInterfaces = (interfaces) => Object.keys(interfaces)
+    .map((item) => {
+        const option = interfaces[item];
+        const { name } = option;
+
+        const [interfaceIPv4] = option?.ipv4_addresses ?? [];
+        const [interfaceIPv6] = option?.ipv6_addresses ?? [];
+
+        const optionContent = [name, interfaceIPv4, interfaceIPv6].filter(Boolean).join(' - ');
+
+        return <option value={name} key={name}>{optionContent}</option>;
+    });
+
+
+const getInterfaceValues = ({
+    gateway_ip,
+    hardware_address,
+    ip_addresses,
+}) => [
+    {
+        name: 'dhcp_form_gateway_input',
+        value: gateway_ip,
+    },
+    {
+        name: 'dhcp_hardware_address',
+        value: hardware_address,
+    },
+    {
+        name: 'dhcp_ip_addresses',
+        value: ip_addresses,
+        render: (ip_addresses) => ip_addresses
+            .map((ip) => <span key={ip} className="interface__ip">{ip}</span>),
+    },
+];
+
+const renderInterfaceValues = ({
+    gateway_ip,
+    hardware_address,
+    ip_addresses,
+}) => <div className='d-flex align-items-end col-6'>
+    <ul className="list-unstyled m-0">
+        {getInterfaceValues({
+            gateway_ip,
+            hardware_address,
+            ip_addresses,
+        }).map(({ name, value, render }) => value && <li key={name}>
+            <span className="interface__title"><Trans>{name}</Trans>: </span>
+            {render?.(value) || value}
+        </li>)}
+    </ul>
+</div>;
+
+const Interfaces = () => {
+    const { t } = useTranslation();
+
+    const {
+        processingInterfaces,
+        interfaces,
+        enabled,
+    } = useSelector((store) => store.dhcp, shallowEqual);
+
+    const interface_name = useSelector(
+        (store) => store.form[FORM_NAME.DHCP_INTERFACES]?.values?.interface_name,
+    );
+
+    const interfaceValue = interface_name && interfaces[interface_name];
+
+    return !processingInterfaces
+            && interfaces
+            && <>
+                <div className="row align-items-center pb-2">
+                    <div className="col-6">
+                        <Field
+                                name="interface_name"
+                                component={renderSelectField}
+                                className="form-control custom-select"
+                                validate={[validateRequiredValue]}
+                                label='dhcp_interface_select'
+                        >
+                            <option value='' disabled={enabled}>
+                                {t('dhcp_interface_select')}
+                            </option>
+                            {renderInterfaces(interfaces)}
+                        </Field>
+                    </div>
+                    {interfaceValue
+                    && renderInterfaceValues(interfaceValue)}
+                </div>
+            </>;
+};
+
+renderInterfaceValues.propTypes = {
+    gateway_ip: propTypes.string.isRequired,
+    hardware_address: propTypes.string.isRequired,
+    ip_addresses: propTypes.arrayOf(propTypes.string).isRequired,
+};
+
+export default reduxForm({
+    form: FORM_NAME.DHCP_INTERFACES,
+})(Interfaces);

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

@@ -1,22 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
-import { Trans, withTranslation } from 'react-i18next';
-import flow from 'lodash/flow';
+import { Trans, useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
 import { renderInputField } from '../../../../helpers/form';
 import { validateIpv4, validateMac, validateRequiredValue } from '../../../../helpers/validators';
 import { FORM_NAME } from '../../../../helpers/constants';
+import { toggleLeaseModal } from '../../../../actions';
 
-const Form = (props) => {
-    const {
-        t,
-        handleSubmit,
-        reset,
-        pristine,
-        submitting,
-        toggleLeaseModal,
-        processingAdding,
-    } = props;
+const Form = ({
+    handleSubmit,
+    reset,
+    pristine,
+    submitting,
+    processingAdding,
+}) => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+
+    const onClick = () => {
+        reset();
+        dispatch(toggleLeaseModal());
+    };
 
     return (
         <form onSubmit={handleSubmit}>
@@ -61,10 +66,7 @@ const Form = (props) => {
                         type="button"
                         className="btn btn-secondary btn-standard"
                         disabled={submitting}
-                        onClick={() => {
-                            reset();
-                            toggleLeaseModal();
-                        }}
+                        onClick={onClick}
                     >
                         <Trans>cancel_btn</Trans>
                     </button>
@@ -86,12 +88,7 @@ Form.propTypes = {
     handleSubmit: PropTypes.func.isRequired,
     reset: PropTypes.func.isRequired,
     submitting: PropTypes.bool.isRequired,
-    toggleLeaseModal: PropTypes.func.isRequired,
     processingAdding: PropTypes.bool.isRequired,
-    t: PropTypes.func.isRequired,
 };
 
-export default flow([
-    withTranslation(),
-    reduxForm({ form: FORM_NAME.LEASE }),
-])(Form);
+export default reduxForm({ form: FORM_NAME.LEASE })(Form);

client/src/components/Settings/Dhcp/StaticLeases/Modal.js

@@ -2,36 +2,37 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Trans, withTranslation } from 'react-i18next';
 import ReactModal from 'react-modal';
-
+import { useDispatch } from 'react-redux';
 import Form from './Form';
+import { toggleLeaseModal } from '../../../../actions';
 
-const Modal = (props) => {
-    const {
-        isModalOpen,
-        handleSubmit,
-        toggleLeaseModal,
-        processingAdding,
-    } = props;
+const Modal = ({
+    isModalOpen,
+    handleSubmit,
+    processingAdding,
+}) => {
+    const dispatch = useDispatch();
+
+    const toggleModal = () => dispatch(toggleLeaseModal());
 
     return (
         <ReactModal
             className="Modal__Bootstrap modal-dialog modal-dialog-centered modal-dialog--clients"
             closeTimeoutMS={0}
             isOpen={isModalOpen}
-            onRequestClose={() => toggleLeaseModal()}
+            onRequestClose={toggleModal}
         >
             <div className="modal-content">
                 <div className="modal-header">
                     <h4 className="modal-title">
                         <Trans>dhcp_new_static_lease</Trans>
                     </h4>
-                    <button type="button" className="close" onClick={() => toggleLeaseModal()}>
+                    <button type="button" className="close" onClick={toggleModal}>
                         <span className="sr-only">Close</span>
                     </button>
                 </div>
                 <Form
                     onSubmit={handleSubmit}
-                    toggleLeaseModal={toggleLeaseModal}
                     processingAdding={processingAdding}
                 />
             </div>
@@ -42,7 +43,6 @@ const Modal = (props) => {
 Modal.propTypes = {
     isModalOpen: PropTypes.bool.isRequired,
     handleSubmit: PropTypes.func.isRequired,
-    toggleLeaseModal: PropTypes.func.isRequired,
     processingAdding: PropTypes.bool.isRequired,
 };
 

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

@@ -1,115 +1,116 @@
-import React, { Component, Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ReactTable from 'react-table';
-import { Trans, withTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
 import { LEASES_TABLE_DEFAULT_PAGE_SIZE } from '../../../../helpers/constants';
 import { sortIp } from '../../../../helpers/helpers';
 import Modal from './Modal';
+import { addStaticLease, removeStaticLease } from '../../../../actions';
 
-class StaticLeases extends Component {
-    cellWrap = ({ value }) => (
-        <div className="logs__row o-hidden">
+const cellWrap = ({ value }) => (
+    <div className="logs__row o-hidden">
             <span className="logs__text" title={value}>
                 {value}
             </span>
-        </div>
-    );
+    </div>
+);
 
-    handleSubmit = (data) => {
-        this.props.addStaticLease(data);
+const StaticLeases = ({
+    isModalOpen,
+    processingAdding,
+    processingDeleting,
+    staticLeases,
+}) => {
+    const [t] = useTranslation();
+    const dispatch = useDispatch();
+
+    const handleSubmit = (data) => {
+        dispatch(addStaticLease(data));
     };
 
-    handleDelete = (ip, mac, hostname = '') => {
+    const handleDelete = (ip, mac, hostname = '') => {
         const name = hostname || ip;
         // eslint-disable-next-line no-alert
-        if (window.confirm(this.props.t('delete_confirm', { key: name }))) {
-            this.props.removeStaticLease({ ip, mac, hostname });
+        if (window.confirm(t('delete_confirm', { key: name }))) {
+            dispatch(removeStaticLease({
+                ip,
+                mac,
+                hostname,
+            }));
         }
     };
 
-    render() {
-        const {
-            isModalOpen,
-            toggleLeaseModal,
-            processingAdding,
-            processingDeleting,
-            staticLeases,
-            t,
-        } = this.props;
-        return (
-            <Fragment>
-                <ReactTable
-                    data={staticLeases || []}
-                    columns={[
-                        {
-                            Header: 'MAC',
-                            accessor: 'mac',
-                            Cell: this.cellWrap,
-                        },
-                        {
-                            Header: 'IP',
-                            accessor: 'ip',
-                            sortMethod: sortIp,
-                            Cell: this.cellWrap,
-                        },
-                        {
-                            Header: <Trans>dhcp_table_hostname</Trans>,
-                            accessor: 'hostname',
-                            Cell: this.cellWrap,
-                        },
-                        {
-                            Header: <Trans>actions_table_header</Trans>,
-                            accessor: 'actions',
-                            maxWidth: 150,
-                            Cell: (row) => {
-                                const { ip, mac, hostname } = row.original;
+    return (
+        <>
+            <ReactTable
+                data={staticLeases || []}
+                columns={[
+                    {
+                        Header: 'MAC',
+                        accessor: 'mac',
+                        Cell: cellWrap,
+                    },
+                    {
+                        Header: 'IP',
+                        accessor: 'ip',
+                        sortMethod: sortIp,
+                        Cell: cellWrap,
+                    },
+                    {
+                        Header: <Trans>dhcp_table_hostname</Trans>,
+                        accessor: 'hostname',
+                        Cell: cellWrap,
+                    },
+                    {
+                        Header: <Trans>actions_table_header</Trans>,
+                        accessor: 'actions',
+                        maxWidth: 150,
+                        // eslint-disable-next-line react/display-name
+                        Cell: (row) => {
+                            const { ip, mac, hostname } = row.original;
 
-                                return (
-                                    <div className="logs__row logs__row--center">
-                                        <button
-                                            type="button"
-                                            className="btn btn-icon btn-icon--green btn-outline-secondary btn-sm"
-                                            title={t('delete_table_action')}
-                                            disabled={processingDeleting}
-                                            onClick={() => this.handleDelete(ip, mac, hostname)
-                                            }
-                                        >
-                                            <svg className="icons">
-                                                <use xlinkHref="#delete"/>
-                                            </svg>
-                                        </button>
-                                    </div>
-                                );
-                            },
+                            return <div className="logs__row logs__row--center">
+                                <button
+                                        type="button"
+                                        className="btn btn-icon btn-icon--green btn-outline-secondary btn-sm"
+                                        title={t('delete_table_action')}
+                                        disabled={processingDeleting}
+                                        onClick={() => handleDelete(ip, mac, hostname)}
+                                >
+                                    <svg className="icons">
+                                        <use xlinkHref="#delete" />
+                                    </svg>
+                                </button>
+                            </div>;
                         },
-                    ]}
-                    pageSize={LEASES_TABLE_DEFAULT_PAGE_SIZE}
-                    showPageSizeOptions={false}
-                    showPagination={staticLeases.length > LEASES_TABLE_DEFAULT_PAGE_SIZE}
-                    noDataText={t('dhcp_static_leases_not_found')}
-                    className="-striped -highlight card-table-overflow"
-                    minRows={6}
-                />
-                <Modal
-                    isModalOpen={isModalOpen}
-                    toggleLeaseModal={toggleLeaseModal}
-                    handleSubmit={this.handleSubmit}
-                    processingAdding={processingAdding}
-                />
-            </Fragment>
-        );
-    }
-}
+                    },
+                ]}
+                pageSize={LEASES_TABLE_DEFAULT_PAGE_SIZE}
+                showPageSizeOptions={false}
+                showPagination={staticLeases.length > LEASES_TABLE_DEFAULT_PAGE_SIZE}
+                noDataText={t('dhcp_static_leases_not_found')}
+                className="-striped -highlight card-table-overflow"
+                minRows={6}
+            />
+            <Modal
+                isModalOpen={isModalOpen}
+                handleSubmit={handleSubmit}
+                processingAdding={processingAdding}
+            />
+        </>
+    );
+};
 
 StaticLeases.propTypes = {
     staticLeases: PropTypes.array.isRequired,
     isModalOpen: PropTypes.bool.isRequired,
-    toggleLeaseModal: PropTypes.func.isRequired,
-    removeStaticLease: PropTypes.func.isRequired,
-    addStaticLease: PropTypes.func.isRequired,
     processingAdding: PropTypes.bool.isRequired,
     processingDeleting: PropTypes.bool.isRequired,
-    t: PropTypes.func.isRequired,
 };
 
-export default withTranslation()(StaticLeases);
+cellWrap.propTypes = {
+    value: PropTypes.string.isRequired,
+};
+
+export default StaticLeases;

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

@@ -1,274 +1,277 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { Trans, withTranslation } from 'react-i18next';
+import React, { useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 
-import { DHCP_STATUS_RESPONSE } from '../../../helpers/constants';
-import Form from './Form';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import classNames from 'classnames';
+import { destroy } from 'redux-form';
+import {
+    DHCP_DESCRIPTION_PLACEHOLDERS,
+    DHCP_FORM_NAMES,
+    STATUS_RESPONSE,
+    FORM_NAME,
+} from '../../../helpers/constants';
 import Leases from './Leases';
 import StaticLeases from './StaticLeases/index';
 import Card from '../../ui/Card';
-import Accordion from '../../ui/Accordion';
 import PageTitle from '../../ui/PageTitle';
 import Loading from '../../ui/Loading';
+import {
+    findActiveDhcp,
+    getDhcpInterfaces,
+    getDhcpStatus,
+    resetDhcp,
+    setDhcpConfig,
+    toggleDhcp,
+    toggleLeaseModal,
+} from '../../../actions';
+import FormDHCPv4 from './FormDHCPv4';
+import FormDHCPv6 from './FormDHCPv6';
+import Interfaces from './Interfaces';
+import {
+    calculateDhcpPlaceholdersIpv4,
+    calculateDhcpPlaceholdersIpv6,
+} from '../../../helpers/helpers';
 
-class Dhcp extends Component {
-    componentDidMount() {
-        this.props.getDhcpStatus();
-        this.props.getDhcpInterfaces();
-    }
+const Dhcp = () => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const {
+        processingStatus,
+        processingConfig,
+        processing,
+        processingInterfaces,
+        check,
+        leases,
+        staticLeases,
+        isModalOpen,
+        processingAdding,
+        processingDeleting,
+        processingDhcp,
+        v4,
+        v6,
+        interface_name: interfaceName,
+        enabled,
+        dhcp_available,
+        interfaces,
+    } = useSelector((state) => state.dhcp, shallowEqual);
 
-    handleFormSubmit = (values) => {
-        if (values.interface_name) {
-            this.props.setDhcpConfig(values);
+    const interface_name = useSelector(
+        (state) => state.form[FORM_NAME.DHCP_INTERFACES]?.values?.interface_name,
+    );
+
+    const [ipv4placeholders, setIpv4Placeholders] = useState(DHCP_DESCRIPTION_PLACEHOLDERS.ipv4);
+    const [ipv6placeholders, setIpv6Placeholders] = useState(DHCP_DESCRIPTION_PLACEHOLDERS.ipv6);
+
+    useEffect(() => {
+        dispatch(getDhcpStatus());
+        dispatch(getDhcpInterfaces());
+    }, []);
+
+    useEffect(() => {
+        const [ipv4] = interfaces?.[interface_name]?.ipv4_addresses ?? [];
+        const [ipv6] = interfaces?.[interface_name]?.ipv6_addresses ?? [];
+        const gateway_ip = interfaces?.[interface_name]?.gateway_ip;
+
+        const v4placeholders = ipv4
+            ? calculateDhcpPlaceholdersIpv4(ipv4, gateway_ip)
+            : DHCP_DESCRIPTION_PLACEHOLDERS.ipv4;
+
+        const v6placeholders = ipv6
+            ? calculateDhcpPlaceholdersIpv6()
+            : DHCP_DESCRIPTION_PLACEHOLDERS.ipv6;
+
+        setIpv4Placeholders(v4placeholders);
+        setIpv6Placeholders(v6placeholders);
+    }, [interface_name]);
+
+    const clear = () => {
+        // eslint-disable-next-line no-alert
+        if (window.confirm(t('dhcp_reset'))) {
+            Object.values(DHCP_FORM_NAMES)
+                .forEach((formName) => dispatch(destroy(formName)));
+            dispatch(resetDhcp());
         }
     };
 
-    handleToggle = (config) => {
-        this.props.toggleDhcp(config);
+    const handleSubmit = (values) => {
+        dispatch(setDhcpConfig({
+            interface_name,
+            ...values,
+        }));
     };
 
-    getToggleDhcpButton = () => {
-        const {
-            config, check, processingDhcp, processingConfig,
-        } = this.props.dhcp;
-        const otherDhcpFound = check?.otherServer
-            && check.otherServer.found === DHCP_STATUS_RESPONSE.YES;
-        const filledConfig = Object.keys(config)
-            .every((key) => {
-                if (key === 'enabled' || key === 'icmp_timeout_msec') {
-                    return true;
-                }
+    const enteredSomeV4Value = Object.values(v4)
+        .some(Boolean);
+    const enteredSomeV6Value = Object.values(v6)
+        .some(Boolean);
+    const enteredSomeValue = enteredSomeV4Value || enteredSomeV6Value || interfaceName;
 
-                return config[key];
-            });
+    const getToggleDhcpButton = () => {
+        const otherDhcpFound = check && (check.v4.other_server.found === STATUS_RESPONSE.YES
+                || check.v6.other_server.found === STATUS_RESPONSE.YES);
 
-        if (config.enabled) {
-            return (
-                <button
-                    type="button"
-                    className="btn btn-standard mr-2 btn-gray"
-                    onClick={() => this.props.toggleDhcp(config)}
-                    disabled={processingDhcp || processingConfig}
-                >
-                    <Trans>dhcp_disable</Trans>
-                </button>
-            );
-        }
+        const filledConfig = interface_name && (Object.values(v4)
+            .every(Boolean) || Object.values(v6)
+            .every(Boolean));
 
-        return (
-            <button
-                type="button"
-                className="btn btn-standard mr-2 btn-success"
-                onClick={() => this.handleToggle(config)}
-                disabled={
-                    !filledConfig || !check || otherDhcpFound || processingDhcp || processingConfig
-                }
-            >
-                <Trans>dhcp_enable</Trans>
-            </button>
-        );
-    };
-
-    getActiveDhcpMessage = (t, check) => {
-        const { found } = check.otherServer;
-
-        if (found === DHCP_STATUS_RESPONSE.ERROR) {
-            return (
-                <div className="text-danger mb-2">
-                    <Trans>dhcp_error</Trans>
-                    <div className="mt-2 mb-2">
-                        <Accordion label={t('error_details')}>
-                            <span>{check.otherServer.error}</span>
-                        </Accordion>
-                    </div>
-                </div>
-            );
-        }
-
-        return (
-            <div className="mb-2">
-                {found === DHCP_STATUS_RESPONSE.YES ? (
-                    <div className="text-danger">
-                        <Trans>dhcp_found</Trans>
-                    </div>
-                ) : (
-                    <div className="text-secondary">
-                        <Trans>dhcp_not_found</Trans>
-                    </div>
-                )}
-            </div>
-        );
-    };
-
-    getDhcpWarning = (check) => {
-        if (check.otherServer.found === DHCP_STATUS_RESPONSE.NO) {
-            return '';
-        }
-
-        return (
-            <div className="text-danger">
-                <Trans>dhcp_warning</Trans>
-            </div>
-        );
-    };
-
-    getStaticIpWarning = (t, check, interfaceName) => {
-        if (check.staticIP.static === DHCP_STATUS_RESPONSE.ERROR) {
-            return <>
-                <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" />
-            </>;
-        }
-        if (check.staticIP.static === DHCP_STATUS_RESPONSE.NO
-            && check.staticIP.ip
-            && interfaceName) {
-            return <>
-                <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" />
-            </>;
-        }
-
-        return '';
-    };
-
-    render() {
-        const {
-            t,
-            dhcp,
-            resetDhcp,
-            findActiveDhcp,
-            addStaticLease,
-            removeStaticLease,
-            toggleLeaseModal,
-        } = this.props;
-
-        const statusButtonClass = classnames({
-            'btn btn-primary btn-standard': true,
-            'btn btn-primary btn-standard btn-loading': dhcp.processingStatus,
+        const className = classNames('btn btn-sm mr-2', {
+            'btn-gray': enabled,
+            'btn-outline-success': !enabled,
         });
-        const { enabled, interface_name, ...values } = dhcp.config;
 
-        return <>
-            <PageTitle title={t('dhcp_settings')} />
-            {(dhcp.processing || dhcp.processingInterfaces) && <Loading />}
-            {!dhcp.processing && !dhcp.processingInterfaces && <>
-                <Card
-                    title={t('dhcp_title')}
-                    subtitle={t('dhcp_description')}
-                    bodyType="card-body box-body--settings"
-                >
-                    <div className="dhcp">
-                        <>
-                            <Form
-                                onSubmit={this.handleFormSubmit}
-                                initialValues={{
-                                    interface_name,
-                                    ...values,
-                                }}
-                                interfaces={dhcp.interfaces}
-                                processingConfig={dhcp.processingConfig}
-                                processingInterfaces={dhcp.processingInterfaces}
-                                enabled={enabled}
-                                resetDhcp={resetDhcp}
-                            />
-                            <hr />
-                            <div className="card-actions mb-3">
-                                {this.getToggleDhcpButton()}
-                                <button
-                                    type="button"
-                                    className={statusButtonClass}
-                                    onClick={() => findActiveDhcp(interface_name)}
-                                    disabled={
-                                        enabled || !interface_name || dhcp.processingConfig
-                                    }
-                                >
-                                    <Trans>check_dhcp_servers</Trans>
-                                </button>
-                            </div>
-                            {!enabled && dhcp.check && (
-                                <>
-                                    {this.getStaticIpWarning(t, dhcp.check, interface_name)}
-                                    {this.getActiveDhcpMessage(t, dhcp.check)}
-                                    {this.getDhcpWarning(dhcp.check)}
-                                </>
-                            )}
-                        </>
-                    </div>
-                </Card>
-                {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>
-                )}
-                <Card
-                    title={t('dhcp_static_leases')}
-                    bodyType="card-body box-body--settings"
-                >
-                    <div className="row">
-                        <div className="col-12">
-                            <StaticLeases
-                                staticLeases={dhcp.staticLeases}
-                                isModalOpen={dhcp.isModalOpen}
-                                addStaticLease={addStaticLease}
-                                removeStaticLease={removeStaticLease}
-                                toggleLeaseModal={toggleLeaseModal}
-                                processingAdding={dhcp.processingAdding}
-                                processingDeleting={dhcp.processingDeleting}
-                            />
-                        </div>
-                        <div className="col-12">
-                            <button
-                                type="button"
-                                className="btn btn-success btn-standard mt-3"
-                                onClick={() => toggleLeaseModal()}
-                            >
-                                <Trans>dhcp_add_static_lease</Trans>
-                            </button>
-                        </div>
-                    </div>
-                </Card>
-            </>}
-        </>;
+        const onClickDisable = () => dispatch(toggleDhcp({ enabled }));
+        const onClickEnable = () => {
+            const values = {
+                enabled,
+                interface_name,
+                v4: enteredSomeV4Value ? v4 : {},
+                v6: enteredSomeV6Value ? v6 : {},
+            };
+            dispatch(toggleDhcp(values));
+        };
+
+        return <button
+            type="button"
+            className={className}
+            onClick={enabled ? onClickDisable : onClickEnable}
+            disabled={processingDhcp || processingConfig
+            || (!enabled && (!filledConfig || !check || otherDhcpFound))}
+        >
+            <Trans>{enabled ? 'dhcp_disable' : 'dhcp_enable'}</Trans>
+        </button>;
+    };
+
+    const statusButtonClass = classNames('btn btn-sm mx-2', {
+        'btn-loading btn-primary': processingStatus,
+        'btn-outline-primary': !processingStatus,
+    });
+
+    const onClick = () => dispatch(findActiveDhcp(interface_name));
+
+    const toggleModal = () => dispatch(toggleLeaseModal());
+
+    const initialV4 = enteredSomeV4Value ? v4 : {};
+    const initialV6 = enteredSomeV6Value ? v6 : {};
+
+    if (processing || processingInterfaces) {
+        return <Loading />;
     }
-}
 
-Dhcp.propTypes = {
-    dhcp: PropTypes.object.isRequired,
-    toggleDhcp: PropTypes.func.isRequired,
-    getDhcpStatus: PropTypes.func.isRequired,
-    setDhcpConfig: PropTypes.func.isRequired,
-    findActiveDhcp: PropTypes.func.isRequired,
-    addStaticLease: PropTypes.func.isRequired,
-    removeStaticLease: PropTypes.func.isRequired,
-    toggleLeaseModal: PropTypes.func.isRequired,
-    getDhcpInterfaces: PropTypes.func.isRequired,
-    t: PropTypes.func.isRequired,
-    resetDhcp: PropTypes.func.isRequired,
+    if (!processing && !dhcp_available) {
+        return <div className="text-center pt-5">
+            <h2>
+                <Trans>unavailable_dhcp</Trans>
+            </h2>
+            <h4>
+                <Trans>unavailable_dhcp_desc</Trans>
+            </h4>
+        </div>;
+    }
+
+    const toggleDhcpButton = getToggleDhcpButton();
+
+    return <>
+        <PageTitle title={t('dhcp_settings')} subtitle={t('dhcp_description')}>
+            <div className="page-title__actions">
+                <div className="mb-3">
+                    {toggleDhcpButton}
+                    <button
+                        type="button"
+                        className={statusButtonClass}
+                        onClick={onClick}
+                        disabled={enabled || !interface_name || processingConfig}
+                    >
+                        <Trans>check_dhcp_servers</Trans>
+                    </button>
+                    <button
+                        type="button"
+                        className='btn btn-sm mx-2 btn-outline-secondary'
+                        disabled={!enteredSomeValue || processingConfig}
+                        onClick={clear}
+                    >
+                        <Trans>reset_settings</Trans>
+                    </button>
+                </div>
+            </div>
+        </PageTitle>
+        {!processing && !processingInterfaces
+        && <>
+            {!enabled
+            && check
+            && (check.v4.other_server.found !== STATUS_RESPONSE.NO
+                    || check.v6.other_server.found !== STATUS_RESPONSE.NO)
+            && <div className="mb-5">
+                <hr />
+                <div className="text-danger">
+                    <Trans>dhcp_warning</Trans>
+                </div>
+            </div>}
+            <Interfaces
+                initialValues={{ interface_name: interfaceName }}
+            />
+            <Card
+                title={t('dhcp_ipv4_settings')}
+                bodyType="card-body box-body--settings"
+            >
+                <div>
+                    <FormDHCPv4
+                        onSubmit={handleSubmit}
+                        initialValues={{ v4: initialV4 }}
+                        processingConfig={processingConfig}
+                        ipv4placeholders={ipv4placeholders}
+                    />
+                </div>
+            </Card>
+            <Card
+                title={t('dhcp_ipv6_settings')}
+                bodyType="card-body box-body--settings"
+            >
+                <div>
+                    <FormDHCPv6
+                        onSubmit={handleSubmit}
+                        initialValues={{ v6: initialV6 }}
+                        processingConfig={processingConfig}
+                        ipv6placeholders={ipv6placeholders}
+                    />
+                </div>
+            </Card>
+            {enabled
+            && <Card
+                title={t('dhcp_leases')}
+                bodyType="card-body box-body--settings"
+            >
+                <div className="row">
+                    <div className="col">
+                        <Leases leases={leases} />
+                    </div>
+                </div>
+            </Card>}
+            <Card
+                title={t('dhcp_static_leases')}
+                bodyType="card-body box-body--settings"
+            >
+                <div className="row">
+                    <div className="col-12">
+                        <StaticLeases
+                            staticLeases={staticLeases}
+                            isModalOpen={isModalOpen}
+                            processingAdding={processingAdding}
+                            processingDeleting={processingDeleting}
+                        />
+                    </div>
+                    <div className="col-12">
+                        <button
+                            type="button"
+                            className="btn btn-success btn-standard mt-3"
+                            onClick={toggleModal}
+                        >
+                            <Trans>dhcp_add_static_lease</Trans>
+                        </button>
+                    </div>
+                </div>
+            </Card>
+        </>}
+    </>;
 };
 
-export default withTranslation()(Dhcp);
+export default Dhcp;

client/src/components/Settings/Dns/Config/Form.js

@@ -6,7 +6,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import {
     renderInputField,
     renderRadioField,
-    renderSelectField,
+    renderCheckboxField,
     toNumber,
 } from '../../../../helpers/form';
 import {
@@ -96,7 +96,7 @@ const Form = ({
                     <Field
                         name={name}
                         type="checkbox"
-                        component={renderSelectField}
+                        component={renderCheckboxField}
                         placeholder={t(placeholder)}
                         disabled={processing}
                         subtitle={t(subtitle)}

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

@@ -7,7 +7,7 @@ import flow from 'lodash/flow';
 
 import {
     renderInputField,
-    renderSelectField,
+    renderCheckboxField,
     renderRadioField,
     toNumber,
 } from '../../../helpers/form';
@@ -15,7 +15,7 @@ import { validateIsSafePort, validatePort, validatePortTLS } from '../../../help
 import i18n from '../../../i18n';
 import KeyStatus from './KeyStatus';
 import CertificateStatus from './CertificateStatus';
-import { FORM_NAME } from '../../../helpers/constants';
+import { DNS_OVER_TLS_PORT, FORM_NAME, STANDARD_HTTPS_PORT } from '../../../helpers/constants';
 
 const validate = (values) => {
     const errors = {};
@@ -36,8 +36,8 @@ const clearFields = (change, setTlsConfig, t) => {
         certificate_chain: '',
         private_key_path: '',
         certificate_path: '',
-        port_https: 443,
-        port_dns_over_tls: 853,
+        port_https: STANDARD_HTTPS_PORT,
+        port_dns_over_tls: DNS_OVER_TLS_PORT,
         server_name: '',
         force_https: false,
         enabled: false,
@@ -96,7 +96,7 @@ let Form = (props) => {
                         <Field
                             name="enabled"
                             type="checkbox"
-                            component={renderSelectField}
+                            component={renderCheckboxField}
                             placeholder={t('encryption_enable')}
                             onChange={handleChange}
                         />
@@ -133,7 +133,7 @@ let Form = (props) => {
                         <Field
                             name="force_https"
                             type="checkbox"
-                            component={renderSelectField}
+                            component={renderCheckboxField}
                             placeholder={t('encryption_redirect')}
                             onChange={handleChange}
                             disabled={!isEnabled}

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

@@ -4,7 +4,7 @@ import { Field, reduxForm } from 'redux-form';
 import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
-import { renderSelectField, toNumber } from '../../../helpers/form';
+import { renderCheckboxField, toNumber } from '../../../helpers/form';
 import { FILTERS_INTERVALS_HOURS, FORM_NAME } from '../../../helpers/constants';
 
 const getTitleForInterval = (interval, t) => {
@@ -49,7 +49,7 @@ const Form = (props) => {
                             name="enabled"
                             type="checkbox"
                             modifier="checkbox--settings"
-                            component={renderSelectField}
+                            component={renderCheckboxField}
                             placeholder={t('block_domain_use_filters_and_hosts')}
                             subtitle={t('filters_block_toggle_hint')}
                             onChange={handleChange}

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

@@ -4,7 +4,7 @@ import { Field, reduxForm } from 'redux-form';
 import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
-import { renderSelectField, renderRadioField, toNumber } from '../../../helpers/form';
+import { renderCheckboxField, renderRadioField, toNumber } from '../../../helpers/form';
 import { FORM_NAME, QUERY_LOG_INTERVALS_DAYS } from '../../../helpers/constants';
 
 const getIntervalFields = (processing, t, toNumber) => QUERY_LOG_INTERVALS_DAYS.map((interval) => {
@@ -35,7 +35,7 @@ const Form = (props) => {
                 <Field
                     name="enabled"
                     type="checkbox"
-                    component={renderSelectField}
+                    component={renderCheckboxField}
                     placeholder={t('query_log_enable')}
                     disabled={processing}
                 />
@@ -44,7 +44,7 @@ const Form = (props) => {
                 <Field
                     name="anonymize_client_ip"
                     type="checkbox"
-                    component={renderSelectField}
+                    component={renderCheckboxField}
                     placeholder={t('anonymize_client_ip')}
                     subtitle={t('anonymize_client_ip_desc')}
                     disabled={processing}

client/src/components/Settings/Settings.css

@@ -54,7 +54,11 @@
 }
 
 .form__message--error {
-    color: #cd201f;
+    color: var(--red);
+}
+
+.form__message--left-pad {
+    padding-left: 0.85rem;
 }
 
 .interface__title {
@@ -70,10 +74,6 @@
     content: "";
 }
 
-.dhcp {
-    min-height: 450px;
-}
-
 .form__desc {
     margin-top: 10px;
     font-size: 13px;

client/src/components/ui/Accordion.js

@@ -1,43 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-import './Accordion.css';
-
-class Accordion extends Component {
-    state = {
-        isOpen: false,
-    };
-
-    handleClick = () => {
-        this.setState((prevState) => ({ isOpen: !prevState.isOpen }));
-    };
-
-    render() {
-        const accordionClass = this.state.isOpen
-            ? 'accordion__label accordion__label--open'
-            : 'accordion__label';
-
-        return (
-            <div className="accordion">
-                <div
-                    className={accordionClass}
-                    onClick={this.handleClick}
-                >
-                    {this.props.label}
-                </div>
-                {this.state.isOpen && (
-                    <div className="accordion__content">
-                        {this.props.children}
-                    </div>
-                )}
-            </div>
-        );
-    }
-}
-
-Accordion.propTypes = {
-    children: PropTypes.node.isRequired,
-    label: PropTypes.string.isRequired,
-};
-
-export default Accordion;