mirror of
https://github.com/zulip/zulip-desktop.git
synced 2025-10-28 10:33:39 +00:00
a9d59b3dcd
Also fix various variable names to consistently indicate which strings contain HTML. Some of these changes close cross-site scripting vulnerabilities, and others are for consistency. It’s important to be meticulously consistent about escaping so that changes that would introduce vulnerabilities stand out as obviously wrong. Signed-off-by: Anders Kaseorg <anders@zulip.com>
93 lines
2.8 KiB
TypeScript
93 lines
2.8 KiB
TypeScript
import {ipcRenderer} from 'electron';
|
|
|
|
import {htmlEscape} from 'escape-goat';
|
|
|
|
import * as DomainUtil from '../../utils/domain-util';
|
|
import * as t from '../../utils/translation-util';
|
|
|
|
import AddCertificate from './add-certificate';
|
|
import BaseSection from './base-section';
|
|
import FindAccounts from './find-accounts';
|
|
import ServerInfoForm from './server-info-form';
|
|
|
|
interface ConnectedOrgSectionProps {
|
|
$root: Element;
|
|
}
|
|
|
|
export default class ConnectedOrgSection extends BaseSection {
|
|
props: ConnectedOrgSectionProps;
|
|
$serverInfoContainer: Element | null;
|
|
$existingServers: Element | null;
|
|
$newOrgButton: HTMLButtonElement | null;
|
|
$addCertificateContainer: Element | null;
|
|
$findAccountsContainer: Element | null;
|
|
constructor(props: ConnectedOrgSectionProps) {
|
|
super();
|
|
this.props = props;
|
|
}
|
|
|
|
templateHTML(): string {
|
|
return htmlEscape`
|
|
<div class="settings-pane" id="server-settings-pane">
|
|
<div class="page-title">${t.__('Connected organizations')}</div>
|
|
<div class="title" id="existing-servers">${t.__('All the connected orgnizations will appear here.')}</div>
|
|
<div id="server-info-container"></div>
|
|
<div id="new-org-button"><button class="green sea w-250">${t.__('Connect to another organization')}</button></div>
|
|
<div class="page-title">${t.__('Add Custom Certificates')}</div>
|
|
<div id="add-certificate-container"></div>
|
|
<div class="page-title">${t.__('Find accounts by email')}</div>
|
|
<div id="find-accounts-container"></div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
init(): void {
|
|
this.initServers();
|
|
}
|
|
|
|
initServers(): void {
|
|
this.props.$root.textContent = '';
|
|
|
|
const servers = DomainUtil.getDomains();
|
|
this.props.$root.innerHTML = this.templateHTML();
|
|
|
|
this.$serverInfoContainer = document.querySelector('#server-info-container');
|
|
this.$existingServers = document.querySelector('#existing-servers');
|
|
this.$newOrgButton = document.querySelector('#new-org-button');
|
|
this.$addCertificateContainer = document.querySelector('#add-certificate-container');
|
|
this.$findAccountsContainer = document.querySelector('#find-accounts-container');
|
|
|
|
const noServerText = t.__('All the connected orgnizations will appear here');
|
|
// Show noServerText if no servers are there otherwise hide it
|
|
this.$existingServers.textContent = servers.length === 0 ? noServerText : '';
|
|
|
|
for (const [i, server] of servers.entries()) {
|
|
new ServerInfoForm({
|
|
$root: this.$serverInfoContainer,
|
|
server,
|
|
index: i,
|
|
onChange: this.reloadApp
|
|
}).init();
|
|
}
|
|
|
|
this.$newOrgButton.addEventListener('click', () => {
|
|
ipcRenderer.send('forward-message', 'open-org-tab');
|
|
});
|
|
|
|
this.initAddCertificate();
|
|
this.initFindAccounts();
|
|
}
|
|
|
|
initAddCertificate(): void {
|
|
new AddCertificate({
|
|
$root: this.$addCertificateContainer
|
|
}).init();
|
|
}
|
|
|
|
initFindAccounts(): void {
|
|
new FindAccounts({
|
|
$root: this.$findAccountsContainer
|
|
}).init();
|
|
}
|
|
}
|