Improve the invite link display

Fixes #445

webadmin/src/index.html

@@ -52,6 +52,7 @@
 
     <script src="3rdparty/js/Chart.js"></script>
     <script src="3rdparty/js/ansi_up.js"></script>
+    <script src="3rdparty/js/clipboard.min.js"></script>
 
     <!-- Showdown (markdown converter) -->
     <script src="3rdparty/js/showdown-1.6.4.min.js"></script>

webadmin/src/views/users.html

@@ -222,10 +222,15 @@
             <div class="modal-body">
                 <p>An email has been sent to <b>{{ inviteSent.email }}</b>.</p>
                 <p>You can also share this invite link directly:</p>
-                <p style="overflow: auto; white-space: nowrap;" eng-click-select>{{ inviteSent.setupLink }}</p>
+                <div class="input-group">
+                    <input type="text" id="setupLinkInput" class="form-control" ng-value="inviteSent.setupLink" readonly/>
+                    <span class="input-group-btn">
+                        <button class="btn btn-default" id="setupLinkButton" type="button" data-clipboard-target="#setupLinkInput"><i class="fa fa-clipboard"></i></button>
+                    </span>
+                  </div>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
+                <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
             </div>
         </div>
     </div>

webadmin/src/views/users.js

@@ -1,6 +1,8 @@
 'use strict';
 
-angular.module('Application').controller('UsersController', ['$scope', '$location', 'Client', function ($scope, $location, Client) {
+/* global Clipboard */
+
+angular.module('Application').controller('UsersController', ['$scope', '$location', '$timeout', 'Client', function ($scope, $location, $timeout, Client) {
     Client.onReady(function () { if (!Client.getUserInfo().admin) $location.path('/'); });
 
     $scope.ready = false;
@@ -380,6 +382,11 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
         });
     };
 
+    $scope.copyToClipboard = function (value) {
+
+        document.execCommand('copy');
+    };
+
     function refresh() {
         Client.getGroups(function (error, result) {
             if (error) return console.error('Unable to get group listing.', error);
@@ -420,5 +427,27 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
         });
     });
 
+    var clipboard = new Clipboard('#setupLinkButton');
+
+    clipboard.on('success', function(e) {
+        $('#setupLinkButton').tooltip({
+            title: 'Copied!',
+            trigger: 'manual'
+        }).tooltip('show');
+
+        $timeout(function () {  $('#setupLinkButton').tooltip('hide'); }, 2000);
+
+        e.clearSelection();
+    });
+
+    clipboard.on('error', function(e) {
+        $('#setupLinkButton').tooltip({
+            title: 'Press Ctrl+C to copy',
+            trigger: 'manual'
+        }).tooltip('show');
+
+        $timeout(function () {  $('#setupLinkButton').tooltip('hide'); }, 2000);
+    });
+
     $('.modal-backdrop').remove();
 }]);