Added confirm modal when deleting recording (#2056)

app/assets/javascripts/recording.js

@@ -37,5 +37,12 @@ $(document).on('turbolinks:load', function(){
         win.focus();
       });
     });
+
+    // Handle recording delete modal
+    $(".delete-rec").click(function() {
+      $("#delete-rec-confirm").parent().attr("action", $(this).data("path"))
+    })
+
+    
   }
 });

app/views/admins/components/_server_recording_row.html.erb

@@ -73,9 +73,9 @@
           <a class="dropdown-item email-link" data-pres-link="<%= recording_links %>"><i class="dropdown-icon far fa-envelope"></i> <%= t("recording.email") %></a>
           <div class="dropdown-divider"></div>
         <% end %>
-        <%= button_to delete_recording_path(meetingID: recording[:meetingID], record_id: recording[:recordID]), method: :delete, class: "dropdown-item", "data-disable": "" do %>
+        <a href="" data-toggle="modal" data-target="#deleteRecordingModal" data-path="<%= delete_recording_path(meetingID: recording[:meetingID], record_id: recording[:recordID]) %>" class="delete-rec dropdown-item">
           <i class="dropdown-icon far fa-trash-alt"></i> <%= t("delete") %>
-        <% end %>
+        </a>
       </div>
     </div>
   </td>

app/views/admins/server_recordings.html.erb

@@ -25,3 +25,5 @@
     </div>
   </div>
 </div>
+
+<%= render "shared/modals/delete_recording_modal" %> 

app/views/shared/_sessions.html.erb

@@ -124,3 +124,5 @@
     </div>
   </div>
 </div>
+
+<%= render "shared/modals/delete_recording_modal" %> 

app/views/shared/components/_recording_row.html.erb

@@ -81,9 +81,9 @@
           <a class="dropdown-item email-link" data-pres-link="<%= recording_links %>"><i class="dropdown-icon far fa-envelope"></i> <%= t("recording.email") %></a>
           <div class="dropdown-divider"></div>
         <% end %>
-        <%= button_to delete_recording_path(meetingID: recording[:meetingID], record_id: recording[:recordID]), method: :delete, class: "dropdown-item", "data-disable": "" do %>
+        <a href="" data-toggle="modal" data-target="#deleteRecordingModal" data-path="<%= delete_recording_path(meetingID: recording[:meetingID], record_id: recording[:recordID]) %>" class="delete-rec dropdown-item">
           <i class="dropdown-icon far fa-trash-alt"></i> <%= t("delete") %>
-        <% end %>
+        </a>
       </div>
     </div>
   </td>

app/views/shared/modals/_delete_recording_modal.html.erb

@@ -0,0 +1,42 @@
+<%
+# BigBlueButton open source conferencing system - http://www.bigbluebutton.org/.
+# Copyright (c) 2018 BigBlueButton Inc. and by respective authors (see below).
+# This program is free software; you can redistribute it and/or modify it under the
+# terms of the GNU Lesser General Public License as published by the Free Software
+# Foundation; either version 3.0 of the License, or (at your option) any later
+# version.
+#
+# BigBlueButton is distributed in the hope that it will be useful, but WITHOUT ANY
+# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
+# PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
+# You should have received a copy of the GNU Lesser General Public License along
+# with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
+%>
+
+<div class="modal fade" id="deleteRecordingModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog modal-dialog-centered" role="document">
+    <div class="modal-content text-center">
+      <div class="modal-body">
+        <div class="card-body p-6">
+          <div class="card-title">
+            <h3><%= t("modal.delete_rec.header") %></h3>
+          </div>
+
+          <button type="button" class="btn btn-info my-1 btn-del-room" data-dismiss="modal">
+            <%= t("modal.delete_room.keep") %>
+          </button>
+
+          <%= button_to "/", method: :delete, id: "delete-rec-confirm", class: "btn btn-danger my-1 btn-del-room", "data-disable": "" do %>
+            <%= t("modal.delete_rec.delete") %>
+          <% end %>
+
+        </div>
+        <div class="card-footer">
+          <p id="delete-footer">
+            <%= t("modal.delete_rec.warning").html_safe %>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

config/locales/en.yml

@@ -394,6 +394,10 @@ en:
       keep: Actually, I'll keep it.
       delete_warning: This will deactivate the user's account. All deactived users can be found under the deleted tab.
       warning: This decision is final. You will <b>not</b> be able to recover associated data.
+    delete_rec:
+      delete: I'm sure, delete this recording.
+      header: Are you sure you want to delete this recording?
+      warning: You will <b>not</b> be able to recover this recording
     delete_room:
       confirm: Are you sure you want to delete %{room}?
       delete: I'm sure, delete this room.