Merge pull request #546 from apinf/feature/466-copy-to-clipboard-btn

Feature/466 copy to clipboard btn - closes #466

Author: illya nizyev

.meteor/packages

@@ -85,3 +85,4 @@ spacebars
 check
 useraccounts:iron-routing
 pahans:inline-help
+zenorocha:clipboard

.meteor/versions

@@ -177,5 +177,6 @@ yogiben:autoform-modals@0.3.8
 yogiben:helpers@0.0.6
 yogiben:mixpanel@0.0.7
 yogiben:pretty-email@0.0.6
+zenorocha:clipboard@1.4.2
 zimme:active-route@2.3.2
 zimme:iron-router-active@1.0.4

both/collections/users.js

@@ -8,7 +8,7 @@ Schemas.UserProfile = new SimpleSchema({
     optional: true
   },
   apiKey: {
-    label: 'API key (optional)',
+    label: 'API key',
     type: String,
     regEx: /^[a-z0-9A-Z]{40}$/,
     optional: true,

client/views/profile/profile.js

@@ -8,3 +8,31 @@ AutoForm.hooks({
     }
   }
 });
+
+Template.profile.rendered = function () {
+
+  // initializes button
+  var copyButton = $("<a class=\"btn btn-default btn-xs\" id=\"copyApi\"> Copy API to clipboard</a>");
+
+  // get input field that holds api key
+  var apiKeyField = $("input[name='profile.apiKey']");
+
+  // gets id attribute value from input field
+  var apiKeyFieldId = apiKeyField.attr('id');
+
+  // attaches new attribute with input field id to a button,
+  // data-clipboard-target attr is required for clipboard.js to work
+  copyButton.attr("data-clipboard-target", "#" + apiKeyFieldId);
+
+  // appends the actual button object next to input field
+  apiKeyField.next().append(copyButton);
+
+  // initializes copy-to-clipboard functionality
+  new Clipboard("#copyApi");
+
+  // adds listener to button and notifies user if text is copied
+  copyButton.on("click", function () {
+    copyButton.text("Copied!");
+  });
+
+};

client/views/profile/profile.less

@@ -0,0 +1,3 @@
+#copyApi{
+  margin-top: 0.62em;
+}