HTTPFetchView.jsx 4.32 KB
Newer Older
1
import React, { PureComponent } from 'react'
2
import {DropdownButton, Navbar, Nav, NavItem, NavDropdown, MenuItem, Glyphicon, Jumbotron, Button} from 'react-bootstrap'
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
import {Row, Col, Collapse, FormControl, FormGroup, ControlLabel, HelpBlock, PanelGroup, Panel} from 'react-bootstrap'
import FontAwesome from 'react-fontawesome'

import HostnameController from '../containers/HostnameController'
import ServerConfigController from '../containers/ServerConfigController'
import WhiteBox from './WhiteBox'


import moment from 'moment'
import 'moment/locale/nb';
// import 'moment/locale/en';

moment.locale("en");


export function expiresText(expires) {
  var expiresM = moment.unix(expires)
  return expiresM.fromNow()
}

class Component extends PureComponent {

25 26 27 28 29 30 31
  constructor(props) {
    super(props)
    this.state = {
      customEndpoint: ""
    }
  }

32 33
  updateAPIendpoint(e) {
    this.setState({customEndpoint: e.target.value})
34 35 36
  }

  fetchUserinfo() {
37 38 39
    let endpoint = this.props.serverConfig.userinfo_endpoint;
    console.error("Get userinfo from ", endpoint)
    this.props.httpRequestStart(endpoint)
40 41 42
  }

  fetchCustom() {
43 44 45
    let endpoint = this.state.customEndpoint
    console.error("Get data from ", endpoint)
    this.props.httpRequestStart(endpoint)
46 47
  }

48 49 50 51 52 53 54 55
  preselect(key, event) {
    console.log("Key", key, "event", event)
    this.setState({customEndpoint: key})
  }

  renderDropdownButton() {
    const i = "drpdwn"
    const title = "Load preset URL"
56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
    console.log("PROPOS", this.props)
    if (this.props.serverConfig && this.props.serverConfig.authorization_endpoint && this.props.serverConfig.authorization_endpoint === 'https://auth.dataporten.no/oauth/authorization') {
      let links = []
      if (this.props.serverConfig.userinfo_endpoint) {
        links.push({
          url: this.props.serverConfig.userinfo_endpoint,
          title: "Userinfo endpoint "
        })
      }
      const cntrl = /^gk_([^_]+)$/i
      this.props.token.scopes.forEach((scope) => {
        if (scope === 'groups') {
          links.push({
            url: "https://groups-api.dataporten.no/groups/me/groups",
            title: "Dataporten groups API: My groups"
          })
        }
        let res = cntrl.exec(scope)
        if (res) {
          links.push({
            url: "https://" + res[1] + ".dataporten-api.no/",
            title: "Dataporten APIGK " + res[1]
          })
          console.log(res)
        }
      })
      let menuitems = links.map((link) => {
        return (
          <MenuItem key={link.url} eventKey={link.url}>{link.title}</MenuItem>
        )
      })

      return (
        <DropdownButton bsStyle="default" title={title} key={i} id={`dropdown-basic-${i}`} onSelect={this.preselect.bind(this)}>
          {menuitems}
        </DropdownButton>
      );
    }
    return null
95 96
  }

97 98 99 100
  render() {
    console.error("Component", this.props)

    if (!this.props.token) {
101
      return null
102 103 104 105
    }


    let userinfo = null
106 107 108 109 110 111 112 113 114 115
    // if (this.props.serverConfig.userinfo_endpoint) {
    //   userinfo = (
    //     <div>
    //       <p>Fetch userinfo from <code>{this.props.serverConfig.userinfo_endpoint}</code></p>
    //       <Button onClick={this.fetchUserinfo.bind(this)} bsStyle="default">
    //         <FontAwesome name='arrow-circle-o-right' /> Get userinfo
    //       </Button>
    //     </div>
    //   )
    // }
116

117 118


119 120 121 122 123 124
    return (
      <Panel header="HTTP Client using OAuth Access Token" eventKey="1" collapsible={true} expanded={true}>

        {userinfo}

        <div>
125 126
          <p>Fetch data from</p>
          {this.renderDropdownButton()}
127 128 129 130 131 132 133 134
          <FormGroup
            className="gutter"
            controlId="formBasicText"
          >
            <FormControl
              type="text"
              bsSize="large"
              placeholder="http://httpjs.net/foo"
135
              value={this.state.customEndpoint}
136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153
              onChange={this.updateAPIendpoint.bind(this)}
            />
            <HelpBlock>Fill out the hostname of your OAuth server. Will only work if your OAuth server support OpenID Connect Discovery. If not, please enter configuration manually.</HelpBlock>
          </FormGroup>

          <Button onClick={this.fetchCustom.bind(this)} bsStyle="default">
            <FontAwesome name='arrow-circle-o-right' /> Perform HTTP call
          </Button>
        </div>

      </Panel>
    )
  }


}

export default Component