Fixes #1407. Don't allow empty value for MUC nickname

CHANGES.md

@@ -19,6 +19,7 @@
 - #1352: Add [Jed](https://github.com/messageformat/Jed) as dependency of `@converse/headless`
 - #1373: Re-add support for the [muc_domain](https://conversejs.org/docs/html/configuration.html#muc-domain) setting
 - #1400: When a chat message is just an emoji, enlarge the emoji
+- #1407: Silent errors when trying to use whitespace as MUC nickname
 - #1437: List of groupchats in modal doesn't scroll
 - #1457: Wrong tooltip shown for "unbookmark" icon
 - #1479: Allow file upload by drag & drop also in MUCs

dist/converse.js

@@ -54112,11 +54112,10 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_6__["default"].plugins
         }
 
         return templates_add_chatroom_modal_html__WEBPACK_IMPORTED_MODULE_8___default()(_.extend(this.model.toJSON(), {
-          'heading_new_chatroom': __('Enter a new Groupchat'),
+          '__': _converse.__,
+          '_converse': _converse,
           'label_room_address': _converse.muc_domain ? __('Groupchat name') : __('Groupchat address'),
-          'label_nickname': __('Optional nickname'),
-          'chatroom_placeholder': placeholder,
-          'label_join': __('Join')
+          'chatroom_placeholder': placeholder
         }));
       },
 
@@ -54132,7 +54131,7 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_6__["default"].plugins
         this.model.save('muc_domain', Strophe.getDomainFromJid(jid));
         return {
           'jid': jid,
-          'nick': data.get('nickname')
+          'nick': data.get('nickname').trim()
         };
       },
 
@@ -92537,17 +92536,19 @@ var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./no
 module.exports = function(o) {
 var __t, __p = '', __e = _.escape;
 __p += '<!-- src/templates/add_chatroom_modal.html -->\n<div class="modal fade" id="add-chatroom-modal" tabindex="-1" role="dialog" aria-labelledby="add-chatroom-modal-label" aria-hidden="true">\n    <div class="modal-dialog" role="document">\n        <div class="modal-content">\n            <div class="modal-header">\n                <h5 class="modal-title"\n                    id="add-chatroom-modal-label">' +
-__e(o.heading_new_chatroom) +
+__e(o.__('Enter a new Groupchat')) +
 '</h5>\n                <button type="button" class="close" data-dismiss="modal" aria-label="Close">\n                    <span aria-hidden="true">×</span>\n                </button>\n            </div>\n            <div class="modal-body">\n                <form class="converse-form add-chatroom">\n                    <div class="form-group">\n                        <label for="chatroom">' +
 __e(o.label_room_address) +
 ':</label>\n                        <input type="text" required="required" name="chatroom" class="form-control" placeholder="' +
 __e(o.chatroom_placeholder) +
-'"/>\n                    </div>\n                    <div class="form-group">\n                        <label for="nickname">' +
-__e(o.label_nickname) +
-':</label>\n                        <input type="text" name="nickname" value="' +
+'"/>\n                    </div>\n                    <div class="form-group" >\n                        <label for="nickname">' +
+__e(o.__('Nickname')) +
+':</label>\n                        <input type="text" pattern=".*\\S+.*" title="' +
+__e(o.__('This field is required')) +
+'" required="required" name="nickname" value="' +
 __e(o.nick) +
 '" class="form-control"/>\n                    </div>\n                    <input type="submit" class="btn btn-primary" name="join" value="' +
-__e(o.label_join) +
+__e(o.__('Join')) +
 '"/>\n                </form>\n            </div>\n        </div>\n    </div>\n</div>\n';
 return __p
 };

spec/muc.js

@@ -3972,9 +3972,10 @@
                 expect(name_input.placeholder).toBe('name@conference.example.org');
 
                 const label_nick = modal.el.querySelector('label[for="nickname"]');
-                expect(label_nick.textContent).toBe('Optional nickname:');
+                expect(label_nick.textContent).toBe('Nickname:');
                 const nick_input = modal.el.querySelector('input[name="nickname"]');
                 expect(nick_input.value).toBe('');
+                nick_input.value = 'dummy';
 
                 expect(modal.el.querySelector('.modal-title').textContent).toBe('Enter a new Groupchat');
                 spyOn(_converse.ChatRoom.prototype, 'getRoomFeatures').and.callFake(() => Promise.resolve());
@@ -4006,7 +4007,7 @@
                 const modal = roomspanel.add_room_modal;
                 await test_utils.waitUntil(() => u.isVisible(modal.el), 1000)
                 const label_nick = modal.el.querySelector('label[for="nickname"]');
-                expect(label_nick.textContent).toBe('Optional nickname:');
+                expect(label_nick.textContent).toBe('Nickname:');
                 const nick_input = modal.el.querySelector('input[name="nickname"]');
                 expect(nick_input.value).toBe('dummy');
                 done();
@@ -4026,7 +4027,7 @@
                 const modal = roomspanel.add_room_modal;
                 await test_utils.waitUntil(() => u.isVisible(modal.el), 1000)
                 const label_nick = modal.el.querySelector('label[for="nickname"]');
-                expect(label_nick.textContent).toBe('Optional nickname:');
+                expect(label_nick.textContent).toBe('Nickname:');
                 const nick_input = modal.el.querySelector('input[name="nickname"]');
                 expect(nick_input.value).toBe('st.nick');
                 done();
