Add a confirm dialog when quiting

Fix #69

public/js/vroom.js

@@ -872,6 +872,34 @@ function initVroom(room) {
     });
   }
 
+  // Wipe data
+  function wipeRoomData(){
+    if (etherpad.enabled){
+      $.ajax({
+        data: {
+          action: 'wipeData',
+          room: roomName
+        },
+        async: false,
+        error: function(data){
+          $.notify(locale.ERROR_OCCURRED, 'error');
+        },
+        success: function(data){
+          if (data.status && data.status == 'success'){
+            loadEtherpadIframe();
+          }
+          else if (data.msg){
+            $.notify(data.msg, 'error');
+          }
+        }
+      });
+    }
+    webrtc.sendToAll('wipe_data', {});
+    wipeChatHistory();
+    $('#wipeModal').modal('hide');
+    $.notify(locale.DATA_WIPED, 'info');
+  }
+
   // An owner is muting/unmuting someone
   webrtc.on('owner_toggle_mute', function(data){
     // Ignore this if the remote peer isn't the owner of the room
@@ -1909,7 +1937,20 @@ function initVroom(room) {
   });
 
   // Handle hangup/close window
-  $('#logoutButton').click(function() {
+  $('#logoutButton').click(function(){
+    $('#quitModal').modal('show');
+  });
+  // Remove the active class on the logout button if
+  // the modal is closed
+  $('#quitModal').on('hide.bs.modal',function(){
+    $('#logoutButton').removeClass('active');
+  });
+  $('#confirmQuitButton').click(function() {
+    hangupCall;
+    window.location.assign(rootUrl + 'goodby/' + roomName);
+  });
+  $('#confirmWipeAndQuitButton').click(function(){
+    wipeRoomData();
     hangupCall;
     window.location.assign(rootUrl + 'goodby/' + roomName);
   });
@@ -1995,29 +2036,7 @@ function initVroom(room) {
   });
   // Really wipe data
   $('#confirmWipeButton').click(function(){
-    if (etherpad.enabled){
+    wipeRoomData();
-      $.ajax({
-        data: {
-          action: 'wipeData',
-          room: roomName
-        },
-        error: function(data){
-          $.notify(locale.ERROR_OCCURRED, 'error');
-        },
-        success: function(data){
-          if (data.status && data.status == 'success'){
-            loadEtherpadIframe();
-          }
-          else if (data.msg){
-            $.notify(data.msg, 'error');
-          }
-        }
-      });
-    }
-    webrtc.sendToAll('wipe_data', {});
-    wipeChatHistory();
-    $('#wipeModal').modal('hide');
-    $.notify(locale.DATA_WIPED, 'info');
   });
 
   if (etherpad.enabled){

templates/default/join.html.ep

@@ -605,6 +605,39 @@
         </div>
       </div>
     </div>
+    <div class="modal fade" role="dialog" id="quitModal" aria-labelledby="quitModal" aria-hidden="true">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+              &times;
+            </button>
+            <h4 class="modal-title">
+              <%=l 'LEAVE_THIS_ROOM' %>
+            </h4>
+          </div>
+          <div class="modal-body">
+            <p>
+              <%=l 'ARE_YOU_SURE_YOU_WANT_TO_LEAVE' %>
+            </p>
+            <p class="ownerEl">
+              <%=l 'YOU_CAN_WIPE_DATA_BEFORE_LEAVING' %>
+            </p>
+          </div>
+          <div class="modal-footer">
+            <button id="confirmWipeAndQuitButton" class="btn btn-danger ownerEl">
+              <%=l 'WIPE_AND_QUIT' %>
+            </button>
+            <button id="confirmQuitButton" class="btn btn-primary">
+              <%=l 'QUIT' %>
+            </button>
+            <button class="btn btn-default" data-dismiss="modal" data-target="#quitModal">
+              <%=l 'CANCEL' %>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
     <div class="modal fade" role="dialog" id="chromeExtMessage" aria-labelledby="chromeExtMessage" aria-hidden="true">
       <div class="modal-dialog modal-sm">
         <div class="modal-content">