Fixes #3579

CHANGES.md

@@ -34,6 +34,8 @@
 - #3476: better UI for form "fixed" fields
 - #3478: MUC participant status indicator misplaced 
 - #3529: Unbookmarked channels no longer change their name when clicked with an unread indicator (or text icon)
+- #3579: Changing nickname in a groupchat once, forbids to change nickname in another groupchat afterwards
+
 
 ### Bugfixes
 - Fix: MUC occupant list does not sort itself on nicknames or roles changes

src/plugins/muc-views/heading.js

@@ -64,6 +64,14 @@ export default class MUCHeading extends CustomElement {
         api.modal.show('converse-muc-details-modal', { model: this.model }, ev);
     }
 
+    /**
+     * @param {Event} ev
+     */
+    showNicknameModal (ev) {
+        ev.preventDefault();
+        api.modal.show('converse-muc-nickname-modal', { model: this.model }, ev);
+    }
+
     /**
      * @param {Event} ev
      */
@@ -116,7 +124,7 @@ export default class MUCHeading extends CustomElement {
         buttons.push({
             'i18n_text': __('Details'),
             'i18n_title': __('Show more information about this groupchat'),
-            'handler': ev => this.showRoomDetailsModal(ev),
+            'handler': /** @param {Event} ev */(ev) => this.showRoomDetailsModal(ev),
             'a_class': 'show-muc-details-modal',
             'icon_class': 'fa-info-circle',
             'name': 'details'
@@ -126,7 +134,7 @@ export default class MUCHeading extends CustomElement {
             buttons.push({
                 'i18n_text': __('Configure'),
                 'i18n_title': __('Configure this groupchat'),
-                'handler': ev => this.showConfigModal(ev),
+                'handler': /** @param {Event} ev */(ev) => this.showConfigModal(ev),
                 'a_class': 'configure-chatroom-button',
                 'icon_class': 'fa-wrench',
                 'name': 'configure'
@@ -136,7 +144,7 @@ export default class MUCHeading extends CustomElement {
         buttons.push({
             'i18n_text': __('Nickname'),
             'i18n_title': __("Change the nickname you're using in this groupchat"),
-            'handler': ev => api.modal.show('converse-muc-nickname-modal', { 'model': this.model }, ev),
+            'handler': /** @param {Event} ev */(ev) => this.showNicknameModal(ev),
             'a_class': 'open-nickname-modal',
             'icon_class': 'fa-smile',
             'name': 'nickname'

src/plugins/muc-views/modals/muc-details.js

@@ -21,7 +21,7 @@ export default class MUCDetailsModal extends BaseModal {
     }
 
     getModalTitle () {
-        return __('Groupchat info', this.model.getDisplayName());
+        return __('Groupchat info');
     }
 
 }

src/plugins/muc-views/modals/nickname.js

@@ -9,7 +9,7 @@ export default class MUCNicknameModal extends BaseModal {
         return html`<converse-muc-nickname-form jid="${this.model.get('jid')}"></converse-muc-nickname-form>`;
     }
 
-    getModalTitle () { // eslint-disable-line class-methods-use-this
+    getModalTitle () {
         return __('Change your nickname');
     }
 }

src/plugins/muc-views/nickname-form.js

@@ -1,39 +1,46 @@
-import tplMUCNicknameForm from './templates/muc-nickname-form.js';
+import { _converse, api } from '@converse/headless';
 import { CustomElement } from 'shared/components/element';
-import { _converse, api } from "@converse/headless";
+import tplMUCNicknameForm from './templates/muc-nickname-form.js';
 
 import './styles/nickname-form.scss';
 
-
 class MUCNicknameForm extends CustomElement {
-
-    constructor () {
+    constructor() {
         super();
         this.jid = null;
+        this.model = null;
     }
 
-    static get properties () {
+    static get properties() {
         return {
-            'jid': { type: String }
-        }
+            jid: { type: String },
+        };
     }
 
-    connectedCallback () {
-        super.connectedCallback();
-        const { chatboxes } = _converse.state;
-        this.model = chatboxes.get(this.jid);
+    /**
+     * @param {Map<string, any>} changed
+     */
+    shouldUpdate(changed) {
+        if (changed.has('jid') && this.jid) {
+            const { chatboxes } = _converse.state;
+            this.model = chatboxes.get(this.jid);
+        }
+        return true;
     }
 
-    render () {
+    render() {
         return tplMUCNicknameForm(this);
     }
 
-    submitNickname (ev) {
+    /**
+     * @param {Event} ev
+     */
+    submitNickname(ev) {
         ev.preventDefault();
-        const nick = ev.target.nick.value.trim();
-        if (!nick) {
-            return;
-        }
+        const form = /** @type {HTMLFormElement} */ (ev.target);
+        const nick = form.nick.value.trim();
+        if (!nick) return;
+
         if (this.model.isEntered()) {
             this.model.setNickname(nick);
             this.closeModal();
@@ -42,7 +49,7 @@ class MUCNicknameForm extends CustomElement {
         }
     }
 
-    closeModal () {
+    closeModal() {
         /** @type {import('plugins/modal/modal').default} */ (
             document.querySelector('converse-muc-nickname-modal')
         ).close();

src/plugins/muc-views/templates/muc-nickname-form.js

@@ -2,6 +2,9 @@ import { __ } from 'i18n';
 import { api } from "@converse/headless";
 import { html } from "lit";
 
+/**
+ * @param {import('../nickname-form').default} el
+ */
 export default (el) => {
     const i18n_nickname =  __('Nickname');
     const i18n_join = el.model?.isEntered() ? __('Change nickname') : __('Enter groupchat');