Make the password forms look nicer

templates/default/join.html.ep

@@ -286,15 +286,31 @@
             <h4 class="modal-title" id="persistentTitle"><%=l 'MAKE_THIS_ROOM_PERSISTENT' %></h4>
           </div>
           <div class="modal-body">
-            <form class="navbar-form" id="persistentForm">
-              <center>
-                <p><%=l 'YOU_MUST_SET_A_PASSWORD' %></p>
-              </center>
-              <div class="input-group">
+            <form class="form-horizontal" role="form" id="persistentForm">
+              <p>
+                <%=l 'SET_OWNER_PASS_PERSISTENT' %>
+              </p>
+              <div class="form-group">
+                <label for="ownerPass" class="col-sm-4 control-label">
+                  <%=l 'PASSWORD' %>
+                </label>
+                <div class="col-sm-8">
                   <input type="password" id="ownerPass" class="form-control help" placeholder="<%=l 'PASSWORD' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'PASSWORD' %>"/>
+                </div>
+              </div>
+              <div class="form-group">
+                <label for="ownerPassConfirm" class="col-sm-4 control-label">
+                  <%=l 'CONFIRM_PASSWORD' %>
+                </label>
+                <div class="col-sm-8">
                   <input type="password" id="ownerPassConfirm" class="form-control help" placeholder="<%=l 'CONFIRM_PASSWORD' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CONFIRM_PASSWORD' %>"/>
+                </div>
+              </div>
+              <div class="form-group">
+                <div class="col-sm-offset-4 col-sm-8">
                   <button id="setOwnerPassButton" type="submit" class="btn btn-default help disabled" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SUBMIT' %>"><%=l 'SUBMIT' %></button>
                 </div>
+              </div>
             </form>
           </div>
         </div>
@@ -308,15 +324,31 @@
             <h4 class="modal-title" id="joinPassTitle"><%=l 'PASSWORD_PROTECT' %></h4>
           </div>
           <div class="modal-body">
-            <form class="navbar-form" id="joinPassForm">
-              <center>
-                <p><%=l 'YOU_MUST_SET_A_PASSWORD' %></p>
-              </center>
-              <div class="input-group">
+            <form class="form-horizontal" role="form" id="joinPassForm">
+              <p>
+                <%=l 'PROTECT_ROOM_WITH_PASSWORD' %>
+              </p>
+              <div class="form-group">
+                <label for="joinPass" class="col-sm-4 control-label">
+                  <%=l 'PASSWORD' %>
+                </label>
+                <div class="col-sm-8">
                   <input type="password" id="joinPass" class="form-control help" placeholder="<%=l 'PASSWORD' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'PASSWORD' %>"/>
+                </div>
+              </div>
+              <div class="form-group">
+                <label for="joinPassConfirm" class="col-sm-4 control-label">
+                  <%=l 'CONFIRM_PASSWORD' %>
+                </label>
+                <div class="col-sm-8">
                   <input type="password" id="joinPassConfirm" class="form-control help" placeholder="<%=l 'CONFIRM_PASSWORD' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CONFIRM_PASSWORD' %>"/>
+                </div>
+              </div>
+              <div class="form-group">
+                <div class="col-sm-offset-4 col-sm-8">
                   <button id="setJoinPassButton" type="submit" class="btn btn-default help disabled" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SUBMIT' %>"><%=l 'SUBMIT' %></button>
                 </div>
+              </div>
             </form>
           </div>
         </div>