HTTPFetchView.jsx 2.62 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
import React, { PureComponent } from 'react'
import {Navbar, Nav, NavItem, NavDropdown, MenuItem, Glyphicon, Jumbotron, Button} from 'react-bootstrap'
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 {

Andreas Åkre Solberg's avatar
Andreas Åkre Solberg committed
25 26
  updateAPIendpoint(e) {
    this.setState({customEndpoint: e.target.value})
27 28 29
  }

  fetchUserinfo() {
30 31 32
    let endpoint = this.props.serverConfig.userinfo_endpoint;
    console.error("Get userinfo from ", endpoint)
    this.props.httpRequestStart(endpoint)
33 34 35
  }

  fetchCustom() {
Andreas Åkre Solberg's avatar
Andreas Åkre Solberg committed
36 37 38
    let endpoint = this.state.customEndpoint
    console.error("Get data from ", endpoint)
    this.props.httpRequestStart(endpoint)
39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 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 95 96
  }

  render() {
    console.error("Component", this.props)

    if (!this.props.token) {
      return (
        <p>Not ready. No token found.</p>
      )
    }



    let userinfo = null
    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>
      )
    }

    return (
      <Panel header="HTTP Client using OAuth Access Token" eventKey="1" collapsible={true} expanded={true}>

        {userinfo}

        <div>
          <p>Fetch userinfo from</p>
          <FormGroup
            className="gutter"
            controlId="formBasicText"
          >
            <FormControl
              type="text"
              bsSize="large"
              placeholder="http://httpjs.net/foo"
              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