@upendra19/swagger-ui-custom 1.0.0 → 1.0.3

package/src/core/components/auth/authorization-popup.jsx

@@ -1,59 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-
-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")
-    const CloseIcon = getComponent("CloseIcon")
-
-    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 }>
-                  <CloseIcon />
-                </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,
-  }
-}

package/src/core/components/auth/authorize-btn.jsx

@@ -1,30 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-
-export default class AuthorizeBtn extends React.Component {
-  static propTypes = {
-    onClick: PropTypes.func,
-    isAuthorized: PropTypes.bool,
-    showPopup: PropTypes.bool,
-    getComponent: PropTypes.func.isRequired
-  }
-
-  render() {
-    let { isAuthorized, showPopup, onClick, getComponent } = this.props
-
-    //must be moved out of button component
-    const AuthorizationPopup = getComponent("authorizationPopup", true)
-    const LockAuthIcon = getComponent("LockAuthIcon", true)
-    const UnlockAuthIcon = getComponent("UnlockAuthIcon", true)
-
-    return (
-      <div className="auth-wrapper">
-        <button className={isAuthorized ? "btn authorize locked" : "btn authorize unlocked"} onClick={onClick}>
-          <span>Authorize</span>
-          {isAuthorized ? <LockAuthIcon /> : <UnlockAuthIcon />}
-        </button>
-      { showPopup && <AuthorizationPopup /> }
-      </div>
-    )
-  }
-}

package/src/core/components/auth/authorize-operation-btn.jsx

@@ -1,35 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-
-export default class AuthorizeOperationBtn extends React.Component {
-    static propTypes = {
-      isAuthorized: PropTypes.bool.isRequired,
-      onClick: PropTypes.func,
-      getComponent: PropTypes.func.isRequired
-    }
-
-  onClick =(e) => {
-    e.stopPropagation()
-    let { onClick } = this.props
-
-    if(onClick) {
-      onClick()
-    }
-  }
-
-  render() {
-    let { isAuthorized, getComponent } = this.props
-
-    const LockAuthOperationIcon = getComponent("LockAuthOperationIcon", true)
-    const UnlockAuthOperationIcon = getComponent("UnlockAuthOperationIcon", true)
-
-    return (
-      <button className="authorization__btn"
-        aria-label={isAuthorized ? "authorization button locked" : "authorization button unlocked"}
-        onClick={this.onClick}>
-        {isAuthorized ? <LockAuthOperationIcon className="locked" /> : <UnlockAuthOperationIcon className="unlocked"/>}
-      </button>
-
-    )
-  }
-}

package/src/core/components/auth/auths.jsx

@@ -1,124 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-import ImPropTypes from "react-immutable-proptypes"
-
-export default class Auths extends React.Component {
-  static propTypes = {
-    definitions: ImPropTypes.iterable.isRequired,
-    getComponent: PropTypes.func.isRequired,
-    authSelectors: PropTypes.object.isRequired,
-    authActions: PropTypes.object.isRequired,
-    errSelectors: 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.authorizeWithPersistOption(this.state)
-  }
-
-  logoutClick =(e) => {
-    e.preventDefault()
-
-    let { authActions, definitions } = this.props
-    let auths = definitions.map( (val, key) => {
-      return key
-    }).toArray()
-
-    this.setState(auths.reduce((prev, auth) => {
-      prev[auth] = ""
-      return prev
-    }, {}))
-
-    authActions.logoutWithPersistOption(auths)
-  }
-
-  close =(e) => {
-    e.preventDefault()
-    let { authActions } = this.props
-
-    authActions.showDefinitions(false)
-  }
-
-  render() {
-    let { definitions, getComponent, authSelectors, errSelectors } = this.props
-    const AuthItem = getComponent("AuthItem")
-    const Oauth2 = getComponent("oauth2", true)
-    const Button = getComponent("Button")
-
-    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) => {
-                return <AuthItem
-                  key={name}
-                  schema={schema}
-                  name={name}
-                  getComponent={getComponent}
-                  onAuthChange={this.onAuthChange}
-                  authorized={authorized}
-                  errSelectors={errSelectors}
-                  authSelectors={authSelectors}
-                  />
-              }).toArray()
-            }
-            <div className="auth-btn-wrapper">
-              {
-                nonOauthDefinitions.size === authorizedAuth.size ? <Button className="btn modal-btn auth" onClick={ this.logoutClick } aria-label="Remove authorization">Logout</Button>
-              : <Button type="submit" className="btn modal-btn auth authorize" aria-label="Apply credentials">Authorize</Button>
-              }
-              <Button className="btn modal-btn auth btn-done" onClick={ this.close }>Close</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>
-    )
-  }
-
-}

