Replace the dropdown auth menu with a modal dialog

master
Daniel Berteaud 10 years ago
parent 2a3468d7ec
commit 4e455d1caa
  1. 6
      public/js/vroom.js
  2. 40
      templates/default/auth_modal.html.ep
  3. 23
      templates/default/join.html.ep

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

@ -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>

@ -100,30 +100,10 @@
</div> </div>
</div> </div>
<div class="btn-group navbar-form navbar-left"> <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 class="glyphicon glyphicon-log-in">
</span> </span>
<span class="caret">
</span>
</button> </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>
<div class="navbar-form navbar-right" data-toggle="buttons" > <div class="navbar-form navbar-right" data-toggle="buttons" >
<div class="btn-group"> <div class="btn-group">
@ -631,6 +611,7 @@
</div> </div>
%=include 'invite_modal' %=include 'invite_modal'
%=include 'configure_modal' %=include 'configure_modal'
%=include 'auth_modal'
%=include 'noscript' %=include 'noscript'
<div class="frame"> <div class="frame">
<div id="chatMenu" class="nav-collapse collapse"> <div id="chatMenu" class="nav-collapse collapse">

Loading…
Cancel
Save