@upendra19/swagger-ui-custom 1.0.0

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

@@ -0,0 +1,124 @@
+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

@@ -0,0 +1,110 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,283 @@
+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

@@ -0,0 +1,25 @@
+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,
+  }
+}

package/src/core/components/contact.jsx

@@ -0,0 +1,44 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+import { safeBuildUrl, sanitizeUrl } from "core/utils/url"
+
+class Contact extends React.Component {
+  static propTypes = {
+    data: PropTypes.object,
+    getComponent: PropTypes.func.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    selectedServer: PropTypes.string,
+    url: PropTypes.string.isRequired,
+  }
+
+  render() {
+    const { data, getComponent, selectedServer, url: specUrl } = this.props
+    const name = data.get("name", "the developer")
+    const url = safeBuildUrl(data.get("url"), specUrl, { selectedServer })
+    const email = data.get("email")
+
+    const Link = getComponent("Link")
+
+    return (
+      <div className="info__contact">
+        {url && (
+          <div>
+            <Link href={sanitizeUrl(url)} target="_blank">
+              {name} - Website
+            </Link>
+          </div>
+        )}
+        {email && (
+          <Link href={sanitizeUrl(`mailto:${email}`)}>
+            {url ? `Send email to ${name}` : `Contact ${name}`}
+          </Link>
+        )}
+      </div>
+    )
+  }
+}
+
+export default Contact

package/src/core/components/content-type.jsx

@@ -0,0 +1,64 @@
+import React from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+import { fromJS } from "immutable"
+
+const noop = ()=>{}
+
+export default class ContentType extends React.Component {
+  static propTypes = {
+    ariaControls: PropTypes.string,
+    contentTypes: PropTypes.oneOfType([ImPropTypes.list, ImPropTypes.set, ImPropTypes.seq]),
+    controlId: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    className: PropTypes.string,
+    ariaLabel: PropTypes.string
+  }
+
+  static defaultProps = {
+    onChange: noop,
+    value: null,
+    contentTypes: fromJS(["application/json"]),
+  }
+
+  componentDidMount() {
+    // Populate the form initially
+    const { contentTypes, onChange } = this.props
+    if (contentTypes && contentTypes.size) {
+      onChange(contentTypes.first())
+    }
+  }
+
+  componentDidUpdate() {
+    const { contentTypes, value, onChange } = this.props
+
+    if (!contentTypes || !contentTypes.size) {
+      return
+    }
+
+    if (!contentTypes.includes(value)) {
+      onChange(contentTypes.first())
+    }
+  }
+
+  onChangeWrapper = e => this.props.onChange(e.target.value)
+
+  render() {
+    let { ariaControls, ariaLabel, className, contentTypes, controlId, value } = this.props
+
+    if ( !contentTypes || !contentTypes.size )
+      return null
+
+    return (
+      <div className={ "content-type-wrapper " + ( className || "" ) }>
+        <select aria-controls={ariaControls} aria-label={ariaLabel} className="content-type" id={controlId} onChange={this.onChangeWrapper} value={value || ""} >
+          { contentTypes.map( (val) => {
+            return <option key={ val } value={ val }>{ val }</option>
+          }).toArray()}
+        </select>
+      </div>
+    )
+  }
+  
+}