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

[auth] fixed display of scopes in auth button, added highlight of empty field

Browse Source
This commit is contained in:
bodnia
2016-03-15 17:13:59 +02:00
parent ab411cbbe0
commit dfd9b10798
17 changed files with 279 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1193,6 +1193,25 @@
text-decoration: underline;
cursor: pointer;
}
.swagger-section .authorize__btn_operation:hover .authorize-scopes {
display: block;
}
.swagger-section .authorize-scopes {
position: absolute;
margin-top: 20px;
background: #FFF;
border: 1px solid #ccc;
border-radius: 5px;
display: none;
font-size: 13px;
max-width: 300px;
line-height: 30px;
color: black;
padding: 5px;
}
.swagger-section .authorize-scopes .authorize__scope {
text-decoration: none;
}
.swagger-section .authorize__btn_operation {
height: 18px;
vertical-align: middle;

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

@@ -1193,6 +1193,25 @@
text-decoration: underline;
cursor: pointer;
}
.swagger-section .authorize__btn_operation:hover .authorize-scopes {
display: block;
}
.swagger-section .authorize-scopes {
position: absolute;
margin-top: 20px;
background: #FFF;
border: 1px solid #ccc;
border-radius: 5px;
display: none;
font-size: 13px;
max-width: 300px;
line-height: 30px;
color: black;
padding: 5px;
}
.swagger-section .authorize-scopes .authorize__scope {
text-decoration: none;
}
.swagger-section .authorize__btn_operation {
height: 18px;
vertical-align: middle;
@@ -1463,3 +1482,7 @@
.swagger-section .swagger-expand:before {
content: "+";
}
.swagger-section .error {
outline-color: #cc0000;
background-color: #f2dede;
}

6
src/main/javascript/utils/utils.js
View File

@@ -5,6 +5,7 @@ window.SwaggerUi.utils = {
var auths = Object.assign({}, window.swaggerUi.api.authSchemes || window.swaggerUi.api.securityDefinitions);
var oauth2Arr = [];
var authsArr = [];
var scopes = [];
var utils = window.SwaggerUi.utils;
if (!Array.isArray(security)) { return null; }
@@ -25,6 +26,7 @@ window.SwaggerUi.utils = {
}
}
singleOauth2Security[key].scopes = utils.parseOauth2Scopes(singleOauth2Security[key].scopes);
scopes = _.merge(scopes, singleOauth2Security[key].scopes);
} else {
singleSecurity[key] = Object.assign({}, auths[key]);
}
@@ -32,6 +34,7 @@ window.SwaggerUi.utils = {
if (item[key].type === 'oauth2') {
singleOauth2Security[key] = Object.assign({}, item[key]);
singleOauth2Security[key].scopes = utils.parseOauth2Scopes(singleOauth2Security[key].scopes);
scopes = _.merge(scopes, singleOauth2Security[key].scopes);
} else {
singleSecurity[key] = item[key];
}
@@ -49,7 +52,8 @@ window.SwaggerUi.utils = {
return {
auths : authsArr,
oauth2: oauth2Arr
oauth2: oauth2Arr,
scopes: scopes
};
},

13
src/main/javascript/view/ApiKeyAuthView.js
View File

@@ -6,6 +6,10 @@ SwaggerUi.Views.ApiKeyAuthView = Backbone.View.extend({ // TODO: append this to
'change .input_apiKey_entry': 'apiKeyChange'
},
selectors: {
apikeyInput: '.input_apiKey_entry'
},
template: Handlebars.templates.apikey_auth,
initialize: function(opts) {
@@ -21,12 +25,21 @@ SwaggerUi.Views.ApiKeyAuthView = Backbone.View.extend({ // TODO: append this to
apiKeyChange: function (e) {
var val = $(e.target).val();
if (val) {
this.$(this.selectors.apikeyInput).removeClass('error');
}
this.model.set('value', val);
},
isValid: function () {
return this.model.validate();
},
highlightInvalid: function () {
if (!this.isValid()) {
this.$(this.selectors.apikeyInput).addClass('error');
}
}
});

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

@@ -51,6 +51,8 @@ SwaggerUi.Views.AuthView = Backbone.View.extend({
if (this.authsCollectionView.collection.isValid()) {
this.authorize();
} else {
this.authsCollectionView.highlightInvalid();
}
},

23
src/main/javascript/view/AuthsCollectionView.js
View File

@@ -10,6 +10,7 @@ SwaggerUi.Views.AuthsCollectionView = Backbone.View.extend({
this.collection = new SwaggerUi.Collections.AuthsCollection(opts.data);
this.$innerEl = $('<div>');
this.authViews = [];
},
render: function () {
@@ -23,22 +24,30 @@ SwaggerUi.Views.AuthsCollectionView = Backbone.View.extend({
},
renderOneAuth: function (authModel) {
var authEl, authView;
var authViewEl, authView, authViewName;
var type = authModel.get('type');
if (type === 'apiKey') {
authView = 'ApiKeyAuthView';
authViewName = 'ApiKeyAuthView';
} else if (type === 'basic' && this.$innerEl.find('.basic_auth_container').length === 0) {
authView = 'BasicAuthView';
authViewName = 'BasicAuthView';
} else if (type === 'oauth2') {
authView = 'Oauth2View';
authViewName = 'Oauth2View';
}
if (authView) {
authEl = new SwaggerUi.Views[authView]({model: authModel, router: this.router}).render().el;
if (authViewName) {
authView = new SwaggerUi.Views[authViewName]({model: authModel, router: this.router});
authViewEl = authView.render().el;
this.authViews.push(authView);
}
this.$innerEl.append(authEl);
this.$innerEl.append(authViewEl);
},
highlightInvalid: function () {
this.authViews.forEach(function (view) {
view.highlightInvalid();
}, this);
}
});

24
src/main/javascript/view/BasicAuthView.js
View File

@@ -11,6 +11,15 @@ SwaggerUi.Views.BasicAuthView = Backbone.View.extend({
'change .auth_input': 'inputChange'
},
selectors: {
usernameInput: '.basic_auth__username',
passwordInput: '.basic_auth__password'
},
cls: {
error: 'error'
},
template: Handlebars.templates.basic_auth,
render: function(){
@@ -24,11 +33,24 @@ SwaggerUi.Views.BasicAuthView = Backbone.View.extend({
var val = $el.val();
var attr = $el.prop('name');
if (val) {
$el.removeClass(this.cls.error);
}
this.model.set(attr, val);
},
isValid: function () {
return this.model.validate();
}
},
highlightInvalid: function () {
if (!this.model.get('username')) {
this.$(this.selectors.usernameInput).addClass(this.cls.error);
}
if (!this.model.get('password')) {
this.$(this.selectors.passwordInput).addClass(this.cls.error);
}
}
});

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

@@ -261,7 +261,14 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
var authsModel = SwaggerUi.utils.parseSecurityDefinitions(this.model.security);
authsModel.isLogout = !_.isEmpty(window.swaggerUi.api.clientAuthorizations.authz);
this.authView = new SwaggerUi.Views.AuthButtonView({data: authsModel, router: this.router, isOperation: true});
this.authView = new SwaggerUi.Views.AuthButtonView({
data: authsModel,
router: this.router,
isOperation: true,
model: {
scopes: authsModel.scopes
}
});
this.$('.authorize-wrapper').append(this.authView.render().el);
}

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

@@ -37,6 +37,28 @@
}
}
.authorize__btn_operation:hover .authorize-scopes {
display: block;
}
.authorize-scopes {
position: absolute;
margin-top: 20px;
background: #FFF;
border: 1px solid #ccc;
border-radius: 5px;
display: none;
font-size: 13px;
max-width: 300px;
line-height: 30px;
color: black;
padding: 5px;
.authorize__scope {
text-decoration: none;
}
}
.authorize__btn_operation {
height: 18px;
vertical-align: middle;

4
src/main/less/screen.less
View File

@@ -160,6 +160,10 @@
content: "+";
}
.error {
outline-color: #cc0000;
background-color: #f2dede;
}
}

7
src/main/template/auth_button_operation.handlebars
View File

@@ -5,4 +5,11 @@
authorize__btn_operation_logout
{{/if}}
">
{{#if scopes}}
<ul class="authorize-scopes">
{{#each scopes}}
<li class="authorize__scope" title="{{description}}">{{scope}}</li>
{{/each}}
</ul>
{{/if}}
</div>