kyy/swagger-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Put authorizations into popup

Browse Source
This commit is contained in:
Anna Bodnia
2016-02-23 20:56:09 +02:00
parent 337b9bc922
commit ff318ad23c
12 changed files with 207 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/main/html/css/print.css
View File

@@ -1181,6 +1181,10 @@
.swagger-section .oauth_submit {
text-align: center;
}
.swagger-section .authorize__btn:hover {
text-decoration: underline;
cursor: pointer;
}
.swagger-section .auth_container .basic_auth__title {
color: #547f00;
font-size: 1.2em;

4
src/main/html/css/screen.css
View File

@@ -1181,6 +1181,10 @@
.swagger-section .oauth_submit {
text-align: center;
}
.swagger-section .authorize__btn:hover {
text-decoration: underline;
cursor: pointer;
}
.swagger-section .auth_container .basic_auth__title {
color: #547f00;
font-size: 1.2em;

2
src/main/html/index.html
View File

@@ -36,7 +36,7 @@
if (url && url.length > 1) {
url = decodeURIComponent(url[1]);
} else {
url = "http://petstore.swagger.io/v2/swagger.json";
url = "http://localhost:3001/swagger.json";
}
hljs.configure({

2
src/main/javascript/view/ApiKeyButton.js
View File

@@ -14,7 +14,7 @@ SwaggerUi.Views.ApiKeyButton = Backbone.View.extend({ // TODO: append this to gl
},
render: function(){
$(this.el).html(this.template(this.model));
this.$el.html(this.template(this.model));
return this;
},

52
src/main/javascript/view/AuthView.js Normal file
View File

@@ -0,0 +1,52 @@
'use strict';
SwaggerUi.Views.AuthView = Backbone.View.extend({
events: {
'click .authorize__btn': 'authorizeBtnClick'
},
tpls: {
popup: Handlebars.templates.popup,
authBtn: Handlebars.templates.auth_button
},
initialize: function(){},
render: function () {
this.$el.html(this.tpls.authBtn());
return this;
},
authorizeBtnClick: function (e) {
var authsModel;
e.preventDefault();
authsModel = {title: 'Please authorize', content: this.renderAuths()};
this.popup = new SwaggerUi.Views.PopupView({model: authsModel});
this.popup.render();
},
renderAuths: function () {
var name, authEl;
var el = $('<div>');
//todo refactor, copy-pasted from MainView.js
for (name in this.model) {
auth = this.model[name];
if (auth.type === 'apiKey') {
authEl = new SwaggerUi.Views.ApiKeyButton({model: auth, router: this.router}).render().el;
el.append(authEl);
}
if (auth.type === 'basic' && el.find('.basic_auth_container').length === 0) {
authEl = new SwaggerUi.Views.BasicAuthButton({model: auth, router: this.router}).render().el;
el.append(authEl);
}
}
return el.html();
}
});

15
src/main/javascript/view/MainView.js
View File

@@ -89,18 +89,9 @@ SwaggerUi.Views.MainView = Backbone.View.extend({
$(this.el).html(Handlebars.templates.main(this.model));
this.model.securityDefinitions = this.model.securityDefinitions || {};
for (name in this.model.securityDefinitions) {
auth = this.model.securityDefinitions[name];
if (auth.type === 'apiKey') {
authEl = new SwaggerUi.Views.ApiKeyButton({model: auth, router: this.router}).render().el;
$('.auth_main_container').append(authEl);
}
if (auth.type === 'basic' && $('.auth_main_container .basic_auth_container').length === 0) {
authEl = new SwaggerUi.Views.BasicAuthButton({model: auth, router: this.router}).render().el;
$('.auth_main_container').append(authEl);
}
if (this.model.securityDefinitions) {
this.authView = new SwaggerUi.Views.AuthView({model: this.model.securityDefinitions});
this.$('.authorize-wrapper').append(this.authView.render().el);
}
// Render each resource

200
src/main/javascript/view/OperationView.js
View File

@@ -32,21 +32,21 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
},
selectText: function(event) {
var doc = document,
text = event.target.firstChild,
range,
selection;
if (doc.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
var doc = document,
text = event.target.firstChild,
range,
selection;
if (doc.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
},
mouseEnter: function(e) {
@@ -91,9 +91,54 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
this.model.isReadOnly = true;
}
this.model.description = this.model.description || this.model.notes;
this.handleAuth();
this.model.oauth = null;
modelAuths = this.model.authorizations || this.model.security;
if (modelAuths) {
if (Array.isArray(modelAuths)) {
for (l = 0, len = modelAuths.length; l < len; l++) {
auths = modelAuths[l];
for (key in auths) {
for (a in this.auths) {
auth = this.auths[a];
if (key === auth.name) {
if (auth.type === 'oauth2') {
this.model.oauth = {};
this.model.oauth.scopes = [];
ref1 = auth.value.scopes;
for (k in ref1) {
v = ref1[k];
scopeIndex = auths[key].indexOf(k);
if (scopeIndex >= 0) {
o = {
scope: k,
description: v
};
this.model.oauth.scopes.push(o);
}
}
}
}
}
}
}
} else {
for (k in modelAuths) {
v = modelAuths[k];
if (k === 'oauth2') {
if (this.model.oauth === null) {
this.model.oauth = {};
}
if (this.model.oauth.scopes === void 0) {
this.model.oauth.scopes = [];
}
for (m = 0, len1 = v.length; m < len1; m++) {
o = v[m];
this.model.oauth.scopes.push(o);
}
}
}
}
}
if (typeof this.model.responses !== 'undefined') {
this.model.responseMessages = [];
ref2 = this.model.responses;
@@ -447,7 +492,7 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
// wraps a jquery response as a shred response
wrap: function(data) {
var h, headerArray, headers, i, l, len, o;
var h, headerArray, headers, i, l, len, o;
headers = {};
headerArray = data.getAllResponseHeaders().split('\r');
for (l = 0, len = headerArray.length; l < len; l++) {
@@ -624,7 +669,7 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
code = $('<code />').text('no content');
pre = $('<pre class="json" />').append(code);
// JSON
// JSON
} else if (contentType === 'application/json' || /\+json$/.test(contentType)) {
var json = null;
try {
@@ -635,35 +680,35 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
code = $('<code />').text(json);
pre = $('<pre class="json" />').append(code);
// XML
// XML
} else if (contentType === 'application/xml' || /\+xml$/.test(contentType)) {
code = $('<code />').text(this.formatXml(content));
pre = $('<pre class="xml" />').append(code);
// HTML
// HTML
} else if (contentType === 'text/html') {
code = $('<code />').html(_.escape(content));
pre = $('<pre class="xml" />').append(code);
// Plain Text
// Plain Text
} else if (/text\/plain/.test(contentType)) {
code = $('<code />').text(content);
pre = $('<pre class="plain" />').append(code);
// Image
// Image
} else if (/^image\//.test(contentType)) {
pre = $('<img>').attr('src', url);
// Audio
// Audio
} else if (/^audio\//.test(contentType) && supportsAudioPlayback(contentType)) {
pre = $('<audio controls>').append($('<source>').attr('src', url).attr('type', contentType));
// Download
// Download
} else if (headers['Content-Disposition'] && (/attachment/).test(headers['Content-Disposition']) ||
headers['content-disposition'] && (/attachment/).test(headers['content-disposition']) ||
headers['Content-Description'] && (/File Transfer/).test(headers['Content-Description']) ||
headers['content-description'] && (/File Transfer/).test(headers['content-description'])) {
headers['content-disposition'] && (/attachment/).test(headers['content-disposition']) ||
headers['Content-Description'] && (/File Transfer/).test(headers['Content-Description']) ||
headers['content-description'] && (/File Transfer/).test(headers['content-description'])) {
if ('Blob' in window) {
var type = contentType || 'text/html';
@@ -691,11 +736,11 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
pre = $('<pre class="json" />').append('Download headers detected but your browser does not support downloading binary via XHR (Blob).');
}
// Location header based redirect download
// Location header based redirect download
} else if(headers.location || headers.Location) {
window.location = response.url;
// Anything else (CORS)
// Anything else (CORS)
} else {
code = $('<code />').text(content);
pre = $('<pre class="json" />').append(code);
@@ -721,8 +766,8 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
if (opts.showRequestHeaders) {
var form = $('.sandbox', $(this.el)),
map = this.getInputMap(form),
requestHeaders = this.model.getHeaderParams(map);
map = this.getInputMap(form),
requestHeaders = this.model.getHeaderParams(map);
delete requestHeaders['Content-Type'];
$('.request_headers', $(this.el)).html('<pre>' + _.escape(JSON.stringify(requestHeaders, null, ' ')).replace(/\n/g, '<br>') + '</pre>');
}
@@ -795,95 +840,6 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
}
}
return null;
},
handleAuth: function () {
var modelAuths, auths, i, l, len, len1, ref1, scopeIndex;
var definitionsMap = {};
this.auths = this.auths || [];
for (l = 0, len = this.auths.length; l < len; l++) {
definitionsMap[this.auths[l].name] = this.auths[l].value;
}
this.model.oauth = null;
modelAuths = this.model.authorizations || this.model.security;
if (!modelAuths) { return null; }
if (Array.isArray(modelAuths)) {
modelAuths.forEach(function (security) {
for (i in security) {
security[i] = security[i] || {};
switch (security[i].type) {
case 'apiKey': break;
case 'basic': break;
default:
//handle from definitions
}
}
});
}
if (Array.isArray(modelAuths)) {
for (l = 0, len = modelAuths.length; l < len; l++) {
//auths - single auth from security
auths = modelAuths[l];
for (key in auths) {
//this.auths - auth from definitions
for (a in this.auths) {
//auth - one single auth from definition
auth = this.auths[a];
// if security name is in definitions
if (key === auth.name) {
if (auth.type === 'oauth2') {
this.model.oauth = {};
this.model.oauth.scopes = [];
ref1 = auth.value.scopes;
for (k in ref1) {
v = ref1[k];
scopeIndex = auths[key].indexOf(k);
if (scopeIndex >= 0) {
o = {
scope: k,
description: v
};
this.model.oauth.scopes.push(o);
}
}
}
//if (auth.type === 'apiKey') {
// console.log('apiKey')
//}
}
}
}
}
} else {
for (k in modelAuths) {
v = modelAuths[k];
if (k === 'oauth2') {
if (this.model.oauth === null) {
this.model.oauth = {};
}
if (this.model.oauth.scopes === void 0) {
this.model.oauth.scopes = [];
}
for (m = 0, len1 = v.length; m < len1; m++) {
o = v[m];
this.model.oauth.scopes.push(o);
}
}
}
}
}
});

44
src/main/javascript/view/PopupView.js Normal file
View File

@@ -0,0 +1,44 @@
'use strict';
SwaggerUi.Views.PopupView = Backbone.View.extend({
events: {
'click .api-popup-cancel': 'cancelClick'
},
template: Handlebars.templates.popup,
className: 'api-popup-dialog',
initialize: function(){},
render: function () {
var $win, dw, dh, st, dlgWd, dlgHt, top, left;
$win = $(window);
dw = $win.width();
dh = $win.height();
st = $win.scrollTop();
this.$el.html(this.template(this.model));
$(document.body).append(this.el);
dlgWd = this.$el.outerWidth();
dlgHt = this.$el.outerHeight();
top = (dh -dlgHt)/2 + st;
left = (dw - dlgWd)/2;
this.$el.css({
top: (top < 0? 0 : top) + 'px',
left: (left < 0? 0 : left) + 'px'
});
this.showPopup();
return this;
},
showPopup: function () {
this.$el.show();
},
cancelClick: function () {
this.remove();
}
});

7
src/main/less/auth.less
View File

@@ -19,6 +19,13 @@
.oauth_submit { text-align: center; }
.authorize__btn {
&:hover {
text-decoration: underline;
cursor: pointer;
}
}
.auth_container {
.basic_auth__title {

1
src/main/template/auth_button.handlebars Normal file
View File

@@ -0,0 +1 @@
<a class='authorize__btn'>Authorize</a>

2
src/main/template/main.handlebars
View File

@@ -16,6 +16,8 @@
<div class='container' id='resources_container'>
<div class="auth_main_container"></div>
<div class='authorize-wrapper'></div>
<ul id='resources'></ul>
<div class="footer">

10
src/main/template/popup.handlebars Normal file
View File

@@ -0,0 +1,10 @@
<div class="api-popup-dialog-wrapper">
<div class="api-popup-title">{{title}}</div>
<div class="api-popup-content">
{{{content}}}
</div>
<p class="error-msg"></p>
<div class="api-popup-actions">
<button class="api-popup-cancel api-button gray" type="button">Cancel</button>
</div>
</div>