Trigger key on first

src/public/main.js

@@ -285,6 +285,10 @@ $(function() {
     removeChatTyping(data);
   });
 
+  socket.on('first', function() {
+    $('.modal').modal('show');
+  });
+
   setUsername();
 
   $('span.key-btn').click(function() {

src/room.js

@@ -24,6 +24,10 @@ class Room {
       socket.on('add user', (username) => {
         if (addedUser) return;
 
+        if (this.numUsers === 0) {
+          socket.emit('first');
+        }
+
         // we store the username in the socket session for this client
         socket.username = username;
         ++this.numUsers;

src/views/index.mustache

@@ -30,7 +30,7 @@
           <h4 class="modal-title">Key</h4>
         </div>
         <div class="modal-body">
-          <p>Enter your key below</p>
+          <p>This is your chat encryption key. Anyone who is in this chat room must use the same key to decrypt chat messages. This key is <strong>NOT</strong> stored nor transmitted to the server. If the key does not match, other clients will see encrypted messages. You may change the key as many times as you want.</p>
           <input id="key" placeholder="Enter key here">
         </div>
         <div class="modal-footer">