Add "copy to clipboard" for connection commands

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

@@ -252,4 +252,7 @@ $(function() {
     return e.preventDefault();
   });
 
+  // Clipboard for connection strings
+  if(Clipboard.isSupported())
+    new Clipboard(".vm-details-connection-string-copy");
 });

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

@@ -133,7 +133,7 @@
           <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" id="vm-details-pw-show"
               title="{% trans "Show password" %}" data-container="body">
               <i class="fa fa-eye" id="vm-details-pw-eye"></i>
             </span>
@@ -158,10 +158,12 @@
       <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 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>