lbry-desktop/ui/component/settingCommentsServer/internal/input-radio-panel-addCommentServer.jsx
2022-02-03 10:59:10 -05:00

102 lines
3.4 KiB
JavaScript

// @flow
import React, { useState, useEffect } from 'react';
import Button from 'component/button';
import { Form, FormField } from 'component/common/form';
type Props = {
update: (CommentServerDetails) => void,
onCancel: (boolean) => void,
};
const VALID_IPADDRESS_REGEX = new RegExp(
'^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(\\.)){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$'
);
const VALID_HOSTNAME_REGEX = new RegExp(
'^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])(\\.))+([A-Za-z]|[A-Za-z][A-Za-z]*[A-Za-z])$'
);
const VALID_ENDPOINT_REGEX = new RegExp('^((\\/)([a-zA-Z0-9]+))+$');
const isValidServerString = (serverString) => {
const si = serverString.indexOf('/');
const pi = serverString.indexOf(':');
const path = si === -1 ? '' : serverString.slice(si);
const hostMaybePort = si === -1 ? serverString : serverString.slice(0, si);
const host = pi === -1 ? hostMaybePort : hostMaybePort.slice(0, pi);
const port = pi === -1 ? '' : hostMaybePort.slice(pi + 1);
const portInt = parseInt(port);
return (
(host === 'localhost' || VALID_IPADDRESS_REGEX.test(host) || VALID_HOSTNAME_REGEX.test(host)) &&
(!path || VALID_ENDPOINT_REGEX.test(path)) &&
// eslint-disable-next-line
(pi === -1 || (port && typeof portInt === 'number' && portInt === portInt))
); // NaN !== NaN
};
function ServerInputRow(props: Props) {
const { update, onCancel } = props;
const [nameString, setNameString] = useState('');
const [hostString, setHostString] = useState('');
const [useHttps, setUseHttps] = useState(true);
const getHostString = () => {
return `${useHttps ? 'https://' : 'http://'}${hostString}`;
};
const [validServerString, setValidServerString] = useState(false);
useEffect(() => {
setValidServerString(isValidServerString(hostString));
}, [hostString, validServerString, setValidServerString]);
function onSubmit() {
const updateValue = { url: getHostString(), name: nameString };
update(updateValue);
setHostString('');
setNameString('');
}
return (
<Form onSubmit={onSubmit}>
<div className="input-toggle-panel--input">
<FormField
type="text"
label={__('Name')}
placeholder={'My Server'}
value={nameString}
onChange={(e) => setNameString(e.target.value)}
/>
<div className="fieldset-group fieldset-group--smushed fieldset-group--disabled-prefix fieldset-group--row">
<div className={'fieldset-section'}>
<label htmlFor="serverUrl">{__('URL')}</label>
<div className="form-field__prefix">{`${useHttps ? 'https://' : 'http://'}`}</div>
</div>
<FormField
type="text"
placeholder={'code.freezepeach.fun'}
value={hostString}
onChange={(e) => setHostString(e.target.value)}
name={'serverUrl'}
/>
</div>
</div>
<div className="input-toggle-panel--input">
<FormField
label={'Use https'}
name="use_https"
type="checkbox"
checked={useHttps}
onChange={() => setUseHttps(!useHttps)}
/>
</div>
<div className="section__actions">
<Button type="submit" button="primary" label={__('Add')} disabled={!validServerString || !nameString} />
<Button type="button" button="link" onClick={() => onCancel(false)} label={__('Cancel')} />
</div>
</Form>
);
}
export default ServerInputRow;