in with the new
This commit is contained in:
Ron
82
src/core/components/auth/api-key-auth.jsx
Normal file
82
src/core/components/auth/api-key-auth.jsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import React, { PropTypes } from "react"
|
||||
|
||||
export default class ApiKeyAuth extends React.Component {
|
||||
static propTypes = {
|
||||
authorized: PropTypes.object,
|
||||
getComponent: PropTypes.func.isRequired,
|
||||
errSelectors: PropTypes.object.isRequired,
|
||||
schema: PropTypes.object.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
onChange: PropTypes.func
|
||||
}
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context)
|
||||
let { name, schema } = this.props
|
||||
let value = this.getValue()
|
||||
|
||||
this.state = {
|
||||
name: name,
|
||||
schema: schema,
|
||||
value: value
|
||||
}
|
||||
}
|
||||
|
||||
getValue () {
|
||||
let { name, authorized } = this.props
|
||||
|
||||
return authorized && authorized.getIn([name, "value"])
|
||||
}
|
||||
|
||||
onChange =(e) => {
|
||||
let { onChange } = this.props
|
||||
let value = e.target.value
|
||||
let newState = Object.assign({}, this.state, { value: value })
|
||||
|
||||
this.setState(newState)
|
||||
onChange(newState)
|
||||
}
|
||||
|
||||
render() {
|
||||
let { schema, getComponent, errSelectors, name } = this.props
|
||||
const Input = getComponent("Input")
|
||||
const Row = getComponent("Row")
|
||||
const Col = getComponent("Col")
|
||||
const AuthError = getComponent("authError")
|
||||
const Markdown = getComponent( "Markdown" )
|
||||
const JumpToPath = getComponent("JumpToPath", true)
|
||||
let value = this.getValue()
|
||||
let errors = errSelectors.allErrors().filter( err => err.get("authId") === name)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h4>Api key authorization<JumpToPath path={[ "securityDefinitions", name ]} /></h4>
|
||||
{ value && <h6>Authorized</h6>}
|
||||
<Row>
|
||||
<Markdown options={{html: true, typographer: true, linkify: true, linkTarget: "_blank"}}
|
||||
source={ schema.get("description") } />
|
||||
</Row>
|
||||
<Row>
|
||||
<p>Name: <code>{ schema.get("name") }</code></p>
|
||||
</Row>
|
||||
<Row>
|
||||
<p>In: <code>{ schema.get("in") }</code></p>
|
||||
</Row>
|
||||
<Row>
|
||||
<label>Value:</label>
|
||||
<Col>
|
||||
{
|
||||
value || <Input type="text" onChange={ this.onChange }/>
|
||||
}
|
||||
</Col>
|
||||
</Row>
|
||||
{
|
||||
errors.valueSeq().map( (error, key) => {
|
||||
return <AuthError error={ error }
|
||||
key={ key }/>
|
||||
} )
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
59
src/core/components/auth/authorization-popup.jsx
Normal file
59
src/core/components/auth/authorization-popup.jsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import React, { PropTypes } from "react"
|
||||
|
||||
export default class AuthorizationPopup extends React.Component {
|
||||
close =() => {
|
||||
let { authActions } = this.props
|
||||
|
||||
authActions.showDefinitions(false)
|
||||
}
|
||||
|
||||
render() {
|
||||
let { authSelectors, authActions, getComponent, errSelectors, specSelectors, fn: { AST } } = this.props
|
||||
let definitions = authSelectors.shownDefinitions()
|
||||
const Auths = getComponent("auths")
|
||||
|
||||
return (
|
||||
<div className="dialog-ux">
|
||||
<div className="backdrop-ux"></div>
|
||||
<div className="modal-ux">
|
||||
<div className="modal-dialog-ux">
|
||||
<div className="modal-ux-inner">
|
||||
<div className="modal-ux-header">
|
||||
<h3>Available authorizations</h3>
|
||||
<button type="button" className="close-modal" onClick={ this.close }>
|
||||
<svg width="20" height="20">
|
||||
<use xlinkHref="#close" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-ux-content">
|
||||
|
||||
{
|
||||
definitions.valueSeq().map(( definition, key ) => {
|
||||
return <Auths key={ key }
|
||||
AST={AST}
|
||||
definitions={ definition }
|
||||
getComponent={ getComponent }
|
||||
errSelectors={ errSelectors }
|
||||
authSelectors={ authSelectors }
|
||||
authActions={ authActions }
|
||||
specSelectors={ specSelectors }/>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
fn: PropTypes.object.isRequired,
|
||||
getComponent: PropTypes.func.isRequired,
|
||||
authSelectors: PropTypes.object.isRequired,
|
||||
specSelectors: PropTypes.object.isRequired,
|
||||
errSelectors: PropTypes.object.isRequired,
|
||||
authActions: PropTypes.object.isRequired,
|
||||
}
|
||||
}
|
||||
42
src/core/components/auth/authorize-btn.jsx
Normal file
42
src/core/components/auth/authorize-btn.jsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import React, { PropTypes } from "react"
|
||||
|
||||
export default class AuthorizeBtn extends React.Component {
|
||||
static propTypes = {
|
||||
className: PropTypes.string
|
||||
}
|
||||
|
||||
onClick =() => {
|
||||
let { authActions, authSelectors, errActions} = this.props
|
||||
let definitions = authSelectors.definitionsToAuthorize()
|
||||
|
||||
authActions.showDefinitions(definitions)
|
||||
}
|
||||
|
||||
render() {
|
||||
let { authSelectors, getComponent } = this.props
|
||||
//must be moved out of button component
|
||||
const AuthorizationPopup = getComponent("authorizationPopup", true)
|
||||
let showPopup = !!authSelectors.shownDefinitions()
|
||||
let isAuthorized = !!authSelectors.authorized().size
|
||||
|
||||
return (
|
||||
<div className="auth-wrapper">
|
||||
<button className={isAuthorized ? "btn authorize locked" : "btn authorize unlocked"} onClick={ this.onClick }>
|
||||
<span>Authorize</span>
|
||||
<svg width="20" height="20">
|
||||
<use xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
|
||||
</svg>
|
||||
</button>
|
||||
{ showPopup && <AuthorizationPopup /> }
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
static propTypes = {
|
||||
getComponent: PropTypes.func.isRequired,
|
||||
authSelectors: PropTypes.object.isRequired,
|
||||
errActions: PropTypes.object.isRequired,
|
||||
authActions: PropTypes.object.isRequired,
|
||||
}
|
||||
}
|
||||
34
src/core/components/auth/authorize-operation-btn.jsx
Normal file
34
src/core/components/auth/authorize-operation-btn.jsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import React, { PropTypes } from "react"
|
||||
import ImPropTypes from "react-immutable-proptypes"
|
||||
|
||||
export default class AuthorizeOperationBtn extends React.Component {
|
||||
onClick =(e) => {
|
||||
e.stopPropagation()
|
||||
|
||||
let { security, authActions, authSelectors } = this.props
|
||||
let definitions = authSelectors.getDefinitionsByNames(security)
|
||||
|
||||
authActions.showDefinitions(definitions)
|
||||
}
|
||||
|
||||
render() {
|
||||
let { security, authSelectors } = this.props
|
||||
|
||||
let isAuthorized = authSelectors.isAuthorized(security)
|
||||
|
||||
return (
|
||||
<button className={isAuthorized ? "authorization__btn locked" : "authorization__btn unlocked"} onClick={ this.onClick }>
|
||||
<svg width="20" height="20">
|
||||
<use xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
authSelectors: PropTypes.object.isRequired,
|
||||
authActions: PropTypes.object.isRequired,
|
||||
security: ImPropTypes.iterable.isRequired
|
||||
}
|
||||
}
|
||||
138
src/core/components/auth/auths.jsx
Normal file
138
src/core/components/auth/auths.jsx
Normal file
@@ -0,0 +1,138 @@
|
||||
import React, { PropTypes } from "react"
|
||||
import ImPropTypes from "react-immutable-proptypes"
|
||||
|
||||
export default class Auths extends React.Component {
|
||||
static propTypes = {
|
||||
definitions: PropTypes.object.isRequired,
|
||||
getComponent: PropTypes.func.isRequired,
|
||||
authSelectors: PropTypes.object.isRequired,
|
||||
authActions: PropTypes.object.isRequired,
|
||||
specSelectors: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context)
|
||||
|
||||
this.state = {}
|
||||
}
|
||||
|
||||
onAuthChange =(auth) => {
|
||||
let { name } = auth
|
||||
|
||||
this.setState({ [name]: auth })
|
||||
}
|
||||
|
||||
submitAuth =(e) => {
|
||||
e.preventDefault()
|
||||
|
||||
let { authActions } = this.props
|
||||
|
||||
authActions.authorize(this.state)
|
||||
}
|
||||
|
||||
logoutClick =(e) => {
|
||||
e.preventDefault()
|
||||
|
||||
let { authActions, definitions } = this.props
|
||||
let auths = definitions.map( (val, key) => {
|
||||
return key
|
||||
}).toArray()
|
||||
|
||||
authActions.logout(auths)
|
||||
}
|
||||
|
||||
render() {
|
||||
let { definitions, getComponent, authSelectors, errSelectors, specSelectors } = this.props
|
||||
const ApiKeyAuth = getComponent("apiKeyAuth")
|
||||
const BasicAuth = getComponent("basicAuth")
|
||||
const Oauth2 = getComponent("oauth2", true)
|
||||
const Button = getComponent("Button")
|
||||
const JumpToPath = getComponent("JumpToPath", true)
|
||||
|
||||
let specStr = specSelectors.specStr()
|
||||
let authorized = authSelectors.authorized()
|
||||
|
||||
let authorizedAuth = definitions.filter( (definition, key) => {
|
||||
return !!authorized.get(key)
|
||||
})
|
||||
|
||||
let nonOauthDefinitions = definitions.filter( schema => schema.get("type") !== "oauth2")
|
||||
let oauthDefinitions = definitions.filter( schema => schema.get("type") === "oauth2")
|
||||
|
||||
return (
|
||||
<div className="auth-container">
|
||||
{
|
||||
!!nonOauthDefinitions.size && <form onSubmit={ this.submitAuth }>
|
||||
{
|
||||
nonOauthDefinitions.map( (schema, name) => {
|
||||
let type = schema.get("type")
|
||||
let authEl
|
||||
|
||||
switch(type) {
|
||||
case "apiKey": authEl = <ApiKeyAuth key={ name }
|
||||
schema={ schema }
|
||||
name={ name }
|
||||
errSelectors={ errSelectors }
|
||||
authorized={ authorized }
|
||||
getComponent={ getComponent }
|
||||
onChange={ this.onAuthChange } />
|
||||
break
|
||||
case "basic": authEl = <BasicAuth key={ name }
|
||||
schema={ schema }
|
||||
name={ name }
|
||||
errSelectors={ errSelectors }
|
||||
authorized={ authorized }
|
||||
getComponent={ getComponent }
|
||||
onChange={ this.onAuthChange } />
|
||||
break
|
||||
default: authEl = <div key={ name }>Unknown security definition type { type }</div>
|
||||
}
|
||||
|
||||
return (<div key={`${name}-jump`}>
|
||||
{ authEl }
|
||||
</div>)
|
||||
|
||||
}).toArray()
|
||||
}
|
||||
<div className="auth-btn-wrapper">
|
||||
{
|
||||
nonOauthDefinitions.size === authorizedAuth.size ? <Button className="btn modal-btn auth" onClick={ this.logoutClick }>Logout</Button>
|
||||
: <Button type="submit" className="btn modal-btn auth authorize">Authorize</Button>
|
||||
}
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
|
||||
{
|
||||
oauthDefinitions && oauthDefinitions.size ? <div>
|
||||
<div className="scope-def">
|
||||
<p>Scopes are used to grant an application different levels of access to data on behalf of the end user. Each API may declare one or more scopes.</p>
|
||||
<p>API requires the following scopes. Select which ones you want to grant to Swagger UI.</p>
|
||||
</div>
|
||||
{
|
||||
definitions.filter( schema => schema.get("type") === "oauth2")
|
||||
.map( (schema, name) =>{
|
||||
return (<div key={ name }>
|
||||
<Oauth2 authorized={ authorized }
|
||||
schema={ schema }
|
||||
name={ name } />
|
||||
</div>)
|
||||
}
|
||||
).toArray()
|
||||
}
|
||||
</div> : null
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
errSelectors: PropTypes.object.isRequired,
|
||||
getComponent: PropTypes.func.isRequired,
|
||||
authSelectors: PropTypes.object.isRequired,
|
||||
specSelectors: PropTypes.object.isRequired,
|
||||
authActions: PropTypes.object.isRequired,
|
||||
definitions: ImPropTypes.iterable.isRequired
|
||||
}
|
||||
}
|
||||
97
src/core/components/auth/basic-auth.jsx
Normal file
97
src/core/components/auth/basic-auth.jsx
Normal file
@@ -0,0 +1,97 @@
|
||||
import React, { PropTypes } from "react"
|
||||
import ImPropTypes from "react-immutable-proptypes"
|
||||
|
||||
export default class BasicAuth extends React.Component {
|
||||
static propTypes = {
|
||||
authorized: PropTypes.object,
|
||||
getComponent: PropTypes.func.isRequired,
|
||||
schema: PropTypes.object.isRequired,
|
||||
onChange: PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context)
|
||||
let { schema, name } = this.props
|
||||
|
||||
let value = this.getValue()
|
||||
let username = value.username
|
||||
|
||||
this.state = {
|
||||
name: name,
|
||||
schema: schema,
|
||||
value: !username ? {} : {
|
||||
username: username
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getValue () {
|
||||
let { authorized, name } = this.props
|
||||
|
||||
return authorized && authorized.getIn([name, "value"]) || {}
|
||||
}
|
||||
|
||||
onChange =(e) => {
|
||||
let { onChange } = this.props
|
||||
let { value, name } = e.target
|
||||
|
||||
let newValue = this.state.value
|
||||
newValue[name] = value
|
||||
|
||||
this.setState({ value: newValue })
|
||||
|
||||
onChange(this.state)
|
||||
}
|
||||
|
||||
render() {
|
||||
let { schema, getComponent, name, errSelectors } = this.props
|
||||
const Input = getComponent("Input")
|
||||
const Row = getComponent("Row")
|
||||
const Col = getComponent("Col")
|
||||
const AuthError = getComponent("authError")
|
||||
const JumpToPath = getComponent("JumpToPath", true)
|
||||
const Markdown = getComponent( "Markdown" )
|
||||
let username = this.getValue().username
|
||||
let errors = errSelectors.allErrors().filter( err => err.get("authId") === name)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h4>Basic authorization<JumpToPath path={[ "securityDefinitions", name ]} /></h4>
|
||||
{ username && <h6>Authorized</h6> }
|
||||
<Row>
|
||||
<Markdown options={{html: true, typographer: true, linkify: true, linkTarget: "_blank"}}
|
||||
source={ schema.get("description") } />
|
||||
</Row>
|
||||
<Row>
|
||||
<Col tablet={2} desktop={2}>username:</Col>
|
||||
<Col tablet={10} desktop={10}>
|
||||
{
|
||||
username || <Input type="text" required="required" name="username" onChange={ this.onChange }/>
|
||||
}
|
||||
</Col>
|
||||
</Row>
|
||||
{
|
||||
!username && <Row>
|
||||
<Col tablet={2} desktop={2}>password:</Col>
|
||||
<Col tablet={10} desktop={10}><Input required="required" autoComplete="new-password" name="password" type="password" onChange={ this.onChange }/></Col>
|
||||
</Row>
|
||||
}
|
||||
{
|
||||
errors.valueSeq().map( (error, key) => {
|
||||
return <AuthError error={ error }
|
||||
key={ key }/>
|
||||
} )
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
errSelectors: PropTypes.object.isRequired,
|
||||
getComponent: PropTypes.func.isRequired,
|
||||
onChange: PropTypes.func,
|
||||
schema: ImPropTypes.map,
|
||||
authorized: ImPropTypes.map
|
||||
}
|
||||
}
|
||||
23
src/core/components/auth/error.jsx
Normal file
23
src/core/components/auth/error.jsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import React, { PropTypes } from "react"
|
||||
|
||||
export default class AuthError extends React.Component {
|
||||
|
||||
static propTypes = {
|
||||
error: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
render() {
|
||||
let { error } = this.props
|
||||
|
||||
let level = error.get("level")
|
||||
let message = error.get("message")
|
||||
let source = error.get("source")
|
||||
|
||||
return (
|
||||
<div className="errors" style={{ backgroundColor: "#ffeeee", color: "red", margin: "1em" }}>
|
||||
<b style={{ textTransform: "capitalize", marginRight: "1em"}} >{ source } { level }</b>
|
||||
<span>{ message }</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
218
src/core/components/auth/oauth2.jsx
Normal file
218
src/core/components/auth/oauth2.jsx
Normal file
@@ -0,0 +1,218 @@
|
||||
import React, { PropTypes } from "react"
|
||||
import oauth2Authorize from "core/oauth2-authorize"
|
||||
|
||||
const IMPLICIT = "implicit"
|
||||
const ACCESS_CODE = "accessCode"
|
||||
const PASSWORD = "password"
|
||||
const APPLICATION = "application"
|
||||
|
||||
export default class Oauth2 extends React.Component {
|
||||
static propTypes = {
|
||||
name: PropTypes.string,
|
||||
authorized: PropTypes.object,
|
||||
configs: PropTypes.object,
|
||||
getComponent: PropTypes.func.isRequired,
|
||||
schema: PropTypes.object.isRequired,
|
||||
authSelectors: PropTypes.object.isRequired,
|
||||
authActions: PropTypes.object.isRequired,
|
||||
errSelectors: PropTypes.object.isRequired,
|
||||
errActions: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context)
|
||||
let { name, schema, authorized } = this.props
|
||||
let auth = authorized && authorized.get(name)
|
||||
let username = auth && auth.get("username") || ""
|
||||
let clientId = auth && auth.get("clientId") || ""
|
||||
let clientSecret = auth && auth.get("clientSecret") || ""
|
||||
let passwordType = auth && auth.get("passwordType") || "none"
|
||||
|
||||
this.state = {
|
||||
name: name,
|
||||
schema: schema,
|
||||
scopes: [],
|
||||
clientId: clientId,
|
||||
clientSecret: clientSecret,
|
||||
username: username,
|
||||
password: "",
|
||||
passwordType: passwordType
|
||||
}
|
||||
}
|
||||
|
||||
authorize =() => {
|
||||
let { authActions, errActions, getConfigs } = this.props
|
||||
let configs = getConfigs()
|
||||
|
||||
errActions.clear({authId: name,type: "auth", source: "auth"})
|
||||
oauth2Authorize(this.state, authActions, errActions, configs)
|
||||
}
|
||||
|
||||
onScopeChange =(e) => {
|
||||
let { target } = e
|
||||
let { checked } = target
|
||||
let scope = target.dataset.value
|
||||
|
||||
if ( checked && this.state.scopes.indexOf(scope) === -1 ) {
|
||||
let newScopes = this.state.scopes.concat([scope])
|
||||
this.setState({ scopes: newScopes })
|
||||
} else if ( !checked && this.state.scopes.indexOf(scope) > -1) {
|
||||
this.setState({ scopes: this.state.scopes.filter((val) => val !== scope) })
|
||||
}
|
||||
}
|
||||
|
||||
onInputChange =(e) => {
|
||||
let { target : { dataset : { name }, value } } = e
|
||||
let state = {
|
||||
[name]: value
|
||||
}
|
||||
|
||||
this.setState(state)
|
||||
}
|
||||
|
||||
logout =(e) => {
|
||||
e.preventDefault()
|
||||
let { authActions, errActions, name } = this.props
|
||||
|
||||
errActions.clear({authId: name, type: "auth", source: "auth"})
|
||||
authActions.logout([ name ])
|
||||
}
|
||||
|
||||
render() {
|
||||
let { schema, getComponent, authSelectors, errSelectors, name } = this.props
|
||||
const Input = getComponent("Input")
|
||||
const Row = getComponent("Row")
|
||||
const Col = getComponent("Col")
|
||||
const Button = getComponent("Button")
|
||||
const AuthError = getComponent("authError")
|
||||
const JumpToPath = getComponent("JumpToPath", true)
|
||||
const Markdown = getComponent( "Markdown" )
|
||||
|
||||
let flow = schema.get("flow")
|
||||
let scopes = schema.get("allowedScopes") || schema.get("scopes")
|
||||
let authorizedAuth = authSelectors.authorized().get(name)
|
||||
let isAuthorized = !!authorizedAuth
|
||||
let errors = errSelectors.allErrors().filter( err => err.get("authId") === name)
|
||||
let isValid = !errors.filter( err => err.get("source") === "validation").size
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h4>OAuth2.0 <JumpToPath path={[ "securityDefinitions", name ]} /></h4>
|
||||
<Markdown options={{html: true, typographer: true, linkify: true, linkTarget: "_blank"}}
|
||||
source={ schema.get("description") } />
|
||||
|
||||
{ isAuthorized && <h6>Authorized</h6> }
|
||||
|
||||
{ ( flow === IMPLICIT || flow === ACCESS_CODE ) && <p>Authorization URL: <code>{ schema.get("authorizationUrl") }</code></p> }
|
||||
{ ( flow === PASSWORD || flow === ACCESS_CODE || flow === APPLICATION ) && <p>Token URL:<code> { schema.get("tokenUrl") }</code></p> }
|
||||
<p className="flow">Flow: <code>{ schema.get("flow") }</code></p>
|
||||
|
||||
{
|
||||
flow === PASSWORD && ( !isAuthorized || isAuthorized && this.state.username) && <Row>
|
||||
<Col tablet={2} desktop={2}>username:</Col>
|
||||
<Col tablet={10} desktop={10}>
|
||||
{
|
||||
isAuthorized ? <span>{ this.state.username }</span>
|
||||
: <input type="text" data-name="username" onChange={ this.onInputChange }/>
|
||||
}
|
||||
</Col>
|
||||
</Row>
|
||||
}
|
||||
|
||||
{
|
||||
flow === PASSWORD && !isAuthorized && <Row>
|
||||
<Col tablet={2} desktop={2}>password:</Col>
|
||||
<Col tablet={10} desktop={10}>
|
||||
<input type="password" data-name="password" onChange={ this.onInputChange }/>
|
||||
</Col>
|
||||
</Row>
|
||||
}
|
||||
|
||||
{
|
||||
flow === PASSWORD && <Row>
|
||||
<Col tablet={2} desktop={2}>type:</Col>
|
||||
<Col tablet={10} desktop={10}>
|
||||
{
|
||||
isAuthorized ? <span>{ this.state.passwordType }</span>
|
||||
: <select data-name="passwordType" onChange={ this.onInputChange }>
|
||||
<option value="none">None or other</option>
|
||||
<option value="basic">Basic auth</option>
|
||||
<option value="request">Request body</option>
|
||||
</select>
|
||||
}
|
||||
</Col>
|
||||
</Row>
|
||||
}
|
||||
|
||||
{
|
||||
( flow === IMPLICIT || flow === ACCESS_CODE || ( flow === PASSWORD && this.state.passwordType!== "none") ) &&
|
||||
( !isAuthorized || isAuthorized && this.state.clientId) && <Row>
|
||||
<label htmlFor="client_id">client_id:</label>
|
||||
<Col tablet={10} desktop={10}>
|
||||
{
|
||||
isAuthorized ? <span>{ this.state.clientId }</span>
|
||||
: <input id="client_id" type="text" required={ flow === PASSWORD } data-name="clientId"
|
||||
onChange={ this.onInputChange }/>
|
||||
}
|
||||
</Col>
|
||||
</Row>
|
||||
}
|
||||
|
||||
{
|
||||
( flow === ACCESS_CODE || ( flow === PASSWORD && this.state.passwordType!== "none") ) && <Row>
|
||||
<label htmlFor="client_secret">client_secret:</label>
|
||||
<Col tablet={10} desktop={10}>
|
||||
{
|
||||
isAuthorized ? <span>{ this.state.clientSecret }</span>
|
||||
: <input id="client_secret" type="text" data-name="clientSecret"
|
||||
onChange={ this.onInputChange }/>
|
||||
}
|
||||
</Col>
|
||||
</Row>
|
||||
}
|
||||
|
||||
{
|
||||
!isAuthorized && flow !== PASSWORD && scopes && scopes.size ? <div className="scopes">
|
||||
<h2>Scopes:</h2>
|
||||
{ scopes.map((description, name) => {
|
||||
return (
|
||||
<Row key={ name }>
|
||||
<div className="checkbox">
|
||||
<Input data-value={ name }
|
||||
id={`${name}-checkbox`}
|
||||
disabled={ isAuthorized }
|
||||
type="checkbox"
|
||||
onChange={ this.onScopeChange }/>
|
||||
<label htmlFor={`${name}-checkbox`}>
|
||||
<span className="item"></span>
|
||||
<div className="text">
|
||||
<p className="name">{name}</p>
|
||||
<p className="description">{description}</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</Row>
|
||||
)
|
||||
}).toArray()
|
||||
}
|
||||
</div> : null
|
||||
}
|
||||
|
||||
{
|
||||
errors.valueSeq().map( (error, key) => {
|
||||
return <AuthError error={ error }
|
||||
key={ key }/>
|
||||
} )
|
||||
}
|
||||
<div className="auth-btn-wrapper">
|
||||
{ isValid && flow !== APPLICATION &&
|
||||
( isAuthorized ? <Button className="btn modal-btn auth authorize" onClick={ this.logout }>Logout</Button>
|
||||
: <Button className="btn modal-btn auth authorize" onClick={ this.authorize }>Authorize</Button>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user