HostnameInput.jsx 2.62 KB
Newer Older
1
import React, { PureComponent } from 'react'
2 3
import {Alert, Navbar, Nav, NavItem, NavDropdown, MenuItem, Glyphicon, Jumbotron, Button} from 'react-bootstrap'
import {Panel, Row, Col, Collapse, FormControl, FormGroup, ControlLabel, HelpBlock} from 'react-bootstrap'
Andreas Åkre Solberg's avatar
Andreas Åkre Solberg committed
4 5
import FontAwesome from 'react-fontawesome'

6

7
const defaultHost = "https://auth.dataporten.no"
Andreas Åkre Solberg's avatar
Andreas Åkre Solberg committed
8

9 10 11 12 13 14 15 16 17 18
class Component extends PureComponent {

  constructor(props) {
    super(props)
    this.state = {
      hostname: defaultHost
    }
  }

  discoveryStart(e) {
Andreas Åkre Solberg's avatar
Andreas Åkre Solberg committed
19 20
    // console.log("Setting hostname", this.state.hostname)
    // console.log(this.props)
21 22
    this.props.discoveryStart(this.state.hostname)
  }
Andreas Åkre Solberg's avatar
Andreas Åkre Solberg committed
23

24
  updateHostfield(e) {
Andreas Åkre Solberg's avatar
Andreas Åkre Solberg committed
25
    // console.log("Updating hostname to ", e.target.value)
26 27 28
    this.setState({hostname: e.target.value})
  }

29
  handleAlertDismiss() {
Andreas Åkre Solberg's avatar
Andreas Åkre Solberg committed
30
    // console.error("TODO: Dismiss alert.")
31 32 33 34 35
    // this.setState({hostname: e.target.value})
  }

  getErrorMessage() {
    if (this.props.serverError) {
Andreas Åkre Solberg's avatar
Andreas Åkre Solberg committed
36 37
      // console.log(typeof this.props.serverError)
      // console.error(this.props.serverError)
38 39 40 41 42 43 44 45 46 47 48 49 50 51
      return (
        <Alert bsStyle="danger" onDismiss={this.handleAlertDismiss}>
          <h4>Error performing OAuth Discovery</h4>
          <p>{this.props.serverError.toString()}</p>
          <p>
            <span> or </span>
            <Button onClick={this.handleAlertDismiss}>Hide error</Button>
          </p>
        </Alert>
      )
    }
    return null
  }

52
  render() {
53 54 55 56 57 58 59 60 61 62
    let errorMessage = null
    if (this.props.serverError) {
      errorMessage = (
        <div>
          <h2>Error performing OAuth Discovery</h2>
          <p>{this.props.serverError}</p>
        </div>
      )
    }

63
    return (
64
      <Panel header="OAuth Service Discovery" eventKey="1" collapsible={true} defaultExpanded={true}>
65 66 67 68 69 70 71 72
        <FormGroup
          className="gutter"
          controlId="formBasicText"
        >
          <h4>OAuth Server hostname</h4>
          <FormControl
            type="text"
            bsSize="large"
73
            defaultValue={this.state.hostname}
74 75 76
            placeholder="https://auth.yourplatform.org/"
            onChange={this.updateHostfield.bind(this)}
          />
77
          <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>
78
        </FormGroup>
79 80 81 82 83 84 85
        {this.getErrorMessage()}
        <div>
          <Button onClick={this.discoveryStart.bind(this)} bsStyle="primary">
            <FontAwesome name='magic' />  Discovery OAuth Provider
          </Button>
        </div>
      </Panel>
86 87 88 89
    )
  }

}
Andreas Åkre Solberg's avatar
Andreas Åkre Solberg committed
90 91

export default Component