Occupant modal: Only show role/affiliation forms for moderators

.prettierrc

@@ -1,5 +1,4 @@
 {
-  "arrowParens": "avoid",
   "printWidth": 120,
   "quoteProps": "preserve",
   "singleQuote": true,

CHANGES.md

@@ -5,7 +5,6 @@
 - Add the ability to set roles and affiliations via the MUC occupant modal
 - Fix `isOnlyEmojis is not a function` when using only `@converse/headless`
 
-
 ## 10.1.2 (2023-02-17)
 
 - #1490: Busy-loop when fetching registration form fails

src/plugins/muc-views/modals/templates/occupant.js

@@ -16,6 +16,9 @@ export default (el) => {
     const hats = el.model?.get('hats')?.length ? el.model.get('hats') : null;
     const muc = el.model.collection.chatroom;
 
+    const allowed_commands = muc.getAllowedCommands();
+    const may_moderate = allowed_commands.includes('modtools');
+
     const i18n_add_to_contacts = __('Add to Contacts');
 
     const can_see_real_jids = muc.features.get('nonanonymous') || muc.getOwnRole() === 'moderator';
@@ -45,26 +48,29 @@ export default (el) => {
                     <li>
                         <div class="row"><strong>${__('Affiliation')}:</strong></div>
                         <div class="row">${affiliation}&nbsp;
+                            ${ may_moderate ? html`
                                 <a href="#"
                                 data-form="affiliation-form"
                                 class="toggle-form right"
                                 color="var(--subdued-color)"
                                 @click=${(ev) => el.toggleForm(ev)}><converse-icon class="fa fa-wrench" size="1em"></converse-icon>
                                 </a>
-                            ${ el.show_affiliation_form ? html`<converse-muc-affiliation-form jid=${jid} .muc=${muc} affiliation=${affiliation}></converse-muc-affiliation-form>` : '' }
+                                ${ el.show_affiliation_form ? html`<converse-muc-affiliation-form jid=${jid} .muc=${muc} affiliation=${affiliation}></converse-muc-affiliation-form>` : '' }` : ''
+                            }
                         </div>
                     </li>
                     <li>
                         <div class="row"><strong>${__('Role')}:</strong></div>
                         <div class="row">${role}&nbsp;
-                            ${ role ? html`
+                            ${ may_moderate && role ? html`
                                 <a href="#"
                                    data-form="row-form"
                                    class="toggle-form right"
                                    color="var(--subdued-color)"
                                    @click=${(ev) => el.toggleForm(ev)}><converse-icon class="fa fa-wrench" size="1em"></converse-icon>
                                 </a>
-                                ${ el.show_role_form ? html`<converse-muc-role-form jid=${jid} .muc=${muc} role=${role}></converse-muc-role-form>` : '' }` : '' }
+                                ${ el.show_role_form ? html`<converse-muc-role-form jid=${jid} .muc=${muc} role=${role}></converse-muc-role-form>` : '' }` : ''
+                            }
                         </div>
                     </li>
                     <li>