updated for auth

src/main/coffeescript/view/ApiKeyButton.coffee

@@ -0,0 +1,31 @@
+class ApiKeyButton extends Backbone.View
+  initialize: ->
+
+  render: ->
+    template = @template()
+    $(@el).html(template(@model))
+
+    @
+
+  events:
+    "click #apikey_button" : "toggleApiKeyContainer"
+    "click #apply_api_key" : "applyApiKey"
+
+  applyApiKey: ->
+    window.authorizations.add(@model.name, new ApiKeyAuthorization(@model.name, $("#input_apiKey_entry").val(), @model.in))
+    window.swaggerUi.load()
+    elem = $('#apikey_container').show()
+
+  toggleApiKeyContainer: ->
+    if $('#apikey_container').length > 0
+      elem = $('#apikey_container').first()
+      if elem.is ':visible'
+        elem.hide()
+      else
+        # hide others
+        $('.auth_container').hide()
+        elem.show()
+
+  template: ->
+    Handlebars.templates.apikey_button_view
+

src/main/coffeescript/view/BasicAuthButton.coffee

@@ -0,0 +1,35 @@
+class BasicAuthButton extends Backbone.View
+  initialize: ->
+
+  render: ->
+    template = @template()
+    $(@el).html(template(@model))
+
+    @
+
+  events:
+    "click #basic_auth_button" : "togglePasswordContainer"
+    "click #apply_basic_auth" : "applyPassword"
+
+  applyPassword: ->
+    console.log "applying password"
+    username = $(".input_username").val()
+    password = $(".input_password").val()
+    window.authorizations.add(@model.type, new PasswordAuthorization("basic", username, password))
+    window.swaggerUi.load()
+    elem = $('#basic_auth_container').hide()
+
+
+  togglePasswordContainer: ->
+    if $('#basic_auth_container').length > 0
+      elem = $('#basic_auth_container').show()
+      if elem.is ':visible'
+        elem.slideUp()
+      else
+        # hide others
+        $('.auth_container').hide()
+        elem.show()
+
+  template: ->
+    Handlebars.templates.basic_auth_button_view
+

src/main/coffeescript/view/MainView.coffee

@@ -5,14 +5,12 @@ class MainView extends Backbone.View
   }
 
   initialize: (opts={}) ->
-    if opts.swaggerOptions.sorter
-      sorterName = opts.swaggerOptions.sorter
-      sorter = sorters[sorterName]
-      if @model.apisArray
-        for route in @model.apisArray
-          route.operationsArray.sort sorter
-        if (sorterName == "alpha") # sort top level paths if alpha 
-          @model.apisArray.sort sorter
+    # set up the UI for input
+    @model.auths = []
+    for key, value of @model.securityDefinitions
+      auth = {name: key, type: value.type, value: value}
+      @model.auths.push auth
+
 
     if @model.info and @model.info.license and typeof @model.info.license is 'string'
       name = @model.info.license
@@ -39,6 +37,16 @@ class MainView extends Backbone.View
         @model.validatorUrl = "http://online.swagger.io/validator"
  
   render: ->
+    if @model.securityDefinitions
+      for name of @model.securityDefinitions
+        auth = @model.securityDefinitions[name]
+        if auth.type is "apiKey" and $("#apikey_button").length is 0
+          button = new ApiKeyButton({model: auth}).render().el
+          $('.auth_main_container').append button
+        if auth.type is "basicAuth" and $("#basic_auth_button").length is 0
+          button = new BasicAuthButton({model: auth}).render().el
+          $('.auth_main_container').append button
+
     # Render the outer container for resources
     $(@el).html(Handlebars.templates.main(@model))
 
@@ -53,13 +61,20 @@ class MainView extends Backbone.View
         counter += 1
       resource.id = id
       resources[id] = resource
-      @addResource resource
+      @addResource resource, @model.auths
     @
 
