From ceabad0fd07547dae7795bb827450883643aae31 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <i.kamalov@adguard.com>
Date: Wed, 17 Apr 2019 16:24:18 +0300
Subject: [PATCH] * client: validate form on load

---
 client/src/install/Setup/Settings.js | 322 ++++++++++++++-------------
 client/src/install/Setup/index.js    |   1 +
 2 files changed, 168 insertions(+), 155 deletions(-)

diff --git a/client/src/install/Setup/Settings.js b/client/src/install/Setup/Settings.js
index ff11f0ab..f8ff35a2 100644
--- a/client/src/install/Setup/Settings.js
+++ b/client/src/install/Setup/Settings.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Component, Fragment } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { Field, reduxForm, formValueSelector } from 'redux-form';
@@ -61,176 +61,188 @@ const renderInterfaces = (interfaces => (
     })
 ));
 
-let Settings = (props) => {
-    const {
-        handleSubmit,
-        handleChange,
-        handleAutofix,
-        webIp,
-        webPort,
-        dnsIp,
-        dnsPort,
-        interfaces,
-        invalid,
-        config,
-    } = props;
-    const {
-        status: webStatus,
-        can_autofix: isWebFixAvailable,
-    } = config.web;
-    const {
-        status: dnsStatus,
-        can_autofix: isDnsFixAvailable,
-    } = config.dns;
+class Settings extends Component {
+    componentDidMount() {
+        const { web, dns } = this.props.config;
 
-    return (
-        <form className="setup__step" onSubmit={handleSubmit}>
-            <div className="setup__group">
-                <div className="setup__subtitle">
-                    <Trans>install_settings_title</Trans>
-                </div>
-                <div className="row">
-                    <div className="col-8">
-                        <div className="form-group">
-                            <label>
-                                <Trans>install_settings_listen</Trans>
-                            </label>
-                            <Field
-                                name="web.ip"
-                                component="select"
-                                className="form-control custom-select"
-                                onChange={handleChange}
-                            >
-                                <option value={ALL_INTERFACES_IP}>
-                                    <Trans>install_settings_all_interfaces</Trans>
-                                </option>
-                                {renderInterfaces(interfaces)}
-                            </Field>
+        this.props.validateForm({
+            web,
+            dns,
+        });
+    }
+
+    render() {
+        const {
+            handleSubmit,
+            handleChange,
+            handleAutofix,
+            webIp,
+            webPort,
+            dnsIp,
+            dnsPort,
+            interfaces,
+            invalid,
+            config,
+        } = this.props;
+        const {
+            status: webStatus,
+            can_autofix: isWebFixAvailable,
+        } = config.web;
+        const {
+            status: dnsStatus,
+            can_autofix: isDnsFixAvailable,
+        } = config.dns;
+
+        return (
+            <form className="setup__step" onSubmit={handleSubmit}>
+                <div className="setup__group">
+                    <div className="setup__subtitle">
+                        <Trans>install_settings_title</Trans>
+                    </div>
+                    <div className="row">
+                        <div className="col-8">
+                            <div className="form-group">
+                                <label>
+                                    <Trans>install_settings_listen</Trans>
+                                </label>
+                                <Field
+                                    name="web.ip"
+                                    component="select"
+                                    className="form-control custom-select"
+                                    onChange={handleChange}
+                                >
+                                    <option value={ALL_INTERFACES_IP}>
+                                        <Trans>install_settings_all_interfaces</Trans>
+                                    </option>
+                                    {renderInterfaces(interfaces)}
+                                </Field>
+                            </div>
+                        </div>
+                        <div className="col-4">
+                            <div className="form-group">
+                                <label>
+                                    <Trans>install_settings_port</Trans>
+                                </label>
+                                <Field
+                                    name="web.port"
+                                    component={renderField}
+                                    type="number"
+                                    className="form-control"
+                                    placeholder="80"
+                                    validate={[port, required]}
+                                    normalize={toNumber}
+                                    onChange={handleChange}
+                                />
+                            </div>
+                        </div>
+                        <div className="col-12">
+                            {webStatus &&
+                                <div className="setup__error text-danger">
+                                    {webStatus}
+                                    {isWebFixAvailable &&
+                                        <button
+                                            type="button"
+                                            className="btn btn-secondary btn-sm ml-2"
+                                            onClick={() => handleAutofix('web', webIp, webPort)}
+                                        >
+                                            <Trans>fix</Trans>
+                                        </button>
+                                    }
+                                </div>
+                            }
                         </div>
                     </div>
-                    <div className="col-4">
-                        <div className="form-group">
-                            <label>
-                                <Trans>install_settings_port</Trans>
-                            </label>
-                            <Field
-                                name="web.port"
-                                component={renderField}
-                                type="number"
-                                className="form-control"
-                                placeholder="80"
-                                validate={[port, required]}
-                                normalize={toNumber}
-                                onChange={handleChange}
+                    <div className="setup__desc">
+                        <Trans>install_settings_interface_link</Trans>
+                        <div className="mt-1">
+                            <AddressList
+                                interfaces={interfaces}
+                                address={webIp}
+                                port={webPort}
                             />
                         </div>
                     </div>
-                    <div className="col-12">
-                        {webStatus &&
-                            <div className="setup__error text-danger">
-                                {webStatus}
-                                {isWebFixAvailable &&
-                                    <button
-                                        type="button"
-                                        className="btn btn-secondary btn-sm ml-2"
-                                        onClick={() => handleAutofix('web', webIp, webPort)}
-                                    >
-                                        <Trans>fix</Trans>
-                                    </button>
-                                }
+                </div>
+                <div className="setup__group">
+                    <div className="setup__subtitle">
+                        <Trans>install_settings_dns</Trans>
+                    </div>
+                    <div className="row">
+                        <div className="col-8">
+                            <div className="form-group">
+                                <label>
+                                    <Trans>install_settings_listen</Trans>
+                                </label>
+                                <Field
+                                    name="dns.ip"
+                                    component="select"
+                                    className="form-control custom-select"
+                                    onChange={handleChange}
+                                >
+                                    <option value={ALL_INTERFACES_IP}>
+                                        <Trans>install_settings_all_interfaces</Trans>
+                                    </option>
+                                    {renderInterfaces(interfaces)}
+                                </Field>
                             </div>
-                        }
-                    </div>
-                </div>
-                <div className="setup__desc">
-                    <Trans>install_settings_interface_link</Trans>
-                    <div className="mt-1">
-                        <AddressList
-                            interfaces={interfaces}
-                            address={webIp}
-                            port={webPort}
-                        />
-                    </div>
-                </div>
-            </div>
-            <div className="setup__group">
-                <div className="setup__subtitle">
-                    <Trans>install_settings_dns</Trans>
-                </div>
-                <div className="row">
-                    <div className="col-8">
-                        <div className="form-group">
-                            <label>
-                                <Trans>install_settings_listen</Trans>
-                            </label>
-                            <Field
-                                name="dns.ip"
-                                component="select"
-                                className="form-control custom-select"
-                                onChange={handleChange}
-                            >
-                                <option value={ALL_INTERFACES_IP}>
-                                    <Trans>install_settings_all_interfaces</Trans>
-                                </option>
-                                {renderInterfaces(interfaces)}
-                            </Field>
+                        </div>
+                        <div className="col-4">
+                            <div className="form-group">
+                                <label>
+                                    <Trans>install_settings_port</Trans>
+                                </label>
+                                <Field
+                                    name="dns.port"
+                                    component={renderField}
+                                    type="number"
+                                    className="form-control"
+                                    placeholder="80"
+                                    validate={[port, required]}
+                                    normalize={toNumber}
+                                    onChange={handleChange}
+                                />
+                            </div>
+                        </div>
+                        <div className="col-12">
+                            {dnsStatus &&
+                                <div className="setup__error text-danger">
+                                    {dnsStatus}
+                                    {isDnsFixAvailable &&
+                                        <button
+                                            type="button"
+                                            className="btn btn-secondary btn-sm ml-2"
+                                            onClick={() => handleAutofix('dns', dnsIp, dnsPort)}
+                                        >
+                                            <Trans>fix</Trans>
+                                        </button>
+                                    }
+                                </div>
+                            }
                         </div>
                     </div>
-                    <div className="col-4">
-                        <div className="form-group">
-                            <label>
-                                <Trans>install_settings_port</Trans>
-                            </label>
-                            <Field
-                                name="dns.port"
-                                component={renderField}
-                                type="number"
-                                className="form-control"
-                                placeholder="80"
-                                validate={[port, required]}
-                                normalize={toNumber}
-                                onChange={handleChange}
+                    <div className="setup__desc">
+                        <Trans>install_settings_dns_desc</Trans>
+                        <div className="mt-1">
+                            <AddressList
+                                interfaces={interfaces}
+                                address={dnsIp}
+                                port={dnsPort}
+                                isDns={true}
                             />
                         </div>
                     </div>
-                    <div className="col-12">
-                        {dnsStatus &&
-                            <div className="setup__error text-danger">
-                                {dnsStatus}
-                                {isDnsFixAvailable &&
-                                    <button
-                                        type="button"
-                                        className="btn btn-secondary btn-sm ml-2"
-                                        onClick={() => handleAutofix('dns', dnsIp, dnsPort)}
-                                    >
-                                        <Trans>fix</Trans>
-                                    </button>
-                                }
-                            </div>
-                        }
-                    </div>
                 </div>
-                <div className="setup__desc">
-                    <Trans>install_settings_dns_desc</Trans>
-                    <div className="mt-1">
-                        <AddressList
-                            interfaces={interfaces}
-                            address={dnsIp}
-                            port={dnsPort}
-                            isDns={true}
-                        />
-                    </div>
-                </div>
-            </div>
-            <Controls invalid={invalid} />
-        </form>
-    );
-};
+                <Controls invalid={invalid} />
+            </form>
+        );
+    }
+}
 
 Settings.propTypes = {
     handleSubmit: PropTypes.func.isRequired,
     handleChange: PropTypes.func,
     handleAutofix: PropTypes.func,
+    validateForm: PropTypes.func,
     webIp: PropTypes.string.isRequired,
     dnsIp: PropTypes.string.isRequired,
     config: PropTypes.object.isRequired,
@@ -249,7 +261,7 @@ Settings.propTypes = {
 
 const selector = formValueSelector('install');
 
-Settings = connect((state) => {
+const SettingsForm = connect((state) => {
     const webIp = selector(state, 'web.ip');
     const webPort = selector(state, 'web.port');
     const dnsIp = selector(state, 'dns.ip');
@@ -270,4 +282,4 @@ export default flow([
         destroyOnUnmount: false,
         forceUnregisterOnUnmount: true,
     }),
-])(Settings);
+])(SettingsForm);
diff --git a/client/src/install/Setup/index.js b/client/src/install/Setup/index.js
index c1ae6a43..ca91cd8f 100644
--- a/client/src/install/Setup/index.js
+++ b/client/src/install/Setup/index.js
@@ -94,6 +94,7 @@ class Setup extends Component {
                         interfaces={interfaces}
                         onSubmit={this.nextStep}
                         onChange={this.handleFormChange}
+                        validateForm={this.handleFormChange}
                         handleAutofix={this.handleAutofix}
                     />
                 );