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 ( -
-
-
- install_settings_title -
-
-
-
- - - - {renderInterfaces(interfaces)} - + 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 ( + +
+
+ install_settings_title +
+
+
+
+ + + + {renderInterfaces(interfaces)} + +
+
+
+
+ + +
+
+
+ {webStatus && +
+ {webStatus} + {isWebFixAvailable && + + } +
+ }
-
-
- - + install_settings_interface_link +
+
-
- {webStatus && -
- {webStatus} - {isWebFixAvailable && - - } +
+
+
+ install_settings_dns +
+
+
+
+ + + + {renderInterfaces(interfaces)} +
- } -
-
-
- install_settings_interface_link -
- -
-
-
-
-
- install_settings_dns -
-
-
-
- - - - {renderInterfaces(interfaces)} - +
+
+
+ + +
+
+
+ {dnsStatus && +
+ {dnsStatus} + {isDnsFixAvailable && + + } +
+ }
-
-
- - + install_settings_dns_desc +
+
-
- {dnsStatus && -
- {dnsStatus} - {isDnsFixAvailable && - - } -
- } -
-
- install_settings_dns_desc -
- -
-
-
- - - ); -}; + + + ); + } +} 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} /> );