Use form instead of simple divs for paswords

So hitting enter also submit it

public/js/vroom.js

@@ -681,7 +681,8 @@ function initVroom(room) {
   });
 
   // Join password protection
-  $('#setJoinPassButton').click(function(event) {
+  $('#joinPassForm').submit(function(event) {
+    event.preventDefault();
     var pass = $('#joinPass').val();
     $('#joinPass').val('');
     $('#setJoinPassButton').addClass('disabled');
@@ -734,7 +735,7 @@ function initVroom(room) {
     });
   });
 
-
+  // Set owner password
   $('#ownerPass').on('input', function() {
     if ($('#ownerPass').val() == ''){
       $('#setOwnerPassButton').addClass('disabled');
@@ -743,9 +744,8 @@ function initVroom(room) {
       $('#setOwnerPassButton').removeClass('disabled');
     }
   });
-
-  // Set owner password
-  $('#setOwnerPassButton').click(function(event) {
+  $('#ownerPassForm').submit(function(event) {
+    event.preventDefault();
     var pass = $('#ownerPass').val();
     $('#ownerPass').val('');
     $('#setOwnerPassButton').addClass('disabled');

templates/default/join.html.ep

@@ -87,14 +87,14 @@
           </button>
           <ul class="dropdown-menu" role="menu" aria-labelledby="confMenuButton" id="confMenu">
             <li>
-              <div class="navbar-form">
+              <form class="navbar-form" id="joinPassForm">
                 <center>
                   <p><%=l 'YOU_CAN_PASSWORD_PROTECT_JOIN' %></p>
                 </center>
                 <div class="input-group">
                   <input type="password" id="joinPass" class="form-control help" placeholder="<%=l 'PASSWORD' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'PASSWORD_PROTECT' %>"/>
                   <span class="input-group-btn">
-                    <button id="setJoinPassButton" type="button" class="btn btn-default help disabled" data-toggle="tooltip" data-placement="bottom" title="<%=l 'PASSWORD_PROTECT' %>">
+                    <button id="setJoinPassButton" type="submit" class="btn btn-default help disabled" data-toggle="tooltip" data-placement="bottom" title="<%=l 'PASSWORD_PROTECT' %>">
                       <span class="glyphicon glyphicon-ok"
                       </span>
                     </button>
@@ -104,19 +104,19 @@
                     </button>
                   </span>
                 </div>
-              </div>
+              </form>
             </li>
             <li class="divider">
             </li>
             <li>
-              <div class="navbar-form">
+              <form class="navbar-form" id="ownerPassForm">
                 <center>
                   <p><%=l 'OWNER_PASSWORD_MAKES_PERSISTENT' %></p>
                 </center>
                 <div class="input-group">
                   <input type="password" id="ownerPass" class="form-control help" placeholder="<%=l 'PASSWORD' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'OWNER_PASSWORD' %>"/>
                   <span class="input-group-btn">
-                    <button id="setOwnerPassButton" type="button" class="btn btn-default help disabled" data-toggle="tooltip" data-placement="bottom" title="<%=l 'OWNER_PASSWORD' %>">
+                    <button id="setOwnerPassButton" type="submit" class="btn btn-default help disabled" data-toggle="tooltip" data-placement="bottom" title="<%=l 'OWNER_PASSWORD' %>">
                       <span class="glyphicon glyphicon-ok"
                       </span>
                     </button>
@@ -126,7 +126,7 @@
                     </button>
                   </span>
                 </div>
-              </div>
+              </form>
             </li>
           </ul>
         </div>