xmpp.chapril.org-conversejs/src/plugins/muc-views/role-form.js
JC Brand 85181053e6 Make the role form a custom element
So that it can be used in the occupant modal as well.
2023-02-21 23:14:16 +01:00

69 lines
2.1 KiB
JavaScript

import log from '@converse/headless/log';
import tplRoleForm from './templates/role-form.js';
import { CustomElement } from 'shared/components/element.js';
import { __ } from 'i18n';
import { api, converse } from '@converse/headless/core.js';
import { isErrorObject } from '@converse/headless/utils/core.js';
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 },
};
}
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 (isErrorObject(e)) log.error(e);
}
}
);
}
}
api.elements.define('converse-muc-role-form', RoleForm);