Create UI for DNS rebinding protection

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Field, reduxForm } from 'redux-form';
+import { Trans, useTranslation } from 'react-i18next';
+import { shallowEqual, useSelector } from 'react-redux';
+import { renderTextareaField, CheckboxField } from '../../../../helpers/form';
+import { removeEmptyLines } from '../../../../helpers/helpers';
+import { FORM_NAME } from '../../../../helpers/constants';
+
+const fields = [
+    {
+        id: 'rebinding_allowed_hosts',
+        title: 'rebinding_allowed_hosts_title',
+        subtitle: 'rebinding_allowed_hosts_desc',
+        normalizeOnBlur: removeEmptyLines,
+    },
+];
+
+const Form = ({
+    handleSubmit, submitting, invalid,
+}) => {
+    const { t } = useTranslation();
+    const { processingSetConfig } = useSelector((state) => state.dnsConfig, shallowEqual);
+
+    const renderField = ({
+        id, title, subtitle, disabled = processingSetConfig, normalizeOnBlur,
+    }) => <div key={id} className="form__group mb-5">
+            <label className="form__label form__label--with-desc" htmlFor={id}>
+                <Trans>{title}</Trans>
+            </label>
+            <div className="form__desc form__desc--top">
+                <Trans>{subtitle}</Trans>
+            </div>
+            <Field
+                id={id}
+                name={id}
+                component={renderTextareaField}
+                type="text"
+                className="form-control form-control--textarea font-monospace"
+                disabled={disabled}
+                normalizeOnBlur={normalizeOnBlur}
+            />
+        </div>;
+
+    renderField.propTypes = {
+        id: PropTypes.string,
+        title: PropTypes.string,
+        subtitle: PropTypes.string,
+        disabled: PropTypes.bool,
+        normalizeOnBlur: PropTypes.func,
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="col-12">
+                <div className="form__group form__group--settings">
+                    <Field
+                        name={'rebinding_protection_enabled'}
+                        type="checkbox"
+                        component={CheckboxField}
+                        placeholder={t('rebinding_protection_enabled')}
+                        subtitle={t('rebinding_protection_enabled_desc')}
+                        disabled={processingSetConfig}
+                    />
+                </div>
+            </div>
+
+            {fields.map(renderField)}
+
+            <div className="card-actions">
+                <div className="btn-list">
+                    <button
+                        type="submit"
+                        className="btn btn-success btn-standard"
+                        disabled={submitting || invalid || processingSetConfig}
+                    >
+                        <Trans>save_config</Trans>
+                    </button>
+                </div>
+            </div>
+        </form>
+    );
+};
+
+Form.propTypes = {
+    handleSubmit: PropTypes.func.isRequired,
+    submitting: PropTypes.bool.isRequired,
+    invalid: PropTypes.bool.isRequired,
+};
+
+export default reduxForm({ form: FORM_NAME.REBINDING })(Form);

client/src/components/Settings/Dns/Rebinding/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import Form from './Form';
+import Card from '../../../ui/Card';
+import { setDnsConfig } from '../../../../actions/dnsConfig';
+
+const RebindingConfig = () => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const {
+        rebinding_protection_enabled, rebinding_allowed_hosts,
+    } = useSelector((state) => state.dnsConfig, shallowEqual);
+
+    const handleFormSubmit = (values) => {
+        dispatch(setDnsConfig(values));
+    };
+
+    return (
+        <Card
+            title={t('rebinding_title')}
+            subtitle={t('rebinding_desc')}
+            bodyType="card-body box-body--settings"
+        >
+            <Form
+                initialValues={{
+                    rebinding_protection_enabled,
+                    rebinding_allowed_hosts,
+                }}
+                onSubmit={handleFormSubmit}
+            />
+        </Card>
+    );
+};
+
+export default RebindingConfig;

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

@@ -8,6 +8,7 @@ import Config from './Config';
 import PageTitle from '../../ui/PageTitle';
 import Loading from '../../ui/Loading';
 import CacheConfig from './Cache';
+import RebindingConfig from './Rebinding';
 import { getDnsConfig } from '../../../actions/dnsConfig';
 import { getAccessList } from '../../../actions/access';
 
@@ -33,6 +34,7 @@ const Dns = () => {
                 <Config />
                 <CacheConfig />
                 <Access />
+                <RebindingConfig />
             </>}
     </>;
 };