package/src/core/components/auth/basic-auth.jsx

@@ -1,110 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-import ImPropTypes from "react-immutable-proptypes"
-
-export default class BasicAuth extends React.Component {
-  static propTypes = {
-    authorized: ImPropTypes.map,
-    schema: ImPropTypes.map,
-    getComponent: PropTypes.func.isRequired,
-    onChange: PropTypes.func.isRequired,
-    name: PropTypes.string.isRequired,
-    errSelectors: PropTypes.object.isRequired,
-    authSelectors: PropTypes.object.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, authSelectors } = 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", true)
-    const path = authSelectors.selectAuthPath(name)
-    let username = this.getValue().username
-    let errors = errSelectors.allErrors().filter( err => err.get("authId") === name)
-
-    return (
-      <div>
-        <h4>Basic authorization<JumpToPath path={path} /></h4>
-        { username && <h6>Authorized</h6> }
-        <Row>
-          <Markdown source={ schema.get("description") } />
-        </Row>
-        <Row>
-          <label htmlFor="auth_username">Username:</label>
-          {
-            username ? <code> { username } </code>
-                     : <Col>
-                          <Input 
-                            id="auth_username" 
-                            type="text" 
-                            required="required" 
-                            name="username" 
-                            onChange={ this.onChange } 
-                            autoFocus
-                          />
-                        </Col>
-          }
-        </Row>
-        <Row>
-          <label htmlFor="auth_password">Password:</label>
-            {
-              username ? <code> ****** </code>
-                       : <Col>
-                            <Input 
-                              id="auth_password"
-                              autoComplete="new-password"
-                              name="password"
-                              type="password"
-                              onChange={ this.onChange }
-                            />
-                          </Col>
-            }
-        </Row>
-        {
-          errors.valueSeq().map( (error, key) => {
-            return <AuthError error={ error }
-                              key={ key }/>
-          } )
-        }
-      </div>
-    )
-  }
-
-}

package/src/core/components/auth/error.jsx

@@ -1,24 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-
-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">
-        <b>{ source } { level }</b>
-        <span>{ message }</span>
-      </div>
-    )
-  }
-}

package/src/core/components/auth/oauth2.jsx

