* client: validate form on load

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,7 +61,17 @@ const renderInterfaces = (interfaces => (
     })
 ));
 
-let Settings = (props) => {
+class Settings extends Component {
+    componentDidMount() {
+        const { web, dns } = this.props.config;
+
+        this.props.validateForm({
+            web,
+            dns,
+        });
+    }
+
+    render() {
         const {
             handleSubmit,
             handleChange,
@@ -73,7 +83,7 @@ let Settings = (props) => {
             interfaces,
             invalid,
             config,
-    } = props;
+        } = this.props;
         const {
             status: webStatus,
             can_autofix: isWebFixAvailable,
@@ -225,12 +235,14 @@ let Settings = (props) => {
                 <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);

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}
                     />
                 );