API Key in UI

New: view/reset API in General Settings
Fixed: API will reject unauthenticated requests

src/UI/Settings/General/GeneralView.js

@@ -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();
+                }
             }
         });
 

src/UI/Settings/General/GeneralViewTemplate.html

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