@@ -1,283 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-import oauth2Authorize from "core/oauth2-authorize"
-
-export default class Oauth2 extends React.Component {
-  static propTypes = {
-    name: PropTypes.string,
-    authorized: PropTypes.object,
-    getComponent: PropTypes.func.isRequired,
-    schema: PropTypes.object.isRequired,
-    authSelectors: PropTypes.object.isRequired,
-    authActions: PropTypes.object.isRequired,
-    errSelectors: PropTypes.object.isRequired,
-    oas3Selectors: PropTypes.object.isRequired,
-    specSelectors: PropTypes.object.isRequired,
-    errActions: PropTypes.object.isRequired,
-    getConfigs: PropTypes.any
-  }
-
-  constructor(props, context) {
-    super(props, context)
-    let { name, schema, authorized, authSelectors } = this.props
-    let auth = authorized && authorized.get(name)
-    let authConfigs = authSelectors.getConfigs() || {}
-    let username = auth && auth.get("username") || ""
-    let clientId = auth && auth.get("clientId") || authConfigs.clientId || ""
-    let clientSecret = auth && auth.get("clientSecret") || authConfigs.clientSecret || ""
-    let passwordType = auth && auth.get("passwordType") || "basic"
-    let scopes = auth && auth.get("scopes") || authConfigs.scopes || []
-    if (typeof scopes === "string") {
-      scopes = scopes.split(authConfigs.scopeSeparator || " ")
-    }
-
-    this.state = {
-      appName: authConfigs.appName,
-      name: name,
-      schema: schema,
-      scopes: scopes,
-      clientId: clientId,
-      clientSecret: clientSecret,
-      username: username,
-      password: "",
-      passwordType: passwordType
-    }
-  }
-
-  close = (e) => {
-    e.preventDefault()
-    let { authActions } = this.props
-
-    authActions.showDefinitions(false)
-  }
-
-  authorize =() => {
-    let { authActions, errActions, getConfigs, authSelectors, oas3Selectors } = this.props
-    let configs = getConfigs()
-    let authConfigs = authSelectors.getConfigs()
-
-    errActions.clear({authId: name,type: "auth", source: "auth"})
-    oauth2Authorize({
-      auth: this.state,
-      currentServer: oas3Selectors.serverEffectiveValue(oas3Selectors.selectedServer()),
-      authActions,
-      errActions,
-      configs,
-      authConfigs
-    })
-  }
-
-  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)
-  }
-
-  selectScopes =(e) => {
-    if (e.target.dataset.all) {
-      this.setState({
-        scopes: Array.from((this.props.schema.get("allowedScopes") || this.props.schema.get("scopes")).keys())
-      })
-    } else {
-      this.setState({ scopes: [] })
-    }
-  }
-
-  logout =(e) => {
-    e.preventDefault()
-    let { authActions, errActions, name } = this.props
-
-    errActions.clear({authId: name, type: "auth", source: "auth"})
-    authActions.logoutWithPersistOption([ name ])
-  }
-
-  render() {
-    let {
-      schema, getComponent, authSelectors, errSelectors, name, specSelectors
-    } = 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", true)
-    const InitializedInput = getComponent("InitializedInput")
-
-    const { isOAS3 } = specSelectors
-
-    let oidcUrl = isOAS3() ? schema.get("openIdConnectUrl") : null
-
-    // Auth type consts
-    const AUTH_FLOW_IMPLICIT = "implicit"
-    const AUTH_FLOW_PASSWORD = "password"
-    const AUTH_FLOW_ACCESS_CODE = isOAS3() ? (oidcUrl ? "authorization_code" : "authorizationCode") : "accessCode"
-    const AUTH_FLOW_APPLICATION = isOAS3() ? (oidcUrl ? "client_credentials" : "clientCredentials") : "application"
-
-    const path = authSelectors.selectAuthPath(name)
-
-    let authConfigs = authSelectors.getConfigs() || {}
-    let isPkceCodeGrant = !!authConfigs.usePkceWithAuthorizationCodeGrant
-
-    let flow = schema.get("flow")
-    let flowToDisplay = flow === AUTH_FLOW_ACCESS_CODE && isPkceCodeGrant ? flow + " with PKCE" : 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
-    let description = schema.get("description")
-
-    return (
-      <div>
-        <h4>{name} (OAuth2, { flowToDisplay }) <JumpToPath path={path} /></h4>
-        { !this.state.appName ? null : <h5>Application: { this.state.appName } </h5> }
-        { description && <Markdown source={ schema.get("description") } /> }
-
-        { isAuthorized && <h6>Authorized</h6> }
-
-        { oidcUrl && <p>OpenID Connect URL: <code>{ oidcUrl }</code></p> }
-        { ( flow === AUTH_FLOW_IMPLICIT || flow === AUTH_FLOW_ACCESS_CODE ) && <p>Authorization URL: <code>{ schema.get("authorizationUrl") }</code></p> }
-        { ( flow === AUTH_FLOW_PASSWORD || flow === AUTH_FLOW_ACCESS_CODE || flow === AUTH_FLOW_APPLICATION ) && <p>Token URL:<code> { schema.get("tokenUrl") }</code></p> }
-        <p className="flow">Flow: <code>{ flowToDisplay }</code></p>
-
-        {
-          flow !== AUTH_FLOW_PASSWORD ? null
-            : <Row>
-              <Row>
-                <label htmlFor="oauth_username">username:</label>
-                {
-                  isAuthorized ? <code> { this.state.username } </code>
-                    : <Col tablet={10} desktop={10}>
-                      <input id="oauth_username" type="text" data-name="username" onChange={ this.onInputChange } autoFocus/>
-                    </Col>
-                }
-              </Row>
-              {
-
-              }
-              <Row>
-                <label htmlFor="oauth_password">password:</label>
-                {
-                  isAuthorized ? <code> ****** </code>
-                    : <Col tablet={10} desktop={10}>
-                      <input id="oauth_password" type="password" data-name="password" onChange={ this.onInputChange }/>
-                    </Col>
-                }
-              </Row>
-              <Row>
-                <label htmlFor="password_type">Client credentials location:</label>
-                {
-                  isAuthorized ? <code> { this.state.passwordType } </code>
-                    : <Col tablet={10} desktop={10}>
-                      <select id="password_type" data-name="passwordType" onChange={ this.onInputChange }>
-                        <option value="basic">Authorization header</option>
-                        <option value="request-body">Request body</option>
-                      </select>
-                    </Col>
-                }
-              </Row>
-            </Row>
-        }
-        {
-          ( flow === AUTH_FLOW_APPLICATION || flow === AUTH_FLOW_IMPLICIT || flow === AUTH_FLOW_ACCESS_CODE || flow === AUTH_FLOW_PASSWORD ) &&
-          ( !isAuthorized || isAuthorized && this.state.clientId) && <Row>
-            <label htmlFor={ `client_id_${flow}` }>client_id:</label>
-            {
-              isAuthorized ? <code> ****** </code>
-                           : <Col tablet={10} desktop={10}>
-                               <InitializedInput id={`client_id_${flow}`}
-                                      type="text"
-                                      required={ flow === AUTH_FLOW_PASSWORD }
-                                      initialValue={ this.state.clientId }
-                                      data-name="clientId"
-                                      onChange={ this.onInputChange }/>
-                             </Col>
-            }
-          </Row>
-        }
-
-        {
-          ( (flow === AUTH_FLOW_APPLICATION || flow === AUTH_FLOW_ACCESS_CODE || flow === AUTH_FLOW_PASSWORD) && <Row>
-            <label htmlFor={ `client_secret_${flow}` }>client_secret:</label>
-            {
-              isAuthorized ? <code> ****** </code>
-                           : <Col tablet={10} desktop={10}>
-                               <InitializedInput id={ `client_secret_${flow}` }
-                                      initialValue={ this.state.clientSecret }
-                                      type="password"
-                                      data-name="clientSecret"
-                                      onChange={ this.onInputChange }/>
-                             </Col>
-            }
-
-          </Row>
-        )}
-
-        {
-          !isAuthorized && scopes && scopes.size ? <div className="scopes">
-            <h2>
-              Scopes:
-              <a onClick={this.selectScopes} data-all={true}>select all</a>
-              <a onClick={this.selectScopes}>select none</a>
-            </h2>
-            { scopes.map((description, name) => {
-              return (
-                <Row key={ name }>
-                  <div className="checkbox">
-                    <Input data-value={ name }
-                          id={`${name}-${flow}-checkbox-${this.state.name}`}
-                           disabled={ isAuthorized }
-                           checked={ this.state.scopes.includes(name) }
-                           type="checkbox"
-                           onChange={ this.onScopeChange }/>
-                         <label htmlFor={`${name}-${flow}-checkbox-${this.state.name}`}>
-                           <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 &&
-          ( isAuthorized ? <Button className="btn modal-btn auth authorize" onClick={ this.logout } aria-label="Remove authorization">Logout</Button>
-        : <Button className="btn modal-btn auth authorize" onClick={ this.authorize } aria-label="Apply given OAuth2 credentials">Authorize</Button>
-          )
-        }
-          <Button className="btn modal-btn auth btn-done" onClick={ this.close }>Close</Button>
-        </div>
-
-      </div>
-    )
-  }
-}

package/src/core/components/clear.jsx

@@ -1,25 +0,0 @@
-import React, { Component } from "react"
-import PropTypes from "prop-types"
-
-export default class Clear extends Component {
-
-  onClick =() => {
-    let { specActions, path, method } = this.props
-    specActions.clearResponse( path, method )
-    specActions.clearRequest( path, method )
-  }
-
-  render(){
-    return (
-      <button className="btn btn-clear opblock-control__btn" onClick={ this.onClick }>
-        Clear
-      </button>
-    )
-  }
-
-  static propTypes = {
-    specActions: PropTypes.object.isRequired,
-    path: PropTypes.string.isRequired,
-    method: PropTypes.string.isRequired,
-  }
-}