Enable encryption by default and show warning when it's disabled

src/js/main.js

@@ -2,7 +2,6 @@ var fs = window.RequestFileSystem || window.webkitRequestFileSystem;
 
 $(function() {
   var isActive = false;
-  var encryptionEnabled = false;
   var newMessages = 0;
   var FADE_TIME = 150; // ms
   var TYPING_TIMER_LENGTH = 400; // ms
@@ -22,15 +21,13 @@ $(function() {
   var $usernameInput = $('.usernameInput'); // Input for username
   var $messages = $('.messages'); // Messages area
   var $inputMessage = $('.inputMessage'); // Input message input box
-  var $key = $('#key');
+  var $key = $('.key');
   var $genKey = $('.new_key');
   var $removeKey = $('#remove_key');
+  var encryptionEnabled;
 
   var $chatPage = $('.chat.page'); // The chatroom page
 
-  var key = CryptoJS.SHA3(Math.random().toString(36).substring(7)).toString();
-  $key.val(key);
-
   // Prompt for setting a username
   var username;
   var connected = false;
@@ -98,13 +95,11 @@ $(function() {
   }
 
   function encrypt(text) {
-    var key = encryptionEnabled ? $key.val() : roomId;
+    return CryptoJS.AES.encrypt(text, $key.val()).toString();
-    return CryptoJS.AES.encrypt(text, key).toString();
   }
 
   function decrypt(text) {
-    var key = encryptionEnabled ? $key.val() : roomId;
+    return CryptoJS.AES.decrypt(text, $key.val()).toString(CryptoJS.enc.Utf8) || text;
-    return CryptoJS.AES.decrypt(text, key).toString(CryptoJS.enc.Utf8) || text;
   }  
 
   // Log a message
@@ -274,6 +269,19 @@ $(function() {
   socket.on('login', function (data) {
     connected = true;
     addParticipantsMessage(data);
+
+    var key = CryptoJS.SHA3(Math.random().toString(36).substring(7)).toString();
+
+    if (data.numUsers > 1) {
+      $('#join-modal').modal('show');
+      key = '';
+      encryptionEnabled = false;
+      $('.chat .warning-sign').show();      
+    } else {
+      encryptionEnabled = true;
+      $('.chat .warning-sign').hide();
+    }
+    $key.val(key);
   });
 
   // Whenever the server emits 'new message', update the chat body
@@ -309,6 +317,10 @@ $(function() {
     removeChatTyping(data);
   });
 
+  socket.on('first', function() {
+    $('#first-modal').modal('show');
+  });
+
   setUsername();
 
   $('span.key-btn').click(function() {
@@ -362,30 +374,39 @@ $(function() {
   $('.room-url').text('https://fatty.chat' + roomId);
   $('.room-id').text(roomId.replace('/', ''));
 
-  $('#disable-encryption').hide();
-
-  $('.encryption-status').text('OFF');
-
-  $('.encryption-settings').hide();
-
-  $('#disable-encryption').click(function() {
-    encryptionEnabled = false;
-    $('.encryption-settings,#disable-encryption').hide();
-    $('#enable-encryption').show();
-    $('.encryption-status').text('OFF');
-    $('.key-btn.inactive').show();
-    $('.key-btn.active').hide();
-  });
-
-  $('#enable-encryption').click(function() {
-    encryptionEnabled = true;
-    $('.encryption-settings,#disable-encryption').show();
-    $('#enable-encryption').hide();
-    $('.encryption-status').text('ON');
-    $('.key-btn.inactive').hide();
-    $('.key-btn.active').show();
-  });
-
   $('[data-toggle="tooltip"]').tooltip();
 
+  $('.key').on('input', function() {
+    var val = $(this).val();
+    $('.key').val(val);
+
+    if (!val.trim().length) {
+      encryptionEnabled = false;
+      $('.modal-footer button.encryption-inactive').show();
+      $('.modal-footer button.encryption-active').hide();
+      $('.chat .warning-sign').show();
+    } else {
+      encryptionEnabled = true;
+      $('.modal-footer button.encryption-active').show();
+      $('.modal-footer button.encryption-inactive').hide();
+      $('.chat .warning-sign').hide();
+    }
+  });
+
+  $('.modal-footer button.encryption-inactive').click(function() {
+    var n = noty({
+      text: 'Encryption is OFF. Anyone with this URL can read your messages. Turn encryption on in Settings.',
+      theme: 'relax',
+      type: 'error'
+    });
+  });
+
+  $('.chat .warning-sign').click(function() {
+    var n = noty({
+      text: 'Encryption is OFF. Anyone with this URL can read your messages. Turn encryption on in Settings.',
+      theme: 'relax',
+      type: 'error'
+    });
+  });
+
 });

src/public/style.css

@@ -155,32 +155,28 @@ input {
   left: 0;
   outline: none;
   padding-left: 10px;
-  padding-right: 70px;
   position: absolute;
   right: 0;
   width: 100%;
 }
 
-span.key-btn {
+#first-modal .modal-footer button.encryption-inactive {
-  position: absolute;
-  right: 7px;
-  bottom: 8px;  
-  cursor: pointer;
-}
-
-span.key-btn img {
-  width: 35px;
-  top: -3px;
-  position: relative;
-}
-
-span.key-btn.active {
   display: none;
 }
 
-#key-modal input{
+#join-modal .modal-footer button.encryption-active {
-  width: 100%;
+  display: none;
-  height: 50px;
-  padding: 0px 15px;
-}  
 }
+
+.chat #input-icons {
+  position: absolute;
+  bottom: 15px;
+  right: 15px;
+}
+
+.chat .warning-sign {
+  display: none;
+  cursor: pointer;
+  color: red;
+  font-size: 24px;
+}

src/views/index.mustache

@@ -44,13 +44,13 @@
         <ul class="messages">
           <li class="log">
             <p>Welcome to FattyChat - Anonymous, Encrypted Chat</p>
-            <p>Others can join using this room using this link: <span class='room-url bold' id='welcome-room-url'></span>&nbsp;&nbsp;<button class="btn btn-default btn-xs copyable" data-clipboard-target="#welcome-room-url">Copy</button></p>
           </li>
         </ul>
       </div>
       <input class="inputMessage" placeholder="Type here..."/>
-      <span class='key-btn inactive' data-toggle="tooltip" data-placement="auto" title="Encryption is disabled"><img src="https://s3.amazonaws.com/fattychat/img/key-inactive.png"></span>
+      <div id="input-icons">
-      <span class='key-btn active' data-toggle="tooltip" data-placement="auto" title="Encryption is enabled"><img src="https://s3.amazonaws.com/fattychat/img/key-active.png"></span>
+        <span class="glyphicon glyphicon-warning-sign warning-sign"></span>        
+      </div>
     </li>
   </ul>
 
@@ -84,27 +84,80 @@
         </div>
         <div class="modal-body">
           <h4>About This Room</h4>
-          <p>Your room ID is <span class="room-id bold"></span>.</p>
+          <p>Others can join this room using this link: <span class='room-url bold'></span>&nbsp;&nbsp;<button class="btn btn-default btn-xs copyable" data-clipboard-target=".room-url">Copy</button></p>
-          <p>Others can join using this URL: <span class='room-url bold'></span>&nbsp;&nbsp;<button class="btn btn-default btn-xs copyable" data-clipboard-target=".room-url">Copy</button></p>
           <br>
-          <h4>Encryption</h4>
+          <h4>Encryption Key</h4>
-          <p>Encryption is <span class="encryption-status bold"></span>.&nbsp;&nbsp;
+          <p>If you want to use a custom key you can enter it below or &nbsp;<button class="new_key btn btn-default btn-xs">generate a new one</button></p>
-            <button class="btn btn-primary btn-xs" id='enable-encryption'>Turn On Encryption</button>
+          <p>Notify all other participants when you change this key.</p>
-            <button class="btn btn-danger btn-xs" id='disable-encryption'>Turn Off Encryption</button>
+          <div class="input-group">
-          </p>
+            <input class="form-control key" placeholder="Enter key here" type="text"></input>
-          <div class="encryption-settings">
+            <span class="input-group-btn">
-            <p>A random key has been generated for you below. Share this key with all other participants. Chat will only work if every participant uses the exact same key.</p>
+              <button class="btn btn-default copyable" type="button" data-clipboard-target=".key"><span class="glyphicon glyphicon-copy"></span>&nbsp;&nbsp;Copy</button>
-            <p>If you want to use your own key you can enter it below or &nbsp;<button class="new_key btn btn-default btn-xs">generate a new one</button></p>
+            </span>
-            <div class="input-group">
-              <input id="key" class="form-control" placeholder="Enter key here" type="text"></input>
-              <span class="input-group-btn">
-                <button class="btn btn-default copyable" type="button" data-clipboard-target="#key"><span class="glyphicon glyphicon-copy"></span></button>
-              </span>
-            </div>
           </div>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-success encryption-active" data-dismiss="modal">Done</button>
+          <button type="button" class="btn btn-danger encryption-inactive" data-dismiss="modal">Continue Without Encryption</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal fade" id="first-modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <h3 class="modal-title">Welcome to FattyChat</h3>
+        </div>
+        <div class="modal-body">
+          <h4>About This Room</h4>
+          <p>Others can join this room using this link: <span class='room-url bold'></span>&nbsp;&nbsp;<button class="btn btn-default btn-xs copyable" data-clipboard-target=".room-url">Copy</button></p>
+          <br>
+          <h4>Encryption Key</h4>
+          <p>A random key has been generated for you below. Share this key with all other participants. Every participant must use the exact same key.</p>
+          <p>If you want to use a custom key you can enter it below or &nbsp;<button class="new_key btn btn-default btn-xs">generate a new one</button></p>
+          <div class="input-group">
+            <input class="form-control key" placeholder="Enter key here" type="text"></input>
+            <span class="input-group-btn">
+              <button class="btn btn-default copyable" type="button" data-clipboard-target=".key"><span class="glyphicon glyphicon-copy"></span>&nbsp;&nbsp;Copy</button>
+            </span>
+          </div>
+          <p>You can change this key later in Settings, but be sure to share the new key with all other participants.</p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-success encryption-active" data-dismiss="modal">Done</button>
+          <button type="button" class="btn btn-danger encryption-inactive" data-dismiss="modal">Continue Without Encryption</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal fade" id="join-modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <h3 class="modal-title">Welcome to FattyChat</h3>
+        </div>
+        <div class="modal-body">
+          <h4>About This Room</h4>
+          <p>Others can join this room using this link: <span class='room-url bold'></span>&nbsp;&nbsp;<button class="btn btn-default btn-xs copyable" data-clipboard-target=".room-url">Copy</button></p>
+          <br>
+          <h4>Encryption Key</h4>
+          <p>If you were given an encryption key, enter it below.</p>
+          <div class="input-group">
+            <input class="form-control key" placeholder="Enter key here" type="text"></input>
+            <span class="input-group-btn">
+              <button class="btn btn-default copyable" type="button" data-clipboard-target=".key"><span class="glyphicon glyphicon-copy"></span>&nbsp;&nbsp;Copy</button>
+            </span>
+          </div>
+          <p>You can change this key later in Settings, but be sure to share the new key with all other participants.</p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-success encryption-active" data-dismiss="modal">Done</button>
+          <button type="button" class="btn btn-danger encryption-inactive" data-dismiss="modal">Continue Without Encryption</button>
         </div>
       </div>
     </div>
@@ -117,6 +170,7 @@
   <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 type="text/javascript" src="vendor/jquery.noty.packaged.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(){