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

[auth] UI changes

Browse Source
This commit is contained in:
bodnia
2016-03-13 00:52:47 +02:00
parent 1e38c8999b
commit 0f77177455
21 changed files with 413 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1193,6 +1193,24 @@
text-decoration: underline;
cursor: pointer;
}
.swagger-section .authorize__btn_operation {
height: 18px;
vertical-align: middle;
display: inline-block;
background: url(../images/explorer_icons.png) no-repeat;
}
.swagger-section .authorize__btn_operation_login {
background-position: 0 0;
width: 18px;
margin-top: -6px;
margin-left: 4px;
}
.swagger-section .authorize__btn_operation_logout {
background-position: -30px 0;
width: 18px;
margin-top: -6px;
margin-left: 4px;
}
.swagger-section #auth_container {
color: #fff;
display: inline-block;
@@ -1208,8 +1226,9 @@
padding: 0 0 10px;
margin-bottom: 5px;
border-bottom: solid 1px #CCC;
font-size: 0.9em;
}
.swagger-section .auth_container .basic_auth__title {
.swagger-section .auth_container .auth__title {
color: #547f00;
font-size: 1.2em;
}
@@ -1225,8 +1244,12 @@
margin-top: 10px;
height: 30px;
}
.swagger-section .auth_container .basic_auth_container {
font-size: 0.9em;
.swagger-section .auth_container .key_auth__field {
margin: 5px 0;
}
.swagger-section .auth_container .key_auth__label {
display: inline-block;
width: 60px;
}
.swagger-section .api-popup-dialog {
z-index: 10000;

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

@@ -1193,6 +1193,24 @@
text-decoration: underline;
cursor: pointer;
}
.swagger-section .authorize__btn_operation {
height: 18px;
vertical-align: middle;
display: inline-block;
background: url(../images/explorer_icons.png) no-repeat;
}
.swagger-section .authorize__btn_operation_login {
background-position: 0 0;
width: 18px;
margin-top: -6px;
margin-left: 4px;
}
.swagger-section .authorize__btn_operation_logout {
background-position: -30px 0;
width: 18px;
margin-top: -6px;
margin-left: 4px;
}
.swagger-section #auth_container {
color: #fff;
display: inline-block;
@@ -1208,8 +1226,9 @@
padding: 0 0 10px;
margin-bottom: 5px;
border-bottom: solid 1px #CCC;
font-size: 0.9em;
}
.swagger-section .auth_container .basic_auth__title {
.swagger-section .auth_container .auth__title {
color: #547f00;
font-size: 1.2em;
}
@@ -1225,8 +1244,12 @@
margin-top: 10px;
height: 30px;
}
.swagger-section .auth_container .basic_auth_container {
font-size: 0.9em;
.swagger-section .auth_container .key_auth__field {
margin: 5px 0;
}
.swagger-section .auth_container .key_auth__label {
display: inline-block;
width: 60px;
}
.swagger-section .api-popup-dialog {
z-index: 10000;
@@ -1350,6 +1373,7 @@
background-color: #89bf04;
padding: 9px 14px 19px 14px;
height: 23px;
min-width: 775px;
}
.swagger-section #input_baseUrl {
width: 400px;

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

@@ -38,8 +38,13 @@ window.SwaggerUi.utils = {
}
}
authsArr.push(singleSecurity);
oauth2Arr.push(singleOauth2Security);
if (!_.isEmpty(singleSecurity)) {
authsArr.push(singleSecurity);
}
if (!_.isEmpty(singleOauth2Security)){
oauth2Arr.push(singleOauth2Security);
}
});
return {

22
src/main/javascript/view/ApiKeyAuthModel.js Normal file
View File

@@ -0,0 +1,22 @@
'use strict';
SwaggerUi.Models.ApiKeyAuthModel = Backbone.Model.extend({
defaults: {
'in': '',
name: '',
title: '',
value: ''
},
initialize: function () {
this.on('change', this.validate);
},
validate: function () {
var valid = !!this.get('value');
this.set('valid', valid);
return valid;
}
});

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

@@ -22,12 +22,11 @@ SwaggerUi.Views.ApiKeyAuthView = Backbone.View.extend({ // TODO: append this to
apiKeyChange: function (e) {
var val = $(e.target).val();
this.model.set('valid', !!val);
this.model.set('value', val);
},
isValid: function () {
return this.get('valid');
return this.model.validate();
}
});

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

@@ -33,7 +33,10 @@ SwaggerUi.Views.AuthView = Backbone.View.extend({
this.collection = new SwaggerUi.Collections.AuthsCollection();
this.collection.add(this.parseData(opts.data));
this.$el.html(this.tpls.main({isLogout: this.collection.isAuthorized()}));
this.$el.html(this.tpls.main({
isLogout: this.collection.isAuthorized(),
isAuthorized: this.collection.isPartiallyAuthorized()
}));
this.$innerEl = this.$(this.selectors.innerEl);
},
@@ -57,15 +60,21 @@ SwaggerUi.Views.AuthView = Backbone.View.extend({
},
parseData: function (data) {
var authz = window.swaggerUi.api.clientAuthorizations.authz;
var authz = Object.assign({}, window.swaggerUi.api.clientAuthorizations.authz);
return _.map(data, function (auth, name) {
var isBasic = authz.basic && auth.type === 'basic';
_.extend(auth, {
title: name
});
if (authz[name] || isBasic) {
_.extend(auth, {
isLogout: true,
value: isBasic ? '' : authz[name].value,
value: isBasic ? undefined : authz[name].value,
username: isBasic ? authz.basic.username : undefined,
password: isBasic ? authz.basic.password : undefined,
valid: true
});
}
@@ -108,7 +117,7 @@ SwaggerUi.Views.AuthView = Backbone.View.extend({
auth.get('in')
);
this.router.api.clientAuthorizations.add(auth.get('name'), keyAuth);
this.router.api.clientAuthorizations.add(auth.get('title'), keyAuth);
} else if (type === 'basic') {
basicAuth = new SwaggerClient.PasswordAuthorization(auth.get('username'), auth.get('password'));
this.router.api.clientAuthorizations.add(auth.get('type'), basicAuth);
@@ -124,7 +133,7 @@ SwaggerUi.Views.AuthView = Backbone.View.extend({
e.preventDefault();
this.collection.forEach(function (auth) {
var name = auth.get('name');
var name = auth.get('type') === 'basic' ? 'basic' : auth.get('title');
window.swaggerUi.api.clientAuthorizations.remove(name);
});

10
src/main/javascript/view/AuthsCollection.js
View File

@@ -23,6 +23,12 @@ SwaggerUi.Collections.AuthsCollection = Backbone.Collection.extend({
case 'oauth2':
result = new SwaggerUi.Models.Oauth2Model(model);
break;
case 'basic':
result = new SwaggerUi.Models.BasicAuthModel(model);
break;
case 'apiKey':
result = new SwaggerUi.Models.ApiKeyAuthModel(model);
break;
default:
result = new Backbone.Model(model);
}
@@ -37,5 +43,9 @@ SwaggerUi.Collections.AuthsCollection = Backbone.Collection.extend({
isAuthorized: function () {
return this.length === this.where({ isLogout: true }).length;
},
isPartiallyAuthorized: function () {
return this.where({ isLogout: true }).length > 0;
}
});

21
src/main/javascript/view/BasicAuthModel.js Normal file
View File

@@ -0,0 +1,21 @@
'use strict';
SwaggerUi.Models.BasicAuthModel = Backbone.Model.extend({
defaults: {
username: '',
password: '',
title: 'basic'
},
initialize: function () {
this.on('change', this.validate);
},
validate: function () {
var valid = !!this.get('password') && !!this.get('username');
this.set('valid', valid);
return valid;
}
});

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

@@ -25,11 +25,10 @@ SwaggerUi.Views.BasicAuthView = Backbone.View.extend({
var attr = $el.prop('name');
this.model.set(attr, val);
this.model.set('valid', !!this.model.get('password') && !!this.model.get('username'));
},
isValid: function () {
return this.get('valid');
return this.model.validate();
}
});

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

@@ -136,7 +136,7 @@ SwaggerUi.Views.MainView = Backbone.View.extend({
onLinkClick: function (e) {
var el = e.target;
if (el.tagName === 'A') {
if (el.tagName === 'A' && el.href) {
if (location.hostname !== el.hostname || location.port !== el.port) {
e.preventDefault();
window.open(el.href, '_blank');

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

@@ -37,6 +37,27 @@
}
}
.authorize__btn_operation {
height: 18px;
vertical-align: middle;
display: inline-block;
background: url(../images/explorer_icons.png) no-repeat;
}
.authorize__btn_operation_login {
background-position: 0 0;
width: 18px;
margin-top: -6px;
margin-left: 4px;
}
.authorize__btn_operation_logout {
background-position: -30px 0;
width: 18px;
margin-top: -6px;
margin-left: 4px;
}
#auth_container {
color: #fff;
display: inline-block;
@@ -54,8 +75,9 @@
padding: 0 0 10px;
margin-bottom: 5px;
border-bottom: solid 1px #CCC;
font-size: 0.9em;
.basic_auth__title {
.auth__title {
color: #547f00;
font-size: 1.2em;
}
@@ -75,8 +97,13 @@
height: 30px;
}
.basic_auth_container {
font-size: 0.9em;
.key_auth__field {
margin: 5px 0;
}
.key_auth__label {
display: inline-block;
width: 60px;
}
}

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

@@ -79,6 +79,7 @@
background-color: #89bf04;
padding: 9px 14px 19px 14px;
height: 23px;
min-width: 775px;
}
#input_baseUrl { width: 400px; }

28
src/main/template/apikey_auth.handlebars
View File

@@ -1,12 +1,22 @@
<div class='key_input_container'>
<div class='auth__description'>{{description}}</div>
<div class="key_input_container">
<h3 class="auth__title">Api key authorization</h3>
<div class="auth__description">{{description}}</div>
<div>
<span class='auth_label'><label for='input_apiKey_entry'><span>Api key</span> in {{in}}</label></span>
<span class='auth_in'><label for='input_apiKey_entry'>{{name}} =</label></span>
{{#if isLogout}}
<span class="auth_label">{{value}}</span>
{{else}}
<input placeholder='api_key' class='auth_input input_apiKey_entry' name='apiKey' type='text'/>
{{/if}}
<div class="key_auth__field">
<span class="key_auth__label">name:</span>
<span class="key_auth__value">{{name}}</span>
</div>
<div class="key_auth__field">
<span class="key_auth__label">in:</span>
<span class="key_auth__value">{{in}}</span>
</div>
<div class="key_auth__field">
<span class="key_auth__label">value:</span>
{{#if isLogout}}
<span class="key_auth__value">{{value}}</span>
{{else}}
<input placeholder="api_key" class="auth_input input_apiKey_entry" name="apiKey" type="text"/>
{{/if}}
</div>
</div>
</div>

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

@@ -1,9 +1,8 @@
<div class="authorize__btn authorize__btn_operation">
<span class="api-ic
{{#if isLogout}}
ic-info
{{else}}
ic-error
{{/if}}
"></span>
</div>
<div class="authorize__btn authorize__btn_operation
{{#if isLogout}}
authorize__btn_operation_login
{{else}}
authorize__btn_operation_logout
{{/if}}
">
</div>

6
src/main/template/auth_view.handlebars
View File

@@ -2,8 +2,10 @@
<div class="auth_inner"></div>
<div class="auth_submit">
<button type="button" class="auth__button auth_submit__button" data-sw-translate>Authorize</button>
{{#if isLogout}}
{{#unless isLogout}}
<button type="button" class="auth__button auth_submit__button" data-sw-translate>Authorize</button>
{{/unless}}
{{#if isAuthorized}}
<button type="button" class="auth__button auth_logout__button" data-sw-translate>Logout</button>
{{/if}}
</div>

22
src/main/template/basic_auth.handlebars
View File

@@ -1,16 +1,20 @@
<div class='basic_auth_container'>
<h3 class="basic_auth__title">Basic authentication{{#if isLogout}} - authorized{{/if}}</h3>
{{#unless isLogout}}
<form class="key_input_container">
<div class="auth__description">{{description}}</div>
<div class="auth_label">
<span class="basic_auth__label" data-sw-translate>username:</span>
<h3 class="auth__title">Basic authentication{{#if isLogout}} - authorized{{/if}}</h3>
<form class="basic_input_container">
<div class="auth__description">{{description}}</div>
<div class="auth_label">
<span class="basic_auth__label" data-sw-translate>username:</span>
{{#if isLogout}}
<span class="basic_auth__value">{{username}}</span>
{{else}}
<input required placeholder="username" class="basic_auth__username auth_input" name="username" type="text"/>
</div>
{{/if}}
</div>
{{#unless isLogout}}
<div class="auth_label">
<span class="basic_auth__label" data-sw-translate>password:</span>
<input required placeholder="password" class="basic_auth__password auth_input" name="password" type="password"/></label>
</div>
</form>
{{/unless}}
{{/unless}}
</form>
</div>

44
src/main/template/oauth2.handlebars
View File

@@ -1,21 +1,23 @@
<p>{{description}}</p>
<p>Select OAuth2.0 Scopes</p>
<p>Scopes are used to grant an application different levels of access to data on behalf of the end user. Each API may declare one or more scopes.
<a href="#">Learn how to use</a>
</p>
<p><strong> {{appName}} </strong> API requires the following scopes. Select which ones you want to grant to Swagger UI.</p>
<p>Authorization URL: {{authorizationUrl}}</p>
<p>flow: {{flow}}</p>
<ul class="api-popup-scopes">
{{#each scopes}}
<li>
<input class="oauth-scope" type="checkbox" data-scope="{{scope}}" oauthtype="{{OAuthSchemeKey}}"/>
<label>{{scope}}</label><br/>
<span class="api-scope-desc">{{description}}
{{#if OAuthSchemeKey}}
({{OAuthSchemeKey}})
{{/if}}
</span>
</li>
{{/each}}
</ul>
<div>
<h3 class="auth__title">Select OAuth2.0 Scopes</h3>
<p>{{description}}</p>
<p>Scopes are used to grant an application different levels of access to data on behalf of the end user. Each API may declare one or more scopes.
<a href="#">Learn how to use</a>
</p>
<p><strong> {{appName}} </strong> API requires the following scopes. Select which ones you want to grant to Swagger UI.</p>
<p>Authorization URL: {{authorizationUrl}}</p>
<p>flow: {{flow}}</p>
<ul class="api-popup-scopes">
{{#each scopes}}
<li>
<input class="oauth-scope" type="checkbox" data-scope="{{scope}}" oauthtype="{{OAuthSchemeKey}}"/>
<label>{{scope}}</label><br/>
<span class="api-scope-desc">{{description}}
{{#if OAuthSchemeKey}}
({{OAuthSchemeKey}})
{{/if}}
</span>
</li>
{{/each}}
</ul>
</div>