118 lines
3.9 KiB
JavaScript
118 lines
3.9 KiB
JavaScript
import React from 'react';
|
|
import {Component} from 'react';
|
|
import './AddRemoteMount.css';
|
|
import {connect} from 'react-redux';
|
|
import Button from '../../components/UI/Button/Button';
|
|
import Box from '../../components/UI/Box/Box';
|
|
import Text from '../../components/UI/Text/Text';
|
|
import {notifyError} from '../../redux/actions/error_actions';
|
|
import {addRemoteMount} from '../../redux/actions/mount_actions';
|
|
import {createModalConditionally} from '../../utils';
|
|
|
|
const mapStateToProps = state => {
|
|
return {
|
|
RemoteMounts: state.mounts.RemoteMounts,
|
|
};
|
|
};
|
|
|
|
const mapDispatchToProps = dispatch => {
|
|
return {
|
|
addRemoteMount: (hostNameOrIp, port, token) => dispatch(addRemoteMount(hostNameOrIp, port, token)),
|
|
notifyError: (msg, critical, callback) => dispatch(notifyError(msg, critical, callback)),
|
|
}
|
|
};
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(class extends Component {
|
|
state = {
|
|
Display: false,
|
|
HostNameOrIp: '',
|
|
Port: 20000,
|
|
Token: '',
|
|
};
|
|
|
|
addRemoteMount = () => {
|
|
if (this.state.HostNameOrIp.length === 0) {
|
|
this.props.notifyError('Hostname or IP cannot be empty.');
|
|
} else {
|
|
const provider = 'Remote' + this.state.HostNameOrIp + ':' + this.state.Port;
|
|
if (this.props.RemoteMounts.includes(provider)) {
|
|
this.props.notifyError('Remote host already exists');
|
|
} else {
|
|
this.setState({
|
|
Display: false
|
|
}, () => {
|
|
this.props.addRemoteMount(this.state.HostNameOrIp, this.state.Port, this.state.Token);
|
|
this.setState({
|
|
HostNameOrIp: '',
|
|
Port: 20000,
|
|
Token: '',
|
|
});
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
handleAddRemoteMount = () => {
|
|
this.setState({
|
|
Display: true,
|
|
});
|
|
};
|
|
|
|
render() {
|
|
const displayAdd = createModalConditionally(this.state.Display, (
|
|
<Box dxDark
|
|
dxStyle={{width: 'auto', height: 'auto', padding: 'var(--default_spacing)'}}>
|
|
<h1 style={{color: 'var(--text_color_error)', textAlign: 'center', paddingBottom: 'var(--default_spacing)'}}>Add Remote Mount</h1>
|
|
<Text text={'Hostname or IP'}
|
|
textAlign={'left'}
|
|
type={'Heading2'}/>
|
|
<input onChange={e => this.setState({HostNameOrIp: e.target.value.trim()})}
|
|
className={'ConfigurationItemInput'}
|
|
type={'text'}
|
|
value={this.state.HostNameOrIp}/>
|
|
<div style={{paddingTop: 'var(--default_spacing)'}}/>
|
|
<Text text={'Port'}
|
|
textAlign={'left'}
|
|
type={'Heading2'}/>
|
|
<input max={65535}
|
|
min={1025}
|
|
onChange={e => this.setState({Port: e.target.value})}
|
|
className={'ConfigurationItemInput'}
|
|
type={'number'}
|
|
value={this.state.Port}/>
|
|
<div style={{paddingTop: 'var(--default_spacing)'}}/>
|
|
<Text text={'Remote Token'}
|
|
textAlign={'left'}
|
|
type={'Heading2'}/>
|
|
<input onChange={e => this.setState({Token: e.target.value})}
|
|
className={'ConfigurationItemInput'}
|
|
type={'text'}
|
|
value={this.state.Token}/>
|
|
<div style={{paddingTop: 'var(--default_spacing)'}}/>
|
|
<table cellSpacing={1}
|
|
width="100%">
|
|
<tbody>
|
|
<tr>
|
|
<td width="50%">
|
|
<Button buttonStyles={{width: '100%'}}
|
|
clicked={() => this.addRemoteMount()}>OK</Button>
|
|
</td>
|
|
<td width="50%">
|
|
<Button buttonStyles={{width: '100%'}}
|
|
clicked={() => this.setState({Display: false})}>Cancel</Button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</Box>
|
|
));
|
|
|
|
return (
|
|
<div className={'AddRemoteMount'}>
|
|
{displayAdd}
|
|
<Button clicked={this.handleAddRemoteMount}>Add Remote Mount</Button>
|
|
</div>
|
|
);
|
|
}
|
|
});
|