77 lines
3.3 KiB
JavaScript
77 lines
3.3 KiB
JavaScript
import xss from "xss/dist/xss";
|
|
import { __ } from '../../i18n';
|
|
import { api } from "@converse/headless/core";
|
|
import { html } from "lit";
|
|
import { modal_header_close_button } from "./buttons.js"
|
|
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
|
|
|
|
const tpl_navigation = (o) => {
|
|
const i18n_about = __('About');
|
|
const i18n_commands = __('Commands');
|
|
return html`
|
|
<ul class="nav nav-pills justify-content-center">
|
|
<li role="presentation" class="nav-item">
|
|
<a class="nav-link active" id="about-tab" href="#about-tabpanel" aria-controls="about-tabpanel" role="tab" data-toggle="tab" @click=${o.switchTab}>${i18n_about}</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item">
|
|
<a class="nav-link" id="commands-tab" href="#commands-tabpanel" aria-controls="commands-tabpanel" role="tab" data-toggle="tab" @click=${o.switchTab}>${i18n_commands}</a>
|
|
</li>
|
|
</ul>
|
|
`;
|
|
}
|
|
|
|
|
|
export default (o) => {
|
|
const i18n_modal_title = __('Settings');
|
|
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>'
|
|
);
|
|
const show_client_info = api.settings.get('show_client_info');
|
|
const allow_adhoc_commands = api.settings.get('allow_adhoc_commands');
|
|
const show_both_tabs = show_client_info && allow_adhoc_commands;
|
|
return html`
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="converse-modtools-modal-label">${i18n_modal_title}</h5>
|
|
${modal_header_close_button}
|
|
</div>
|
|
<div class="modal-body">
|
|
${ show_both_tabs ? tpl_navigation(o) : '' }
|
|
|
|
<div class="tab-content">
|
|
<div class="tab-pane tab-pane--columns ${show_client_info ? 'active' : ''}"
|
|
id="about-tabpanel" role="tabpanel" aria-labelledby="about-tab">
|
|
|
|
<span class="modal-alert"></span>
|
|
<br/>
|
|
<div class="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 class="tab-pane tab-pane--columns ${!show_client_info && allow_adhoc_commands ? 'active' : ''}"
|
|
id="commands-tabpanel"
|
|
role="tabpanel"
|
|
aria-labelledby="commands-tab">
|
|
<converse-adhoc-commands/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`};
|