feat: Add modal for starting a new chat with an XMPP JID

src/plugins/rosterview/modals/new-chat.js

@@ -0,0 +1,81 @@
+import { Strophe } from 'strophe.js';
+import { _converse, api, log } from '@converse/headless';
+import BaseModal from 'plugins/modal/modal.js';
+import { __ } from 'i18n';
+
+export default class NewChatModal extends BaseModal {
+    initialize () {
+        super.initialize();
+        this.listenTo(this.model, 'change', () => this.render());
+        this.render();
+        this.addEventListener(
+            'shown.bs.modal',
+            () => /** @type {HTMLInputElement} */ (this.querySelector('input[name="jid"]'))?.focus(),
+            false
+        );
+    }
+
+    renderModal () {
+        return `
+            <form class="new-chat-form">
+                <div class="modal-body">
+                    <div class="form-group">
+                        <label for="jid">${__('Enter XMPP JID')}</label>
+                        <input type="text" name="jid" class="form-control" required>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-primary">${__('Start Chat')}</button>
+                </div>
+            </form>
+        `;
+    }
+
+    getModalTitle () {
+        return __('Start a New Chat');
+    }
+
+    /**
+     * @param {string} jid
+     */
+    validateSubmission (jid) {
+        if (!jid || jid.split('@').filter((s) => !!s).length < 2) {
+            this.model.set('error', __('Please enter a valid XMPP address'));
+            return false;
+        }
+        this.model.set('error', null);
+        return true;
+    }
+
+    /**
+     * @param {HTMLFormElement} _form
+     * @param {string} jid
+     */
+    async afterSubmission (_form, jid) {
+        try {
+            await api.chats.open(jid);
+        } catch (e) {
+            log.error(e);
+            this.model.set('error', __('Sorry, something went wrong while starting the chat'));
+            return;
+        }
+        this.model.clear();
+        this.modal.hide();
+    }
+
+    /**
+     * @param {Event} ev
+     */
+    async startChatFromForm (ev) {
+        ev.preventDefault();
+        const form = /** @type {HTMLFormElement} */(ev.target);
+        const data = new FormData(form);
+        const jid = /** @type {string} */ (data.get('jid') || '').trim();
+
+        if (this.validateSubmission(jid)) {
+            this.afterSubmission(form, jid);
+        }
+    }
+}
+
+api.elements.define('converse-new-chat-modal', NewChatModal);