Commit a83911d6 authored by Emmanuel Gil Peyrot's avatar Emmanuel Gil Peyrot Committed by JC Brand

WIP: Move the nickname selection form to a modal

parent c836eb40
...@@ -27,7 +27,7 @@ import tpl_chatroom_features from "templates/chatroom_features.html"; ...@@ -27,7 +27,7 @@ import tpl_chatroom_features from "templates/chatroom_features.html";
import tpl_chatroom_form from "templates/chatroom_form.html"; import tpl_chatroom_form from "templates/chatroom_form.html";
import tpl_chatroom_head from "templates/chatroom_head.html"; import tpl_chatroom_head from "templates/chatroom_head.html";
import tpl_chatroom_invite from "templates/chatroom_invite.html"; import tpl_chatroom_invite from "templates/chatroom_invite.html";
import tpl_chatroom_nickname_form from "templates/chatroom_nickname_form.html"; import tpl_chatroom_nickname_form_modal from "templates/chatroom_nickname_form_modal.html";
import tpl_chatroom_password_form from "templates/chatroom_password_form.html"; import tpl_chatroom_password_form from "templates/chatroom_password_form.html";
import tpl_chatroom_sidebar from "templates/chatroom_sidebar.html"; import tpl_chatroom_sidebar from "templates/chatroom_sidebar.html";
import tpl_info from "templates/info.html"; import tpl_info from "templates/info.html";
...@@ -1028,7 +1028,7 @@ converse.plugins.add('converse-muc-views', { ...@@ -1028,7 +1028,7 @@ converse.plugins.add('converse-muc-views', {
onConnectionStatusChanged () { onConnectionStatusChanged () {
const conn_status = this.model.get('connection_status'); const conn_status = this.model.get('connection_status');
if (conn_status === converse.ROOMSTATUS.NICKNAME_REQUIRED) { if (conn_status === converse.ROOMSTATUS.NICKNAME_REQUIRED) {
this.renderNicknameForm(); this.renderNicknameButton();
} else if (conn_status === converse.ROOMSTATUS.PASSWORD_REQUIRED) { } else if (conn_status === converse.ROOMSTATUS.PASSWORD_REQUIRED) {
this.renderPasswordForm(); this.renderPasswordForm();
} else if (conn_status === converse.ROOMSTATUS.CONNECTING) { } else if (conn_status === converse.ROOMSTATUS.CONNECTING) {
...@@ -1471,29 +1471,34 @@ converse.plugins.add('converse-muc-views', { ...@@ -1471,29 +1471,34 @@ converse.plugins.add('converse-muc-views', {
}, },
hideChatRoomContents () { hideChatRoomContents () {
const container_el = this.el.querySelector('.chatroom-body'); return;
if (container_el !== null) {
[].forEach.call(container_el.children, child => child.classList.add('hidden'));
}
}, },
renderNicknameForm () { renderNicknameButton () {
/* Render a form which allows the user to choose theirnickname. this.el.querySelector('.setNicknameButtonForm').classList.remove('hidden');
this.el.querySelector('.sendXMPPMessage').classList.add('hidden');
this.el.querySelector('.setNicknameButtonForm').addEventListener('submit', this.renderNicknameModal.bind(this), false);
},
renderNicknameModal (ev) {
/* Render a button which allows the user to get a modal to set their nickname.
*/ */
ev.preventDefault();
const message = this.model.get('nickname_validation_message'); const message = this.model.get('nickname_validation_message');
this.model.save('nickname_validation_message', undefined); this.model.save('nickname_validation_message', undefined);
this.hideChatRoomContents(); if (this.nickname_form_modal === undefined) {
if (!this.nickname_form) { this.nickname_form_modal = new _converse.NicknameFormModal({
this.nickname_form = new _converse.MUCNicknameForm({ //'model': new Backbone.Model({'validation_message': message}),
'model': new Backbone.Model({'validation_message': message}), 'model': this.model,
'chatroomview': this, 'chatroomview': this,
}); });
const container_el = this.el.querySelector('.chatroom-body'); const container_el = this.el.querySelector('.chatroom-body');
container_el.insertAdjacentElement('beforeend', this.nickname_form.el); container_el.insertAdjacentElement('beforeend', this.nickname_form_modal.el);
} else { } else {
this.nickname_form.model.set('validation_message', message); this.nickname_form_modal.model.set('validation_message', message);
} }
u.showElement(this.nickname_form.el); this.nickname_form_modal.show(ev);
console.log(this.nickname_form_modal);
u.safeSave(this.model, {'connection_status': converse.ROOMSTATUS.NICKNAME_REQUIRED}); u.safeSave(this.model, {'connection_status': converse.ROOMSTATUS.NICKNAME_REQUIRED});
}, },
...@@ -1778,7 +1783,7 @@ converse.plugins.add('converse-muc-views', { ...@@ -1778,7 +1783,7 @@ converse.plugins.add('converse-muc-views', {
* form has been submitted and removed. * form has been submitted and removed.
*/ */
if (this.model.get('connection_status') == converse.ROOMSTATUS.NICKNAME_REQUIRED) { if (this.model.get('connection_status') == converse.ROOMSTATUS.NICKNAME_REQUIRED) {
this.renderNicknameForm(); this.renderNicknameButton();
} else if (this.model.get('connection_status') == converse.ROOMSTATUS.PASSWORD_REQUIRED) { } else if (this.model.get('connection_status') == converse.ROOMSTATUS.PASSWORD_REQUIRED) {
this.renderPasswordForm(); this.renderPasswordForm();
} else if (this.model.get('connection_status') == converse.ROOMSTATUS.ENTERED) { } else if (this.model.get('connection_status') == converse.ROOMSTATUS.ENTERED) {
...@@ -1956,13 +1961,14 @@ converse.plugins.add('converse-muc-views', { ...@@ -1956,13 +1961,14 @@ converse.plugins.add('converse-muc-views', {
}); });
_converse.MUCNicknameForm = Backbone.VDOMView.extend({ _converse.NicknameFormModal = _converse.BootstrapModal.extend({
className: 'muc-nickname-form',
events: { events: {
'submit form': 'submitNickname', 'submit form': 'submitNickname',
}, },
initialize (attrs) { initialize (attrs) {
_converse.BootstrapModal.prototype.initialize.apply(this, arguments);
this.chatroomview = attrs.chatroomview; this.chatroomview = attrs.chatroomview;
this.listenTo(this.model, 'change:validation_message', this.render); this.listenTo(this.model, 'change:validation_message', this.render);
this.render(); this.render();
...@@ -1970,7 +1976,8 @@ converse.plugins.add('converse-muc-views', { ...@@ -1970,7 +1976,8 @@ converse.plugins.add('converse-muc-views', {
toHTML () { toHTML () {
const err_msg = this.model.get('validation_message'); const err_msg = this.model.get('validation_message');
return tpl_chatroom_nickname_form({ return tpl_chatroom_nickname_form_modal({
'__': __,
'heading': __('Please choose your nickname'), 'heading': __('Please choose your nickname'),
'label_nickname': __('Nickname'), 'label_nickname': __('Nickname'),
'label_join': __('Enter groupchat'), 'label_join': __('Enter groupchat'),
...@@ -1998,9 +2005,11 @@ converse.plugins.add('converse-muc-views', { ...@@ -1998,9 +2005,11 @@ converse.plugins.add('converse-muc-views', {
'validation_message': __('You need to provide a nickname') 'validation_message': __('You need to provide a nickname')
}); });
} }
this.modal.hide();
} }
}); });
_converse.ChatRoomOccupantView = Backbone.VDOMView.extend({ _converse.ChatRoomOccupantView = Backbone.VDOMView.extend({
tagName: 'li', tagName: 'li',
initialize () { initialize () {
......
<div class="new-msgs-indicator hidden">▼ {{{ o.unread_msgs }}} ▼</div> <div class="new-msgs-indicator hidden">▼ {{{ o.unread_msgs }}} ▼</div>
<form class="setNicknameButtonForm hidden">
<input type="submit" class="btn btn-primary" name="join" value="Join"/>
</form>
<form class="sendXMPPMessage"> <form class="sendXMPPMessage">
{[ if (o.show_toolbar) { ]} {[ if (o.show_toolbar) { ]}
<ul class="chat-toolbar no-text-select"></ul> <ul class="chat-toolbar no-text-select"></ul>
......
<div class="chatroom-form-container muc-nickname-form">
<form class="converse-form chatroom-form converse-centered-form">
<fieldset class="form-group">
<label>{{{o.heading}}}</label>
<p class="validation-message">{{{o.validation_message}}}</p>
<input type="text" required="required" name="nick" value="{{{o.nickname}}}"
class="form-control {{o.error_class}}" placeholder="{{{o.label_nickname}}}"/>
</fieldset>
<fieldset class="form-group">
<input type="submit" class="btn btn-primary" name="join" value="{{{o.label_join}}}"/>
</fieldset>
</form>
</div>
<div class="modal" id="ask-nickname-modal" tabindex="-1" role="dialog" aria-labelledby="ask-nickname-modal-label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="ask-nickname-modal-label">{{{o.heading}}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="converse-form chatroom-form converse-centered-form">
<fieldset class="form-group">
<label>{{{o.__('Nickname:')}}}</label>
<p class="validation-message">{{{o.validation_message}}}</p>
<input type="text" required="required" name="nick" value="{{{o.nickname}}}"
class="form-control {{o.error_class}}" placeholder="{{{o.label_nickname}}}"/>
</fieldset>
<fieldset class="form-group">
<input type="submit" class="btn btn-primary" name="join" value="{{{o.label_join}}}"/>
</fieldset>
</form>
</div>
</div>
</div>
</div>
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