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

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

@@ -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;
@@ -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>