dani
/
vroom
mirror of https://github.com/dani/vroom.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Enhance the connection modal 

So users know when input (password/name) is required
This commit is contained in:
Daniel Berteaud 2015-10-12 11:39:08 +02:00
parent 531eff3ca3
commit 0166ad5ded
2 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/js/vroom.js
View File

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

25
templates/default/join.html.ep
View File

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