Replace the dropdown auth menu with a modal dialog

public/js/vroom.js

@@ -1639,9 +1639,9 @@ function initVroom(room) {
       $('#authPassButton').removeClass('disabled');
     }
   });
-  $('#authForm').submit(function(event) {
+  $('#ownerAuthForm').submit(function(event) {
     event.preventDefault();
-    var pass = $('#authPass').val();
+    var pass = $('#ownerAuthPass').val();
     $.ajax({
       data: {
         req: JSON.stringify({
@@ -1664,8 +1664,6 @@ function initVroom(room) {
         else{
           $.notify(data.msg, 'error');
         }
-        // Close the auth menu
-        $('#authMenu').dropdown('toggle');
       }
     });
   });

templates/default/auth_modal.html.ep

@@ -0,0 +1,40 @@
+    <div class="modal fade" role="dialog" id="ownerAuthModal" aria-labelledby="ownerAuthModal" aria-hidden="true">
+      <div class="modal-dialog modal-lg">
+        <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 'AUTHENTICATION' %>
+            </h4>
+          </div>
+          <div class="modal-body">
+            <form class="form-horizontal" role="form" id="ownerAuthForm">
+              <p>
+                <%=l 'AUTH_TO_MANAGE_THE_ROOM' %>
+              </p>
+              <div class="form-group">
+                <label for="ownerAuthPass" class="col-sm-4 control-label">
+                  <%=l 'PASSWORD' %>
+                </label>
+                <div class="col-sm-8">
+                  <input type="password" id="ownerAuthPass" class="form-control" placeholder="<%=l 'PASSWORD' %>"/>
+                </div>
+              </div>
+              <div class="form-group">
+                <div class="col-sm-offset-4 col-sm-8">
+                  <button type="submit" class="btn btn-default btn-primary">
+                    <%=l 'SUBMIT' %>
+                  </button>
+                  <button class="btn btn-default" data-dismiss="modal">
+                    <%=l 'CANCEL' %>
+                  </button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+

templates/default/join.html.ep

@@ -100,30 +100,10 @@
           </div>
         </div>
         <div class="btn-group navbar-form navbar-left">
-          <button class="btn btn-default dropdown-toggle help unauthEl" type="button" id="authMenuButton" data-toggle="dropdown" data-toggle="tooltip" data-placement="bottom" title="<%=l 'AUTHENTICATE' %>">
+          <button class="btn btn-default dropdown-toggle help unauthEl" data-toggle="modal" data-target="#ownerAuthModal" data-toggle="dropdown" data-toggle="tooltip" data-placement="bottom" title="<%=l 'AUTHENTICATE' %>">
             <span class="glyphicon glyphicon-log-in">
             </span>
-            <span class="caret">
-            </span>
-          </button>
-          <ul class="dropdown-menu" role="menu" aria-labelledby="authMenuButton" id="authMenu">
-            <li>
-              <form class="navbar-form" id="authForm">
-                <p class="text-center">
-                  <%=l 'AUTH_TO_MANAGE_THE_ROOM' %>
-                </p>
-                <div class="input-group">
-                  <input type="password" id="authPass" class="form-control help" placeholder="<%=l 'PASSWORD' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'AUTHENTICATE' %>"/>
-                  <span class="input-group-btn">
-                    <button id="authPassButton" type="submit" class="btn btn-default help disabled" data-toggle="tooltip" data-placement="bottom" title="<%=l 'AUTHENTICATE' %>">
-                      <span class="glyphicon glyphicon-ok">
-                      </span>
           </button>
-                  </span>
-                </div>
-              </form>
-            </li>
-          </ul>
         </div>
         <div class="navbar-form navbar-right" data-toggle="buttons" >
           <div class="btn-group">
@@ -631,6 +611,7 @@
     </div>
 %=include 'invite_modal'
 %=include 'configure_modal'
+%=include 'auth_modal'
 %=include 'noscript'
     <div class="frame">
       <div id="chatMenu" class="nav-collapse collapse">