mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-22 09:45:41 +00:00
Bug 1488503: Validation for network location. r=jdescottes
Differential Revision: https://phabricator.services.mozilla.com/D23993 --HG-- extra : moz-landing-system : lando
This commit is contained in:
parent
9e0cc34738
commit
f315323367
@ -196,7 +196,7 @@ class ConnectPage extends PureComponent {
|
|||||||
? dom.div(
|
? dom.div(
|
||||||
{},
|
{},
|
||||||
NetworkLocationsList({ dispatch, networkLocations }),
|
NetworkLocationsList({ dispatch, networkLocations }),
|
||||||
NetworkLocationsForm({ dispatch }),
|
NetworkLocationsForm({ dispatch, networkLocations }),
|
||||||
)
|
)
|
||||||
: null,
|
: null,
|
||||||
},
|
},
|
||||||
|
@ -17,3 +17,7 @@
|
|||||||
padding-block-start: calc(var(--base-unit) * 4);
|
padding-block-start: calc(var(--base-unit) * 4);
|
||||||
padding-inline: calc(var(--base-unit) * 6);
|
padding-inline: calc(var(--base-unit) * 6);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.connect-page__network-form__error-message {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
@ -11,35 +11,88 @@ const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
|
|||||||
const FluentReact = require("devtools/client/shared/vendor/fluent-react");
|
const FluentReact = require("devtools/client/shared/vendor/fluent-react");
|
||||||
const Localized = createFactory(FluentReact.Localized);
|
const Localized = createFactory(FluentReact.Localized);
|
||||||
|
|
||||||
|
const Message = createFactory(require("../shared/Message"));
|
||||||
|
|
||||||
const Actions = require("../../actions/index");
|
const Actions = require("../../actions/index");
|
||||||
|
const { MESSAGE_LEVEL } = require("../../constants");
|
||||||
|
const Types = require("../../types/index");
|
||||||
|
|
||||||
class NetworkLocationsForm extends PureComponent {
|
class NetworkLocationsForm extends PureComponent {
|
||||||
static get propTypes() {
|
static get propTypes() {
|
||||||
return {
|
return {
|
||||||
dispatch: PropTypes.func.isRequired,
|
dispatch: PropTypes.func.isRequired,
|
||||||
|
networkLocations: PropTypes.arrayOf(Types.location).isRequired,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
|
errorHostValue: null,
|
||||||
|
errorMessageId: null,
|
||||||
value: "",
|
value: "",
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onSubmit(e) {
|
||||||
|
const { networkLocations } = this.props;
|
||||||
|
const { value } = this.state;
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (!value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!value.match(/[^:]+:\d+/)) {
|
||||||
|
this.setState({
|
||||||
|
errorHostValue: value,
|
||||||
|
errorMessageId: "about-debugging-network-location-form-invalid",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (networkLocations.includes(value)) {
|
||||||
|
this.setState({
|
||||||
|
errorHostValue: value,
|
||||||
|
errorMessageId: "about-debugging-network-location-form-duplicate",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.props.dispatch(Actions.addNetworkLocation(value));
|
||||||
|
this.setState({ errorHostValue: null, errorMessageId: null, value: "" });
|
||||||
|
}
|
||||||
|
|
||||||
|
renderError() {
|
||||||
|
const { errorHostValue, errorMessageId } = this.state;
|
||||||
|
|
||||||
|
if (!errorMessageId) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return Message(
|
||||||
|
{
|
||||||
|
className: "connect-page__network-form__error-message",
|
||||||
|
level: MESSAGE_LEVEL.ERROR,
|
||||||
|
},
|
||||||
|
Localized(
|
||||||
|
{
|
||||||
|
id: errorMessageId,
|
||||||
|
"$host-value": errorHostValue,
|
||||||
|
},
|
||||||
|
dom.p({}, errorMessageId)
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return dom.form(
|
return dom.form(
|
||||||
{
|
{
|
||||||
className: "connect-page__network-form",
|
className: "connect-page__network-form",
|
||||||
onSubmit: (e) => {
|
onSubmit: (e) => this.onSubmit(e),
|
||||||
const { value } = this.state;
|
|
||||||
if (value) {
|
|
||||||
this.props.dispatch(Actions.addNetworkLocation(value));
|
|
||||||
this.setState({ value: "" });
|
|
||||||
}
|
|
||||||
e.preventDefault();
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
this.renderError(),
|
||||||
Localized(
|
Localized(
|
||||||
{
|
{
|
||||||
id: "about-debugging-network-locations-host-input-label",
|
id: "about-debugging-network-locations-host-input-label",
|
||||||
@ -72,7 +125,7 @@ class NetworkLocationsForm extends PureComponent {
|
|||||||
},
|
},
|
||||||
"Add"
|
"Add"
|
||||||
)
|
)
|
||||||
)
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -218,6 +218,14 @@ about-debugging-network-locations-host-input-label = Host
|
|||||||
# Clicking on it removes the network location from the list.
|
# Clicking on it removes the network location from the list.
|
||||||
about-debugging-network-locations-remove-button = Remove
|
about-debugging-network-locations-remove-button = Remove
|
||||||
|
|
||||||
|
# Text used as error message if the format of the input value was invalid in the network locations form of the Setup page.
|
||||||
|
# { $host-value } is the input value submitted by the user in the network locations form
|
||||||
|
about-debugging-network-location-form-invalid = Invalid host "{ $host-value }". The expected format is "hostname:portnumber".
|
||||||
|
|
||||||
|
# Text used as error message if the input value was already registered in the network locations form of the Setup page.
|
||||||
|
# { $host-value } is the input value submitted by the user in the network locations form
|
||||||
|
about-debugging-network-location-form-duplicate = The host "{ $host-value }" is already registered
|
||||||
|
|
||||||
# This string is displayed as a label of the button that pushes a test payload
|
# This string is displayed as a label of the button that pushes a test payload
|
||||||
# to a service worker.
|
# to a service worker.
|
||||||
# Notes, this relates to the "Push" API, which is normally not localized so it is
|
# Notes, this relates to the "Push" API, which is normally not localized so it is
|
||||||
|
Loading…
Reference in New Issue
Block a user