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 40d3161385
commit 9207be7d4b
12 changed files with 100 additions and 214 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;
},

120
src/main/javascript/view/AuthView.js
View File

@@ -2,125 +2,51 @@
SwaggerUi.Views.AuthView = Backbone.View.extend({
events: {
'click .auth_submit_button': 'authorizeClick',
'click .auth_logout__button': 'logoutClick'
'click .authorize__btn': 'authorizeBtnClick'
},
tpls: {
main: Handlebars.templates.auth_view
popup: Handlebars.templates.popup,
authBtn: Handlebars.templates.auth_button
},
selectors: {
innerEl: '.auth_inner'
},
initialize: function(opts) {
this.options = opts || {};
opts.data = opts.data || {};
this.router = this.options.router;
this.collection = new Backbone.Collection();
this.collection.add(this.parseData(opts.data));
this.$el.html(this.tpls.main({isLogout: this.isAuthorizedCollection()}));
this.$innerEl = this.$(this.selectors.innerEl);
},
initialize: function(){},
render: function () {
this.renderAuths();
if (!this.$innerEl.html()) {
this.$el.html('');
}
this.$el.html(this.tpls.authBtn());
return this;
},
authorizeClick: function (e) {
authorizeBtnClick: function (e) {
var authsModel;
e.preventDefault();
if (this.isValidCollection()) {
this.authorize();
}
},
authsModel = {title: 'Please authorize', content: this.renderAuths()};
parseData: function (data) {
var authz = window.swaggerUi.api.clientAuthorizations.authz;
return _.map(data, function (auth, name) {
var isBasic = authz.basic && auth.type === 'basic';
if (authz[name] || isBasic) {
_.extend(auth, {
isLogout: true,
value: isBasic ? '' : authz[name].value,
valid: true
});
}
return auth;
});
this.popup = new SwaggerUi.Views.PopupView({model: authsModel});
this.popup.render();
},
renderAuths: function () {
this.collection.each(function (auth) {
this.renderOneAuth(auth);
}, this);
},
var name, authEl;
var el = $('<div>');
renderOneAuth: function (authModel) {
var authEl;
var type = authModel.get('type');
//todo refactor, copy-pasted from MainView.js
for (name in this.model) {
auth = this.model[name];
if (type === 'apiKey') {
authEl = new SwaggerUi.Views.ApiKeyAuthView({model: authModel, router: this.router}).render().el;
this.$innerEl.append(authEl);
} else if (type === 'basic' && this.$innerEl.find('.basic_auth_container').length === 0) {
authEl = new SwaggerUi.Views.BasicAuthView({model: authModel, router: this.router}).render().el;
this.$innerEl.append(authEl);
if (auth.type === 'apiKey') {
authEl = new SwaggerUi.Views.ApiKeyButton({model: auth, router: this.router}).render().el;
el.append(authEl);
}
},
isValidCollection: function () {
return this.collection.length === this.collection.where({ valid: true }).length;
},
authorize: function () {
this.collection.forEach(function (auth) {
var keyAuth, basicAuth;
var type = auth.get('type');
if (type === 'apiKey') {
keyAuth = new SwaggerClient.ApiKeyAuthorization(
auth.get('name'),
auth.get('value'),
auth.get('in')
);
this.router.api.clientAuthorizations.add(auth.get('name'), keyAuth);
} else if (type === 'basic') {
basicAuth = new SwaggerClient.PasswordAuthorization(auth.get('username'), auth.get('password'));
this.router.api.clientAuthorizations.add(auth.get('type'), basicAuth);
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);
}
}
}, this);
this.router.load();
},
isAuthorizedCollection: function () {
return this.collection.length === this.collection.where({ isLogout: true }).length;
},
logoutClick: function (e) {
e.preventDefault();
this.collection.forEach(function (auth) {
var name = auth.get('name');
window.swaggerUi.api.clientAuthorizations.remove(name);
});
this.router.load();
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;
@@ -804,95 +849,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);
}
}
}
}
}
});

8
src/main/javascript/view/PopupView.js
View File

@@ -8,11 +8,6 @@ SwaggerUi.Views.PopupView = Backbone.View.extend({
template: Handlebars.templates.popup,
className: 'api-popup-dialog',
selectors: {
content: '.api-popup-content',
main : '#swagger-ui-container'
},
initialize: function(){},
render: function () {
@@ -22,8 +17,7 @@ SwaggerUi.Views.PopupView = Backbone.View.extend({
dh = $win.height();
st = $win.scrollTop();
this.$el.html(this.template(this.model));
this.$(this.selectors.content).append(this.model.content);
$(this.selectors.main).first().append(this.el);
$(document.body).append(this.el);
dlgWd = this.$el.outerWidth();
dlgHt = this.$el.outerHeight();
top = (dh -dlgHt)/2 + st;

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 {

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

@@ -1 +1 @@
<a class='authorize__btn'>Click to Authorize{{#if isLogout}}/Logout {{/if}}</a>
<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">

4
src/main/template/popup.handlebars
View File

@@ -1,6 +1,8 @@
<div class="api-popup-dialog-wrapper">
<div class="api-popup-title">{{title}}</div>
<div class="api-popup-content"></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>