BlockStorage/repertory-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Initial Skynet premium portal suppport

Browse Source
This commit is contained in:
sgraves76
2021-05-01 00:41:25 -05:00
parent c5ef4215e1
commit a4c3dbdb94
22 changed files with 631 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
src/containers/AddEditHost/AddEditHost.js Normal file
View File

@@ -0,0 +1,232 @@
import React from 'react';
import Box from '../../components/UI/Box/Box';
import Button from '../../components/UI/Button/Button';
import DropDown from '../../components/UI/DropDown/DropDown';
import PropTypes from 'prop-types';
import Text from '../../components/UI/Text/Text';
import { Component } from 'react';
import { connect } from 'react-redux';
import { createDismissDisplay } from '../../utils.jsx';
import {
addEditHost,
completeAddEditHost,
} from '../../redux/actions/host_actions';
class AddEditHost extends Component {
state = {
AgentString: '',
ApiPassword: '',
ApiPort: 443,
AuthPassword: '',
AuthURL: '',
AuthUser: '',
HostNameOrIp: '',
Path: '',
Protocol: 'https',
TimeoutMs: 60000,
};
originalState = {};
componentDidMount() {
if (this.props.HostData) {
const state = { ...this.state, ...this.props.HostData };
this.originalState = { ...state };
this.setState(state);
}
}
handleSave = () => {
this.props.completeAddEditHost(this.state);
};
render() {
return (
<Box dxStyle={{ width: '430px', height: 'auto', padding: '5px' }}>
{createDismissDisplay(this.props.Close)}
<div
style={{
width: '100%',
height: 'auto',
paddingBottom: '5px',
boxSizing: 'border-box',
}}>
<h1
style={{
width: '100%',
textAlign: 'center',
color: 'var(--text_color_error)',
}}>
Portal Settings
</h1>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<Text text={'Host / IP'} textAlign={'left'} type={'Heading2'} />
</div>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<input
onChange={(e) =>
this.setState({ HostNameOrIp: e.target.value.trim() })
}
className={'ConfigurationItemInput'}
style={{ width: '100%' }}
type={'text'}
value={this.state.HostNameOrIp}
/>
</div>
<div style={{ height: 'var(--default_spacing)' }} />
<div style={{ display: 'flex', flexDirection: 'row' }}>
<Text text={'Protocol'} textAlign={'left'} type={'Heading2'} />
<div style={{ paddingLeft: 'var(--default_spacing)' }} />
<Text text={'Port'} textAlign={'left'} type={'Heading2'} />
<div style={{ paddingLeft: 'var(--default_spacing)' }} />
<Text text={'Timeout (ms)'} textAlign={'left'} type={'Heading2'} />
</div>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<DropDown
changed={(e) => this.setState({ Protocol: e.target.value })}
items={['https', 'http']}
selected={this.state.Protocol}
/>
<div style={{ width: 'var(--default_spacing)' }} />
<div style={{ width: 'var(--default_spacing)' }} />
<input
onChange={(e) => this.setState({ ApiPort: e.target.value })}
className={'ConfigurationItemInput'}
style={{ width: '100%' }}
type={'number'}
min={1}
max={65535}
value={this.state.ApiPort}
/>
<div style={{ width: 'var(--default_spacing)' }} />
<div style={{ width: 'var(--default_spacing)' }} />
<input
onChange={(e) => this.setState({ TimeoutMs: e.target.value })}
className={'ConfigurationItemInput'}
style={{ width: '100%' }}
type={'number'}
min={1000}
step={1000}
value={this.state.TimeoutMs}
/>
</div>
<div style={{ height: 'var(--default_spacing)' }} />
<div style={{ display: 'flex', flexDirection: 'row' }}>
<Text
text={'Agent String (optional)'}
textAlign={'left'}
type={'Heading2'}
/>
<div style={{ width: 'var(--default_spacing)' }} />
<Text
text={'API Key (optional)'}
textAlign={'left'}
type={'Heading2'}
/>
</div>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<input
onChange={(e) => this.setState({ AgentString: e.target.value })}
className={'ConfigurationItemInput'}
style={{ flex: '1' }}
type={'text'}
value={this.state.AgentString}
/>
<div style={{ width: 'var(--default_spacing)' }} />
<input
onChange={(e) => this.setState({ ApiPassword: e.target.value })}
className={'ConfigurationItemInput'}
style={{ flex: '1' }}
type={'text'}
value={this.state.ApiPassword}
/>
</div>
<div style={{ height: 'var(--default_spacing)' }} />
<div style={{ display: 'flex', flexDirection: 'row' }}>
<Text
text={'Authentication URL (premium)'}
textAlign={'left'}
type={'Heading2'}
/>
</div>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<input
onChange={(e) => this.setState({ AuthURL: e.target.value })}
className={'ConfigurationItemInput'}
type={'text'}
value={this.state.AuthURL}
/>
</div>
<div style={{ height: 'var(--default_spacing)' }} />
<div style={{ display: 'flex', flexDirection: 'row' }}>
<Text
text={'User Name (premium)'}
textAlign={'left'}
type={'Heading2'}
/>
<div style={{ width: 'var(--default_spacing)' }} />
<Text
text={'Password (premium)'}
textAlign={'left'}
type={'Heading2'}
/>
</div>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<input
onChange={(e) => this.setState({ AuthUser: e.target.value })}
className={'ConfigurationItemInput'}
style={{ flex: '1' }}
type={'text'}
value={this.state.AuthUser}
/>
<div style={{ width: 'var(--default_spacing)' }} />
<input
onChange={(e) => this.setState({ AuthPassword: e.target.value })}
className={'ConfigurationItemInput'}
style={{ flex: '1' }}
type={'text'}
value={this.state.AuthPassword}
/>
</div>
<div style={{ height: 'var(--default_spacing)' }} />
<p>
<b>
{'Portal URL: ' +
this.state.Protocol +
'://' +
this.state.HostNameOrIp +
((this.state.Protocol === 'http' && this.state.ApiPort != 80) ||
(this.state.Protocol === 'https' && this.state.ApiPort != 443)
? ':' + this.state.ApiPort.toString()
: '')}
</b>
</p>
<div style={{ height: 'var(--default_spacing)' }} />
</div>
<Button clicked={this.handleSave}>Save</Button>
</Box>
);
}
}
const mapStateToProps = (state) => {
return {
HostData: state.host.HostData,
};
};
const mapDispatchToProps = (dispatch) => {
return {
Close: () => dispatch(addEditHost(false)),
completeAddEditHost: (host_data) =>
dispatch(completeAddEditHost(true, host_data)),
};
};
AddEditHost.propTypes = {
Close: PropTypes.func.isRequired,
completeAddEditHost: PropTypes.func.isRequired,
HostData: PropTypes.object,
};
export default connect(mapStateToProps, mapDispatchToProps)(AddEditHost);