ServerConfigInput.jsx 5.3 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11
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)
12 13 14 15 16 17 18 19 20 21 22 23 24 25
    // console.log("--- props", this.props)

    // With these Location object properties you can access all of these URL components
    //
    // hash - Sets or returns the anchor portion of a URL.
    // host - Sets or returns the hostname and port of a URL.
    // hostname - Sets or returns the hostname of a URL.
    // href - Sets or returns the entire URL.
    // pathname - Sets or returns the path name of a URL.
    // port - Sets or returns the port number the server uses for a URL.
    // protocol - Sets or returns the protocol of a URL.
    // search - Sets or returns the query portion of a URL

    var currentURL = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '' ) + '/callback'
Andreas Åkre Solberg's avatar
Andreas Åkre Solberg committed
26
    // console.log("currentURL", currentURL)
27

28
    this.state = {
29 30
      // clientId: "6233aedf-f08a-4112-9a1b-f33c3cd9b396",
      // clientSecret: "",
31
      redirectURL: currentURL,
32 33
      // scopes: "",
      // response_type: "token"
34 35 36 37
    }
  }

  authenticateStart() {
38

39
    let config = Object.assign({}, this.props.serverConfig, this.state)
40
    // console.error("Authenticate", config, this.props.serverConfig, this.state)
41 42 43
    this.props.authenticateStart(config)
  }

44 45 46 47
  logoutStart() {
    this.props.logoutStart()
  }

48 49
  updateFieldHandler(field) {
    return (e) => {
50
      const upd = {
51
        [field]: e.target.value
52 53 54
      }
      this.props.updateConfig(upd)
      // this.setState(upd)
55 56 57 58 59
    }
  }


  render() {
60 61
    // console.log("X This props", this.props)
    // console.log("X This state", this.state)
62 63

    let authorizationEndpoint = ''
64
    if (this.props.serverConfig) {
65 66 67 68
      authorizationEndpoint = this.props.serverConfig.authorization_endpoint
    }

    let tokenEndpoint = ''
69
    if (this.props.serverConfig) {
70 71 72
      tokenEndpoint = this.props.serverConfig.token_endpoint
    }

73
    let userinfoEndpoint = ''
74
    if (this.props.serverConfig) {
75 76 77
      userinfoEndpoint = this.props.serverConfig.userinfo_endpoint
    }

78 79 80 81 82 83 84 85 86 87 88 89
    let clientId = ''
    if (this.props.serverConfig) {
      clientId = this.props.serverConfig.client_id
    }

    let clientSecret = ''

    let scopes = ''
    if (this.props.serverConfig) {
      scopes = this.props.serverConfig.scopes
    }

90

91
    let expanded = this.props.expanded && !!this.props.serverConfig
92
    return (
93
      <Panel header="OAuth Server Configuration" eventKey="2" collapsible={true} defaultExpanded={expanded}>
94 95 96
        <form>
          <h4>OAuth Authorization endpoint</h4>
          <FormGroup>
97
              <FormControl id="inputAuthorization" type="text" value={authorizationEndpoint} onChange={this.updateFieldHandler.bind(this)("authorization_endpoint")} />
98 99 100 101
          </FormGroup>

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

105 106
          <h4>Userinfo Endpoint</h4>
          <FormGroup>
107
              <FormControl id="inputUserinfo" type="text" value={userinfoEndpoint} onChange={this.updateFieldHandler.bind(this)("userinfo_endpoint")} />
108 109
          </FormGroup>

110 111
          <h4>Client ID</h4>
          <FormGroup>
112
              <FormControl id="inputClientid" type="text" bsSize="large" value={clientId} onChange={this.updateFieldHandler.bind(this)("client_id")} />
113 114
          </FormGroup>

115
          {/*
116 117
          <h4>Client secret</h4>
          <FormGroup>
118
              <FormControl type="text" bsSize="large" value={clientSecret} onChange={this.updateFieldHandler.bind(this)("client_secret")} />
119
          </FormGroup>
120
*/}
121 122
          <h4>Scopes</h4>
          <FormGroup>
123
              <FormControl type="text" bsSize="large" value={scopes} onChange={this.updateFieldHandler.bind(this)("scopes")} />
124 125 126 127 128 129 130 131 132 133
          </FormGroup>

          <FormGroup controlId="response_type">
            <ControlLabel>Response Type</ControlLabel>
            <FormControl componentClass="select" placeholder="select" value={this.state.response_type} onChange={this.updateFieldHandler.bind(this)("response_type")}>
              <option value="token">OAuth Implicit Grant (token)</option>
              <option value="id_token token">OpenID Connect Implicit Flow (id_token token)</option>
            </FormControl>
          </FormGroup>

134 135
          <h4>Redirect URI</h4>
          <p>When you configure your client, please register the following redirect uri:</p>
136
          <p><code>{this.state.redirectURL}</code></p>
137 138

          <div>
139
            <Button id="btnAuthenticate" onClick={this.authenticateStart.bind(this)} bsStyle="primary">
140 141
              <FontAwesome name='sign-in' /> Authenticate
            </Button>
142 143 144 145
            &nbsp;
            <Button onClick={this.logoutStart.bind(this)} bsStyle="danger">
              <FontAwesome name='sign-out' /> Wipe token
            </Button>
146 147 148 149 150 151 152 153 154
          </div>
        </form>
      </Panel>
    )
  }

}

export default Component