Enhance the connection modal

So users know when input (password/name) is required

public/js/vroom.js

@@ -879,11 +879,11 @@ function initJoin(room){
   $('#authBeforeJoinPass').on('input', function() {
     var pass = $('#authBeforeJoinPass').val();
     if (pass.length > 0 && pass.length < 200){
-      $('#authBeforeJoinButton').removeClass('disabled');
+      $('#authBeforeJoinButton').prop('disabled', false);
       $('#authBeforeJoinPass').parent().removeClass('has-error');
     }
     else{ 
-      $('#authBeforeJoinButton').addClass('disabled');
+      $('#authBeforeJoinButton').prop('disabled', true);
       $('#authBeforeJoinPass').parent().addClass('has-error');
       $('#authBeforeJoinPass').notify(pass.length < 1 ? localize('PASSWORD_REQUIRED') : localize('PASSWORD_TOO_LONG'), 'error');
     }
@@ -893,7 +893,6 @@ function initJoin(room){
     event.preventDefault();
     var pass = $('#authBeforeJoinPass').val();
     if (pass.length > 0 && pass.length < 200){
-      $('#auth-before-join').slideUp();
       try_auth(pass, true);
     }
   });
@@ -902,11 +901,11 @@ function initJoin(room){
   $('#displayNamePre').on('input', function() {
     var name = $('#displayNamePre').val();
     if (name.length > 0 && name.length < 50){
-      $('#displayNamePreButton').removeClass('disabled');
+      $('#displayNamePreButton').prop('disabled', false);
       $('#displayNamePre').parent().removeClass('has-error');
     }
     else{
-      $('#displayNamePreButton').addClass('disabled');
+      $('#displayNamePreButton').prop('disabled', true);
       $('#displayNamePre').parent().addClass('has-error');
       $('#displayNamePre').notify(name.length < 1 ? localize('DISPLAY_NAME_REQUIRED') : localize('DISPLAY_NAME_TOO_LONG'), 'error');
     }
@@ -915,6 +914,7 @@ function initJoin(room){
   // Intercept form submission
   $('#displayNamePreForm').submit(function(event){
     event.preventDefault();
+    $('#connecting-msg').slideDown();
     var name = $('#displayNamePre').val();
     if (name.length > 0 && name.length < 50){
       $('#display-name-pre').slideUp();
@@ -936,7 +936,7 @@ function initJoin(room){
         password: pass
       },
       function(data){
-        $('.connecting-err-reason').hide();
+        $('#connecting-err-reason').hide();
         // Once auth is passed, we retrieve room configuration
         vroomApi(
           'get_room_conf',
@@ -944,10 +944,12 @@ function initJoin(room){
             room: room,
           },
           function(data){
+            $('#auth-before-join').slideUp();
             roomInfo = data;
             // If our name is asked before joining the room, display the corresponding modal
             // Else, just continue (with webrtc initialization
             if (roomInfo.ask_for_name){
+              $('#connecting-msg').slideUp();
               $('#display-name-pre').slideDown();
             }
             else{
@@ -960,14 +962,15 @@ function initJoin(room){
         // 401 means password is needed
         if (data.status === 401){
           data = data.responseJSON;
-          $('.connecting-err-reason').text(data.msg);
+          $('#connecting-err-reason').text(data.msg).removeClass('alert-info alert-danger').addClass((pass === '') ? 'alert-info' : 'alert-danger');
+          $('#connecting-msg').slideUp();
           $('#auth-before-join').slideDown();
         }
         // 403 is when the room is locked, and there's no owner pass
         // So there's nothing to do, the access will be denied
         else if (data.status === 403){
           data = data.responseJSON;
-          $('.connecting-err-reason').text(data.msg);
+          $('#connecting-err-reason').text(data.msg).removeClass('alert-info').addClass('alert-danger');
           $('.connecting-msg').not('#room-is-locked').remove();
           $('#room-is-locked').slideDown();
         }

templates/default/join.html.ep

@@ -297,15 +297,17 @@
               <p class="text-center">
                 %= l('CONNECTING_PLEASE_WAIT')
               </p>
-              <p class="text-center connecting-err-reason">
-              </p>
+            </div>
+            <div class="row">
+              <div class="col-md-8 col-md-offset-2 alert alert-danger text-center"
+                   id="connecting-err-reason"
+                   role="alert">
+              </div>
             </div>
             <div id="room-is-locked"
                  class="connecting-msg"
                  style="display: none">
               %= image url_for('/img/lock.png'), alt => l('LOCKED'), class => "img-responsive center-block"
-              <p class="text-center connecting-err-reason">
-              </p>
             </div>
             <div id="no-media-msg"
                  class="connecting-msg"
@@ -364,8 +366,9 @@
                 <div class="form-group">
                   <div class="col-sm-offset-4 col-sm-8">
                     <button id="authBeforeJoinButton"
-                            class="btn btn-primary disabled"
-                            type="submit">
+                            class="btn btn-primary"
+                            type="submit"
+                            disabled>
                       %= l('SUBMIT')
                     </button>
                     <a class="btn btn-default"
@@ -381,9 +384,10 @@
                  style="display: none">
               <form class="form-horizontal"
                     id="displayNamePreForm">
-                <p class="text-center">
+                <div class="col-md-8 col-md-offset-2 alert alert-info text-center"
+                     role="alert">
                   %= l('SET_A_DISPLAY_NAME')
-                </p>
+                </div>
                 <div class="form-group">
                   <label for="displayNamePre"
                          class="col-sm-4 control-label">
@@ -400,8 +404,9 @@
                 <div class="form-group">
                   <div class="col-sm-offset-4 col-sm-8">
                     <button id="displayNamePreButton"
-                            class="btn btn-primary disabled"
-                            type="submit">
+                            class="btn btn-primary"
+                            type="submit"
+                            disabled>
                       %= l('SUBMIT')
                     </button>
                     <a class="btn btn-default"