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

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

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