ServerConfigInput.jsx 3.73 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
    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
    }

58 59 60 61 62 63 64
    let userinfoEndpoint = ''
    if (this.state.userinfoEndpoint) {
      userinfoEndpoint = this.state.userinfoEndpoint
    } else if (this.props.serverConfig) {
      userinfoEndpoint = this.props.serverConfig.userinfo_endpoint
    }

65 66 67 68 69 70 71 72 73 74 75 76 77 78 79

    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>

80 81 82 83 84
          <h4>Userinfo Endpoint</h4>
          <FormGroup>
              <FormControl type="text" value={userinfoEndpoint} onChange={this.updateFieldHandler.bind(this)("userinfo_endpoint")} />
          </FormGroup>

85 86 87 88 89 90 91 92 93 94 95 96
          <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
97
          <p><code>{this.state.redirectURL}</code></p>
98 99 100 101 102

          <div>
            <Button onClick={this.authenticateStart.bind(this)} bsStyle="primary">
              <FontAwesome name='sign-in' /> Authenticate
            </Button>
103 104 105 106
            &nbsp;
            <Button onClick={this.logoutStart.bind(this)} bsStyle="danger">
              <FontAwesome name='sign-out' /> Wipe token
            </Button>
107 108 109 110 111 112 113 114 115
          </div>
        </form>
      </Panel>
    )
  }

}

export default Component