How do I customize the authz dialog box to pre-populate the username text box?

[ghost]

I am trying to customize the Authorization pop up dialog box in Swagger UI 3 to pre-populate the user name as shown in the picture below.

The application I am working on embeds the swagger ui in an iframe and stores the user name in browser session storage. I have not found a 'reducer' that would help me do this in here and neither have I found any other alternative other than use the authorize 'selector' to return an object like this -

system.Im.Map({
                          "basic_auth": system.Im.Map({
                            "name": "basic_auth",
                            "schema": system.Im.Map({"type": "basic"}),
                            "value": {
                              "username": username // user name read from window.sessionStorage
                            }
                          })
                        })

This obviously sets the user name in the box but makes the swagger ui believe that the user is logged in when in reality the user has not really logged in yet.
I am obviously using the wrong tool here aka the selector; but I could not find a reducer that I could work with. While I am still looking around the swagger ui source code for ways to do this correctly, I thought asking the forum may help. Any pointers on the best way to achieve this would be appreciated. FWIW - I am trying to see if using a wrapSelector for the authorized selector would do the trick.

[ghost]

Providing some more info about my struggle with this with the authorize reducer (see code snippet from source below); it seems that the authorize reducer simply assumes a set of credentials if simply a username is present and does not really check if the password has a set value (unless by design this assumes an empty string or null as a valid password value) and renders the logout button on the auth pop up. Is there any way to change the behaviour of this reducer?

  [AUTHORIZE]: (state, { payload } ) =>{
    let securities = fromJS(payload)
    let map = state.get("authorized") || Map()

    // refactor withMutations
    securities.entrySeq().forEach( ([ key, security ]) => {
      let type = security.getIn(["schema", "type"])

      if ( type === "apiKey" || type === "http" ) {
        map = map.set(key, security)
      } else if ( type === "basic" ) {
        let username = security.getIn(["value", "username"])
        let password = security.getIn(["value", "password"])

        map = map.setIn([key, "value"], {
          username: username,
          header: "Basic " + btoa(username + ":" + password)
        })

        map = map.setIn([key, "schema"], security.get("schema"))
      }
    })

    return state.set( "authorized", map )
  }

[shockey]

Hey @gautampriya!

Your suspicion is correct - the selector is the wrong tool for the job. Selectors get data from the application state, it sounds like you want to take data you have in local storage and put it into the application state. For that sort of thing, you'd want to use an action, which is a higher level interface that eventually feeds data into a reducer.

In terms of giving that data to Swagger-UI, I think what you're really looking for is an interface like the one described in #2915. It's still in progress, but in the meantime there are some workarounds that use internal actions: #2915 (comment)

I hope this helps. Closing for now - if there's anything else, or I misunderstood something, just reply!

[lock]

Locking due to inactivity.

This is done to avoid resurrecting old issues and bumping long threads with new, possibly unrelated content.

If you think you're experiencing something similar to what you've found here: please open a new issue, follow the template, and reference this issue in your report.

Thanks!