It's now possible to enter password protected chatrooms
This commit is contained in:
parent
2893657576
commit
c1423928ab
13
converse.css
13
converse.css
@ -167,7 +167,6 @@ ul.participant-list li.moderator {
|
|||||||
.chat-message-room {
|
.chat-message-room {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #4B7003;
|
color: #4B7003;
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-message-them {
|
.chat-message-them {
|
||||||
@ -388,7 +387,7 @@ a.configure-chatroom-button {
|
|||||||
padding-top: 0.5em;
|
padding-top: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.configure-chatroom-container {
|
.chatroom-form-container {
|
||||||
color: #666;
|
color: #666;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
height: 262px;
|
height: 262px;
|
||||||
@ -397,26 +396,26 @@ a.configure-chatroom-button {
|
|||||||
border-bottom-left-radius: 4px;
|
border-bottom-left-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.configure-chatroom {
|
.chatroom-form {
|
||||||
background: white;
|
background: white;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.configure-chatroom legend {
|
.chatroom-form legend {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.configure-chatroom label {
|
.chatroom-form label {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: block;
|
display: block;
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.configure-chatroom label input,
|
.chatroom-form label input,
|
||||||
.configure-chatroom label select {
|
.chatroom-form label select {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
126
converse.js
126
converse.js
@ -1102,8 +1102,8 @@
|
|||||||
form_select_template: _.template('<label>{{label}}<select name="{{name}}">{{options}}</select></label>'),
|
form_select_template: _.template('<label>{{label}}<select name="{{name}}">{{options}}</select></label>'),
|
||||||
form_checkbox_template: _.template('<label>{{label}}<input name="{{name}}" type="{{type}}" {{checked}}"></label>'),
|
form_checkbox_template: _.template('<label>{{label}}<input name="{{name}}" type="{{type}}" {{checked}}"></label>'),
|
||||||
|
|
||||||
showRoomConfiguration: function (stanza) {
|
renderConfigurationForm: function (stanza) {
|
||||||
var $form= this.$el.find('form.configure-chatroom'),
|
var $form= this.$el.find('form.chatroom-form'),
|
||||||
$stanza = $(stanza),
|
$stanza = $(stanza),
|
||||||
$fields = $stanza.find('field'),
|
$fields = $stanza.find('field'),
|
||||||
title = $stanza.find('title').text(),
|
title = $stanza.find('title').text(),
|
||||||
@ -1187,7 +1187,7 @@
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.$el.find('div.configure-chatroom-container').hide(
|
this.$el.find('div.chatroom-form-container').hide(
|
||||||
function () {
|
function () {
|
||||||
$(this).remove();
|
$(this).remove();
|
||||||
that.$el.find('.chat-area').show();
|
that.$el.find('.chat-area').show();
|
||||||
@ -1206,7 +1206,7 @@
|
|||||||
cancelConfiguration: function (ev) {
|
cancelConfiguration: function (ev) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
var that = this;
|
var that = this;
|
||||||
this.$el.find('div.configure-chatroom-container').hide(
|
this.$el.find('div.chatroom-form-container').hide(
|
||||||
function () {
|
function () {
|
||||||
$(this).remove();
|
$(this).remove();
|
||||||
that.$el.find('.chat-area').show();
|
that.$el.find('.chat-area').show();
|
||||||
@ -1216,27 +1216,56 @@
|
|||||||
|
|
||||||
configureChatRoom: function (ev) {
|
configureChatRoom: function (ev) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
if (this.$el.find('div.configure-chatroom-container').length) {
|
if (this.$el.find('div.chatroom-form-container').length) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.$el.find('.chat-area').hide();
|
this.$el.find('.chat-area').hide();
|
||||||
this.$el.find('.participants').hide();
|
this.$el.find('.participants').hide();
|
||||||
this.$el.find('.chat-body').append(
|
this.$el.find('.chat-body').append(
|
||||||
$('<div class="configure-chatroom-container">'+
|
$('<div class="chatroom-form-container">'+
|
||||||
'<form class="configure-chatroom">'+
|
'<form class="chatroom-form">'+
|
||||||
'<img class="spinner centered" src="images/spinner.gif"/>'+
|
'<img class="spinner centered" src="images/spinner.gif"/>'+
|
||||||
|
'</form>'+
|
||||||
'</div>'));
|
'</div>'));
|
||||||
converse.connection.muc.configure(
|
converse.connection.muc.configure(
|
||||||
this.model.get('jid'),
|
this.model.get('jid'),
|
||||||
$.proxy(this.showRoomConfiguration, this)
|
$.proxy(this.renderConfigurationForm, this)
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
renderPasswordForm: function () {
|
||||||
|
this.$el.find('img.centered.spinner').remove();
|
||||||
|
this.$el.find('.chat-body').append(
|
||||||
|
$('<div class="chatroom-form-container">'+
|
||||||
|
'<form class="chatroom-form">'+
|
||||||
|
'<legend>This chat room requires a password</legend>' +
|
||||||
|
'<label>Password: <input type="password" name="password"/></label>' +
|
||||||
|
'<input type="submit"/>' +
|
||||||
|
'</form>'+
|
||||||
|
'</div>'));
|
||||||
|
this.$el.find('.chatroom-form').on('submit', $.proxy(this.submitPassword, this));
|
||||||
|
},
|
||||||
|
|
||||||
|
submitPassword: function (ev) {
|
||||||
|
ev.preventDefault();
|
||||||
|
var password = this.$el.find('.chatroom-form').find('input[type=password]').val();
|
||||||
|
this.$el.find('.chatroom-form-container').replaceWith(
|
||||||
|
'<img class="spinner centered" src="images/spinner.gif"/>');
|
||||||
|
converse.connection.muc.join(
|
||||||
|
this.model.get('jid'),
|
||||||
|
this.model.get('nick'),
|
||||||
|
$.proxy(this.onChatRoomMessage, this),
|
||||||
|
$.proxy(this.onChatRoomPresence, this),
|
||||||
|
$.proxy(this.onChatRoomRoster, this),
|
||||||
|
password);
|
||||||
|
},
|
||||||
|
|
||||||
onChatRoomPresence: function (presence, room) {
|
onChatRoomPresence: function (presence, room) {
|
||||||
var nick = room.nick,
|
var nick = room.nick,
|
||||||
$presence = $(presence),
|
$presence = $(presence),
|
||||||
from = $presence.attr('from'), $item;
|
from = $presence.attr('from'), $item;
|
||||||
if ($presence.attr('type') !== 'error') {
|
if ($presence.attr('type') !== 'error') {
|
||||||
|
if (!this.$el.find('.chat-area').length) { this.renderChatArea(); }
|
||||||
if ($presence.find("status[code='201']").length) {
|
if ($presence.find("status[code='201']").length) {
|
||||||
// This is a new chatroom. We create an instant
|
// This is a new chatroom. We create an instant
|
||||||
// chatroom, and let the user manually set any
|
// chatroom, and let the user manually set any
|
||||||
@ -1259,11 +1288,12 @@
|
|||||||
} else {
|
} else {
|
||||||
var $error = $presence.find('error'),
|
var $error = $presence.find('error'),
|
||||||
$chat_content = this.$el.find('.chat-content');
|
$chat_content = this.$el.find('.chat-content');
|
||||||
|
// We didn't enter the room, so we must remove it from the MUC
|
||||||
|
// add-on
|
||||||
|
converse.connection.muc.removeRoom(room.name);
|
||||||
if ($error.attr('type') == 'auth') {
|
if ($error.attr('type') == 'auth') {
|
||||||
if ($error.find('not-authorized').length) {
|
if ($error.find('not-authorized').length) {
|
||||||
this.renderChatArea();
|
this.renderPasswordForm();
|
||||||
$chat_content = this.$el.find('.chat-content');
|
|
||||||
$chat_content.append('This chatroom requires a password');
|
|
||||||
} else if ($error.find('registration-required').length) {
|
} else if ($error.find('registration-required').length) {
|
||||||
$chat_content.append('You are not on the member list of this room');
|
$chat_content.append('You are not on the member list of this room');
|
||||||
} else if ($error.find('forbidden').length) {
|
} else if ($error.find('forbidden').length) {
|
||||||
@ -1388,9 +1418,7 @@
|
|||||||
),
|
),
|
||||||
|
|
||||||
onChatRoomRoster: function (roster, room) {
|
onChatRoomRoster: function (roster, room) {
|
||||||
if (!this.$el.find('.chat-area').length) {
|
if (!this.$el.find('.chat-area').length) { this.renderChatArea(); }
|
||||||
this.renderChatArea();
|
|
||||||
}
|
|
||||||
var controlboxview = converse.chatboxesview.views.controlbox,
|
var controlboxview = converse.chatboxesview.views.controlbox,
|
||||||
roster_size = _.size(roster),
|
roster_size = _.size(roster),
|
||||||
$participant_list = this.$el.find('.participant-list'),
|
$participant_list = this.$el.find('.participant-list'),
|
||||||
@ -2274,7 +2302,38 @@
|
|||||||
'<label>BOSH Service URL:</label>' +
|
'<label>BOSH Service URL:</label>' +
|
||||||
'<input type="text" id="bosh_service_url">'),
|
'<input type="text" id="bosh_service_url">'),
|
||||||
|
|
||||||
authenticate: $.proxy(function (ev) {
|
|
||||||
|
connect: function (jid, password) {
|
||||||
|
var connection = new Strophe.Connection(converse.bosh_service_url);
|
||||||
|
connection.connect(jid, password, $.proxy(function (status) {
|
||||||
|
if (status === Strophe.Status.CONNECTED) {
|
||||||
|
console.log('Connected');
|
||||||
|
converse.onConnected(connection);
|
||||||
|
} else if (status === Strophe.Status.DISCONNECTED) {
|
||||||
|
$button.show().siblings('img').remove();
|
||||||
|
converse.giveFeedback('Disconnected', 'error');
|
||||||
|
} else if (status === Strophe.Status.Error) {
|
||||||
|
$button.show().siblings('img').remove();
|
||||||
|
converse.giveFeedback('Error', 'error');
|
||||||
|
} else if (status === Strophe.Status.CONNECTING) {
|
||||||
|
converse.giveFeedback('Connecting');
|
||||||
|
} else if (status === Strophe.Status.CONNFAIL) {
|
||||||
|
$button.show().siblings('img').remove();
|
||||||
|
converse.giveFeedback('Connection Failed', 'error');
|
||||||
|
} else if (status === Strophe.Status.AUTHENTICATING) {
|
||||||
|
converse.giveFeedback('Authenticating');
|
||||||
|
} else if (status === Strophe.Status.AUTHFAIL) {
|
||||||
|
$button.show().siblings('img').remove();
|
||||||
|
converse.giveFeedback('Authentication Failed', 'error');
|
||||||
|
} else if (status === Strophe.Status.DISCONNECTING) {
|
||||||
|
converse.giveFeedback('Disconnecting', 'error');
|
||||||
|
} else if (status === Strophe.Status.ATTACHED) {
|
||||||
|
console.log('Attached');
|
||||||
|
}
|
||||||
|
}, this));
|
||||||
|
},
|
||||||
|
|
||||||
|
authenticate: function (ev) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
var $form = $(ev.target),
|
var $form = $(ev.target),
|
||||||
$jid_input = $form.find('input#jid'),
|
$jid_input = $form.find('input#jid'),
|
||||||
@ -2284,10 +2343,10 @@
|
|||||||
$bsu_input = null,
|
$bsu_input = null,
|
||||||
errors = false;
|
errors = false;
|
||||||
|
|
||||||
if (! this.bosh_service_url) {
|
if (! converse.bosh_service_url) {
|
||||||
$bsu_input = $form.find('input#bosh_service_url');
|
$bsu_input = $form.find('input#bosh_service_url');
|
||||||
this.bosh_service_url = $bsu_input.val();
|
converse.bosh_service_url = $bsu_input.val();
|
||||||
if (! this.bosh_service_url) {
|
if (! converse.bosh_service_url) {
|
||||||
errors = true;
|
errors = true;
|
||||||
$bsu_input.addClass('error');
|
$bsu_input.addClass('error');
|
||||||
}
|
}
|
||||||
@ -2304,35 +2363,8 @@
|
|||||||
|
|
||||||
var $button = $form.find('input[type=submit]');
|
var $button = $form.find('input[type=submit]');
|
||||||
$button.hide().after('<img class="spinner login-submit" src="images/spinner.gif"/>');
|
$button.hide().after('<img class="spinner login-submit" src="images/spinner.gif"/>');
|
||||||
|
this.connect(jid, password);
|
||||||
var connection = new Strophe.Connection(this.bosh_service_url);
|
},
|
||||||
connection.connect(jid, password, $.proxy(function (status) {
|
|
||||||
if (status === Strophe.Status.CONNECTED) {
|
|
||||||
console.log('Connected');
|
|
||||||
this.onConnected(connection);
|
|
||||||
} else if (status === Strophe.Status.DISCONNECTED) {
|
|
||||||
$button.show().siblings('img').remove();
|
|
||||||
this.giveFeedback('Disconnected', 'error');
|
|
||||||
} else if (status === Strophe.Status.Error) {
|
|
||||||
$button.show().siblings('img').remove();
|
|
||||||
this.giveFeedback('Error', 'error');
|
|
||||||
} else if (status === Strophe.Status.CONNECTING) {
|
|
||||||
this.giveFeedback('Connecting');
|
|
||||||
} else if (status === Strophe.Status.CONNFAIL) {
|
|
||||||
$button.show().siblings('img').remove();
|
|
||||||
this.giveFeedback('Connection Failed', 'error');
|
|
||||||
} else if (status === Strophe.Status.AUTHENTICATING) {
|
|
||||||
this.giveFeedback('Authenticating');
|
|
||||||
} else if (status === Strophe.Status.AUTHFAIL) {
|
|
||||||
$button.show().siblings('img').remove();
|
|
||||||
this.giveFeedback('Authentication Failed', 'error');
|
|
||||||
} else if (status === Strophe.Status.DISCONNECTING) {
|
|
||||||
this.giveFeedback('Disconnecting', 'error');
|
|
||||||
} else if (status === Strophe.Status.ATTACHED) {
|
|
||||||
console.log('Attached');
|
|
||||||
}
|
|
||||||
}, converse));
|
|
||||||
}, converse),
|
|
||||||
|
|
||||||
remove: function () {
|
remove: function () {
|
||||||
this.$parent.find('#controlbox-tabs').empty();
|
this.$parent.find('#controlbox-tabs').empty();
|
||||||
|
Loading…
Reference in New Issue
Block a user