ServerConfigInput.jsx 3.28 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14
import React, { PureComponent } from 'react'
import {Alert, InputGroup, Navbar, Nav, NavItem, NavDropdown, MenuItem, Glyphicon, Jumbotron, Button} from 'react-bootstrap'
import {Panel, Row, Col, Collapse, FormControl, FormGroup, ControlLabel, HelpBlock} from 'react-bootstrap'
import FontAwesome from 'react-fontawesome'

import WhiteBox from './WhiteBox'

class Component extends PureComponent {

  constructor(props) {
    super(props)
    console.log("--- props", this.props)
    this.state = {
      clientId: "6233aedf-f08a-4112-9a1b-f33c3cd9b396",
Andreas Åkre Solberg's avatar
Andreas Åkre Solberg committed
15 16
      clientSecret: "af85a0f0-2c68-421d-8228-a6c83628de19",
      redirectURL: "http://localhost:8080/callback"
17 18 19 20
    }
  }

  authenticateStart() {
Andreas Åkre Solberg's avatar
Andreas Åkre Solberg committed
21

22
    let config = Object.assign({}, this.props.serverConfig, this.state)
23
    console.error("Authenticate", config, this.props.serverConfig, this.state)
24 25 26
    this.props.authenticateStart(config)
  }

27 28 29 30
  logoutStart() {
    this.props.logoutStart()
  }

31 32 33 34 35 36 37 38 39 40
  updateFieldHandler(field) {
    return (e) => {
      this.setState({
        [field]: e.target.value
      })
    }
  }


  render() {
41
    console.log("X This props", this.props)
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
    console.log("X This state", this.state)

    let authorizationEndpoint = ''
    if (this.state.authorizationEndpoint) {
      authorizationEndpoint = this.state.authorizationEndpoint
    } else if (this.props.serverConfig) {
      authorizationEndpoint = this.props.serverConfig.authorization_endpoint
    }

    let tokenEndpoint = ''
    if (this.state.tokenEndpoint) {
      tokenEndpoint = this.state.tokenEndpoint
    } else if (this.props.serverConfig) {
      tokenEndpoint = this.props.serverConfig.token_endpoint
    }


    let expanded = !!this.props.serverConfig
    return (
      <Panel header="OAuth Server Configuration" eventKey="2" collapsible={true} expanded={expanded}>
        <form>
          <h4>OAuth Authorization endpoint</h4>
          <FormGroup>
              <FormControl type="text" value={authorizationEndpoint} onChange={this.updateFieldHandler.bind(this)("authorizationEndpoint")} />
          </FormGroup>

          <h4>OAuth Token endpoint</h4>
          <FormGroup>
              <FormControl type="text" value={tokenEndpoint} onChange={this.updateFieldHandler.bind(this)("tokenEndpoint")} />
          </FormGroup>

          <h4>Client ID</h4>
          <FormGroup>
              <FormControl type="text" bsSize="large" value={this.state.clientId} onChange={this.updateFieldHandler.bind(this)("clientId")} />
          </FormGroup>

          <h4>Client secret</h4>
          <FormGroup>
              <FormControl type="text" bsSize="large" value={this.state.clientSecret} onChange={this.updateFieldHandler.bind(this)("clientSecret")} />
          </FormGroup>

          <h4>Redirect URI</h4>
          <p>When you configure your client, please register the following redirect uri:</p>
Andreas Åkre Solberg's avatar
Andreas Åkre Solberg committed
85
          <p><code>{this.state.redirectURL}</code></p>
86 87 88 89 90

          <div>
            <Button onClick={this.authenticateStart.bind(this)} bsStyle="primary">
              <FontAwesome name='sign-in' /> Authenticate
            </Button>
91 92 93 94
            &nbsp;
            <Button onClick={this.logoutStart.bind(this)} bsStyle="danger">
              <FontAwesome name='sign-out' /> Wipe token
            </Button>
95 96 97 98 99 100 101 102 103
          </div>
        </form>
      </Panel>
    )
  }

}

export default Component