From a83911d67f2e39435a88ede0c63c663e1a12a7b9 Mon Sep 17 00:00:00 2001 From: Emmanuel Gil Peyrot Date: Sat, 16 Nov 2019 00:27:25 +0100 Subject: [PATCH] WIP: Move the nickname selection form to a modal --- src/converse-muc-views.js | 47 +++++++++++-------- src/templates/chatbox_message_form.html | 3 ++ src/templates/chatroom_nickname_form.html | 13 ----- .../chatroom_nickname_form_modal.html | 26 ++++++++++ 4 files changed, 57 insertions(+), 32 deletions(-) delete mode 100644 src/templates/chatroom_nickname_form.html create mode 100644 src/templates/chatroom_nickname_form_modal.html diff --git a/src/converse-muc-views.js b/src/converse-muc-views.js index 5b4c1057c2..9b504f7407 100644 --- a/src/converse-muc-views.js +++ b/src/converse-muc-views.js @@ -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_head from "templates/chatroom_head.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_sidebar from "templates/chatroom_sidebar.html"; import tpl_info from "templates/info.html"; @@ -1028,7 +1028,7 @@ converse.plugins.add('converse-muc-views', { onConnectionStatusChanged () { const conn_status = this.model.get('connection_status'); if (conn_status === converse.ROOMSTATUS.NICKNAME_REQUIRED) { - this.renderNicknameForm(); + this.renderNicknameButton(); } else if (conn_status === converse.ROOMSTATUS.PASSWORD_REQUIRED) { this.renderPasswordForm(); } else if (conn_status === converse.ROOMSTATUS.CONNECTING) { @@ -1471,29 +1471,34 @@ converse.plugins.add('converse-muc-views', { }, hideChatRoomContents () { - const container_el = this.el.querySelector('.chatroom-body'); - if (container_el !== null) { - [].forEach.call(container_el.children, child => child.classList.add('hidden')); - } + return; }, - renderNicknameForm () { - /* Render a form which allows the user to choose theirnickname. + renderNicknameButton () { + 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'); this.model.save('nickname_validation_message', undefined); - this.hideChatRoomContents(); - if (!this.nickname_form) { - this.nickname_form = new _converse.MUCNicknameForm({ - 'model': new Backbone.Model({'validation_message': message}), + if (this.nickname_form_modal === undefined) { + this.nickname_form_modal = new _converse.NicknameFormModal({ + //'model': new Backbone.Model({'validation_message': message}), + 'model': this.model, 'chatroomview': this, }); 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 { - 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}); }, @@ -1778,7 +1783,7 @@ converse.plugins.add('converse-muc-views', { * form has been submitted and removed. */ 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) { this.renderPasswordForm(); } else if (this.model.get('connection_status') == converse.ROOMSTATUS.ENTERED) { @@ -1956,13 +1961,14 @@ converse.plugins.add('converse-muc-views', { }); - _converse.MUCNicknameForm = Backbone.VDOMView.extend({ - className: 'muc-nickname-form', + _converse.NicknameFormModal = _converse.BootstrapModal.extend({ + events: { 'submit form': 'submitNickname', }, initialize (attrs) { + _converse.BootstrapModal.prototype.initialize.apply(this, arguments); this.chatroomview = attrs.chatroomview; this.listenTo(this.model, 'change:validation_message', this.render); this.render(); @@ -1970,7 +1976,8 @@ converse.plugins.add('converse-muc-views', { toHTML () { const err_msg = this.model.get('validation_message'); - return tpl_chatroom_nickname_form({ + return tpl_chatroom_nickname_form_modal({ + '__': __, 'heading': __('Please choose your nickname'), 'label_nickname': __('Nickname'), 'label_join': __('Enter groupchat'), @@ -1998,9 +2005,11 @@ converse.plugins.add('converse-muc-views', { 'validation_message': __('You need to provide a nickname') }); } + this.modal.hide(); } }); + _converse.ChatRoomOccupantView = Backbone.VDOMView.extend({ tagName: 'li', initialize () { diff --git a/src/templates/chatbox_message_form.html b/src/templates/chatbox_message_form.html index 39f6f19c9c..75362d162f 100644 --- a/src/templates/chatbox_message_form.html +++ b/src/templates/chatbox_message_form.html @@ -1,4 +1,7 @@ +
{[ if (o.show_toolbar) { ]} diff --git a/src/templates/chatroom_nickname_form.html b/src/templates/chatroom_nickname_form.html deleted file mode 100644 index 9d28807f68..0000000000 --- a/src/templates/chatroom_nickname_form.html +++ /dev/null @@ -1,13 +0,0 @@ -
- -
- -

{{{o.validation_message}}}

- -
-
- -
- -
diff --git a/src/templates/chatroom_nickname_form_modal.html b/src/templates/chatroom_nickname_form_modal.html new file mode 100644 index 0000000000..a8dde6acb5 --- /dev/null +++ b/src/templates/chatroom_nickname_form_modal.html @@ -0,0 +1,26 @@ +