-  addResource: (resource) ->
+  addResource: (resource, auths) ->
     # Render a resource and add it to resources li
     resource.id = resource.id.replace(/\s/g, '_')
-    resourceView = new ResourceView({model: resource, tagName: 'li', id: 'resource_' + resource.id, className: 'resource', swaggerOptions: @options.swaggerOptions})
+    resourceView = new ResourceView({
+      model: resource, 
+      tagName: 'li', 
+      id: 'resource_' + resource.id, 
+      className: 'resource', 
+      auths: auths,
+      swaggerOptions: @options.swaggerOptions
+    })
     $('#resources').append resourceView.render().el
 
   clear: ->

src/main/coffeescript/view/OperationView.coffee

@@ -10,7 +10,10 @@ class OperationView extends Backbone.View
     'mouseout .api-ic'        : 'mouseExit'
   }
 
-  initialize: ->
+  initialize: (opts={}) ->
+    @auths = opts.auths
+
+    @
 
   mouseEnter: (e) ->
     elem = $(e.currentTarget.parentNode).find('#api_information_panel')
@@ -49,15 +52,28 @@ class OperationView extends Backbone.View
     if @model.description
       @model.description = @model.description.replace(/(?:\r\n|\r|\n)/g, '<br />')
     @model.oauth = null
+    log @model.authorizations
     if @model.authorizations
-      for k, v of @model.authorizations
-        if k == "oauth2"
-          if @model.oauth == null
-            @model.oauth = {}
-          if @model.oauth.scopes is undefined
-            @model.oauth.scopes = []
-          for o in v
-            @model.oauth.scopes.push o
+      if Array.isArray @model.authorizations
+        for auths in @model.authorizations
+          for key, auth of auths
+            for a of @auths
+              auth = @auths[a]
+              if auth.type == 'oauth2'
+                @model.oauth = {}
+                @model.oauth.scopes = []
+                for k, v of auth.value.scopes
+                  o = {scope: k, description: v}
+                  @model.oauth.scopes.push o
+      else
+        for k, v of @model.authorizations
+          if k == "oauth2"
+            if @model.oauth == null
+              @model.oauth = {}
+            if @model.oauth.scopes is undefined
+              @model.oauth.scopes = []
+            for o in v
+              @model.oauth.scopes.push o
 
     if typeof @model.responses isnt 'undefined'
       @model.responseMessages = []

src/main/coffeescript/view/ResourceView.coffee

@@ -1,5 +1,6 @@
 class ResourceView extends Backbone.View
-  initialize: ->
+  initialize: (opts={}) ->
+    @auths = opts.auths
     if "" is @model.description 
       @model.description = null
 
@@ -36,7 +37,13 @@ class ResourceView extends Backbone.View
     operation.number = @number
 
     # Render an operation and add it to operations li
-    operationView = new OperationView({model: operation, tagName: 'li', className: 'endpoint', swaggerOptions: @options.swaggerOptions})
+    operationView = new OperationView({
+      model: operation,
+      tagName: 'li',
+      className: 'endpoint',
+      swaggerOptions: @options.swaggerOptions,
+      auths: @auths
+    })
     $('.endpoints', $(@el)).append operationView.render().el
 
     @number++

src/main/html/css/screen.css

@@ -1100,6 +1100,85 @@
 .swagger-section .api-popup-actions {
   padding-top: 10px;
 }