@@ -4050,6 +4051,9 @@
                 let name_input = modal.el.querySelector('input[name="chatroom"]');
                 expect(name_input.placeholder).toBe('name@muc.example.org');
                 name_input.value = 'lounge';
+                let nick_input = modal.el.querySelector('input[name="nickname"]');
+                nick_input.value = 'max';
+
                 modal.el.querySelector('form input[type="submit"]').click();
                 await test_utils.waitUntil(() => _converse.chatboxes.length);
                 await test_utils.waitUntil(() => sizzle('.chatroom', _converse.el).filter(u.isVisible).length === 1);
@@ -4060,6 +4064,8 @@
                 await test_utils.waitUntil(() => u.isVisible(modal.el), 1000);
                 name_input = modal.el.querySelector('input[name="chatroom"]');
                 name_input.value = 'lounge@conference.example.org';
+                nick_input = modal.el.querySelector('input[name="nickname"]');
+                nick_input.value = 'max';
                 modal.el.querySelector('form input[type="submit"]').click();
                 await test_utils.waitUntil(() => _converse.chatboxes.models.filter(c => c.get('type') === 'chatroom').length === 2);
                 await test_utils.waitUntil(() => sizzle('.chatroom', _converse.el).filter(u.isVisible).length === 2);
@@ -4085,6 +4091,8 @@
                 let name_input = modal.el.querySelector('input[name="chatroom"]');
                 expect(name_input.placeholder).toBe('');
                 name_input.value = 'lounge';
+                let nick_input = modal.el.querySelector('input[name="nickname"]');
+                nick_input.value = 'max';
                 modal.el.querySelector('form input[type="submit"]').click();
                 await test_utils.waitUntil(() => _converse.chatboxes.length);
                 await test_utils.waitUntil(() => sizzle('.chatroom', _converse.el).filter(u.isVisible).length === 1);
@@ -4095,6 +4103,8 @@
                 await test_utils.waitUntil(() => u.isVisible(modal.el), 1000);
                 name_input = modal.el.querySelector('input[name="chatroom"]');
                 name_input.value = 'lounge@conference';
+                nick_input = modal.el.querySelector('input[name="nickname"]');
+                nick_input.value = 'max';
                 modal.el.querySelector('form input[type="submit"]').click();
                 await test_utils.waitUntil(() => _converse.chatboxes.models.filter(c => c.get('type') === 'chatroom').length === 2);
                 await test_utils.waitUntil(() => sizzle('.chatroom', _converse.el).filter(u.isVisible).length === 2);

src/converse-muc-views.js

@@ -412,11 +412,10 @@ converse.plugins.add('converse-muc-views', {
                     placeholder = muc_domain ? `name@${muc_domain}` : __('name@conference.example.org');
                 }
                 return tpl_add_chatroom_modal(_.extend(this.model.toJSON(), {
-                    'heading_new_chatroom': __('Enter a new Groupchat'),
+                    '__': _converse.__,
+                    '_converse': _converse,
                     'label_room_address': _converse.muc_domain ? __('Groupchat name') :  __('Groupchat address'),
-                    'label_nickname': __('Optional nickname'),
-                    'chatroom_placeholder': placeholder,
-                    'label_join': __('Join'),
+                    'chatroom_placeholder': placeholder
                 }));
             },
 
@@ -432,7 +431,7 @@ converse.plugins.add('converse-muc-views', {
                 this.model.save('muc_domain', Strophe.getDomainFromJid(jid));
                 return {
                     'jid': jid,
-                    'nick': data.get('nickname')
+                    'nick': data.get('nickname').trim()
                 }
             },
 

src/templates/add_chatroom_modal.html

@@ -3,7 +3,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title"
-                    id="add-chatroom-modal-label">{{{o.heading_new_chatroom}}}</h5>
+                    id="add-chatroom-modal-label">{{{o.__('Enter a new Groupchat')}}}</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">×</span>
                 </button>
@@ -14,11 +14,11 @@
                         <label for="chatroom">{{{o.label_room_address}}}:</label>
                         <input type="text" required="required" name="chatroom" class="form-control" placeholder="{{{o.chatroom_placeholder}}}"/>
                     </div>
-                    <div class="form-group">
-                        <label for="nickname">{{{o.label_nickname}}}:</label>
-                        <input type="text" name="nickname" value="{{{o.nick}}}" class="form-control"/>
+                    <div class="form-group" >
+                        <label for="nickname">{{{o.__('Nickname')}}}:</label>
+                        <input type="text" pattern=".*\S+.*" title="{{{o.__('This field is required')}}}" required="required" name="nickname" value="{{{o.nick}}}" class="form-control"/>
                     </div>
-                    <input type="submit" class="btn btn-primary" name="join" value="{{{o.label_join}}}"/>
+                    <input type="submit" class="btn btn-primary" name="join" value="{{{o.__('Join')}}}"/>
                 </form>
             </div>
         </div>

tests/utils.js

@@ -106,7 +106,9 @@
         const modal = roomspanel.add_room_modal;
         await utils.waitUntil(() => u.isVisible(modal.el), 1500)
         modal.el.querySelector('input[name="chatroom"]').value = jid;
-        modal.el.querySelector('input[name="nickname"]').value = nick;
+        if (nick) {
+            modal.el.querySelector('input[name="nickname"]').value = nick;
+        }
         modal.el.querySelector('form input[type="submit"]').click();
         await utils.waitUntil(() => _converse.chatboxviews.get(jid), 1000);
         return _converse.chatboxviews.get(jid);