From d1d9468aaab85d25996f536ed628635e7b4e3ad6 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Mon, 10 Feb 2025 10:32:17 +0200
Subject: [PATCH 1/6] Remove sponsor

---
 README.md                            | 6 ------
 docs/source/_templates/sponsors.html | 4 ----
 index.html                           | 1 -
 3 files changed, 11 deletions(-)

diff --git a/README.md b/README.md
index 72b57f3435..366c4b7542 100644
--- a/README.md
+++ b/README.md
@@ -165,12 +165,6 @@ We accept donations via [Patreon](https://www.patreon.com/jcbrand) and [Liberapa
 
 ## Sponsors
 
-<p>
-  <a href="https://www.dotcom-monitor.com/sponsoring-open-source-projects/?utm_source=conversejs" target="_blank" rel="noopener">
-    <img alt="Dotcom-Monitor" src="https://raw.githubusercontent.com/conversejs/media/main/logos/dotcom-monitor.svg" width="200">
-                                   
-  </a>
-</p>
 <p>
   <a href="https://bairesdev.com/sponsoring-open-source-projects/?utm_source=conversejs" target="_blank" rel="noopener">
     <img alt="BairesDev" src="https://raw.githubusercontent.com/conversejs/media/main/logos/bairesdev-primary.png" width="200">
diff --git a/docs/source/_templates/sponsors.html b/docs/source/_templates/sponsors.html
index 52ef4527d5..f2f17bcca0 100644
--- a/docs/source/_templates/sponsors.html
+++ b/docs/source/_templates/sponsors.html
@@ -2,10 +2,6 @@
 <h4 class="sidebar-title">Sponsored by</h4>
 </span>
 <ul class="sponsors-list">
-    <li><a href="https://www.dotcom-monitor.com/sponsoring-open-source-projects/?utm_source=conversejs" target="_blank" rel="noopener">
-            <img style="width: 10em" src="/media/logos/dotcom-monitor.svg" alt="Dotcom-Monitor">
-        </a>
-    </li>
     <li><a href="https://bairesdev.com/sponsoring-open-source-projects/?utm_source=conversejs" target="_blank" rel="noopener">
             <img style="width: 10em" src="/media/logos/bairesdev-primary.png" alt="BairesDev">
         </a>
diff --git a/index.html b/index.html
index a61a79581b..354190d907 100644
--- a/index.html
+++ b/index.html
@@ -239,7 +239,6 @@ <h2 style="text-align: center">Professional support and custom development</h2>
                     <div class="sponsors">
                         <h2>Converse is supported by:</h2>
                         <ul >
-                            <li><a href="https://www.dotcom-monitor.com/sponsoring-open-source-projects/?utm_source=conversejs" target="_blank" rel="noopener"><img style="width: 13em" src="/media/logos/dotcom-monitor.svg" alt="Dotcom-Monitor"></a></li>
                             <li><a href="https://bairesdev.com/sponsoring-open-source-projects/?utm_source=conversejs" target="_blank" rel="noopener"><img style="width: 13em" src="/media/logos/bairesdev-primary.png" alt="BairesDev"></a></li>
                             <li><a href="https://blokt.com?utm_source=conversejs" target="_blank" rel="noopener"><img style="width: 12em" src="/logo/blokt.png" alt="Blokt Crypto & Privacy"></a></li>
                             <li><a href="https://www.keycdn.com?utm_source=conversejs" target="_blank" rel="noopener"><img style="height: 3em" src="/logo/keycdn.svg" alt="KeyCDN"></a></li>

From 11740b159bb7236eb9e84426016ac476f8d98247 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Mon, 10 Feb 2025 20:40:06 +0200
Subject: [PATCH 2/6] Remove unused setting

---
 src/headless/plugins/muc/api.js         | 3 ---
 src/headless/types/plugins/muc/api.d.ts | 4 ----
 2 files changed, 7 deletions(-)

diff --git a/src/headless/plugins/muc/api.js b/src/headless/plugins/muc/api.js
index 9e315fc0b7..af54ec21f2 100644
--- a/src/headless/plugins/muc/api.js
+++ b/src/headless/plugins/muc/api.js
@@ -67,9 +67,6 @@ const rooms = {
      *     in the [XEP-0045 MUC specification](https://xmpp.org/extensions/xep-0045.html#registrar-formtype-owner).
      *     The values should be named without the `muc#roomconfig_` prefix.
      * @param {boolean} [attrs.minimized] A boolean, indicating whether the room should be opened minimized or not.
-     * @param {boolean} [attrs.bring_to_foreground] A boolean indicating whether the room should be
-     *     brought to the foreground and therefore replace the currently shown chat.
-     *     If there is no chat currently open, then this option is ineffective.
      * @param {boolean} [force=false] - By default, a minimized
      *   room won't be maximized (in `overlayed` view mode) and in
      *   `fullscreen` view mode a newly opened room won't replace
diff --git a/src/headless/types/plugins/muc/api.d.ts b/src/headless/types/plugins/muc/api.d.ts
index 5009c613df..ab11685af0 100644
--- a/src/headless/types/plugins/muc/api.d.ts
+++ b/src/headless/types/plugins/muc/api.d.ts
@@ -38,9 +38,6 @@ declare namespace rooms {
      *     in the [XEP-0045 MUC specification](https://xmpp.org/extensions/xep-0045.html#registrar-formtype-owner).
      *     The values should be named without the `muc#roomconfig_` prefix.
      * @param {boolean} [attrs.minimized] A boolean, indicating whether the room should be opened minimized or not.
-     * @param {boolean} [attrs.bring_to_foreground] A boolean indicating whether the room should be
-     *     brought to the foreground and therefore replace the currently shown chat.
-     *     If there is no chat currently open, then this option is ineffective.
      * @param {boolean} [force=false] - By default, a minimized
      *   room won't be maximized (in `overlayed` view mode) and in
      *   `fullscreen` view mode a newly opened room won't replace
@@ -83,7 +80,6 @@ declare namespace rooms {
         auto_configure?: boolean;
         roomconfig?: object;
         minimized?: boolean;
-        bring_to_foreground?: boolean;
     }, force?: boolean): Promise<MUC[] | MUC>;
     /**
      * Fetches the object representing a MUC chatroom (aka groupchat)

From 520c4c3cc13ddf3e9fa4ec78534bb3d0d3479bf4 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Mon, 10 Feb 2025 20:53:22 +0200
Subject: [PATCH 3/6] Bugfix. Don't pass in roster contact attrs to
 `api.chats.open`

The `id` attr of the xmpp-status obj gets passed in when opening a chat
with our own JID, which causes problems because the JID should be the
`id`.
---
 src/headless/plugins/roster/contact.js | 5 +----
 src/plugins/rosterview/contactview.js  | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/headless/plugins/roster/contact.js b/src/headless/plugins/roster/contact.js
index 275f215a57..ada3b5cd23 100644
--- a/src/headless/plugins/roster/contact.js
+++ b/src/headless/plugins/roster/contact.js
@@ -64,10 +64,7 @@ class RosterContact extends ColorAwareModel(Model) {
     }
 
     openChat () {
-        // XXX: Doubtful whether it's necessary to pass in the contact
-        // attributes hers. If so, we should perhaps look them up inside the
-        // `open` API method.
-        api.chats.open(this.get('jid'), this.attributes, true);
+        api.chats.open(this.get('jid'), {}, true);
     }
 
     getDisplayName () {
diff --git a/src/plugins/rosterview/contactview.js b/src/plugins/rosterview/contactview.js
index 87eb18687a..6cba284432 100644
--- a/src/plugins/rosterview/contactview.js
+++ b/src/plugins/rosterview/contactview.js
@@ -44,7 +44,7 @@ export default class RosterContact extends CustomElement {
      */
     openChat(ev) {
         ev?.preventDefault?.();
-        api.chats.open(this.model.get('jid'), this.model.attributes, true);
+        api.chats.open(this.model.get('jid'), {}, true);
     }
 
     /**

From 75272839e811174b41f69e7311dc043f0237babf Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Sun, 9 Feb 2025 11:51:09 +0200
Subject: [PATCH 4/6] Refactor "Add MUC" modal

- Escape JID before creating a new MUC
- Allow adding/entering a MUC by specifying only a name
    If no MUC service is provided, we fetch the default service and use that.
- Add validation for the MUC name/jid
- Add test for the muc_roomid_policy setting
- Create normalized MUC JID when only a name is provided
---
 CHANGES.md                                    |   1 +
 src/headless/plugins/disco/api.js             |  16 +-
 src/headless/plugins/disco/entity.js          |   6 +-
 src/headless/plugins/disco/tests/disco.js     |   6 +-
 src/headless/plugins/muc/index.js             |   4 +-
 src/headless/plugins/muc/utils.js             |  18 ++
 src/headless/types/plugins/disco/api.d.ts     |   6 +-
 src/headless/types/plugins/disco/entity.d.ts  |   1 +
 src/headless/types/plugins/muc/utils.d.ts     |   4 +
 src/headless/utils/jid.js                     |  12 +-
 .../chatview/tests/http-file-upload.js        |  15 +-
 src/plugins/muc-views/modals/add-muc.js       | 123 ++++++++----
 .../muc-views/modals/templates/add-muc.js     |  67 ++++---
 .../muc-views/styles/add-muc-modal.scss       |   1 +
 src/plugins/muc-views/tests/muc-add-modal.js  | 182 ++++++++++++------
 src/plugins/muc-views/tests/muc.js            |   2 +-
 src/plugins/roomslist/model.js                |   6 +-
 src/plugins/roomslist/templates/roomslist.js  |  22 +--
 src/shared/autocomplete/component.js          |  96 +++++----
 src/shared/chat/utils.js                      |   1 -
 src/shared/styles/forms.scss                  |  10 +-
 src/shared/tests/mock.js                      |  10 +
 .../plugins/muc-views/modals/add-muc.d.ts     |  28 ++-
 src/types/shared/autocomplete/component.d.ts  |  86 +++++----
 24 files changed, 470 insertions(+), 253 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 8bf1425a19..b7c22750d4 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -64,6 +64,7 @@
 - New "getOccupantActionButtons" hook, so that plugins can add actions on MUC occupants.
 - MUC occupants badges: displays short labels, with full label as title.
 - New config option [stanza_timeout](https://conversejs.org/docs/html/configuration.html#show-background)
+- Update the "Add MUC" modal to add validation and to allow specifying only the MUC name and not the whole address.
 
 ### Default config changes
 - Make `fullscreen` the default `view_mode`.
diff --git a/src/headless/plugins/disco/api.js b/src/headless/plugins/disco/api.js
index 01af9b7282..1e218d0116 100644
--- a/src/headless/plugins/disco/api.js
+++ b/src/headless/plugins/disco/api.js
@@ -8,6 +8,7 @@ import _converse from '../../shared/_converse.js';
 import api from '../../shared/api/index.js';
 import converse from '../../shared/api/public.js';
 import log from '../../log.js';
+import DiscoEntity from './entity.js';
 
 const { Strophe, $iq } = converse.env;
 
@@ -174,7 +175,7 @@ export default {
          * @returns {promise} Promise which resolves once we have a result from the server.
          */
         items(jid, node) {
-            const attrs = { 'xmlns': Strophe.NS.DISCO_ITEMS };
+            const attrs = { xmlns: Strophe.NS.DISCO_ITEMS };
             if (node) {
                 attrs.node = node;
             }
@@ -200,6 +201,7 @@ export default {
              * @method api.disco.entities.get
              * @param {string} jid The Jabber ID of the entity
              * @param {boolean} [create] Whether the entity should be created if it doesn't exist.
+             * @return {Promise<DiscoEntity|DiscoEntities|undefined>}
              * @example _converse.api.disco.entities.get(jid);
              */
             async get(jid, create = false) {
@@ -227,7 +229,10 @@ export default {
              * @param {string} jid - The Jabber ID of the entity for which we want to fetch items
              * @example api.disco.entities.items(jid);
              */
-            items(jid) {
+            async items(jid) {
+                const entity = await api.disco.entities.get(jid);
+                await entity.waitUntilItemsFetched;
+
                 const disco_entities = /** @type {DiscoEntities} */ (_converse.state.disco_entities);
                 return disco_entities.filter((e) => e.get('parent_jids')?.includes(jid));
             },
@@ -293,9 +298,11 @@ export default {
                     return [];
                 }
 
+                const items = await api.disco.entities.items(jid);
+
                 const promises = [
                     entity.getFeature(feature),
-                    ...api.disco.entities.items(jid).map((i) => i.getFeature(feature)),
+                    ...items.map((i) => i.getFeature(feature)),
                 ];
                 const result = await Promise.all(promises);
                 return result.filter((f) => f instanceof Object);
@@ -331,7 +338,8 @@ export default {
                     return true;
                 }
 
-                const result = await Promise.all(api.disco.entities.items(jid).map((i) => i.getFeature(feature)));
+                const items = await api.disco.entities.items(jid);
+                const result = await Promise.all(items.map((i) => i.getFeature(feature)));
                 return result.map((f) => f instanceof Object).includes(true);
             },
         },
diff --git a/src/headless/plugins/disco/entity.js b/src/headless/plugins/disco/entity.js
index a4ed6cd43d..722ec4329e 100644
--- a/src/headless/plugins/disco/entity.js
+++ b/src/headless/plugins/disco/entity.js
@@ -26,6 +26,7 @@ class DiscoEntity extends Model {
     initialize (_, options) {
         super.initialize();
         this.waitUntilFeaturesDiscovered = getOpenPromise();
+        this.waitUntilItemsFetched = getOpenPromise();
 
         this.dataforms = new Collection();
         let id = `converse.dataforms-${this.get('jid')}`;
@@ -144,7 +145,8 @@ class DiscoEntity extends Model {
             const jid = item.getAttribute('jid');
             const entity = _converse.state.disco_entities.get(jid);
             if (entity) {
-                entity.set({ parent_jids: [this.get('jid')] });
+                const parent_jids = entity.get('parent_jids');
+                entity.set({ parent_jids: [...parent_jids, this.get('jid')] });
             } else {
                 api.disco.entities.create({
                     jid,
@@ -191,6 +193,8 @@ class DiscoEntity extends Model {
         if (stanza.querySelector(`feature[var="${Strophe.NS.DISCO_ITEMS}"]`)) {
             await this.queryForItems();
         }
+        this.waitUntilItemsFetched.resolve();
+
         Array.from(stanza.querySelectorAll('feature')).forEach(feature => {
             this.features.create({
                 'var': feature.getAttribute('var'),
diff --git a/src/headless/plugins/disco/tests/disco.js b/src/headless/plugins/disco/tests/disco.js
index 6e4a39ead7..ea1342fa20 100644
--- a/src/headless/plugins/disco/tests/disco.js
+++ b/src/headless/plugins/disco/tests/disco.js
@@ -114,9 +114,9 @@ describe("Service Discovery", function () {
             ]);
             const { api, domain } = _converse;
             let entity = entities.get(_converse.domain);
-            expect(api.disco.entities.items(domain).length).toBe(3);
-
-            expect(api.disco.entities.items(domain).map(e => e.get('jid'))).toEqual(
+            const domain_items = await api.disco.entities.items(domain);
+            expect(domain_items.length).toBe(3);
+            expect(domain_items.map(e => e.get('jid'))).toEqual(
                 ['people.shakespeare.lit', 'plays.shakespeare.lit', 'words.shakespeare.lit']
             )
 
diff --git a/src/headless/plugins/muc/index.js b/src/headless/plugins/muc/index.js
index fedc2f4f98..4a3d7dcfd3 100644
--- a/src/headless/plugins/muc/index.js
+++ b/src/headless/plugins/muc/index.js
@@ -6,8 +6,8 @@ import MUCOccupant from './occupant.js';
 import MUCOccupants from './occupants.js';
 import './plugin.js';
 
-import { isChatRoom } from './utils.js';
+import { getDefaultMUCService, isChatRoom } from './utils.js';
 import { setAffiliation } from './affiliations/utils.js';
-Object.assign(u, { muc: { isChatRoom, setAffiliation }});
+Object.assign(u, { muc: { isChatRoom, setAffiliation, getDefaultMUCService }});
 
 export { MUCMessage, MUCMessages, MUC, MUCOccupant, MUCOccupants };
diff --git a/src/headless/plugins/muc/utils.js b/src/headless/plugins/muc/utils.js
index f423b5d0bf..eb2e2857a9 100644
--- a/src/headless/plugins/muc/utils.js
+++ b/src/headless/plugins/muc/utils.js
@@ -9,6 +9,24 @@ import { getUnloadEvent } from '../../utils/session.js';
 
 const { Strophe, sizzle, u } = converse.env;
 
+/**
+ * @returns {Promise<string|undefined>}
+ */
+export async function getDefaultMUCService () {
+    let muc_service = api.settings.get('muc_domain');
+    if (!muc_service) {
+        const domain = _converse.session.get('domain');
+        const items = await api.disco.entities.items(domain);
+        for (const item of items) {
+            if (await api.disco.features.has(Strophe.NS.MUC, item.get('jid'))) {
+                muc_service = item.get('jid');
+                break;
+            }
+        }
+    }
+    return muc_service;
+}
+
 /**
  * @param {import('@converse/skeletor').Model} model
  */
diff --git a/src/headless/types/plugins/disco/api.d.ts b/src/headless/types/plugins/disco/api.d.ts
index ca5d52d0c1..279d763070 100644
--- a/src/headless/types/plugins/disco/api.d.ts
+++ b/src/headless/types/plugins/disco/api.d.ts
@@ -84,9 +84,10 @@ declare namespace _default {
              * @method api.disco.entities.get
              * @param {string} jid The Jabber ID of the entity
              * @param {boolean} [create] Whether the entity should be created if it doesn't exist.
+             * @return {Promise<DiscoEntity|DiscoEntities|undefined>}
              * @example _converse.api.disco.entities.get(jid);
              */
-            function get(jid: string, create?: boolean): Promise<any>;
+            function get(jid: string, create?: boolean): Promise<DiscoEntity | DiscoEntities | undefined>;
             /**
              * Return any disco items advertised on this entity
              *
@@ -94,7 +95,7 @@ declare namespace _default {
              * @param {string} jid - The Jabber ID of the entity for which we want to fetch items
              * @example api.disco.entities.items(jid);
              */
-            function items(jid: string): any;
+            function items(jid: string): Promise<any>;
             /**
              * Create a new  disco entity. It's identity and features
              * will automatically be fetched from cache or from the
@@ -254,4 +255,5 @@ export default _default;
 export type DiscoState = import("./index").DiscoState;
 export type DiscoEntities = import("./entities").default;
 export type Collection = import("@converse/skeletor").Collection;
+import DiscoEntity from './entity.js';
 //# sourceMappingURL=api.d.ts.map
\ No newline at end of file
diff --git a/src/headless/types/plugins/disco/entity.d.ts b/src/headless/types/plugins/disco/entity.d.ts
index 4fb951ac5c..3acd1f70ab 100644
--- a/src/headless/types/plugins/disco/entity.d.ts
+++ b/src/headless/types/plugins/disco/entity.d.ts
@@ -11,6 +11,7 @@ export default DiscoEntity;
 declare class DiscoEntity extends Model {
     initialize(_: any, options: any): void;
     waitUntilFeaturesDiscovered: any;
+    waitUntilItemsFetched: any;
     dataforms: Collection;
     features: Collection;
     fields: Collection;
diff --git a/src/headless/types/plugins/muc/utils.d.ts b/src/headless/types/plugins/muc/utils.d.ts
index 24f416bd6e..9c458ab5f2 100644
--- a/src/headless/types/plugins/muc/utils.d.ts
+++ b/src/headless/types/plugins/muc/utils.d.ts
@@ -1,3 +1,7 @@
+/**
+ * @returns {Promise<string|undefined>}
+ */
+export function getDefaultMUCService(): Promise<string | undefined>;
 /**
  * @param {import('@converse/skeletor').Model} model
  */
diff --git a/src/headless/utils/jid.js b/src/headless/utils/jid.js
index 377b35b92e..22d938633a 100644
--- a/src/headless/utils/jid.js
+++ b/src/headless/utils/jid.js
@@ -5,10 +5,16 @@ import { Strophe } from 'strophe.js';
  * @returns {boolean}
  */
 export function isValidJID(jid) {
-    if (typeof jid === 'string') {
-        return jid.split('@').filter((s) => !!s).length === 2 && !jid.startsWith('@') && !jid.endsWith('@');
+    if (!(typeof jid === 'string')) {
+        return false;
     }
-    return false;
+
+    const num_slashes = jid.split('/').length - 1;
+    if (num_slashes > 1) {
+        return false;
+    }
+
+    return jid.split('@').filter((s) => !!s).length === 2 && !jid.startsWith('@') && !jid.endsWith('@');
 }
 
 /**
diff --git a/src/plugins/chatview/tests/http-file-upload.js b/src/plugins/chatview/tests/http-file-upload.js
index b276eeaed9..d22c5c2bf4 100644
--- a/src/plugins/chatview/tests/http-file-upload.js
+++ b/src/plugins/chatview/tests/http-file-upload.js
@@ -53,14 +53,9 @@ describe("XEP-0363: HTTP File Upload", function () {
             expect(entities.get(_converse.domain).features.length).toBe(2);
             expect(entities.get(_converse.domain).identities.length).toBe(1);
 
-            api.disco.entities.get().then(entities => {
-                expect(entities.length).toBe(3);
-                expect(entities.pluck('jid')).toEqual(['montague.lit', 'romeo@montague.lit', 'upload.montague.lit']);
-                expect(api.disco.entities.items('montague.lit').length).toBe(1);
-                // Converse.js sees that the entity has a disco#info feature, so it will make a query for it.
-                const selector = 'iq[to="upload.montague.lit"] query[xmlns="http://jabber.org/protocol/disco#info"]';
-                return u.waitUntil(() => IQ_stanzas.filter(iq => iq.querySelector(selector)).length > 0);
-            });
+            const domain_items = await api.disco.entities.items('montague.lit')
+            expect(domain_items.length).toBe(1);
+            // Converse.js sees that the entity has a disco#info feature, so it will make a query for it.
 
             selector = 'iq[to="upload.montague.lit"] query[xmlns="http://jabber.org/protocol/disco#info"]';
             stanza = await u.waitUntil(() => IQ_stanzas.filter(iq => iq.querySelector(selector)).pop(), 1000);
@@ -311,7 +306,9 @@ describe("XEP-0363: HTTP File Upload", function () {
                     expect(entities.get(_converse.domain).features.length).toBe(2);
                     expect(entities.get(_converse.domain).identities.length).toBe(1);
                     expect(entities.pluck('jid')).toEqual(['montague.lit', 'romeo@montague.lit', 'upload.montague.lit']);
-                    expect(api.disco.entities.items('montague.lit').length).toBe(1);
+
+                    const items = await api.disco.entities.items('montague.lit');
+                    expect(items.length).toBe(1);
                     await u.waitUntil(function () {
                         // Converse.js sees that the entity has a disco#info feature,
                         // so it will make a query for it.
diff --git a/src/plugins/muc-views/modals/add-muc.js b/src/plugins/muc-views/modals/add-muc.js
index 664bb347c1..c7735522ed 100644
--- a/src/plugins/muc-views/modals/add-muc.js
+++ b/src/plugins/muc-views/modals/add-muc.js
@@ -1,7 +1,8 @@
+import { _converse, api, converse } from '@converse/headless';
+import AutoCompleteComponent from 'shared/autocomplete/component.js';
 import tplAddMuc from './templates/add-muc.js';
 import BaseModal from 'plugins/modal/modal.js';
 import { __ } from 'i18n';
-import { _converse, api, converse } from '@converse/headless';
 
 import '../styles/add-muc-modal.scss';
 
@@ -9,10 +10,8 @@ const u = converse.env.utils;
 const { Strophe } = converse.env;
 
 export default class AddMUCModal extends BaseModal {
-    initialize () {
+    initialize() {
         super.initialize();
-        this.listenTo(this.model, 'change:muc_domain', () => this.render());
-        this.muc_roomid_policy_error_msg = null;
         this.render();
         this.addEventListener(
             'shown.bs.modal',
@@ -23,15 +22,19 @@ export default class AddMUCModal extends BaseModal {
         );
     }
 
-    renderModal () {
+    renderModal() {
         return tplAddMuc(this);
     }
 
-    getModalTitle () {
+    getModalTitle() {
         return __('Enter a new Groupchat');
     }
 
-    parseRoomDataFromEvent (form) {
+    /**
+     * @param {HTMLFormElement} form
+     * @returns {{ jid: string, nick: string }}
+     */
+    parseRoomDataFromEvent(form) {
         const data = new FormData(form);
         const jid = /** @type {string} */ (data.get('chatroom'))?.trim();
         let nick;
@@ -43,50 +46,98 @@ export default class AddMUCModal extends BaseModal {
         } else {
             nick = /** @type {string} */ (data.get('nickname')).trim();
         }
-        return {
-            'jid': jid,
-            'nick': nick,
-        };
+        return { jid, nick };
     }
 
-    openChatRoom (ev) {
+    /**
+     * Takes a string and returns a normalized lowercase value representing the node (localpart) of a MUC JID.
+     * Replaces all spaces with dashes, replaces diacritics with ASCII, and
+     * removes all characters besides letters and numbers and dashes.
+     * @param {string} s
+     * @returns {string}
+     */
+    normalizeNode(s) {
+        return s
+            .trim()
+            .replace(/\s+/g, '-')
+            .replace(/\u0142/g, "l")
+            .replace(/[^\x00-\x7F]/g, (c) => c.normalize('NFD').replace(/[\u0300-\u036f]/g, ''))
+            .replace(/[^a-zA-Z0-9-]/g, '-')
+            .replace(/-+/g, '-')
+            .replace(/[^a-zA-Z0-9]$/g, '')
+            .toLowerCase();
+    }
+
+    /**
+     * @param {Event} ev
+     */
+    async openChatRoom(ev) {
         ev.preventDefault();
-        if (this.checkRoomidPolicy()) return;
 
-        const data = this.parseRoomDataFromEvent(ev.target);
-        if (data.nick === '') {
-            // Make sure defaults apply if no nick is provided.
-            data.nick = undefined;
-        }
+        const autocomplete_el = /** @type {AutoCompleteComponent} */ (this.querySelector('converse-autocomplete'));
+        if (autocomplete_el.onChange().error_message) return;
+
+        const { escapeNode, getNodeFromJid, getDomainFromJid } = Strophe;
+        const form = /** @type {HTMLFormElement} */ (ev.target);
+
+        const data = this.parseRoomDataFromEvent(form);
+        const settings = {
+            nick: data.nick ?? undefined,
+        };
+
         let jid;
-        if (api.settings.get('locked_muc_domain') || (api.settings.get('muc_domain') && !u.isValidJID(data.jid))) {
-            jid = `${Strophe.escapeNode(data.jid)}@${api.settings.get('muc_domain')}`;
-        } else {
-            jid = data.jid;
-            this.model.setDomain(jid);
+        if (api.settings.get('locked_muc_domain') || !u.isValidJID(data.jid)) {
+            const muc_service = await u.muc.getDefaultMUCService();
+            if (muc_service) {
+                settings.name = data.jid;
+                jid = `${this.normalizeNode(data.jid)}@${muc_service}`.toLowerCase();
+            }
+        }
+
+        if (!jid) {
+            jid = `${escapeNode(getNodeFromJid(data.jid))}@${getDomainFromJid(data.jid)}`.toLowerCase();
         }
 
-        api.rooms.open(jid, Object.assign(data, { jid }), true);
-        ev.target.reset();
+        api.rooms.open(jid, { ...settings, jid }, true);
+        form.reset();
         this.modal.hide();
     }
 
-    checkRoomidPolicy () {
-        if (api.settings.get('muc_roomid_policy') && api.settings.get('muc_domain')) {
-            let jid = /** @type {HTMLInputElement} */ (this.querySelector('converse-autocomplete input')).value;
+    /**
+     * @param {string} jid
+     * @return {string}
+     */
+    validateMUCJID(jid) {
+        if (jid.length === 0) {
+            return __('Invalid groupchat address, it cannot be empty.');
+        }
+
+        const num_slashes = jid.split('/').length - 1;
+        if (num_slashes > 0) {
+            return __('Invalid groupchat address, a forward slash is not allowed.');
+        }
+
+        const num_ats = jid.split('@').length - 1;
+        if (num_ats > 1) {
+            return __('Invalid groupchat address, more than one @ sign is not allowed.');
+        }
+
+        if (jid.startsWith('@') || jid.endsWith('@')) {
+            return __('Invalid groupchat address, it cannot start or end with an @ sign.');
+        }
+
+        const policy = api.settings.get('muc_roomid_policy');
+        if (policy && api.settings.get('muc_domain')) {
             if (api.settings.get('locked_muc_domain') || !u.isValidJID(jid)) {
                 jid = `${Strophe.escapeNode(jid)}@${api.settings.get('muc_domain')}`;
             }
-            const roomid = Strophe.getNodeFromJid(jid);
-            const roomdomain = Strophe.getDomainFromJid(jid);
-            if (api.settings.get('muc_domain') !== roomdomain || api.settings.get('muc_roomid_policy').test(roomid)) {
-                this.muc_roomid_policy_error_msg = null;
-            } else {
-                this.muc_roomid_policy_error_msg = __('Groupchat id is invalid.');
-                return true;
+            const muc_jid = Strophe.getNodeFromJid(jid);
+            const muc_domain = Strophe.getDomainFromJid(jid);
+            if (api.settings.get('muc_domain') === muc_domain && !policy.test(muc_jid)) {
+                return __('Groupchat id is invalid.');
             }
-            this.render();
         }
+        return '';
     }
 }
 
diff --git a/src/plugins/muc-views/modals/templates/add-muc.js b/src/plugins/muc-views/modals/templates/add-muc.js
index 6a982700c7..84fa62a474 100644
--- a/src/plugins/muc-views/modals/templates/add-muc.js
+++ b/src/plugins/muc-views/modals/templates/add-muc.js
@@ -9,12 +9,12 @@ const nickname_input = () => {
     const i18n_nickname = __('Nickname');
     const i18n_required_field = __('This field is required');
     return html`
-        <div>
+        <div class="mb-3">
             <label for="nickname" class="form-label">${i18n_nickname}:</label>
             <input
                 type="text"
                 title="${i18n_required_field}"
-                required="required"
+                required
                 name="nickname"
                 value="${_converse.exports.getDefaultMUCNickname() || ''}"
                 class="form-control"
@@ -28,50 +28,49 @@ const nickname_input = () => {
  */
 export default (el) => {
     const i18n_join = __('Join');
-    const muc_domain = el.model.get('muc_domain') || api.settings.get('muc_domain');
+    const muc_domain = api.settings.get('muc_domain');
 
     let placeholder = '';
-    if (!api.settings.get('locked_muc_domain')) {
+    let label_name;
+    if (api.settings.get('locked_muc_domain')) {
+        label_name = __('Groupchat name');
+    } else {
         placeholder = muc_domain ? `name@${muc_domain}` : __('name@conference.example.org');
+        label_name = __('Groupchat name or address');
     }
 
-    const label_room_address = muc_domain ? __('Groupchat name') : __('Groupchat address');
-    const muc_roomid_policy_error_msg = el.muc_roomid_policy_error_msg;
-    const muc_roomid_policy_hint = api.settings.get('muc_roomid_policy_hint');
+    const policy_hint = api.settings.get('muc_roomid_policy_hint');
     const muc_search_service = api.settings.get('muc_search_service');
-    return html`
-        <form class="converse-form add-chatroom" @submit=${(ev) => el.openChatRoom(ev)}>
-            <div>
-                <label for="chatroom" class="form-label">${label_room_address}:</label>
-                ${muc_roomid_policy_error_msg
-                    ? html`<label class="form-label roomid-policy-error">${muc_roomid_policy_error_msg}</label>`
-                    : ''}
+
+    return html` <form
+        class="converse-form add-chatroom needs-validation"
+        @submit=${(ev) => el.openChatRoom(ev)}
+        novalidate
+    >
+        <div class="mb-3">
+            <label for="chatroom" class="form-label">${label_name}:</label>
+            <div class="input-group">
                 ${muc_search_service
                     ? html` <converse-autocomplete
-                          .getAutoCompleteList=${getAutoCompleteList}
-                          ?autofocus=${true}
-                          min_chars="3"
-                          position="below"
-                          placeholder="${placeholder}"
+                          .getAutoCompleteList="${getAutoCompleteList}"
+                          .validate="${/** @param {string} v */ (v) => el.validateMUCJID(v)}"
+                          ?autofocus="${true}"
                           class="add-muc-autocomplete"
+                          min_chars="3"
                           name="chatroom"
-                      >
-                      </converse-autocomplete>`
+                          placeholder="${placeholder}"
+                          position="below"
+                          required
+                      ></converse-autocomplete>`
                     : ''}
             </div>
-            ${muc_roomid_policy_hint
-                ? html`<div>
-                      ${unsafeHTML(DOMPurify.sanitize(muc_roomid_policy_hint, { 'ALLOWED_TAGS': ['b', 'br', 'em'] }))}
+            ${policy_hint
+                ? html`<div class="mb-3">
+                      ${unsafeHTML(DOMPurify.sanitize(policy_hint, { 'ALLOWED_TAGS': ['b', 'br', 'em'] }))}
                   </div>`
                 : ''}
-            ${!api.settings.get('locked_muc_nickname') ? nickname_input() : ''}
-            <input
-                type="submit"
-                class="btn btn-primary"
-                name="join"
-                value="${i18n_join || ''}"
-                ?disabled="${muc_roomid_policy_error_msg}"
-            />
-        </form>
-    `;
+        </div>
+        ${!api.settings.get('locked_muc_nickname') ? nickname_input() : ''}
+        <input type="submit" class="btn btn-primary mt-3" name="join" value="${i18n_join || ''}" />
+    </form>`;
 };
diff --git a/src/plugins/muc-views/styles/add-muc-modal.scss b/src/plugins/muc-views/styles/add-muc-modal.scss
index 4e8e55004a..557fd97d5e 100644
--- a/src/plugins/muc-views/styles/add-muc-modal.scss
+++ b/src/plugins/muc-views/styles/add-muc-modal.scss
@@ -1,6 +1,7 @@
 converse-add-muc-modal {
     .add-chatroom {
         converse-autocomplete {
+            width: 100%;
             .suggestion-box__results--below {
                 height: 10em;
                 overflow: auto;
diff --git a/src/plugins/muc-views/tests/muc-add-modal.js b/src/plugins/muc-views/tests/muc-add-modal.js
index f2b74876b4..694c4cafcf 100644
--- a/src/plugins/muc-views/tests/muc-add-modal.js
+++ b/src/plugins/muc-views/tests/muc-add-modal.js
@@ -1,22 +1,15 @@
 /*global mock, converse */
-
 const {  Promise, sizzle, u } = converse.env;
 
+
 describe('The "Groupchats" Add modal', function () {
 
     it('can be opened from a link in the "Groupchats" section of the controlbox',
         mock.initConverse(['chatBoxesFetched'], {}, async function (_converse) {
-            await mock.openControlBox(_converse);
-            await mock.waitForRoster(_converse, 'current', 0);
-
-            const roomspanel = _converse.chatboxviews.get('controlbox').querySelector('converse-rooms-list');
-            roomspanel.querySelector('.show-add-muc-modal').click();
-            mock.closeControlBox(_converse);
-            const modal = _converse.api.modal.get('converse-add-muc-modal');
-            await u.waitUntil(() => u.isVisible(modal), 1000);
+            const modal = await mock.openAddMUCModal(_converse);
 
             let label_name = modal.querySelector('label[for="chatroom"]');
-            expect(label_name.textContent.trim()).toBe('Groupchat address:');
+            expect(label_name.textContent.trim()).toBe('Groupchat name or address:');
             const name_input = modal.querySelector('input[name="chatroom"]');
             expect(name_input.placeholder).toBe('name@conference.example.org');
 
@@ -32,26 +25,17 @@ describe('The "Groupchats" Add modal', function () {
             modal.querySelector('form input[type="submit"]').click();
             await u.waitUntil(() => _converse.chatboxes.length);
             await u.waitUntil(() => sizzle('.chatroom', _converse.el).filter(u.isVisible).length === 1);
-
-            roomspanel.model.set('muc_domain', 'muc.example.org');
-            roomspanel.querySelector('.show-add-muc-modal').click();
-            label_name = modal.querySelector('label[for="chatroom"]');
-            expect(label_name.textContent.trim()).toBe('Groupchat name:');
-            await u.waitUntil(() => modal.querySelector('input[name="chatroom"]')?.placeholder === 'name@muc.example.org');
         })
     );
 
     it("doesn't require the domain when muc_domain is set",
         mock.initConverse(['chatBoxesFetched'], { 'muc_domain': 'muc.example.org' }, async function (_converse) {
-            await mock.openControlBox(_converse);
-            const roomspanel = _converse.chatboxviews.get('controlbox').querySelector('converse-rooms-list');
-            roomspanel.querySelector('.show-add-muc-modal').click();
-            const modal = _converse.api.modal.get('converse-add-muc-modal');
-            await u.waitUntil(() => u.isVisible(modal), 1000);
+            const modal = await mock.openAddMUCModal(_converse);
+
             expect(modal.querySelector('.modal-title').textContent.trim()).toBe('Enter a new Groupchat');
             spyOn(_converse.ChatRoom.prototype, 'getDiscoInfo').and.callFake(() => Promise.resolve());
             const label_name = modal.querySelector('label[for="chatroom"]');
-            expect(label_name.textContent.trim()).toBe('Groupchat name:');
+            expect(label_name.textContent.trim()).toBe('Groupchat name or address:');
             let name_input = modal.querySelector('input[name="chatroom"]');
             expect(name_input.placeholder).toBe('name@muc.example.org');
             name_input.value = 'lounge';
@@ -64,6 +48,7 @@ describe('The "Groupchats" Add modal', function () {
             expect(_converse.chatboxes.models.map(m => m.get('id')).includes('lounge@muc.example.org')).toBe(true);
 
             // However, you can still open MUCs with different domains
+            const roomspanel = _converse.chatboxviews.get('controlbox').querySelector('converse-rooms-list');
             roomspanel.querySelector('.show-add-muc-modal').click();
             await u.waitUntil(() => u.isVisible(modal), 1000);
             name_input = modal.querySelector('input[name="chatroom"]');
@@ -79,46 +64,117 @@ describe('The "Groupchats" Add modal', function () {
         })
     );
 
-    it('only uses the muc_domain is locked_muc_domain is true',
-        mock.initConverse(
-            ['chatBoxesFetched'],
-            { 'muc_domain': 'muc.example.org', 'locked_muc_domain': true },
-            async function (_converse) {
-                await mock.openControlBox(_converse);
-                const roomspanel = _converse.chatboxviews.get('controlbox').querySelector('converse-rooms-list');
-                roomspanel.querySelector('.show-add-muc-modal').click();
-                const modal = _converse.api.modal.get('converse-add-muc-modal');
-                await u.waitUntil(() => u.isVisible(modal), 1000);
-                expect(modal.querySelector('.modal-title').textContent.trim()).toBe('Enter a new Groupchat');
-                spyOn(_converse.ChatRoom.prototype, 'getDiscoInfo').and.callFake(() => Promise.resolve());
-                const label_name = modal.querySelector('label[for="chatroom"]');
-                expect(label_name.textContent.trim()).toBe('Groupchat name:');
-                let name_input = modal.querySelector('input[name="chatroom"]');
-                expect(name_input.placeholder).toBe('');
-                name_input.value = 'lounge';
-                let nick_input = modal.querySelector('input[name="nickname"]');
-                nick_input.value = 'max';
-                modal.querySelector('form input[type="submit"]').click();
-                await u.waitUntil(() => _converse.chatboxes.length);
-                await u.waitUntil(() => sizzle('.chatroom', _converse.el).filter(u.isVisible).length === 1);
-                expect(_converse.chatboxes.models.map(m => m.get('id')).includes('lounge@muc.example.org')).toBe(true);
-
-                // However, you can still open MUCs with different domains
-                roomspanel.querySelector('.show-add-muc-modal').click();
-                await u.waitUntil(() => u.isVisible(modal), 1000);
-                name_input = modal.querySelector('input[name="chatroom"]');
-                name_input.value = 'lounge@conference';
-                nick_input = modal.querySelector('input[name="nickname"]');
-                nick_input.value = 'max';
-                modal.querySelector('form input[type="submit"]').click();
-                await u.waitUntil(
-                    () => _converse.chatboxes.models.filter(c => c.get('type') === 'chatroom').length === 2
-                );
-                await u.waitUntil(() => sizzle('.chatroom', _converse.el).filter(u.isVisible).length === 2);
-                expect(
-                    _converse.chatboxes.models.map(m => m.get('id')).includes('lounge\\40conference@muc.example.org')
-                ).toBe(true);
-            }
-        )
+    it('only uses the muc_domain if locked_muc_domain is true', mock.initConverse(
+        ['chatBoxesFetched'], { muc_domain: 'muc.example.org', locked_muc_domain: true },
+        async function (_converse) {
+            const modal = await mock.openAddMUCModal(_converse);
+
+            expect(modal.querySelector('.modal-title').textContent.trim()).toBe('Enter a new Groupchat');
+            spyOn(_converse.ChatRoom.prototype, 'getDiscoInfo').and.callFake(() => Promise.resolve());
+            const label_name = modal.querySelector('label[for="chatroom"]');
+            expect(label_name.textContent.trim()).toBe('Groupchat name:');
+            let name_input = modal.querySelector('input[name="chatroom"]');
+            expect(name_input.placeholder).toBe('');
+            name_input.value = 'lounge';
+            let nick_input = modal.querySelector('input[name="nickname"]');
+            nick_input.value = 'max';
+            modal.querySelector('form input[type="submit"]').click();
+            await u.waitUntil(() => _converse.chatboxes.length);
+            await u.waitUntil(() => sizzle('.chatroom', _converse.el).filter(u.isVisible).length === 1);
+            expect(_converse.chatboxes.models.map(m => m.get('id')).includes('lounge@muc.example.org')).toBe(true);
+
+            // However, you can still open MUCs with different domains
+            const roomspanel = _converse.chatboxviews.get('controlbox').querySelector('converse-rooms-list');
+            roomspanel.querySelector('.show-add-muc-modal').click();
+            await u.waitUntil(() => u.isVisible(modal), 1000);
+            name_input = modal.querySelector('input[name="chatroom"]');
+            name_input.value = 'lounge@conference';
+            nick_input = modal.querySelector('input[name="nickname"]');
+            nick_input.value = 'max';
+            modal.querySelector('form input[type="submit"]').click();
+            await u.waitUntil(
+                () => _converse.chatboxes.models.filter(c => c.get('type') === 'chatroom').length === 2
+            );
+            await u.waitUntil(() => sizzle('.chatroom', _converse.el).filter(u.isVisible).length === 2);
+            expect(
+                _converse.chatboxes.models.map(m => m.get('id')).includes('lounge-conference@muc.example.org')
+            ).toBe(true);
+        })
+    );
+
+    fit("lets you create a MUC with only the name",
+        mock.initConverse(['chatBoxesFetched'], {}, async function (_converse) {
+            const { domain } = _converse;
+            await mock.waitUntilDiscoConfirmed(
+                _converse,
+                domain,
+                [{ category: 'server', type: 'IM' }],
+                [Strophe.NS.DISCO_ITEMS],
+            );
+
+            const modal = await mock.openAddMUCModal(_converse);
+            spyOn(_converse.ChatRoom.prototype, 'getDiscoInfo').and.callFake(() => Promise.resolve());
+
+            const name_input = modal.querySelector('input[name="chatroom"]');
+            name_input.value = 'The Lounge';
+
+            const nick_input = modal.querySelector('input[name="nickname"]');
+            nick_input.value = 'max';
+
+            modal.querySelector('form input[type="submit"]').click();
+
+            await mock.waitUntilDiscoConfirmed(_converse, domain, [], [], ['muc.example.org'], 'items');
+            await mock.waitUntilDiscoConfirmed(_converse, 'muc.example.org', [], [Strophe.NS.MUC]);
+
+            await u.waitUntil(() => sizzle('.chatroom', _converse.el).filter(u.isVisible).length === 1);
+            expect(_converse.chatboxes.models.map(m => m.get('id')).includes('the-lounge@muc.example.org')).toBe(true);
+
+            const muc = _converse.chatboxes.get('the-lounge@muc.example.org');
+            expect(muc.get('name')).toBe('The Lounge');
+        })
+    );
+
+    it("normalizes the MUC name when creating the corresponding JID",
+        mock.initConverse(['chatBoxesFetched'], {muc_domain: 'montague.lit'}, async function (_converse) {
+            const modal = await mock.openAddMUCModal(_converse);
+            spyOn(_converse.ChatRoom.prototype, 'getDiscoInfo').and.callFake(() => Promise.resolve());
+
+            const name_input = modal.querySelector('input[name="chatroom"]');
+            name_input.value = 'Into the Äther: A Journey';
+
+            const nick_input = modal.querySelector('input[name="nickname"]');
+            nick_input.value = 'max';
+
+            modal.querySelector('form input[type="submit"]').click();
+
+            await u.waitUntil(() => sizzle('.chatroom', _converse.el).filter(u.isVisible).length === 1);
+            expect(_converse.chatboxes.models.map(m => m.get('id')).includes('into-the-ather-a-journey@montague.lit')).toBe(true);
+
+            expect(modal.normalizeNode('Into the Äther: A Journey')).toBe('into-the-ather-a-journey');
+            expect(modal.normalizeNode(' A silly summer song ∷ ')).toBe('a-silly-summer-song');
+        })
+    );
+
+    it("applies a muc_roomid_policy",
+        mock.initConverse(['chatBoxesFetched'], {
+            muc_domain: 'montague.lit',
+            muc_roomid_policy: /^[a-z0-9._-]{5,40}$/,
+            muc_roomid_policy_hint: '<br><b>Policy for groupchat id:</b><br>- between 5 and 40 characters,<br>- lowercase from a to z (no special characters) or<br>- digits or<br>- dots (.) or<br>- underlines (_) or<br>- hyphens (-),<br>- no spaces<br>',
+        }, async function (_converse) {
+            const modal = await mock.openAddMUCModal(_converse);
+
+            spyOn(_converse.ChatRoom.prototype, 'getDiscoInfo').and.callFake(() => Promise.resolve());
+            const name_input = modal.querySelector('input[name="chatroom"]');
+            name_input.value = 'lounge\ music@montague.lit';
+
+            const nick_input = modal.querySelector('input[name="nickname"]');
+            nick_input.value = 'max';
+
+            modal.querySelector('form input[type="submit"]').click();
+
+            await u.waitUntil(() => name_input.classList.contains('error'));
+            expect(name_input.classList.contains('is-invalid')).toBe(true);
+            expect(modal.querySelector('.invalid-feedback')?.textContent).toBe('Groupchat id is invalid.');
+        })
     );
 });
diff --git a/src/plugins/muc-views/tests/muc.js b/src/plugins/muc-views/tests/muc.js
index ebb8bf8a3d..a8410170ed 100644
--- a/src/plugins/muc-views/tests/muc.js
+++ b/src/plugins/muc-views/tests/muc.js
@@ -2287,7 +2287,7 @@ describe("Groupchats", function () {
         it("will show an error message if the groupchat requires a password",
                 mock.initConverse(['chatBoxesFetched'], {}, async function (_converse) {
 
-            const muc_jid = 'protected';
+            const muc_jid = 'protected@montague.lit';
             await mock.openChatRoomViaModal(_converse, muc_jid, 'romeo');
             const view = _converse.chatboxviews.get(muc_jid);
 
diff --git a/src/plugins/roomslist/model.js b/src/plugins/roomslist/model.js
index 1104ad516e..033b2bab3c 100644
--- a/src/plugins/roomslist/model.js
+++ b/src/plugins/roomslist/model.js
@@ -8,9 +8,9 @@ class RoomsListModel extends Model {
 
     defaults () {
         return {
-            'muc_domain': api.settings.get('muc_domain'),
-            'toggle_state':  OPENED,
-            'collapsed_domains': [],
+            muc_domain: api.settings.get('muc_domain'),
+            toggle_state:  OPENED,
+            collapsed_domains: [],
         };
     }
 
diff --git a/src/plugins/roomslist/templates/roomslist.js b/src/plugins/roomslist/templates/roomslist.js
index 62a5b684e3..5647c5a5ab 100644
--- a/src/plugins/roomslist/templates/roomslist.js
+++ b/src/plugins/roomslist/templates/roomslist.js
@@ -136,11 +136,12 @@ export default (el) => {
     const is_closed = el.model.get('toggle_state') === CLOSED;
 
     const btns = [
-        html`<a class="dropdown-item show-bookmark-list-modal" role="button"
-                @click="${(ev) => api.modal.show('converse-bookmark-list-modal', { 'model': el.model }, ev)}"
-                data-toggle="modal">
-                    <converse-icon class="fa fa-bookmark" size="1em"></converse-icon>
-                    ${i18n_show_bookmarks}
+        html`<a class="dropdown-item show-add-muc-modal" role="button"
+                @click="${(ev) => api.modal.show('converse-add-muc-modal', { 'model': el.model }, ev)}"
+                data-toggle="modal"
+                data-target="#add-chatrooms-modal">
+                    <converse-icon class="fa fa-plus" size="1em"></converse-icon>
+                    ${i18n_title_new_room}
         </a>`,
         html`<a class="dropdown-item show-list-muc-modal" role="button"
                 @click="${(ev) => api.modal.show('converse-muc-list-modal', { 'model': el.model }, ev)}"
@@ -149,12 +150,11 @@ export default (el) => {
                     <converse-icon class="fa fa-list-ul" size="1em"></converse-icon>
                     ${i18n_title_list_rooms}
         </a>`,
-        html`<a class="dropdown-item show-add-muc-modal" role="button"
-                @click="${(ev) => api.modal.show('converse-add-muc-modal', { 'model': el.model }, ev)}"
-                data-toggle="modal"
-                data-target="#add-chatrooms-modal">
-                    <converse-icon class="fa fa-plus" size="1em"></converse-icon>
-                    ${i18n_title_new_room}
+        html`<a class="dropdown-item show-bookmark-list-modal" role="button"
+                @click="${(ev) => api.modal.show('converse-bookmark-list-modal', { 'model': el.model }, ev)}"
+                data-toggle="modal">
+                    <converse-icon class="fa fa-bookmark" size="1em"></converse-icon>
+                    ${i18n_show_bookmarks}
         </a>`,
     ];
 
diff --git a/src/shared/autocomplete/component.js b/src/shared/autocomplete/component.js
index 2fb6360a02..2a21bfc945 100644
--- a/src/shared/autocomplete/component.js
+++ b/src/shared/autocomplete/component.js
@@ -3,37 +3,41 @@ import { CustomElement } from 'shared/components/element.js';
 import { FILTER_CONTAINS, FILTER_STARTSWITH } from './utils.js';
 import { api } from '@converse/headless';
 import { html } from 'lit';
+import {ancestor} from 'utils/html.js';
 
 /**
  * A custom element that can be used to add auto-completion suggestions to a form input.
  * @class AutoCompleteComponent
  *
- * @property { "above" | "below" } [position="above"]
+ * @property {"above" | "below"} [position="above"]
  *  Should the autocomplete list show above or below the input element?
- * @property { Boolean } [autofocus=false]
+ * @property {Boolean} [autofocus=false]
  *  Should the `focus` attribute be set on the input element?
- * @property { Function } getAutoCompleteList
+ * @property {Function} getAutoCompleteList
  *  A function that returns the list of autocomplete suggestions
- * @property { Function } data
+ * @property {Function} data
  *  A function that maps the returned matches into the correct format
- * @property { Array } list
+ * @property {Array} list
  *  An array of suggestions, to be used instead of the `getAutoCompleteList` *  function
- * @property { Boolean } [auto_evaluate=true]
+ * @property {Boolean} [auto_evaluate=true]
  *  Should evaluation happen automatically without any particular key as trigger?
- * @property { Boolean } [auto_first=false]
+ * @property {Boolean} [auto_first=false]
  *  Should the first element automatically be selected?
  * @property { "contains" | "startswith" } [filter="contains"]
  *  Provide matches which contain the entered text, or which starts with the entered text
- * @property { String } [include_triggers=""]
+ * @property {String} [include_triggers=""]
  *  Space separated characters which should be included in the returned value
- * @property { Number } [min_chars=1]
+ * @property {Number} [min_chars=1]
  *  The minimum number of characters to be entered into the input before autocomplete starts.
- * @property { String } [name]
+ * @property {String} [name]
  *  The `name` attribute of the `input` element
- * @property { String } [placeholder]
+ * @property {String} [placeholder]
  *  The `placeholder` attribute of the `input` element
- * @property { String } [triggers]
+ * @property {String} [triggers]
  *  String of space separated characters which trigger autocomplete
+ * @property {Function} [validate]
+ *  A validation function that returns a string containing a validation error
+ *  message in case the validation failed.
  *
  * @example
  *     <converse-autocomplete
@@ -45,42 +49,46 @@ import { html } from 'lit';
 export default class AutoCompleteComponent extends CustomElement {
     static get properties () {
         return {
-            'position': { type: String },
-            'autofocus': { type: Boolean },
-            'getAutoCompleteList': { type: Function },
-            'data': { type: Function },
-            'list': { type: Array },
-            'auto_evaluate': { type: Boolean },
-            'auto_first': { type: Boolean },
-            'filter': { type: String },
-            'include_triggers': { type: String },
-            'min_chars': { type: Number },
-            'name': { type: String },
-            'placeholder': { type: String },
-            'value': { type: String },
-            'triggers': { type: String },
-            'required': { type: Boolean },
+            auto_evaluate: { type: Boolean },
+            auto_first: { type: Boolean },
+            autofocus: { type: Boolean },
+            data: { type: Function },
+            error_message: { type: String },
+            filter: { type: String },
+            getAutoCompleteList: { type: Function },
+            include_triggers: { type: String },
+            list: { type: Array },
+            min_chars: { type: Number },
+            name: { type: String },
+            placeholder: { type: String },
+            position: { type: String },
+            required: { type: Boolean },
+            triggers: { type: String },
+            validate: { type: Function },
+            value: { type: String },
         };
     }
 
     constructor () {
         super();
-        this.data = (a) => a;
-        this.value = '';
-        this.position = 'above';
         this.auto_evaluate = true;
         this.auto_first = false;
+        this.data = (a) => a;
+        this.error_message = '';
         this.filter = 'contains';
+        this.getAutoCompleteList = null;
         this.include_triggers = '';
+        this.list = null;
         this.match_current_word = false; // Match only the current word, otherwise all input is matched
         this.max_items = 10;
         this.min_chars = 1;
-        this.triggers = '';
-        this.getAutoCompleteList = null;
-        this.list = null;
         this.name = '';
         this.placeholder = '';
+        this.position = 'above';
         this.required = false;
+        this.triggers = '';
+        this.validate = null;
+        this.value = '';
     }
 
     render () {
@@ -89,16 +97,18 @@ export default class AutoCompleteComponent extends CustomElement {
             <div class="suggestion-box suggestion-box__name">
                 <ul class="suggestion-box__results ${position_class}" hidden=""></ul>
                 <input
+                    .validate=${this.validate}
                     ?autofocus=${this.autofocus}
                     ?required=${this.required}
-                    type="text"
-                    name="${this.name}"
-                    autocomplete="off"
+                    @change=${this.onChange}
                     @keydown=${this.onKeyDown}
                     @keyup=${this.onKeyUp}
-                    class="form-control suggestion-box__input"
-                    value="${this.value}"
+                    autocomplete="off"
+                    class="form-control suggestion-box__input ${this.error_message ? 'is-invalid error' : ''}"
+                    name="${this.name}"
                     placeholder="${this.placeholder}"
+                    type="text"
+                    value="${this.value}"
                 />
                 <span
                     class="suggestion-box__additions visually-hidden"
@@ -107,6 +117,7 @@ export default class AutoCompleteComponent extends CustomElement {
                     aria-relevant="additions"
                 ></span>
             </div>
+            ${this.error_message ? html`<div class="invalid-feedback">${this.error_message}</div>` : ''}
         `;
     }
 
@@ -126,13 +137,22 @@ export default class AutoCompleteComponent extends CustomElement {
         this.auto_complete.on('suggestion-box-selectcomplete', () => (this.auto_completing = false));
     }
 
+    /** @param {KeyboardEvent} ev */
     onKeyDown (ev) {
         this.auto_complete.onKeyDown(ev);
     }
 
+    /** @param {KeyboardEvent} ev */
     onKeyUp (ev) {
         this.auto_complete.evaluate(ev);
     }
+
+    onChange() {
+        const input = this.querySelector('input');
+        this.error_message = this.validate?.(input.value);
+        if (this.error_message) this.requestUpdate();
+        return this;
+    }
 }
 
 api.elements.define('converse-autocomplete', AutoCompleteComponent);
diff --git a/src/shared/chat/utils.js b/src/shared/chat/utils.js
index af3822a2da..194b0884b6 100644
--- a/src/shared/chat/utils.js
+++ b/src/shared/chat/utils.js
@@ -287,5 +287,4 @@ export function shortnamesToEmojis (str, options={unicode_only: false, add_title
     return addEmojisMarkup(str, options);
 }
 
-
 Object.assign(u, { shortnamesToEmojis });
diff --git a/src/shared/styles/forms.scss b/src/shared/styles/forms.scss
index 034d16268c..3d03405b48 100644
--- a/src/shared/styles/forms.scss
+++ b/src/shared/styles/forms.scss
@@ -5,6 +5,11 @@
     }
 
     form {
+
+        .invalid-feedback {
+            display: block;
+        }
+
         .form-instructions {
             color: var(--text-color);
             margin-bottom: 1em;
@@ -95,10 +100,13 @@
             input[type=text] {
                 min-width: 50%;
             }
+
+            input.is_invalid,
             input.error {
-                border: 1px solid var(--error-color);
                 color: var(--text-color);
+                border-color: var(--error-color);
             }
+
             .text-muted {
                 color: var(--secondary-color) !important;
                 font-size: 85%;
diff --git a/src/shared/tests/mock.js b/src/shared/tests/mock.js
index aea092e11f..b43c01e2c0 100644
--- a/src/shared/tests/mock.js
+++ b/src/shared/tests/mock.js
@@ -387,6 +387,15 @@ async function receiveOwnMUCPresence (_converse, muc_jid, nick, affiliation='own
     _converse.api.connection.get()._dataRecv(createRequest(presence));
 }
 
+async function openAddMUCModal (_converse) {
+    await mock.openControlBox(_converse);
+    const controlbox = _converse.chatboxviews.get('controlbox');
+    controlbox.querySelector('converse-rooms-list .show-add-muc-modal').click();
+    const modal = _converse.api.modal.get('converse-add-muc-modal');
+    await u.waitUntil(() => u.isVisible(modal), 1000);
+    return modal;
+}
+
 async function openAndEnterChatRoom (
         _converse,
         muc_jid,
@@ -877,6 +886,7 @@ Object.assign(mock, {
     initConverse,
     initializedOMEMO,
     num_contacts,
+    openAddMUCModal,
     openAndEnterChatRoom,
     openChatBoxFor,
     openChatBoxes,
diff --git a/src/types/plugins/muc-views/modals/add-muc.d.ts b/src/types/plugins/muc-views/modals/add-muc.d.ts
index c86e50905f..8ec3d06557 100644
--- a/src/types/plugins/muc-views/modals/add-muc.d.ts
+++ b/src/types/plugins/muc-views/modals/add-muc.d.ts
@@ -1,13 +1,31 @@
 export default class AddMUCModal extends BaseModal {
-    muc_roomid_policy_error_msg: any;
     renderModal(): import("lit").TemplateResult<1>;
     getModalTitle(): any;
-    parseRoomDataFromEvent(form: any): {
+    /**
+     * @param {HTMLFormElement} form
+     * @returns {{ jid: string, nick: string }}
+     */
+    parseRoomDataFromEvent(form: HTMLFormElement): {
         jid: string;
-        nick: any;
+        nick: string;
     };
-    openChatRoom(ev: any): void;
-    checkRoomidPolicy(): boolean;
+    /**
+     * Takes a string and returns a normalized lowercase value representing the node (localpart) of a MUC JID.
+     * Replaces all spaces with dashes, replaces diacritics with ASCII, and
+     * removes all characters besides letters and numbers and dashes.
+     * @param {string} s
+     * @returns {string}
+     */
+    normalizeNode(s: string): string;
+    /**
+     * @param {Event} ev
+     */
+    openChatRoom(ev: Event): Promise<void>;
+    /**
+     * @param {string} jid
+     * @return {string}
+     */
+    validateMUCJID(jid: string): string;
 }
 import BaseModal from 'plugins/modal/modal.js';
 //# sourceMappingURL=add-muc.d.ts.map
\ No newline at end of file
diff --git a/src/types/shared/autocomplete/component.d.ts b/src/types/shared/autocomplete/component.d.ts
index af1df16656..1a677a9cd2 100644
--- a/src/types/shared/autocomplete/component.d.ts
+++ b/src/types/shared/autocomplete/component.d.ts
@@ -2,32 +2,35 @@
  * A custom element that can be used to add auto-completion suggestions to a form input.
  * @class AutoCompleteComponent
  *
- * @property { "above" | "below" } [position="above"]
+ * @property {"above" | "below"} [position="above"]
  *  Should the autocomplete list show above or below the input element?
- * @property { Boolean } [autofocus=false]
+ * @property {Boolean} [autofocus=false]
  *  Should the `focus` attribute be set on the input element?
- * @property { Function } getAutoCompleteList
+ * @property {Function} getAutoCompleteList
  *  A function that returns the list of autocomplete suggestions
- * @property { Function } data
+ * @property {Function} data
  *  A function that maps the returned matches into the correct format
- * @property { Array } list
+ * @property {Array} list
  *  An array of suggestions, to be used instead of the `getAutoCompleteList` *  function
- * @property { Boolean } [auto_evaluate=true]
+ * @property {Boolean} [auto_evaluate=true]
  *  Should evaluation happen automatically without any particular key as trigger?
- * @property { Boolean } [auto_first=false]
+ * @property {Boolean} [auto_first=false]
  *  Should the first element automatically be selected?
  * @property { "contains" | "startswith" } [filter="contains"]
  *  Provide matches which contain the entered text, or which starts with the entered text
- * @property { String } [include_triggers=""]
+ * @property {String} [include_triggers=""]
  *  Space separated characters which should be included in the returned value
- * @property { Number } [min_chars=1]
+ * @property {Number} [min_chars=1]
  *  The minimum number of characters to be entered into the input before autocomplete starts.
- * @property { String } [name]
+ * @property {String} [name]
  *  The `name` attribute of the `input` element
- * @property { String } [placeholder]
+ * @property {String} [placeholder]
  *  The `placeholder` attribute of the `input` element
- * @property { String } [triggers]
+ * @property {String} [triggers]
  *  String of space separated characters which trigger autocomplete
+ * @property {Function} [validate]
+ *  A validation function that returns a string containing a validation error
+ *  message in case the validation failed.
  *
  * @example
  *     <converse-autocomplete
@@ -38,33 +41,33 @@
  */
 export default class AutoCompleteComponent extends CustomElement {
     static get properties(): {
-        position: {
-            type: StringConstructor;
+        auto_evaluate: {
+            type: BooleanConstructor;
         };
-        autofocus: {
+        auto_first: {
             type: BooleanConstructor;
         };
-        getAutoCompleteList: {
-            type: FunctionConstructor;
+        autofocus: {
+            type: BooleanConstructor;
         };
         data: {
             type: FunctionConstructor;
         };
-        list: {
-            type: ArrayConstructor;
-        };
-        auto_evaluate: {
-            type: BooleanConstructor;
-        };
-        auto_first: {
-            type: BooleanConstructor;
+        error_message: {
+            type: StringConstructor;
         };
         filter: {
             type: StringConstructor;
         };
+        getAutoCompleteList: {
+            type: FunctionConstructor;
+        };
         include_triggers: {
             type: StringConstructor;
         };
+        list: {
+            type: ArrayConstructor;
+        };
         min_chars: {
             type: NumberConstructor;
         };
@@ -74,38 +77,49 @@ export default class AutoCompleteComponent extends CustomElement {
         placeholder: {
             type: StringConstructor;
         };
-        value: {
+        position: {
             type: StringConstructor;
         };
+        required: {
+            type: BooleanConstructor;
+        };
         triggers: {
             type: StringConstructor;
         };
-        required: {
-            type: BooleanConstructor;
+        validate: {
+            type: FunctionConstructor;
+        };
+        value: {
+            type: StringConstructor;
         };
     };
-    data: (a: any) => any;
-    value: string;
-    position: string;
     auto_evaluate: boolean;
     auto_first: boolean;
+    data: (a: any) => any;
+    error_message: string;
     filter: string;
+    getAutoCompleteList: any;
     include_triggers: string;
+    list: any;
     match_current_word: boolean;
     max_items: number;
     min_chars: number;
-    triggers: string;
-    getAutoCompleteList: any;
-    list: any;
     name: string;
     placeholder: string;
+    position: string;
     required: boolean;
+    triggers: string;
+    validate: any;
+    value: string;
     render(): import("lit").TemplateResult<1>;
     firstUpdated(): void;
     auto_complete: AutoComplete;
     auto_completing: boolean;
-    onKeyDown(ev: any): void;
-    onKeyUp(ev: any): void;
+    /** @param {KeyboardEvent} ev */
+    onKeyDown(ev: KeyboardEvent): void;
+    /** @param {KeyboardEvent} ev */
+    onKeyUp(ev: KeyboardEvent): void;
+    onChange(): this;
 }
 import { CustomElement } from 'shared/components/element.js';
 import AutoComplete from './autocomplete.js';

From a3f4a61e65b0811e39142e825208e75a3b4084b4 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Wed, 12 Feb 2025 11:05:49 +0200
Subject: [PATCH 5/6] Set MUC name in roomconfig when only a name was provided
 in the Add MUC modal.

---
 src/headless/plugins/muc/muc.js              |  2 +-
 src/plugins/muc-views/modals/add-muc.js      |  4 +
 src/plugins/muc-views/tests/muc-add-modal.js | 82 +++++++++++++++++++-
 3 files changed, 84 insertions(+), 4 deletions(-)

diff --git a/src/headless/plugins/muc/muc.js b/src/headless/plugins/muc/muc.js
index ab2c68cea9..bebd1a464e 100644
--- a/src/headless/plugins/muc/muc.js
+++ b/src/headless/plugins/muc/muc.js
@@ -1221,7 +1221,7 @@ class MUC extends ModelWithMessages(ColorAwareModel(ChatBoxBase)) {
     getDiscoInfo () {
         return api.disco
             .getIdentity('conference', 'text', this.get('jid'))
-            .then((identity) => this.save({ 'name': identity?.get('name') }))
+            .then((identity) => this.save({ name: identity?.get('name') }))
             .then(() => this.getDiscoInfoFields())
             .then(() => this.getDiscoInfoFeatures())
             .catch((e) => log.error(e));
diff --git a/src/plugins/muc-views/modals/add-muc.js b/src/plugins/muc-views/modals/add-muc.js
index c7735522ed..ee684aa4a0 100644
--- a/src/plugins/muc-views/modals/add-muc.js
+++ b/src/plugins/muc-views/modals/add-muc.js
@@ -90,6 +90,10 @@ export default class AddMUCModal extends BaseModal {
             const muc_service = await u.muc.getDefaultMUCService();
             if (muc_service) {
                 settings.name = data.jid;
+                settings.auto_configure = true;
+                settings.roomconfig = {
+                    roomname: data.jid,
+                };
                 jid = `${this.normalizeNode(data.jid)}@${muc_service}`.toLowerCase();
             }
         }
diff --git a/src/plugins/muc-views/tests/muc-add-modal.js b/src/plugins/muc-views/tests/muc-add-modal.js
index 694c4cafcf..ba7c314bb6 100644
--- a/src/plugins/muc-views/tests/muc-add-modal.js
+++ b/src/plugins/muc-views/tests/muc-add-modal.js
@@ -4,6 +4,8 @@ const {  Promise, sizzle, u } = converse.env;
 
 describe('The "Groupchats" Add modal', function () {
 
+    beforeAll(() => jasmine.addMatchers({ toEqualStanza: jasmine.toEqualStanza }));
+
     it('can be opened from a link in the "Groupchats" section of the controlbox',
         mock.initConverse(['chatBoxesFetched'], {}, async function (_converse) {
             const modal = await mock.openAddMUCModal(_converse);
@@ -112,6 +114,10 @@ describe('The "Groupchats" Add modal', function () {
                 [Strophe.NS.DISCO_ITEMS],
             );
 
+            const nick = 'max';
+            const muc_jid = 'the-lounge@muc.example.org';
+            const own_jid = _converse.session.get('jid');
+
             const modal = await mock.openAddMUCModal(_converse);
             spyOn(_converse.ChatRoom.prototype, 'getDiscoInfo').and.callFake(() => Promise.resolve());
 
@@ -119,18 +125,88 @@ describe('The "Groupchats" Add modal', function () {
             name_input.value = 'The Lounge';
 
             const nick_input = modal.querySelector('input[name="nickname"]');
-            nick_input.value = 'max';
+            nick_input.value = nick;
 
             modal.querySelector('form input[type="submit"]').click();
 
             await mock.waitUntilDiscoConfirmed(_converse, domain, [], [], ['muc.example.org'], 'items');
             await mock.waitUntilDiscoConfirmed(_converse, 'muc.example.org', [], [Strophe.NS.MUC]);
 
+
             await u.waitUntil(() => sizzle('.chatroom', _converse.el).filter(u.isVisible).length === 1);
-            expect(_converse.chatboxes.models.map(m => m.get('id')).includes('the-lounge@muc.example.org')).toBe(true);
+            expect(_converse.chatboxes.models.map(m => m.get('id')).includes(muc_jid)).toBe(true);
 
-            const muc = _converse.chatboxes.get('the-lounge@muc.example.org');
+            const muc = _converse.chatboxes.get(muc_jid);
             expect(muc.get('name')).toBe('The Lounge');
+
+            await mock.getRoomFeatures(_converse, muc_jid);
+
+            // Own presence which states that the room is locked and needs to
+            // be configured (code 201)
+            const presence =
+                stx`<presence
+                        id="5025e055-036c-4bc5-a227-706e7e352053"
+                        to="${own_jid}"
+                        from="${muc_jid}/${nick}"
+                        xmlns="jabber:client">
+                    <x xmlns="http://jabber.org/protocol/muc#user">
+                        <item affiliation="owner" jid="${own_jid}" role="moderator"/>
+                        <status code="110"/>
+                        <status code="201"/>
+                    </x>
+                </presence>`;
+            _converse.api.connection.get()._dataRecv(mock.createRequest(presence));
+
+            const IQ_stanzas = _converse.api.connection.get().IQ_stanzas;
+            const iq = await u.waitUntil(() => IQ_stanzas.filter(s => s.querySelector(`query[xmlns="${Strophe.NS.MUC_OWNER}"]`)).pop());
+
+            spyOn(muc, 'sendConfiguration').and.callThrough();
+
+            expect(iq).toEqualStanza(stx`
+                <iq id="${iq.getAttribute('id')}" to="${muc_jid}" type="get" xmlns="jabber:client">
+                    <query xmlns="http://jabber.org/protocol/muc#owner"/>
+                </iq>`);
+
+            _converse.api.connection.get()._dataRecv(mock.createRequest(
+                stx`<iq xmlns="jabber:client"
+                    type="result"
+                    to="${own_jid}"
+                    from="${muc_jid}" id="${iq.getAttribute('id')}">
+                <query xmlns="http://jabber.org/protocol/muc#owner">
+                    <x xmlns="jabber:x:data" type="form">
+                    <title>Configuration for ${muc_jid}</title>
+                    <instructions>Complete and submit this form to configure the room.</instructions>
+                    <field var="FORM_TYPE" type="hidden">
+                        <value>http://jabber.org/protocol/muc#roomconfig</value>
+                    </field>
+                    <field type="text-single" var="muc#roomconfig_roomname" label="Name"><value></value></field>
+                    <field type="text-single" var="muc#roomconfig_roomdesc" label="Description"><value/></field>
+                    <field type="boolean" var="muc#roomconfig_persistentroom" label="Make Room Persistent?"/>
+                    <field type="boolean" var="muc#roomconfig_publicroom" label="Make Room Publicly Searchable?"><value>1</value></field>
+                    <field type="boolean" var="muc#roomconfig_changesubject" label="Allow Occupants to Change Subject?"/>
+                    <field type="list-single" var="muc#roomconfig_whois" label="Who May Discover Real JIDs?"><option label="Moderators Only">
+                       <value>moderators</value></option><option label="Anyone"><value>anyone</value></option>
+                    </field>
+                    <field label="Roles and Affiliations that May Retrieve Member List"
+                           type="list-multi"
+                           var="muc#roomconfig_getmemberlist">
+                        <value>moderator</value>
+                        <value>participant</value>
+                        <value>visitor</value>
+                    </field>
+                    <field type="text-private" var="muc#roomconfig_roomsecret" label="Password"><value/></field>
+                    <field type="boolean" var="muc#roomconfig_moderatedroom" label="Make Room Moderated?"/>
+                    <field type="boolean" var="muc#roomconfig_membersonly" label="Make Room Members-Only?"/>
+                    <field type="text-single" var="muc#roomconfig_historylength" label="Maximum Number of History Messages Returned by Room">
+                       <value>20</value></field>
+                    </x>
+                </query>
+                </iq>`));
+
+            await u.waitUntil(() => muc.sendConfiguration.calls.count() === 1);
+
+            const sent_stanza = IQ_stanzas.filter(s => s.getAttribute('type') === 'set').pop();
+            expect(sizzle('field[var="muc#roomconfig_roomname"] value', sent_stanza).pop().textContent.trim()).toBe('The Lounge');
         })
     );
 

From f624fd33cd560e6bf9bae3acb8e69ac69ba61b97 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Wed, 12 Feb 2025 11:19:54 +0200
Subject: [PATCH 6/6] Show a validation error in add-muc modal when no default
 MUC domain is found

---
 src/headless/plugins/disco/api.js             | 13 +++---
 src/headless/plugins/muc/utils.js             |  3 +-
 src/headless/types/plugins/disco/api.d.ts     |  6 +--
 src/plugins/muc-views/modals/add-muc.js       | 21 +++++++---
 .../muc-views/modals/templates/add-muc.js     |  5 ---
 src/plugins/muc-views/tests/muc-add-modal.js  | 40 +++++++++++++++----
 src/shared/autocomplete/component.js          |  5 +--
 .../plugins/muc-views/modals/add-muc.d.ts     |  4 +-
 src/types/shared/autocomplete/component.d.ts  |  2 +-
 9 files changed, 63 insertions(+), 36 deletions(-)

diff --git a/src/headless/plugins/disco/api.js b/src/headless/plugins/disco/api.js
index 1e218d0116..cc713c1979 100644
--- a/src/headless/plugins/disco/api.js
+++ b/src/headless/plugins/disco/api.js
@@ -1,18 +1,19 @@
-/**
- * @typedef {import('./index').DiscoState} DiscoState
- * @typedef {import('./entities').default} DiscoEntities
- * @typedef {import('@converse/skeletor').Collection} Collection
- */
 import { getOpenPromise } from '@converse/openpromise';
 import _converse from '../../shared/_converse.js';
 import api from '../../shared/api/index.js';
 import converse from '../../shared/api/public.js';
 import log from '../../log.js';
-import DiscoEntity from './entity.js';
 
 const { Strophe, $iq } = converse.env;
 
 export default {
+    /**
+     * @typedef {import('./entities').default} DiscoEntities
+     * @typedef {import('./entity').default} DiscoEntity
+     * @typedef {import('./index').DiscoState} DiscoState
+     * @typedef {import('@converse/skeletor').Collection} Collection
+     */
+
     /**
      * The XEP-0030 service discovery API
      *
diff --git a/src/headless/plugins/muc/utils.js b/src/headless/plugins/muc/utils.js
index eb2e2857a9..0cddedf9cf 100644
--- a/src/headless/plugins/muc/utils.js
+++ b/src/headless/plugins/muc/utils.js
@@ -13,13 +13,14 @@ const { Strophe, sizzle, u } = converse.env;
  * @returns {Promise<string|undefined>}
  */
 export async function getDefaultMUCService () {
-    let muc_service = api.settings.get('muc_domain');
+    let muc_service = api.settings.get('muc_domain') || _converse.session.get('default_muc_service');
     if (!muc_service) {
         const domain = _converse.session.get('domain');
         const items = await api.disco.entities.items(domain);
         for (const item of items) {
             if (await api.disco.features.has(Strophe.NS.MUC, item.get('jid'))) {
                 muc_service = item.get('jid');
+                _converse.session.save({ default_muc_service: muc_service });
                 break;
             }
         }
diff --git a/src/headless/types/plugins/disco/api.d.ts b/src/headless/types/plugins/disco/api.d.ts
index 279d763070..be4493a588 100644
--- a/src/headless/types/plugins/disco/api.d.ts
+++ b/src/headless/types/plugins/disco/api.d.ts
@@ -87,7 +87,7 @@ declare namespace _default {
              * @return {Promise<DiscoEntity|DiscoEntities|undefined>}
              * @example _converse.api.disco.entities.get(jid);
              */
-            function get(jid: string, create?: boolean): Promise<DiscoEntity | DiscoEntities | undefined>;
+            function get(jid: string, create?: boolean): Promise<import("./entity").default | import("./entities").default | undefined>;
             /**
              * Return any disco items advertised on this entity
              *
@@ -252,8 +252,4 @@ declare namespace _default {
     }
 }
 export default _default;
-export type DiscoState = import("./index").DiscoState;
-export type DiscoEntities = import("./entities").default;
-export type Collection = import("@converse/skeletor").Collection;
-import DiscoEntity from './entity.js';
 //# sourceMappingURL=api.d.ts.map
\ No newline at end of file
diff --git a/src/plugins/muc-views/modals/add-muc.js b/src/plugins/muc-views/modals/add-muc.js
index ee684aa4a0..a5d177a959 100644
--- a/src/plugins/muc-views/modals/add-muc.js
+++ b/src/plugins/muc-views/modals/add-muc.js
@@ -1,5 +1,4 @@
 import { _converse, api, converse } from '@converse/headless';
-import AutoCompleteComponent from 'shared/autocomplete/component.js';
 import tplAddMuc from './templates/add-muc.js';
 import BaseModal from 'plugins/modal/modal.js';
 import { __ } from 'i18n';
@@ -60,7 +59,7 @@ export default class AddMUCModal extends BaseModal {
         return s
             .trim()
             .replace(/\s+/g, '-')
-            .replace(/\u0142/g, "l")
+            .replace(/\u0142/g, 'l')
             .replace(/[^\x00-\x7F]/g, (c) => c.normalize('NFD').replace(/[\u0300-\u036f]/g, ''))
             .replace(/[^a-zA-Z0-9-]/g, '-')
             .replace(/-+/g, '-')
@@ -74,8 +73,8 @@ export default class AddMUCModal extends BaseModal {
     async openChatRoom(ev) {
         ev.preventDefault();
 
-        const autocomplete_el = /** @type {AutoCompleteComponent} */ (this.querySelector('converse-autocomplete'));
-        if (autocomplete_el.onChange().error_message) return;
+        const autocomplete_el = /** @type {import('shared/autocomplete/component').default} */ (this.querySelector('converse-autocomplete'));
+        if ((await autocomplete_el.onChange()).error_message) return;
 
         const { escapeNode, getNodeFromJid, getDomainFromJid } = Strophe;
         const form = /** @type {HTMLFormElement} */ (ev.target);
@@ -109,9 +108,9 @@ export default class AddMUCModal extends BaseModal {
 
     /**
      * @param {string} jid
-     * @return {string}
+     * @return {Promise<string>}
      */
-    validateMUCJID(jid) {
+    async validateMUCJID(jid) {
         if (jid.length === 0) {
             return __('Invalid groupchat address, it cannot be empty.');
         }
@@ -130,6 +129,16 @@ export default class AddMUCModal extends BaseModal {
             return __('Invalid groupchat address, it cannot start or end with an @ sign.');
         }
 
+        if (!jid.includes('@')) {
+            const muc_service = await u.muc.getDefaultMUCService();
+            if (!muc_service) {
+                return __(
+                    "No default groupchat service found. "+
+                    "You'll need to specify the full address, for example room@conference.example.org"
+                );
+            }
+        }
+
         const policy = api.settings.get('muc_roomid_policy');
         if (policy && api.settings.get('muc_domain')) {
             if (api.settings.get('locked_muc_domain') || !u.isValidJID(jid)) {
diff --git a/src/plugins/muc-views/modals/templates/add-muc.js b/src/plugins/muc-views/modals/templates/add-muc.js
index 84fa62a474..9603e1ae17 100644
--- a/src/plugins/muc-views/modals/templates/add-muc.js
+++ b/src/plugins/muc-views/modals/templates/add-muc.js
@@ -28,14 +28,10 @@ const nickname_input = () => {
  */
 export default (el) => {
     const i18n_join = __('Join');
-    const muc_domain = api.settings.get('muc_domain');
-
-    let placeholder = '';
     let label_name;
     if (api.settings.get('locked_muc_domain')) {
         label_name = __('Groupchat name');
     } else {
-        placeholder = muc_domain ? `name@${muc_domain}` : __('name@conference.example.org');
         label_name = __('Groupchat name or address');
     }
 
@@ -58,7 +54,6 @@ export default (el) => {
                           class="add-muc-autocomplete"
                           min_chars="3"
                           name="chatroom"
-                          placeholder="${placeholder}"
                           position="below"
                           required
                       ></converse-autocomplete>`
diff --git a/src/plugins/muc-views/tests/muc-add-modal.js b/src/plugins/muc-views/tests/muc-add-modal.js
index ba7c314bb6..1102e38949 100644
--- a/src/plugins/muc-views/tests/muc-add-modal.js
+++ b/src/plugins/muc-views/tests/muc-add-modal.js
@@ -1,7 +1,6 @@
 /*global mock, converse */
 const {  Promise, sizzle, u } = converse.env;
 
-
 describe('The "Groupchats" Add modal', function () {
 
     beforeAll(() => jasmine.addMatchers({ toEqualStanza: jasmine.toEqualStanza }));
@@ -12,9 +11,6 @@ describe('The "Groupchats" Add modal', function () {
 
             let label_name = modal.querySelector('label[for="chatroom"]');
             expect(label_name.textContent.trim()).toBe('Groupchat name or address:');
-            const name_input = modal.querySelector('input[name="chatroom"]');
-            expect(name_input.placeholder).toBe('name@conference.example.org');
-
             const label_nick = modal.querySelector('label[for="nickname"]');
             expect(label_nick.textContent.trim()).toBe('Nickname:');
             const nick_input = modal.querySelector('input[name="nickname"]');
@@ -39,7 +35,6 @@ describe('The "Groupchats" Add modal', function () {
             const label_name = modal.querySelector('label[for="chatroom"]');
             expect(label_name.textContent.trim()).toBe('Groupchat name or address:');
             let name_input = modal.querySelector('input[name="chatroom"]');
-            expect(name_input.placeholder).toBe('name@muc.example.org');
             name_input.value = 'lounge';
             let nick_input = modal.querySelector('input[name="nickname"]');
             nick_input.value = 'max';
@@ -66,7 +61,7 @@ describe('The "Groupchats" Add modal', function () {
         })
     );
 
-    it('only uses the muc_domain if locked_muc_domain is true', mock.initConverse(
+    it('uses the muc_domain if locked_muc_domain is true', mock.initConverse(
         ['chatBoxesFetched'], { muc_domain: 'muc.example.org', locked_muc_domain: true },
         async function (_converse) {
             const modal = await mock.openAddMUCModal(_converse);
@@ -104,7 +99,7 @@ describe('The "Groupchats" Add modal', function () {
         })
     );
 
-    fit("lets you create a MUC with only the name",
+    it("lets you create a MUC with only the name",
         mock.initConverse(['chatBoxesFetched'], {}, async function (_converse) {
             const { domain } = _converse;
             await mock.waitUntilDiscoConfirmed(
@@ -210,6 +205,37 @@ describe('The "Groupchats" Add modal', function () {
         })
     );
 
+    it("shows a validation error when only the name was specified and there's no default MUC service",
+        mock.initConverse(['chatBoxesFetched'], {}, async function (_converse) {
+            const { domain } = _converse;
+            await mock.waitUntilDiscoConfirmed(
+                _converse,
+                domain,
+                [{ category: 'server', type: 'IM' }],
+                [],
+            );
+
+            const nick = 'max';
+            const modal = await mock.openAddMUCModal(_converse);
+            spyOn(_converse.ChatRoom.prototype, 'getDiscoInfo').and.callFake(() => Promise.resolve());
+
+            const name_input = modal.querySelector('input[name="chatroom"]');
+            name_input.value = 'The Lounge';
+
+            const nick_input = modal.querySelector('input[name="nickname"]');
+            nick_input.value = nick;
+
+            modal.querySelector('form input[type="submit"]').click();
+
+            await u.waitUntil(() => name_input.classList.contains('error'));
+            expect(name_input.classList.contains('is-invalid')).toBe(true);
+            expect(modal.querySelector('.invalid-feedback')?.textContent).toBe(
+                "No default groupchat service found. "+
+                "You'll need to specify the full address, for example room@conference.example.org"
+            );
+        })
+    );
+
     it("normalizes the MUC name when creating the corresponding JID",
         mock.initConverse(['chatBoxesFetched'], {muc_domain: 'montague.lit'}, async function (_converse) {
             const modal = await mock.openAddMUCModal(_converse);
diff --git a/src/shared/autocomplete/component.js b/src/shared/autocomplete/component.js
index 2a21bfc945..e3ee520dab 100644
--- a/src/shared/autocomplete/component.js
+++ b/src/shared/autocomplete/component.js
@@ -3,7 +3,6 @@ import { CustomElement } from 'shared/components/element.js';
 import { FILTER_CONTAINS, FILTER_STARTSWITH } from './utils.js';
 import { api } from '@converse/headless';
 import { html } from 'lit';
-import {ancestor} from 'utils/html.js';
 
 /**
  * A custom element that can be used to add auto-completion suggestions to a form input.
@@ -147,9 +146,9 @@ export default class AutoCompleteComponent extends CustomElement {
         this.auto_complete.evaluate(ev);
     }
 
-    onChange() {
+    async onChange() {
         const input = this.querySelector('input');
-        this.error_message = this.validate?.(input.value);
+        this.error_message = await this.validate?.(input.value);
         if (this.error_message) this.requestUpdate();
         return this;
     }
diff --git a/src/types/plugins/muc-views/modals/add-muc.d.ts b/src/types/plugins/muc-views/modals/add-muc.d.ts
index 8ec3d06557..92bd0f061e 100644
--- a/src/types/plugins/muc-views/modals/add-muc.d.ts
+++ b/src/types/plugins/muc-views/modals/add-muc.d.ts
@@ -23,9 +23,9 @@ export default class AddMUCModal extends BaseModal {
     openChatRoom(ev: Event): Promise<void>;
     /**
      * @param {string} jid
-     * @return {string}
+     * @return {Promise<string>}
      */
-    validateMUCJID(jid: string): string;
+    validateMUCJID(jid: string): Promise<string>;
 }
 import BaseModal from 'plugins/modal/modal.js';
 //# sourceMappingURL=add-muc.d.ts.map
\ No newline at end of file
diff --git a/src/types/shared/autocomplete/component.d.ts b/src/types/shared/autocomplete/component.d.ts
index 1a677a9cd2..6728cf75b3 100644
--- a/src/types/shared/autocomplete/component.d.ts
+++ b/src/types/shared/autocomplete/component.d.ts
@@ -119,7 +119,7 @@ export default class AutoCompleteComponent extends CustomElement {
     onKeyDown(ev: KeyboardEvent): void;
     /** @param {KeyboardEvent} ev */
     onKeyUp(ev: KeyboardEvent): void;
-    onChange(): this;
+    onChange(): Promise<this>;
 }
 import { CustomElement } from 'shared/components/element.js';
 import AutoComplete from './autocomplete.js';