+.auth {
+  text-align: right;
+  height: 15px;
+  float: right;
+  clear: both;
+  display: inline-block;
+  position: relative;
+  z-index: 3;
+}
+.auth_icon {
+  float: right;
+}
+.auth_container_2 {
+  visibility: visible;
+  position: absolute;
+  width: 250px;
+  margin-top: 26px;
+  float: left;
+  display: none;
+  border: solid 2px;
+  background: white;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -o-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -khtml-border-radius: 4px;
+  z-index: 2;
+}
+.auth_label {
+  text-align: left;
+  clear: left;
+  float: left;
+  padding-left: 10px;
+  width: 90px;
+}
+.auth_submit {
+  border-left: 1px;
+  border-right: 1px;
+  margin-top: 25px;
+  margin-bottom: 25px;
+  text-align: center;
+}
+.auth_button {
+  display: block;
+  float: right;
+  text-align: right;
+}
+.auth_submit_button {
+  display: block;
+  text-decoration: none;
+  font-weight: bold;
+  padding: 6px 8px;
+  font-size: 0.9em;
+  color: white;
+  float: right;
+  text-align: center;
+  background: #547f00;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -o-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -khtml-border-radius: 4px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-right: 10px;
+}
+.auth_input {
+  float: left;
+}
+.authentication_container {
+  float: left;
+  display: block;
+  background: yellow;
+}
+.auth_button .auth_icon {
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+}
 .swagger-section .access {
   float: right;
 }

src/main/less/auth.less

@@ -80,4 +80,95 @@
   padding-top: 10px;
 }
 
+}
+
+.auth {
+  text-align: right;
+  height: 15px;
+  float: right;
+  clear: both;
+  display: inline-block;
+  position: relative;
+  z-index: 3;
+}
+
+.auth_icon {
+  float: right;
+}
+
+.auth_container_2 {
+  visibility: visible;
+  position: absolute;
+  width: 250px;
+  float:left;
+  margin-top: 26px;
+  float: left;
+  display: none;
+  border: solid 2px;
+  background: white;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -o-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -khtml-border-radius: 4px;
+
+  z-index: 2;
+}
+
+.auth_label {
+  text-align: left;
+  clear: left;
+  float: left;
+  padding-left: 10px;
+  width: 90px;
+}
+
+.auth_submit {
+  border-left: 1px;
+  border-right: 1px;
+  margin-top: 25px;
+  margin-bottom: 25px;
+  text-align: center;
+}
+
+.auth_button {
+  display: block;
+  float: right;
+  text-align: right;
+}
+
+.auth_submit_button {
+  display: block;
+  text-decoration: none;
+  font-weight: bold;
+  padding: 6px 8px;
+  font-size: 0.9em;
+  color: white;
+  float: right;
+  text-align: center;
+  background: #547f00;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -o-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -khtml-border-radius: 4px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-right: 10px;
+}
+
+.auth_input {
+  float: left;
+}
+
+.authentication_container {
+  float: left;
+  display: block;
+  background: yellow;
+}
+
+.auth_button .auth_icon {
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
 }

src/main/template/apikey_button_view.handlebars

@@ -0,0 +1,9 @@
+<div class='auth_button' id='apikey_button'><img class='auth_icon' alt='apply api key' src='images/apikey.jpeg'></div>
+<div class='auth_container' id='apikey_container'>
+  <div class='key_input_container'>
+    <div class='auth_label'>{{keyName}}</div>
+    <input placeholder="api_key" class="auth_input" id="input_apiKey_entry" name="apiKey" type="text"/>
+    <div class='auth_submit'><a class='auth_submit_button' id="apply_api_key" href="#">apply</a></div>
+  </div>
+</div>
+

src/main/template/basic_auth_button_view.handlebars

@@ -0,0 +1,11 @@
+<div class='auth_button' id='basic_auth_button'><img class='auth_icon' src='images/password.jpeg'></div>
+<div class='auth_container' id='basic_auth_container'>
+  <div class='key_input_container'>
+    <div class="auth_label">Username</div>
+    <input placeholder="username" class="auth_input" id="input_username" name="username" type="text"/>
+    <div class="auth_label">Password</div>
+    <input placeholder="password" class="auth_input" id="input_password" name="password" type="password"/>
+    <div class='auth_submit'><a class='auth_submit_button' id="apply_basic_auth" href="#">apply</a></div>
+  </div>
+</div>
+