Add the wipe modal and implement logic to wipe data

Both chatHistory (client side only) and etherpad (needs server side) are handled
Fix #68

public/js/vroom.js

@@ -72,7 +72,9 @@ var locale = {
   A_ROOM_ADMIN: '',
   A_PARTICIPANT: '',
   PASSWORDS_DO_NOT_MATCH: '',
-  WAIT_WITH_MUSIC: ''
+  WAIT_WITH_MUSIC: '',
+  DATA_WIPED: '',
+  ROOM_DATA_WIPED_BY_s: ''
 };
 
 // Localize the strings we need
@@ -713,6 +715,13 @@ function initVroom(room) {
     chatIndex++;
   }
 
+  // Wipe the history
+  function wipeChatHistory(){
+    $('#chatHistory').html('');
+    chatHistory = {};
+    chatIndex = 0;
+  }
+
   // Update the displayName of the peer
   // and its screen if any
   function updateDisplayName(id){
@@ -1206,6 +1215,37 @@ function initVroom(room) {
       getRoomInfo();
     }
   });
+  // An owner has wiped data
+  webrtc.on('wipe_data', function(data){
+    if (data.roomType == 'screen' || peers[data.id].role != 'owner'){
+      return;
+    }
+    wipeChatHistory();
+    if (etherpad.enabled){
+      $.ajax({
+        data: {
+          action: 'padSession',
+          room: roomName,
+        },
+        error: function(data) {
+          $.notify(locale.ERROR_OCCURRED, 'error');
+        },
+        success: function(data) {
+          if (data.status == 'success'){
+            if (data.msg){
+              $.notify(data.msg, 'success');
+            }
+            loadEtherpadIframe();
+          }
+          else if (data.msg){
+            $.notify(data.msg, 'error');
+          }
+        }
+      });
+    }
+    var who = (peers[data.id].hasName) ? peers[data.id].displayName : locale.A_ROOM_ADMIN;
+    $.notify(sprintf(locale.ROOM_DATA_WIPED_BY_s, stringEscape(who)), 'warn');
+  });
 
   // Handle the readyToCall event: join the room
   // Or prompt for a name first
@@ -1949,6 +1989,37 @@ function initVroom(room) {
     $('#helpButton').removeClass('active');
   });
 
+  // Display the wipe data modal
+  $('#wipeDataButton').click(function(){
+    $('#wipeModal').modal('show');
+  });
+  // Really wipe data
+  $('#confirmWipeButton').click(function(){
+    if (etherpad.enabled){
+      $.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, 'success');
+  });
+
   if (etherpad.enabled){
     $('#etherpadButton').change(function(){
       var action = ($(this).is(':checked')) ? 'show':'hide';

public/vroom.pl

@@ -1253,6 +1253,47 @@ post '/action' => sub {
       }
     );
   }
+  # Wipe etherpad data
+  elsif ($action eq 'wipeData'){
+    my $status = 'error';
+    my $msg    = $self->l('ERROR_OCCURRED');
+    if ($self->session($room)->{role} ne 'owner'){
+      $msg = $self->l('NOT_ALLOWED');
+    }
+    elsif (!$ec){
+      $msg = 'NOT_ENABLED';
+    }
+    elsif ($ec->delete_pad($data->{etherpad_group} . '$' . $room) && $self->create_pad($room) && $self->create_etherpad_session($room)){
+      $status = 'success';
+      $msg = $self->l('PAD_DELETED_NEW_CREATED');
+    }
+    return $self->render(
+      json => {
+        msg    => $msg,
+        status => $status
+      }
+    );
+  }
+  elsif ($action eq 'padSession'){
+    my $status = 'error';
+    my $msg    = $self->l('ERROR_OCCURRED');
+    if ($self->session($room)->{role} !~ m/^owner|participant$/){
+      $msg = $self->l('NOT_ALLOWED');
+    }
+    elsif (!$ec){
+      $msg = 'NOT_ENABLED';
+    }
+    elsif ($self->create_etherpad_session($room)){
+      $status = 'success';
+      $msg = '';
+    }
+    return $self->render(
+      json => {
+        msg    => $msg,
+        status => $status
+      }
+    );
+  }
 };
 
 # use the templates defined in the config

templates/default/join.html.ep

@@ -181,11 +181,11 @@
               <li>
                 <center>
                   <div class="navbar-form">
-                    <div class="btn-group" data-toggle="buttons">
+                    <div class="btn-group">
                       <%
                         my $wipeTitle = ($etherpad) ? 'WIPE_CHAT_AND_PAD' : 'WIPE_CHAT';
                       %>
-                      <button class="btn btn-default help" id="wipeData" data-toggle="tooltip" data-placement="bottom" title="<%=l $wipeTitle %>">
+                      <button id="wipeDataButton" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%=l $wipeTitle %>">
                         <span class="glyphicon glyphicon-fire">
                         </span>
                       </button>
@@ -560,6 +560,41 @@
         </div>
       </div>
     </div>
+    <div class="modal fade" role="dialog" id="wipeModal" aria-labelledby="wipeModal" aria-hidden="true">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h4 class="modal-title"><%=l 'WIPE_ROOM_DATA' %></h4>
+          </div>
+          <div class="modal-body">
+            <p>
+              <%=l 'YOU_ARE_ABOUT_TO_WIPE_DATA' %>
+              <%=l 'THIS_INCLUDE' %>
+              <ul>
+                <li>
+                  <%=l 'CHAT_HISTORY' %>
+                </li>
+                <% if ($etherpad) { %>
+                <li>
+                  <%=l 'PAD_CONTENT' %>
+                </li>
+                <% } %>
+              </ul>
+            </p>
+          </div>
+          <div class="modal-footer">
+            <div class="btn-group">
+              <button id="confirmWipeButton" class="btn btn-danger">
+                <%=l 'CONFIRM_WIPE' %>
+              </button>
+              <button class="btn btn-primary" data-dismiss="modal" data-target="#wipeModal">
+                <%=l 'CANCEL' %>
+              </button>
+            </div>
+          </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">