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