xmpp.chapril.org-conversejs/src/plugins/omemo/templates/profile.js
JC Brand fbe86e5af8 Create an ElementView base modal and use it for all modals
Modals are now all web components and are opened by component name.
2022-09-16 10:33:47 +02:00

82 lines
3.3 KiB
JavaScript

import spinner from "templates/spinner.js";
import { formatFingerprint } from 'plugins/omemo/utils.js';
import { html } from "lit";
import { __ } from 'i18n';
const fingerprint = (el) => html`
<span class="fingerprint">${formatFingerprint(el.current_device.get('bundle').fingerprint)}</span>`;
const device_with_fingerprint = (el) => {
const i18n_fingerprint_checkbox_label = __('Checkbox for selecting the following fingerprint');
return html`
<li class="fingerprint-removal-item list-group-item">
<label>
<input type="checkbox" value="${el.device.get('id')}"
aria-label="${i18n_fingerprint_checkbox_label}"/>
<span class="fingerprint">${formatFingerprint(el.device.get('bundle').fingerprint)}</span>
</label>
</li>
`;
}
const device_without_fingerprint = (el) => {
const i18n_device_without_fingerprint = __('Device without a fingerprint');
const i18n_fingerprint_checkbox_label = __('Checkbox for selecting the following device');
return html`
<li class="fingerprint-removal-item list-group-item">
<label>
<input type="checkbox" value="${el.device.get('id')}"
aria-label="${i18n_fingerprint_checkbox_label}"/>
<span>${i18n_device_without_fingerprint}</span>
</label>
</li>
`;
}
const device_item = (el) => html`
${(el.device.get('bundle') && el.device.get('bundle').fingerprint) ? device_with_fingerprint(el) : device_without_fingerprint(el) }
`;
const device_list = (el) => {
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_select_all = __('Select all');
return html`
<ul class="list-group fingerprints">
<li class="list-group-item active">
<label>
<input type="checkbox" class="select-all" @change=${el.selectAll} title="${i18n_select_all}" aria-label="${i18n_other_devices_label}"/>
${i18n_other_devices}
</label>
</li>
${ el.other_devices?.map(device => device_item(Object.assign({device}, el))) }
</ul>
<div class="form-group"><button type="submit" class="save-form btn btn-primary">${i18n_remove_devices}</button></div>
`;
}
export default (el) => {
const i18n_fingerprint = __("This device's OMEMO fingerprint");
const i18n_generate = __('Generate new keys and fingerprint');
return html`
<form class="converse-form fingerprint-removal" @submit=${el.removeSelectedFingerprints}>
<ul class="list-group fingerprints">
<li class="list-group-item active">${i18n_fingerprint}</li>
<li class="list-group-item">
${ (el.current_device && el.current_device.get('bundle') && el.current_device.get('bundle').fingerprint) ? fingerprint(el) : spinner() }
</li>
</ul>
<div class="form-group">
<button type="button" class="generate-bundle btn btn-danger" @click=${el.generateOMEMODeviceBundle}>${i18n_generate}</button>
</div>
${ el.other_devices?.length ? device_list(el) : '' }
</form>`;
}