Add clipboard.js and copy URL button

src/public/main.js

@@ -94,7 +94,13 @@ $(function() {
 
   // Log a message
   function log (message, options) {
-    var $el = $('<li>').addClass('log').text(message);
+    var html = options && options.html === true || false;
+    var $el;
+    if (html) {
+      $el = $('<li>').addClass('log').html(message);
+    } else {
+      $el = $('<li>').addClass('log').text(message);
+    }
     addMessageElement($el, options);
   }
 
@@ -244,9 +250,10 @@ $(function() {
   socket.on('login', function (data) {
     connected = true;
     // Display the welcome message
-    var message = "Fatty.chat - Anonymous Chat - Room ID: " + roomId.replace('/', '');
+    var message = "Fatty.chat - Anonymous Chat - Room ID: " + roomId.replace('/', '') + '&nbsp;&nbsp;<button class="btn btn-default btn-xs copyable" data-clipboard-text="https://fatty.chat' + roomId + '">Copy link to share</button>';
     log(message, {
-      prepend: true
+      prepend: true,
+      html: true
     });
 
     message = "This chatroom is destroyed after all participants exit. Chat history is client side only and not persistent.";
@@ -291,4 +298,18 @@ $(function() {
     $('#key-modal').modal('show');
   });
 
+  var clipboard = new Clipboard('.copyable');
+
+  clipboard.on('success', function(e) {
+    $(e.trigger).tooltip({
+      title: 'Copied!',
+      trigger: 'manual',
+      placement: 'auto'
+    });
+    $(e.trigger).tooltip('show');
+    setTimeout(function() {
+      $(e.trigger).tooltip('hide');
+    }, 2000);
+  });
+
 });

src/views/index.mustache

@@ -4,9 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <title>FattyChat - Anonomous Chat</title>
-  <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
   <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
+  <link rel="stylesheet" href="style.css">
   <script>
   window.username = '{{username}}';
   </script>
@@ -46,6 +46,7 @@
   <script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha3.js"></script>
   <script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
   <script src="/main.js"></script>
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){