add delete confirmation modal

app/assets/stylesheets/rooms.scss

@@ -7,7 +7,7 @@
 }
 
 .thumbnail {
-  height: 40% !important;
+  height: 60px !important;
   width: auto;
 }
 
@@ -22,3 +22,7 @@
 .home-indicator {
   font-size: 22px !important;
 }
+
+.btn-del-room {
+  width: 70% !important;
+}

app/controllers/rooms_controller.rb

@@ -65,8 +65,9 @@ class RoomsController < ApplicationController
 
   # DELETE /:room_uid
   def destroy
+    p @room
     # Don't delete the users home room.
-    @room.destroy if @room != current_user.main_room
+    @room.destroy if @room.owned_by?(current_user) && @room != current_user.main_room
 
     redirect_to current_user.main_room
   end

app/views/main/index.html.erb

@@ -12,7 +12,7 @@
       <h1 id="main-text" class="font-weight-400 responsive-header">Welcome to Greenlight.</h1>
       <h4 class="text-muted">A simple front end for your BigBlueButton Open Source Web Conferencing Server.</h4>
 
-      <%= link_to "https://www.youtube.com/watch?v=yGX3JCv7OVM&feature=youtu.be", class: "p-3", target: "_blank" do %>
+      <%= link_to "https://youtu.be/Hso8yLzkqj8", class: "p-3", target: "_blank" do %>
         <h4>Watch a tutorial on using Greenlight <i class="far fa-play-circle"></i></h4>
       <% end %>
     </div>

app/views/rooms/show.html.erb

@@ -48,6 +48,7 @@
               <%= render "shared/components/room_block", room: room %>
             <% end %>
           </div>
+          <%= render "shared/modals/delete_room_modal", room: room %>
         <% end %>
       <% end %>
     </div>

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

@@ -25,15 +25,15 @@
           <% if room != current_user.main_room %>
             <div class="item-action dropdown">
               <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fas fa-ellipsis-v"></i></a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <div class="dropdown-menu">
                 <!--
                 <%= link_to room, class: "dropdown-item" do %>
                   <i class="dropdown-icon fas fa-cog"></i> Room Settings
                 <% end %>
                 -->
-                <%= button_to room, method: :delete, data: { confirm: 'Are you sure?' }, class: "dropdown-item" do %>
+                <a href="" data-toggle="modal" data-target="#deleteRoomModal_<%= room.uid %>"class="dropdown-item">
                   <i class="dropdown-icon far fa-trash-alt"></i> Delete
-                <% end %>
+                </a>
               </div>
             </div>
           <% end %>

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

@@ -0,0 +1,25 @@
+<div class="modal fade" id="deleteRoomModal_<%= room.uid %>" 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>Are you sure you want to delete <%= room.name %>?</h3>
+          </div>
+
+          <button type="button" class="btn btn-pill btn-info my-1 btn-del-room" data-dismiss="modal">
+            On second thought, I'll keep it.
+          </button>
+
+          <%= button_to room, method: :delete, id: "delete-confirm", class: "btn btn-pill btn-danger my-1 btn-del-room" do %>
+            I'm sure, delete this room.
+          <% end %>
+
+        </div>
+        <div class="card-footer">
+          <p>You will <b>not</b> be able to recover this room or any of its associated recordings.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>