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() {
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();
}

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

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