Merge branch 'clipboard_button' into 'master'

Copy to clipboard support

See merge request !394

circle/bower.json

@@ -21,6 +21,7 @@
     "intro.js": "0.9.0",
     "favico.js": "~0.3.5",
     "datatables": "~1.10.4",
-    "chart.js": "2.3.0"
+    "chart.js": "2.3.0",
+    "clipboard": "~1.6.1"
   }
 }

circle/circle/settings/base.py

@@ -227,6 +227,7 @@ PIPELINE_JS = {
         "output_filename": "all.js",
     },
     "vm-detail": {"source_filenames": (
+        "clipboard/dist/clipboard.min.js",
         "dashboard/vm-details.js",
         "no-vnc/include/util.js",
         "no-vnc/include/webutil.js",

circle/dashboard/models.py

@@ -212,15 +212,16 @@ class Profile(Model):
             commands = self.user.command_set.filter(
                 access_method=instance.access_method)
             if commands.count() < 1:
-                return [single_command]
+                return [{'id': 0, 'cmd': single_command}]
             else:
-                return [
-                    command.template % {
+                return [{
+                    'id': command.id,
+                    'cmd': command.template % {
                         'port': instance.get_connect_port(use_ipv6=use_ipv6),
                         'host':  instance.get_connect_host(use_ipv6=use_ipv6),
                         'password': instance.pw,
                         'username': 'cloud',
-                    } for command in commands]
+                    }} for command in commands]
         else:
             return []
 
@@ -320,6 +321,7 @@ def get_or_create_profile(self):
     obj, created = GroupProfile.objects.get_or_create(group_id=self.pk)
     return obj
 
+
 Group.profile = property(get_or_create_profile)
 
 
@@ -338,6 +340,7 @@ def create_profile(user):
 def create_profile_hook(sender, user, request, **kwargs):
     return create_profile(user)
 
+
 user_logged_in.connect(create_profile_hook)
 
 if hasattr(settings, 'SAML_ORG_ID_ATTRIBUTE'):

circle/dashboard/static/dashboard/vm-details.js

@@ -70,12 +70,12 @@ $(function() {
   });
 
   /* for js fallback */
-  $("#vm-details-pw-show").parent("div").children("input").prop("type", "password");
+  $(".vm-details-show-password").parent("div").children("input").prop("type", "password");
 
   /* show password */
-  $("#vm-details-pw-show").click(function() {
+  $(".vm-details-show-password").click(function() {
     var input = $(this).parent("div").children("input");
-    var eye = $(this).children("#vm-details-pw-eye");
+    var eye = $(this).children(".vm-details-password-eye");
     var span = $(this);
 
     span.tooltip("destroy");
@@ -252,4 +252,12 @@ $(function() {
     return e.preventDefault();
   });
 
+  // Clipboard for connection strings
+  if(Clipboard.isSupported()) {
+    new Clipboard(".vm-details-connection-string-copy", {
+      text: function(trigger) {
+        return $($(trigger).data("clipboard-target")).val();
+      }
+    });
+  }
 });

circle/dashboard/templates/dashboard/vm-detail.html

@@ -133,9 +133,9 @@
           <div class="input-group">
             <input type="text" id="vm-details-pw-input" class="form-control input-sm input-tags"
             value="{{ instance.pw }}" spellcheck="false" autocomplete="new-password"/>
-            <span class="input-group-addon input-tags" id="vm-details-pw-show"
+            <span class="input-group-addon btn btn-default input-tags vm-details-show-password"
               title="{% trans "Show password" %}" data-container="body">
-              <i class="fa fa-eye" id="vm-details-pw-eye"></i>
+              <i class="fa fa-eye vm-details-password-eye"></i>
             </span>
           </div>
         </dd>
@@ -158,22 +158,24 @@
       <div class="input-group dashboard-vm-details-connect-command">
         <span class="input-group-addon input-tags">{% trans "Command" %}</span>
         <input type="text" spellcheck="false"
-        value="{{ c }}"
-        id="vm-details-connection-string" class="form-control input-tags" />
-        <span class="input-group-addon input-tags vm-details-connection-string-copy"
-          title="{% trans "Select all" %}" data-container="body">
+        value="{{ c.cmd }}"
+        id="vm-details-connection-string-{{ c.id }}" class="form-control input-tags" />
+        <span class="input-group-addon btn btn-default input-tags vm-details-show-password"
+          title="{% trans "Show password" %}" data-container="body">
+          <i class="fa fa-eye vm-details-password-eye"></i>
+        </span>
+        <span class="input-group-addon input-tags btn btn-default vm-details-connection-string-copy"
+          title="{% trans "Copy to clipboard" %}"
+          data-container="body"
+          data-clipboard-target="#vm-details-connection-string-{{ c.id }}">
           <i class="fa fa-copy"></i>
         </span>
       </div>
-
       {% empty %}
       <div class="input-group dashboard-vm-details-connect-command">
         <span class="input-group-addon input-tags">{% trans "Command" %}</span>
         <input type="text" spellcheck="false" value="{% trans "Connection is not possible." %}"
         id="vm-details-connection-string" class="form-control input-tags" />
-        <span class="input-group-addon input-tags" id="vm-details-connection-string-copy">
-          <i class="fa fa-copy" title="{% trans "Select all" %}"></i>
-        </span>
       </div>
       {% endfor %}
       {% if instance.get_connect_uri %}