diff --git a/src/main/html/css/api-explorer.css b/src/main/html/css/api-explorer.css index 4368e9909c4..5d93a2ae7f6 100644 --- a/src/main/html/css/api-explorer.css +++ b/src/main/html/css/api-explorer.css @@ -2474,3 +2474,45 @@ body { padding-top: 10px; color: lightblue; } + +.auth-container { + margin: 20px 20px 20px; +} + +.auth_input { + margin-top: 6px; + padding-top: 6px; + padding-bottom: 7px; + padding-left: 12px; + font-family: inherit; + +} + +.token-indicator { + font-size: smaller; + margin-top: 5px; + font-style: italic; + font-family: inherit; +} + +.osf-token-info { + font-size: smaller; + margin-top: 5px; + font-style: italic; + font-family: inherit; +} + +.try-hide { + font-family: inherit; + font-size: inherit; + font-color: inherit; +} + +.put-post-patch-info { + background-color: #d9edf7; +} + +#clear-token-link { + padding-left: 57px; + cursor: pointer; +} diff --git a/src/main/html/index.html b/src/main/html/index.html index a0f9ebcf590..07574f28979 100644 --- a/src/main/html/index.html +++ b/src/main/html/index.html @@ -108,7 +108,6 @@ }); } - // addApiKeyAuthorization(); }, onFailure: function (data) { log("Unable to Load SwaggerUI"); @@ -116,23 +115,6 @@ docExpansion: "none", sorter: "alpha" }); - - // function addApiKeyAuthorization() { - // var key = encodeURIComponent($('#input_apiKey')[0].value); - // if (key && key.trim() != "") { - // var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("Authorization", "Bearer " + key, "header"); - // window.swaggerUi.api.clientAuthorizations.add("key", apiKeyAuth); - // log("added key " + key); - // } - // } - - // $('#input_apiKey').change(addApiKeyAuthorization); - // if you have an apiKey you would like to pre-populate on the page for demonstration purposes... - /* - var apiKey = "myApiKeyXXXX123456789"; - $('#input_apiKey').val(apiKey); - */ - window.swaggerUi.load(); function log() { diff --git a/src/main/javascript/helpers/handlebars.js b/src/main/javascript/helpers/handlebars.js index 58a43d70530..7d21c8957d1 100644 --- a/src/main/javascript/helpers/handlebars.js +++ b/src/main/javascript/helpers/handlebars.js @@ -4,4 +4,12 @@ Handlebars.registerHelper('sanitize', function(html) { // Strip the script tags from the html, and return it as a Handlebars.SafeString html = html.replace(/)<[^<]*)*<\/script>/gi, ''); return new Handlebars.SafeString(html); -}); \ No newline at end of file +}); + +Handlebars.registerHelper('notequal', function(value1, value2, options) { + if (value1 == value2) { + return options.inverse(this); + } else { + return options.fn(this); + } +}); diff --git a/src/main/javascript/view/ApiKeyButton.js b/src/main/javascript/view/ApiKeyButton.js index 941766b1f8b..ebebf5f6c98 100644 --- a/src/main/javascript/view/ApiKeyButton.js +++ b/src/main/javascript/view/ApiKeyButton.js @@ -4,7 +4,8 @@ SwaggerUi.Views.ApiKeyButton = Backbone.View.extend({ // TODO: append this to gl events:{ 'click #apikey_button' : 'toggleApiKeyContainer', - 'click #apply_api_key' : 'applyApiKey' + 'click #apply_api_key' : 'applyApiKey', + 'click #clear-token-link': 'removeApiKey' }, initialize: function(opts){ @@ -15,19 +16,21 @@ SwaggerUi.Views.ApiKeyButton = Backbone.View.extend({ // TODO: append this to gl render: function(){ var template = this.template(); $(this.el).html(template(this.model)); - return this; }, - applyApiKey: function(){ - var keyAuth = new SwaggerClient.ApiKeyAuthorization( - this.model.name, - $('#input_apiKey_entry').val(), - this.model.in - ); - this.router.api.clientAuthorizations.add(this.model.name, keyAuth); - this.router.load(); + var key = encodeURIComponent($('#input_apiKey_entry')[0].value); + if (key && key.trim() != "") { + var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("Authorization", "Bearer " + key, "header"); + this.router.api.clientAuthorizations.add("key", apiKeyAuth); + $('.token-indicator').removeClass("hidden"); + $('.osf-token-info').addClass("hidden"); + $('.put-post-patch-try').removeClass("hidden"); + $('.put-post-patch-info').addClass("hidden"); + } else { + this.removeApiKey(); + } $('#apikey_container').show(); }, @@ -35,10 +38,14 @@ SwaggerUi.Views.ApiKeyButton = Backbone.View.extend({ // TODO: append this to gl if ($('#apikey_container').length) { var elem = $('#apikey_container').first(); + var button = $('#apikey_menu_icon'); if (elem.is(':visible')){ elem.hide(); + button.removeClass("glyphicon-menu-down").addClass("glyphicon glyphicon-menu-right"); + } else { + button.removeClass("glyphicon-menu-right").addClass("glyphicon-menu-down"); // hide others $('.auth_container').hide(); @@ -49,6 +56,15 @@ SwaggerUi.Views.ApiKeyButton = Backbone.View.extend({ // TODO: append this to gl template: function(){ return Handlebars.templates.apikey_button_view; + }, + + removeApiKey: function() { + this.router.api.clientAuthorizations.remove("key"); + $('#input_apiKey_entry')[0].value = ''; + $('.token-indicator').addClass("hidden"); + $('.osf-token-info').removeClass("hidden"); + $('.put-post-patch-try').addClass("hidden"); + $('.put-post-patch-info').removeClass("hidden"); } -}); \ No newline at end of file +}); diff --git a/src/main/javascript/view/MainView.js b/src/main/javascript/view/MainView.js index e484a940469..4f0d507330d 100644 --- a/src/main/javascript/view/MainView.js +++ b/src/main/javascript/view/MainView.js @@ -100,23 +100,6 @@ SwaggerUi.Views.MainView = Backbone.View.extend({ }, render: function () { - if (this.model.securityDefinitions) { - for (var name in this.model.securityDefinitions) { - var auth = this.model.securityDefinitions[name]; - var button; - - if (auth.type === 'apiKey' && $('#apikey_button').length === 0) { - button = new SwaggerUi.Views.ApiKeyButton({model: auth, router: this.router}).render().el; - $('.auth_main_container').append(button); - } - - if (auth.type === 'basicAuth' && $('#basic_auth_button').length === 0) { - button = new SwaggerUi.Views.BasicAuthButton({model: auth, router: this.router}).render().el; - $('.auth_main_container').append(button); - } - } - } - // Render the outer container for resources $(this.el).html(Handlebars.templates.main(this.model)); @@ -137,6 +120,7 @@ SwaggerUi.Views.MainView = Backbone.View.extend({ this.addResource(resource, this.model.auths); this.addSidebarHeader(resource, i); + this.addSidebarToken(resource, i); } $('.propWrap').hover(function onHover() { @@ -151,6 +135,23 @@ SwaggerUi.Views.MainView = Backbone.View.extend({ $(window).scrollTop(0) } + if (this.model.securityDefinitions) { + for (var name in this.model.securityDefinitions) { + var auth = this.model.securityDefinitions[name]; + var button; + + if (auth.type === 'apiKey' && $('#apikey_button').length === 0) { + button = new SwaggerUi.Views.ApiKeyButton({model: auth, router: this.router}).render().el; + $('.auth_main_container').append(button); + } + + if (auth.type === 'basicAuth' && $('#basic_auth_button').length === 0) { + button = new SwaggerUi.Views.BasicAuthButton({model: auth, router: this.router}).render().el; + $('.auth_main_container').append(button); + } + } + } + return this; }, @@ -173,23 +174,23 @@ SwaggerUi.Views.MainView = Backbone.View.extend({ $('#resources').append(resourceView.render().el); }, - // addSidebarToken: function (resource, i) { - // resource.id = resource.id.replace(/\s/g, '_'); - // var sidebarView = new SwaggerUi.Views.SidebarHeaderView({ - // model: resource, - // tagName: 'div', - // className: function () { - // return i == 0 ? 'active' : '' - // }, - // attributes: { - // "data-resource": 'resource_' + resource.name, - // "label": resource.name - // }, - // router: this.router, - // swaggerOptions: this.options.swaggerOptions - // }); - // $('#token-generator', $(this.el)).append(sidebarView.render().el); - // }, + addSidebarToken: function (resource, i) { + resource.id = resource.id.replace(/\s/g, '_'); + var sidebarView = new SwaggerUi.Views.SidebarHeaderView({ + model: resource, + tagName: 'div', + className: function () { + return i == 0 ? 'active' : '' + }, + attributes: { + "data-resource": 'resource_' + resource.name, + "label": resource.name + }, + router: this.router, + swaggerOptions: this.options.swaggerOptions + }); + $('#token-generator', $(this.el)).append(sidebarView.render().el); + }, addSidebarHeader: function (resource, i) { @@ -240,42 +241,42 @@ SwaggerUi.Views.MainView = Backbone.View.extend({ } }); - } + }, + + toggleToken: function (e) { + var t = $(".token-generator"), + tg = $("[data-tg-switch]"); - // toggleToken: function (e) { - // var t = $(".token-generator"), - // tg = $("[data-tg-switch]"); - - // t.toggleClass("hide"); - // t.hasClass("hide") ? tg.removeClass("active") : tg.addClass("active"); - // t.parents(".sticky-nav").trigger("mobile_nav:update") - // }, - - // closeToken: function (e) { - // var t = $(".token-generator"), - // tg = $("[data-tg-switch]"); - - // t.addClass("hide"); - // tg.removeClass("active"); - // t.parents(".sticky-nav").trigger("mobile_nav:update") - // }, - - // openToken: function (e) { - // var t = $(".token-generator"), - // tg = $("[data-tg-switch]"); - - // t.removeClass("hide"); - // tg.removeClass("active"); - // t.parents(".sticky-nav").trigger("mobile_nav:update") - // }, - - // showCustom: function(e){ - // if (e) { - // e.preventDefault(); - // } - // this.trigger('update-swagger-ui', { - // url: $('#input_baseUrl').val(), - // apiKey: $('#input_apiKey').val() - // }); - // } + t.toggleClass("hide"); + t.hasClass("hide") ? tg.removeClass("active") : tg.addClass("active"); + t.parents(".sticky-nav").trigger("mobile_nav:update") + }, + + closeToken: function (e) { + var t = $(".token-generator"), + tg = $("[data-tg-switch]"); + + t.addClass("hide"); + tg.removeClass("active"); + t.parents(".sticky-nav").trigger("mobile_nav:update") + }, + + openToken: function (e) { + var t = $(".token-generator"), + tg = $("[data-tg-switch]"); + + t.removeClass("hide"); + tg.removeClass("active"); + t.parents(".sticky-nav").trigger("mobile_nav:update") + }, + + showCustom: function(e){ + if (e) { + e.preventDefault(); + } + this.trigger('update-swagger-ui', { + url: $('#input_baseUrl').val(), + apiKey: $('#input_apiKey').val() + }); + } }); diff --git a/src/main/javascript/view/OperationView.js b/src/main/javascript/view/OperationView.js index 2c5c633ff36..273e6348891 100644 --- a/src/main/javascript/view/OperationView.js +++ b/src/main/javascript/view/OperationView.js @@ -26,7 +26,6 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({ this.nickname = this.model.nickname; this.model.encodedParentId = encodeURIComponent(this.parentId); this.model.endpoint = api_topics.indexOf(this.model.summary) == -1 ? true : false; - this.model.read = this.model.method == 'get'; this.schemaName = this.model.operation['x-response-schema']; return this; }, diff --git a/src/main/template/apikey_button_view.handlebars b/src/main/template/apikey_button_view.handlebars index 83d52ff248b..7c8c488e858 100644 --- a/src/main/template/apikey_button_view.handlebars +++ b/src/main/template/apikey_button_view.handlebars @@ -1,11 +1,11 @@
- + API Authorization
{{keyName}}
- -
apply
+ +
+
- diff --git a/src/main/template/main.handlebars b/src/main/template/main.handlebars index d9539fc918e..6488aeddcb6 100644 --- a/src/main/template/main.handlebars +++ b/src/main/template/main.handlebars @@ -5,6 +5,13 @@ OSF API +
+
+
+
+ Get an API Token +
+
API Reference:
diff --git a/src/main/template/operation.handlebars b/src/main/template/operation.handlebars index 618d3661422..2040e9439cb 100644 --- a/src/main/template/operation.handlebars +++ b/src/main/template/operation.handlebars @@ -37,51 +37,61 @@
{{{description}}}
{{/if}} + {{#notequal this.method 'get'}} +

To enable the "try it out" feature for patch, post, or delete requests, + enter an OSF API Token at the top of the sidebar.

+
+