AdGuardHome/client/src/components/Settings/Dns/Access/Form.js

import React from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { Trans, withNamespaces } from 'react-i18next';
import flow from 'lodash/flow';

const Form = (props) => {
    const { handleSubmit, submitting, invalid } = props;

    return (
        <form onSubmit={handleSubmit}>
            <div className="form__group mb-5">
                <label className="form__label form__label--with-desc" htmlFor="allowed_clients">
                    <Trans>access_allowed_title</Trans>
                </label>
                <div className="form__desc form__desc--top">
                    <Trans>access_allowed_desc</Trans>
                </div>
                <Field
                    id="allowed_clients"
                    name="allowed_clients"
                    component="textarea"
                    type="text"
                    className="form-control form-control--textarea"
                />
            </div>
            <div className="form__group mb-5">
                <label className="form__label form__label--with-desc" htmlFor="disallowed_clients">
                    <Trans>access_disallowed_title</Trans>
                </label>
                <div className="form__desc form__desc--top">
                    <Trans>access_disallowed_desc</Trans>
                </div>
                <Field
                    id="disallowed_clients"
                    name="disallowed_clients"
                    component="textarea"
                    type="text"
                    className="form-control form-control--textarea"
                />
            </div>
            <div className="form__group mb-5">
                <label className="form__label form__label--with-desc" htmlFor="blocked_hosts">
                    <Trans>access_blocked_title</Trans>
                </label>
                <div className="form__desc form__desc--top">
                    <Trans>access_blocked_desc</Trans>
                </div>
                <Field
                    id="blocked_hosts"
                    name="blocked_hosts"
                    component="textarea"
                    type="text"
                    className="form-control form-control--textarea"
                />
            </div>
            <div className="card-actions">
                <div className="btn-list">
                    <button
                        type="submit"
                        className="btn btn-success btn-standard"
                        disabled={submitting || invalid}
                    >
                        <Trans>save_config</Trans>
                    </button>
                </div>
            </div>
        </form>
    );
};

Form.propTypes = {
    handleSubmit: PropTypes.func,
    submitting: PropTypes.bool,
    invalid: PropTypes.bool,
    initialValues: PropTypes.object,
    t: PropTypes.func,
};

export default flow([withNamespaces(), reduxForm({ form: 'accessForm' })])(Form);