muc: Add JID validation to the occupant invite form

CHANGES.md

@@ -9,7 +9,7 @@
 
 ### New features and improvements
 - Add support for Emojis (either native, or via <a href="https://www.emojione.com/">Emojione</a>). [jcbrand]
-- Add JID validation in the contact add form. [jcbrand]
+- Add JID validation to the contact add form and the occupant invite form. [jcbrand]
 - #896 Consistently use `XMPP username` in user-facing text (instead of JID, Jabber ID etc.). [jcbrand]
 
 ### New configuration settings

src/converse-muc.js

@@ -2140,6 +2140,7 @@
                         if (_.isNull(form)) {
                             const heading = this.el.querySelector('.occupants-heading');
                             form = tpl_chatroom_invite({
+                                'error_message': null,
                                 'label_invitation': __('Invite'),
                             });
                             heading.insertAdjacentHTML('afterend', form);
@@ -2329,17 +2330,31 @@
                     if (reason !== null) {
                         this.chatroomview.directInvite(suggestion.text.value, reason);
                     }
+                    const form = suggestion.target.form,
+                          error = form.querySelector('.pure-form-message.error');
+                    if (!_.isNull(error)) {
+                        error.parentNode.removeChild(error);
+                    }
                     suggestion.target.value = '';
                 },
 
                 inviteFormSubmitted (evt) {
                     evt.preventDefault();
-                    const el = evt.target.querySelector('input.invited-contact');
+                    const el = evt.target.querySelector('input.invited-contact'),
+                          jid = el.value;
+                    if (!jid || _.filter(jid.split('@')).length < 2) {
+                        evt.target.outerHTML = tpl_chatroom_invite({
+                            'error_message': __('Please enter a valid XMPP username'),
+                            'label_invitation': __('Invite'),
+                        });
+                        this.initInviteWidget();
+                        return;
+                    }
                     this.promptForInvite({
                         'target': el,
                         'text': {
-                            'label': el.value,
-                            'value': el.value
+                            'label': jid,
+                            'value': jid
                         }});
                 },
 
@@ -2365,7 +2380,8 @@
                         'minChars': 1,
                         'list': list
                     });
-                    el.addEventListener('awesomplete-selectcomplete', this.promptForInvite.bind(this));
+                    el.addEventListener('awesomplete-selectcomplete',
+                        this.promptForInvite.bind(this));
                 }
             });
 

src/templates/chatroom_invite.html

 <form class="pure-form room-invite">
+    {[ if (error_message) { ]}
+        <span class="pure-form-message error">{{{error_message}}}</span>
+    {[ } ]}
     <input class="invited-contact" placeholder="{{{label_invitation}}}" type="text"/>
 </form>