Commit 56ea594e authored by Jon Kåre Hellan's avatar Jon Kåre Hellan

Merge branch 'fix-panel' into 'master'

Fix panel

See merge request !3
parents 7e595305 6bac0723
Pipeline #16701 passed with stages
in 3 minutes and 9 seconds
......@@ -119,12 +119,14 @@ class Component extends PureComponent {
// }
return (
<Panel header="HTTP Client using OAuth Access Token" eventKey="1" collapsible={true} defaultExpanded={true}>
<Panel eventKey="1" defaultExpanded={true}>
<Panel.Heading className={'panel-title'}>
HTTP Client using OAuth Access Token
</Panel.Heading>
{userinfo}
<Panel.Body>
<div>
<p>Fetch data from</p>
{this.renderDropdownButton()}
......@@ -139,14 +141,15 @@ class Component extends PureComponent {
value={this.state.customEndpoint}
onChange={this.updateAPIendpoint.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>
<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>
<Button onClick={this.fetchCustom.bind(this)} bsStyle="default">
<FontAwesome name='arrow-circle-o-right' /> Perform HTTP call
<FontAwesome name='arrow-circle-o-right'/> Perform HTTP call
</Button>
</div>
</Panel.Body>
</Panel>
)
}
......
......@@ -25,8 +25,6 @@ class Component extends PureComponent {
updateAPIendpoint() {
}
fetchUserinfo() {
......@@ -54,6 +52,7 @@ class Component extends PureComponent {
}
return null
}
render() {
// console.error("Component", this.props)
......@@ -79,24 +78,29 @@ class Component extends PureComponent {
let loading = null
if (this.props.http.isLoading) {
loading = (
<LoadingIndicator />
<LoadingIndicator/>
)
}
return (
<Panel header="HTTP Response" eventKey="1" collapsible={true} defaultExpanded={true}>
<Panel eventKey="1" defaultExpanded={true}>
<Panel.Heading className={"panel-title"}>
HTTP Response
</Panel.Heading>
<Panel.Body>
<div>
<p><code>GET</code> request to <code>{this.props.http.url}</code></p>
{ loading }
{loading}
{this.getErrorMessage()}
<Table striped bordered condensed hover>
<tbody>
{headers}
</tbody>
</Table>
<pre>{ bodystr }</pre>
<pre>{bodystr}</pre>
</div>
</Panel.Body>
</Panel>
)
}
......
......@@ -72,7 +72,13 @@ 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}>
<Panel eventKey="1" expanded={expanded}>
<Panel.Heading onClick={this.actTogglePanel}>
<Panel.Title className={"panel-title"}>
OpenID Connect Discovery
</Panel.Title>
</Panel.Heading>
<Panel.Body collapsible>
<FormGroup
className="gutter"
controlId="formBasicText"
......@@ -85,14 +91,16 @@ class Component extends PureComponent {
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>
<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
<FontAwesome name='magic'/> Discovery OAuth Provider
</Button>
</div>
</Panel.Body>
</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'
......@@ -104,30 +104,40 @@ 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}>
<Panel eventKey="2" expanded={expanded}>
<Panel.Heading onClick={this.actTogglePanel}>
<Panel.Title className={"panel-title"}>
Configuration
</Panel.Title>
</Panel.Heading>
<Panel.Body collapsible>
<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")} />
<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")} />
<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")} />
<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")} />
<FormControl id="inputClientid" type="text" bsSize="large" value={clientId}
onChange={this.updateFieldHandler.bind(this)("client_id")}/>
</FormGroup>
{/*
......@@ -138,12 +148,14 @@ class Component extends PureComponent {
*/}
<h4>Scopes</h4>
<FormGroup>
<FormControl type="text" bsSize="large" value={scopes} onChange={this.updateFieldHandler.bind(this)("scopes")} />
<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")}>
<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>
......@@ -155,18 +167,18 @@ class Component extends PureComponent {
<div>
<Button id="btnAuthenticate" onClick={this.authenticateStart.bind(this)} bsStyle="primary">
<FontAwesome name='sign-in' /> Authenticate
<FontAwesome name='sign-in'/> Authenticate
</Button>
&nbsp;
<Button id="btnWipe" onClick={this.logoutStart.bind(this)} bsStyle="danger">
<FontAwesome name='sign-out' /> Wipe token
<FontAwesome name='sign-out'/> Wipe token
</Button>
</div>
</form>
</Panel.Body>
</Panel>
)
}
}
export default Component
......@@ -21,6 +21,13 @@ export function expiresText(expires) {
class Component extends PureComponent {
constructor(props) {
super(props)
this.state = {
overrideToggle: null,
}
}
getIDTokenView(idtoken) {
let str = JSON.stringify(jwtDecode(idtoken), undefined, 4)
return (
......@@ -31,33 +38,43 @@ class Component extends PureComponent {
)
}
actTogglePanel = () => {
if (this.state.overrideToggle === null) {
this.setState({overrideToggle: !(this.props.expanded)})
} else {
this.setState({overrideToggle: !(this.state.overrideToggle === true)})
}
}
render() {
// console.error("Component", this.props)
if (!this.props.token) {
return (
<p>No token</p>
)
}
let idtokenView = null
let extxt = expiresText(this.props.token.expires)
if (this.props.token.id_token) {
idtokenView = this.getIDTokenView(this.props.token.id_token)
}
return (
<Panel header="Access Token" eventKey="1" collapsible={true} defaultExpanded={true}>
<Panel eventKey="1" defaultExpanded={true}>
<Panel.Heading onClick={this.actTogglePanel}>
<Panel.Title className={"panel-title"}>
Access Token
</Panel.Title>
</Panel.Heading>
<Panel.Body>
<p>This access token expires {extxt}</p>
<pre>{this.props.tokenstring}</pre>
{idtokenView}
</Panel.Body>
</Panel>
)
}
......
......@@ -37,3 +37,8 @@
transition: all 80ms ease-in;
transform: scale(1.05);
}
.panel-title {
font-weight: bold;
font-family: 'colfaxBold', Helvetica, Arial, sans-serif;
}
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