Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Let the user choose their nick after opening a chat room

Browse Source 
This change is with an eye on supporting reserved nicknames, in which case the
user who has a reserved nickname won't have to choose a nick upon joining a
room.
This commit is contained in:
JC Brand 2016-07-19 14:18:40 +00:00
parent 5ffebda8c2
commit cd75b2efab
8 changed files with 127 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
converse.js
View File

@ -130,6 +130,7 @@ require.config({
"chatroom": "src/templates/chatroom",
"chatroom_form": "src/templates/chatroom_form",
"chatroom_password_form": "src/templates/chatroom_password_form",
"chatroom_nickname_form": "src/templates/chatroom_nickname_form",
"chatroom_sidebar": "src/templates/chatroom_sidebar",
"chatrooms_tab": "src/templates/chatrooms_tab",
"chats_panel": "src/templates/chats_panel",

5
css/converse.css
View File

@ -759,7 +759,7 @@
margin: 0.5em 0 0.2em; }
#conversejs .pure-form fieldset {
margin: 0;
padding: 0.35em 0 0.75em;
padding: 0.35em 0 0.35em;
border: 0; }
#conversejs .pure-form legend {
display: block;
@ -1951,6 +1951,9 @@
#conversejs #converse-roster span.pending-contact-name {
width: 80%; }
#conversejs .add-chatroom input[type="submit"],
#conversejs .add-chatroom input[type="button"] {
margin: 0.3em 0; }
#conversejs .chat-head-chatroom {
background-color: #E76F51; }
#conversejs .chat-head-chatroom .chatroom-topic {

7
sass/_chatrooms.scss
View File

@ -1,4 +1,11 @@
#conversejs {
.add-chatroom {
input[type="submit"],
input[type="button"] {
margin: 0.3em 0;
}
}
.chat-head-chatroom {
background-color: $chatroom-head-color;

2
sass/pure/_forms.scss
View File

@ -166,7 +166,7 @@ since IE8 won't execute CSS that contains a CSS3 selector.
}
.pure-form fieldset {
margin: 0;
padding: 0.35em 0 0.75em;
padding: 0.35em 0 0.35em;
border: 0;
}
.pure-form legend {

66
src/converse-muc.js
View File

@ -204,7 +204,13 @@
this.occupantsview.model.fetch({add:true});
_.each(['member', 'owner', 'admin'], this.fetchMembersList.bind(this));
this.join(null, {'maxstanzas': converse.muc_history_max_stanzas});
var nick = this.model.get('nick');
if (!nick) {
this.renderNicknameForm();
} else {
this.join(null, {'maxstanzas': converse.muc_history_max_stanzas});
}
this.fetchMessages().insertIntoDOM();
// XXX: adding the event below to the events map above doesn't work.
// The code that gets executed because of that looks like this:
@ -725,11 +731,39 @@
);
},
submitNickname: function (ev) {
ev.preventDefault();
var $nick = this.$el.find('input[name=nick]');
var nick = $nick.val();
if (!nick) {
$nick.addClass('error');
return;
}
else {
$nick.removeClass('error');
}
this.model.save({'nick': nick});
this.$el.find('.chatroom-form-container').replaceWith('<span class="spinner centered"/>');
this.join(null, {'maxstanzas': converse.muc_history_max_stanzas});
},
renderNicknameForm: function () {
this.$('.chatroom-body').children().addClass('hidden');
this.$('span.centered.spinner').remove();
this.$('.chatroom-body').append(
converse.templates.chatroom_nickname_form({
heading: __('Please choose your nickname'),
label_nickname: __('Nickname'),
label_join: __('Enter room')
}));
this.$('.chatroom-form').on('submit', this.submitNickname.bind(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('<span class="spinner centered"/>');
this.join(password);
this.join(password, {'maxstanzas': converse.muc_history_max_stanzas});
},
renderPasswordForm: function () {
@ -909,6 +943,23 @@
}
},
hideSpinner: function () {
/* Check if the spinner is being shown and if so, hide it.
* Also make sure then that the chat area and occupants
* list are both visible.
*/
var that = this;
var $spinner = this.$el.find('.spinner');
if ($spinner.length) {
$spinner.hide(function () {
$(this).remove();
that.$el.find('.chat-area').removeClass('hidden');
that.$el.find('.occupants').removeClass('hidden');
});
}
return this;
},
onChatRoomPresence: function (pres) {
var $presence = $(pres), is_self;
var nick = this.model.get('nick');
@ -921,7 +972,7 @@
if (this.model.get('connection_status') !== Strophe.Status.CONNECTED) {
this.model.set('connection_status', Strophe.Status.CONNECTED);
}
this.showStatusMessages(pres, is_self);
this.hideSpinner().showStatusMessages(pres, is_self);
}
this.occupantsview.updateOccupantsOnPresence(pres);
},
@ -1408,13 +1459,8 @@
var name, $name,
server, $server,
jid,
$nick = this.$el.find('input.new-chatroom-nick'),
nick = $nick.val(),
chatroom;
if (!nick) { $nick.addClass('error'); }
else { $nick.removeClass('error'); }
if (ev.type === 'click') {
name = $(ev.target).text();
jid = $(ev.target).attr('data-room-jid');
@ -1435,12 +1481,10 @@
return;
}
}
if (!nick) { return; }
chatroom = converse.chatboxviews.showChat({
'id': jid,
'jid': jid,
'name': name || Strophe.unescapeNode(Strophe.getNodeFromJid(jid)),
'nick': nick,
'type': 'chatroom',
'box_id': b64_sha1(jid)
});
@ -1498,7 +1542,7 @@
[Strophe.Status.CONNECTING, Strophe.Status.CONNECTED],
chatroom.get('connection_status'))
) {
converse.chatboxviews.get(room_jid).join(null);
converse.chatboxviews.get(room_jid).join(null, {'maxstanzas': converse.muc_history_max_stanzas});
}
}
};

90
src/converse-templates.js
View File

@ -9,6 +9,7 @@ define("converse-templates", [
"tpl!chatroom",
"tpl!chatroom_form",
"tpl!chatroom_password_form",
"tpl!chatroom_nickname_form",
"tpl!chatroom_sidebar",
"tpl!chatrooms_tab",
"tpl!chats_panel",
@ -69,49 +70,50 @@ define("converse-templates", [
chatroom: arguments[7],
chatroom_form: arguments[8],
chatroom_password_form: arguments[9],
chatroom_sidebar: arguments[10],
chatrooms_tab: arguments[11],
chats_panel: arguments[12],
choose_status: arguments[13],
contacts_panel: arguments[14],
contacts_tab: arguments[15],
controlbox: arguments[16],
controlbox_toggle: arguments[17],
field: arguments[18],
form_captcha: arguments[19],
form_checkbox: arguments[20],
form_input: arguments[21],
form_select: arguments[22],
form_textarea: arguments[23],
form_username: arguments[24],
group_header: arguments[25],
info: arguments[26],
login_panel: arguments[27],
login_tab: arguments[28],
message: arguments[29],
new_day: arguments[30],
occupant: arguments[31],
pending_contact: arguments[32],
pending_contacts: arguments[33],
register_panel: arguments[34],
register_tab: arguments[35],
registration_form: arguments[36],
registration_request: arguments[37],
requesting_contact: arguments[38],
requesting_contacts: arguments[39],
room_description: arguments[40],
room_item: arguments[41],
room_panel: arguments[42],
roster: arguments[43],
roster_item: arguments[44],
search_contact: arguments[45],
select_option: arguments[46],
status_option: arguments[47],
toggle_chats: arguments[48],
toolbar: arguments[49],
toolbar_otr: arguments[50],
trimmed_chat: arguments[51],
vcard: arguments[52],
chatbox_minimize: arguments[53]
chatroom_nickname_form: arguments[10],
chatroom_sidebar: arguments[11],
chatrooms_tab: arguments[12],
chats_panel: arguments[13],
choose_status: arguments[14],
contacts_panel: arguments[15],
contacts_tab: arguments[16],
controlbox: arguments[17],
controlbox_toggle: arguments[18],
field: arguments[19],
form_captcha: arguments[20],
form_checkbox: arguments[21],
form_input: arguments[22],
form_select: arguments[23],
form_textarea: arguments[24],
form_username: arguments[25],
group_header: arguments[26],
info: arguments[27],
login_panel: arguments[28],
login_tab: arguments[29],
message: arguments[30],
new_day: arguments[31],
occupant: arguments[32],
pending_contact: arguments[33],
pending_contacts: arguments[34],
register_panel: arguments[35],
register_tab: arguments[36],
registration_form: arguments[37],
registration_request: arguments[38],
requesting_contact: arguments[39],
requesting_contacts: arguments[40],
room_description: arguments[41],
room_item: arguments[42],
room_panel: arguments[43],
roster: arguments[44],
roster_item: arguments[45],
search_contact: arguments[46],
select_option: arguments[47],
status_option: arguments[48],
toggle_chats: arguments[49],
toolbar: arguments[50],
toolbar_otr: arguments[51],
trimmed_chat: arguments[52],
vcard: arguments[53],
chatbox_minimize: arguments[54]
};
});

11
src/templates/chatroom_nickname_form.html Normal file
View File

@ -0,0 +1,11 @@
<div class="chatroom-form-container">
<form class="pure-form converse-form chatroom-form">
<fieldset>
<label>{{heading}}</label>
<input type="text" required="required" name="nick" class="new-chatroom-nick" placeholder="{{label_nickname}}"/>
</fieldset>
<fieldset>
<input type="submit" class="pure-button button-primary" name="join" value="{{label_join}}"/>
</fieldset>
</form>
</div>

7
src/templates/room_panel.html
View File

@ -2,14 +2,11 @@
<fieldset>
<label>{{label_room_name}}</label>
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="{{label_room_name}}"/>
<label>{{label_nickname}}</label> <input type="text" name="nick" class="new-chatroom-nick" placeholder="{{label_nickname}}"/>
<input type="submit" class="pure-button button-primary" name="join" value="{{label_join}}"/>
</fieldset>
<fieldset>
{[ if (server_input_type != 'hidden') { ]}
<label{{server_label_global_attr}}>{{label_server}}</label>
<input type="{{server_input_type}}" name="server" class="new-chatroom-server" placeholder="{{label_server}}"/>
{[ } ]}
<input type="{{server_input_type}}" name="server" class="new-chatroom-server" placeholder="{{label_server}}"/>
<input type="submit" class="pure-button button-primary" name="join" value="{{label_join}}"/>
<input type="button" class="pure-button button-secondary" name="show" id="show-rooms" value="{{label_show_rooms}}"/>
</fieldset>
</form>