Skip to content

C
converse.js
Commit cd75b2ef authored by JC Brand's avatar JC Brand
Browse files
Options

Let the user choose their nick after opening a chat room 

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.
parent 5ffebda8
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 62 deletions
converse.js
View file @ cd75b2ef
...@@ -130,6 +130,7 @@ require.config({ ...@@ -130,6 +130,7 @@ require.config({
"chatroom": "src/templates/chatroom", "chatroom": "src/templates/chatroom",
"chatroom_form": "src/templates/chatroom_form", "chatroom_form": "src/templates/chatroom_form",
"chatroom_password_form": "src/templates/chatroom_password_form", "chatroom_password_form": "src/templates/chatroom_password_form",
"chatroom_nickname_form": "src/templates/chatroom_nickname_form",
"chatroom_sidebar": "src/templates/chatroom_sidebar", "chatroom_sidebar": "src/templates/chatroom_sidebar",
"chatrooms_tab": "src/templates/chatrooms_tab", "chatrooms_tab": "src/templates/chatrooms_tab",
"chats_panel": "src/templates/chats_panel", "chats_panel": "src/templates/chats_panel",
......
css/converse.css
View file @ cd75b2ef
...@@ -759,7 +759,7 @@ ...@@ -759,7 +759,7 @@
margin: 0.5em 0 0.2em; } margin: 0.5em 0 0.2em; }
#conversejs .pure-form fieldset { #conversejs .pure-form fieldset {
margin: 0; margin: 0;
padding: 0.35em 0 0.75em; padding: 0.35em 0 0.35em;
border: 0; } border: 0; }
#conversejs .pure-form legend { #conversejs .pure-form legend {
display: block; display: block;
...@@ -1951,6 +1951,9 @@ ...@@ -1951,6 +1951,9 @@
#conversejs #converse-roster span.pending-contact-name { #conversejs #converse-roster span.pending-contact-name {
width: 80%; } width: 80%; }
#conversejs .add-chatroom input[type="submit"],
#conversejs .add-chatroom input[type="button"] {
margin: 0.3em 0; }
#conversejs .chat-head-chatroom { #conversejs .chat-head-chatroom {
background-color: #E76F51; } background-color: #E76F51; }
#conversejs .chat-head-chatroom .chatroom-topic { #conversejs .chat-head-chatroom .chatroom-topic {
......
sass/_chatrooms.scss
View file @ cd75b2ef
#conversejs { #conversejs {
.add-chatroom {
input[type="submit"],
input[type="button"] {
margin: 0.3em 0;
}
}
.chat-head-chatroom { .chat-head-chatroom {
background-color: $chatroom-head-color; background-color: $chatroom-head-color;
......
sass/pure/_forms.scss
View file @ cd75b2ef
...@@ -166,7 +166,7 @@ since IE8 won't execute CSS that contains a CSS3 selector. ...@@ -166,7 +166,7 @@ since IE8 won't execute CSS that contains a CSS3 selector.
} }
.pure-form fieldset { .pure-form fieldset {
margin: 0; margin: 0;
padding: 0.35em 0 0.75em; padding: 0.35em 0 0.35em;
border: 0; border: 0;
} }
.pure-form legend { .pure-form legend {
......
src/converse-muc.js
View file @ cd75b2ef
...@@ -204,7 +204,13 @@ ...@@ -204,7 +204,13 @@
this.occupantsview.model.fetch({add:true}); this.occupantsview.model.fetch({add:true});
_.each(['member', 'owner', 'admin'], this.fetchMembersList.bind(this)); _.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(); this.fetchMessages().insertIntoDOM();
// XXX: adding the event below to the events map above doesn't work. // XXX: adding the event below to the events map above doesn't work.
// The code that gets executed because of that looks like this: // The code that gets executed because of that looks like this:
...@@ -725,11 +731,39 @@ ...@@ -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) { submitPassword: function (ev) {
ev.preventDefault(); ev.preventDefault();
var password = this.$el.find('.chatroom-form').find('input[type=password]').val(); var password = this.$el.find('.chatroom-form').find('input[type=password]').val();
this.$el.find('.chatroom-form-container').replaceWith('<span class="spinner centered"/>'); 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 () { renderPasswordForm: function () {
...@@ -909,6 +943,23 @@ ...@@ -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) { onChatRoomPresence: function (pres) {
var $presence = $(pres), is_self; var $presence = $(pres), is_self;
var nick = this.model.get('nick'); var nick = this.model.get('nick');
...@@ -921,7 +972,7 @@ ...@@ -921,7 +972,7 @@
if (this.model.get('connection_status') !== Strophe.Status.CONNECTED) { if (this.model.get('connection_status') !== Strophe.Status.CONNECTED) {
this.model.set('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); this.occupantsview.updateOccupantsOnPresence(pres);
}, },
...@@ -1408,13 +1459,8 @@ ...@@ -1408,13 +1459,8 @@
var name, $name, var name, $name,
server, $server, server, $server,
jid, jid,
$nick = this.$el.find('input.new-chatroom-nick'),
nick = $nick.val(),
chatroom; chatroom;
if (!nick) { $nick.addClass('error'); }
else { $nick.removeClass('error'); }
if (ev.type === 'click') { if (ev.type === 'click') {
name = $(ev.target).text(); name = $(ev.target).text();
jid = $(ev.target).attr('data-room-jid'); jid = $(ev.target).attr('data-room-jid');
...@@ -1435,12 +1481,10 @@ ...@@ -1435,12 +1481,10 @@
return; return;
} }
} }
if (!nick) { return; }
chatroom = converse.chatboxviews.showChat({ chatroom = converse.chatboxviews.showChat({
'id': jid, 'id': jid,
'jid': jid, 'jid': jid,
'name': name || Strophe.unescapeNode(Strophe.getNodeFromJid(jid)), 'name': name || Strophe.unescapeNode(Strophe.getNodeFromJid(jid)),
'nick': nick,
'type': 'chatroom', 'type': 'chatroom',
'box_id': b64_sha1(jid) 'box_id': b64_sha1(jid)
}); });
...@@ -1498,7 +1542,7 @@ ...@@ -1498,7 +1542,7 @@
[Strophe.Status.CONNECTING, Strophe.Status.CONNECTED], [Strophe.Status.CONNECTING, Strophe.Status.CONNECTED],
chatroom.get('connection_status')) chatroom.get('connection_status'))
) { ) {
converse.chatboxviews.get(room_jid).join(null); converse.chatboxviews.get(room_jid).join(null, {'maxstanzas': converse.muc_history_max_stanzas});
} }
} }
}; };
......
src/converse-templates.js
View file @ cd75b2ef
...@@ -9,6 +9,7 @@ define("converse-templates", [ ...@@ -9,6 +9,7 @@ define("converse-templates", [
"tpl!chatroom", "tpl!chatroom",
"tpl!chatroom_form", "tpl!chatroom_form",
"tpl!chatroom_password_form", "tpl!chatroom_password_form",
"tpl!chatroom_nickname_form",
"tpl!chatroom_sidebar", "tpl!chatroom_sidebar",
"tpl!chatrooms_tab", "tpl!chatrooms_tab",
"tpl!chats_panel", "tpl!chats_panel",
...@@ -69,49 +70,50 @@ define("converse-templates", [ ...@@ -69,49 +70,50 @@ define("converse-templates", [
chatroom: arguments[7], chatroom: arguments[7],
chatroom_form: arguments[8], chatroom_form: arguments[8],
chatroom_password_form: arguments[9], chatroom_password_form: arguments[9],
chatroom_sidebar: arguments[10], chatroom_nickname_form: arguments[10],
chatrooms_tab: arguments[11], chatroom_sidebar: arguments[11],
chats_panel: arguments[12], chatrooms_tab: arguments[12],
choose_status: arguments[13], chats_panel: arguments[13],
contacts_panel: arguments[14], choose_status: arguments[14],
contacts_tab: arguments[15], contacts_panel: arguments[15],
controlbox: arguments[16], contacts_tab: arguments[16],
controlbox_toggle: arguments[17], controlbox: arguments[17],
field: arguments[18], controlbox_toggle: arguments[18],
form_captcha: arguments[19], field: arguments[19],
form_checkbox: arguments[20], form_captcha: arguments[20],
form_input: arguments[21], form_checkbox: arguments[21],
form_select: arguments[22], form_input: arguments[22],
form_textarea: arguments[23], form_select: arguments[23],
form_username: arguments[24], form_textarea: arguments[24],
group_header: arguments[25], form_username: arguments[25],
info: arguments[26], group_header: arguments[26],
login_panel: arguments[27], info: arguments[27],
login_tab: arguments[28], login_panel: arguments[28],
message: arguments[29], login_tab: arguments[29],
new_day: arguments[30], message: arguments[30],
occupant: arguments[31], new_day: arguments[31],
pending_contact: arguments[32], occupant: arguments[32],
pending_contacts: arguments[33], pending_contact: arguments[33],
register_panel: arguments[34], pending_contacts: arguments[34],
register_tab: arguments[35], register_panel: arguments[35],
registration_form: arguments[36], register_tab: arguments[36],
registration_request: arguments[37], registration_form: arguments[37],
requesting_contact: arguments[38], registration_request: arguments[38],
requesting_contacts: arguments[39], requesting_contact: arguments[39],
room_description: arguments[40], requesting_contacts: arguments[40],
room_item: arguments[41], room_description: arguments[41],
room_panel: arguments[42], room_item: arguments[42],
roster: arguments[43], room_panel: arguments[43],
roster_item: arguments[44], roster: arguments[44],
search_contact: arguments[45], roster_item: arguments[45],
select_option: arguments[46], search_contact: arguments[46],
status_option: arguments[47], select_option: arguments[47],
toggle_chats: arguments[48], status_option: arguments[48],
toolbar: arguments[49], toggle_chats: arguments[49],
toolbar_otr: arguments[50], toolbar: arguments[50],
trimmed_chat: arguments[51], toolbar_otr: arguments[51],
vcard: arguments[52], trimmed_chat: arguments[52],
chatbox_minimize: arguments[53] vcard: arguments[53],
chatbox_minimize: arguments[54]
}; };
}); });
src/templates/chatroom_nickname_form.html 0 → 100644
View file @ cd75b2ef
<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>
src/templates/room_panel.html
View file @ cd75b2ef
...@@ -2,14 +2,11 @@ ...@@ -2,14 +2,11 @@
<fieldset> <fieldset>
<label>{{label_room_name}}</label> <label>{{label_room_name}}</label>
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="{{label_room_name}}"/> <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') { ]} {[ if (server_input_type != 'hidden') { ]}
<label{{server_label_global_attr}}>{{label_server}}</label> <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}}"/> <input type="button" class="pure-button button-secondary" name="show" id="show-rooms" value="{{label_show_rooms}}"/>
</fieldset> </fieldset>
</form> </form>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7