First round of the config menu revamp

public/css/vroom.css

@@ -147,6 +147,9 @@
 #mainVideo {
   display: none;
 }
+.hidden-form {
+  display: none;
+}
 .actionMute:before{
   font-family: 'Glyphicons Halflings';
   content: "\e036";

public/js/vroom.js

@@ -572,10 +572,12 @@ function initVroom(room) {
         if (data.join_auth == 'yes'){
           $('#joinPassLabel').addClass('btn-danger active');
           $('#joinPassButton').prop('checked', true);
+          $('#joinPassSet').bootstrapSwitch('state', true);
         }
         if (data.owner_auth == 'yes'){
           $('#ownerPassLabel').addClass('btn-danger active');
           $('#ownerPassButton').prop('checked', true);
+          $('#ownerPassSet').bootstrapSwitch('state', true);
         }
       }
     });
@@ -1402,11 +1404,13 @@ function initVroom(room) {
       $.notify(sprintf(locale.PASSWORD_PROTECT_ON_BY_s, stringEscape(who)), 'info');
       $('#joinPassLabel').addClass('btn-danger active');
       $('#joinPassButton').prop('checked', true);
+      $('#joinPassSet').bootstrapSwitch('state', true);
     }
     else{
       $.notify(sprintf(locale.PASSWORD_PROTECT_OFF_BY_s, stringEscape(who)), 'info');
       $('#joinPassLabel').removeClass('btn-danger active');
       $('#joinPassButton').prop('checked', false);
+      $('#joinPassSet').bootstrapSwitch('state', true);
     }
   });
   webrtc.on('owner_password', function(data){
@@ -1419,11 +1423,13 @@ function initVroom(room) {
         $.notify(sprintf(locale.OWNER_PASSWORD_CHANGED_BY_s, stringEscape(who)), 'info');
         $('#ownerPassLabel').addClass('btn-danger active');
         $('#ownerPassButton').prop('checked', true);
+        $('#ownerPassSet').bootstrapSwitch('state', true);
       }
       else{
         $.notify(sprintf(locale.OWNER_PASSWORD_REMOVED_BY_s, stringEscape(who)), 'info');
         $('#ownerPassLabel').removeClass('btn-danger active');
         $('#ownerPassButton').prop('checked', false);
+        $('#ownerPassSet').bootstrapSwitch('state', false);
       }
     }
     else{
@@ -2003,6 +2009,24 @@ function initVroom(room) {
     }
   });
 
+  // Hide or show password fields
+  $('#joinPassSet').on('switchChange.bootstrapSwitch', function(event, state) {
+    if (state){
+      $('#joinPassFields').show(200);
+    }
+    else{
+      $('#joinPassFields').hide(200);
+    }
+  });
+  $('#ownerPassSet').on('switchChange.bootstrapSwitch', function(event, state) {
+    if (state){
+      $('#ownerPassFields').show(200);
+    }   
+    else{
+      $('#ownerPassFields').hide(200);
+    }
+  });
+
   $('#ownerPassButton').change(function(){
     var action = ($(this).is(':checked')) ? 'set':'unset';
     if (action == 'set'){

templates/default/configure_modal.html.ep

@@ -0,0 +1,89 @@
+    <div class="modal fade" role="dialog" id="configureModal" aria-labelledby="configureModal" 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 'CONFIGURE' %>
+            </h4>
+          </div>
+          <div class="modal-body">
+            <form id ="configureRoomForm" class="form-horizontal" role="form">
+              <div class="form-group">
+                <label class="col-sm-4 control-label" for="locked">
+                  <%=l 'LOCK_ROOM' %>
+                </label>
+                <div class="col-sm-8">
+                  <input type="checkbox" class="bs-switch" id="locked">
+                </div>
+              </div>
+              <div class="form-group">
+                <label class="col-sm-4 control-label" for="askForName">
+                  <%=l 'ASK_FOR_NAME' %>
+                </label>
+                <div class="col-sm-8">
+                  <input type="checkbox" class="bs-switch" id="askForName">
+                </div>
+              </div>
+              <div class="form-group">
+                <label class="col-sm-4 control-label" for="joinPassSet">
+                  <%=l 'PASSWORD_PROTECT' %>
+                </label>
+                <div class="col-sm-8">
+                  <input type="checkbox" class="bs-switch" id="joinPassSet">
+                </div>
+              </div>
+              <div class="form-group hidden-form" id="joinPassFields">
+                <label class="col-sm-4 control-label" for="joinPass">
+                  <%=l 'PASSWORD' %>
+                </label>
+                <div class="col-sm-8">
+                  <input id="joinPass" type="password" class="form-control" placeholder="<%=l 'PASSWORD' %>"/>
+                </div>
+                <label class="col-sm-4 control-label" for="joinPassConfirm">
+                  <%=l 'CONFIRM_PASSWORD' %>
+                </label>
+                <div class="col-sm-8">
+                  <input id="joinPassConfirm" type="password" class="form-control" placeholder="<%=l 'CONFIRM_PASSWORD' %>"/>
+                </div>
+              </div>
+              <div class="form-group">
+                <label class="col-sm-4 control-label" for="ownerPassSet">
+                  <%=l 'RESERVE_THIS_ROOM' %>
+                </label>
+                <div class="col-sm-8">
+                  <input type="checkbox" class="bs-switch" id="ownerPassSet">
+                </div>
+              </div>
+              <div class="form-group hidden-form" id="ownerPassFields">
+                <label class="col-sm-4 control-label" for="ownerPass">
+                  <%=l 'PASSWORD' %>
+                </label>
+                <div class="col-sm-8">
+                  <input id="ownerPass" type="password" class="form-control" placeholder="<%=l 'PASSWORD' %>"/>
+                </div>
+                <label class="col-sm-4 control-label" for="ownerPassConfirm">
+                  <%=l 'CONFIRM_PASSWORD' %>
+                </label>
+                <div class="col-sm-8">
+                  <input id="ownerPassConfirm" type="password" class="form-control" placeholder="<%=l 'CONFIRM_PASSWORD' %>"/>
+                </div>
+              </div>
+              <div class="form-group">
+                <div class="col-sm-offset-4 col-sm-8">
+                  <button type="submit" class="btn 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

@@ -82,6 +82,12 @@
               </span>
             </button>
           </div>
+          <div class="btn-group ownerEl">
+            <button class="btn btn-default help" type="button" data-toggle="modal" data-target="#configureModal" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CONFIGURE' %>">
+              <span class="glyphicon glyphicon-cog">
+              </span>
+            </button>
+          </div>
           <div class="btn-group dropdown ownerEl threePeersEl">
             <button class="btn btn-default dropdown-toggle help" type="button" id="groupActionsButton" data-toggle="dropdown" data-toggle="tooltip" data-placement="bottom" title="<%=l 'GROUP_ACTIONS' %>">
               <span class="glyphicon glyphicon-flag">
@@ -774,6 +780,7 @@
       </div>
     </div>
 %=include 'invite_modal'
+%=include 'configure_modal'
 %=include 'owner_password_modal'
 %=include 'join_password_modal'
 %=include 'noscript'