Commit 9ace4d9c authored by Glenn Aarøen's avatar Glenn Aarøen

change panel collapse behaviour

parent 7e595305
Pipeline #16686 passed with stages
in 4 minutes and 52 seconds
......@@ -6,6 +6,11 @@ import FontAwesome from 'react-fontawesome'
const defaultHost = "https://auth.dataporten.no"
const fontStyling = {
fontWeight: 'bold',
fontFamily: 'colfaxBold,Helvetica,Arial,sans-serif'
}
class Component extends PureComponent {
constructor(props) {
......@@ -72,27 +77,35 @@ class Component extends PureComponent {
console.log("Expanded discovery", expanded, this.state.overrideToggle, this.props.expanded)
console.log("STATE", this.state)
return (
<Panel onClick={this.actTogglePanel} header="OpenID Connect Discovery" eventKey="1" collapsible={true} expanded={expanded}>
<FormGroup
className="gutter"
controlId="formBasicText"
>
<h4>OAuth Server hostname</h4>
<FormControl
type="text"
bsSize="large"
defaultValue={this.state.hostname}
placeholder="https://auth.yourplatform.org/"
onChange={this.updateHostfield.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>
{this.getErrorMessage()}
<div>
<Button onClick={this.discoveryStart.bind(this)} bsStyle="primary">
<FontAwesome name='magic' /> Discovery OAuth Provider
</Button>
</div>
<Panel eventKey="1" collapsible={true} expanded={expanded}>
<Panel.Heading onClick={this.actTogglePanel} className={"panel-title"} style={fontStyling}>
OpenID Connect Discovery
</Panel.Heading>
<Panel.Collapse>
<Panel.Body>
<FormGroup
className="gutter"
controlId="formBasicText"
>
<h4>OAuth Server hostname</h4>
<FormControl
type="text"
bsSize="large"
defaultValue={this.state.hostname}
placeholder="https://auth.yourplatform.org/"
onChange={this.updateHostfield.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>
{this.getErrorMessage()}
<div>
<Button onClick={this.discoveryStart.bind(this)} bsStyle="primary">
<FontAwesome name='magic'/> Discovery OAuth Provider
</Button>
</div>
</Panel.Body>
</Panel.Collapse>
</Panel>
)
}
......
import React, { PureComponent } from 'react'
import {Alert, InputGroup, Navbar, Nav, NavItem, NavDropdown, MenuItem, Glyphicon, Jumbotron, Button} from 'react-bootstrap'
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'
const fontStyling = {
fontWeight: 'bold',
fontFamily: 'colfaxBold,Helvetica,Arial,sans-serif'
}
class Component extends PureComponent {
constructor(props) {
......@@ -104,69 +109,81 @@ class Component extends PureComponent {
let expanded = (this.state.overrideToggle === true) || this.props.expanded
return (
<Panel onClick={this.actTogglePanel} header="Configuration" eventKey="2" collapsible={true} expanded={expanded}>
<form>
<h3>Server configuration</h3>
<h4>OAuth Authorization endpoint</h4>
<FormGroup>
<FormControl id="inputAuthorization" type="text" value={authorizationEndpoint} onChange={this.updateFieldHandler.bind(this)("authorization_endpoint")} />
</FormGroup>
<h4>OAuth Token endpoint</h4>
<FormGroup>
<FormControl id="inputToken" type="text" value={tokenEndpoint} onChange={this.updateFieldHandler.bind(this)("token_endpoint")} />
</FormGroup>
<h4>Userinfo Endpoint</h4>
<FormGroup>
<FormControl id="inputUserinfo" type="text" value={userinfoEndpoint} onChange={this.updateFieldHandler.bind(this)("userinfo_endpoint")} />
</FormGroup>
<h3>Client configuration</h3>
<h4>Client ID</h4>
<FormGroup>
<FormControl id="inputClientid" type="text" bsSize="large" value={clientId} onChange={this.updateFieldHandler.bind(this)("client_id")} />
</FormGroup>
{/*
<Panel eventKey="2" collapsible={true} expanded={expanded}>
<Panel.Heading onClick={this.actTogglePanel} className={"panel-title"} style={fontStyling}>
Configuration
</Panel.Heading>
<Panel.Collapse>
<Panel.Body>
<form>
<h3>Server configuration</h3>
<h4>OAuth Authorization endpoint</h4>
<FormGroup>
<FormControl id="inputAuthorization" type="text" value={authorizationEndpoint}
onChange={this.updateFieldHandler.bind(this)("authorization_endpoint")}/>
</FormGroup>
<h4>OAuth Token endpoint</h4>
<FormGroup>
<FormControl id="inputToken" type="text" value={tokenEndpoint}
onChange={this.updateFieldHandler.bind(this)("token_endpoint")}/>
</FormGroup>
<h4>Userinfo Endpoint</h4>
<FormGroup>
<FormControl id="inputUserinfo" type="text" value={userinfoEndpoint}
onChange={this.updateFieldHandler.bind(this)("userinfo_endpoint")}/>
</FormGroup>
<h3>Client configuration</h3>
<h4>Client ID</h4>
<FormGroup>
<FormControl id="inputClientid" type="text" bsSize="large" value={clientId}
onChange={this.updateFieldHandler.bind(this)("client_id")}/>
</FormGroup>
{/*
<h4>Client secret</h4>
<FormGroup>
<FormControl type="text" bsSize="large" value={clientSecret} onChange={this.updateFieldHandler.bind(this)("client_secret")} />
</FormGroup>
*/}
<h4>Scopes</h4>
<FormGroup>
<FormControl type="text" bsSize="large" value={scopes} onChange={this.updateFieldHandler.bind(this)("scopes")} />
</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>
<h4>Redirect URI</h4>
<p>When you configure your client, please register the following redirect uri:</p>
<p><code>{this.state.redirectURL}</code></p>
<div>
<Button id="btnAuthenticate" onClick={this.authenticateStart.bind(this)} bsStyle="primary">
<FontAwesome name='sign-in' /> Authenticate
</Button>
&nbsp;
<Button id="btnWipe" onClick={this.logoutStart.bind(this)} bsStyle="danger">
<FontAwesome name='sign-out' /> Wipe token
</Button>
</div>
</form>
<h4>Scopes</h4>
<FormGroup>
<FormControl type="text" bsSize="large" value={scopes}
onChange={this.updateFieldHandler.bind(this)("scopes")}/>
</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>
<h4>Redirect URI</h4>
<p>When you configure your client, please register the following redirect uri:</p>
<p><code>{this.state.redirectURL}</code></p>
<div>
<Button id="btnAuthenticate" onClick={this.authenticateStart.bind(this)} bsStyle="primary">
<FontAwesome name='sign-in'/> Authenticate
</Button>
&nbsp;
<Button id="btnWipe" onClick={this.logoutStart.bind(this)} bsStyle="danger">
<FontAwesome name='sign-out'/> Wipe token
</Button>
</div>
</form>
</Panel.Body>
</Panel.Collapse>
</Panel>
)
}
}
export default Component
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment