Also validate on constructor

This commit is contained in:
orangemug 2019-10-27 17:27:50 +00:00
parent a51442921a
commit f0371b41b1

View file

@ -3,6 +3,34 @@ import PropTypes from 'prop-types'
import StringInput from './StringInput'
import SmallError from '../util/SmallError'
function validate (url) {
let error;
const getProtocol = (url) => {
try {
const urlObj = new URL(url);
return urlObj.protocol;
}
catch (err) {
return undefined;
}
};
const protocol = getProtocol(url);
if (
protocol &&
protocol === "http:" &&
window.location.protocol === "https:"
) {
error = (
<SmallError>
CORs policy won&apos;t allow fetching resources served over http from https, use a <code>https://</code> domain
</SmallError>
);
}
return error;
}
class UrlInput extends React.Component {
static propTypes = {
"data-wd-key": PropTypes.string,
@ -14,35 +42,17 @@ class UrlInput extends React.Component {
required: PropTypes.bool,
}
state = {
error: null,
constructor (props) {
super(props);
this.state = {
error: validate(props.value)
};
}
onInput = (url) => {
let error;
const getProtocol = (url) => {
try {
const urlObj = new URL(url);
return urlObj.protocol;
}
catch (err) {
return undefined;
}
};
const protocol = getProtocol(url);
if (
protocol &&
protocol === "http:" &&
window.location.protocol === "https:"
) {
error = (
<SmallError>
CORs policy won&apos;t allow fetching resources served over http from https, use a <code>https://</code> domain
</SmallError>
);
}
this.setState({error});
this.setState({
error: validate(url)
});
}
render () {