converse.js/src/plugins/muc-views/role-form.js

Browser based XMPP chat client

import { api, converse, log, u } from '@converse/headless';
import { __ } from 'i18n';
import { CustomElement } from 'shared/components/element.js';
import tplRoleForm from './templates/role-form.js';

import './styles/role-form.scss';

const { Strophe, sizzle } = converse.env;

class RoleForm extends CustomElement {

    static get properties () {
        return {
            muc: { type: Object },
            jid: { type: String },
            role: { type: String },
            alert_message: { type: String, attribute: false },
            alert_type: { type: String, attribute: false },
        };
    }

    constructor () {
        super();
        this.muc = null;
        this.nick = null;
        this.jid = null;
    }

    render () {
        return tplRoleForm(this);
    }

    alert (message, type) {
        this.alert_message = message;
        this.alert_type = type;
    }

    assignRole (ev) {
        ev.stopPropagation();
        ev.preventDefault();
        this.alert(); // clear alert

        const data = new FormData(ev.target);
        const occupant = this.muc.getOccupant(data.get('jid') || data.get('nick'));
        const role = data.get('role');
        const reason = data.get('reason');

        this.muc.setRole(
            occupant,
            role,
            reason,
            () => {
                /**
                 * @event roleChanged
                 * @example
                 *  const el = document.querySelector('converse-muc-role-form');
                 *  el.addEventListener('roleChanged', () => { ... });
                 */
                const event = new CustomEvent('roleChanged', { bubbles: true });
                this.dispatchEvent(event);

            },
            (e) => {
                if (sizzle(`not-allowed[xmlns="${Strophe.NS.STANZAS}"]`, e).length) {
                    this.alert(__("You're not allowed to make that change"), 'danger');
                } else {
                    this.alert(__('Sorry, something went wrong while trying to set the role'), 'danger');
                    if (u.isErrorObject(e)) log.error(e);
                }
            }
        );

    }
}

api.elements.define('converse-muc-role-form', RoleForm);

export default RoleForm;