Skip to content

GitLab

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

change panel collapse behaviour

parent 7e595305
Pipeline #16686 passed with stages
in 4 minutes and 52 seconds
Hide whitespace changes
Inline Side-by-side
src/components/HostnameInput.jsx
View file @ 9ace4d9c
...@@ -6,6 +6,11 @@ import FontAwesome from 'react-fontawesome' ...@@ -6,6 +6,11 @@ import FontAwesome from 'react-fontawesome'
const defaultHost = "https://auth.dataporten.no" const defaultHost = "https://auth.dataporten.no"
const fontStyling = {
fontWeight: 'bold',
fontFamily: 'colfaxBold,Helvetica,Arial,sans-serif'
}
class Component extends PureComponent { class Component extends PureComponent {
constructor(props) { constructor(props) {
...@@ -72,27 +77,35 @@ class Component extends PureComponent { ...@@ -72,27 +77,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" collapsible={true} expanded={expanded}>
<FormGroup <Panel.Heading onClick={this.actTogglePanel} className={"panel-title"} style={fontStyling}>
className="gutter" OpenID Connect Discovery
controlId="formBasicText" </Panel.Heading>
> <Panel.Collapse>
<h4>OAuth Server hostname</h4> <Panel.Body>
<FormControl <FormGroup
type="text" className="gutter"
bsSize="large" controlId="formBasicText"
defaultValue={this.state.hostname} >
placeholder="https://auth.yourplatform.org/" <h4>OAuth Server hostname</h4>
onChange={this.updateHostfield.bind(this)} <FormControl
/> type="text"
<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> bsSize="large"
</FormGroup> defaultValue={this.state.hostname}
{this.getErrorMessage()} placeholder="https://auth.yourplatform.org/"
<div> onChange={this.updateHostfield.bind(this)}
<Button onClick={this.discoveryStart.bind(this)} bsStyle="primary"> />
<FontAwesome name='magic' /> Discovery OAuth Provider <HelpBlock>Fill out the hostname of your OAuth server. Will only work if your OAuth server support OpenID
</Button> Connect Discovery. If not, please enter configuration manually.</HelpBlock>
</div> </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> </Panel>
) )
} }
......
src/components/ServerConfigInput.jsx
View file @ 9ace4d9c
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'
import WhiteBox from './WhiteBox' import WhiteBox from './WhiteBox'
const fontStyling = {
fontWeight: 'bold',
fontFamily: 'colfaxBold,Helvetica,Arial,sans-serif'
}
class Component extends PureComponent { class Component extends PureComponent {
constructor(props) { constructor(props) {
...@@ -104,69 +109,81 @@ class Component extends PureComponent { ...@@ -104,69 +109,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" collapsible={true} expanded={expanded}>
<form> <Panel.Heading onClick={this.actTogglePanel} className={"panel-title"} style={fontStyling}>
<h3>Server configuration</h3> Configuration
</Panel.Heading>
<h4>OAuth Authorization endpoint</h4> <Panel.Collapse>
<FormGroup> <Panel.Body>
<FormControl id="inputAuthorization" type="text" value={authorizationEndpoint} onChange={this.updateFieldHandler.bind(this)("authorization_endpoint")} /> <form>
</FormGroup> <h3>Server configuration</h3>
<h4>OAuth Token endpoint</h4> <h4>OAuth Authorization endpoint</h4>
<FormGroup> <FormGroup>
<FormControl id="inputToken" type="text" value={tokenEndpoint} onChange={this.updateFieldHandler.bind(this)("token_endpoint")} /> <FormControl id="inputAuthorization" type="text" value={authorizationEndpoint}
</FormGroup> onChange={this.updateFieldHandler.bind(this)("authorization_endpoint")}/>
</FormGroup>
<h4>Userinfo Endpoint</h4>
<FormGroup> <h4>OAuth Token endpoint</h4>
<FormControl id="inputUserinfo" type="text" value={userinfoEndpoint} onChange={this.updateFieldHandler.bind(this)("userinfo_endpoint")} /> <FormGroup>
</FormGroup> <FormControl id="inputToken" type="text" value={tokenEndpoint}
onChange={this.updateFieldHandler.bind(this)("token_endpoint")}/>
<h3>Client configuration</h3> </FormGroup>
<h4>Client ID</h4> <h4>Userinfo Endpoint</h4>
<FormGroup> <FormGroup>
<FormControl id="inputClientid" type="text" bsSize="large" value={clientId} onChange={this.updateFieldHandler.bind(this)("client_id")} /> <FormControl id="inputUserinfo" type="text" value={userinfoEndpoint}
</FormGroup> 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.Collapse>
</Panel> </Panel>
) )
} }
} }
export default Component 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