repertory-ui/src/containers/AddEditHost/AddEditHost.js

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 { addEditHostAction } from '../../redux/actions/host_actions';
import { connect } from 'react-redux';
import { createDismissDisplay } from '../../utils.jsx';
import { notifyError } from '../../redux/actions/error_actions';

class AddEditHost extends Component {
  state = {
    AgentString: '',
    ApiPassword: '',
    ApiPort: 443,
    AuthPassword: '',
    AuthURL: '',
    AuthUser: '',
    HostNameOrIp: '',
    Path: '',
    Protocol: 'https',
    TimeoutMs: 60000,
  };

  componentDidMount() {
    if (this.props.HostData) {
      this.setState({ ...this.state, ...this.props.HostData });
    }
  }

  handleSave = () => {
    if (this.state.HostNameOrIp.trim().length == 0) {
      this.props.notifyError('Host / IP cannot be empty');
      return;
    }

    if (this.state.HostNameOrIp.trim().indexOf('/') >= 0) {
      this.props.notifyError(`Host / IP cannot be contain '/'`);
      return;
    }

    if (this.state.HostNameOrIp.trim().indexOf(':') >= 0) {
      this.props.notifyError(`Host / IP cannot be contain ':'`);
      return;
    }

    if (
      this.props.HostList.find(
        (i) =>
          (i.HostNameOrIp || '').trim() === this.state.HostNameOrIp &&
          i.Protocol === this.state.Protocol &&
          i.ApiPort == this.state.ApiPort
      )
    ) {
      this.props.notifyError(`Portal already exists`);
      return;
    }

    this.props.completeAddEditHost(this.state);
  };

  render() {
    return (
      <Box dxDark 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: parseInt(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: parseInt(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,
    HostList: state.host.HostList,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    Close: () => dispatch(addEditHostAction.complete(false)),
    completeAddEditHost: (host_data) => dispatch(addEditHostAction.complete(true, { host_data })),
    notifyError: (msg) => dispatch(notifyError(msg)),
  };
};

AddEditHost.propTypes = {
  Close: PropTypes.func.isRequired,
  completeAddEditHost: PropTypes.func.isRequired,
  HostData: PropTypes.object,
  HostList: PropTypes.array.isRequired,
  notifyError: PropTypes.func.isRequired,
};

export default connect(mapStateToProps, mapDispatchToProps)(AddEditHost);