cotugno/AdGuardHome
2
Fork 0
mirror of https://github.com/AdguardTeam/AdGuardHome.git synced 2024-11-16 10:28:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

* client: validate form on load

Browse Source
This commit is contained in:
Ildar Kamalov 2019-04-17 16:24:18 +03:00 committed by Simon Zolin
parent f76b7c3d94
commit ceabad0fd0
2 changed files with 168 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

322
client/src/install/Setup/Settings.js
View File

@ -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);

1
client/src/install/Setup/index.js
View File

@ -94,6 +94,7 @@ class Setup extends Component {
interfaces={interfaces}
onSubmit={this.nextStep}
onChange={this.handleFormChange}
validateForm={this.handleFormChange}
handleAutofix={this.handleAutofix}
/>
);