Add a button to manually fetch rooms from server.
Also show a spinner when logging in (to disable resubmitting login form) and when refreshing the available chatrooms.
This commit is contained in:
parent
da483d63f3
commit
5b2af5b03d
@ -439,10 +439,6 @@ form.search-xmpp-contact input {
|
|||||||
text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
|
text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
#available-chatrooms dt {
|
|
||||||
padding-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
dd.available-chatroom,
|
dd.available-chatroom,
|
||||||
#converse-roster dd {
|
#converse-roster dd {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
50
converse.js
50
converse.js
@ -228,7 +228,7 @@
|
|||||||
from = Strophe.getBareJidFromJid($message.attr('from')),
|
from = Strophe.getBareJidFromJid($message.attr('from')),
|
||||||
composing = $message.find('composing'),
|
composing = $message.find('composing'),
|
||||||
delayed = $message.find('delay').length > 0,
|
delayed = $message.find('delay').length > 0,
|
||||||
fullname = this.get('fullname').split(' ')[0],
|
fullname = (this.get('fullname')||'').split(' ')[0],
|
||||||
stamp, time, sender;
|
stamp, time, sender;
|
||||||
|
|
||||||
if (!body) {
|
if (!body) {
|
||||||
@ -683,6 +683,7 @@
|
|||||||
id: 'chatrooms',
|
id: 'chatrooms',
|
||||||
events: {
|
events: {
|
||||||
'submit form.add-chatroom': 'createChatRoom',
|
'submit form.add-chatroom': 'createChatRoom',
|
||||||
|
'click input#show-rooms': 'showRooms',
|
||||||
'click a.open-room': 'createChatRoom'
|
'click a.open-room': 'createChatRoom'
|
||||||
},
|
},
|
||||||
room_template: _.template(
|
room_template: _.template(
|
||||||
@ -698,11 +699,10 @@
|
|||||||
'<form class="add-chatroom" action="" method="post">'+
|
'<form class="add-chatroom" action="" method="post">'+
|
||||||
'<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name"/>'+
|
'<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name"/>'+
|
||||||
'<input type="text" name="server" class="new-chatroom-server" placeholder="Server"/>'+
|
'<input type="text" name="server" class="new-chatroom-server" placeholder="Server"/>'+
|
||||||
'<button type="submit">Join</button>'+
|
'<input type="submit" name="join" value="Join"/>'+
|
||||||
|
'<input type="button" name="show" id="show-rooms" value="Show rooms"/>'+
|
||||||
'</form>'+
|
'</form>'+
|
||||||
'<dl id="available-chatrooms">'+
|
'<dl id="available-chatrooms"></dl>'),
|
||||||
'<dt>Available chatrooms</dt>'+
|
|
||||||
'</dl>'),
|
|
||||||
|
|
||||||
render: function () {
|
render: function () {
|
||||||
this.$parent.find('#controlbox-tabs').append(this.tab_template());
|
this.$parent.find('#controlbox-tabs').append(this.tab_template());
|
||||||
@ -716,15 +716,14 @@
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
updateRoomsList: function () {
|
updateRoomsList: function (domain) {
|
||||||
converse.connection.muc.listRooms(this.muc_domain, $.proxy(function (iq) {
|
converse.connection.muc.listRooms(this.muc_domain, $.proxy(function (iq) {
|
||||||
var name, jid, i,
|
var name, jid, i,
|
||||||
rooms = $(iq).find('query').find('item'),
|
rooms = $(iq).find('query').find('item'),
|
||||||
rooms_length = rooms.length,
|
rooms_length = rooms.length,
|
||||||
$available_chatrooms = this.$el.find('#available-chatrooms'),
|
$available_chatrooms = this.$el.find('#available-chatrooms'),
|
||||||
fragment = document.createDocumentFragment();
|
fragment = document.createDocumentFragment();
|
||||||
|
$available_chatrooms.html('<dt>Rooms on '+this.muc_domain+'</dt>');
|
||||||
$available_chatrooms.html('<dt>Available chatrooms</dt>');
|
|
||||||
if (rooms.length) {
|
if (rooms.length) {
|
||||||
$available_chatrooms.find('dt').show();
|
$available_chatrooms.find('dt').show();
|
||||||
} else {
|
} else {
|
||||||
@ -740,6 +739,22 @@
|
|||||||
}, this));
|
}, this));
|
||||||
},
|
},
|
||||||
|
|
||||||
|
showRooms: function (ev) {
|
||||||
|
var $available_chatrooms = this.$el.find('#available-chatrooms');
|
||||||
|
var $server = this.$el.find('input.new-chatroom-server');
|
||||||
|
var server = $server.val();
|
||||||
|
if (!server) {
|
||||||
|
$server.addClass('error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$el.find('input.new-chatroom-name').removeClass('error');
|
||||||
|
$server.removeClass('error');
|
||||||
|
$available_chatrooms.empty();
|
||||||
|
$('#available-chatrooms').html('<img style="width: auto; margin-left: 40%; margin-top: 10%" src="images/spinner.gif"/>');
|
||||||
|
this.muc_domain = server;
|
||||||
|
this.updateRoomsList();
|
||||||
|
},
|
||||||
|
|
||||||
createChatRoom: function (ev) {
|
createChatRoom: function (ev) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
var name, server, jid, $name, $server, errors;
|
var name, server, jid, $name, $server, errors;
|
||||||
@ -753,6 +768,9 @@
|
|||||||
$name.val(''); // Clear the input
|
$name.val(''); // Clear the input
|
||||||
if (name && server) {
|
if (name && server) {
|
||||||
jid = Strophe.escapeNode(name) + '@' + server;
|
jid = Strophe.escapeNode(name) + '@' + server;
|
||||||
|
$name.removeClass('error');
|
||||||
|
$server.removeClass('error');
|
||||||
|
this.muc_domain = server;
|
||||||
} else {
|
} else {
|
||||||
errors = true;
|
errors = true;
|
||||||
if (!name) { $name.addClass('error'); }
|
if (!name) { $name.addClass('error'); }
|
||||||
@ -1073,7 +1091,6 @@
|
|||||||
$participant_list = this.$el.find('.participant-list'),
|
$participant_list = this.$el.find('.participant-list'),
|
||||||
participants = [],
|
participants = [],
|
||||||
i;
|
i;
|
||||||
|
|
||||||
if (controlboxview) {
|
if (controlboxview) {
|
||||||
controlboxview.roomspanel.trigger('update-rooms-list');
|
controlboxview.roomspanel.trigger('update-rooms-list');
|
||||||
}
|
}
|
||||||
@ -1952,7 +1969,7 @@
|
|||||||
'<input type="text" id="jid">' +
|
'<input type="text" id="jid">' +
|
||||||
'<label>Password:</label>' +
|
'<label>Password:</label>' +
|
||||||
'<input type="password" id="password">' +
|
'<input type="password" id="password">' +
|
||||||
'<button type="submit">Log In</button>' +
|
'<input type="submit" value="Log In">' +
|
||||||
'</form">'),
|
'</form">'),
|
||||||
|
|
||||||
bosh_url_input: _.template(
|
bosh_url_input: _.template(
|
||||||
@ -1986,12 +2003,9 @@
|
|||||||
$pw_input.addClass('error');
|
$pw_input.addClass('error');
|
||||||
}
|
}
|
||||||
if (errors) { return; }
|
if (errors) { return; }
|
||||||
// Clear the form's fields, so that it can't be submitted twice
|
|
||||||
if ($bsu_input) {
|
var $button = $form.find('input[type=submit]');
|
||||||
$bsu_input.val('');
|
$button.hide().after('<img style="width: auto" src="images/spinner.gif"/>');
|
||||||
}
|
|
||||||
$jid_input.val('');
|
|
||||||
$pw_input.val('');
|
|
||||||
|
|
||||||
var connection = new Strophe.Connection(this.bosh_service_url);
|
var connection = new Strophe.Connection(this.bosh_service_url);
|
||||||
connection.connect(jid, password, $.proxy(function (status) {
|
connection.connect(jid, password, $.proxy(function (status) {
|
||||||
@ -1999,16 +2013,20 @@
|
|||||||
console.log('Connected');
|
console.log('Connected');
|
||||||
this.onConnected(connection);
|
this.onConnected(connection);
|
||||||
} else if (status === Strophe.Status.DISCONNECTED) {
|
} else if (status === Strophe.Status.DISCONNECTED) {
|
||||||
|
$button.show().siblings('img').remove();
|
||||||
this.giveFeedback('Disconnected', 'error');
|
this.giveFeedback('Disconnected', 'error');
|
||||||
} else if (status === Strophe.Status.Error) {
|
} else if (status === Strophe.Status.Error) {
|
||||||
|
$button.show().siblings('img').remove();
|
||||||
this.giveFeedback('Error', 'error');
|
this.giveFeedback('Error', 'error');
|
||||||
} else if (status === Strophe.Status.CONNECTING) {
|
} else if (status === Strophe.Status.CONNECTING) {
|
||||||
this.giveFeedback('Connecting');
|
this.giveFeedback('Connecting');
|
||||||
} else if (status === Strophe.Status.CONNFAIL) {
|
} else if (status === Strophe.Status.CONNFAIL) {
|
||||||
|
$button.show().siblings('img').remove();
|
||||||
this.giveFeedback('Connection Failed', 'error');
|
this.giveFeedback('Connection Failed', 'error');
|
||||||
} else if (status === Strophe.Status.AUTHENTICATING) {
|
} else if (status === Strophe.Status.AUTHENTICATING) {
|
||||||
this.giveFeedback('Authenticating');
|
this.giveFeedback('Authenticating');
|
||||||
} else if (status === Strophe.Status.AUTHFAIL) {
|
} else if (status === Strophe.Status.AUTHFAIL) {
|
||||||
|
$button.show().siblings('img').remove();
|
||||||
this.giveFeedback('Authentication Failed', 'error');
|
this.giveFeedback('Authentication Failed', 'error');
|
||||||
} else if (status === Strophe.Status.DISCONNECTING) {
|
} else if (status === Strophe.Status.DISCONNECTING) {
|
||||||
this.giveFeedback('Disconnecting');
|
this.giveFeedback('Disconnecting');
|
||||||
|
Loading…
Reference in New Issue
Block a user