API Key in UI

New: view/reset API in General Settings
Fixed: API will reject unauthenticated requests
This commit is contained in:
Mark McDowall 2014-03-13 21:23:47 -07:00
parent 0914441de7
commit 6b423c104c
16 changed files with 1194 additions and 45 deletions

View file

@ -7,6 +7,7 @@
color : #595959;
margin-right : 5px;
}
.checkbox {
width : 100px;
margin-left : 0px;
@ -24,7 +25,8 @@
.btn {
i {
margin-right: 0px;
margin-right : 0px;
color : inherit;
}
}
}

Binary file not shown.

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,30 @@
'use strict';
define([
'jquery',
'System/StatusModel',
'zero.clipboard',
'Shared/Messenger'
],
function ($, StatusModel, ZeroClipboard, Messenger) {
$.fn.copyToClipboard = function (input) {
var moviePath = StatusModel.get('urlBase') + '/Content/zero.clipboard.swf';
var client = new ZeroClipboard(this, {
moviePath: moviePath
});
client.on('load', function(client) {
client.on('dataRequested', function (client) {
client.setText(input.val());
});
client.on('complete', function() {
Messenger.show({
message: 'Copied text to clipboard'
});
} );
} );
};
});

View file

@ -1,23 +1,34 @@
'use strict';
define(
[
'vent',
'marionette',
'Commands/CommandController',
'Mixins/AsModelBoundView',
'Mixins/AsValidatedView'
], function (Marionette, AsModelBoundView, AsValidatedView) {
'Mixins/AsValidatedView',
'Mixins/CopyToClipboard'
], function (vent, Marionette, CommandController, AsModelBoundView, AsValidatedView) {
var view = Marionette.ItemView.extend({
template: 'Settings/General/GeneralViewTemplate',
events: {
'change .x-auth': '_setAuthOptionsVisibility',
'change .x-ssl': '_setSslOptionsVisibility'
'change .x-auth' : '_setAuthOptionsVisibility',
'change .x-ssl' : '_setSslOptionsVisibility',
'click .x-reset-api-key' : '_resetApiKey'
},
ui: {
authToggle : '.x-auth',
authOptions: '.x-auth-options',
sslToggle : '.x-ssl',
sslOptions: '.x-ssl-options'
authToggle : '.x-auth',
authOptions : '.x-auth-options',
sslToggle : '.x-ssl',
sslOptions : '.x-ssl-options',
resetApiKey : '.x-reset-api-key',
copyApiKey : '.x-copy-api-key',
apiKeyInput : '.x-api-key'
},
initialize: function () {
vent.on(vent.Events.CommandComplete, this._commandComplete, this);
},
onRender: function(){
@ -28,6 +39,17 @@ define(
if(!this.ui.sslToggle.prop('checked')){
this.ui.sslOptions.hide();
}
CommandController.bindToCommand({
element: this.ui.resetApiKey,
command: {
name: 'resetApiKey'
}
});
},
onShow: function () {
this.ui.copyApiKey.copyToClipboard(this.ui.apiKeyInput);
},
_setAuthOptionsVisibility: function () {
@ -54,6 +76,20 @@ define(
else {
this.ui.sslOptions.slideUp();
}
},
_resetApiKey: function () {
if (window.confirm("Reset API Key?")) {
CommandController.Execute('resetApiKey', {
name : 'resetApiKey'
});
}
},
_commandComplete: function (options) {
if (options.command.get('name') === 'resetapikey') {
this.model.fetch();
}
}
});

View file

@ -119,6 +119,21 @@
</div>
</div>
</div>
<div class="control-group api-key">
<label class="control-label">API Key</label>
<div class="controls">
<div class="input-append">
<input type="text" name="apiKey" readonly="readonly" class="x-api-key"/>
<button class="btn btn-icon-only x-copy-api-key" title="Copy to clipboard"><i class="icon-copy"></i></button>
<button class="btn btn-danger btn-icon-only x-reset-api-key" title="Reset API Key"><i class="icon-refresh"></i></button>
</div>
<span>
<i class="icon-nd-form-warning" title="Requires restart to take effect"/>
</span>
</div>
</div>
</fieldset>
<fieldset>
@ -155,27 +170,27 @@
</div>
</div>
{{#if_mono}}
<div class="control-group">
<label class="control-label">Auto Update</label>
<!--{{#if_mono}}-->
<!--<div class="control-group">-->
<!--<label class="control-label">Auto Update</label>-->
<div class="controls">
<label class="checkbox toggle well">
<input type="checkbox" name="autoUpdate"/>
<!--<div class="controls">-->
<!--<label class="checkbox toggle well">-->
<!--<input type="checkbox" name="autoUpdate"/>-->
<p>
<span>Yes</span>
<span>No</span>
</p>
<!--<p>-->
<!--<span>Yes</span>-->
<!--<span>No</span>-->
<!--</p>-->
<div class="btn btn-primary slide-button"/>
</label>
<!--<div class="btn btn-primary slide-button"/>-->
<!--</label>-->
<span class="help-inline-checkbox">
<i class="icon-nd-form-info" title="Use drone's built in auto update instead of package manager/manual updating"/>
</span>
</div>
</div>
{{/if_mono}}
<!--<span class="help-inline-checkbox">-->
<!--<i class="icon-nd-form-info" title="Use drone's built in auto update instead of package manager/manual updating"/>-->
<!--</span>-->
<!--</div>-->
<!--</div>-->
<!--{{/if_mono}}-->
</fieldset>
</div>

View file

@ -93,3 +93,11 @@ li.save-and-add:hover {
display: none;
}
}
.api-key {
input {
width : 280px;
cursor : text;
}
}

View file

@ -27,6 +27,7 @@ require.config({
'jquery.dotdotdot' : 'JsLibraries/jquery.dotdotdot',
'messenger' : 'JsLibraries/messenger',
'jquery' : 'JsLibraries/jquery',
'zero.clipboard' : 'JsLibraries/zero.clipboard',
'libs' : 'JsLibraries/',
'api': 'Require/require.api'