converse.js
Version:
Browser based XMPP chat client
200 lines (190 loc) • 8.13 kB
JavaScript
import { html } from 'lit';
import { _converse } from '@converse/headless';
import { __ } from 'i18n';
import 'shared/components/image-picker.js';
import { shouldShowPasswordResetForm } from '../utils';
import tplChatStatusForm from './chat-status-form.js';
/**
* @param {import('../modals/profile').default} el
*/
function tplOmemoPage(el) {
return html` <div
class="tab-pane ${el.tab === 'omemo' ? 'active' : ''}"
id="omemo-tabpanel"
role="tabpanel"
aria-labelledby="omemo-tab"
>
${el.tab === 'omemo' ? html`<converse-omemo-profile></converse-omemo-profile>` : ''}
</div>`;
}
/**
* @param {import('../modals/profile').default} el
*/
export default (el) => {
const o = { ...el.model.toJSON(), ...el.model.vcard?.toJSON() };
const i18n_email = __('Email');
const i18n_fullname = __('Full Name');
const i18n_jid = __('XMPP Address');
const i18n_nickname = __('Nickname');
const i18n_role = __('Role');
const i18n_save = __('Save and close');
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_status = __('Status');
const i18n_omemo = __('OMEMO');
const i18n_profile = __('Profile');
const ii18n_reset_password = __('Reset Password');
// Initialize navigation_tabs as a Map
const navigation_tabs = new Map();
navigation_tabs.set(
'status',
html`<li role="presentation" class="nav-item">
<a
class="nav-link ${el.tab === 'status' ? 'active' : ''}"
id="status-tab"
href="#status-tabpanel"
aria-controls="status-tabpanel"
role="tab"
@click="${(ev) => el.switchTab(ev)}"
data-name="status"
data-toggle="tab"
>${i18n_status}</a
>
</li>`
);
navigation_tabs.set(
'profile',
html`<li role="presentation" class="nav-item">
<a
class="nav-link ${el.tab === 'profile' ? 'active' : ''}"
id="profile-tab"
href="#profile-tabpanel"
aria-controls="profile-tabpanel"
role="tab"
@click="${(ev) => el.switchTab(ev)}"
data-name="profile"
data-toggle="tab"
>${i18n_profile}</a
>
</li>`
);
if (shouldShowPasswordResetForm()) {
navigation_tabs.set(
'passwordreset',
html`<li role="presentation" class="nav-item">
<a
class="nav-link ${el.tab === 'passwordreset' ? 'active' : ''}"
id="passwordreset-tab"
href="#passwordreset-tabpanel"
aria-controls="passwordreset-tabpanel"
role="tab"
@click="${(ev) => el.switchTab(ev)}"
data-name="passwordreset"
data-toggle="tab"
>${ii18n_reset_password}</a
>
</li>`
);
}
if (_converse.pluggable.plugins['converse-omemo']?.enabled(_converse)) {
navigation_tabs.set(
'omemo',
html`<li role="presentation" class="nav-item">
<a
class="nav-link ${el.tab === 'omemo' ? 'active' : ''}"
id="omemo-tab"
href="#omemo-tabpanel"
aria-controls="omemo-tabpanel"
role="tab"
@click="${(ev) => el.switchTab(ev)}"
data-name="omemo"
data-toggle="tab"
>${i18n_omemo}</a
>
</li>`
);
}
return html`
${
navigation_tabs.size
? html`<ul class="nav nav-pills justify-content-center">
${Array.from(navigation_tabs.values())}
</ul>`
: ''
}
<div class="tab-content">
${
navigation_tabs.get('passwordreset')
? html`<div
class="tab-pane ${el.tab === 'status' ? 'active' : ''}"
id="status-tabpanel"
role="tabpanel"
aria-labelledby="status-tab"
>
${el.tab === 'status' ? tplChatStatusForm(el) : ''}
</div>`
: ''
}
<div class="tab-pane ${el.tab === 'profile' ? 'active' : ''}" id="profile-tabpanel" role="tabpanel" aria-labelledby="profile-tab">
<form class="converse-form converse-form--modal" action="#" @submit=${(ev) => el.onProfileFormSubmitted(ev)}>
<div class="row py-2">
<div class="col-auto">
<converse-image-picker .model=${el.model} width="128" height="128"></converse-image-picker>
</div>
<div class="col">
<div class="px-3">
<label class="col-form-label">${i18n_jid}:</label>
<div>${o.jid}</div>
</div>
</div>
</div>
<div>
<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>
<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>
<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>
<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>
<label for="vcard-role" class="col-form-label pb-0">${i18n_role}:</label>
<small id="vcard-role-help" class="d-block pb-1 form-text text-muted">${i18n_role_help}</small>
<input id="vcard-role" type="text" class="form-control" name="role" value="${o.role || ''}" aria-describedby="vcard-role-help"/>
</div>
<div class="mt-3">
${
el._submitting
? html`<converse-spinner></converse-spinner>`
: html`<button type="submit" class="save-form btn btn-primary">${i18n_save}</button>`
}
</div>
</form>
</div>
${
navigation_tabs.get('passwordreset')
? html`<div
class="tab-pane ${el.tab === 'passwordreset' ? 'active' : ''}"
id="passwordreset-tabpanel"
role="tabpanel"
aria-labelledby="passwordreset-tab"
>
${el.tab === 'passwordreset'
? html`<converse-change-password-form></converse-change-password-form>`
: ''}
</div>`
: ''
}
${navigation_tabs.get('omemo') ? tplOmemoPage(el) : ''}
</div>
</div>`;
};