Skip to content

C
converse.js
Commit ad934079 authored by JC Brand's avatar JC Brand
Browse files
Options

Replace modal templates with lit-html components

parent a8104d74
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1024 additions and 881 deletions
.eslintrc.json
View file @ ad934079
......@@ -259,7 +259,7 @@
"spaced-comment": "off",
"strict": "off",
"symbol-description": "error",
"template-curly-spacing": "error",
"template-curly-spacing": "off",
"unicode-bom": [
"error",
"never"
......
package-lock.json
View file @ ad934079
......@@ -2217,9 +2217,9 @@
}
},
"@octokit/types": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.1.0.tgz",
"integrity": "sha512-n1GUYFgKm5glcy0E+U5jnqAFY2p04rnK4A0YhuM70C7Vm9Vyx+xYwd/WOTEr8nUJcbPSR/XL+/26+rirY6jJQA==",
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.1.1.tgz",
"integrity": "sha512-89LOYH+d/vsbDX785NOfLxTW88GjNd0lWRz1DVPVsZgg9Yett5O+3MOvwo7iHgvUwbFz0mf/yPIjBkUbs4kxoQ==",
"dev": true,
"requires": {
"@types/node": ">= 8"
......@@ -8841,6 +8841,12 @@
"uc.micro": "^1.0.1"
}
},
"lit-html": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.1.2.tgz",
"integrity": "sha512-FFlUMKHKi+qG1x1iHNZ1hrtc/zHmfYTyrSvs3/wBTvaNtpZjOZGWzU7efGYVpgp6KvWeKF6ql9/KsCq6Z/mEDA==",
"dev": true
},
"load-json-file": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz",
......@@ -16088,8 +16094,8 @@
"dev": true
},
"skeletor.js": {
"version": "github:skeletorjs/skeletor#abc4e9d25d30159e9cffc14bf5f7ffe17b3665eb",
"from": "github:skeletorjs/skeletor#abc4e9d25d30159e9cffc14bf5f7ffe17b3665eb",
"version": "github:skeletorjs/skeletor#29a6d8f707076e865133b8f36f07c76ba4b4b582",
"from": "github:skeletorjs/skeletor#29a6d8f707076e865133b8f36f07c76ba4b4b582",
"requires": {
"lodash": "^4.17.14"
}
......
sass/_modal.scss
View file @ ad934079
......@@ -41,7 +41,7 @@
.set-xmpp-status {
margin: 1em;
.custom-control-label {
margin-top: 0.25em;
padding-top: 0.25em;
}
}
......
spec/controlbox.js
View file @ ad934079
......@@ -199,27 +199,25 @@
cbview.el.querySelector('.add-contact').click()
const modal = _converse.rosterview.add_contact_modal;
await u.waitUntil(() => u.isVisible(modal.el), 1000);
const sendIQ = _converse.connection.sendIQ;
let sent_stanza, IQ_id;
spyOn(_converse.connection, 'sendIQ').and.callFake(function (iq, callback, errback) {
sent_stanza = iq;
IQ_id = sendIQ.bind(this)(iq, callback, errback);
});
expect(!_.isNull(modal.el.querySelector('form.add-xmpp-contact'))).toBeTruthy();
expect(modal.el.querySelector('form.add-xmpp-contact')).not.toBe(null);
const input_jid = modal.el.querySelector('input[name="jid"]');
const input_name = modal.el.querySelector('input[name="name"]');
input_jid.value = 'someone@';
const evt = new Event('input');
input_jid.dispatchEvent(evt);
expect(modal.el.querySelector('.suggestion-box li').textContent).toBe('someone@montague.lit');
input_jid.value = 'someone@montague.lit';
input_name.value = 'Someone';
modal.el.querySelector('button[type="submit"]').click();
expect(sent_stanza.toLocaleString()).toEqual(
`<iq id="${IQ_id}" type="set" xmlns="jabber:client">`+
`<query xmlns="jabber:iq:roster"><item jid="someone@montague.lit" name="Someone"/></query>`+
`</iq>`);
const sent_IQs = _converse.connection.IQ_stanzas;
const sent_stanza = await u.waitUntil(() => sent_IQs.filter(iq => iq.querySelector(`iq[type="set"] query[xmlns="${Strophe.NS.ROSTER}"]`)).pop());
expect(Strophe.serialize(sent_stanza)).toEqual(
`<iq id="${sent_stanza.getAttribute('id')}" type="set" xmlns="jabber:client">`+
`<query xmlns="jabber:iq:roster"><item jid="someone@montague.lit" name="Someone"/></query>`+
`</iq>`);
done();
}));
......@@ -228,6 +226,7 @@
['rosterGroupsFetched'], {'autocomplete_add_contact': false},
async function (done, _converse) {
await test_utils.waitForRoster(_converse, 'all', 0);
test_utils.openControlBox(_converse);
const cbview = _converse.chatboxviews.get('controlbox');
cbview.el.querySelector('.add-contact').click()
......@@ -236,14 +235,14 @@
expect(modal.name_auto_complete).toBe(undefined);
await u.waitUntil(() => u.isVisible(modal.el), 1000);
expect(!_.isNull(modal.el.querySelector('form.add-xmpp-contact'))).toBeTruthy();
expect(modal.el.querySelector('form.add-xmpp-contact')).not.toBe(null);
const input_jid = modal.el.querySelector('input[name="jid"]');
input_jid.value = 'someone@montague.lit';
modal.el.querySelector('button[type="submit"]').click();
const IQ_stanzas = _converse.connection.IQ_stanzas;
const sent_stanza = await u.waitUntil(
() => IQ_stanzas.filter(s => sizzle(`query[xmlns="${Strophe.NS.ROSTER}"]`, s).length).pop()
() => IQ_stanzas.filter(s => sizzle(`iq[type="set"] query[xmlns="${Strophe.NS.ROSTER}"]`, s).length).pop()
);
expect(Strophe.serialize(sent_stanza)).toEqual(
`<iq id="${sent_stanza.getAttribute('id')}" type="set" xmlns="jabber:client">`+
......@@ -260,6 +259,8 @@
{ 'xhr_user_search_url': 'http://example.org/?' },
async function (done, _converse) {
await test_utils.waitForRoster(_converse, 'all', 0);
const xhr = {
'open': function open () {},
'send': function () {
......@@ -287,12 +288,6 @@
input_el.value = 'marty';
input_el.dispatchEvent(new Event('input'));
await u.waitUntil(() => modal.el.querySelector('.suggestion-box li'), 1000);
const sendIQ = _converse.connection.sendIQ;
let sent_stanza, IQ_id;
spyOn(_converse.connection, 'sendIQ').and.callFake(function (iq, callback, errback) {
sent_stanza = iq;
IQ_id = sendIQ.bind(this)(iq, callback, errback);
});
expect(modal.el.querySelectorAll('.suggestion-box li').length).toBe(1);
const suggestion = modal.el.querySelector('.suggestion-box li');
expect(suggestion.textContent).toBe('Marty McFly');
......@@ -303,8 +298,11 @@
expect(input_el.value).toBe('Marty McFly');
expect(modal.el.querySelector('input[name="jid"]').value).toBe('marty@mcfly.net');
modal.el.querySelector('button[type="submit"]').click();
expect(sent_stanza.toLocaleString()).toEqual(
`<iq id="${IQ_id}" type="set" xmlns="jabber:client">`+
const sent_IQs = _converse.connection.IQ_stanzas;
const sent_stanza = await u.waitUntil(() => sent_IQs.filter(iq => iq.querySelector(`iq[type="set"] query[xmlns="${Strophe.NS.ROSTER}"]`)).pop());
expect(Strophe.serialize(sent_stanza)).toEqual(
`<iq id="${sent_stanza.getAttribute('id')}" type="set" xmlns="jabber:client">`+
`<query xmlns="jabber:iq:roster"><item jid="marty@mcfly.net" name="Marty McFly"/></query>`+
`</iq>`);
window.XMLHttpRequest = XMLHttpRequestBackup;
......@@ -355,13 +353,6 @@
expect(modal.jid_auto_complete).toBe(undefined);
expect(modal.name_auto_complete).toBe(undefined);
const sendIQ = _converse.connection.sendIQ;
let sent_stanza, IQ_id;
spyOn(_converse.connection, 'sendIQ').and.callFake(function (iq, callback, errback) {
sent_stanza = iq;
IQ_id = sendIQ.bind(this)(iq, callback, errback);
});
const input_el = modal.el.querySelector('input[name="name"]');
input_el.value = 'ambiguous';
modal.el.querySelector('button[type="submit"]').click();
......@@ -382,8 +373,11 @@
input_el.value = 'Marty McFly';
modal.el.querySelector('button[type="submit"]').click();
expect(sent_stanza.toLocaleString()).toEqual(
`<iq id="${IQ_id}" type="set" xmlns="jabber:client">`+
const sent_IQs = _converse.connection.IQ_stanzas;
const sent_stanza = await u.waitUntil(() => sent_IQs.filter(iq => iq.querySelector(`iq[type="set"] query[xmlns="${Strophe.NS.ROSTER}"]`)).pop());
expect(Strophe.serialize(sent_stanza)).toEqual(
`<iq id="${sent_stanza.getAttribute('id')}" type="set" xmlns="jabber:client">`+
`<query xmlns="jabber:iq:roster"><item jid="marty@mcfly.net" name="Marty McFly"/></query>`+
`</iq>`);
window.XMLHttpRequest = XMLHttpRequestBackup;
......
spec/messages.js
View file @ ad934079
......@@ -1506,7 +1506,7 @@
const older_msgs = modal.el.querySelectorAll('.older-msg');
expect(older_msgs.length).toBe(2);
expect(older_msgs[0].childNodes[0].nodeName).toBe('TIME');
expect(older_msgs[0].childNodes[1].textContent).toBe(': But soft, what light through yonder airlock breaks?');
expect(older_msgs[0].childNodes[2].textContent).toBe('But soft, what light through yonder airlock breaks?');
expect(view.model.messages.models.length).toBe(1);
done();
}));
......
spec/muc_messages.js
View file @ ad934079
......@@ -430,6 +430,8 @@
'type': 'groupchat',
'id': msg_id,
}).c('body').t('But soft, what light through yonder airlock breaks?').tree());
await u.waitUntil(() => view.el.querySelectorAll('.chat-msg').length);
expect(view.el.querySelectorAll('.chat-msg').length).toBe(1);
expect(view.el.querySelector('.chat-msg__text').textContent)
.toBe('But soft, what light through yonder airlock breaks?');
......@@ -463,10 +465,10 @@
await u.waitUntil(() => u.isVisible(modal.el), 1000);
const older_msgs = modal.el.querySelectorAll('.older-msg');
expect(older_msgs.length).toBe(2);
expect(older_msgs[0].childNodes[1].textContent).toBe(': But soft, what light through yonder airlock breaks?');
expect(older_msgs[0].childNodes[2].textContent).toBe('But soft, what light through yonder airlock breaks?');
expect(older_msgs[0].childNodes[0].nodeName).toBe('TIME');
expect(older_msgs[1].childNodes[0].nodeName).toBe('TIME');
expect(older_msgs[1].childNodes[1].textContent).toBe(': But soft, what light through yonder chimney breaks?');
expect(older_msgs[1].childNodes[2].textContent).toBe('But soft, what light through yonder chimney breaks?');
done();
}));
......
spec/user-details-modal.js
View file @ ad934079
......@@ -28,9 +28,7 @@
const modal = view.user_details_modal;
await u.waitUntil(() => u.isVisible(modal.el), 1000);
spyOn(window, 'confirm').and.returnValue(true);
spyOn(view.model.contact, 'removeFromRoster').and.callFake(function (callback) {
callback();
});
spyOn(view.model.contact, 'removeFromRoster').and.callFake(callback => callback());
let remove_contact_button = modal.el.querySelector('button.remove-contact');
expect(u.isVisible(remove_contact_button)).toBeTruthy();
remove_contact_button.click();
......
src/converse-chatboxviews.js
View file @ ad934079
......@@ -8,16 +8,17 @@
* @module converse-chatboxviews
*/
import "@converse/headless/converse-chatboxes";
import "backbone.nativeview";
import { HTMLView } from 'skeletor.js/src/htmlview.js';
import { Overview } from "skeletor.js/src/overview";
import { View } from "skeletor.js/src/view";
import { result } from "lodash";
import converse from "@converse/headless/converse-core";
import tpl_avatar from "templates/avatar.svg";
import tpl_background_logo from "templates/background_logo.html";
import tpl_chatboxes from "templates/chatboxes.html";
const { Backbone, _, utils } = converse.env;
const u = utils;
const u = converse.env.utils;
const AvatarMixin = {
......@@ -65,7 +66,7 @@ converse.plugins.add('converse-chatboxviews', {
});
_converse.ViewWithAvatar = View.extend(AvatarMixin);
_converse.VDOMViewWithAvatar = Backbone.VDOMView.extend(AvatarMixin);
_converse.HTMLViewWithAvatar = HTMLView.extend(AvatarMixin);
_converse.ChatBoxViews = Overview.extend({
......@@ -91,7 +92,7 @@ converse.plugins.add('converse-chatboxviews', {
el.innerHTML = '';
this.setElement(el, false);
} else {
this.setElement(_.result(this, 'el'), false);
this.setElement(result(this, 'el'), false);
}
},
......
src/converse-chatview.js
View file @ ad934079
......@@ -12,7 +12,6 @@ import "converse-message-view";
import "converse-modal";
import { debounce, get, isString } from "lodash";
import { Overview } from "skeletor.js/src/overview";
import { View } from "skeletor.js/src/view";
import converse from "@converse/headless/converse-core";
import log from "@converse/headless/log";
import tpl_chatbox from "templates/chatbox.html";
......@@ -27,7 +26,7 @@ import tpl_spoiler_button from "templates/spoiler_button.html";
import tpl_status_message from "templates/status_message.html";
import tpl_toolbar from "templates/toolbar.html";
import tpl_toolbar_fileupload from "templates/toolbar_fileupload.html";
import tpl_user_details_modal from "templates/user_details_modal.html";
import tpl_user_details_modal from "templates/user_details_modal.js";
import xss from "xss/dist/xss";
......@@ -130,6 +129,7 @@ converse.plugins.add('converse-chatview', {
_converse.UserDetailsModal = _converse.BootstrapModal.extend({
id: "user-details-modal",
events: {
'click button.remove-contact': 'removeContact',
......@@ -157,7 +157,6 @@ converse.plugins.add('converse-chatview', {
return tpl_user_details_modal(Object.assign(
this.model.toJSON(),
vcard_json, {
'__': __,
'view': this,
'_converse': _converse,
'allow_contact_removal': _converse.allow_contact_removal,
......@@ -616,7 +615,7 @@ converse.plugins.add('converse-chatview', {
* content area of the chat box.
* @private
* @method _converse.ChatBoxView#insertMessage
* @param { Backbone.View } message - The message Backbone.View
* @param { View } message - The message View
*/
insertMessage (view) {
if (view.model.get('type') === 'error') {
......@@ -1386,8 +1385,7 @@ converse.plugins.add('converse-chatview', {
* Get the view of an already open chat.
* @method _converse.api.chatviews.get
* @param { Array.string | string } jids
* @returns {ChatBoxView} A [Backbone.View](http://backbonejs.org/#View) instance.
* The chat should already be open, otherwise `undefined` will be returned.
* @returns { _converse.ChatBoxView|undefined } The chat should already be open, otherwise `undefined` will be returned.
* @example
* // To return a single view, provide the JID of the contact:
* _converse.api.chatviews.get('buddy@example.com')
......
src/converse-message-view.js
View file @ ad934079
......@@ -17,7 +17,7 @@ import tpl_csn from "templates/csn.html";
import tpl_file_progress from "templates/file_progress.html";
import tpl_info from "templates/info.html";
import tpl_message from "templates/message.html";
import tpl_message_versions_modal from "templates/message_versions_modal.html";
import tpl_message_versions_modal from "templates/message_versions_modal.js";
import tpl_spinner from "templates/spinner.html";
import xss from "xss/dist/xss";
......@@ -73,12 +73,9 @@ converse.plugins.add('converse-message-view', {
});
_converse.MessageVersionsModal = _converse.BootstrapModal.extend({
id: "message-versions-modal",
toHTML () {
return tpl_message_versions_modal(Object.assign(
this.model.toJSON(), {
'__': __,
'dayjs': dayjs
}));
return tpl_message_versions_modal(this.model.toJSON());
}
});
......
src/converse-minimize.js
View file @ ad934079
......@@ -16,7 +16,7 @@ import tpl_chats_panel from "templates/chats_panel.html";
import tpl_toggle_chats from "templates/toggle_chats.html";
import tpl_trimmed_chat from "templates/trimmed_chat.html";
const { _ , Backbone, dayjs } = converse.env;
const { _ , dayjs } = converse.env;
const u = converse.env.utils;
......
src/converse-modal.js
View file @ ad934079
// Converse.js
// https://conversejs.org
//
// Copyright (c) 2013-2019, the Converse.js developers
// Licensed under the Mozilla Public License (MPLv2)
/**
* @module converse-modal
* @copyright The Converse.js developers
* @license Mozilla Public License (MPLv2)
*/
import "backbone.vdomview";
import bootstrap from "bootstrap.native";
import converse from "@converse/headless/converse-core";
import { HTMLView } from 'skeletor.js/src/htmlview.js';
import { Model } from 'skeletor.js/src/model.js';
import { isString } from "lodash";
import tpl_alert from "templates/alert.html";
import tpl_alert_modal from "templates/alert_modal.html";
import tpl_prompt from "templates/prompt.html";
import { render } from 'lit-html';
import bootstrap from "bootstrap.native";
import converse from "@converse/headless/converse-core";
import log from "@converse/headless/log";
import tpl_alert_component from "templates/alert.js";
import tpl_alert_modal from "templates/alert_modal.js";
import tpl_prompt from "templates/prompt.js";
const { Backbone, sizzle } = converse.env;
const { sizzle } = converse.env;
const u = converse.env.utils;
......@@ -25,15 +24,24 @@ converse.plugins.add('converse-modal', {
const { _converse } = this;
const { __ } = _converse;
_converse.BootstrapModal = Backbone.VDOMView.extend({
_converse.BootstrapModal = HTMLView.extend({
className: "modal",
events: {
'click .nav-item .nav-link': 'switchTab'
},
initialize () {
this.render().insertIntoDOM();
this.modal = new bootstrap.Modal(this.el, {
this.render()
this.el.setAttribute('tabindex', '-1');
this.el.setAttribute('role', 'dialog');
this.el.setAttribute('aria-hidden', 'true');
const label_id = this.el.querySelector('.modal-title').getAttribute('id');
label_id && this.el.setAttribute('aria-labelledby', label_id);
this.insertIntoDOM();
const Modal = bootstrap.Modal;
this.modal = new Modal(this.el, {
backdrop: 'static',
keyboard: true
});
......@@ -57,14 +65,14 @@ converse.plugins.add('converse-modal', {
},
alert (message, type='primary') {
const body = this.el.querySelector('.modal-body');
body.insertAdjacentHTML(
'afterBegin',
tpl_alert({
'type': `alert-${type}`,
'message': message
})
);
const body = this.el.querySelector('.modal-alert');
if (body === null) {
log.error("Could not find a .modal-alert element in the modal to show an alert message in!");
return;
}
// FIXME: Instead of adding the alert imperatively, we should
// find a way to let the modal rerender with an alert message
render(tpl_alert_component({'type': `alert-${type}`, 'message': message}), body);
const el = body.firstElementChild;
setTimeout(() => {
u.addClass('fade-out', el);
......@@ -95,7 +103,7 @@ converse.plugins.add('converse-modal', {
},
toHTML () {
return tpl_prompt(Object.assign({__}, this.model.toJSON()));
return tpl_prompt(this.model.toJSON());
},
afterRender () {
......@@ -119,7 +127,7 @@ converse.plugins.add('converse-modal', {
_converse.Prompt = _converse.Confirm.extend({
toHTML () {
return tpl_prompt(Object.assign({__}, this.model.toJSON()));
return tpl_prompt(this.model.toJSON());
},
onConfimation (ev) {
......@@ -138,8 +146,7 @@ converse.plugins.add('converse-modal', {
},
toHTML () {
return tpl_alert_modal(
Object.assign({__}, this.model.toJSON()));
return tpl_alert_modal(Object.assign({__}, this.model.toJSON()));
}
});
......@@ -158,7 +165,6 @@ converse.plugins.add('converse-modal', {
let alert, prompt, confirm;
Object.assign(_converse.api, {
/**
* Show a confirm modal to the user.
* @method _converse.api.confirm
......
src/converse-muc-views.js
View file @ ad934079
......@@ -14,12 +14,12 @@ import { OrderedListView } from "skeletor.js/src/overview";
import { View } from "skeletor.js/src/view";
import converse from "@converse/headless/converse-core";
import log from "@converse/headless/log";
import tpl_add_chatroom_modal from "templates/add_chatroom_modal.html";
import tpl_add_chatroom_modal from "templates/add_chatroom_modal.js";
import tpl_chatarea from "templates/chatarea.html";
import tpl_chatroom from "templates/chatroom.html";
import tpl_chatroom_bottom_panel from "templates/chatroom_bottom_panel.html";
import tpl_chatroom_destroyed from "templates/chatroom_destroyed.html";
import tpl_chatroom_details_modal from "templates/chatroom_details_modal.html";
import tpl_chatroom_details_modal from "templates/chatroom_details_modal.js";
import tpl_chatroom_disconnect from "templates/chatroom_disconnect.html";
import tpl_chatroom_features from "templates/chatroom_features.html";
import tpl_chatroom_form from "templates/chatroom_form.html";
......@@ -29,8 +29,8 @@ import tpl_chatroom_nickname_form from "templates/chatroom_nickname_form.html";
import tpl_chatroom_password_form from "templates/chatroom_password_form.html";
import tpl_chatroom_sidebar from "templates/chatroom_sidebar.html";
import tpl_info from "templates/info.html";
import tpl_list_chatrooms_modal from "templates/list_chatrooms_modal.html";
import tpl_moderator_tools_modal from "templates/moderator_tools_modal.html";
import tpl_list_chatrooms_modal from "templates/list_chatrooms_modal.js";
import tpl_moderator_tools_modal from "templates/moderator_tools_modal.js";
import tpl_occupant from "templates/occupant.html";
import tpl_room_description from "templates/room_description.html";
import tpl_room_item from "templates/room_item.html";
......@@ -226,7 +226,7 @@ converse.plugins.add('converse-muc-views', {
_converse.ModeratorToolsModal = _converse.BootstrapModal.extend({
id: "converse-modtools-modal",
events: {
'submit .affiliation-form': 'assignAffiliation',
'submit .role-form': 'assignRole',
......@@ -271,7 +271,6 @@ converse.plugins.add('converse-muc-views', {
allowed_roles.sort();
return tpl_moderator_tools_modal(Object.assign(this.model.toJSON(), {
__,
allowed_affiliations,
allowed_roles,
'affiliations': [...AFFILIATIONS, 'none'],
......@@ -389,6 +388,7 @@ converse.plugins.add('converse-muc-views', {
_converse.ListChatRoomsModal = _converse.BootstrapModal.extend({
id: "list-chatrooms-modal",
events: {
'submit form': 'showRooms',
......@@ -409,9 +409,6 @@ converse.plugins.add('converse-muc-views', {
toHTML () {
const muc_domain = this.model.get('muc_domain') || _converse.muc_domain;
return tpl_list_chatrooms_modal(Object.assign(this.model.toJSON(), {
'heading_list_chatrooms': __('Query for Groupchats'),
'label_server_address': __('Server address'),
'label_query': __('Show groupchats'),
'show_form': !_converse.locked_muc_domain,
'server_placeholder': muc_domain ? muc_domain : __('conference.example.org')
}));
......@@ -523,6 +520,7 @@ converse.plugins.add('converse-muc-views', {
_converse.AddChatRoomModal = _converse.BootstrapModal.extend({
id: 'add-chatroom-modal',
events: {
'submit form.add-chatroom': 'openChatRoom',
......@@ -543,7 +541,6 @@ converse.plugins.add('converse-muc-views', {
placeholder = muc_domain ? `name@${muc_domain}` : __('name@conference.example.org');
}
return tpl_add_chatroom_modal(Object.assign(this.model.toJSON(), {
'__': _converse.__,
'_converse': _converse,
'label_room_address': _converse.muc_domain ? __('Groupchat name') : __('Groupchat address'),
'chatroom_placeholder': placeholder,
......@@ -616,6 +613,7 @@ converse.plugins.add('converse-muc-views', {
_converse.RoomDetailsModal = _converse.BootstrapModal.extend({
id: "room-details-modal",
initialize () {
_converse.BootstrapModal.prototype.initialize.apply(this, arguments);
......@@ -627,12 +625,10 @@ converse.plugins.add('converse-muc-views', {
toHTML () {
return tpl_chatroom_details_modal(Object.assign(
this.model.toJSON(), {
'__': __,
'config': this.model.config.toJSON(),
'display_name': __('Groupchat info for %1$s', this.model.getDisplayName()),
'features': this.model.features.toJSON(),
'num_occupants': this.model.occupants.length,
'topic': u.addHyperlinks(xss.filterXSS(get(this.model.get('subject'), 'text'), {'whiteList': {}}))
})
);
}
......
src/converse-profile.js
View file @ ad934079
// Converse.js (A browser based XMPP chat client)
// https://conversejs.org
//
// Copyright (c) 2013-2017, Jan-Carel Brand <jc@opkode.com>
// Licensed under the Mozilla Public License (MPLv2)
//
/**
* @module converse-profile
* @copyright The Converse.js developers
* @license Mozilla Public License (MPLv2)
*/
import "@converse/headless/converse-status";
import "@converse/headless/converse-vcard";
......@@ -14,12 +10,12 @@ import "formdata-polyfill";
import bootstrap from "bootstrap.native";
import converse from "@converse/headless/converse-core";
import log from "@converse/headless/log";
import tpl_chat_status_modal from "templates/chat_status_modal.html";
import tpl_client_info_modal from "templates/client_info_modal.html";
import tpl_profile_modal from "templates/profile_modal.html";
import tpl_profile_view from "templates/profile_view.html";
import sizzle from 'sizzle';
import tpl_chat_status_modal from "templates/chat_status_modal";
import tpl_client_info_modal from "templates/client_info_modal";
import tpl_profile from "templates/profile.js";
import tpl_profile_modal from "templates/profile_modal";
const { sizzle } = converse.env;
const u = converse.env.utils;
......@@ -40,6 +36,7 @@ converse.plugins.add('converse-profile', {
_converse.ProfileModal = _converse.BootstrapModal.extend({
id: "user-profile-modal",
events: {
'change input[type="file"': "updateFilePreview",
'click .change-avatar': "openFileSelection",
......@@ -62,20 +59,7 @@ converse.plugins.add('converse-profile', {
return tpl_profile_modal(Object.assign(
this.model.toJSON(),
this.model.vcard.toJSON(), {
'__': __,
'_converse': _converse,
'alt_avatar': __('Your avatar image'),
'heading_profile': __('Your Profile'),
'label_close': __('Close'),
'label_email': __('Email'),
'label_fullname': __('Full Name'),
'label_jid': __('XMPP Address (JID)'),
'label_nickname': __('Nickname'),
'label_role': __('Role'),
'label_role_help': __(
'Use commas to separate multiple roles. '+
'Your roles are shown next to your name on your chat messages.'),
'label_url': __('URL'),
'utils': u,
'view': this
}));
......@@ -146,6 +130,7 @@ converse.plugins.add('converse-profile', {
_converse.ChatStatusModal = _converse.BootstrapModal.extend({
id: "modal-status-change",
events: {
"submit form#set-xmpp-status": "onFormSubmitted",
"click .clear-input": "clearStatusMessage"
......@@ -157,9 +142,9 @@ converse.plugins.add('converse-profile', {
this.model.toJSON(),
this.model.vcard.toJSON(), {
'label_away': __('Away'),
'label_close': __('Close'),
'label_busy': __('Busy'),
'label_cancel': __('Cancel'),
'label_close': __('Close'),
'label_custom_status': __('Custom status'),
'label_offline': __('Offline'),
'label_online': __('Online'),
......@@ -197,31 +182,20 @@ converse.plugins.add('converse-profile', {
});
_converse.ClientInfoModal = _converse.BootstrapModal.extend({
id: "converse-client-info-modal",
toHTML () {
return tpl_client_info_modal(
Object.assign(
this.model.toJSON(),
this.model.vcard.toJSON(), {
'__': __,
'modal_title': __('About'),
'version_name': _converse.VERSION_NAME,
'first_subtitle': __( '%1$s Open Source %2$s XMPP chat client brought to you by %3$s Opkode %2$s',
'<a target="_blank" rel="nofollow" href="https://conversejs.org">',
'</a>',
'<a target="_blank" rel="nofollow" href="https://opkode.com">'
),
'second_subtitle': __('%1$s Translate %2$s it into your own language',
'<a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">',
'</a>'
)
}
this.model.vcard.toJSON(),
{ 'version_name': _converse.VERSION_NAME }
)
);
}
});
_converse.XMPPStatusView = _converse.VDOMViewWithAvatar.extend({
_converse.XMPPStatusView = _converse.HTMLViewWithAvatar.extend({
tagName: "div",
events: {
"click a.show-profile": "showProfileModal",
......@@ -237,20 +211,14 @@ converse.plugins.add('converse-profile', {
toHTML () {
const chat_status = this.model.get('status') || 'offline';
return tpl_profile_view(Object.assign(
return tpl_profile(Object.assign(
this.model.toJSON(),
this.model.vcard.toJSON(), {
'__': __,
_converse,
chat_status,
'fullname': this.model.vcard.get('fullname') || _converse.bare_jid,
'status_message': this.model.get('status_message') ||
__("I am %1$s", this.getPrettyStatus(chat_status)),
'chat_status': chat_status,
'_converse': _converse,
'title_change_settings': __('Change settings'),
'title_change_status': __('Click to change your chat status'),
'title_log_out': __('Log out'),
'info_details': __('Show details about this chat client'),
'title_your_profile': __('Your profile')
__("I am %1$s", this.getPrettyStatus(chat_status))
}));
},
......@@ -306,7 +274,6 @@ converse.plugins.add('converse-profile', {
/******************** Event Handlers ********************/
_converse.api.listen.on('controlBoxPaneInitialized', async view => {
await _converse.api.waitUntil('VCardsInitialized');
_converse.xmppstatusview = new _converse.XMPPStatusView({'model': _converse.xmppstatus});
......@@ -314,4 +281,3 @@ converse.plugins.add('converse-profile', {
});
}
});
src/converse-rosterview.js
View file @ ad934079
// Converse.js
// https://conversejs.org
//
// Copyright (c) 2013-2019, the Converse.js developers
// Licensed under the Mozilla Public License (MPLv2)
/**
* @module converse-rosterview
* @copyright 2013-2019, the Converse.js developers
* @license Mozilla Public License (MPLv2)
*/
import "@converse/headless/converse-chatboxes";
import "@converse/headless/converse-roster";
......@@ -16,7 +13,7 @@ import { OrderedListView } from "skeletor.js/src/overview";
import SHA1 from 'strophe.js/src/sha1';
import converse from "@converse/headless/converse-core";
import log from "@converse/headless/log";
import tpl_add_contact_modal from "templates/add_contact_modal.html";
import tpl_add_contact_modal from "templates/add_contact_modal.js";
import tpl_group_header from "templates/group_header.html";
import tpl_pending_contact from "templates/pending_contact.html";
import tpl_requesting_contact from "templates/requesting_contact.html";
......@@ -61,6 +58,7 @@ converse.plugins.add('converse-rosterview', {
_converse.AddContactModal = _converse.BootstrapModal.extend({
id: "add-contact-modal",
events: {
'submit form': 'addContactFromForm'
},
......@@ -74,12 +72,7 @@ converse.plugins.add('converse-rosterview', {
const label_nickname = _converse.xhr_user_search_url ? __('Contact name') : __('Optional nickname');
return tpl_add_contact_modal(Object.assign(this.model.toJSON(), {
'_converse': _converse,
'heading_new_contact': __('Add a Contact'),
'label_xmpp_address': __('XMPP Address'),
'label_nickname': label_nickname,
'contact_placeholder': __('name@example.org'),
'label_add': __('Add'),
'error_message': __('Please enter a valid XMPP address')
}));
},
......
src/headless/converse-core.js
View file @ ad934079
......@@ -3,8 +3,10 @@
* @copyright The Converse.js developers
* @license Mozilla Public License (MPLv2)
*/
import { __, i18n } from './i18n';
import { assignIn, debounce, get, invoke, isFunction, isObject, isString, pick } from 'lodash';
import { Collection } from "skeletor.js/src/collection";
import { Events } from 'skeletor.js/src/events.js';
import { Model } from 'skeletor.js/src/model.js';
import { Router } from 'skeletor.js/src/router.js';
import 'strophe.js/src/websocket';
......@@ -15,7 +17,6 @@ import Backbone from 'backbone';
import Storage from 'skeletor.js/src/storage.js';
import advancedFormat from 'dayjs/plugin/advancedFormat';
import dayjs from 'dayjs';
import i18n from './i18n';
import log from '@converse/headless/log';
import pluggable from 'pluggable.js/src/pluggable';
import sizzle from 'sizzle';
......@@ -114,7 +115,7 @@ const _converse = {
_converse.VERSION_NAME = "v6.0.1dev";
Object.assign(_converse, Backbone.Events);
Object.assign(_converse, Events);
_converse.router = new Router();
......@@ -258,12 +259,7 @@ _converse.default_settings = {
* @memberOf _converse
* @param { String } str - The string to translate
*/
_converse.__ = function (str) {
if (i18n === undefined) {
return str;
}
return i18n.translate.apply(i18n, arguments);
};
_converse.__ = __;
/**
......@@ -287,8 +283,6 @@ _converse.___ = function (str) {
}
const __ = _converse.__;
const PROMISES = [
'afterResourceBinding',
'connectionInitialized',
......@@ -1019,7 +1013,7 @@ _converse.initialize = async function (settings, callback) {
);
/* Localisation */
if (i18n === undefined || _converse.isTestEnv()) {
if (_converse.isTestEnv()) {
_converse.locale = 'en';
} else {
try {
......@@ -1027,6 +1021,7 @@ _converse.initialize = async function (settings, callback) {
await i18n.fetchTranslations(_converse);
} catch (e) {
log.fatal(e.message);
_converse.locale = 'en';
}
}
......
src/headless/i18n.js
View file @ ad934079
......@@ -70,7 +70,7 @@ let jed_instance;
/**
* @namespace i18n
*/
export default {
export const i18n = {
getLocale (preferred_locale, available_locales) {
return getLocale(preferred_locale, preferred => isConverseLocale(preferred, available_locales));
......@@ -105,3 +105,8 @@ export default {
jed_instance = new Jed(data);
}
};
export const __ = function () {
return i18n.translate.apply(i18n, arguments);
}
src/headless/package.json
View file @ ad934079
......@@ -26,7 +26,7 @@
},
"gitHead": "9641dcdc820e029b05930479c242d2b707bbe8e2",
"devDependencies": {
"skeletor.js": "skeletorjs/skeletor#abc4e9d25d30159e9cffc14bf5f7ffe17b3665eb",
"skeletor.js": "skeletorjs/skeletor#29a6d8f707076e865133b8f36f07c76ba4b4b582",
"backbone": "1.4",
"backbone.browserStorage": "conversejs/backbone.browserStorage#674ba3aa0e4d0f0b0dcac48fcc7dea531012828f",
"filesize": "^4.1.2",
......
src/headless/polyfill.js
View file @ ad934079
function CustomEvent ( event, params ) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent( 'CustomEvent' );
const evt = document.createEvent( 'CustomEvent' );
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
return evt;
}
......@@ -25,12 +25,12 @@ if (!String.prototype.includes) {
if (!String.prototype.endsWith) {
String.prototype.endsWith = function (searchString, position) {
var subjectString = this.toString();
const subjectString = this.toString();
if (position === undefined || position > subjectString.length) {
position = subjectString.length;
}
position -= searchString.length;
var lastIndex = subjectString.indexOf(searchString, position);
const lastIndex = subjectString.indexOf(searchString, position);
return lastIndex !== -1 && lastIndex === position;
};
}
......@@ -44,7 +44,7 @@ if (!String.prototype.startsWith) {
if (!String.prototype.splitOnce) {
String.prototype.splitOnce = function (delimiter) {
var components = this.split(delimiter);
const components = this.split(delimiter);
return [components.shift(), components.join(delimiter)];
};
}
......
src/templates/add_chatroom_modal.html deleted 100644 → 0
View file @ a8104d74
<div class="modal" id="add-chatroom-modal" tabindex="-1" role="dialog" aria-labelledby="add-chatroom-modal-label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="add-chatroom-modal-label">{{{o.__('Enter a new Groupchat')}}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="converse-form add-chatroom">
<div class="form-group">
<label for="chatroom">{{{o.label_room_address}}}:</label>
{[ if (o.muc_roomid_policy_error_msg) { ]}
<label class="roomid-policy-error">{{{o.muc_roomid_policy_error_msg}}}</label>
{[ } ]}
<input type="text" required="required" name="chatroom" class="form-control roomjid-input" placeholder="{{{o.chatroom_placeholder}}}"/>
</div>
{[ if (o.muc_roomid_policy_hint) { ]}
<div class="form-group">
{{o.muc_roomid_policy_hint}}
</div>
{[ } ]}
{[ if (!o._converse.locked_muc_nickname) { ]}
<div class="form-group" >
<label for="nickname">{{{o.__('Nickname')}}}:</label>
<input type="text" pattern=".*\S+.*" title="{{{o.__('This field is required')}}}" required="required" name="nickname" value="{{{o.nick}}}" class="form-control"/>
</div>
{[ } ]}
<input type="submit" class="btn btn-primary" name="join" value="{{{o.__('Join')}}}" {[ if (o.muc_roomid_policy_error_msg) { ]} disabled=true {[ } ]}/>
</form>
</div>
</div>
</div>
</div>
src/templates/add_chatroom_modal.js 0 → 100644
View file @ ad934079
import { html } from "lit-html";
import { __ } from '@converse/headless/i18n';
import { modal_header_close_button } from "./buttons"
const i18n_join = __('Join');
const i18n_enter = __('Enter a new Groupchat');
const i18n_nickname = __('Nickname');
const i18n_required_field = __('This field is required');
const nickname_input = (o) => html`
<div class="form-group" >
<label for="nickname">${i18n_nickname}:</label>
<input type="text" title="${i18n_required_field}" required="required" name="nickname" value="${o.nick || ''}" class="form-control"/>
</div>
`;
export default (o) => html`
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="add-chatroom-modal-label">${i18n_enter}</h5>
${modal_header_close_button}
</div>
<div class="modal-body">
<span class="modal-alert"></span>
<form class="converse-form add-chatroom">
<div class="form-group">
<label for="chatroom">${o.label_room_address}:</label>
${ (o.muc_roomid_policy_error_msg) ? html`<label class="roomid-policy-error">${o.muc_roomid_policy_error_msg}</label>` : '' }
<input type="text" required="required" name="chatroom" class="form-control roomjid-input" placeholder="${o.chatroom_placeholder}"/>
</div>
${ o.muc_roomid_policy_hint ? html`<div class="form-group">{{o.muc_roomid_policy_hint}}</div>` : '' }
${ !o._converse.locked_muc_nickname ? nickname_input(o) : '' }
<input type="submit" class="btn btn-primary" name="join" value="${i18n_join || ''}" ?disabled=${o.muc_roomid_policy_error_msg}>
</form>
</div>
</div>
</div>
`;
src/templates/add_contact_modal.html → src/templates/add_contact_modal.js
View file @ ad934079
<!-- Add contact Modal -->
<div class="modal" id="add-contact-modal" tabindex="-1" role="dialog" aria-labelledby="addContactModalLabel" aria-hidden="true">
import { html } from "lit-html";
import { __ } from '@converse/headless/i18n';
import { modal_header_close_button } from "./buttons"
const i18n_contact_placeholder = __('name@example.org');
const i18n_add = __('Add');
const i18n_error_message = __('Please enter a valid XMPP address');
const i18n_new_contact = __('Add a Contact');
const i18n_xmpp_address = __('XMPP Address');
const i18n_nickname = __('Nickname');
export default (o) => html`
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addContactModalLabel">{{{o.heading_new_contact}}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h5 class="modal-title" id="addContactModalLabel">${i18n_new_contact}</h5>
${modal_header_close_button}
</div>
<form class="converse-form add-xmpp-contact">
<div class="modal-body">
<span class="modal-alert"></span>
<div class="form-group add-xmpp-contact__jid">
<label class="clearfix" for="jid">{{{o.label_xmpp_address}}}:</label>
<label class="clearfix" for="jid">${i18n_xmpp_address}:</label>
<div class="suggestion-box suggestion-box__jid">
<ul class="suggestion-box__results suggestion-box__results--above" hidden=""></ul>
<input type="text" name="jid"
{[ if (!o._converse.xhr_user_search_url) { ]} required="required" {[ } ]}
value="{{{o.jid}}}"
class="form-control suggestion-box__input"
placeholder="{{{o.contact_placeholder}}}"/>
<input type="text" name="jid" ?required=${(!o._converse.xhr_user_search_url)}
value="${o.jid || ''}"
class="form-control suggestion-box__input"
placeholder="${i18n_contact_placeholder}"/>
<span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span>
</div>
</div>
<div class="form-group add-xmpp-contact__name">
<label class="clearfix" for="name">{{{o.label_nickname}}}:</label>
<label class="clearfix" for="name">${i18n_nickname}:</label>
<div class="suggestion-box suggestion-box__name">
<ul class="suggestion-box__results suggestion-box__results--above" hidden=""></ul>
<input type="text" name="name" value="{{{o.nickname}}}"
class="form-control suggestion-box__input"
placeholder="{{{o.nickname_placeholder}}}"/>
<input type="text" name="name" value="${o.nickname || ''}"
class="form-control suggestion-box__input"
placeholder="${i18n_nickname}"/>
<span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span>
</div>
</div>
<div class="form-group">
<div class="invalid-feedback">{{{o.error_message}}}</div>
<div class="invalid-feedback">${i18n_error_message}</div>
</div>
<button type="submit" class="btn btn-primary">{{{o.label_add}}}</button>
<button type="submit" class="btn btn-primary">${i18n_add}</button>
</div>
</form>
</div>
</div>
</div>
`;
src/templates/alert.html deleted 100644 → 0
View file @ a8104d74
<div class="alert {{{o.type}}}" role="alert"><p>{{{o.message}}}</p></div>
src/templates/alert.js 0 → 100644
View file @ ad934079
import { html } from "lit-html";
export default (o) => html`<div class="alert ${o.type}" role="alert"><p>${o.message}</p></div>`
src/templates/alert_modal.html deleted 100644 → 0
View file @ a8104d74
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header {{{o.level}}}">
<h5 class="modal-title">{{{o.title}}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">{[o.messages.forEach(function (message) { ]}
<p>{{{message}}}</p>
{[ }) ]}
</div>
</div>
</div>
</div>
src/templates/alert_modal.js 0 → 100644
View file @ ad934079
import { html } from "lit-html";
import { modal_header_close_button } from "./buttons"
export default (o) => html`
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header ${o.level}">
<h5 class="modal-title">${o.title}</h5>
${modal_header_close_button}
</div>
<div class="modal-body">
<span class="modal-alert"></span>
${ o.messages.map(message => html`<p>${message}</p>`) }
</div>
</div>
</div>
`;
src/templates/avatar.js 0 → 100644
View file @ ad934079
import { html } from "lit-html";
export default (o) => html`
<img alt="${o.alt_text}" class="img-thumbnail avatar align-self-center ${o.extra_classes}"
height="100px" width="100px" src="data:${o.image_type};base64,${o.image}"/>`;
src/templates/buttons.js 0 → 100644
View file @ ad934079
import { __ } from '@converse/headless/i18n';
import { html } from "lit-html";
const i18n_close = __('Close');
export const modal_close_button = html`<button type="button" class="btn btn-secondary" data-dismiss="modal">${i18n_close}</button>`;
export const modal_header_close_button = html`<button type="button" class="close" data-dismiss="modal" aria-label="${i18n_close}"><span aria-hidden="true">×</span></button>`;
src/templates/chat_status_modal.html → src/templates/chat_status_modal.js
View file @ ad934079
<!-- Change status Modal -->
<div class="modal" id="modal-status-change" tabindex="-1" role="dialog" aria-labelledby="changeStatusModalLabel" aria-hidden="true">
import { html } from "lit-html";
import { modal_header_close_button } from "./buttons"
export default (o) => html`
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="changeStatusModalLabel">{{{o.modal_title}}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title" id="changeStatusModalLabel">${o.modal_title}</h5>
${modal_header_close_button}
</div>
<div class="modal-body">
<span class="modal-alert"></span>
<form class="converse-form set-xmpp-status" id="set-xmpp-status">
<div class="form-group">
<div class="custom-control custom-radio">
<input {[ if (o.status === 'online') { ]} checked="checked" {[ } ]}
type="radio" id="radio-online" value="online" name="chat_status" class="custom-control-input"/>
<input ?checked=${o.status === 'online'}
type="radio" id="radio-online" value="online" name="chat_status" class="custom-control-input"/>
<label class="custom-control-label" for="radio-online">
<span class="fa fa-circle chat-status chat-status--online"></span>{{{o.label_online}}}</label>
<span class="fa fa-circle chat-status chat-status--online"></span>${o.label_online}</label>
</div>
<div class="custom-control custom-radio">
<input {[ if (o.status === 'busy') { ]} checked="checked" {[ } ]}
type="radio" id="radio-busy" value="dnd" name="chat_status" class="custom-control-input"/>
<input ?checked=${o.status === 'busy'}
type="radio" id="radio-busy" value="dnd" name="chat_status" class="custom-control-input"/>
<label class="custom-control-label" for="radio-busy">
<span class="fa fa-minus-circle chat-status chat-status--busy"></span>{{{o.label_busy}}}</label>
<span class="fa fa-minus-circle chat-status chat-status--busy"></span>${o.label_busy}</label>
</div>
<div class="custom-control custom-radio">
<input {[ if (o.status === 'away') { ]} checked="checked" {[ } ]}
type="radio" id="radio-away" value="away" name="chat_status" class="custom-control-input"/>
<input ?checked=${o.status === 'away'}
type="radio" id="radio-away" value="away" name="chat_status" class="custom-control-input"/>
<label class="custom-control-label" for="radio-away">
<span class="fa fa-circle chat-status chat-status--away"></span>{{{o.label_away}}}</label>
<span class="fa fa-circle chat-status chat-status--away"></span>${o.label_away}</label>
</div>
<div class="custom-control custom-radio">
<input {[ if (o.status === 'xa') { ]} checked="checked" {[ } ]}
type="radio" id="radio-xa" value="xa" name="chat_status" class="custom-control-input"/>
<input ?checked=${o.status === 'xa'}
type="radio" id="radio-xa" value="xa" name="chat_status" class="custom-control-input"/>
<label class="custom-control-label" for="radio-xa">
<span class="far fa-circle chat-status chat-status--xa"></span>{{{o.label_xa}}}</label>
<span class="far fa-circle chat-status chat-status--xa"></span>${o.label_xa}</label>
</div>
</div>
<div class="form-group">
<div class="btn-group w-100">
<input name="status_message" type="text" class="form-control"
value="{{{o.status_message}}}" placeholder="{{{o.placeholder_status_message}}}"/>
<span class="clear-input fa fa-times {[ if (!o.status_message) { ]} hidden {[ } ]}"></span>
<input name="status_message" type="text" class="form-control"
value="${o.status_message || ''}" placeholder="${o.placeholder_status_message}"/>
<span class="clear-input fa fa-times ${o.status_message ? '' : 'hidden'}"></span>
</div>
</div>
<button type="submit" class="btn btn-primary">{{{o.label_save}}}</button>
<button type="submit" class="btn btn-primary">${o.label_save}</button>
</form>
</div>
</div>
</div>
</div>
`;
src/templates/chatroom_details_modal.html deleted 100644 → 0
View file @ a8104d74
<div class="modal" id="room-details-modal" tabindex="-1" role="dialog" aria-labelledby="room-details-modal-label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="room-details-modal-label">{{{o.display_name}}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="room-info">
<p class="room-info"><strong>{{{o.__('Name')}}}</strong>: {{{o.name}}}</p>
<p class="room-info"><strong>{{{o.__('Groupchat address (JID)')}}}</strong>: {{{o.jid}}}</p>
<p class="room-info"><strong>{{{o.__('Description')}}}</strong>: {{{o.config.description}}}</p>
{[ if (o.subject) { ]}
<p class="room-info"><strong>{{{o.__('Topic')}}}</strong>: {{o.topic}}</p> <!-- Sanitized in converse-muc-views. We want to render links. -->
<p class="room-info"><strong>{{{o.__('Topic author')}}}</strong>: {{{o.subject && o.subject.author}}}</p>
{[ } ]}
<p class="room-info"><strong>{{{o.__('Online users')}}}</strong>: {{{o.num_occupants}}}</p>
<p class="room-info"><strong>{{{o.__('Features')}}}</strong>:
<div class="chatroom-features">
<ul class="features-list">
{[ if (o.features.passwordprotected) { ]}
<li class="feature" ><span class="fa fa-lock"></span>{{{ o.__('Password protected') }}} - <em>{{{ o.__('This groupchat requires a password before entry') }}}</em></li>
{[ } ]}
{[ if (o.features.unsecured) { ]}
<li class="feature" ><span class="fa fa-unlock"></span>{{{ o.__('No password required') }}} - <em>{{{ o.__('This groupchat does not require a password upon entry') }}}</em></li>
{[ } ]}
{[ if (o.features.hidden) { ]}
<li class="feature" ><span class="fa fa-eye-slash"></span>{{{ o.__('Hidden') }}} - <em>{{{ o.__('This groupchat is not publicly searchable') }}}</em></li>
{[ } ]}
{[ if (o.features.public_room) { ]}
<li class="feature" ><span class="fa fa-eye"></span>{{{ o.__('Public') }}} - <em>{{{ o.__('This groupchat is publicly searchable') }}}</em></li>
{[ } ]}
{[ if (o.features.membersonly) { ]}
<li class="feature" ><span class="fa fa-address-book"></span>{{{ o.__('Members only') }}} - <em>{{{ o.__('This groupchat is restricted to members only') }}}</em></li>
{[ } ]}
{[ if (o.features.open) { ]}
<li class="feature" ><span class="fa fa-globe"></span>{{{ o.__('Open') }}} - <em>{{{ o.__('Anyone can join this groupchat') }}}</em></li>
{[ } ]}
{[ if (o.features.persistent) { ]}
<li class="feature" ><span class="fa fa-save"></span>{{{ o.__('Persistent') }}} - <em>{{{ o.__('This groupchat persists even if it\'s unoccupied') }}}</em></li>
{[ } ]}
{[ if (o.features.temporary) { ]}
<li class="feature" ><span class="fa fa-snowflake-o"></span>{{{ o.__('Temporary') }}} - <em>{{{ o.__('This groupchat will disappear once the last person leaves') }}}</em></li>
{[ } ]}
{[ if (o.features.nonanonymous) { ]}
<li class="feature" ><span class="fa fa-id-card"></span>{{{ o.__('Not anonymous') }}} - <em>{{{ o.__('All other groupchat participants can see your XMPP address') }}}</em></li>
{[ } ]}
{[ if (o.features.semianonymous) { ]}
<li class="feature" ><span class="fa fa-user-secret"></span>{{{ o.__('Semi-anonymous') }}} - <em>{{{ o.__('Only moderators can see your XMPP address') }}}</em></li>
{[ } ]}
{[ if (o.features.moderated) { ]}
<li class="feature" ><span class="fa fa-gavel"></span>{{{ o.__('Moderated') }}} - <em>{{{ o.__('Participants entering this groupchat need to request permission to write') }}}</em></li>
{[ } ]}
{[ if (o.features.unmoderated) { ]}
<li class="feature" ><span class="fa fa-info-circle"></span>{{{ o.__('Not moderated') }}} - <em>{{{ o.__('Participants entering this groupchat can write right away') }}}</em></li>
{[ } ]}
{[ if (o.features.mam_enabled) { ]}
<li class="feature" ><span class="fa fa-database"></span>{{{ o.__('Message archiving') }}} - <em>{{{ o.__('Messages are archived on the server') }}}</em></li>
{[ } ]}
</ul>
</div>
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">{{{o.__('Close')}}}</button>
</div>
</div>
</div>
</div>
src/templates/chatroom_details_modal.js 0 → 100644
View file @ ad934079
import { __ } from '@converse/headless/i18n';
import { html } from "lit-html";
import { modal_close_button, modal_header_close_button } from "./buttons"
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
import xss from "xss/dist/xss";
const i18n_address = __('Groupchat address (JID)');
const i18n_archiving = __('Message archiving');
const i18n_archiving_help = __('Messages are archived on the server');
const i18n_close = __('Close');
const i18n_desc = __('Description');
const i18n_features = __('Features');
const i18n_hidden = __('Hidden');
const i18n_hidden_help = __('This groupchat is not publicly searchable');
const i18n_members_help = __('This groupchat is restricted to members only');
const i18n_members_only = __('Members only');
const i18n_moderated = __('Moderated');
const i18n_moderated_help = __('Participants entering this groupchat need to request permission to write');
const i18n_name = __('Name');
const i18n_no_pass_help = __('This groupchat does not require a password upon entry');
const i18n_no_password_required = __('No password required');
const i18n_not_anonymous = __('Not anonymous');
const i18n_not_anonymous_help = __('All other groupchat participants can see your XMPP address');
const i18n_not_moderated = __('Not moderated');
const i18n_not_moderated_help = __('Participants entering this groupchat can write right away');
const i18n_online_users = __('Online users');
const i18n_open = __('Open');
const i18n_open_help = __('Anyone can join this groupchat');
const i18n_password_help = __('This groupchat requires a password before entry');
const i18n_password_protected = __('Password protected');
const i18n_persistent = __('Persistent');
const i18n_persistent_help = __('This groupchat persists even if it\'s unoccupied');
const i18n_public = __('Public');
const i18n_semi_anon = __('Semi-anonymous');
const i18n_semi_anon_help = __('Only moderators can see your XMPP address');
const i18n_temporary = __('Temporary');
const i18n_temporary_help = __('This groupchat will disappear once the last person leaves');
const i18n_topic = __('Topic');
const i18n_topic_author = __('Topic author');
const subject = (o) => html`
<p class="room-info"><strong>${i18n_topic}</strong>: ${unsafeHTML(xss.filterXSS(o.subject.text, {'whitelist': {}}))}</p>
<p class="room-info"><strong>${i18n_topic_author}</strong>: ${o.subject && o.subject.author}</p>
`;
export default (o) => html`
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="room-details-modal-label">${o.display_name}</h5>
${modal_header_close_button}
</div>
<div class="modal-body">
<span class="modal-alert"></span>
<div class="room-info">
<p class="room-info"><strong>${i18n_name}</strong>: ${o.name}</p>
<p class="room-info"><strong>${i18n_address}</strong>: ${o.jid}</p>
<p class="room-info"><strong>${i18n_desc}</strong>: ${o.config.description}</p>
${ (o.subject) ? subject(o) : '' }
<p class="room-info"><strong>${i18n_online_users}</strong>: ${o.num_occupants}</p>
<p class="room-info"><strong>${i18n_features}</strong>:
<div class="chatroom-features">
<ul class="features-list">
${ o.features.passwordprotected ? html`<li class="feature" ><span class="fa fa-lock"></span>${i18n_password_protected} - <em>${i18n_password_help}</em></li>` : '' }
${ o.features.unsecured ? html`<li class="feature" ><span class="fa fa-unlock"></span>${i18n_no_password_required} - <em>${i18n_no_pass_help}</em></li>` : '' }
${ o.features.hidden ? html`<li class="feature" ><span class="fa fa-eye-slash"></span>${i18n_hidden} - <em>${i18n_hidden_help}</em></li>` : '' }
${ o.features.public_room ? html`<li class="feature" ><span class="fa fa-eye"></span>${i18n_public} - <em>${o.__('This groupchat is publicly searchable') }</em></li>` : '' }
${ o.features.membersonly ? html`<li class="feature" ><span class="fa fa-address-book"></span>${i18n_members_only} - <em>${i18n_members_help}</em></li>` : '' }
${ o.features.open ? html`<li class="feature" ><span class="fa fa-globe"></span>${i18n_open} - <em>${i18n_open_help}</em></li>` : '' }
${ o.features.persistent ? html`<li class="feature" ><span class="fa fa-save"></span>${i18n_persistent} - <em>${i18n_persistent_help}</em></li>` : '' }
${ o.features.temporary ? html`<li class="feature" ><span class="fa fa-snowflake-o"></span>${i18n_temporary} - <em>${i18n_temporary_help}</em></li>` : '' }
${ o.features.nonanonymous ? html`<li class="feature" ><span class="fa fa-id-card"></span>${i18n_not_anonymous} - <em>${i18n_not_anonymous_help}</em></li>` : '' }
${ o.features.semianonymous ? html`<li class="feature" ><span class="fa fa-user-secret"></span>${i18n_semi_anon} - <em>${i18n_semi_anon_help}</em></li>` : '' }
${ o.features.moderated ? html`<li class="feature" ><span class="fa fa-gavel"></span>${i18n_moderated} - <em>${i18n_moderated_help}</em></li>` : '' }
${ o.features.unmoderated ? html`<li class="feature" ><span class="fa fa-info-circle"></span>${i18n_not_moderated} - <em>${i18n_not_moderated_help}</em></li>` : '' }
${ o.features.mam_enabled ? html`<li class="feature" ><span class="fa fa-database"></span>${i18n_archiving} - <em>${i18n_archiving_help}</em></li>` : '' }
</ul>
</div>
</p>
</div>
</div>
<div class="modal-footer">${modal_close_button}</div>
</div>
</div>
`;
src/templates/chatroom_registration_modal.html deleted 100644 → 0
View file @ a8104d74
<div class="modal" id="room-registration-modal" tabindex="-1" role="dialog" aria-labelledby="room-registration-modal-label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="room-registration-modal-label">{{{o.display_name}}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form class="converse-form">
{[ if (o.feedback.get('error')) { ]} <div class="alert alert-danger" role="alert">{{{o.feedback.get('error')}}}</div> {[ } ]}
{[ if (!o.feedback.get('error')) { ]} <span class="spinner fa fa-spinner"></span> {[ } ]}
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{{o.__('Close')}}}</button>
</div>
</div>
</div>
</div>
src/templates/client_info_modal.html deleted 100644 → 0
View file @ a8104d74
<!-- Change status Modal -->
<div class="modal" id="modal-status-change" tabindex="-1" role="dialog" aria-labelledby="changeStatusModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="changeStatusModalLabel">{{{o.modal_title}}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container brand-heading-container">
<h6 class="brand-heading">Converse</h6>
<p class="brand-subtitle">{{{o.version_name}}}</p>
<p class="brand-subtitle">{{o.first_subtitle}}</p>
<p class="brand-subtitle">{{o.second_subtitle}}</p>
</div>
</div>
</div>
</div>
</div>
src/templates/client_info_modal.js 0 → 100644
View file @ ad934079
import { __ } from '@converse/headless/i18n';
import { html } from "lit-html";
import { modal_header_close_button } from "./buttons"
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
import xss from "xss/dist/xss";
const modal_title = __('About');
const first_subtitle = __(
'%1$s Open Source %2$s XMPP chat client brought to you by %3$s Opkode %2$s',
'<a target="_blank" rel="nofollow" href="https://conversejs.org">',
'</a>',
'<a target="_blank" rel="nofollow" href="https://opkode.com">'
);
const second_subtitle = __(
'%1$s Translate %2$s it into your own language',
'<a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">',
'</a>'
);
export default (o) => html`
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="changeStatusModalLabel">${modal_title}</h5>
${modal_header_close_button}
</div>
<div class="modal-body">
<span class="modal-alert"></span>
<div class="container brand-heading-container">
<h6 class="brand-heading">Converse</h6>
<p class="brand-subtitle">${o.version_name}</p>
<p class="brand-subtitle">${unsafeHTML(xss.filterXSS(first_subtitle, {'whiteList': {'a': []}}))}</p>
<p class="brand-subtitle">${unsafeHTML(xss.filterXSS(second_subtitle, {'whiteList': {'a': []}}))}</p>
</div>
</div>
</div>
</div>
`;
src/templates/list_chatrooms_modal.html deleted 100644 → 0
View file @ a8104d74
<div class="modal" id="list-chatrooms-modal" tabindex="-1" role="dialog" aria-labelledby="list-chatrooms-modal-label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="list-chatrooms-modal-label">{{{o.heading_list_chatrooms}}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body d-flex flex-column">
{[ if (o.show_form) { ]}
<form class="converse-form list-chatrooms">
<div class="form-group">
<label for="chatroom">{{{o.label_server_address}}}:</label>
<input type="text" value="{{{o.muc_domain}}}" required="required" name="server" class="form-control" placeholder="{{{o.server_placeholder}}}"/>
</div>
<input type="submit" class="btn btn-primary" name="list" value="{{{o.label_query}}}"/>
</form>
{[ } ]}
<ul class="available-chatrooms list-group"></ul>
</div>
</div>
</div>
</div>
src/templates/list_chatrooms_modal.js 0 → 100644
View file @ ad934079
import { html } from "lit-html";
import { __ } from '@converse/headless/i18n';
import { modal_close_button, modal_header_close_button } from "./buttons"
const i18n_list_chatrooms = __('Query for Groupchats');
const i18n_server_address = __('Server address');
const i18n_query = __('Show groupchats');
const form = (o) => html`
<form class="converse-form list-chatrooms">
<div class="form-group">
<label for="chatroom">${i18n_server_address}:</label>
<input type="text" value="${o.muc_domain}" required="required" name="server" class="form-control" placeholder="${o.server_placeholder}"/>
</div>
<input type="submit" class="btn btn-primary" name="list" value="${i18n_query}"/>
</form>
`;
export default (o) => html`
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="list-chatrooms-modal-label">${i18n_list_chatrooms}</h5>
${modal_header_close_button}
</div>
<div class="modal-body d-flex flex-column">
<span class="modal-alert"></span>
${o.show_form ? form(o) : '' }
<ul class="available-chatrooms list-group"></ul>
</div>
<div class="modal-footer">${modal_close_button}</div>
</div>
</div>
`;
src/templates/message_versions_modal.html → src/templates/message_versions_modal.js
View file @ ad934079
<div class="modal" id="message-versions-modal" tabindex="-1" role="dialog" aria-labelledby="message-versions-modal-label" aria-hidden="true">
import { html } from "lit-html";
import { __ } from '@converse/headless/i18n';
import dayjs from 'dayjs';
import { modal_close_button, modal_header_close_button } from "./buttons"
const i18n_message_versions = __('Message versions');
export default (o) => html`
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="message-versions-modal-label">{{{o.__('Message versions')}}}</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="message-versions-modal-label">${i18n_message_versions}</h4>
${modal_header_close_button}
</div>
<div class="modal-body">
<h4>Older versions</h4>
{[Object.keys(o.older_versions).forEach(function (k) { ]} <p class="older-msg"><time>{{{o.dayjs(k).format('MMM D, YYYY, HH:mm:ss')}}}</time>: {{{o.older_versions[k]}}}</p> {[ }); ]}
${Object.keys(o.older_versions).map(k => html`<p class="older-msg"><time>${dayjs(k).format('MMM D, YYYY, HH:mm:ss')}</time>: ${o.older_versions[k]}</p>`) }
<hr/>
<h4>Current version</h4>
<p>{{{o.message}}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{{o.__('Close')}}}</button>
<p>${o.message}</p>
</div>
<div class="modal-footer">${modal_close_button}</div>
</div>
</div>
</div>
`;
src/templates/moderator_tools_modal.html deleted 100644 → 0
View file @ a8104d74
This diff is collapsed.
src/templates/moderator_tools_modal.js 0 → 100644
View file @ ad934079
This diff is collapsed.
src/templates/profile.js 0 → 100644
View file @ ad934079
import { html } from "lit-html";
import { __ } from '@converse/headless/i18n';
const i18n_logout = __('Log out');
const i18n_change_status = __('Click to change your chat status');
const i18n_details = __('Show details about this chat client');
export default (o) => html`
<div class="userinfo controlbox-padded">
<div class="controlbox-section profile d-flex">
<a class="show-profile" href="#">
<canvas class="avatar align-self-center" height="40" width="40"></canvas>
</a>
<span class="username w-100 align-self-center">${o.fullname}</span>
${o._converse.show_client_info && html`<a class="controlbox-heading__btn show-client-info fa fa-info-circle align-self-center" title="${i18n_details}"></a>`}
${o._converse.allow_logout && html`<a class="controlbox-heading__btn logout fa fa-sign-out-alt align-self-center" title="${i18n_logout}"></a>`}
</div>
<div class="d-flex xmpp-status">
<a class="change-status" title="${i18n_change_status}" data-toggle="modal" data-target="#changeStatusModal">
<span class="${o.chat_status} w-100 align-self-center" data-value="${o.chat_status}">
<span class="
${o.chat_status === 'online' && 'fa fa-circle chat-status chat-status--online'}
${o.chat_status === 'dnd' && 'fa fa-minus-circle chat-status chat-status--busy'}
${o.chat_status === 'away' && 'fa fa-circle chat-status chat-status--away'}
${o.chat_status === 'xa' && 'far fa-circle chat-status chat-status--xa '}
${o.chat_status === 'offline' && 'fa fa-circle chat-status chat-status--offline'}"></span> ${o.status_message}</span>
</a>
</div>
</div>
`;
src/templates/profile_modal.html deleted 100644 → 0
View file @ a8104d74
<div class="modal" id="user-profile-modal" tabindex="-1" role="dialog" aria-labelledby="user-profile-modal-label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="user-profile-modal-label">{{{o.heading_profile}}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
{[ if (o._converse.pluggable.plugins['converse-omemo'].enabled(o._converse)) { ]}
<ul class="nav nav-pills justify-content-center">
<li role="presentation" class="nav-item">
<a class="nav-link active" id="profile-tab" href="#profile-tabpanel" aria-controls="profile-tabpanel" role="tab" data-toggle="tab">Profile</a>
</li>
<li role="presentation" class="nav-item">
<a class="nav-link" id="omemo-tab" href="#omemo-tabpanel" aria-controls="omemo-tabpanel" role="tab" data-toggle="tab">OMEMO</a>
</li>
</ul>
{[ } ]}
<div class="tab-content">
<div class="tab-pane active" id="profile-tabpanel" role="tabpanel" aria-labelledby="profile-tab">
<form class="converse-form converse-form--modal profile-form" action="#">
<div class="row">
<div class="col-auto">
<a class="change-avatar" href="#">
{[ if (o.image) { ]}
<img alt="{{{o.alt_avatar}}}" class="img-thumbnail avatar align-self-center" height="100px" width="100px" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
{[ } ]}
{[ if (!o.image) { ]}
<canvas class="avatar" height="100px" width="100px"></canvas>
{[ } ]}
</a>
<input class="hidden" name="image" type="file"/>
</div>
<div class="col">
<div class="form-group">
<label class="col-form-label">{{{o.label_jid}}}:</label>
<div>{{{o.jid}}}</div>
</div>
</div>
</div>
<div class="form-group">
<label for="vcard-fullname" class="col-form-label">{{{o.label_fullname}}}:</label>
<input id="vcard-fullname" type="text" class="form-control" name="fn" value="{{{o.fullname}}}"/>
</div>
<div class="form-group">
<label for="vcard-nickname" class="col-form-label">{{{o.label_nickname}}}:</label>
<input id="vcard-nickname" type="text" class="form-control" name="nickname" value="{{{o.nickname}}}"/>
</div>
<div class="form-group">
<label for="vcard-url" class="col-form-label">{{{o.label_url}}}:</label>
<input id="vcard-url" type="url" class="form-control" name="url" value="{{{o.url}}}"/>
</div>
<div class="form-group">
<label for="vcard-email" class="col-form-label">{{{o.label_email}}}:</label>
<input id="vcard-email" type="email" class="form-control" name="email" value="{{{o.email}}}"/>
</div>
<div class="form-group">
<label for="vcard-role" class="col-form-label">{{{o.label_role}}}:</label>
<input id="vcard-role" type="text" class="form-control" name="role" value="{{{o.role}}}" aria-describedby="vcard-role-help"/>
<small id="vcard-role-help" class="form-text text-muted">{{{o.label_role_help}}}</small>
</div>
<hr/>
<div class="form-group">
<button type="submit" class="save-form btn btn-primary">{{{o.__('Save and close')}}}</button>
</div>
</form>
</div>
{[ if (o._converse.pluggable.plugins['converse-omemo'].enabled(o._converse)) { ]}
<div class="tab-pane" id="omemo-tabpanel" role="tabpanel" aria-labelledby="omemo-tab">
<form class="converse-form fingerprint-removal">
<ul class="list-group fingerprints">
<li class="list-group-item active">{{{o.__("This device's OMEMO fingerprint")}}}</li>
<li class="list-group-item">
{[ if (o.view.current_device && o.view.current_device.get('bundle') && o.view.current_device.get('bundle').fingerprint) { ]}
<span class="fingerprint">{{{o.utils.formatFingerprint(o.view.current_device.get('bundle').fingerprint)}}}</span>
{[ } else {]}
<span class="spinner fa fa-spinner centered"/>
{[ } ]}
</li>
</ul>
<div class="form-group">
<button type="button" class="generate-bundle btn btn-danger">{{{o.__('Generate new keys and fingerprint')}}}</button>
</div>
{[ if (o.view.other_devices.length) { ]}
<ul class="list-group fingerprints">
<li class="list-group-item nopadding active">
<label>
<input type="checkbox" class="select-all" title="{{{o.__('Select all')}}}"
aria-label="{{{o.__('Checkbox to select fingerprints of all other OMEMO devices')}}}"/>
{{{o.__('Other OMEMO-enabled devices')}}}
</label>
</li>
{[ o.view.other_devices.forEach(function (device) { ]}
{[ if (device.get('bundle') && device.get('bundle').fingerprint) { ]}
<li class="fingerprint-removal-item list-group-item nopadding">
<label>
<input type="checkbox" value="{{{device.get('id')}}}"
aria-label="{{{o.__('Checkbox for selecting the following fingerprint')}}}"/>
<span class="fingerprint">{{{o.utils.formatFingerprint(device.get('bundle').fingerprint)}}}</span>
</label>
</li>
{[ } else {]}
<li class="fingerprint-removal-item list-group-item nopadding">
<label>
<input type="checkbox" value="{{{device.get('id')}}}"
aria-label="{{{o.__('Checkbox for selecting the following fingerprint')}}}"/>
<span>{{{o.__('Device without a fingerprint')}}}</span>
</label>
</li>
{[ } ]}
{[ }); ]}
</ul>
<div class="form-group">
<button type="submit" class="save-form btn btn-primary">{{{o.__('Remove checked devices and close')}}}</button>
</div>
{[ } ]}
</form>
</div>
{[ } ]}
</div>
</div>
</div>
</div>
</div>
src/templates/profile_modal.js 0 → 100644
View file @ ad934079
import { html } from "lit-html";
import { __ } from '@converse/headless/i18n';
import avatar from "./avatar.js";
import spinner from "./spinner.js";
import { modal_close_button, modal_header_close_button } from "./buttons"
const alt_avatar = __('Your avatar image');
const heading_profile = __('Your Profile');
const i18n_close = __('Close');
const i18n_fingerprint_checkbox_label = __('Checkbox for selecting the following fingerprint');
const i18n_device_without_fingerprint = __('Device without a fingerprint');
const i18n_email = __('Email');
const i18n_fingerprint = __("This device's OMEMO fingerprint");
const i18n_fullname = __('Full Name');
const i18n_generate = __('Generate new keys and fingerprint');
const i18n_jid = __('XMPP Address (JID)');
const i18n_nickname = __('Nickname');
const i18n_other_devices = __('Other OMEMO-enabled devices');
const i18n_other_devices_label = __('Checkbox to select fingerprints of all other OMEMO devices');
const i18n_remove_devices = __('Remove checked devices and close');
const i18n_role = __('Role');
const i18n_save = __('Save and close');
const i18n_select_all = __('Select all');
const i18n_role_help = __(
'Use commas to separate multiple roles. '+
'Your roles are shown next to your name on your chat messages.');
const i18n_url = __('URL');
const i18n_omemo = __('OMEMO');
const i18n_profile = __('Profile');
const navigation = html`
<ul class="nav nav-pills justify-content-center">
<li role="presentation" class="nav-item">
<a class="nav-link active" id="profile-tab" href="#profile-tabpanel" aria-controls="profile-tabpanel" role="tab" data-toggle="tab">${i18n_profile}</a>
</li>
<li role="presentation" class="nav-item">
<a class="nav-link" id="omemo-tab" href="#omemo-tabpanel" aria-controls="omemo-tabpanel" role="tab" data-toggle="tab">${i18n_omemo}</a>
</li>
</ul>`;
const fingerprint = (o) => html`
<span class="fingerprint">${o.utils.formatFingerprint(o.view.current_device.get('bundle').fingerprint)}</span>`;
const device_with_fingerprint = (o) => html`
<li class="fingerprint-removal-item list-group-item nopadding">
<label>
<input type="checkbox" value="${o.device.get('id')}"
aria-label="${i18n_fingerprint_checkbox_label}"/>
<span class="fingerprint">${o.utils.formatFingerprint(o.device.get('bundle').fingerprint)}</span>
</label>
</li>
`;
const device_without_fingerprint = () => html`
<li class="fingerprint-removal-item list-group-item nopadding">
<label>
<input type="checkbox" value="${o.device.get('id')}"
aria-label="${i18n_fingerprint_checkbox_label}"/>
<span>${i18n_device_without_fingerprint}</span>
</label>
</li>
`;
const device_item = (o) => html`
${(o.device.get('bundle') && o.device.get('bundle').fingerprint) ? device_with_fingerprint(o) : device_without_fingerprint(o) }
`;
const device_list = (o) => html`
<ul class="list-group fingerprints">
<li class="list-group-item nopadding active">
<label>
<input type="checkbox" class="select-all" title="${i18n_select_all}" aria-label="${i18n_other_devices_label}"/>
${i18n_other_devices}
</label>
</li>
${ o.view.other_devices.map(device => device_item(Object.assign({device}, o))) }
</ul>
<div class="form-group"><button type="submit" class="save-form btn btn-primary">${i18n_remove_devices}</button></div>
`;
const omemo_page = (o) => html`
<div class="tab-pane" id="omemo-tabpanel" role="tabpanel" aria-labelledby="omemo-tab">
<form class="converse-form fingerprint-removal">
<ul class="list-group fingerprints">
<li class="list-group-item active">${i18n_fingerprint}</li>
<li class="list-group-item">
${ (o.view.current_device && o.view.current_device.get('bundle') && o.view.current_device.get('bundle').fingerprint) ? fingerprint(o) : spinner() }
</li>
</ul>
<div class="form-group">
<button type="button" class="generate-bundle btn btn-danger">${i18n_generate}</button>
</div>
${ o.view.other_devices.length ? device_list(o) : '' }
</form>
</div>`;
export default (o) => html`
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="user-profile-modal-label">${heading_profile}</h5>
${modal_header_close_button}
</div>
<div class="modal-body">
<span class="modal-alert"></span>
${o._converse.pluggable.plugins['converse-omemo'].enabled(o._converse) && navigation}
<div class="tab-content">
<div class="tab-pane active" id="profile-tabpanel" role="tabpanel" aria-labelledby="profile-tab">
<form class="converse-form converse-form--modal profile-form" action="#">
<div class="row">
<div class="col-auto">
<a class="change-avatar" href="#">
${o.image ? avatar(Object.assign({'alt_text': alt_avatar}, o)) : '<canvas class="avatar" height="100px" width="100px"></canvas>'}
</a>
<input class="hidden" name="image" type="file"/>
</div>
<div class="col">
<div class="form-group">
<label class="col-form-label">${i18n_jid}:</label>
<div>${o.jid}</div>
</div>
</div>
</div>
<div class="form-group">
<label for="vcard-fullname" class="col-form-label">${i18n_fullname}:</label>
<input id="vcard-fullname" type="text" class="form-control" name="fn" value="${o.fullname || ''}"/>
</div>
<div class="form-group">
<label for="vcard-nickname" class="col-form-label">${i18n_nickname}:</label>
<input id="vcard-nickname" type="text" class="form-control" name="nickname" value="${o.nickname || ''}"/>
</div>
<div class="form-group">
<label for="vcard-url" class="col-form-label">${i18n_url}:</label>
<input id="vcard-url" type="url" class="form-control" name="url" value="${o.url || ''}"/>
</div>
<div class="form-group">
<label for="vcard-email" class="col-form-label">${i18n_email}:</label>
<input id="vcard-email" type="email" class="form-control" name="email" value="${o.email || ''}"/>
</div>
<div class="form-group">
<label for="vcard-role" class="col-form-label">${i18n_role}:</label>
<input id="vcard-role" type="text" class="form-control" name="role" value="${o.role || ''}" aria-describedby="vcard-role-help"/>
<small id="vcard-role-help" class="form-text text-muted">${i18n_role_help}</small>
</div>
<hr/>
<div class="form-group">
<button type="submit" class="save-form btn btn-primary">${i18n_save}</button>
</div>
</form>
</div>
${ _converse.pluggable.plugins['converse-omemo'].enabled(_converse) && omemo_page(o) }
</div>
</div>
<div class="modal-footer">${modal_close_button}</div>
</div>
</div>
`;
src/templates/profile_view.html deleted 100644 → 0
View file @ a8104d74
<div class="userinfo controlbox-padded">
<div class="controlbox-section profile d-flex">
<a class="show-profile" href="#">
<canvas class="avatar align-self-center" height="40" width="40"></canvas>
</a>
<span class="username w-100 align-self-center">{{{o.fullname}}}</span>
{[ if (o._converse.show_client_info) { ]}
<a class="controlbox-heading__btn show-client-info fa fa-info-circle align-self-center" title="{{{o.info_details}}}"></a>
{[ } ]}
{[ if (o._converse.allow_logout) { ]}
<a class="controlbox-heading__btn logout fa fa-sign-out-alt align-self-center" title="{{{o.title_log_out}}}"></a>
{[ } ]}
</div>
<div class="d-flex xmpp-status">
<a class="change-status" title="{{{o.title_change_status}}}" data-toggle="modal" data-target="#changeStatusModal">
<span class="{{{o.chat_status}}} w-100 align-self-center" data-value="{{{o.chat_status}}}">
<span class="
{[ if (o.chat_status === 'online') { ]} fa fa-circle chat-status chat-status--online{[ } ]}
{[ if (o.chat_status === 'dnd') { ]} fa fa-minus-circle chat-status chat-status--busy {[ } ]}
{[ if (o.chat_status === 'away') { ]} fa fa-circle chat-status chat-status--away{[ } ]}
{[ if (o.chat_status === 'xa') { ]} far fa-circle chat-status chat-status--xa {[ } ]}
{[ if (o.chat_status === 'offline') { ]} fa fa-circle chat-status chat-status--offline{[ } ]}"></span> {{{o.status_message}}}</span>
</a>
</div>
</div>
src/templates/prompt.html deleted 100644 → 0
View file @ a8104d74
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header {{{o.level}}}">
<h5 class="modal-title">{{{o.title}}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="converse-form converse-form--modal confirm" action="#">
<div class="form-group">
{[o.messages.forEach(function (message) { ]}
<p>{{{message}}}</p>
{[ }) ]}
</div>
{[ if (o.type === 'prompt') { ]}
<div class="form-group">
<input type="text" name="reason" class="form-control" placeholder="{{{o.placeholder}}}"/>
</div>
{[ } ]}
<div class="form-group">
<button type="submit" class="btn btn-primary">{{{o.__('OK')}}}</button>
<input type="button" class="btn btn-secondary" data-dismiss="modal" value="{{{o.__('Cancel')}}}"/>
</div>
</form>
</div>
</div>
</div>
</div>
src/templates/prompt.js 0 → 100644
View file @ ad934079
import { html } from "lit-html";
import { __ } from '@converse/headless/i18n';
const i18n_cancel = __('Cancel');
const i18n_ok = __('OK');
export default (o) => html`
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header ${o.level}">
<h5 class="modal-title">${o.title}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<span class="modal-alert"></span>
<form class="converse-form converse-form--modal confirm" action="#">
<div class="form-group">
${ o.messages.map(message => html`<p>${message}</p>`) }
</div>
{[ if (o.type === 'prompt') { ]}
<div class="form-group">
<input type="text" name="reason" class="form-control" placeholder="${o.placeholder}"/>
</div>
{[ } ]}
<div class="form-group">
<button type="submit" class="btn btn-primary">${i18n_ok}</button>
<input type="button" class="btn btn-secondary" data-dismiss="modal" value="${i18n_cancel}"/>
</div>
</form>
</div>
</div>
</div>
`;
src/templates/spinner.js 0 → 100644
View file @ ad934079
import { html } from "lit-html";
export default () => html`<span class="spinner fa fa-spinner centered"/>`
src/templates/user_details_modal.html deleted 100644 → 0
View file @ a8104d74
<div class="modal" id="user-details-modal" tabindex="-1" role="dialog" aria-labelledby="user-details-modal-label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="user-details-modal-label">{{{o.display_name}}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="{{{o.__('Close')}}}"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
{[ if (o.image) { ]}
<img alt="{{{o.__('The User\'s Profile Image')}}}"
class="img-thumbnail avatar align-self-center mb-3"
height="100" width="100" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
{[ } ]}
{[ if (o.fullname) { ]}
<p><label>{{{o.__('Full Name:')}}}</label> {{{o.fullname}}}</p>
{[ } ]}
<p><label>{{{o.__('XMPP Address:')}}}</label> <a href="xmpp:{{{o.jid}}}">{{{o.jid}}}</a></p>
{[ if (o.nickname) { ]}
<p><label>{{{o.__('Nickname:')}}}</label> {{{o.nickname}}}</p>
{[ } ]}
{[ if (o.url) { ]}
<p><label>{{{o.__('URL:')}}}</label> <a target="_blank" rel="noopener" href="{{{o.url}}}">{{{o.url}}}</a></p>
{[ } ]}
{[ if (o.email) { ]}
<p><label>{{{o.__('Email:')}}}</label> <a href="mailto:{{{o.email}}}">{{{o.email}}}</a></p>
{[ } ]}
{[ if (o.role) { ]}
<p><label>{{{o.__('Role:')}}}</label> {{{o.role}}}</p>
{[ } ]}
{[ if (o._converse.pluggable.plugins['converse-omemo'].enabled(o._converse)) { ]}
<hr/>
<ul class="list-group fingerprints">
<li class="list-group-item active">{{{o.__('OMEMO Fingerprints')}}}</li>
{[ if (!o.view.devicelist.devices) { ]}
<li class="list-group-item"><span class="spinner fa fa-spinner centered"/></li>
{[ } ]}
{[ if (o.view.devicelist.devices) { ]}
{[ o.view.devicelist.devices.each(function (device) { ]}
{[ if (device.get('bundle') && device.get('bundle').fingerprint) { ]}
<li class="list-group-item">
<form class="fingerprint-trust">
<div class="btn-group btn-group-toggle">
<label class="btn btn--small {[ if (device.get('trusted') !== -1) { ]} btn-primary active {[ } else { ]} btn-secondary {[ } ]}">
<input type="radio" name="{{{device.get('id')}}}" value="1"
{[ if (device.get('trusted') !== -1) { ]} checked="checked" {[ } ]}/>{{{o.__('Trusted')}}}
</label>
<label class="btn btn--small {[ if (device.get('trusted') === -1) { ]} btn-primary active {[ } else { ]} btn-secondary {[ } ]}">
<input type="radio" name="{{{device.get('id')}}}" value="-1"
{[ if (device.get('trusted') === -1) { ]} checked="checked" {[ } ]}/>{{{o.__('Untrusted')}}}
</label>
</div>
<span class="fingerprint">{{{o.utils.formatFingerprint(device.get('bundle').fingerprint)}}}</span>
</form>
</li>
{[ } ]}
{[ }); ]}
{[ } ]}
</ul>
{[ } ]}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">{{{o.__('Close')}}}</button>
<button type="button" class="btn btn-info refresh-contact"><i class="fa fa-refresh"> </i>{{{o.__('Refresh')}}}</button>
{[ if (o.allow_contact_removal && o.is_roster_contact) { ]}
<button type="button" class="btn btn-danger remove-contact"><i class="far fa-trash-alt"> </i>{{{o.__('Remove as contact')}}}</button>
{[ } ]}
</div>
</div>
</div>
</div>
src/templates/user_details_modal.js 0 → 100644
View file @ ad934079
import { __ } from '@converse/headless/i18n';
import { html } from "lit-html";
import avatar from "./avatar.js";
import spinner from "./spinner.js";
import { modal_close_button, modal_header_close_button } from "./buttons"
const i18n_address = __('XMPP Address');
const i18n_email = __('Email');
const i18n_fingerprints = __('OMEMO Fingerprints');
const i18n_full_name = __('Full Name');
const i18n_nickname = __('Nickname');
const i18n_profile = __('The User\'s Profile Image');
const i18n_refresh = __('Refresh');
const i18n_role = __('Role');
const i18n_url = __('URL');
const i18n_remove_contact = __('Remove as contact');
const i18n_trusted = __('Trusted');
const i18n_untrusted = __('Untrusted');
const i18n_no_devices = __("No OMEMO-enabled devices found");
const avatar_data = {
'alt_text': i18n_profile,
'extra_classes': 'mb-3'
}
const device_fingerprint = (o) => {
if (o.device.get('bundle') && o.device.get('bundle').fingerprint) {
return html`
<li class="list-group-item">
<form class="fingerprint-trust">
<div class="btn-group btn-group-toggle">
<label class="btn btn--small ${(o.device.get('trusted') !== -1) ? 'btn-primary active' : 'btn-secondary'}">
<input type="radio" name="${o.device.get('id')}" value="1" ?checked=${o.device.get('trusted') !== -1}>${i18n_trusted}
</label>
<label class="btn btn--small ${(o.device.get('trusted') !== -1) ? 'btn-primary active' : 'btn-secondary'}">
<input type="radio" name="${o.device.get('id')}" value="-1" ?checked=${o.device.get('trusted') === -1}>${i18n_untrusted}
</label>
</div>
<span class="fingerprint">${o.utils.formatFingerprint(o.device.get('bundle').fingerprint)}</span>
</form>
</li>
`;
} else {
return ''
}
}
const fingerprints = (o) => {
const devices = o.view.devicelist.devices;
return html`
<hr/>
<ul class="list-group fingerprints">
<li class="list-group-item active">${i18n_fingerprints}</li>
${ devices.length ?
devices.map(device => device_fingerprint(Object.assign({device}, o))) :
html`<li class="list-group-item"> ${i18n_no_devices} </li>` }
</ul>
`;
}
const remove_button = html`<button type="button" class="btn btn-danger remove-contact"><i class="far fa-trash-alt"> </i>${i18n_remove_contact}</button>`;
export default (o) => html`
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="user-details-modal-label">${o.display_name}</h5>
${modal_header_close_button}
</div>
<div class="modal-body">
${ o.image ? avatar(Object.assign(avatar_data, o)) : '' }
${ o.fullname ? html`<p><label>${i18n_full_name}:</label> ${o.fullname}</p>` : '' }
<p><label>${i18n_address}:</label> <a href="xmpp:${o.jid}">${o.jid}</a></p>
${ o.nickname ? html`<p><label>${i18n_nickname}:</label> ${o.nickname}</p>` : '' }
${ o.url ? html`<p><label>${i18n_url}:</label> <a target="_blank" rel="noopener" href="${o.url}">${o.url}</a></p>` : '' }
${ o.email ? html`<p><label>${i18n_email}:</label> <a href="mailto:${o.email}">${o.email}</a></p>` : '' }
${ o.role ? html`<p><label>${i18n_role}:</label> ${o.role}</p>` : '' }
${ (o._converse.pluggable.plugins['converse-omemo'].enabled(o._converse)) ? fingerprints(o) : '' }
</div>
<div class="modal-footer">
${modal_close_button}
<button type="button" class="btn btn-info refresh-contact"><i class="fa fa-refresh"> </i>${i18n_refresh}</button>
${ (o.allow_contact_removal && o.is_roster_contact) ? remove_button : '' }
</div>
</div>
</div>
`;
webpack.html
View file @ ad934079
......@@ -6,6 +6,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Converse.js: A free chat client for your website" />
<script src="3rdparty/libsignal-protocol.js"></script>
<link rel="manifest" href="./manifest.json">
<link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
</head>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7