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,34 +119,37 @@ class Component extends PureComponent { ...@@ -119,34 +119,37 @@ class Component extends PureComponent {
// } // }
return ( 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} {userinfo}
<Panel.Body>
<div> <div>
<p>Fetch data from</p> <p>Fetch data from</p>
{this.renderDropdownButton()} {this.renderDropdownButton()}
<FormGroup <FormGroup
className="gutter" className="gutter"
controlId="formBasicText" controlId="formBasicText"
> >
<FormControl <FormControl
type="text" type="text"
bsSize="large" bsSize="large"
placeholder="http://httpjs.net/foo" placeholder="http://httpjs.net/foo"
value={this.state.customEndpoint} value={this.state.customEndpoint}
onChange={this.updateAPIendpoint.bind(this)} 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
</FormGroup> 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 <Button onClick={this.fetchCustom.bind(this)} bsStyle="default">
</Button> <FontAwesome name='arrow-circle-o-right'/> Perform HTTP call
</div> </Button>
</div>
</Panel.Body>
</Panel> </Panel>
) )
} }
......
...@@ -25,8 +25,6 @@ class Component extends PureComponent { ...@@ -25,8 +25,6 @@ class Component extends PureComponent {
updateAPIendpoint() { updateAPIendpoint() {
} }
fetchUserinfo() { fetchUserinfo() {
...@@ -54,6 +52,7 @@ class Component extends PureComponent { ...@@ -54,6 +52,7 @@ class Component extends PureComponent {
} }
return null return null
} }
render() { render() {
// console.error("Component", this.props) // console.error("Component", this.props)
...@@ -79,24 +78,29 @@ class Component extends PureComponent { ...@@ -79,24 +78,29 @@ class Component extends PureComponent {
let loading = null let loading = null
if (this.props.http.isLoading) { if (this.props.http.isLoading) {
loading = ( loading = (
<LoadingIndicator /> <LoadingIndicator/>
) )
} }
return ( return (
<Panel header="HTTP Response" eventKey="1" collapsible={true} defaultExpanded={true}> <Panel eventKey="1" defaultExpanded={true}>
<div> <Panel.Heading className={"panel-title"}>
<p><code>GET</code> request to <code>{this.props.http.url}</code></p> HTTP Response
{ loading } </Panel.Heading>
{this.getErrorMessage()} <Panel.Body>
<Table striped bordered condensed hover> <div>
<tbody> <p><code>GET</code> request to <code>{this.props.http.url}</code></p>
{loading}
{this.getErrorMessage()}
<Table striped bordered condensed hover>
<tbody>
{headers} {headers}
</tbody> </tbody>
</Table> </Table>
<pre>{ bodystr }</pre> <pre>{bodystr}</pre>
</div> </div>
</Panel.Body>
</Panel> </Panel>
) )
} }
......
...@@ -72,27 +72,35 @@ class Component extends PureComponent { ...@@ -72,27 +72,35 @@ class Component extends PureComponent {
console.log("Expanded discovery", expanded, this.state.overrideToggle, this.props.expanded) console.log("Expanded discovery", expanded, this.state.overrideToggle, this.props.expanded)
console.log("STATE", this.state) console.log("STATE", this.state)
return ( return (
<Panel onClick={this.actTogglePanel} header="OpenID Connect Discovery" eventKey="1" collapsible={true} expanded={expanded}> <Panel eventKey="1" expanded={expanded}>
<FormGroup <Panel.Heading onClick={this.actTogglePanel}>
className="gutter" <Panel.Title className={"panel-title"}>
controlId="formBasicText" OpenID Connect Discovery
> </Panel.Title>
<h4>OAuth Server hostname</h4> </Panel.Heading>
<FormControl <Panel.Body collapsible>
type="text" <FormGroup
bsSize="large" className="gutter"
defaultValue={this.state.hostname} controlId="formBasicText"
placeholder="https://auth.yourplatform.org/" >
onChange={this.updateHostfield.bind(this)} <h4>OAuth Server hostname</h4>
/> <FormControl
<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> type="text"
</FormGroup> bsSize="large"
{this.getErrorMessage()} defaultValue={this.state.hostname}
<div> placeholder="https://auth.yourplatform.org/"
<Button onClick={this.discoveryStart.bind(this)} bsStyle="primary"> onChange={this.updateHostfield.bind(this)}
<FontAwesome name='magic' /> Discovery OAuth Provider />
</Button> <HelpBlock>Fill out the hostname of your OAuth server. Will only work if your OAuth server support OpenID
</div> 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> </Panel>
) )
} }
......
import React, { PureComponent } from 'react' import React, {PureComponent} from 'react'
import {Alert, InputGroup, Navbar, Nav, NavItem, NavDropdown, MenuItem, Glyphicon, Jumbotron, Button} from 'react-bootstrap' 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 {Panel, Row, Col, Collapse, FormControl, FormGroup, ControlLabel, HelpBlock} from 'react-bootstrap'
import FontAwesome from 'react-fontawesome' import FontAwesome from 'react-fontawesome'
...@@ -104,69 +104,81 @@ class Component extends PureComponent { ...@@ -104,69 +104,81 @@ class Component extends PureComponent {
let expanded = (this.state.overrideToggle === true) || this.props.expanded let expanded = (this.state.overrideToggle === true) || this.props.expanded
return ( return (
<Panel onClick={this.actTogglePanel} header="Configuration" eventKey="2" collapsible={true} expanded={expanded}> <Panel eventKey="2" expanded={expanded}>
<form> <Panel.Heading onClick={this.actTogglePanel}>
<h3>Server configuration</h3> <Panel.Title className={"panel-title"}>
Configuration
<h4>OAuth Authorization endpoint</h4> </Panel.Title>
<FormGroup> </Panel.Heading>
<FormControl id="inputAuthorization" type="text" value={authorizationEndpoint} onChange={this.updateFieldHandler.bind(this)("authorization_endpoint")} /> <Panel.Body collapsible>
</FormGroup> <form>
<h3>Server configuration</h3>
<h4>OAuth Token endpoint</h4>
<FormGroup> <h4>OAuth Authorization endpoint</h4>
<FormControl id="inputToken" type="text" value={tokenEndpoint} onChange={this.updateFieldHandler.bind(this)("token_endpoint")} /> <FormGroup>
</FormGroup> <FormControl id="inputAuthorization" type="text" value={authorizationEndpoint}
onChange={this.updateFieldHandler.bind(this)("authorization_endpoint")}/>
<h4>Userinfo Endpoint</h4> </FormGroup>
<FormGroup>
<FormControl id="inputUserinfo" type="text" value={userinfoEndpoint} onChange={this.updateFieldHandler.bind(this)("userinfo_endpoint")} /> <h4>OAuth Token endpoint</h4>
</FormGroup> <FormGroup>
<FormControl id="inputToken" type="text" value={tokenEndpoint}
<h3>Client configuration</h3> onChange={this.updateFieldHandler.bind(this)("token_endpoint")}/>
</FormGroup>
<h4>Client ID</h4>
<FormGroup> <h4>Userinfo Endpoint</h4>
<FormControl id="inputClientid" type="text" bsSize="large" value={clientId} onChange={this.updateFieldHandler.bind(this)("client_id")} /> <FormGroup>
</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> <h4>Client secret</h4>
<FormGroup> <FormGroup>
<FormControl type="text" bsSize="large" value={clientSecret} onChange={this.updateFieldHandler.bind(this)("client_secret")} /> <FormControl type="text" bsSize="large" value={clientSecret} onChange={this.updateFieldHandler.bind(this)("client_secret")} />
</FormGroup> </FormGroup>
*/} */}
<h4>Scopes</h4> <h4>Scopes</h4>
<FormGroup> <FormGroup>
<FormControl type="text" bsSize="large" value={scopes} onChange={this.updateFieldHandler.bind(this)("scopes")} /> <FormControl type="text" bsSize="large" value={scopes}
</FormGroup> onChange={this.updateFieldHandler.bind(this)("scopes")}/>
</FormGroup>
<FormGroup controlId="response_type">
<ControlLabel>Response Type</ControlLabel> <FormGroup controlId="response_type">
<FormControl componentClass="select" placeholder="select" value={this.state.response_type} onChange={this.updateFieldHandler.bind(this)("response_type")}> <ControlLabel>Response Type</ControlLabel>
<option value="token">OAuth Implicit Grant (token)</option> <FormControl componentClass="select" placeholder="select" value={this.state.response_type}
<option value="id_token token">OpenID Connect Implicit Flow (id_token token)</option> onChange={this.updateFieldHandler.bind(this)("response_type")}>
</FormControl> <option value="token">OAuth Implicit Grant (token)</option>
</FormGroup> <option value="id_token token">OpenID Connect Implicit Flow (id_token token)</option>
</FormControl>
<h4>Redirect URI</h4> </FormGroup>
<p>When you configure your client, please register the following redirect uri:</p>
<p><code>{this.state.redirectURL}</code></p> <h4>Redirect URI</h4>
<p>When you configure your client, please register the following redirect uri:</p>
<div> <p><code>{this.state.redirectURL}</code></p>
<Button id="btnAuthenticate" onClick={this.authenticateStart.bind(this)} bsStyle="primary">
<FontAwesome name='sign-in' /> Authenticate <div>
</Button> <Button id="btnAuthenticate" onClick={this.authenticateStart.bind(this)} bsStyle="primary">
&nbsp; <FontAwesome name='sign-in'/> Authenticate
<Button id="btnWipe" onClick={this.logoutStart.bind(this)} bsStyle="danger"> </Button>
<FontAwesome name='sign-out' /> Wipe token &nbsp;
</Button> <Button id="btnWipe" onClick={this.logoutStart.bind(this)} bsStyle="danger">
</div> <FontAwesome name='sign-out'/> Wipe token
</form> </Button>
</div>
</form>
</Panel.Body>
</Panel> </Panel>
) )
} }
} }
export default Component export default Component
...@@ -21,6 +21,13 @@ export function expiresText(expires) { ...@@ -21,6 +21,13 @@ export function expiresText(expires) {
class Component extends PureComponent { class Component extends PureComponent {
constructor(props) {
super(props)
this.state = {
overrideToggle: null,
}
}
getIDTokenView(idtoken) { getIDTokenView(idtoken) {
let str = JSON.stringify(jwtDecode(idtoken), undefined, 4) let str = JSON.stringify(jwtDecode(idtoken), undefined, 4)
return ( return (
...@@ -31,33 +38,43 @@ class Component extends PureComponent { ...@@ -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() { render() {
// console.error("Component", this.props) // console.error("Component", this.props)
if (!this.props.token) { if (!this.props.token) {
return ( return (
<p>No token</p> <p>No token</p>
) )
} }
let idtokenView = null let idtokenView = null
let extxt = expiresText(this.props.token.expires) let extxt = expiresText(this.props.token.expires)
if (this.props.token.id_token) { if (this.props.token.id_token) {
idtokenView = this.getIDTokenView(this.props.token.id_token) idtokenView = this.getIDTokenView(this.props.token.id_token)
} }
return ( return (
<Panel header="Access Token" eventKey="1" collapsible={true} defaultExpanded={true}> <Panel eventKey="1" defaultExpanded={true}>
<Panel.Heading onClick={this.actTogglePanel}>
<p>This access token expires {extxt}</p> <Panel.Title className={"panel-title"}>
<pre>{this.props.tokenstring}</pre> Access Token
</Panel.Title>
{idtokenView} </Panel.Heading>
<Panel.Body>
<p>This access token expires {extxt}</p>
<pre>{this.props.tokenstring}</pre>
{idtokenView}
</Panel.Body>
</Panel> </Panel>
) )
} }
......
...@@ -37,3 +37,8 @@ ...@@ -37,3 +37,8 @@
transition: all 80ms ease-in; transition: all 80ms ease-in;
transform: scale(1.05); 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