Easier copying of API keys

There's now a dedicated button for that. This should get around issues like #2056. Also increased size of API key display field (where possible). Fixes #2055
OctoPrint · Aug 22, 2017 · e9401b7 · e9401b7
1 parent b138c2b
commit e9401b7
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 12 deletions.
diff --git a/src/octoprint/static/js/app/viewmodels/settings.js b/src/octoprint/static/js/app/viewmodels/settings.js
@@ -475,6 +475,10 @@ $(function() {
                 });
         };
 
+        self.copyApiKey = function() {
+            copyToClipboard(self.api_key());
+        };
+
         self.showTranslationManager = function() {
             self.translationManagerDialog.modal();
             return false;

diff --git a/src/octoprint/static/js/app/viewmodels/users.js b/src/octoprint/static/js/app/viewmodels/users.js
@@ -152,6 +152,10 @@ $(function() {
                 });
         };
 
+        self.copyApikey = function() {
+            copyToClipboard(self.editorApikey());
+        };
+
         self._updateApikey = function(apikey) {
             self.editorApikey(apikey);
             self.requestData();

diff --git a/src/octoprint/static/js/app/viewmodels/usersettings.js b/src/octoprint/static/js/app/viewmodels/usersettings.js
@@ -69,6 +69,10 @@ $(function() {
                 });
         };
 
+        self.copyApikey = function() {
+            copyToClipboard(self.access_apikey());
+        };
+
         self.generateApikey = function() {
             if (!CONFIG_ACCESS_CONTROL) return;
 

diff --git a/src/octoprint/templates/dialogs/settings/accesscontrol.jinja2 b/src/octoprint/templates/dialogs/settings/accesscontrol.jinja2
@@ -9,7 +9,7 @@
     </thead>
     <tbody data-bind="foreach: users.listHelper.paginatedItems">
     <tr>
-        <td class="settings_users_name"><span data-bind="text: name"></span><span class="muted" data-bind="visible: $root.api_enabled() && apikey"><br /><small>{{ _('API Key') }}: <span data-bind="text: apikey"></span></small></span></td>
+        <td class="settings_users_name"><span data-bind="text: name"></span><span class="muted" data-bind="visible: $root.api_enabled() && apikey"><br /><small>{{ _('API Key') }}: <span data-bind="text: apikey"></span> <a href="javascript:void(0)" title="{{ _('Copy API Key to clipboard') }}" data-bind="click: copyToClipboard(apikey)"><i class="fa fa-copy"></i></a></small></span></td>
         <td class="settings_users_active"><i class="fa" data-bind="css: { 'fa-check-square-o': active, 'fa-square-o': !active }"></i></td>
         <td class="settings_users_admin"><i class="fa" data-bind="css: { 'fa-check-square-o': admin, 'fa-square-o': !admin }"></i></td>
         <td class="settings_users_actions">
@@ -136,10 +136,11 @@
                 <div class="control-group">
                     <label class="control-label">{{ _('Current API Key') }}</label>
                     <div class="controls">
-                        <div class="input-append">
-                            <input type="text" class="input-block-level uneditable-input" data-bind="value: $root.users.editorApikey, valueUpdate: 'input', attr: {placeholder: '{{ _('N/A') }}'}">
-                            <a class="btn" title="Generate new Apikey" data-bind="click: function() { $root.users.confirmGenerateApikey(); }"><i class="fa fa-refresh"></i></a>
-                            <a class="btn btn-danger" title="Delete Apikey" data-bind="click: function() { $root.users.confirmDeleteApikey(); }"><i class="fa fa-trash-o"></i></a>
+                        <div class="input-append input-block-level">
+                            <input type="text" disabled="disabled" data-bind="value: $root.users.editorApikey, valueUpdate: 'input', attr: {placeholder: '{{ _('N/A') }}'}">
+                            <a class="btn add-on" title="Copy API Key to clipboard" data-bind="click: $root.users.copyApikey, enable: $root.users.editorApikey"><i class="fa fa-copy"></i></a>
+                            <a class="btn add-on" title="Generate new API Key" data-bind="click: function() { $root.users.confirmGenerateApikey(); }"><i class="fa fa-refresh"></i></a>
+                            <a class="btn add-on btn-danger" title="Delete API Key" data-bind="click: function() { $root.users.confirmDeleteApikey(); }"><i class="fa fa-trash-o"></i></a>
                         </div>
 
                     </div>

diff --git a/src/octoprint/templates/dialogs/settings/api.jinja2 b/src/octoprint/templates/dialogs/settings/api.jinja2
@@ -16,9 +16,10 @@
     <div class="control-group">
         <label class="control-label" for="settings-apiKey">{{ _('API Key') }}</label>
         <div class="controls">
-            <div class="input-append">
-                <input type="text" class="input-block-level" disabled="disabled" id="settings-apikey" data-bind="value: api_key, attr: {placeholder: '{{ _('N/A') }}'}">
-                <button class="btn" title="Generate new API Key" data-bind="click: generateApiKey, enable: api_key"><i class="fa fa-refresh"></i></button>
+            <div class="input-append input-block-level">
+                <input type="text" disabled="disabled" id="settings-apikey" data-bind="value: api_key, attr: {placeholder: '{{ _('N/A') }}'}">
+                <a class="btn add-on" title="Copy API Key to clipboard" data-bind="click: copyApiKey, enable: api_key"><i class="fa fa-copy"></i></a>
+                <a class="btn add-on" title="Generate new API Key" data-bind="click: generateApiKey, enable: api_key"><i class="fa fa-refresh"></i></a>
             </div>
             <span class="help-block">{{ _('Please note that changes to the API key are applied immediately, without having to "Save" first.') }}</span>
         </div>

diff --git a/src/octoprint/templates/dialogs/usersettings/access.jinja2 b/src/octoprint/templates/dialogs/usersettings/access.jinja2
@@ -23,10 +23,11 @@
         <div class="control-group">
             <label class="control-label" for="userSettings-access_apikey">{{ _('Current API Key') }}</label>
             <div class="controls">
-                <div class="input-append">
-                    <input type="text" class="input-block-level" disabled="disabled" id="userSettings-access_apikey" data-bind="value: access_apikey, attr: {placeholder: '{{ _('N/A') }}'}">
-                    <button class="btn" title="Generate new API Key" data-bind="click: generateApikey"><i class="fa fa-refresh"></i></button>
-                    <button class="btn btn-danger" title="Delete API Key" data-bind="click: deleteApikey, enable: access_apikey"><i class="fa fa-trash-o"></i></button>
+                <div class="input-append input-block-level">
+                    <input type="text" disabled="disabled" id="userSettings-access_apikey" data-bind="value: access_apikey, attr: {placeholder: '{{ _('N/A') }}'}">
+                    <a class="btn add-on" title="Copy API Key to clipboard" data-bind="click: copyApikey, enable: access_apikey"><i class="fa fa-copy"></i></a>
+                    <a class="btn add-on" title="Generate new API Key" data-bind="click: generateApikey"><i class="fa fa-refresh"></i></a>
+                    <a class="btn btn-danger add-on" title="Delete API Key" data-bind="click: deleteApikey, enable: access_apikey"><i class="fa fa-trash-o"></i></a>
                 </div>
                 <span class="help-block">{{ _('Please note that changes to the API key are applied immediately, without having to "Confirm" first.') }}</span>
             </div>