release: New release v5.5.0.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

.editorconfig

@@ -2,6 +2,7 @@ root = true
 
 [*]
 indent_style = tab
+indent_size = 4
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

.gitattributes

@@ -1,7 +1,5 @@
 * text=auto eol=lf
 
-package-lock.json binary
-app/package-lock.json binary
 *.gif binary
 *.jpg binary
 *.jpeg binary

.github/ISSUE_TEMPLATE.md

@@ -1,8 +0,0 @@
----
-<!-- Please Include: -->
-- **Operating System**:
-  - [ ] Windows
-  - [ ] Linux/Ubuntu
-  - [ ] macOS
-- **Clear steps to reproduce the issue**:
-- **Relevant error messages and/or screenshots**:

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,25 @@
+---
+name: Bug report
+about: Create a report to help us improve
+---
+
+**Describe the bug**
+<!-- A clear and concise description of what the bug is. -->
+
+**To Reproduce**
+<!-- Clear steps to reproduce the issue. -->
+
+**Expected behavior**
+<!-- A clear and concise description of what you expected to happen. -->
+
+**Screenshots**
+<!-- If applicable, add screenshots to help explain your problem. -->
+
+**Desktop (please complete the following information):**
+ - Operating System: 
+ <!-- (Platform and Version) e.g. macOS 10.13.6 / Windows 10 (1803) / Ubuntu 18.04 x64 -->
+ - Zulip Desktop Version:
+<!-- e.g. 5.2.0 --> 
+
+**Additional context**
+<!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/custom.md

@@ -0,0 +1,6 @@
+---
+name: Custom issue template
+about: Describe this issue template's purpose here.
+---
+
+

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,16 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+---
+
+**Problem Description**
+<!-- Please add a clear and concise description of what the problem is. -->
+
+**Proposed Solution**
+<!-- Describe the solution you'd like in a clear and concise manner -->
+
+**Describe alternatives you've considered**
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
+
+**Additional context**
+<!-- Add any other context or screenshots about the feature request here. -->

.gitignore

@@ -1,9 +1,12 @@
-# Dependency directories
-node_modules/
+# Dependency directory
+/node_modules/
 
 # npm cache directory
 .npm
 
+# transifexrc - if user prefers it to be in working tree
+.transifexrc
+
 # Compiled binary build directory
 dist/
 
@@ -36,3 +39,6 @@ config.gypi
 # tests/package.json
 
 .python-version
+
+# Ignore all the typescript compiled files
+app/**/*.js

.mailmap

@@ -0,0 +1,5 @@
+Anders Kaseorg <anders@zulip.com> <anders@zulipchat.com>
+Rishi Gupta <rishig@zulip.com> <rishig@zulipchat.com>
+Rishi Gupta <rishig@zulip.com> <rishig@users.noreply.github.com>
+Tim Abbott <tabbott@zulip.com> <tabbott@zulipchat.com>
+Tim Abbott <tabbott@zulip.com> <tabbott@mit.edu>

.travis.yml

@@ -1,6 +1,3 @@
-sudo: required
-dist: trusty
-
 os:
 - osx
 - linux
@@ -15,23 +12,12 @@ addons:
 
 language: node_js
 node_js:
-- '8'
-
-before_install:
-  - ./scripts/travis-xvfb.sh
-  - npm install -g gulp
-  - npm install
+- '10'
+- '12'
 
 cache:
   directories:
   - node_modules
-  - app/node_modules
 
 script:
-- npm run travis
-notifications:
-  webhooks:
-    urls:
-      - https://zulip.org/zulipbot/travis
-    on_success: always
-    on_failure: always
+- npm run test

.tx/config

@@ -0,0 +1,9 @@
+[main]
+host = https://www.transifex.com
+
+[zulip.desktopjson]
+file_filter = app/translations/<lang>.json
+minimum_perc = 0
+source_file = app/translations/en.json
+source_lang = en
+type = KEYVALUEJSON

CONTRIBUTING.md

@@ -6,7 +6,7 @@ The following is a set of guidelines for contributing to Zulip's desktop Client.
 
 ## Getting Started
 
-Zulip-Desktop app is built on top of [Electron](http://electron.atom.io/). If you are new to Electron, please head over to [this](https://jlord.dev/blog/essential-electron) great article.
+Zulip-Desktop app is built on top of [Electron](http://electron.atom.io/). If you are new to Electron, please head over to [this](https://jlord.us/essential-electron) great article.
 
 ## Community
 

README.md

@@ -1,15 +1,16 @@
 # Zulip Desktop Client
-[![Build Status](https://travis-ci.org/zulip/zulip-desktop.svg?branch=master)](https://travis-ci.org/zulip/zulip-desktop)
+[![Build Status](https://travis-ci.com/zulip/zulip-desktop.svg?branch=master)](https://travis-ci.com/github/zulip/zulip-desktop)
 [![Windows Build Status](https://ci.appveyor.com/api/projects/status/github/zulip/zulip-desktop?branch=master&svg=true)](https://ci.appveyor.com/project/zulip/zulip-desktop/branch/master)
 [![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)
 [![project chat](https://img.shields.io/badge/zulip-join_chat-brightgreen.svg)](https://chat.zulip.org)
 
 Desktop client for Zulip. Available for Mac, Linux, and Windows.
 
-<img src="http://i.imgur.com/ChzTq4F.png"/>
+![screenshot](https://i.imgur.com/s1o6TRA.png)
+![screenshot](https://i.imgur.com/vekKnW4.png)
 
 # Download
-Please see the [installation guide](https://zulipchat.com/help/desktop-app-install-guide).
+Please see the [installation guide](https://zulip.com/help/desktop-app-install-guide).
 
 # Features
 * Sign in to multiple organizations
@@ -18,6 +19,15 @@ Please see the [installation guide](https://zulipchat.com/help/desktop-app-insta
 * Multi-language spell checker
 * Automatic updates
 
+# Reporting issues
+
+This desktop client shares most of its code with the Zulip webapp.
+Issues in an individual organization's Zulip window should be reported
+in the [Zulip server and webapp
+project](https://github.com/zulip/zulip/issues/new).  Other
+issues in the desktop app and its settings should be reported [in this
+project](https://github.com/zulip/zulip-desktop/issues/new).
+
 # Contribute
 
 First, join us on the [Zulip community server](https://zulip.readthedocs.io/en/latest/contributing/chat-zulip-org.html)!

app/main/autoupdater.ts

@@ -1,19 +1,26 @@
-'use strict';
-const { app, dialog, shell } = require('electron');
-const { autoUpdater } = require('electron-updater');
-const isDev = require('electron-is-dev');
+import {app, dialog, session} from 'electron';
+import util from 'util';
 
-const ConfigUtil = require('./../renderer/js/utils/config-util.js');
+import isDev from 'electron-is-dev';
+import log from 'electron-log';
+import {UpdateDownloadedEvent, UpdateInfo, autoUpdater} from 'electron-updater';
 
-function appUpdater(updateFromMenu = false) {
+import * as ConfigUtil from '../renderer/js/utils/config-util';
+import * as LinkUtil from '../renderer/js/utils/link-util';
+
+import {linuxUpdateNotification} from './linuxupdater';	// Required only in case of linux
+
+const sleep = util.promisify(setTimeout);
+
+export async function appUpdater(updateFromMenu = false): Promise<void> {
 	// Don't initiate auto-updates in development
 	if (isDev) {
 		return;
 	}
 
 	if (process.platform === 'linux' && !process.env.APPIMAGE) {
-		const { linuxUpdateNotification } = require('./linuxupdater');
-		linuxUpdateNotification();
+		const ses = session.fromPartition('persist:webviewsession');
+		await linuxUpdateNotification(ses);
 		return;
 	}
 
@@ -23,8 +30,6 @@ function appUpdater(updateFromMenu = false) {
 	const LogsDir = `${app.getPath('userData')}/Logs`;
 
 	// Log whats happening
-	const log = require('electron-log');
-
 	log.transports.file.file = `${LogsDir}/updates.log`;
 	log.transports.file.level = 'info';
 	autoUpdater.logger = log;
@@ -35,78 +40,72 @@ function appUpdater(updateFromMenu = false) {
 	autoUpdater.allowPrerelease = isBetaUpdate || false;
 
 	const eventsListenerRemove = ['update-available', 'update-not-available'];
-	autoUpdater.on('update-available', info => {
+	autoUpdater.on('update-available', async (info: UpdateInfo) => {
 		if (updateFromMenu) {
-			dialog.showMessageBox({
-				message: `A new version ${info.version}, of Zulip Desktop is available`,
-				detail: 'The update will be downloaded in the background. You will be notified when it is ready to be installed.'
-			});
-
 			updateAvailable = true;
 
 			// This is to prevent removal of 'update-downloaded' and 'error' event listener.
 			eventsListenerRemove.forEach(event => {
 				autoUpdater.removeAllListeners(event);
 			});
+
+			await dialog.showMessageBox({
+				message: `A new version ${info.version}, of Zulip Desktop is available`,
+				detail: 'The update will be downloaded in the background. You will be notified when it is ready to be installed.'
+			});
 		}
 	});
 
-	autoUpdater.on('update-not-available', () => {
+	autoUpdater.on('update-not-available', async () => {
 		if (updateFromMenu) {
-			dialog.showMessageBox({
+			// Remove all autoUpdator listeners so that next time autoUpdator is manually called these
+			// listeners don't trigger multiple times.
+			autoUpdater.removeAllListeners();
+
+			await dialog.showMessageBox({
 				message: 'No updates available',
 				detail: `You are running the latest version of Zulip Desktop.\nVersion: ${app.getVersion()}`
 			});
-			// Remove all autoUpdator listeners so that next time autoUpdator is manually called these
-			// listeners don't trigger multiple times.
-			autoUpdater.removeAllListeners();
 		}
 	});
 
-	autoUpdater.on('error', error => {
+	autoUpdater.on('error', async (error: Error) => {
 		if (updateFromMenu) {
-			const messageText = (updateAvailable) ? ('Unable to download the updates') : ('Unable to check for updates');
-			dialog.showMessageBox({
-				type: 'error',
-				buttons: ['Manual Download', 'Cancel'],
-				message: messageText,
-				detail: (error).toString() + `\n\nThe latest version of Zulip Desktop is available at -\nhttps://zulipchat.com/apps/.\n
-Current Version: ${app.getVersion()}`
-			}, response => {
-				if (response === 0) {
-					shell.openExternal('https://zulipchat.com/apps/');
-				}
-			});
 			// Remove all autoUpdator listeners so that next time autoUpdator is manually called these
 			// listeners don't trigger multiple times.
 			autoUpdater.removeAllListeners();
+
+			const messageText = (updateAvailable) ? ('Unable to download the updates') : ('Unable to check for updates');
+			const {response} = await dialog.showMessageBox({
+				type: 'error',
+				buttons: ['Manual Download', 'Cancel'],
+				message: messageText,
+				detail: `Error: ${error.message}\n\nThe latest version of Zulip Desktop is available at -\nhttps://zulip.com/apps/.\n
+				Current Version: ${app.getVersion()}`
+			});
+			if (response === 0) {
+				await LinkUtil.openBrowser(new URL('https://zulip.com/apps/'));
+			}
 		}
 	});
 
 	// Ask the user if update is available
-	// eslint-disable-next-line no-unused-vars
-	autoUpdater.on('update-downloaded', event => {
+	autoUpdater.on('update-downloaded', async (event: UpdateDownloadedEvent) => {
 		// Ask user to update the app
-		dialog.showMessageBox({
+		const {response} = await dialog.showMessageBox({
 			type: 'question',
 			buttons: ['Install and Relaunch', 'Install Later'],
 			defaultId: 0,
 			message: `A new update ${event.version} has been downloaded`,
 			detail: 'It will be installed the next time you restart the application'
-		}, response => {
-			if (response === 0) {
-				setTimeout(() => {
-					autoUpdater.quitAndInstall();
-					// force app to quit. This is just a workaround, ideally autoUpdater.quitAndInstall() should relaunch the app.
-					app.quit();
-				}, 1000);
-			}
 		});
+		if (response === 0) {
+			await sleep(1000);
+			autoUpdater.quitAndInstall();
+			// Force app to quit. This is just a workaround, ideally autoUpdater.quitAndInstall() should relaunch the app.
+			app.quit();
+		}
 	});
 	// Init for updates
-	autoUpdater.checkForUpdates();
+	await autoUpdater.checkForUpdates();
 }
-
-module.exports = {
-	appUpdater
-};

app/main/index.js

@@ -1,366 +0,0 @@
-'use strict';
-const path = require('path');
-const fs = require('fs');
-
-const electron = require('electron');
-const windowStateKeeper = require('electron-window-state');
-const isDev = require('electron-is-dev');
-const appMenu = require('./menu');
-const { appUpdater } = require('./autoupdater');
-
-const { setAutoLaunch } = require('./startup');
-
-const { app, ipcMain } = electron;
-
-const BadgeSettings = require('./../renderer/js/pages/preference/badge-settings.js');
-const ConfigUtil = require('./../renderer/js/utils/config-util.js');
-const ProxyUtil = require('./../renderer/js/utils/proxy-util.js');
-const { sentryInit } = require('./../renderer/js/utils/sentry-util.js');
-
-// Adds debug features like hotkeys for triggering dev tools and reload
-// in development mode
-if (isDev) {
-	require('electron-debug')();
-}
-
-// Prevent window being garbage collected
-let mainWindow;
-let badgeCount;
-
-let isQuitting = false;
-
-// Load this url in main window
-const mainURL = 'file://' + path.join(__dirname, '../renderer', 'main.html');
-
-const singleInstanceLock = app.requestSingleInstanceLock();
-if (singleInstanceLock) {
-	app.on('second-instance', () => {
-		if (mainWindow) {
-			if (mainWindow.isMinimized()) {
-				mainWindow.restore();
-			}
-
-			mainWindow.show();
-		}
-	});
-} else {
-	app.quit();
-}
-
-const APP_ICON = path.join(__dirname, '../resources', 'Icon');
-
-const iconPath = () => {
-	return APP_ICON + (process.platform === 'win32' ? '.ico' : '.png');
-};
-
-function createMainWindow() {
-	// Load the previous state with fallback to defaults
-	const mainWindowState = windowStateKeeper({
-		defaultWidth: 1100,
-		defaultHeight: 720,
-		path: `${app.getPath('userData')}/config`
-	});
-
-	// Let's keep the window position global so that we can access it in other process
-	global.mainWindowState = mainWindowState;
-
-	const win = new electron.BrowserWindow({
-		// This settings needs to be saved in config
-		title: 'Zulip',
-		icon: iconPath(),
-		x: mainWindowState.x,
-		y: mainWindowState.y,
-		width: mainWindowState.width,
-		height: mainWindowState.height,
-		minWidth: 300,
-		minHeight: 400,
-		webPreferences: {
-			plugins: true,
-			nodeIntegration: true,
-			partition: 'persist:webviewsession'
-		},
-		show: false
-	});
-
-	win.on('focus', () => {
-		win.webContents.send('focus');
-	});
-
-	win.loadURL(mainURL);
-
-	// Keep the app running in background on close event
-	win.on('close', e => {
-		if (!isQuitting) {
-			e.preventDefault();
-
-			if (process.platform === 'darwin') {
-				app.hide();
-			} else {
-				win.hide();
-			}
-		}
-	});
-
-	win.setTitle('Zulip');
-
-	win.on('enter-full-screen', () => {
-		win.webContents.send('enter-fullscreen');
-	});
-
-	win.on('leave-full-screen', () => {
-		win.webContents.send('leave-fullscreen');
-	});
-
-	//  To destroy tray icon when navigate to a new URL
-	win.webContents.on('will-navigate', e => {
-		if (e) {
-			win.webContents.send('destroytray');
-		}
-	});
-
-	// Let us register listeners on the window, so we can update the state
-	// automatically (the listeners will be removed when the window is closed)
-	// and restore the maximized or full screen state
-	mainWindowState.manage(win);
-
-	return win;
-}
-
-// Decrease load on GPU (experimental)
-app.disableHardwareAcceleration();
-
-// Temporary fix for Electron render colors differently
-// More info here - https://github.com/electron/electron/issues/10732
-app.commandLine.appendSwitch('force-color-profile', 'srgb');
-
-// eslint-disable-next-line max-params
-app.on('certificate-error', (event, webContents, url, error, certificate, callback) => {
-	event.preventDefault();
-	callback(true);
-});
-
-app.on('activate', () => {
-	if (!mainWindow) {
-		mainWindow = createMainWindow();
-	}
-});
-
-app.on('ready', () => {
-	appMenu.setMenu({
-		tabs: []
-	});
-	mainWindow = createMainWindow();
-
-	// Auto-hide menu bar on Windows + Linux
-	if (process.platform !== 'darwin') {
-		const shouldHideMenu = ConfigUtil.getConfigItem('autoHideMenubar') || false;
-		mainWindow.setAutoHideMenuBar(shouldHideMenu);
-		mainWindow.setMenuBarVisibility(!shouldHideMenu);
-	}
-
-	// Initialize sentry for main process
-	const errorReporting = ConfigUtil.getConfigItem('errorReporting');
-	if (errorReporting) {
-		sentryInit();
-	}
-
-	const isSystemProxy = ConfigUtil.getConfigItem('useSystemProxy');
-
-	if (isSystemProxy) {
-		ProxyUtil.resolveSystemProxy(mainWindow);
-	}
-
-	const page = mainWindow.webContents;
-
-	page.on('dom-ready', () => {
-		if (ConfigUtil.getConfigItem('startMinimized')) {
-			mainWindow.hide();
-		} else {
-			mainWindow.show();
-		}
-	});
-
-	page.once('did-frame-finish-load', () => {
-		// Initiate auto-updates on MacOS and Windows
-		if (ConfigUtil.getConfigItem('autoUpdate')) {
-			appUpdater();
-		}
-	});
-
-	// Temporarily remove this event
-	// electron.powerMonitor.on('resume', () => {
-	// 	mainWindow.reload();
-	// 	page.send('destroytray');
-	// });
-
-	ipcMain.on('focus-app', () => {
-		mainWindow.show();
-	});
-
-	ipcMain.on('quit-app', () => {
-		app.quit();
-	});
-
-	// Code to show pdf in a new BrowserWindow (currently commented out due to bug-upstream)
-	// ipcMain.on('pdf-view', (event, url) => {
-	// 	// Paddings for pdfWindow so that it fits into the main browserWindow
-	// 	const paddingWidth = 55;
-	// 	const paddingHeight = 22;
-
-	// 	// Get the config of main browserWindow
-	// 	const mainWindowState = global.mainWindowState;
-
-	// 	// Window to view the pdf file
-	// 	const pdfWindow = new electron.BrowserWindow({
-	// 		x: mainWindowState.x + paddingWidth,
-	// 		y: mainWindowState.y + paddingHeight,
-	// 		width: mainWindowState.width - paddingWidth,
-	// 		height: mainWindowState.height - paddingHeight,
-	// 		webPreferences: {
-	// 			plugins: true,
-	// 			partition: 'persist:webviewsession'
-	// 		}
-	// 	});
-	// 	pdfWindow.loadURL(url);
-
-	// 	// We don't want to have the menu bar in pdf window
-	// 	pdfWindow.setMenu(null);
-	// });
-
-	// Reload full app not just webview, useful in debugging
-	ipcMain.on('reload-full-app', () => {
-		mainWindow.reload();
-		page.send('destroytray');
-	});
-
-	ipcMain.on('clear-app-settings', () => {
-		global.mainWindowState.unmanage(mainWindow);
-		app.relaunch();
-		app.exit();
-	});
-
-	ipcMain.on('toggle-app', () => {
-		if (!mainWindow.isVisible() || mainWindow.isMinimized()) {
-			mainWindow.show();
-		} else {
-			mainWindow.hide();
-		}
-	});
-
-	ipcMain.on('toggle-badge-option', () => {
-		BadgeSettings.updateBadge(badgeCount, mainWindow);
-	});
-
-	ipcMain.on('toggle-menubar', (event, showMenubar) => {
-		mainWindow.setAutoHideMenuBar(showMenubar);
-		mainWindow.setMenuBarVisibility(!showMenubar);
-	});
-
-	ipcMain.on('update-badge', (event, messageCount) => {
-		badgeCount = messageCount;
-		BadgeSettings.updateBadge(badgeCount, mainWindow);
-		page.send('tray', messageCount);
-	});
-
-	ipcMain.on('update-taskbar-icon', (event, data, text) => {
-		BadgeSettings.updateTaskbarIcon(data, text, mainWindow);
-	});
-
-	ipcMain.on('forward-message', (event, listener, ...params) => {
-		page.send(listener, ...params);
-	});
-
-	ipcMain.on('update-menu', (event, props) => {
-		appMenu.setMenu(props);
-		const activeTab = props.tabs[props.activeTabIndex];
-		if (activeTab) {
-			mainWindow.setTitle(`Zulip - ${activeTab.webview.props.name}`);
-		}
-	});
-
-	ipcMain.on('toggleAutoLauncher', (event, AutoLaunchValue) => {
-		setAutoLaunch(AutoLaunchValue);
-	});
-
-	ipcMain.on('downloadFile', (event, url, downloadPath) => {
-		page.downloadURL(url);
-		page.session.once('will-download', (event, item) => {
-			const filePath = path.join(downloadPath, item.getFilename());
-
-			const getTimeStamp = () => {
-				const date = new Date();
-				return date.getTime();
-			};
-
-			const formatFile = filePath => {
-				const fileExtension = path.extname(filePath);
-				const baseName = path.basename(filePath, fileExtension);
-				return `${baseName}-${getTimeStamp()}${fileExtension}`;
-			};
-
-			// Update the name and path of the file if it already exists
-
-			const updatedFilePath = path.join(downloadPath, formatFile(filePath));
-
-			const setFilePath = fs.existsSync(filePath) ? updatedFilePath : filePath;
-
-			item.setSavePath(setFilePath);
-
-			item.on('updated', (event, state) => {
-				switch (state) {
-					case 'interrupted': {
-						// Can interrupted to due to network error, cancel download then
-						console.log('Download interrupted, cancelling and fallback to dialog download.');
-						item.cancel();
-						break;
-					}
-					case 'progressing': {
-						if (item.isPaused()) {
-							item.cancel();
-						}
-						// This event can also be used to show progress in percentage in future.
-						break;
-					}
-					default: {
-						console.info('Unknown updated state of download item');
-					}
-				}
-			});
-			item.once('done', (event, state) => {
-				const getFileName = fs.existsSync(filePath) ? formatFile(filePath) : item.getFilename();
-				if (state === 'completed') {
-					page.send('downloadFileCompleted', item.getSavePath(), getFileName);
-				} else {
-					console.log('Download failed state: ', state);
-					page.send('downloadFileFailed');
-				}
-				// To stop item for listening to updated events of this file
-				item.removeAllListeners('updated');
-			});
-		});
-	});
-
-	ipcMain.on('realm-name-changed', (event, serverURL, realmName) => {
-		page.send('update-realm-name', serverURL, realmName);
-	});
-
-	ipcMain.on('realm-icon-changed', (event, serverURL, iconURL) => {
-		page.send('update-realm-icon', serverURL, iconURL);
-	});
-
-	// Using event.sender.send instead of page.send here to
-	// make sure the value of errorReporting is sent only once on load.
-	ipcMain.on('error-reporting', event => {
-		event.sender.send('error-reporting-val', errorReporting);
-	});
-});
-
-app.on('before-quit', () => {
-	isQuitting = true;
-});
-
-// Send crash reports
-process.on('uncaughtException', err => {
-	console.error(err);
-	console.error(err.stack);
-});

app/main/index.ts

@@ -0,0 +1,420 @@
+
+import electron, {app, dialog, ipcMain, session} from 'electron';
+import fs from 'fs';
+import path from 'path';
+
+import windowStateKeeper from 'electron-window-state';
+
+import * as BadgeSettings from '../renderer/js/pages/preference/badge-settings';
+import * as ConfigUtil from '../renderer/js/utils/config-util';
+import * as ProxyUtil from '../renderer/js/utils/proxy-util';
+import {sentryInit} from '../renderer/js/utils/sentry-util';
+
+import {appUpdater} from './autoupdater';
+import * as AppMenu from './menu';
+import {_getServerSettings, _saveServerIcon, _isOnline} from './request';
+import {setAutoLaunch} from './startup';
+
+let mainWindowState: windowStateKeeper.State;
+
+// Prevent window being garbage collected
+let mainWindow: Electron.BrowserWindow;
+let badgeCount: number;
+
+let isQuitting = false;
+
+// Load this url in main window
+const mainURL = 'file://' + path.join(__dirname, '../renderer', 'main.html');
+
+const singleInstanceLock = app.requestSingleInstanceLock();
+if (singleInstanceLock) {
+	app.on('second-instance', () => {
+		if (mainWindow) {
+			if (mainWindow.isMinimized()) {
+				mainWindow.restore();
+			}
+
+			mainWindow.show();
+		}
+	});
+} else {
+	app.quit();
+}
+
+const rendererCallbacks = new Map();
+let nextRendererCallbackId = 0;
+
+ipcMain.on('renderer-callback', (event: Event, rendererCallbackId: number, ...args: any[]) => {
+	rendererCallbacks.get(rendererCallbackId)(...args);
+	rendererCallbacks.delete(rendererCallbackId);
+});
+
+function makeRendererCallback(callback: (...args: any[]) => void): number {
+	rendererCallbacks.set(nextRendererCallbackId, callback);
+	return nextRendererCallbackId++;
+}
+
+const APP_ICON = path.join(__dirname, '../resources', 'Icon');
+
+const iconPath = (): string => APP_ICON + (process.platform === 'win32' ? '.ico' : '.png');
+
+// Toggle the app window
+const toggleApp = (): void => {
+	if (!mainWindow.isVisible() || mainWindow.isMinimized()) {
+		mainWindow.show();
+	} else {
+		mainWindow.hide();
+	}
+};
+
+function createMainWindow(): Electron.BrowserWindow {
+	// Load the previous state with fallback to defaults
+	mainWindowState = windowStateKeeper({
+		defaultWidth: 1100,
+		defaultHeight: 720,
+		path: `${app.getPath('userData')}/config`
+	});
+
+	const win = new electron.BrowserWindow({
+		// This settings needs to be saved in config
+		title: 'Zulip',
+		icon: iconPath(),
+		x: mainWindowState.x,
+		y: mainWindowState.y,
+		width: mainWindowState.width,
+		height: mainWindowState.height,
+		minWidth: 500,
+		minHeight: 400,
+		webPreferences: {
+			contextIsolation: false,
+			enableRemoteModule: true,
+			nodeIntegration: true,
+			partition: 'persist:webviewsession',
+			webviewTag: true
+		},
+		show: false
+	});
+
+	win.on('focus', () => {
+		win.webContents.send('focus');
+	});
+
+	(async () => win.loadURL(mainURL))();
+
+	// Keep the app running in background on close event
+	win.on('close', event => {
+		if (ConfigUtil.getConfigItem('quitOnClose')) {
+			app.quit();
+		}
+
+		if (!isQuitting) {
+			event.preventDefault();
+
+			if (process.platform === 'darwin') {
+				app.hide();
+			} else {
+				win.hide();
+			}
+		}
+	});
+
+	win.setTitle('Zulip');
+
+	win.on('enter-full-screen', () => {
+		win.webContents.send('enter-fullscreen');
+	});
+
+	win.on('leave-full-screen', () => {
+		win.webContents.send('leave-fullscreen');
+	});
+
+	//  To destroy tray icon when navigate to a new URL
+	win.webContents.on('will-navigate', event => {
+		if (event) {
+			win.webContents.send('destroytray');
+		}
+	});
+
+	// Let us register listeners on the window, so we can update the state
+	// automatically (the listeners will be removed when the window is closed)
+	// and restore the maximized or full screen state
+	mainWindowState.manage(win);
+
+	return win;
+}
+
+// Decrease load on GPU (experimental)
+app.disableHardwareAcceleration();
+
+// Temporary fix for Electron render colors differently
+// More info here - https://github.com/electron/electron/issues/10732
+app.commandLine.appendSwitch('force-color-profile', 'srgb');
+
+// This event is only available on macOS. Triggers when you click on the dock icon.
+app.on('activate', () => {
+	if (mainWindow) {
+		// If there is already a window show it
+		mainWindow.show();
+	} else {
+		mainWindow = createMainWindow();
+	}
+});
+
+app.on('ready', () => {
+	const ses = session.fromPartition('persist:webviewsession');
+	ses.setUserAgent(`ZulipElectron/${app.getVersion()} ${ses.getUserAgent()}`);
+
+	ipcMain.on('set-spellcheck-langs', () => {
+		ses.setSpellCheckerLanguages(ConfigUtil.getConfigItem('spellcheckerLanguages'));
+	});
+	AppMenu.setMenu({
+		tabs: []
+	});
+	mainWindow = createMainWindow();
+
+	// Auto-hide menu bar on Windows + Linux
+	if (process.platform !== 'darwin') {
+		const shouldHideMenu = ConfigUtil.getConfigItem('autoHideMenubar') || false;
+		mainWindow.autoHideMenuBar = shouldHideMenu;
+		mainWindow.setMenuBarVisibility(!shouldHideMenu);
+	}
+
+	// Initialize sentry for main process
+	const errorReporting = ConfigUtil.getConfigItem('errorReporting');
+	if (errorReporting) {
+		sentryInit();
+	}
+
+	const isSystemProxy = ConfigUtil.getConfigItem('useSystemProxy');
+
+	if (isSystemProxy) {
+		(async () => ProxyUtil.resolveSystemProxy(mainWindow))();
+	}
+
+	const page = mainWindow.webContents;
+
+	page.on('dom-ready', () => {
+		if (ConfigUtil.getConfigItem('startMinimized')) {
+			mainWindow.hide();
+		} else {
+			mainWindow.show();
+		}
+	});
+
+	ipcMain.on('fetch-user-agent', event => {
+		event.returnValue = session.fromPartition('persist:webviewsession').getUserAgent();
+	});
+
+	ipcMain.handle('get-server-settings', async (event, domain: string) => _getServerSettings(domain, ses));
+
+	ipcMain.handle('save-server-icon', async (event, url: string) => _saveServerIcon(url, ses));
+
+	ipcMain.handle('is-online', async (event, url: string) => _isOnline(url, ses));
+
+	page.once('did-frame-finish-load', async () => {
+		// Initiate auto-updates on MacOS and Windows
+		if (ConfigUtil.getConfigItem('autoUpdate')) {
+			await appUpdater();
+		}
+	});
+
+	app.on('certificate-error', (
+		event: Event,
+		webContents: Electron.WebContents,
+		urlString: string,
+		error: string
+	) => {
+		const url = new URL(urlString);
+		dialog.showErrorBox(
+			'Certificate error',
+			`The server presented an invalid certificate for ${url.origin}:
+
+${error}`
+		);
+	});
+
+	page.session.setPermissionRequestHandler((webContents, permission, callback, details) => {
+		const {origin} = new URL(details.requestingUrl);
+		page.send('permission-request', {
+			webContentsId: webContents.id === mainWindow.webContents.id ?
+				null :
+				webContents.id,
+			origin,
+			permission
+		}, makeRendererCallback(callback));
+	});
+
+	// Temporarily remove this event
+	// electron.powerMonitor.on('resume', () => {
+	// 	mainWindow.reload();
+	// 	page.send('destroytray');
+	// });
+
+	ipcMain.on('focus-app', () => {
+		mainWindow.show();
+	});
+
+	ipcMain.on('quit-app', () => {
+		app.quit();
+	});
+
+	// Reload full app not just webview, useful in debugging
+	ipcMain.on('reload-full-app', () => {
+		mainWindow.reload();
+		page.send('destroytray');
+	});
+
+	ipcMain.on('clear-app-settings', () => {
+		mainWindowState.unmanage();
+		app.relaunch();
+		app.exit();
+	});
+
+	ipcMain.on('toggle-app', () => {
+		toggleApp();
+	});
+
+	ipcMain.on('toggle-badge-option', () => {
+		BadgeSettings.updateBadge(badgeCount, mainWindow);
+	});
+
+	ipcMain.on('toggle-menubar', (_event: Electron.IpcMainEvent, showMenubar: boolean) => {
+		mainWindow.autoHideMenuBar = showMenubar;
+		mainWindow.setMenuBarVisibility(!showMenubar);
+		page.send('toggle-autohide-menubar', showMenubar, true);
+	});
+
+	ipcMain.on('update-badge', (_event: Electron.IpcMainEvent, messageCount: number) => {
+		badgeCount = messageCount;
+		BadgeSettings.updateBadge(badgeCount, mainWindow);
+		page.send('tray', messageCount);
+	});
+
+	ipcMain.on('update-taskbar-icon', (_event: Electron.IpcMainEvent, data: string, text: string) => {
+		BadgeSettings.updateTaskbarIcon(data, text, mainWindow);
+	});
+
+	ipcMain.on('forward-message', (_event: Electron.IpcMainEvent, listener: string, ...parameters: unknown[]) => {
+		page.send(listener, ...parameters);
+	});
+
+	ipcMain.on('update-menu', (_event: Electron.IpcMainEvent, props: AppMenu.MenuProps) => {
+		AppMenu.setMenu(props);
+		const activeTab = props.tabs[props.activeTabIndex];
+		if (activeTab) {
+			mainWindow.setTitle(`Zulip - ${activeTab.webviewName}`);
+		}
+	});
+
+	ipcMain.on('toggleAutoLauncher', async (_event: Electron.IpcMainEvent, AutoLaunchValue: boolean) => {
+		await setAutoLaunch(AutoLaunchValue);
+	});
+
+	ipcMain.on('downloadFile', (_event: Electron.IpcMainEvent, url: string, downloadPath: string) => {
+		page.downloadURL(url);
+		page.session.once('will-download', async (_event: Event, item) => {
+			if (ConfigUtil.getConfigItem('promptDownload', false)) {
+				const showDialogOptions: electron.SaveDialogOptions = {
+					defaultPath: path.join(downloadPath, item.getFilename())
+				};
+				item.setSaveDialogOptions(showDialogOptions);
+			} else {
+				const getTimeStamp = (): number => {
+					const date = new Date();
+					return date.getTime();
+				};
+
+				const formatFile = (filePath: string): string => {
+					const fileExtension = path.extname(filePath);
+					const baseName = path.basename(filePath, fileExtension);
+					return `${baseName}-${getTimeStamp()}${fileExtension}`;
+				};
+
+				const filePath = path.join(downloadPath, item.getFilename());
+
+				// Update the name and path of the file if it already exists
+				const updatedFilePath = path.join(downloadPath, formatFile(filePath));
+				const setFilePath: string = fs.existsSync(filePath) ? updatedFilePath : filePath;
+				item.setSavePath(setFilePath);
+			}
+
+			const updatedListener = (_event: Event, state: string): void => {
+				switch (state) {
+					case 'interrupted': {
+						// Can interrupted to due to network error, cancel download then
+						console.log('Download interrupted, cancelling and fallback to dialog download.');
+						item.cancel();
+						break;
+					}
+
+					case 'progressing': {
+						if (item.isPaused()) {
+							item.cancel();
+						}
+
+						// This event can also be used to show progress in percentage in future.
+						break;
+					}
+
+					default: {
+						console.info('Unknown updated state of download item');
+					}
+				}
+			};
+
+			item.on('updated', updatedListener);
+			item.once('done', (_event: Event, state) => {
+				if (state === 'completed') {
+					page.send('downloadFileCompleted', item.getSavePath(), path.basename(item.getSavePath()));
+				} else {
+					console.log('Download failed state:', state);
+					page.send('downloadFileFailed', state);
+				}
+
+				// To stop item for listening to updated events of this file
+				item.removeListener('updated', updatedListener);
+			});
+		});
+	});
+
+	ipcMain.on('realm-name-changed', (_event: Electron.IpcMainEvent, serverURL: string, realmName: string) => {
+		page.send('update-realm-name', serverURL, realmName);
+	});
+
+	ipcMain.on('realm-icon-changed', (_event: Electron.IpcMainEvent, serverURL: string, iconURL: string) => {
+		page.send('update-realm-icon', serverURL, iconURL);
+	});
+
+	// Using event.sender.send instead of page.send here to
+	// make sure the value of errorReporting is sent only once on load.
+	ipcMain.on('error-reporting', (event: Electron.IpcMainEvent) => {
+		event.sender.send('error-reporting-val', errorReporting);
+	});
+
+	ipcMain.on('save-last-tab', (_event: Electron.IpcMainEvent, index: number) => {
+		ConfigUtil.setConfigItem('lastActiveTab', index);
+	});
+
+	// Update user idle status for each realm after every 15s
+	const idleCheckInterval = 15 * 1000; // 15 seconds
+	setInterval(() => {
+		// Set user idle if no activity in 1 second (idleThresholdSeconds)
+		const idleThresholdSeconds = 1; // 1 second
+		const idleState = electron.powerMonitor.getSystemIdleState(idleThresholdSeconds);
+		if (idleState === 'active') {
+			page.send('set-active');
+		} else {
+			page.send('set-idle');
+		}
+	}, idleCheckInterval);
+});
+
+app.on('before-quit', () => {
+	isQuitting = true;
+});
+
+// Send crash reports
+process.on('uncaughtException', err => {
+	console.error(err);
+	console.error(err.stack);
+});

app/main/linuxupdater.js

@@ -1,53 +0,0 @@
-const { app } = require('electron');
-const { Notification } = require('electron');
-
-const request = require('request');
-const semver = require('semver');
-const ConfigUtil = require('../renderer/js/utils/config-util');
-const ProxyUtil = require('../renderer/js/utils/proxy-util');
-const LinuxUpdateUtil = require('../renderer/js/utils/linux-update-util');
-const Logger = require('../renderer/js/utils/logger-util');
-
-const logger = new Logger({
-	file: 'linux-update-util.log',
-	timestamp: true
-});
-
-function linuxUpdateNotification() {
-	let	url = 'https://api.github.com/repos/zulip/zulip-desktop/releases';
-	url = ConfigUtil.getConfigItem('betaUpdate') ? url : url + '/latest';
-	const proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');
-
-	const options = {
-		url,
-		headers: {'User-Agent': 'request'},
-		proxy: proxyEnabled ? ProxyUtil.getProxy(url) : '',
-		ecdhCurve: 'auto'
-	};
-
-	request(options, (error, response, body) => {
-		if (error) {
-			logger.error('Linux update error.');
-			logger.error(error);
-			return;
-		}
-		if (response.statusCode < 400) {
-			const data = JSON.parse(body);
-			const latestVersion = ConfigUtil.getConfigItem('betaUpdate') ? data[0].tag_name : data.tag_name;
-
-			if (semver.gt(latestVersion, app.getVersion())) {
-				const notified = LinuxUpdateUtil.getUpdateItem(latestVersion);
-				if (notified === null) {
-					new Notification({title: 'Zulip Update', body: 'A new version ' + latestVersion + ' is available. Please update using your package manager.'}).show();
-					LinuxUpdateUtil.setUpdateItem(latestVersion, true);
-				}
-			}
-		} else {
-			logger.log('Linux update response status: ', response.statusCode);
-		}
-	});
-}
-
-module.exports = {
-	linuxUpdateNotification
-};

app/main/linuxupdater.ts

@@ -0,0 +1,45 @@
+import {app, Notification, net} from 'electron';
+
+import getStream from 'get-stream';
+import semver from 'semver';
+
+import * as ConfigUtil from '../renderer/js/utils/config-util';
+import * as LinuxUpdateUtil from '../renderer/js/utils/linux-update-util';
+import Logger from '../renderer/js/utils/logger-util';
+
+import {fetchResponse} from './request';
+
+const logger = new Logger({
+	file: 'linux-update-util.log',
+	timestamp: true
+});
+
+export async function linuxUpdateNotification(session: Electron.session): Promise<void> {
+	let	url = 'https://api.github.com/repos/zulip/zulip-desktop/releases';
+	url = ConfigUtil.getConfigItem('betaUpdate') ? url : url + '/latest';
+
+	try {
+		const response = await fetchResponse(net.request({url, session}));
+		if (response.statusCode !== 200) {
+			logger.log('Linux update response status: ', response.statusCode);
+			return;
+		}
+
+		const data = JSON.parse(await getStream(response));
+		const latestVersion = ConfigUtil.getConfigItem('betaUpdate') ? data[0].tag_name : data.tag_name;
+		if (typeof latestVersion !== 'string') {
+			throw new TypeError('Expected string for tag_name');
+		}
+
+		if (semver.gt(latestVersion, app.getVersion())) {
+			const notified = LinuxUpdateUtil.getUpdateItem(latestVersion);
+			if (notified === null) {
+				new Notification({title: 'Zulip Update', body: `A new version ${latestVersion} is available. Please update using your package manager.`}).show();
+				LinuxUpdateUtil.setUpdateItem(latestVersion, true);
+			}
+		}
+	} catch (error: unknown) {
+		logger.error('Linux update error.');
+		logger.error(error);
+	}
+}

app/main/menu.js

@@ -1,539 +0,0 @@
-'use strict';
-const path = require('path');
-
-const { app, shell, BrowserWindow, Menu, dialog } = require('electron');
-
-const fs = require('fs-extra');
-const AdmZip = require('adm-zip');
-const { appUpdater } = require('./autoupdater');
-
-const ConfigUtil = require(__dirname + '/../renderer/js/utils/config-util.js');
-const DNDUtil = require(__dirname + '/../renderer/js/utils/dnd-util.js');
-const Logger = require(__dirname + '/../renderer/js/utils/logger-util.js');
-
-const appName = app.getName();
-
-const logger = new Logger({
-	file: 'errors.log',
-	timestamp: true
-});
-
-class AppMenu {
-	getHistorySubmenu() {
-		return [{
-			label: 'Back',
-			accelerator: process.platform === 'darwin' ? 'Command+Left' : 'Alt+Left',
-			click(item, focusedWindow) {
-				if (focusedWindow) {
-					AppMenu.sendAction('back');
-				}
-			}
-		}, {
-			label: 'Forward',
-			accelerator: process.platform === 'darwin' ? 'Command+Right' : 'Alt+Right',
-			click(item, focusedWindow) {
-				if (focusedWindow) {
-					AppMenu.sendAction('forward');
-				}
-			}
-		}];
-	}
-
-	getToolsSubmenu() {
-		return [{
-			label: `Check for Updates`,
-			click() {
-				AppMenu.checkForUpdate();
-			}
-		},
-		{
-			label: `Release Notes`,
-			click() {
-				shell.openExternal(`https://github.com/zulip/zulip-desktop/releases/tag/v${app.getVersion()}`);
-			}
-		}, {
-			type: 'separator'
-		}, {
-			label: 'Factory Reset',
-			accelerator: process.platform === 'darwin' ? 'Command+Shift+D' : 'Ctrl+Shift+D',
-			click() {
-				AppMenu.resetAppSettings();
-			}
-		}, {
-			label: 'Download App Logs',
-			click() {
-				const zip = new AdmZip();
-				let date = new Date();
-				date = date.toLocaleDateString().replace(/\//g, '-');
-
-				// Create a zip file of all the logs and config data
-				zip.addLocalFolder(`${app.getPath('appData')}/${appName}/Logs`);
-				zip.addLocalFolder(`${app.getPath('appData')}/${appName}/config`);
-
-				// Put the log file in downloads folder
-				const logFilePath = `${app.getPath('downloads')}/Zulip-logs-${date}.zip`;
-				zip.writeZip(logFilePath);
-
-				// Open and select the log file
-				shell.showItemInFolder(logFilePath);
-			}
-		}, {
-			type: 'separator'
-		}, {
-			label: 'Toggle DevTools for Zulip App',
-			accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
-			click(item, focusedWindow) {
-				if (focusedWindow) {
-					focusedWindow.webContents.toggleDevTools();
-				}
-			}
-		}, {
-			label: 'Toggle DevTools for Active Tab',
-			accelerator: process.platform === 'darwin' ? 'Alt+Command+U' : 'Ctrl+Shift+U',
-			click(item, focusedWindow) {
-				if (focusedWindow) {
-					AppMenu.sendAction('tab-devtools');
-				}
-			}
-		}];
-	}
-
-	getViewSubmenu() {
-		return [{
-			label: 'Reload',
-			accelerator: 'CommandOrControl+R',
-			click(item, focusedWindow) {
-				if (focusedWindow) {
-					AppMenu.sendAction('reload-current-viewer');
-				}
-			}
-		}, {
-			label: 'Hard Reload',
-			accelerator: 'CommandOrControl+Shift+R',
-			click(item, focusedWindow) {
-				if (focusedWindow) {
-					AppMenu.sendAction('hard-reload');
-				}
-			}
-		}, {
-			type: 'separator'
-		}, {
-			role: 'togglefullscreen'
-		}, {
-			label: 'Zoom In',
-			accelerator: process.platform === 'darwin' ? 'Command+Plus' : 'Control+=',
-			click(item, focusedWindow) {
-				if (focusedWindow) {
-					AppMenu.sendAction('zoomIn');
-				}
-			}
-		}, {
-			label: 'Zoom Out',
-			accelerator: 'CommandOrControl+-',
-			click(item, focusedWindow) {
-				if (focusedWindow) {
-					AppMenu.sendAction('zoomOut');
-				}
-			}
-		}, {
-			label: 'Actual Size',
-			accelerator: 'CommandOrControl+0',
-			click(item, focusedWindow) {
-				if (focusedWindow) {
-					AppMenu.sendAction('zoomActualSize');
-				}
-			}
-		}, {
-			type: 'separator'
-		}, {
-			label: 'Toggle Tray Icon',
-			click(item, focusedWindow) {
-				if (focusedWindow) {
-					focusedWindow.webContents.send('toggletray');
-				}
-			}
-		}, {
-			label: 'Toggle Sidebar',
-			accelerator: 'CommandOrControl+Shift+S',
-			click(item, focusedWindow) {
-				if (focusedWindow) {
-					const newValue = !ConfigUtil.getConfigItem('showSidebar');
-					focusedWindow.webContents.send('toggle-sidebar', newValue);
-					ConfigUtil.setConfigItem('showSidebar', newValue);
-				}
-			}
-		}];
-	}
-
-	getHelpSubmenu() {
-		return [
-			{
-				label: `${appName + ' Desktop'} v${app.getVersion()}`,
-				enabled: false
-			},
-			{
-				label: 'About Zulip',
-				click(item, focusedWindow) {
-					if (focusedWindow) {
-						AppMenu.sendAction('open-about');
-					}
-				}
-			},
-			{
-				label: `Help Center`,
-				click() {
-					shell.openExternal('https://zulipchat.com/help/');
-				}
-			}, {
-				label: 'Report an Issue',
-				click() {
-					// the goal is to notify the main.html BrowserWindow
-					// which may not be the focused window.
-					BrowserWindow.getAllWindows().forEach(window => {
-						window.webContents.send('open-feedback-modal');
-					});
-				}
-			}];
-	}
-
-	getWindowSubmenu(tabs, activeTabIndex) {
-		const initialSubmenu = [{
-			role: 'minimize'
-		}, {
-			role: 'close'
-		}];
-
-		if (tabs.length > 0) {
-			const ShortcutKey = process.platform === 'darwin' ? 'Cmd' : 'Ctrl';
-			initialSubmenu.push({
-				type: 'separator'
-			});
-			for (let i = 0; i < tabs.length; i++) {
-				// Do not add functional tab settings to list of windows in menu bar
-				if (tabs[i].props.role === 'function' && tabs[i].webview.props.name === 'Settings') {
-					continue;
-				}
-
-				initialSubmenu.push({
-					label: tabs[i].webview.props.name,
-					accelerator: tabs[i].props.role === 'function' ? '' : `${ShortcutKey} + ${tabs[i].props.index + 1}`,
-					checked: tabs[i].props.index === activeTabIndex,
-					click(item, focusedWindow) {
-						if (focusedWindow) {
-							AppMenu.sendAction('switch-server-tab', tabs[i].props.index);
-						}
-					},
-					type: 'checkbox'
-				});
-			}
-			initialSubmenu.push({
-				type: 'separator'
-			});
-			initialSubmenu.push({
-				label: 'Switch to Next Organization',
-				accelerator: `Ctrl+Tab`,
-				enabled: tabs[activeTabIndex].props.role === 'server',
-				click(item, focusedWindow) {
-					if (focusedWindow) {
-						AppMenu.sendAction('switch-server-tab', AppMenu.getNextServer(tabs, activeTabIndex));
-					}
-				}
-			}, {
-				label: 'Switch to Previous Organization',
-				accelerator: `Ctrl+Shift+Tab`,
-				enabled: tabs[activeTabIndex].props.role === 'server',
-				click(item, focusedWindow) {
-					if (focusedWindow) {
-						AppMenu.sendAction('switch-server-tab', AppMenu.getPreviousServer(tabs, activeTabIndex));
-					}
-				}
-			});
-		}
-
-		return initialSubmenu;
-	}
-
-	getDarwinTpl(props) {
-		const { tabs, activeTabIndex, enableMenu } = props;
-
-		return [{
-			label: `${app.getName()}`,
-			submenu: [{
-				label: 'Add Organization',
-				accelerator: 'Cmd+Shift+N',
-				click(item, focusedWindow) {
-					if (focusedWindow) {
-						AppMenu.sendAction('new-server');
-					}
-				}
-			}, {
-				label: 'Toggle Do Not Disturb',
-				accelerator: 'Cmd+Shift+M',
-				click() {
-					const dndUtil = DNDUtil.toggle();
-					AppMenu.sendAction('toggle-dnd', dndUtil.dnd, dndUtil.newSettings);
-				}
-			}, {
-				label: 'Desktop Settings',
-				accelerator: 'Cmd+,',
-				click(item, focusedWindow) {
-					if (focusedWindow) {
-						AppMenu.sendAction('open-settings');
-					}
-				}
-			}, {
-				label: 'Keyboard Shortcuts',
-				accelerator: 'Cmd+Shift+K',
-				enabled: enableMenu,
-				click(item, focusedWindow) {
-					if (focusedWindow) {
-						AppMenu.sendAction('shortcut');
-					}
-				}
-			}, {
-				type: 'separator'
-			}, {
-				label: 'Copy Zulip URL',
-				accelerator: 'Cmd+Shift+C',
-				click(item, focusedWindow) {
-					if (focusedWindow) {
-						AppMenu.sendAction('copy-zulip-url');
-					}
-				}
-			}, {
-				label: 'Log Out of Organization',
-				accelerator: 'Cmd+L',
-				enabled: enableMenu,
-				click(item, focusedWindow) {
-					if (focusedWindow) {
-						AppMenu.sendAction('log-out');
-					}
-				}
-			}, {
-				type: 'separator'
-			}, {
-				role: 'services',
-				submenu: []
-			}, {
-				type: 'separator'
-			}, {
-				role: 'hide'
-			}, {
-				role: 'hideothers'
-			}, {
-				role: 'unhide'
-			}, {
-				type: 'separator'
-			}, {
-				role: 'quit'
-			}]
-		}, {
-			label: 'Edit',
-			submenu: [{
-				role: 'undo'
-			}, {
-				role: 'redo'
-			}, {
-				type: 'separator'
-			}, {
-				role: 'cut'
-			}, {
-				role: 'copy'
-			}, {
-				role: 'paste'
-			}, {
-				role: 'pasteandmatchstyle'
-			}, {
-				role: 'selectall'
-			}]
-		}, {
-			label: 'View',
-			submenu: this.getViewSubmenu()
-		}, {
-			label: 'History',
-			submenu: this.getHistorySubmenu()
-		}, {
-			label: 'Window',
-			submenu: this.getWindowSubmenu(tabs, activeTabIndex)
-		}, {
-			label: 'Tools',
-			submenu: this.getToolsSubmenu()
-		}, {
-			role: 'help',
-			submenu: this.getHelpSubmenu()
-		}];
-	}
-
-	getOtherTpl(props) {
-		const { tabs, activeTabIndex, enableMenu } = props;
-
-		return [{
-			label: '&File',
-			submenu: [{
-				label: 'Add Organization',
-				accelerator: 'Ctrl+Shift+N',
-				click(item, focusedWindow) {
-					if (focusedWindow) {
-						AppMenu.sendAction('new-server');
-					}
-				}
-			}, {
-				type: 'separator'
-			}, {
-				label: 'Toggle Do Not Disturb',
-				accelerator: 'Ctrl+Shift+M',
-				click() {
-					const dndUtil = DNDUtil.toggle();
-					AppMenu.sendAction('toggle-dnd', dndUtil.dnd, dndUtil.newSettings);
-				}
-			}, {
-				label: 'Desktop Settings',
-				accelerator: 'Ctrl+,',
-				click(item, focusedWindow) {
-					if (focusedWindow) {
-						AppMenu.sendAction('open-settings');
-					}
-				}
-			}, {
-				label: 'Keyboard Shortcuts',
-				accelerator: 'Ctrl+Shift+K',
-				enabled: enableMenu,
-				click(item, focusedWindow) {
-					if (focusedWindow) {
-						AppMenu.sendAction('shortcut');
-					}
-				}
-			}, {
-				type: 'separator'
-			}, {
-				label: 'Copy Zulip URL',
-				accelerator: 'Ctrl+Shift+C',
-				click(item, focusedWindow) {
-					if (focusedWindow) {
-						AppMenu.sendAction('copy-zulip-url');
-					}
-				}
-			}, {
-				label: 'Log Out of Organization',
-				accelerator: 'Ctrl+L',
-				enabled: enableMenu,
-				click(item, focusedWindow) {
-					if (focusedWindow) {
-						AppMenu.sendAction('log-out');
-					}
-				}
-			}, {
-				type: 'separator'
-			}, {
-				role: 'quit',
-				accelerator: 'Ctrl+Q'
-			}]
-		}, {
-			label: '&Edit',
-			submenu: [{
-				role: 'undo'
-			}, {
-				role: 'redo'
-			}, {
-				type: 'separator'
-			}, {
-				role: 'cut'
-			}, {
-				role: 'copy'
-			}, {
-				role: 'paste'
-			}, {
-				role: 'pasteandmatchstyle'
-			}, {
-				type: 'separator'
-			}, {
-				role: 'selectall'
-			}]
-		}, {
-			label: '&View',
-			submenu: this.getViewSubmenu()
-		}, {
-			label: '&History',
-			submenu: this.getHistorySubmenu()
-		}, {
-			label: '&Window',
-			submenu: this.getWindowSubmenu(tabs, activeTabIndex)
-		}, {
-			label: '&Tools',
-			submenu: this.getToolsSubmenu()
-		}, {
-			label: '&Help',
-			role: 'help',
-			submenu: this.getHelpSubmenu()
-		}];
-	}
-
-	static sendAction(action, ...params) {
-		const win = BrowserWindow.getAllWindows()[0];
-
-		if (process.platform === 'darwin') {
-			win.restore();
-		}
-
-		win.webContents.send(action, ...params);
-	}
-
-	static checkForUpdate() {
-		appUpdater(true);
-	}
-
-	static getNextServer(tabs, activeTabIndex) {
-		do {
-			activeTabIndex = (activeTabIndex + 1) % tabs.length;
-		}
-		while (tabs[activeTabIndex].props.role !== 'server');
-		return activeTabIndex;
-	}
-
-	static getPreviousServer(tabs, activeTabIndex) {
-		do {
-			activeTabIndex = (activeTabIndex - 1 + tabs.length) % tabs.length;
-		}
-		while (tabs[activeTabIndex].props.role !== 'server');
-		return activeTabIndex;
-	}
-
-	static resetAppSettings() {
-		const resetAppSettingsMessage = 'By proceeding you will be removing all connected organizations and preferences from Zulip.';
-
-		// We save App's settings/configurations in following files
-		const settingFiles = ['config/window-state.json', 'config/domain.json', 'config/settings.json', 'config/certificates.json'];
-
-		dialog.showMessageBox({
-			type: 'warning',
-			buttons: ['YES', 'NO'],
-			defaultId: 0,
-			message: 'Are you sure?',
-			detail: resetAppSettingsMessage
-		}, response => {
-			if (response === 0) {
-				settingFiles.forEach(settingFileName => {
-					const getSettingFilesPath = path.join(app.getPath('appData'), appName, settingFileName);
-					fs.access(getSettingFilesPath, error => {
-						if (error) {
-							logger.error('Error while resetting app settings.');
-							logger.error(error);
-						} else {
-							fs.unlink(getSettingFilesPath, () => {
-								AppMenu.sendAction('clear-app-data');
-							});
-						}
-					});
-				});
-			}
-		});
-	}
-
-	setMenu(props) {
-		const tpl = process.platform === 'darwin' ? this.getDarwinTpl(props) : this.getOtherTpl(props);
-		const menu = Menu.buildFromTemplate(tpl);
-		Menu.setApplicationMenu(menu);
-	}
-}
-
-module.exports = new AppMenu();

app/main/menu.ts

@@ -0,0 +1,572 @@
+import {app, shell, BrowserWindow, Menu} from 'electron';
+
+import AdmZip from 'adm-zip';
+
+import type {TabData} from '../renderer/js/main';
+import * as ConfigUtil from '../renderer/js/utils/config-util';
+import * as DNDUtil from '../renderer/js/utils/dnd-util';
+import * as LinkUtil from '../renderer/js/utils/link-util';
+import * as t from '../renderer/js/utils/translation-util';
+
+import {appUpdater} from './autoupdater';
+
+export interface MenuProps {
+	tabs: TabData[];
+	activeTabIndex?: number;
+	enableMenu?: boolean;
+}
+
+const appName = app.name;
+
+function getHistorySubmenu(enableMenu: boolean): Electron.MenuItemConstructorOptions[] {
+	return [{
+		label: t.__('Back'),
+		accelerator: process.platform === 'darwin' ? 'Command+Left' : 'Alt+Left',
+		enabled: enableMenu,
+		click(_item, focusedWindow) {
+			if (focusedWindow) {
+				sendAction('back');
+			}
+		}
+	}, {
+		label: t.__('Forward'),
+		accelerator: process.platform === 'darwin' ? 'Command+Right' : 'Alt+Right',
+		enabled: enableMenu,
+		click(_item, focusedWindow) {
+			if (focusedWindow) {
+				sendAction('forward');
+			}
+		}
+	}];
+}
+
+function getToolsSubmenu(): Electron.MenuItemConstructorOptions[] {
+	return [{
+		label: t.__('Check for Updates'),
+		async click() {
+			await checkForUpdate();
+		}
+	},
+	{
+		label: t.__('Release Notes'),
+		async click() {
+			await LinkUtil.openBrowser(new URL(`https://github.com/zulip/zulip-desktop/releases/tag/v${app.getVersion()}`));
+		}
+	},
+	{
+		type: 'separator'
+	},
+	{
+		label: t.__('Download App Logs'),
+		click() {
+			const zip = new AdmZip();
+			const date = new Date();
+			const dateString = date.toLocaleDateString().replace(/\//g, '-');
+
+			// Create a zip file of all the logs and config data
+			zip.addLocalFolder(`${app.getPath('appData')}/${appName}/Logs`);
+			zip.addLocalFolder(`${app.getPath('appData')}/${appName}/config`);
+
+			// Put the log file in downloads folder
+			const logFilePath = `${app.getPath('downloads')}/Zulip-logs-${dateString}.zip`;
+			zip.writeZip(logFilePath);
+
+			// Open and select the log file
+			shell.showItemInFolder(logFilePath);
+		}
+	},
+	{
+		type: 'separator'
+	},
+	{
+		label: t.__('Toggle DevTools for Zulip App'),
+		accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
+		click(_item, focusedWindow) {
+			if (focusedWindow) {
+				focusedWindow.webContents.openDevTools({mode: 'undocked'});
+			}
+		}
+	},
+	{
+		label: t.__('Toggle DevTools for Active Tab'),
+		accelerator: process.platform === 'darwin' ? 'Alt+Command+U' : 'Ctrl+Shift+U',
+		click(_item, focusedWindow) {
+			if (focusedWindow) {
+				sendAction('tab-devtools');
+			}
+		}
+	}];
+}
+
+function getViewSubmenu(): Electron.MenuItemConstructorOptions[] {
+	return [{
+		label: t.__('Reload'),
+		accelerator: 'CommandOrControl+R',
+		click(_item, focusedWindow) {
+			if (focusedWindow) {
+				sendAction('reload-current-viewer');
+			}
+		}
+	}, {
+		label: t.__('Hard Reload'),
+		accelerator: 'CommandOrControl+Shift+R',
+		click(_item, focusedWindow) {
+			if (focusedWindow) {
+				sendAction('hard-reload');
+			}
+		}
+	}, {
+		type: 'separator'
+	}, {
+		label: t.__('Toggle Full Screen'),
+		role: 'togglefullscreen'
+	}, {
+		label: t.__('Zoom In'),
+		accelerator: 'CommandOrControl+=',
+		click(_item, focusedWindow) {
+			if (focusedWindow) {
+				sendAction('zoomIn');
+			}
+		}
+	}, {
+		label: t.__('Zoom Out'),
+		accelerator: 'CommandOrControl+-',
+		click(_item, focusedWindow) {
+			if (focusedWindow) {
+				sendAction('zoomOut');
+			}
+		}
+	}, {
+		label: t.__('Actual Size'),
+		accelerator: 'CommandOrControl+0',
+		click(_item, focusedWindow) {
+			if (focusedWindow) {
+				sendAction('zoomActualSize');
+			}
+		}
+	}, {
+		type: 'separator'
+	}, {
+		label: t.__('Toggle Tray Icon'),
+		click(_item, focusedWindow) {
+			if (focusedWindow) {
+				focusedWindow.webContents.send('toggletray');
+			}
+		}
+	}, {
+		label: t.__('Toggle Sidebar'),
+		accelerator: 'CommandOrControl+Shift+S',
+		click(_item, focusedWindow) {
+			if (focusedWindow) {
+				const newValue = !ConfigUtil.getConfigItem('showSidebar');
+				focusedWindow.webContents.send('toggle-sidebar', newValue);
+				ConfigUtil.setConfigItem('showSidebar', newValue);
+			}
+		}
+	}, {
+		label: t.__('Auto hide Menu bar'),
+		checked: ConfigUtil.getConfigItem('autoHideMenubar', false),
+		visible: process.platform !== 'darwin',
+		click(_item, focusedWindow) {
+			if (focusedWindow) {
+				const newValue = !ConfigUtil.getConfigItem('autoHideMenubar');
+				focusedWindow.autoHideMenuBar = newValue;
+				focusedWindow.setMenuBarVisibility(!newValue);
+				focusedWindow.webContents.send('toggle-autohide-menubar', newValue);
+				ConfigUtil.setConfigItem('autoHideMenubar', newValue);
+			}
+		},
+		type: 'checkbox'
+	}];
+}
+
+function getHelpSubmenu(): Electron.MenuItemConstructorOptions[] {
+	return [
+		{
+			label: `${appName + ' Desktop'} v${app.getVersion()}`,
+			enabled: false
+		},
+		{
+			label: t.__('About Zulip'),
+			click(_item, focusedWindow) {
+				if (focusedWindow) {
+					sendAction('open-about');
+				}
+			}
+		},
+		{
+			label: t.__('Help Center'),
+			click(focusedWindow) {
+				if (focusedWindow) {
+					sendAction('open-help');
+				}
+			}
+		},
+		{
+			label: t.__('Report an Issue'),
+			click() {
+				// The goal is to notify the main.html BrowserWindow
+				// which may not be the focused window.
+				BrowserWindow.getAllWindows().forEach(window => {
+					window.webContents.send('open-feedback-modal');
+				});
+			}
+		}
+	];
+}
+
+function getWindowSubmenu(tabs: TabData[], activeTabIndex: number): Electron.MenuItemConstructorOptions[] {
+	const initialSubmenu: Electron.MenuItemConstructorOptions[] = [{
+		label: t.__('Minimize'),
+		role: 'minimize'
+	}, {
+		label: t.__('Close'),
+		role: 'close'
+	}];
+
+	if (tabs.length > 0) {
+		const ShortcutKey = process.platform === 'darwin' ? 'Cmd' : 'Ctrl';
+		initialSubmenu.push({
+			type: 'separator'
+		});
+		tabs.forEach(tab => {
+			// Do not add functional tab settings to list of windows in menu bar
+			if (tab.role === 'function' && tab.name === 'Settings') {
+				return;
+			}
+
+			initialSubmenu.push({
+				label: tab.name,
+				accelerator: tab.role === 'function' ? '' : `${ShortcutKey} + ${tab.index + 1}`,
+				checked: tab.index === activeTabIndex,
+				click(_item, focusedWindow) {
+					if (focusedWindow) {
+						sendAction('switch-server-tab', tab.index);
+					}
+				},
+				type: 'checkbox'
+			});
+		});
+		initialSubmenu.push({
+			type: 'separator'
+		});
+		initialSubmenu.push({
+			label: t.__('Switch to Next Organization'),
+			accelerator: 'Ctrl+Tab',
+			enabled: tabs.length > 1,
+			click(_item, focusedWindow) {
+				if (focusedWindow) {
+					sendAction('switch-server-tab', getNextServer(tabs, activeTabIndex));
+				}
+			}
+		}, {
+			label: t.__('Switch to Previous Organization'),
+			accelerator: 'Ctrl+Shift+Tab',
+			enabled: tabs.length > 1,
+			click(_item, focusedWindow) {
+				if (focusedWindow) {
+					sendAction('switch-server-tab', getPreviousServer(tabs, activeTabIndex));
+				}
+			}
+		});
+	}
+
+	return initialSubmenu;
+}
+
+function getDarwinTpl(props: MenuProps): Electron.MenuItemConstructorOptions[] {
+	const {tabs, activeTabIndex, enableMenu} = props;
+
+	return [{
+		label: app.name,
+		submenu: [{
+			label: t.__('Add Organization'),
+			accelerator: 'Cmd+Shift+N',
+			click(_item, focusedWindow) {
+				if (focusedWindow) {
+					sendAction('new-server');
+				}
+			}
+		}, {
+			label: t.__('Toggle Do Not Disturb'),
+			accelerator: 'Cmd+Shift+M',
+			click() {
+				const dndUtil = DNDUtil.toggle();
+				sendAction('toggle-dnd', dndUtil.dnd, dndUtil.newSettings);
+			}
+		}, {
+			label: t.__('Desktop Settings'),
+			accelerator: 'Cmd+,',
+			click(_item, focusedWindow) {
+				if (focusedWindow) {
+					sendAction('open-settings');
+				}
+			}
+		}, {
+			label: t.__('Keyboard Shortcuts'),
+			accelerator: 'Cmd+Shift+K',
+			enabled: enableMenu,
+			click(_item, focusedWindow) {
+				if (focusedWindow) {
+					sendAction('show-keyboard-shortcuts');
+				}
+			}
+		}, {
+			type: 'separator'
+		}, {
+			label: t.__('Copy Zulip URL'),
+			accelerator: 'Cmd+Shift+C',
+			enabled: enableMenu,
+			click(_item, focusedWindow) {
+				if (focusedWindow) {
+					sendAction('copy-zulip-url');
+				}
+			}
+		}, {
+			label: t.__('Log Out of Organization'),
+			accelerator: 'Cmd+L',
+			enabled: enableMenu,
+			click(_item, focusedWindow) {
+				if (focusedWindow) {
+					sendAction('log-out');
+				}
+			}
+		}, {
+			type: 'separator'
+		}, {
+			label: t.__('Services'),
+			role: 'services',
+			submenu: []
+		}, {
+			type: 'separator'
+		}, {
+			label: t.__('Hide'),
+			role: 'hide'
+		}, {
+			label: t.__('Hide Others'),
+			role: 'hideOthers'
+		}, {
+			label: t.__('Unhide'),
+			role: 'unhide'
+		}, {
+			type: 'separator'
+		}, {
+			label: t.__('Minimize'),
+			role: 'minimize'
+		}, {
+			label: t.__('Close'),
+			role: 'close'
+		}, {
+			label: t.__('Quit'),
+			role: 'quit'
+		}]
+	}, {
+		label: t.__('Edit'),
+		submenu: [{
+			label: t.__('Undo'),
+			accelerator: 'Cmd+Z',
+			click(_item, focusedWindow) {
+				if (focusedWindow) {
+					sendAction('undo');
+				}
+			}
+		}, {
+			label: t.__('Redo'),
+			accelerator: 'Cmd+Shift+Z',
+			click(_item, focusedWindow) {
+				if (focusedWindow) {
+					sendAction('redo');
+				}
+			}
+		}, {
+			type: 'separator'
+		}, {
+			label: t.__('Cut'),
+			role: 'cut'
+		}, {
+			label: t.__('Copy'),
+			role: 'copy'
+		}, {
+			label: t.__('Paste'),
+			role: 'paste'
+		}, {
+			label: t.__('Paste and Match Style'),
+			role: 'pasteAndMatchStyle'
+		}, {
+			label: t.__('Select All'),
+			role: 'selectAll'
+		}]
+	}, {
+		label: t.__('View'),
+		submenu: getViewSubmenu()
+	}, {
+		label: t.__('History'),
+		submenu: getHistorySubmenu(enableMenu)
+	}, {
+		label: t.__('Window'),
+		submenu: getWindowSubmenu(tabs, activeTabIndex)
+	}, {
+		label: t.__('Tools'),
+		submenu: getToolsSubmenu()
+	}, {
+		label: t.__('Help'),
+		role: 'help',
+		submenu: getHelpSubmenu()
+	}];
+}
+
+function getOtherTpl(props: MenuProps): Electron.MenuItemConstructorOptions[] {
+	const {tabs, activeTabIndex, enableMenu} = props;
+	return [{
+		label: t.__('File'),
+		submenu: [{
+			label: t.__('Add Organization'),
+			accelerator: 'Ctrl+Shift+N',
+			click(_item, focusedWindow) {
+				if (focusedWindow) {
+					sendAction('new-server');
+				}
+			}
+		}, {
+			type: 'separator'
+		}, {
+			label: t.__('Toggle Do Not Disturb'),
+			accelerator: 'Ctrl+Shift+M',
+			click() {
+				const dndUtil = DNDUtil.toggle();
+				sendAction('toggle-dnd', dndUtil.dnd, dndUtil.newSettings);
+			}
+		}, {
+			label: t.__('Desktop Settings'),
+			accelerator: 'Ctrl+,',
+			click(_item, focusedWindow) {
+				if (focusedWindow) {
+					sendAction('open-settings');
+				}
+			}
+		}, {
+			label: t.__('Keyboard Shortcuts'),
+			accelerator: 'Ctrl+Shift+K',
+			enabled: enableMenu,
+			click(_item, focusedWindow) {
+				if (focusedWindow) {
+					sendAction('show-keyboard-shortcuts');
+				}
+			}
+		}, {
+			type: 'separator'
+		}, {
+			label: t.__('Copy Zulip URL'),
+			accelerator: 'Ctrl+Shift+C',
+			enabled: enableMenu,
+			click(_item, focusedWindow) {
+				if (focusedWindow) {
+					sendAction('copy-zulip-url');
+				}
+			}
+		}, {
+			label: t.__('Log Out of Organization'),
+			accelerator: 'Ctrl+L',
+			enabled: enableMenu,
+			click(_item, focusedWindow) {
+				if (focusedWindow) {
+					sendAction('log-out');
+				}
+			}
+		}, {
+			type: 'separator'
+		}, {
+			label: t.__('Minimize'),
+			role: 'minimize'
+		}, {
+			label: t.__('Close'),
+			role: 'close'
+		}, {
+			label: t.__('Quit'),
+			role: 'quit',
+			accelerator: 'Ctrl+Q'
+		}]
+	}, {
+		label: t.__('Edit'),
+		submenu: [{
+			label: t.__('Undo'),
+			role: 'undo'
+		}, {
+			label: t.__('Redo'),
+			role: 'redo'
+		}, {
+			type: 'separator'
+		}, {
+			label: t.__('Cut'),
+			role: 'cut'
+		}, {
+			label: t.__('Copy'),
+			role: 'copy'
+		}, {
+			label: t.__('Paste'),
+			role: 'paste'
+		}, {
+			label: t.__('Paste and Match Style'),
+			role: 'pasteAndMatchStyle'
+		}, {
+			type: 'separator'
+		}, {
+			label: t.__('Select All'),
+			role: 'selectAll'
+		}]
+	}, {
+		label: t.__('View'),
+		submenu: getViewSubmenu()
+	}, {
+		label: t.__('History'),
+		submenu: getHistorySubmenu(enableMenu)
+	}, {
+		label: t.__('Window'),
+		submenu: getWindowSubmenu(tabs, activeTabIndex)
+	}, {
+		label: t.__('Tools'),
+		submenu: getToolsSubmenu()
+	}, {
+		label: t.__('Help'),
+		role: 'help',
+		submenu: getHelpSubmenu()
+	}];
+}
+
+function sendAction(action: string, ...parameters: unknown[]): void {
+	const win = BrowserWindow.getAllWindows()[0];
+
+	if (process.platform === 'darwin') {
+		win.restore();
+	}
+
+	win.webContents.send(action, ...parameters);
+}
+
+async function checkForUpdate(): Promise<void> {
+	await appUpdater(true);
+}
+
+function getNextServer(tabs: TabData[], activeTabIndex: number): number {
+	do {
+		activeTabIndex = (activeTabIndex + 1) % tabs.length;
+	}
+	while (tabs[activeTabIndex].role !== 'server');
+
+	return activeTabIndex;
+}
+
+function getPreviousServer(tabs: TabData[], activeTabIndex: number): number {
+	do {
+		activeTabIndex = (activeTabIndex - 1 + tabs.length) % tabs.length;
+	}
+	while (tabs[activeTabIndex].role !== 'server');
+
+	return activeTabIndex;
+}
+
+export function setMenu(props: MenuProps): void {
+	const tpl = process.platform === 'darwin' ? getDarwinTpl(props) : getOtherTpl(props);
+	const menu = Menu.buildFromTemplate(tpl);
+	Menu.setApplicationMenu(menu);
+}

app/main/request.ts

@@ -0,0 +1,112 @@
+import {ClientRequest, IncomingMessage, app, net} from 'electron';
+import fs from 'fs';
+import path from 'path';
+import stream from 'stream';
+import util from 'util';
+
+import getStream from 'get-stream';
+
+import {ServerConf} from '../renderer/js/utils/domain-util';
+import Logger from '../renderer/js/utils/logger-util';
+import * as Messages from '../resources/messages';
+
+export async function fetchResponse(request: ClientRequest): Promise<IncomingMessage> {
+	return new Promise((resolve, reject) => {
+		request.on('response', resolve);
+		request.on('abort', () => reject(new Error('Request aborted')));
+		request.on('error', reject);
+		request.end();
+	});
+}
+
+const pipeline = util.promisify(stream.pipeline);
+
+/* Request: domain-util */
+
+const defaultIconUrl = '../renderer/img/icon.png';
+
+const logger = new Logger({
+	file: 'domain-util.log',
+	timestamp: true
+});
+
+const generateFilePath = (url: string): string => {
+	const dir = `${app.getPath('userData')}/server-icons`;
+	const extension = path.extname(url).split('?')[0];
+
+	let hash = 5381;
+	let {length} = url;
+
+	while (length) {
+		hash = (hash * 33) ^ url.charCodeAt(--length);
+	}
+
+	// Create 'server-icons' directory if not existed
+	if (!fs.existsSync(dir)) {
+		fs.mkdirSync(dir);
+	}
+
+	return `${dir}/${hash >>> 0}${extension}`;
+};
+
+export const _getServerSettings = async (domain: string, session: Electron.session): Promise<ServerConf> => {
+	const response = await fetchResponse(net.request({
+		url: domain + '/api/v1/server_settings',
+		session
+	}));
+	if (response.statusCode !== 200) {
+		throw new Error(Messages.invalidZulipServerError(domain));
+	}
+
+	const {realm_name, realm_uri, realm_icon} = JSON.parse(await getStream(response));
+	if (
+		typeof realm_name !== 'string' ||
+			typeof realm_uri !== 'string' ||
+			typeof realm_icon !== 'string'
+	) {
+		throw new TypeError(Messages.noOrgsError(domain));
+	}
+
+	return {
+		// Some Zulip Servers use absolute URL for server icon whereas others use relative URL
+		// Following check handles both the cases
+		icon: realm_icon.startsWith('/') ? realm_uri + realm_icon : realm_icon,
+		url: realm_uri,
+		alias: realm_name
+	};
+};
+
+export const _saveServerIcon = async (url: string, session: Electron.session): Promise<string> => {
+	try {
+		const response = await fetchResponse(net.request({url, session}));
+		if (response.statusCode !== 200) {
+			logger.log('Could not get server icon.');
+			return defaultIconUrl;
+		}
+
+		const filePath = generateFilePath(url);
+		await pipeline(response, fs.createWriteStream(filePath));
+		return filePath;
+	} catch (error: unknown) {
+		logger.log('Could not get server icon.');
+		logger.log(error);
+		logger.reportSentry(error);
+		return defaultIconUrl;
+	}
+};
+
+/* Request: reconnect-util */
+
+export const _isOnline = async (url: string, session: Electron.session): Promise<boolean> => {
+	try {
+		const response = await fetchResponse(net.request({
+			url: `${url}/static/favicon.ico`,
+			session
+		}));
+		const isValidResponse = response.statusCode >= 200 && response.statusCode < 400;
+		return isValidResponse;
+	} catch (error: unknown) {
+		logger.log(error);
+		return false;
+	}
+};

app/main/startup.js

@@ -1,34 +0,0 @@
-'use strict';
-const { app } = require('electron');
-const AutoLaunch = require('auto-launch');
-const isDev = require('electron-is-dev');
-const ConfigUtil = require('./../renderer/js/utils/config-util.js');
-
-const setAutoLaunch = AutoLaunchValue => {
-	// Don't run this in development
-	if (isDev) {
-		return;
-	}
-
-	// On Mac, work around a bug in auto-launch where it opens a Terminal window
-	// See https://github.com/Teamwork/node-auto-launch/issues/28#issuecomment-222194437
-
-	const appPath = process.platform === 'darwin' ? app.getPath('exe').replace(/\.app\/Content.*/, '.app') : undefined; // Use the default
-
-	const ZulipAutoLauncher = new AutoLaunch({
-		name: 'Zulip',
-		path: appPath,
-		isHidden: false
-	});
-	const autoLaunchOption = ConfigUtil.getConfigItem('startAtLogin', AutoLaunchValue);
-
-	if (autoLaunchOption) {
-		ZulipAutoLauncher.enable();
-	} else {
-		ZulipAutoLauncher.disable();
-	}
-};
-
-module.exports = {
-	setAutoLaunch
-};

app/main/startup.ts

@@ -0,0 +1,29 @@
+import {app} from 'electron';
+
+import AutoLaunch from 'auto-launch';
+import isDev from 'electron-is-dev';
+
+import * as ConfigUtil from '../renderer/js/utils/config-util';
+
+export const setAutoLaunch = async (AutoLaunchValue: boolean): Promise<void> => {
+	// Don't run this in development
+	if (isDev) {
+		return;
+	}
+
+	const autoLaunchOption = ConfigUtil.getConfigItem('startAtLogin', AutoLaunchValue);
+
+	// `setLoginItemSettings` doesn't support linux
+	if (process.platform === 'linux') {
+		const ZulipAutoLauncher = new AutoLaunch({
+			name: 'Zulip',
+			isHidden: false
+		});
+		await (autoLaunchOption ? ZulipAutoLauncher.enable() : ZulipAutoLauncher.disable());
+	} else {
+		app.setLoginItemSettings({
+			openAtLogin: autoLaunchOption,
+			openAsHidden: false
+		});
+	}
+};

app/package.json

@@ -1,48 +0,0 @@
-{
-  "name": "zulip",
-  "productName": "Zulip",
-  "version": "3.0.0",
-  "description": "Zulip Desktop App",
-  "license": "Apache-2.0",
-  "copyright": "Kandra Labs, Inc.",
-  "author": {
-    "name": "Kandra Labs, Inc.",
-    "email": "support@zulipchat.com"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/zulip/zulip-desktop.git"
-  },
-  "bugs": {
-    "url": "https://github.com/zulip/zulip-desktop/issues"
-  },
-  "main": "main/index.js",
-  "keywords": [
-    "Zulip",
-    "Group Chat app",
-    "electron-app",
-    "electron",
-    "Desktop app",
-    "InstantMessaging"
-  ],
-  "dependencies": {
-    "@electron-elements/send-feedback": "1.0.8",
-    "@sentry/electron": "0.14.0",
-    "adm-zip": "0.4.11",
-    "auto-launch": "5.0.5",
-    "electron-is-dev": "0.3.0",
-    "electron-log": "2.2.14",
-    "electron-spellchecker": "1.1.2",
-    "electron-updater": "4.0.6",
-    "electron-window-state": "5.0.3",
-    "escape-html": "1.0.3",
-    "is-online": "7.0.0",
-    "node-json-db": "0.9.1",
-    "request": "2.85.0",
-    "semver": "5.4.1",
-    "wurl": "2.5.0"
-  },
-  "optionalDependencies": {
-    "node-mac-notifier": "1.1.0"
-  }
-}

app/renderer/about.html

@@ -14,34 +14,19 @@
             <div class="maintenance-info">
                 <p class="detail maintainer">
                     Maintained by
-                    <a onclick="linkInBrowser('website')">Zulip</a>
+                    <a href="https://zulip.com" target="_blank" rel="noopener noreferrer">Zulip</a>
                 </p>
                 <p class="detail license">
                     Available under the
-                    <a onclick="linkInBrowser('license')">Apache 2.0 License</a>
+                    <a href="https://github.com/zulip/zulip-desktop/blob/master/LICENSE" target="_blank" rel="noopener noreferrer">Apache 2.0 License</a>
                 </p>
             </div>
         </div>
         <script>
 
             const { app } = require('electron').remote;
-            const { shell } = require('electron');
             const version_tag = document.querySelector('#version');
-            version_tag.innerHTML = 'v' + app.getVersion();
-
-            function linkInBrowser(type) {
-                let url;
-                switch (type) {
-                    case 'website':
-                        url = "https://zulipchat.com";
-                        break;
-                    case 'license':
-                        url = "https://github.com/zulip/zulip-desktop/blob/master/LICENSE";
-                        break;
-                }
-                shell.openExternal(url);
-            }
+            version_tag.textContent = 'v' + app.getVersion();
         </script>
-        <script>require('./js/shared/preventdrag.js')</script>
     </body>
 </html>

app/renderer/css/feedback.css

@@ -0,0 +1,19 @@
+:host {
+    --button-color: rgb(69, 166, 149);
+}
+
+button:hover,
+button:focus {
+    border-color: var(--button-color);
+    color: var(--button-color);
+}
+  
+button:active {
+    background-color: rgb(241, 241, 241);
+    color: var(--button-color);
+}
+
+button {
+    background-color: var(--button-color);
+    border-color: var(--button-color);
+}

app/renderer/css/main.css

@@ -267,6 +267,18 @@ body {
     margin-bottom: 5px;
 }
 
+.refresh {
+    animation: rotate-loader 1s linear infinite;
+}
+
+@keyframes rotate-loader {
+    from {
+        transform: rotate(0);
+    }
+    to {
+        transform: rotate(-360deg);
+    }
+}
 
 /*******************
   *   Webview Area  *
@@ -328,6 +340,7 @@ webview.focus {
 
 /* Tooltip styling */
 
+#loading-tooltip,
 #dnd-tooltip,
 #back-tooltip,
 #reload-tooltip,
@@ -346,6 +359,7 @@ webview.focus {
     font-size: 14px;
 }
 
+#loading-tooltip::after,
 #dnd-tooltip::after,
 #back-tooltip::after,
 #reload-tooltip::after,

app/renderer/css/network.css

@@ -17,27 +17,43 @@ body {
 }
 
 #title {
+    text-align: left;
     font-size: 24px;
     font-weight: bold;
     margin: 20px 0;
 }
 
+#subtitle {
+    font-size: 20px;
+    text-align: left;
+    margin: 12px 0;
+}
+
 #description {
+    text-align: left;
     font-size: 16px;
+    list-style-position: inside;
 }
 
 #reconnect {
+    float: left;
+}
+
+#settings {
+    margin-left: 116px;
+}
+
+.button {
     font-size: 16px;
     background: rgba(0, 150, 136, 1.000);
     color: rgba(255, 255, 255, 1.000);
-    width: 84px;
+    width: 96px;
     height: 32px;
     border-radius: 5px;
     line-height: 32px;
-    margin: 20px auto 0;
     cursor: pointer;
 }
 
-#reconnect:hover {
+.button:hover {
     opacity: 0.8;
 }

app/renderer/css/preference.css

@@ -259,6 +259,10 @@ img.server-info-icon {
     border: rgba(78, 191, 172, 1.000) 2px solid;
 }
 
+.invalid-input-value:focus {
+    border: rgba(239, 83, 80, 1) 2px solid;
+}
+
 .manual-proxy-block {
     width: 96%;
 }
@@ -385,6 +389,10 @@ img.server-info-icon {
     margin: 6px;
 }
 
+#note {
+    font-size: 10px;
+}
+
 .code {
     font-family: Courier New, Courier, monospace;
 }
@@ -395,8 +403,17 @@ i.open-tab-button {
     cursor: pointer;
 }
 
-.css-delete-action {
-    margin-bottom: 10px;
+#css-delete-action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+
+    /*
+        .action class will add extra margin to right which
+        we don't want for a button; the extra margin is intended for radio buttons
+    */
+    margin-right: 0px;
 }
 
 .selected-css-path,
@@ -449,6 +466,11 @@ i.open-tab-button {
     user-select: none;
 }
 
+.disallowed:hover {
+    background-color: rgba(241, 241, 241, 1.000);
+    cursor: not-allowed;
+}
+
 input.toggle-round + label {
     padding: 2px;
     width: 50px;
@@ -600,10 +622,6 @@ input.toggle-round:checked + label::after {
     max-width: 100%;
 }
 
-#add-certificate-button {
-    margin: 10px 10px 10px 37px;
-}
-
 .tip {
     background: none;
     padding: 0;
@@ -624,7 +642,47 @@ input.toggle-round:checked + label::after {
     cursor: pointer;
 }
 
+.server-network-option {
+    font-weight: bold;
+    font-size: 1.1rem;
+    margin-top: 10px;
+    padding-top: 15px;
+    align-items: center;
+    text-align: center;
+    color: rgb(78, 191, 172);
+    width: 98%;
+    height: 46px;
+    cursor: pointer;
+}
+
+i.open-network-button {
+    font-size: 16px;
+    cursor: pointer;
+    padding-left: 5px;
+    position: absolute;
+}
+
 /* responsive grid */
+@media (min-width: 500px) and (max-width: 720px) {
+    #new-server-container {
+        padding-left: 0px;
+        width: 60vw;
+        padding-right: 4vh;
+    }
+    .page-title {
+        width: 60vw;
+    }
+}
+
+@media (max-width: 500px) {
+    #new-server-container {
+        padding-left: 0px;
+        width: 54%;
+    }
+    .page-title {
+        width: 54%;
+    }
+}
 
 @media (max-width: 650px) {
     .selected-css-path,
@@ -657,9 +715,6 @@ input.toggle-round:checked + label::after {
         margin-right: 6px;
         width: 43%;
     }
-    #new-server-container {
-        padding-left: 0px;
-    }
 }
 
 @media (max-width: 600px) {
@@ -686,3 +741,13 @@ input.toggle-round:checked + label::after {
         margin-top: 10px;
     }
 }
+
+.lang-menu {
+    font-size: 13px;
+    font-weight: bold;
+    background: rgba(78, 191, 172, 1.000);
+    width: 100px;
+    height: 38px;
+    color: rgba(255, 255, 255, 1.000);
+    border-color: rgba(0, 0, 0, 0);
+}

app/renderer/js/clipboard-decrypter.ts

@@ -0,0 +1,82 @@
+import crypto from 'crypto';
+import {clipboard} from 'electron';
+
+// This helper is exposed via electron_bridge for use in the social
+// login flow.
+//
+// It consists of a key and a promised token.  The in-app page sends
+// the key to the server, and opens the user’s browser to a page where
+// they can log in and get a token encrypted to that key.  When the
+// user copies the encrypted token from their browser to the
+// clipboard, we decrypt it and resolve the promise.  The in-app page
+// then uses the decrypted token to log the user in within the app.
+//
+// The encryption is authenticated (AES-GCM) to guarantee that we
+// don’t leak anything from the user’s clipboard other than the token
+// intended for us.
+
+export class ClipboardDecrypterImpl implements ClipboardDecrypter {
+	version: number;
+	key: Uint8Array;
+	pasted: Promise<string>;
+
+	constructor(_: number) {
+		// At this time, the only version is 1.
+		this.version = 1;
+		this.key = crypto.randomBytes(32);
+		this.pasted = new Promise(resolve => {
+			let interval: NodeJS.Timeout | null = null;
+			const startPolling = () => {
+				if (interval === null) {
+					interval = setInterval(poll, 1000);
+				}
+
+				poll();
+			};
+
+			const stopPolling = () => {
+				if (interval !== null) {
+					clearInterval(interval);
+					interval = null;
+				}
+			};
+
+			const poll = () => {
+				let plaintext;
+
+				try {
+					const data = Buffer.from(clipboard.readText(), 'hex');
+					const iv = data.slice(0, 12);
+					const ciphertext = data.slice(12, -16);
+					const authTag = data.slice(-16);
+					const decipher = crypto.createDecipheriv(
+						'aes-256-gcm',
+						this.key,
+						iv,
+						{authTagLength: 16}
+					);
+					decipher.setAuthTag(authTag);
+					plaintext =
+						decipher.update(ciphertext, undefined, 'utf8') +
+						decipher.final('utf8');
+				} catch {
+					// If the parsing or decryption failed in any way,
+					// the correct token hasn’t been copied yet; try
+					// again next time.
+					return;
+				}
+
+				window.removeEventListener('focus', startPolling);
+				window.removeEventListener('blur', stopPolling);
+				stopPolling();
+				resolve(plaintext);
+			};
+
+			window.addEventListener('focus', startPolling);
+			window.addEventListener('blur', stopPolling);
+			if (document.hasFocus()) {
+				startPolling();
+			}
+		});
+	}
+}

app/renderer/js/components/base.js

@@ -1,11 +0,0 @@
-'use strict';
-
-class BaseComponent {
-	generateNodeFromTemplate(template) {
-		const wrapper = document.createElement('div');
-		wrapper.innerHTML = template;
-		return wrapper.firstElementChild;
-	}
-}
-
-module.exports = BaseComponent;

app/renderer/js/components/base.ts

@@ -0,0 +1,7 @@
+export default class BaseComponent {
+	generateNodeFromHTML(html: string): Element | null {
+		const wrapper = document.createElement('div');
+		wrapper.innerHTML = html;
+		return wrapper.firstElementChild;
+	}
+}

app/renderer/js/components/context-menu.ts

@@ -0,0 +1,115 @@
+import {remote, ContextMenuParams} from 'electron';
+
+import * as t from '../utils/translation-util';
+
+const {clipboard, Menu} = remote;
+
+export const contextMenu = (webContents: Electron.WebContents, event: Event, props: ContextMenuParams) => {
+	const isText = props.selectionText !== '';
+	const isLink = props.linkURL !== '';
+	const linkURL = isLink ? new URL(props.linkURL) : undefined;
+	const isEmailAddress = isLink ? linkURL.protocol === 'mailto:' : undefined;
+
+	const makeSuggestion = (suggestion: string) => ({
+		label: suggestion,
+		visible: true,
+		async click() {
+			await webContents.insertText(suggestion);
+		}
+	});
+
+	let menuTemplate: Electron.MenuItemConstructorOptions[] = [{
+		label: t.__('Add to Dictionary'),
+		visible: props.isEditable && isText && props.misspelledWord.length !== 0,
+		click(_item) {
+			webContents.session.addWordToSpellCheckerDictionary(props.misspelledWord);
+		}
+	}, {
+		type: 'separator',
+		visible: props.isEditable && isText && props.misspelledWord.length !== 0
+	}, {
+		label: `${t.__('Look Up')} "${props.selectionText}"`,
+		visible: process.platform === 'darwin' && isText,
+		click(_item) {
+			webContents.showDefinitionForSelection();
+		}
+	}, {
+		type: 'separator',
+		visible: process.platform === 'darwin' && isText
+	}, {
+		label: t.__('Cut'),
+		visible: isText,
+		enabled: props.isEditable,
+		accelerator: 'CommandOrControl+X',
+		click(_item) {
+			webContents.cut();
+		}
+	}, {
+		label: t.__('Copy'),
+		accelerator: 'CommandOrControl+C',
+		enabled: props.editFlags.canCopy,
+		click(_item) {
+			webContents.copy();
+		}
+	}, {
+		label: t.__('Paste'), // Bug: Paste replaces text
+		accelerator: 'CommandOrControl+V',
+		enabled: props.isEditable,
+		click() {
+			webContents.paste();
+		}
+	}, {
+		type: 'separator'
+	}, {
+		label: isEmailAddress ? t.__('Copy Email Address') : t.__('Copy Link'),
+		visible: isLink,
+		click(_item) {
+			clipboard.write({
+				bookmark: props.linkText,
+				text: isEmailAddress ? linkURL.pathname : props.linkURL
+			});
+		}
+	}, {
+		label: t.__('Copy Image'),
+		visible: props.mediaType === 'image',
+		click(_item) {
+			webContents.copyImageAt(props.x, props.y);
+		}
+	}, {
+		label: t.__('Copy Image URL'),
+		visible: props.mediaType === 'image',
+		click(_item) {
+			clipboard.write({
+				bookmark: props.srcURL,
+				text: props.srcURL
+			});
+		}
+	}, {
+		type: 'separator',
+		visible: isLink || props.mediaType === 'image'
+	}, {
+		label: t.__('Services'),
+		visible: process.platform === 'darwin',
+		role: 'services'
+	}];
+
+	if (props.misspelledWord) {
+		if (props.dictionarySuggestions.length > 0) {
+			const suggestions: Electron.MenuItemConstructorOptions[] = props.dictionarySuggestions.map((suggestion: string) => makeSuggestion(suggestion));
+			menuTemplate = suggestions.concat(menuTemplate);
+		} else {
+			menuTemplate.unshift({
+				label: t.__('No Suggestion Found'),
+				enabled: false
+			});
+		}
+	}
+	// Hide the invisible separators on Linux and Windows
+	// Electron has a bug which ignores visible: false parameter for separator menuitems. So we remove them here.
+	// https://github.com/electron/electron/issues/5869
+	// https://github.com/electron/electron/issues/6906
+
+	const filteredMenuTemplate = menuTemplate.filter(menuItem => menuItem.visible ?? true);
+	const menu = Menu.buildFromTemplate(filteredMenuTemplate);
+	menu.popup();
+};

app/renderer/js/components/functional-tab.js

@@ -1,44 +0,0 @@
-'use strict';
-
-const Tab = require(__dirname + '/../components/tab.js');
-
-class FunctionalTab extends Tab {
-	template() {
-		return `<div class="tab functional-tab" data-tab-id="${this.props.tabIndex}">
-					<div class="server-tab-badge close-button">
-						<i class="material-icons">close</i>
-					</div>
-					<div class="server-tab">
-						<i class="material-icons">${this.props.materialIcon}</i>
-					</div>
-				</div>`;
-	}
-
-	init() {
-		this.$el = this.generateNodeFromTemplate(this.template());
-		if (this.props.name !== 'Settings') {
-			this.props.$root.appendChild(this.$el);
-			this.$closeButton = this.$el.getElementsByClassName('server-tab-badge')[0];
-			this.registerListeners();
-		}
-	}
-
-	registerListeners() {
-		super.registerListeners();
-
-		this.$el.addEventListener('mouseover', () => {
-			this.$closeButton.classList.add('active');
-		});
-
-		this.$el.addEventListener('mouseout', () => {
-			this.$closeButton.classList.remove('active');
-		});
-
-		this.$closeButton.addEventListener('click', e => {
-			this.props.onDestroy();
-			e.stopPropagation();
-		});
-	}
-}
-
-module.exports = FunctionalTab;

app/renderer/js/components/functional-tab.ts

@@ -0,0 +1,51 @@
+import {htmlEscape} from 'escape-goat';
+
+import Tab, {TabProps} from './tab';
+
+export default class FunctionalTab extends Tab {
+	$closeButton: Element;
+
+	constructor(props: TabProps) {
+		super(props);
+		this.init();
+	}
+
+	templateHTML(): string {
+		return htmlEscape`
+			<div class="tab functional-tab" data-tab-id="${this.props.tabIndex}">
+				<div class="server-tab-badge close-button">
+					<i class="material-icons">close</i>
+				</div>
+				<div class="server-tab">
+					<i class="material-icons">${this.props.materialIcon}</i>
+				</div>
+			</div>
+		`;
+	}
+
+	init(): void {
+		this.$el = this.generateNodeFromHTML(this.templateHTML());
+		if (this.props.name !== 'Settings') {
+			this.props.$root.append(this.$el);
+			this.$closeButton = this.$el.querySelectorAll('.server-tab-badge')[0];
+			this.registerListeners();
+		}
+	}
+
+	registerListeners(): void {
+		super.registerListeners();
+
+		this.$el.addEventListener('mouseover', () => {
+			this.$closeButton.classList.add('active');
+		});
+
+		this.$el.addEventListener('mouseout', () => {
+			this.$closeButton.classList.remove('active');
+		});
+
+		this.$closeButton.addEventListener('click', (event: Event) => {
+			this.props.onDestroy();
+			event.stopPropagation();
+		});
+	}
+}

app/renderer/js/components/handle-external-link.js

@@ -1,80 +0,0 @@
-const { ipcRenderer } = require('electron');
-const { shell, app } = require('electron').remote;
-const LinkUtil = require('../utils/link-util');
-const DomainUtil = require('../utils/domain-util');
-const ConfigUtil = require('../utils/config-util');
-
-const dingSound = new Audio('../resources/sounds/ding.ogg');
-
-function handleExternalLink(event) {
-	const { url } = event;
-	const domainPrefix = DomainUtil.getDomain(this.props.index).url;
-	const downloadPath = ConfigUtil.getConfigItem('downloadsPath', `${app.getPath('downloads')}`);
-	const shouldShowInFolder = ConfigUtil.getConfigItem('showDownloadFolder', false);
-
-	// Whitelist URLs which are allowed to be opened in the app
-	const {
-		isInternalUrl: isWhiteListURL,
-		isUploadsUrl: isUploadsURL
-	} = LinkUtil.isInternal(domainPrefix, url);
-
-	if (isWhiteListURL) {
-		event.preventDefault();
-
-		// Code to show pdf in a new BrowserWindow (currently commented out due to bug-upstream)
-		// Show pdf attachments in a new window
-		// if (LinkUtil.isPDF(url) && isUploadsURL) {
-		// 	ipcRenderer.send('pdf-view', url);
-		// 	return;
-		// }
-
-		// download txt, mp3, mp4 etc.. by using downloadURL in the
-		// main process which allows the user to save the files to their desktop
-		// and not trigger webview reload while image in webview will
-		// do nothing and will not save it
-
-			// Code to show pdf in a new BrowserWindow (currently commented out due to bug-upstream)
-		// if (!LinkUtil.isImage(url) && !LinkUtil.isPDF(url) && isUploadsURL) {
-		if (!LinkUtil.isImage(url) && isUploadsURL) {
-			ipcRenderer.send('downloadFile', url, downloadPath);
-			ipcRenderer.once('downloadFileCompleted', (event, filePath, fileName) => {
-				const downloadNotification = new Notification('Download Complete', {
-					body: shouldShowInFolder ? `Click to show ${fileName} in folder` : `Click to open ${fileName}`,
-					silent: true // We'll play our own sound - ding.ogg
-				});
-
-				// Play sound to indicate download complete
-				if (!ConfigUtil.getConfigItem('silent')) {
-					dingSound.play();
-				}
-
-				downloadNotification.onclick = () => {
-					if (shouldShowInFolder) {
-						// Reveal file in download folder
-						shell.showItemInFolder(filePath);
-					} else {
-						// Open file in the default native app
-						shell.openItem(filePath);
-					}
-				};
-				ipcRenderer.removeAllListeners('downloadFileFailed');
-			});
-
-			ipcRenderer.once('downloadFileFailed', () => {
-				// Automatic download failed, so show save dialog prompt and download
-				// through webview
-				this.$el.downloadURL(url);
-				ipcRenderer.removeAllListeners('downloadFileCompleted');
-			});
-			return;
-		}
-
-		// open internal urls inside the current webview.
-		this.$el.loadURL(url);
-	} else {
-		event.preventDefault();
-		shell.openExternal(url);
-	}
-}
-
-module.exports = handleExternalLink;

app/renderer/js/components/handle-external-link.ts

@@ -0,0 +1,61 @@
+import {ipcRenderer, remote} from 'electron';
+
+import * as ConfigUtil from '../utils/config-util';
+import * as LinkUtil from '../utils/link-util';
+
+import type WebView from './webview';
+
+const {shell, app} = remote;
+
+const dingSound = new Audio('../resources/sounds/ding.ogg');
+
+export default function handleExternalLink(this: WebView, event: Electron.NewWindowEvent): void {
+	event.preventDefault();
+
+	const url = new URL(event.url);
+	const downloadPath = ConfigUtil.getConfigItem('downloadsPath', `${app.getPath('downloads')}`);
+
+	if (LinkUtil.isUploadsUrl(this.props.url, url)) {
+		ipcRenderer.send('downloadFile', url.href, downloadPath);
+		ipcRenderer.once('downloadFileCompleted', async (_event: Event, filePath: string, fileName: string) => {
+			const downloadNotification = new Notification('Download Complete', {
+				body: `Click to show ${fileName} in folder`,
+				silent: true // We'll play our own sound - ding.ogg
+			});
+
+			downloadNotification.addEventListener('click', () => {
+				// Reveal file in download folder
+				shell.showItemInFolder(filePath);
+			});
+			ipcRenderer.removeAllListeners('downloadFileFailed');
+
+			// Play sound to indicate download complete
+			if (!ConfigUtil.getConfigItem('silent')) {
+				await dingSound.play();
+			}
+		});
+
+		ipcRenderer.once('downloadFileFailed', (_event: Event, state: string) => {
+			// Automatic download failed, so show save dialog prompt and download
+			// through webview
+			// Only do this if it is the automatic download, otherwise show an error (so we aren't showing two save
+			// prompts right after each other)
+			// Check that the download is not cancelled by user
+			if (state !== 'cancelled') {
+				if (ConfigUtil.getConfigItem('promptDownload', false)) {
+					// We need to create a "new Notification" to display it, but just `Notification(...)` on its own
+					// doesn't work
+					new Notification('Download Complete', { // eslint-disable-line no-new
+						body: 'Download failed'
+					});
+				} else {
+					this.$el.downloadURL(url.href);
+				}
+			}
+
+			ipcRenderer.removeAllListeners('downloadFileCompleted');
+		});
+	} else {
+		(async () => LinkUtil.openBrowser(url))();
+	}
+}

app/renderer/js/components/server-tab.js

@@ -1,60 +0,0 @@
-'use strict';
-
-const Tab = require(__dirname + '/../components/tab.js');
-const SystemUtil = require(__dirname + '/../utils/system-util.js');
-
-const {ipcRenderer} = require('electron');
-
-class ServerTab extends Tab {
-	template() {
-		return `<div class="tab" data-tab-id="${this.props.tabIndex}">
-					<div class="server-tooltip" style="display:none">${this.props.name}</div>
-					<div class="server-tab-badge"></div>
-					<div class="server-tab">
-					<img class="server-icons" src='${this.props.icon}'/>
-					</div>
-					<div class="server-tab-shortcut">${this.generateShortcutText()}</div>
-				</div>`;
-	}
-
-	init() {
-		super.init();
-
-		this.$badge = this.$el.getElementsByClassName('server-tab-badge')[0];
-	}
-
-	updateBadge(count) {
-		if (count > 0) {
-			const formattedCount = count > 999 ? '1K+' : count;
-
-			this.$badge.innerHTML = formattedCount;
-			this.$badge.classList.add('active');
-		} else {
-			this.$badge.classList.remove('active');
-		}
-	}
-
-	generateShortcutText() {
-		// Only provide shortcuts for server [0..10]
-		if (this.props.index >= 10) {
-			return '';
-		}
-
-		const shownIndex = this.props.index + 1;
-
-		let shortcutText = '';
-
-		if (SystemUtil.getOS() === 'Mac') {
-			shortcutText = `⌘ ${shownIndex}`;
-		} else {
-			shortcutText = `Ctrl+${shownIndex}`;
-		}
-
-		// Array index == Shown index - 1
-		ipcRenderer.send('switch-server-tab', shownIndex - 1);
-
-		return shortcutText;
-	}
-}
-
-module.exports = ServerTab;

app/renderer/js/components/server-tab.ts

@@ -0,0 +1,64 @@
+import {ipcRenderer} from 'electron';
+
+import {htmlEscape} from 'escape-goat';
+
+import * as SystemUtil from '../utils/system-util';
+
+import Tab, {TabProps} from './tab';
+
+export default class ServerTab extends Tab {
+	$badge: Element;
+
+	constructor(props: TabProps) {
+		super(props);
+		this.init();
+	}
+
+	templateHTML(): string {
+		return htmlEscape`
+			<div class="tab" data-tab-id="${this.props.tabIndex}">
+				<div class="server-tooltip" style="display:none">${this.props.name}</div>
+				<div class="server-tab-badge"></div>
+				<div class="server-tab">
+					<img class="server-icons" src="${this.props.icon}"/>
+				</div>
+				<div class="server-tab-shortcut">${this.generateShortcutText()}</div>
+			</div>
+		`;
+	}
+
+	init(): void {
+		this.$el = this.generateNodeFromHTML(this.templateHTML());
+		this.props.$root.append(this.$el);
+		this.registerListeners();
+		this.$badge = this.$el.querySelectorAll('.server-tab-badge')[0];
+	}
+
+	updateBadge(count: number): void {
+		if (count > 0) {
+			const formattedCount = count > 999 ? '1K+' : count.toString();
+			this.$badge.textContent = formattedCount;
+			this.$badge.classList.add('active');
+		} else {
+			this.$badge.classList.remove('active');
+		}
+	}
+
+	generateShortcutText(): string {
+		// Only provide shortcuts for server [0..10]
+		if (this.props.index >= 10) {
+			return '';
+		}
+
+		const shownIndex = this.props.index + 1;
+
+		let shortcutText = '';
+
+		shortcutText = SystemUtil.getOS() === 'Mac' ? `⌘ ${shownIndex}` : `Ctrl+${shownIndex}`;
+
+		// Array index == Shown index - 1
+		ipcRenderer.send('switch-server-tab', shownIndex - 1);
+
+		return shortcutText;
+	}
+}

app/renderer/js/components/tab.js

@@ -1,48 +0,0 @@
-'use strict';
-
-const BaseComponent = require(__dirname + '/../components/base.js');
-
-class Tab extends BaseComponent {
-	constructor(props) {
-		super();
-
-		this.props = props;
-		this.webview = this.props.webview;
-
-		this.init();
-	}
-
-	init() {
-		this.$el = this.generateNodeFromTemplate(this.template());
-		this.props.$root.appendChild(this.$el);
-
-		this.registerListeners();
-	}
-
-	registerListeners() {
-		this.$el.addEventListener('click', this.props.onClick);
-		this.$el.addEventListener('mouseover', this.props.onHover);
-		this.$el.addEventListener('mouseout', this.props.onHoverOut);
-	}
-
-	isLoading() {
-		return this.webview.isLoading;
-	}
-
-	activate() {
-		this.$el.classList.add('active');
-		this.webview.load();
-	}
-
-	deactivate() {
-		this.$el.classList.remove('active');
-		this.webview.hide();
-	}
-
-	destroy() {
-		this.$el.parentNode.removeChild(this.$el);
-		this.webview.$el.parentNode.removeChild(this.webview.$el);
-	}
-}
-
-module.exports = Tab;

app/renderer/js/components/tab.ts

@@ -0,0 +1,54 @@
+import BaseComponent from './base';
+import WebView from './webview';
+
+export interface TabProps {
+	role: string;
+	icon?: string;
+	name: string;
+	$root: Element;
+	onClick: () => void;
+	index: number;
+	tabIndex: number;
+	onHover?: () => void;
+	onHoverOut?: () => void;
+	webview: WebView;
+	materialIcon?: string;
+	onDestroy?: () => void;
+}
+
+export default class Tab extends BaseComponent {
+	props: TabProps;
+	webview: WebView;
+	$el: Element;
+	constructor(props: TabProps) {
+		super();
+
+		this.props = props;
+		this.webview = this.props.webview;
+	}
+
+	registerListeners(): void {
+		this.$el.addEventListener('click', this.props.onClick);
+		this.$el.addEventListener('mouseover', this.props.onHover);
+		this.$el.addEventListener('mouseout', this.props.onHoverOut);
+	}
+
+	showNetworkError(): void {
+		this.webview.forceLoad();
+	}
+
+	activate(): void {
+		this.$el.classList.add('active');
+		this.webview.load();
+	}
+
+	deactivate(): void {
+		this.$el.classList.remove('active');
+		this.webview.hide();
+	}
+
+	destroy(): void {
+		this.$el.remove();
+		this.webview.$el.remove();
+	}
+}

app/renderer/js/components/webview.ts

@@ -1,51 +1,86 @@
-'use strict';
+import {ipcRenderer, remote} from 'electron';
+import fs from 'fs';
+import path from 'path';
 
-const path = require('path');
-const fs = require('fs');
+import {htmlEscape} from 'escape-goat';
 
-const ConfigUtil = require(__dirname + '/../utils/config-util.js');
-const SystemUtil = require(__dirname + '/../utils/system-util.js');
-const { app, dialog } = require('electron').remote;
+import * as ConfigUtil from '../utils/config-util';
+import * as SystemUtil from '../utils/system-util';
 
-const BaseComponent = require(__dirname + '/../components/base.js');
-const handleExternalLink = require(__dirname + '/../components/handle-external-link.js');
+import BaseComponent from './base';
+import {contextMenu} from './context-menu';
+import handleExternalLink from './handle-external-link';
+
+const {app, dialog} = remote;
 
 const shouldSilentWebview = ConfigUtil.getConfigItem('silent');
-class WebView extends BaseComponent {
-	constructor(props) {
+
+interface WebViewProps {
+	$root: Element;
+	index: number;
+	tabIndex: number;
+	url: string;
+	role: string;
+	name: string;
+	isActive: () => boolean;
+	switchLoading: (loading: boolean, url: string) => void;
+	onNetworkError: (index: number) => void;
+	nodeIntegration: boolean;
+	preload: boolean;
+	onTitleChange: () => void;
+	hasPermission?: (origin: string, permission: string) => boolean;
+}
+
+export default class WebView extends BaseComponent {
+	props: WebViewProps;
+	zoomFactor: number;
+	badgeCount: number;
+	loading: boolean;
+	customCSS: string;
+	$webviewsContainer: DOMTokenList;
+	$el: Electron.WebviewTag;
+	domReady?: Promise<void>;
+
+	constructor(props: WebViewProps) {
 		super();
 
 		this.props = props;
-
-		this.zoomFactor = 1.0;
+		this.zoomFactor = 1;
 		this.loading = true;
 		this.badgeCount = 0;
 		this.customCSS = ConfigUtil.getConfigItem('customCSS');
 		this.$webviewsContainer = document.querySelector('#webviews-container').classList;
 	}
 
-	template() {
-		return `<webview
-					class="disabled"
-					data-tab-id="${this.props.tabIndex}"
-					src="${this.props.url}"
-					${this.props.nodeIntegration ? 'nodeIntegration' : ''}
-					disablewebsecurity
-					${this.props.preload ? 'preload="js/preload.js"' : ''}
-					partition="persist:webviewsession"
-					name="${this.props.name}"
-					webpreferences="allowRunningInsecureContent, javascript=yes">
-				</webview>`;
+	templateHTML(): string {
+		return htmlEscape`
+			<webview
+				class="disabled"
+				data-tab-id="${this.props.tabIndex}"
+				src="${this.props.url}"
+				` + (this.props.nodeIntegration ? 'nodeIntegration' : '') + htmlEscape`
+				` + (this.props.preload ? 'preload="js/preload.js"' : '') + htmlEscape`
+				partition="persist:webviewsession"
+				name="${this.props.name}"
+				webpreferences="
+					contextIsolation=${!this.props.nodeIntegration},
+					spellcheck=${Boolean(ConfigUtil.getConfigItem('enableSpellchecker'))}
+				">
+			</webview>
+		`;
 	}
 
-	init() {
-		this.$el = this.generateNodeFromTemplate(this.template());
-		this.props.$root.appendChild(this.$el);
+	init(): void {
+		this.$el = this.generateNodeFromHTML(this.templateHTML()) as Electron.WebviewTag;
+		this.domReady = new Promise(resolve => {
+			this.$el.addEventListener('dom-ready', () => resolve(), true);
+		});
+		this.props.$root.append(this.$el);
 
 		this.registerListeners();
 	}
 
-	registerListeners() {
+	registerListeners(): void {
 		this.$el.addEventListener('new-window', event => {
 			handleExternalLink.call(this, event);
 		});
@@ -57,7 +92,7 @@ class WebView extends BaseComponent {
 		}
 
 		this.$el.addEventListener('page-title-updated', event => {
-			const { title } = event;
+			const {title} = event;
 			this.badgeCount = this.getBadgeCount(title);
 			this.props.onTitleChange();
 		});
@@ -67,6 +102,7 @@ class WebView extends BaseComponent {
 			if (isSettingPage) {
 				return;
 			}
+
 			this.canGoBackButton();
 		});
 
@@ -75,14 +111,14 @@ class WebView extends BaseComponent {
 		});
 
 		this.$el.addEventListener('page-favicon-updated', event => {
-			const { favicons } = event;
+			const {favicons} = event;
 
 			// This returns a string of favicons URL. If there is a PM counts in unread messages then the URL would be like
 			// https://chat.zulip.org/static/images/favicon/favicon-pms.png
 			if (favicons[0].indexOf('favicon-pms') > 0 && process.platform === 'darwin') {
 				// This api is only supported on macOS
 				app.dock.setBadge('●');
-				// bounce the dock
+				// Bounce the dock
 				if (ConfigUtil.getConfigItem('dockBouncing')) {
 					app.dock.bounce();
 				}
@@ -90,10 +126,17 @@ class WebView extends BaseComponent {
 		});
 
 		this.$el.addEventListener('dom-ready', () => {
+			const webContents = remote.webContents.fromId(this.$el.getWebContentsId());
+			webContents.addListener('context-menu', (event, menuParameters) => {
+				contextMenu(webContents, event, menuParameters);
+			});
+
 			if (this.props.role === 'server') {
 				this.$el.classList.add('onload');
 			}
+
 			this.loading = false;
+			this.props.switchLoading(false, this.props.url);
 			this.show();
 
 			// Refocus text boxes after reload
@@ -103,30 +146,38 @@ class WebView extends BaseComponent {
 		});
 
 		this.$el.addEventListener('did-fail-load', event => {
-			const { errorDescription } = event;
-			const hasConnectivityErr = (SystemUtil.connectivityERR.indexOf(errorDescription) >= 0);
+			const {errorDescription} = event;
+			const hasConnectivityErr = SystemUtil.connectivityERR.includes(errorDescription);
 			if (hasConnectivityErr) {
 				console.error('error', errorDescription);
-				this.props.onNetworkError();
+				if (!this.props.url.includes('network.html')) {
+					this.props.onNetworkError(this.props.index);
+				}
 			}
 		});
 
 		this.$el.addEventListener('did-start-loading', () => {
-			let userAgent = SystemUtil.getUserAgent();
-			if (!userAgent) {
-				SystemUtil.setUserAgent(this.$el.getUserAgent());
-				userAgent = SystemUtil.getUserAgent();
+			const isSettingPage = this.props.url.includes('renderer/preference.html');
+			if (!isSettingPage) {
+				this.props.switchLoading(true, this.props.url);
 			}
-			this.$el.setUserAgent(userAgent);
+		});
+
+		this.$el.addEventListener('did-stop-loading', () => {
+			this.props.switchLoading(false, this.props.url);
 		});
 	}
 
-	getBadgeCount(title) {
-		const messageCountInTitle = (/\(([0-9]+)\)/).exec(title);
+	getBadgeCount(title: string): number {
+		const messageCountInTitle = (/\((\d+)\)/).exec(title);
 		return messageCountInTitle ? Number(messageCountInTitle[1]) : 0;
 	}
 
-	show() {
+	showNotificationSettings(): void {
+		ipcRenderer.sendTo(this.$el.getWebContentsId(), 'show-notification-settings');
+	}
+
+	show(): void {
 		// Do not show WebView if another tab was selected and this tab should be in background.
 		if (!this.props.isActive()) {
 			return;
@@ -149,45 +200,45 @@ class WebView extends BaseComponent {
 		this.focus();
 		this.props.onTitleChange();
 		// Injecting preload css in webview to override some css rules
-		this.$el.insertCSS(fs.readFileSync(path.join(__dirname, '/../../css/preload.css'), 'utf8'));
+		(async () => this.$el.insertCSS(fs.readFileSync(path.join(__dirname, '/../../css/preload.css'), 'utf8')))();
 
-		// get customCSS again from config util to avoid warning user again
+		// Get customCSS again from config util to avoid warning user again
 		this.customCSS = ConfigUtil.getConfigItem('customCSS');
 		if (this.customCSS) {
 			if (!fs.existsSync(this.customCSS)) {
 				this.customCSS = null;
 				ConfigUtil.setConfigItem('customCSS', null);
 
-				const errMsg = 'The custom css previously set is deleted!';
-				dialog.showErrorBox('custom css file deleted!', errMsg);
+				const errorMessage = 'The custom css previously set is deleted!';
+				dialog.showErrorBox('custom css file deleted!', errorMessage);
 				return;
 			}
 
-			this.$el.insertCSS(fs.readFileSync(path.resolve(__dirname, this.customCSS), 'utf8'));
+			(async () => this.$el.insertCSS(fs.readFileSync(path.resolve(__dirname, this.customCSS), 'utf8')))();
 		}
 	}
 
-	focus() {
-		// focus Webview and it's contents when Window regain focus.
-		const webContents = this.$el.getWebContents();
+	focus(): void {
+		// Focus Webview and it's contents when Window regain focus.
+		const webContents = remote.webContents.fromId(this.$el.getWebContentsId());
 		// HACK: webContents.isFocused() seems to be true even without the element
 		// being in focus. So, we check against `document.activeElement`.
 		if (webContents && this.$el !== document.activeElement) {
 			// HACK: Looks like blur needs to be called on the previously focused
 			// element to transfer focus correctly, in Electron v3.0.10
 			// See https://github.com/electron/electron/issues/15718
-			document.activeElement.blur();
+			(document.activeElement as HTMLElement).blur();
 			this.$el.focus();
 			webContents.focus();
 		}
 	}
 
-	hide() {
+	hide(): void {
 		this.$el.classList.add('disabled');
 		this.$el.classList.remove('active');
 	}
 
-	load() {
+	load(): void {
 		if (this.$el) {
 			this.show();
 		} else {
@@ -195,41 +246,41 @@ class WebView extends BaseComponent {
 		}
 	}
 
-	zoomIn() {
+	zoomIn(): void {
 		this.zoomFactor += 0.1;
 		this.$el.setZoomFactor(this.zoomFactor);
 	}
 
-	zoomOut() {
+	zoomOut(): void {
 		this.zoomFactor -= 0.1;
 		this.$el.setZoomFactor(this.zoomFactor);
 	}
 
-	zoomActualSize() {
-		this.zoomFactor = 1.0;
+	zoomActualSize(): void {
+		this.zoomFactor = 1;
 		this.$el.setZoomFactor(this.zoomFactor);
 	}
 
-	logOut() {
-		this.$el.executeJavaScript('logout()');
+	logOut(): void {
+		ipcRenderer.sendTo(this.$el.getWebContentsId(), 'logout');
 	}
 
-	showShortcut() {
-		this.$el.executeJavaScript('shortcut()');
+	showKeyboardShortcuts(): void {
+		ipcRenderer.sendTo(this.$el.getWebContentsId(), 'show-keyboard-shortcuts');
 	}
 
-	openDevTools() {
+	openDevTools(): void {
 		this.$el.openDevTools();
 	}
 
-	back() {
+	back(): void {
 		if (this.$el.canGoBack()) {
 			this.$el.goBack();
 			this.focus();
 		}
 	}
 
-	canGoBackButton() {
+	canGoBackButton(): void {
 		const $backButton = document.querySelector('#actions-container #back-action');
 		if (this.$el.canGoBack()) {
 			$backButton.classList.remove('disable');
@@ -238,23 +289,27 @@ class WebView extends BaseComponent {
 		}
 	}
 
-	forward() {
+	forward(): void {
 		if (this.$el.canGoForward()) {
 			this.$el.goForward();
 		}
 	}
 
-	reload() {
+	reload(): void {
 		this.hide();
 		// Shows the loading indicator till the webview is reloaded
 		this.$webviewsContainer.remove('loaded');
 		this.loading = true;
+		this.props.switchLoading(true, this.props.url);
 		this.$el.reload();
 	}
 
-	send(...param) {
-		this.$el.send(...param);
+	forceLoad(): void {
+		this.init();
+	}
+
+	async send(channel: string, ...parameters: unknown[]): Promise<void> {
+		await this.domReady;
+		await this.$el.send(channel, ...parameters);
 	}
 }
-
-module.exports = WebView;

app/renderer/js/electron-bridge.js

@@ -1,40 +0,0 @@
-const events = require('events');
-const { ipcRenderer } = require('electron');
-
-// we have and will have some non camelcase stuff
-// while working with zulip so just turning the rule off
-// for the whole file.
-/* eslint-disable camelcase */
-class ElectronBridge extends events {
-	send_event(...args) {
-		this.emit(...args);
-	}
-
-	on_event(...args) {
-		this.on(...args);
-	}
-}
-
-const electron_bridge = new ElectronBridge();
-
-electron_bridge.on('total_unread_count', (...args) => {
-	ipcRenderer.send('unread-count', ...args);
-});
-
-electron_bridge.on('realm_name', realmName => {
-	const serverURL = location.origin;
-	ipcRenderer.send('realm-name-changed', serverURL, realmName);
-});
-
-electron_bridge.on('realm_icon_url', iconURL => {
-	const serverURL = location.origin;
-	iconURL = iconURL.includes('http') ? iconURL : `${serverURL}${iconURL}`;
-	ipcRenderer.send('realm-icon-changed', serverURL, iconURL);
-});
-
-// this follows node's idiomatic implementation of event
-// emitters to make event handling more simpler instead of using
-// functions zulip side will emit event using ElectronBrigde.send_event
-// which is alias of .emit and on this side we can handle the data by adding
-// a listener for the event.
-module.exports = electron_bridge;

app/renderer/js/electron-bridge.ts

@@ -0,0 +1,92 @@
+import {ipcRenderer} from 'electron';
+import {EventEmitter} from 'events';
+
+import isDev from 'electron-is-dev';
+
+import {ClipboardDecrypterImpl} from './clipboard-decrypter';
+import {NotificationData, newNotification} from './notification';
+
+type ListenerType = ((...args: any[]) => void);
+
+let notificationReplySupported = false;
+// Indicates if the user is idle or not
+let idle = false;
+// Indicates the time at which user was last active
+let lastActive = Date.now();
+
+export const bridgeEvents = new EventEmitter();
+
+const electron_bridge: ElectronBridge = {
+	send_event: (eventName: string | symbol, ...args: unknown[]): boolean =>
+		bridgeEvents.emit(eventName, ...args),
+
+	on_event: (eventName: string, listener: ListenerType): void => {
+		bridgeEvents.on(eventName, listener);
+	},
+
+	new_notification: (
+		title: string,
+		options: NotificationOptions | undefined,
+		dispatch: (type: string, eventInit: EventInit) => boolean
+	): NotificationData =>
+		newNotification(title, options, dispatch),
+
+	get_idle_on_system: (): boolean => idle,
+
+	get_last_active_on_system: (): number => lastActive,
+
+	get_send_notification_reply_message_supported: (): boolean =>
+		notificationReplySupported,
+
+	set_send_notification_reply_message_supported: (value: boolean): void => {
+		notificationReplySupported = value;
+	},
+
+	decrypt_clipboard: (version: number): ClipboardDecrypterImpl =>
+		new ClipboardDecrypterImpl(version)
+};
+
+bridgeEvents.on('total_unread_count', (...args) => {
+	ipcRenderer.send('unread-count', ...args);
+});
+
+bridgeEvents.on('realm_name', realmName => {
+	const serverURL = location.origin;
+	ipcRenderer.send('realm-name-changed', serverURL, realmName);
+});
+
+bridgeEvents.on('realm_icon_url', (iconURL: unknown) => {
+	if (typeof iconURL !== 'string') {
+		throw new TypeError('Expected string for iconURL');
+	}
+
+	const serverURL = location.origin;
+	iconURL = iconURL.includes('http') ? iconURL : `${serverURL}${iconURL}`;
+	ipcRenderer.send('realm-icon-changed', serverURL, iconURL);
+});
+
+// Set user as active and update the time of last activity
+ipcRenderer.on('set-active', () => {
+	if (isDev) {
+		console.log('active');
+	}
+
+	idle = false;
+	lastActive = Date.now();
+});
+
+// Set user as idle and time of last activity is left unchanged
+ipcRenderer.on('set-idle', () => {
+	if (isDev) {
+		console.log('idle');
+	}
+
+	idle = true;
+});
+
+// This follows node's idiomatic implementation of event
+// emitters to make event handling more simpler instead of using
+// functions zulip side will emit event using ElectronBrigde.send_event
+// which is alias of .emit and on this side we can handle the data by adding
+// a listener for the event.
+export default electron_bridge;

app/renderer/js/feedback.js

@@ -1,62 +0,0 @@
-const { app } = require('electron').remote;
-const path = require('path');
-const fs = require('fs');
-const SendFeedback = require('@electron-elements/send-feedback');
-
-// make the button color match zulip app's theme
-SendFeedback.customStyles = `
-button:hover, button:focus {
-  border-color: #4EBFAC;
-  color: #4EBFAC;
-}
-
-button:active {
-  background-color: #f1f1f1;
-  color: #4EBFAC;
-}
-
-button {
-  background-color: #4EBFAC;
-  border-color: #4EBFAC;
-}
-`;
-
-customElements.define('send-feedback', SendFeedback);
-const sendFeedback = document.querySelector('send-feedback');
-const feedbackHolder = sendFeedback.parentElement;
-
-// customize the fields of custom elements
-sendFeedback.title = 'Report Issue';
-sendFeedback.titleLabel = 'Issue title:';
-sendFeedback.titlePlaceholder = 'Enter issue title';
-sendFeedback.textareaLabel = 'Describe the issue:';
-sendFeedback.textareaPlaceholder = 'Succinctly describe your issue and steps to reproduce it...';
-sendFeedback.buttonLabel = 'Report Issue';
-sendFeedback.loaderSuccessText = '';
-
-sendFeedback.useReporter('emailReporter', {
-	email: 'akash@zulipchat.com'
-});
-
-feedbackHolder.addEventListener('click', e => {
-  // only remove the class if the grey out faded
-  // part is clicked and not the feedback element itself
-	if (e.target === e.currentTarget) {
-		feedbackHolder.classList.remove('show');
-	}
-});
-
-sendFeedback.addEventListener('feedback-submitted', () => {
-	setTimeout(() => {
-		feedbackHolder.classList.remove('show');
-	}, 1000);
-});
-
-const dataDir = app.getPath('userData');
-const logsDir = path.join(dataDir, '/Logs');
-sendFeedback.logs.push(...fs.readdirSync(logsDir).map(file => path.join(logsDir, file)));
-
-module.exports = {
-	feedbackHolder,
-	sendFeedback
-};

app/renderer/js/feedback.ts

@@ -0,0 +1,50 @@
+import {remote} from 'electron';
+import fs from 'fs';
+import path from 'path';
+
+import SendFeedback from '@electron-elements/send-feedback';
+
+const {app} = remote;
+
+customElements.define('send-feedback', SendFeedback);
+export const sendFeedback: SendFeedback = document.querySelector('send-feedback');
+export const feedbackHolder = sendFeedback.parentElement;
+
+// Make the button color match zulip app's theme
+sendFeedback.customStylesheet = 'css/feedback.css';
+
+// Customize the fields of custom elements
+sendFeedback.title = 'Report Issue';
+sendFeedback.titleLabel = 'Issue title:';
+sendFeedback.titlePlaceholder = 'Enter issue title';
+sendFeedback.textareaLabel = 'Describe the issue:';
+sendFeedback.textareaPlaceholder = 'Succinctly describe your issue and steps to reproduce it...';
+
+sendFeedback.buttonLabel = 'Report Issue';
+sendFeedback.loaderSuccessText = '';
+
+sendFeedback.useReporter('emailReporter', {
+	email: 'support@zulip.com'
+});
+
+feedbackHolder.addEventListener('click', (event: Event) => {
+	// Only remove the class if the grey out faded
+	// part is clicked and not the feedback element itself
+	if (event.target === event.currentTarget) {
+		feedbackHolder.classList.remove('show');
+	}
+});
+
+sendFeedback.addEventListener('feedback-submitted', () => {
+	setTimeout(() => {
+		feedbackHolder.classList.remove('show');
+	}, 1000);
+});
+
+sendFeedback.addEventListener('feedback-cancelled', () => {
+	feedbackHolder.classList.remove('show');
+});
+
+const dataDir = app.getPath('userData');
+const logsDir = path.join(dataDir, '/Logs');
+sendFeedback.logs.push(...fs.readdirSync(logsDir).map(file => path.join(logsDir, file)));

app/renderer/js/injected.ts

@@ -0,0 +1,106 @@
+'use strict';
+
+interface CompatElectronBridge extends ElectronBridge {
+	readonly idle_on_system: boolean;
+	readonly last_active_on_system: number;
+	send_notification_reply_message_supported: boolean;
+}
+
+(() => {
+	const zulipWindow = window as typeof window & {
+		electron_bridge: CompatElectronBridge;
+		page_params?: unknown;
+		raw_electron_bridge: ElectronBridge;
+	};
+
+	const electron_bridge: CompatElectronBridge = {
+		...zulipWindow.raw_electron_bridge,
+
+		get idle_on_system(): boolean {
+			return this.get_idle_on_system();
+		},
+
+		get last_active_on_system(): number {
+			return this.get_last_active_on_system();
+		},
+
+		get send_notification_reply_message_supported(): boolean {
+			return this.get_send_notification_reply_message_supported();
+		},
+
+		set send_notification_reply_message_supported(value: boolean) {
+			this.set_send_notification_reply_message_supported(value);
+		}
+	};
+
+	zulipWindow.electron_bridge = electron_bridge;
+
+	function attributeListener<T extends EventTarget>(type: string): PropertyDescriptor {
+		const symbol = Symbol('on' + type);
+
+		function listener(this: T, ev: Event): void {
+			if ((this as any)[symbol].call(this, ev) === false) {
+				ev.preventDefault();
+			}
+		}
+
+		return {
+			configurable: true,
+			enumerable: true,
+			get(this: T) {
+				return (this as any)[symbol];
+			},
+			set(this: T, value: unknown) {
+				if (typeof value === 'function') {
+					if (!(symbol in this)) {
+						this.addEventListener(type, listener);
+					}
+
+					(this as any)[symbol] = value;
+				} else if (symbol in this) {
+					this.removeEventListener(type, listener);
+					delete (this as any)[symbol];
+				}
+			}
+		};
+	}
+
+	const NativeNotification = Notification;
+
+	class InjectedNotification extends EventTarget {
+		constructor(title: string, options?: NotificationOptions) {
+			super();
+			Object.assign(
+				this,
+				electron_bridge.new_notification(title, options, (type: string, eventInit: EventInit) =>
+					this.dispatchEvent(new Event(type, eventInit))
+				)
+			);
+		}
+
+		static get maxActions(): number {
+			return NativeNotification.maxActions;
+		}
+
+		static get permission(): NotificationPermission {
+			return NativeNotification.permission;
+		}
+
+		static async requestPermission(callback?: NotificationPermissionCallback): Promise<NotificationPermission> {
+			if (callback) {
+				callback(await Promise.resolve(NativeNotification.permission));
+			}
+
+			return NativeNotification.permission;
+		}
+	}
+
+	Object.defineProperties(InjectedNotification.prototype, {
+		onclick: attributeListener('click'),
+		onclose: attributeListener('close'),
+		onerror: attributeListener('error'),
+		onshow: attributeListener('show')
+	});
+
+	window.Notification = InjectedNotification as any;
+})();

app/renderer/js/main.js

@@ -1,769 +0,0 @@
-'use strict';
-
-const { ipcRenderer, remote, clipboard } = require('electron');
-const isDev = require('electron-is-dev');
-
-const { session, app, Menu, dialog } = remote;
-const escape = require('escape-html');
-
-require(__dirname + '/js/tray.js');
-const DomainUtil = require(__dirname + '/js/utils/domain-util.js');
-const WebView = require(__dirname + '/js/components/webview.js');
-const ServerTab = require(__dirname + '/js/components/server-tab.js');
-const FunctionalTab = require(__dirname + '/js/components/functional-tab.js');
-const ConfigUtil = require(__dirname + '/js/utils/config-util.js');
-const DNDUtil = require(__dirname + '/js/utils/dnd-util.js');
-const ReconnectUtil = require(__dirname + '/js/utils/reconnect-util.js');
-const Logger = require(__dirname + '/js/utils/logger-util.js');
-const CommonUtil = require(__dirname + '/js/utils/common-util.js');
-
-const { feedbackHolder } = require(__dirname + '/js/feedback.js');
-
-const logger = new Logger({
-	file: 'errors.log',
-	timestamp: true
-});
-
-class ServerManagerView {
-	constructor() {
-		this.$addServerButton = document.getElementById('add-tab');
-		this.$tabsContainer = document.getElementById('tabs-container');
-
-		const $actionsContainer = document.getElementById('actions-container');
-		this.$reloadButton = $actionsContainer.querySelector('#reload-action');
-		this.$settingsButton = $actionsContainer.querySelector('#settings-action');
-		this.$webviewsContainer = document.getElementById('webviews-container');
-		this.$backButton = $actionsContainer.querySelector('#back-action');
-		this.$dndButton = $actionsContainer.querySelector('#dnd-action');
-
-		this.$addServerTooltip = document.getElementById('add-server-tooltip');
-		this.$reloadTooltip = $actionsContainer.querySelector('#reload-tooltip');
-		this.$settingsTooltip = $actionsContainer.querySelector('#setting-tooltip');
-		this.$serverIconTooltip = document.getElementsByClassName('server-tooltip');
-		this.$backTooltip = $actionsContainer.querySelector('#back-tooltip');
-		this.$dndTooltip = $actionsContainer.querySelector('#dnd-tooltip');
-
-		this.$sidebar = document.getElementById('sidebar');
-
-		this.$fullscreenPopup = document.getElementById('fullscreen-popup');
-		this.$fullscreenEscapeKey = process.platform === 'darwin' ? '^⌘F' : 'F11';
-		this.$fullscreenPopup.innerHTML = `Press ${this.$fullscreenEscapeKey} to exit full screen`;
-
-		this.activeTabIndex = -1;
-		this.tabs = [];
-		this.functionalTabs = {};
-		this.tabIndex = 0;
-	}
-
-	init() {
-		this.loadProxy().then(() => {
-			this.initSidebar();
-			this.initTabs();
-			this.initActions();
-			this.registerIpcs();
-			this.initDefaultSettings();
-		});
-	}
-
-	loadProxy() {
-		return new Promise(resolve => {
-			// To change proxyEnable to useManualProxy in older versions
-			const proxyEnabledOld = ConfigUtil.isConfigItemExists('useProxy');
-			if (proxyEnabledOld) {
-				const proxyEnableOldState = ConfigUtil.getConfigItem('useProxy');
-				if (proxyEnableOldState) {
-					ConfigUtil.setConfigItem('useManualProxy', true);
-				}
-				ConfigUtil.removeConfigItem('useProxy');
-			}
-
-			const proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');
-			if (proxyEnabled) {
-				session.fromPartition('persist:webviewsession').setProxy({
-					pacScript: ConfigUtil.getConfigItem('proxyPAC', ''),
-					proxyRules: ConfigUtil.getConfigItem('proxyRules', ''),
-					proxyBypassRules: ConfigUtil.getConfigItem('proxyBypass', '')
-				}, resolve);
-			} else {
-				session.fromPartition('persist:webviewsession').setProxy({
-					pacScript: '',
-					proxyRules: '',
-					proxyBypassRules: ''
-				}, resolve);
-			}
-		});
-	}
-
-	// Settings are initialized only when user clicks on General/Server/Network section settings
-	// In case, user doesn't visit these section, those values set to be null automatically
-	// This will make sure the default settings are correctly set to either true or false
-	initDefaultSettings() {
-		// Default settings which should be respected
-		const settingOptions = {
-			trayIcon: true,
-			useManualProxy: false,
-			useSystemProxy: false,
-			showSidebar: true,
-			badgeOption: true,
-			startAtLogin: true,
-			startMinimized: false,
-			enableSpellchecker: true,
-			showNotification: true,
-			autoUpdate: true,
-			betaUpdate: false,
-			errorReporting: true,
-			customCSS: false,
-			silent: false,
-			lastActiveTab: 0,
-			dnd: false,
-			dndPreviousSettings: {
-				showNotification: true,
-				silent: false
-			},
-			downloadsPath: `${app.getPath('downloads')}`,
-			showDownloadFolder: false
-		};
-
-		// Platform specific settings
-
-		if (process.platform === 'win32') {
-			// Only available on Windows
-			settingOptions.flashTaskbarOnMessage = true;
-			settingOptions.dndPreviousSettings.flashTaskbarOnMessage = true;
-		}
-
-		if (process.platform === 'darwin') {
-			// Only available on macOS
-			settingOptions.dockBouncing = true;
-		}
-
-		if (process.platform !== 'darwin') {
-			settingOptions.autoHideMenubar = false;
-		}
-
-		for (const i in settingOptions) {
-			if (ConfigUtil.getConfigItem(i) === null) {
-				ConfigUtil.setConfigItem(i, settingOptions[i]);
-			}
-		}
-	}
-
-	initSidebar() {
-		const showSidebar = ConfigUtil.getConfigItem('showSidebar', true);
-		this.toggleSidebar(showSidebar);
-	}
-
-	initTabs() {
-		const servers = DomainUtil.getDomains();
-		if (servers.length > 0) {
-			for (let i = 0; i < servers.length; i++) {
-				this.initServer(servers[i], i);
-				DomainUtil.updateSavedServer(servers[i].url, i);
-				this.activateTab(i);
-			}
-			// Open last active tab
-			this.activateTab(ConfigUtil.getConfigItem('lastActiveTab'));
-			// Remove focus from the settings icon at sidebar bottom
-			this.$settingsButton.classList.remove('active');
-		} else {
-			this.openSettings('AddServer');
-		}
-	}
-
-	initServer(server, index) {
-		const tabIndex = this.getTabIndex();
-		this.tabs.push(new ServerTab({
-			role: 'server',
-			icon: server.icon,
-			name: server.alias,
-			$root: this.$tabsContainer,
-			onClick: this.activateLastTab.bind(this, index),
-			index,
-			tabIndex,
-			onHover: this.onHover.bind(this, index),
-			onHoverOut: this.onHoverOut.bind(this, index),
-			webview: new WebView({
-				$root: this.$webviewsContainer,
-				index,
-				tabIndex,
-				url: server.url,
-				role: 'server',
-				name: CommonUtil.decodeString(server.alias),
-				isActive: () => {
-					return index === this.activeTabIndex;
-				},
-				onNetworkError: this.openNetworkTroubleshooting.bind(this),
-				onTitleChange: this.updateBadge.bind(this),
-				nodeIntegration: false,
-				preload: true
-			})
-		}));
-	}
-
-	initActions() {
-		this.initDNDButton();
-		this.initServerActions();
-		this.initLeftSidebarEvents();
-	}
-
-	initServerActions() {
-		const $serverImgs = document.querySelectorAll('.server-icons');
-		$serverImgs.forEach(($serverImg, index) => {
-			this.addContextMenu($serverImg, index);
-			if ($serverImg.src.includes('img/icon.png')) {
-				this.displayInitialCharLogo($serverImg, index);
-			}
-			$serverImg.addEventListener('error', () => {
-				this.displayInitialCharLogo($serverImg, index);
-			});
-		});
-	}
-
-	initLeftSidebarEvents() {
-		this.$dndButton.addEventListener('click', () => {
-			const dndUtil = DNDUtil.toggle();
-			ipcRenderer.send('forward-message', 'toggle-dnd', dndUtil.dnd, dndUtil.newSettings);
-		});
-		this.$reloadButton.addEventListener('click', () => {
-			this.tabs[this.activeTabIndex].webview.reload();
-		});
-		this.$addServerButton.addEventListener('click', () => {
-			this.openSettings('AddServer');
-		});
-		this.$settingsButton.addEventListener('click', () => {
-			this.openSettings('General');
-		});
-		this.$backButton.addEventListener('click', () => {
-			this.tabs[this.activeTabIndex].webview.back();
-		});
-
-		this.sidebarHoverEvent(this.$addServerButton, this.$addServerTooltip, true);
-		this.sidebarHoverEvent(this.$settingsButton, this.$settingsTooltip);
-		this.sidebarHoverEvent(this.$reloadButton, this.$reloadTooltip);
-		this.sidebarHoverEvent(this.$backButton, this.$backTooltip);
-		this.sidebarHoverEvent(this.$dndButton, this.$dndTooltip);
-	}
-
-	initDNDButton() {
-		const dnd = ConfigUtil.getConfigItem('dnd', false);
-		this.toggleDNDButton(dnd);
-	}
-
-	getTabIndex() {
-		const currentIndex = this.tabIndex;
-		this.tabIndex++;
-		return currentIndex;
-	}
-
-	displayInitialCharLogo($img, index) {
-		/*
-			index parameter needed because webview[data-tab-id] can increment
-			beyond size of sidebar org array and throw error
-		*/
-
-		const $altIcon = document.createElement('div');
-		const $parent = $img.parentElement;
-		const $container = $parent.parentElement;
-		const webviewId = $container.dataset.tabId;
-		const $webview = document.querySelector(`webview[data-tab-id="${webviewId}"]`);
-		const realmName = $webview.getAttribute('name');
-
-		if (realmName === null) {
-			$img.src = '/img/icon.png';
-			return;
-		}
-
-		$altIcon.textContent = realmName.charAt(0) || 'Z';
-		$altIcon.classList.add('server-icon');
-		$altIcon.classList.add('alt-icon');
-
-		$parent.removeChild($img);
-		$parent.appendChild($altIcon);
-
-		this.addContextMenu($altIcon, index);
-	}
-
-	sidebarHoverEvent(SidebarButton, SidebarTooltip, addServer = false) {
-		SidebarButton.addEventListener('mouseover', () => {
-			SidebarTooltip.removeAttribute('style');
-			// To handle position of add server tooltip due to scrolling of list of organizations
-			// This could not be handled using CSS, hence the top of the tooltip is made same
-			// as that of its parent element.
-			// This needs to handled only for the add server tooltip and not others.
-			if (addServer) {
-				const { top } = SidebarButton.getBoundingClientRect();
-				SidebarTooltip.style.top = top + 'px';
-			}
-		});
-		SidebarButton.addEventListener('mouseout', () => {
-			SidebarTooltip.style.display = 'none';
-		});
-	}
-
-	onHover(index) {
-		// this.$serverIconTooltip[index].innerHTML already has realm name, so we are just
-		// removing the style.
-		this.$serverIconTooltip[index].removeAttribute('style');
-		// To handle position of servers' tooltip due to scrolling of list of organizations
-		// This could not be handled using CSS, hence the top of the tooltip is made same
-		// as that of its parent element.
-		const { top } = this.$serverIconTooltip[index].parentElement.getBoundingClientRect();
-		this.$serverIconTooltip[index].style.top = top + 'px';
-	}
-
-	onHoverOut(index) {
-		this.$serverIconTooltip[index].style.display = 'none';
-	}
-
-	openFunctionalTab(tabProps) {
-		if (this.functionalTabs[tabProps.name] !== undefined) {
-			this.activateTab(this.functionalTabs[tabProps.name]);
-			return;
-		}
-
-		this.functionalTabs[tabProps.name] = this.tabs.length;
-
-		const tabIndex = this.getTabIndex();
-
-		this.tabs.push(new FunctionalTab({
-			role: 'function',
-			materialIcon: tabProps.materialIcon,
-			name: tabProps.name,
-			$root: this.$tabsContainer,
-			index: this.functionalTabs[tabProps.name],
-			tabIndex,
-			onClick: this.activateTab.bind(this, this.functionalTabs[tabProps.name]),
-			onDestroy: this.destroyTab.bind(this, tabProps.name, this.functionalTabs[tabProps.name]),
-			webview: new WebView({
-				$root: this.$webviewsContainer,
-				index: this.functionalTabs[tabProps.name],
-				tabIndex,
-				url: tabProps.url,
-				role: 'function',
-				name: tabProps.name,
-				isActive: () => {
-					return this.functionalTabs[tabProps.name] === this.activeTabIndex;
-				},
-				onNetworkError: this.openNetworkTroubleshooting.bind(this),
-				onTitleChange: this.updateBadge.bind(this),
-				nodeIntegration: true,
-				preload: false
-			})
-		}));
-
-		// To show loading indicator the first time a functional tab is opened, indicator is
-		// closed when the functional tab DOM is ready, handled in webview.js
-		this.$webviewsContainer.classList.remove('loaded');
-
-		this.activateTab(this.functionalTabs[tabProps.name]);
-	}
-
-	openSettings(nav = 'General') {
-		this.openFunctionalTab({
-			name: 'Settings',
-			materialIcon: 'settings',
-			url: `file://${__dirname}/preference.html#${nav}`
-		});
-		this.$settingsButton.classList.add('active');
-		this.tabs[this.functionalTabs.Settings].webview.send('switch-settings-nav', nav);
-	}
-
-	openAbout() {
-		this.openFunctionalTab({
-			name: 'About',
-			materialIcon: 'sentiment_very_satisfied',
-			url: `file://${__dirname}/about.html`
-		});
-	}
-
-	openNetworkTroubleshooting() {
-		this.openFunctionalTab({
-			name: 'Network Troubleshooting',
-			materialIcon: 'network_check',
-			url: `file://${__dirname}/network.html`
-		});
-	}
-
-	activateLastTab(index) {
-		// Open all the tabs in background, also activate the tab based on the index
-		this.activateTab(index);
-		// Save last active tab
-		ConfigUtil.setConfigItem('lastActiveTab', index);
-	}
-
-	// returns this.tabs in an way that does
-	// not crash app when this.tabs is passed into
-	// ipcRenderer. Something about webview, and props.webview
-	// properties in ServerTab causes the app to crash.
-	get tabsForIpc() {
-		const tabs = [];
-		this.tabs.forEach(tab => {
-			const proto = Object.create(Object.getPrototypeOf(tab));
-			const tabClone = Object.assign(proto, tab);
-
-			tabClone.webview = { props: {} };
-			tabClone.webview.props.name = tab.webview.props.name;
-			delete tabClone.props.webview;
-			tabs.push(tabClone);
-		});
-
-		return tabs;
-	}
-
-	activateTab(index, hideOldTab = true) {
-		if (!this.tabs[index]) {
-			return;
-		}
-
-		if (this.activeTabIndex !== -1) {
-			if (this.activeTabIndex === index) {
-				return;
-			} else if (hideOldTab) {
-				// If old tab is functional tab Settings, remove focus from the settings icon at sidebar bottom
-				if (this.tabs[this.activeTabIndex].props.role === 'function' && this.tabs[this.activeTabIndex].props.name === 'Settings') {
-					this.$settingsButton.classList.remove('active');
-				}
-				this.tabs[this.activeTabIndex].deactivate();
-			}
-		}
-
-		try {
-			this.tabs[index].webview.canGoBackButton();
-		} catch (err) {
-		}
-
-		this.activeTabIndex = index;
-		this.tabs[index].activate();
-
-		ipcRenderer.send('update-menu', {
-			// JSON stringify this.tabs to avoid a crash
-			// util.inspect is being used to handle circular references
-			tabs: this.tabsForIpc,
-			activeTabIndex: this.activeTabIndex,
-			// Following flag controls whether a menu item should be enabled or not
-			enableMenu: this.tabs[index].props.role === 'server'
-		});
-	}
-
-	destroyTab(name, index) {
-		if (this.tabs[index].webview.loading) {
-			return;
-		}
-
-		this.tabs[index].destroy();
-
-		delete this.tabs[index];
-		delete this.functionalTabs[name];
-
-		// Issue #188: If the functional tab was not focused, do not activate another tab.
-		if (this.activeTabIndex === index) {
-			this.activateTab(0, false);
-		}
-	}
-
-	destroyView() {
-		// Show loading indicator
-		this.$webviewsContainer.classList.remove('loaded');
-
-		// Clear global variables
-		this.activeTabIndex = -1;
-		this.tabs = [];
-		this.functionalTabs = {};
-
-		// Clear DOM elements
-		this.$tabsContainer.innerHTML = '';
-		this.$webviewsContainer.innerHTML = '';
-	}
-
-	reloadView() {
-		// Save and remember the index of last active tab so that we can use it later
-		const lastActiveTab = this.tabs[this.activeTabIndex].props.index;
-		ConfigUtil.setConfigItem('lastActiveTab', lastActiveTab);
-
-		// Destroy the current view and re-initiate it
-		this.destroyView();
-		this.initTabs();
-		this.initServerActions();
-	}
-
-	// This will trigger when pressed CTRL/CMD + R [WIP]
-	// It won't reload the current view properly when you add/delete a server.
-	reloadCurrentView() {
-		this.$reloadButton.click();
-	}
-
-	updateBadge() {
-		let messageCountAll = 0;
-		for (let i = 0; i < this.tabs.length; i++) {
-			if (this.tabs[i] && this.tabs[i].updateBadge) {
-				const count = this.tabs[i].webview.badgeCount;
-				messageCountAll += count;
-				this.tabs[i].updateBadge(count);
-			}
-		}
-
-		ipcRenderer.send('update-badge', messageCountAll);
-	}
-
-	toggleSidebar(show) {
-		if (show) {
-			this.$sidebar.classList.remove('sidebar-hide');
-		} else {
-			this.$sidebar.classList.add('sidebar-hide');
-		}
-	}
-
-	// Toggles the dnd button icon.
-	toggleDNDButton(alert) {
-		this.$dndTooltip.textContent = (alert ? 'Disable' : 'Enable') + ' Do Not Disturb';
-		this.$dndButton.querySelector('i').textContent = alert ? 'notifications_off' : 'notifications';
-	}
-
-	addContextMenu($serverImg, index) {
-		$serverImg.addEventListener('contextmenu', e => {
-			e.preventDefault();
-			const template = [
-				{
-					label: 'Disconnect organization',
-					click: () => {
-						dialog.showMessageBox({
-							type: 'warning',
-							buttons: ['YES', 'NO'],
-							defaultId: 0,
-							message: 'Are you sure you want to disconnect this organization?'
-						}, response => {
-							if (response === 0) {
-								DomainUtil.removeDomain(index);
-								ipcRenderer.send('reload-full-app');
-							}
-						});
-					}
-				},
-				{
-					label: 'Copy Zulip URL',
-					click: () => {
-						clipboard.writeText(DomainUtil.getDomain(index).url);
-					}
-				}
-			];
-			const contextMenu = Menu.buildFromTemplate(template);
-			contextMenu.popup({ window: remote.getCurrentWindow() });
-		});
-	}
-
-	registerIpcs() {
-		const webviewListeners = {
-			'webview-reload': 'reload',
-			back: 'back',
-			focus: 'focus',
-			forward: 'forward',
-			zoomIn: 'zoomIn',
-			zoomOut: 'zoomOut',
-			zoomActualSize: 'zoomActualSize',
-			'log-out': 'logOut',
-			shortcut: 'showShortcut',
-			'tab-devtools': 'openDevTools'
-		};
-
-		for (const key in webviewListeners) {
-			ipcRenderer.on(key, () => {
-				const activeWebview = this.tabs[this.activeTabIndex].webview;
-				if (activeWebview) {
-					activeWebview[webviewListeners[key]]();
-				}
-			});
-		}
-
-		ipcRenderer.on('open-settings', (event, settingNav) => {
-			this.openSettings(settingNav);
-		});
-
-		ipcRenderer.on('open-about', this.openAbout.bind(this));
-
-		ipcRenderer.on('reload-viewer', this.reloadView.bind(this, this.tabs[this.activeTabIndex].props.index));
-
-		ipcRenderer.on('reload-current-viewer', this.reloadCurrentView.bind(this));
-
-		ipcRenderer.on('hard-reload', () => {
-			ipcRenderer.send('reload-full-app');
-		});
-
-		ipcRenderer.on('clear-app-data', () => {
-			ipcRenderer.send('clear-app-settings');
-		});
-
-		ipcRenderer.on('switch-server-tab', (event, index) => {
-			this.activateLastTab(index);
-		});
-
-		ipcRenderer.on('open-org-tab', () => {
-			this.openSettings('AddServer');
-		});
-
-		ipcRenderer.on('reload-proxy', (event, showAlert) => {
-			this.loadProxy().then(() => {
-				if (showAlert) {
-					alert('Proxy settings saved!');
-					ipcRenderer.send('reload-full-app');
-				}
-			});
-		});
-
-		ipcRenderer.on('toggle-sidebar', (event, show) => {
-			// Toggle the left sidebar
-			this.toggleSidebar(show);
-
-			// Toggle sidebar switch in the general settings
-			const selector = 'webview:not([class*=disabled])';
-			const webview = document.querySelector(selector);
-			const webContents = webview.getWebContents();
-			webContents.send('toggle-sidebar-setting', show);
-		});
-
-		ipcRenderer.on('toggle-silent', (event, state) => {
-			const webviews = document.querySelectorAll('webview');
-			webviews.forEach(webview => {
-				try {
-					webview.setAudioMuted(state);
-				} catch (err) {
-					// webview is not ready yet
-					webview.addEventListener('dom-ready', () => {
-						webview.setAudioMuted(state);
-					});
-				}
-			});
-		});
-
-		ipcRenderer.on('toggle-dnd', (event, state, newSettings) => {
-			this.toggleDNDButton(state);
-			ipcRenderer.send('forward-message', 'toggle-silent', newSettings.silent);
-			const selector = 'webview:not([class*=disabled])';
-			const webview = document.querySelector(selector);
-			const webContents = webview.getWebContents();
-			webContents.send('toggle-dnd', state, newSettings);
-		});
-
-		ipcRenderer.on('update-realm-name', (event, serverURL, realmName) => {
-			DomainUtil.getDomains().forEach((domain, index) => {
-				if (domain.url.includes(serverURL)) {
-					const serverTooltipSelector = `.tab .server-tooltip`;
-					const serverTooltips = document.querySelectorAll(serverTooltipSelector);
-					serverTooltips[index].innerHTML = escape(realmName);
-					this.tabs[index].props.name = escape(realmName);
-					this.tabs[index].webview.props.name = realmName;
-
-					domain.alias = escape(realmName);
-					DomainUtil.db.push(`/domains[${index}]`, domain, true);
-					DomainUtil.reloadDB();
-					// Update the realm name also on the Window menu
-					ipcRenderer.send('update-menu', {
-						tabs: this.tabsForIpc,
-						activeTabIndex: this.activeTabIndex
-					});
-				}
-			});
-		});
-
-		ipcRenderer.on('update-realm-icon', (event, serverURL, iconURL) => {
-			DomainUtil.getDomains().forEach((domain, index) => {
-				if (domain.url.includes(serverURL)) {
-					DomainUtil.saveServerIcon(iconURL).then(localIconUrl => {
-						const serverImgsSelector = `.tab .server-icons`;
-						const serverImgs = document.querySelectorAll(serverImgsSelector);
-						serverImgs[index].src = localIconUrl;
-
-						domain.icon = localIconUrl;
-						DomainUtil.db.push(`/domains[${index}]`, domain, true);
-						DomainUtil.reloadDB();
-					});
-				}
-			});
-		});
-
-		ipcRenderer.on('enter-fullscreen', () => {
-			this.$fullscreenPopup.classList.add('show');
-			this.$fullscreenPopup.classList.remove('hidden');
-		});
-
-		ipcRenderer.on('leave-fullscreen', () => {
-			this.$fullscreenPopup.classList.remove('show');
-		});
-
-		ipcRenderer.on('focus-webview-with-id', (event, webviewId) => {
-			const webviews = document.querySelectorAll('webview');
-			webviews.forEach(webview => {
-				const currentId = webview.getWebContents().id;
-				const tabId = webview.getAttribute('data-tab-id');
-				const concurrentTab = document.querySelector(`div[data-tab-id="${tabId}"]`);
-				if (currentId === webviewId) {
-					concurrentTab.click();
-				}
-			});
-		});
-
-		ipcRenderer.on('render-taskbar-icon', (event, messageCount) => {
-			// Create a canvas from unread messagecounts
-			function createOverlayIcon(messageCount) {
-				const canvas = document.createElement('canvas');
-				canvas.height = 128;
-				canvas.width = 128;
-				canvas.style.letterSpacing = '-5px';
-				const ctx = canvas.getContext('2d');
-				ctx.fillStyle = '#f42020';
-				ctx.beginPath();
-				ctx.ellipse(64, 64, 64, 64, 0, 0, 2 * Math.PI);
-				ctx.fill();
-				ctx.textAlign = 'center';
-				ctx.fillStyle = 'white';
-				if (messageCount > 99) {
-					ctx.font = '65px Helvetica';
-					ctx.fillText('99+', 64, 85);
-				} else if (messageCount < 10) {
-					ctx.font = '90px Helvetica';
-					ctx.fillText(String(Math.min(99, messageCount)), 64, 96);
-				} else {
-					ctx.font = '85px Helvetica';
-					ctx.fillText(String(Math.min(99, messageCount)), 64, 90);
-				}
-				return canvas;
-			}
-			ipcRenderer.send('update-taskbar-icon', createOverlayIcon(messageCount).toDataURL(), String(messageCount));
-		});
-
-		ipcRenderer.on('open-feedback-modal', () => {
-			feedbackHolder.classList.add('show');
-		});
-
-		ipcRenderer.on('copy-zulip-url', () => {
-			clipboard.writeText(DomainUtil.getDomain(this.activeTabIndex).url);
-		});
-
-		ipcRenderer.on('new-server', () => {
-			this.openSettings('AddServer');
-		});
-	}
-}
-
-window.onload = () => {
-	const serverManagerView = new ServerManagerView();
-	const reconnectUtil = new ReconnectUtil(serverManagerView);
-	serverManagerView.init();
-	window.addEventListener('online', () => {
-		reconnectUtil.pollInternetAndReload();
-	});
-
-	window.addEventListener('offline', () => {
-		reconnectUtil.clearState();
-		logger.log('No internet connection, you are offline.');
-	});
-
-	// only start electron-connect (auto reload on change) when its ran
-	// from `npm run dev` or `gulp dev` and not from `npm start` when
-	// app is started `npm start` main process's proces.argv will have
-	// `--no-electron-connect`
-	const mainProcessArgv = remote.getGlobal('process').argv;
-	if (isDev && !mainProcessArgv.includes('--no-electron-connect')) {
-		const electronConnect = require('electron-connect');
-		electronConnect.client.create();
-	}
-};

app/renderer/js/notification/darwin-notifications.js

@@ -1,100 +0,0 @@
-'use strict';
-
-const { ipcRenderer } = require('electron');
-const url = require('url');
-const MacNotifier = require('node-mac-notifier');
-const ConfigUtil = require('../utils/config-util');
-const {
-	appId, customReply, focusCurrentServer, parseReply, setupReply
-} = require('./helpers');
-
-let replyHandler;
-let clickHandler;
-class DarwinNotification {
-	constructor(title, opts) {
-		const silent = ConfigUtil.getConfigItem('silent') || false;
-		const { host, protocol } = location;
-		const { icon } = opts;
-		const profilePic = url.resolve(`${protocol}//${host}`, icon);
-
-		this.tag = opts.tag;
-		const notification = new MacNotifier(title, Object.assign(opts, {
-			bundleId: appId,
-			canReply: true,
-			silent,
-			icon: profilePic
-		}));
-
-		notification.addEventListener('click', () => {
-			// focus to the server who sent the
-			// notification if not focused already
-			if (clickHandler) {
-				clickHandler();
-			}
-
-			focusCurrentServer();
-			ipcRenderer.send('focus-app');
-		});
-
-		notification.addEventListener('reply', this.notificationHandler);
-	}
-
-	static requestPermission() {
-		return; // eslint-disable-line no-useless-return
-	}
-
-	// Override default Notification permission
-	static get permission() {
-		return ConfigUtil.getConfigItem('showNotification') ? 'granted' : 'denied';
-	}
-
-	set onreply(handler) {
-		replyHandler = handler;
-	}
-
-	get onreply() {
-		return replyHandler;
-	}
-
-	set onclick(handler) {
-		clickHandler = handler;
-	}
-
-	get onclick() {
-		return clickHandler;
-	}
-
-	// not something that is common or
-	// used by zulip server but added to be
-	// future proff.
-	addEventListener(event, handler) {
-		if (event === 'click') {
-			clickHandler = handler;
-		}
-
-		if (event === 'reply') {
-			replyHandler = handler;
-		}
-	}
-
-	notificationHandler({ response }) {
-		response = parseReply(response);
-		focusCurrentServer();
-		setupReply(this.tag);
-
-		if (replyHandler) {
-			replyHandler(response);
-			return;
-		}
-
-		customReply(response);
-	}
-
-	// method specific to notification api
-	// used by zulip
-	close() {
-		return; // eslint-disable-line no-useless-return
-	}
-}
-
-module.exports = DarwinNotification;

app/renderer/js/notification/default-notification.js

@@ -1,31 +0,0 @@
-'use strict';
-
-const { ipcRenderer } = require('electron');
-const ConfigUtil = require('../utils/config-util');
-const { focusCurrentServer } = require('./helpers');
-
-const NativeNotification = window.Notification;
-class BaseNotification extends NativeNotification {
-	constructor(title, opts) {
-		opts.silent = true;
-		super(title, opts);
-
-		this.addEventListener('click', () => {
-			// focus to the server who sent the
-			// notification if not focused already
-			focusCurrentServer();
-			ipcRenderer.send('focus-app');
-		});
-	}
-
-	static requestPermission() {
-		return; // eslint-disable-line no-useless-return
-	}
-
-	// Override default Notification permission
-	static get permission() {
-		return ConfigUtil.getConfigItem('showNotification') ? 'granted' : 'denied';
-	}
-}
-
-module.exports = BaseNotification;

app/renderer/js/notification/default-notification.ts

@@ -0,0 +1,29 @@
+import {ipcRenderer} from 'electron';
+
+import * as ConfigUtil from '../utils/config-util';
+
+import {focusCurrentServer} from './helpers';
+
+const NativeNotification = window.Notification;
+export default class BaseNotification extends NativeNotification {
+	constructor(title: string, options: NotificationOptions) {
+		options.silent = true;
+		super(title, options);
+
+		this.addEventListener('click', () => {
+			// Focus to the server who sent the
+			// notification if not focused already
+			focusCurrentServer();
+			ipcRenderer.send('focus-app');
+		});
+	}
+
+	static async requestPermission(): Promise<NotificationPermission> {
+		return this.permission;
+	}
+
+	// Override default Notification permission
+	static get permission(): NotificationPermission {
+		return ConfigUtil.getConfigItem('showNotification') ? 'granted' : 'denied';
+	}
+}

app/renderer/js/notification/helpers.js

@@ -1,156 +0,0 @@
-const { remote } = require('electron');
-const Logger = require('../utils/logger-util.js');
-
-const logger = new Logger({
-	file: 'errors.log',
-	timestamp: true
-});
-
-// Do not change this
-const appId = 'org.zulip.zulip-electron';
-
-const botsList = [];
-let botsListLoaded = false;
-
-// this function load list of bots from the server
-// sync=True for a synchronous getJSON request
-// in case botsList isn't already completely loaded when required in parseRely
-function loadBots(sync = false) {
-	const { $ } = window;
-	botsList.length = 0;
-	if (sync) {
-		$.ajaxSetup({async: false});
-	}
-	$.getJSON('/json/users')
-		.done(data => {
-			const members = data.members;
-			members.forEach(membersRow => {
-				if (membersRow.is_bot) {
-					const bot = `@${membersRow.full_name}`;
-					const mention = `@**${bot.replace(/^@/, '')}**`;
-					botsList.push([bot, mention]);
-				}
-			});
-			botsListLoaded = true;
-		})
-		.fail(error => {
-			logger.log('Load bots request failed: ', error.responseText);
-			logger.log('Load bots request status: ', error.statusText);
-		});
-	if (sync) {
-		$.ajaxSetup({async: true});
-	}
-}
-
-function checkElements(...elements) {
-	let status = true;
-	elements.forEach(element => {
-		if (element === null || element === undefined) {
-			status = false;
-		}
-	});
-	return status;
-}
-
-function customReply(reply) {
-	// server does not support notification reply yet.
-	const buttonSelector = '.messagebox #send_controls button[type=submit]';
-	const messageboxSelector = '.selected_message .messagebox .messagebox-border .messagebox-content';
-	const textarea = document.querySelector('#compose-textarea');
-	const messagebox = document.querySelector(messageboxSelector);
-	const sendButton = document.querySelector(buttonSelector);
-
-	// sanity check for old server versions
-	const elementsExists = checkElements(textarea, messagebox, sendButton);
-	if (!elementsExists) {
-		return;
-	}
-
-	textarea.value = reply;
-	messagebox.click();
-	sendButton.click();
-}
-
-const currentWindow = remote.getCurrentWindow();
-const webContents = remote.getCurrentWebContents();
-const webContentsId = webContents.id;
-
-// this function will focus the server that sent
-// the notification. Main function implemented in main.js
-function focusCurrentServer() {
-	currentWindow.send('focus-webview-with-id', webContentsId);
-}
-// this function parses the reply from to notification
-// making it easier to reply from notification eg
-// @username in reply will be converted to @**username**
-// #stream in reply will be converted to #**stream**
-// bot mentions are not yet supported
-function parseReply(reply) {
-	const usersDiv = document.querySelectorAll('#user_presences li');
-	const streamHolder = document.querySelectorAll('#stream_filters li');
-	const users = [];
-	const streams = [];
-
-	usersDiv.forEach(userRow => {
-		const anchor = userRow.querySelector('span a');
-		if (anchor !== null) {
-			const user = `@${anchor.textContent.trim()}`;
-			const mention = `@**${user.replace(/^@/, '')}**`;
-			users.push([user, mention]);
-		}
-	});
-
-	streamHolder.forEach(stream => {
-		const streamAnchor = stream.querySelector('div a');
-		if (streamAnchor !== null) {
-			const streamName = `#${streamAnchor.textContent.trim()}`;
-			const streamMention = `#**${streamName.replace(/^#/, '')}**`;
-			streams.push([streamName, streamMention]);
-		}
-	});
-
-	users.forEach(([user, mention]) => {
-		if (reply.includes(user)) {
-			const regex = new RegExp(user, 'g');
-			reply = reply.replace(regex, mention);
-		}
-	});
-
-	streams.forEach(([stream, streamMention]) => {
-		const regex = new RegExp(stream, 'g');
-		reply = reply.replace(regex, streamMention);
-	});
-
-	// If botsList isn't completely loaded yet, make a synchronous getJSON request for list
-	if (botsListLoaded === false) {
-		loadBots(true);
-	}
-
-	// Iterate for every bot name and replace in reply
-	// @botname with @**botname**
-	botsList.forEach(([bot, mention]) => {
-		if (reply.includes(bot)) {
-			const regex = new RegExp(bot, 'g');
-			reply = reply.replace(regex, mention);
-		}
-	});
-
-	reply = reply.replace(/\\n/, '\n');
-	return reply;
-}
-
-function setupReply(id) {
-	const { narrow } = window;
-	const narrowByTopic = narrow.by_topic || narrow.by_subject;
-	narrowByTopic(id, { trigger: 'notification' });
-}
-
-module.exports = {
-	appId,
-	checkElements,
-	customReply,
-	parseReply,
-	setupReply,
-	focusCurrentServer,
-	loadBots
-};

app/renderer/js/notification/helpers.ts

@@ -0,0 +1,14 @@
+import {remote} from 'electron';
+
+// Do not change this
+export const appId = 'org.zulip.zulip-electron';
+
+const currentWindow = remote.getCurrentWindow();
+const webContents = remote.getCurrentWebContents();
+const webContentsId = webContents.id;
+
+// This function will focus the server that sent
+// the notification. Main function implemented in main.js
+export function focusCurrentServer(): void {
+	currentWindow.webContents.send('focus-webview-with-id', webContentsId);
+}

app/renderer/js/notification/index.js

@@ -1,27 +0,0 @@
-'use strict';
-
-const {
-  remote: { app }
-} = require('electron');
-
-const params = require('../utils/params-util.js');
-const DefaultNotification = require('./default-notification');
-const { appId, loadBots } = require('./helpers');
-
-// From https://github.com/felixrieseberg/electron-windows-notifications#appusermodelid
-// On windows 8 we have to explicitly set the appUserModelId otherwise notification won't work.
-app.setAppUserModelId(appId);
-
-window.Notification = DefaultNotification;
-
-if (process.platform === 'darwin') {
-	const DarwinNotification = require('./darwin-notifications');
-	window.Notification = DarwinNotification;
-}
-
-window.addEventListener('load', () => {
-	// eslint-disable-next-line no-undef, camelcase
-	if (params.isPageParams() && page_params.realm_uri) {
-		loadBots();
-	}
-});

app/renderer/js/notification/index.ts

@@ -0,0 +1,63 @@
+import {remote} from 'electron';
+
+import DefaultNotification from './default-notification';
+import {appId} from './helpers';
+
+const {app} = remote;
+
+// From https://github.com/felixrieseberg/electron-windows-notifications#appusermodelid
+// On windows 8 we have to explicitly set the appUserModelId otherwise notification won't work.
+app.setAppUserModelId(appId);
+
+export interface NotificationData {
+	close: () => void;
+	title: string;
+	dir: NotificationDirection;
+	lang: string;
+	body: string;
+	tag: string;
+	image: string;
+	icon: string;
+	badge: string;
+	vibrate: readonly number[];
+	timestamp: number;
+	renotify: boolean;
+	silent: boolean;
+	requireInteraction: boolean;
+	data: unknown;
+	actions: readonly NotificationAction[];
+}
+
+export function newNotification(
+	title: string,
+	options: NotificationOptions | undefined,
+	dispatch: (type: string, eventInit: EventInit) => boolean
+): NotificationData {
+	const notification = new DefaultNotification(title, options);
+	for (const type of ['click', 'close', 'error', 'show']) {
+		notification.addEventListener(type, (ev: Event) => {
+			if (!dispatch(type, ev)) {
+				ev.preventDefault();
+			}
+		});
+	}
+
+	return {
+		close: () => notification.close(),
+		title: notification.title,
+		dir: notification.dir,
+		lang: notification.lang,
+		body: notification.body,
+		tag: notification.tag,
+		image: notification.image,
+		icon: notification.icon,
+		badge: notification.badge,
+		vibrate: notification.vibrate,
+		timestamp: notification.timestamp,
+		renotify: notification.renotify,
+		silent: notification.silent,
+		requireInteraction: notification.requireInteraction,
+		data: notification.data,
+		actions: notification.actions
+	};
+}

app/renderer/js/pages/network.js

@@ -1,20 +0,0 @@
-'use strict';
-
-const {ipcRenderer} = require('electron');
-
-class NetworkTroubleshootingView {
-	constructor() {
-		this.$reconnectButton = document.getElementById('reconnect');
-	}
-
-	init() {
-		this.$reconnectButton.addEventListener('click', () => {
-			ipcRenderer.send('forward-message', 'reload-viewer');
-		});
-	}
-}
-
-window.onload = () => {
-	const networkTroubleshootingView = new NetworkTroubleshootingView();
-	networkTroubleshootingView.init();
-};

app/renderer/js/pages/network.ts

@@ -0,0 +1,10 @@
+import {ipcRenderer} from 'electron';
+
+export function init($reconnectButton: Element, $settingsButton: Element): void {
+	$reconnectButton.addEventListener('click', () => {
+		ipcRenderer.send('forward-message', 'reload-viewer');
+	});
+	$settingsButton.addEventListener('click', () => {
+		ipcRenderer.send('forward-message', 'open-settings');
+	});
+}

app/renderer/js/pages/preference/add-certificate.js

@@ -1,92 +0,0 @@
-'use-strict';
-
-const { dialog } = require('electron').remote;
-const path = require('path');
-
-const BaseComponent = require(__dirname + '/../../components/base.js');
-const CertificateUtil = require(__dirname + '/../../utils/certificate-util.js');
-const DomainUtil = require(__dirname + '/../../utils/domain-util.js');
-
-class AddCertificate extends BaseComponent {
-	constructor(props) {
-		super();
-		this.props = props;
-		this._certFile = '';
-	}
-
-	template() {
-		return `
-			<div class="settings-card certificates-card">
-				<div class="certificate-input">
-					<div>Organization URL</div>
-					<input class="setting-input-value" autofocus placeholder="your-organization.zulipchat.com or zulip.your-organization.com"/>
-				</div>
-				<div class="certificate-input">
-					<div>Certificate file</div>
-					<button class="green" id="add-certificate-button">Upload</button>
-				</div>
-			</div>
-		`;
-	}
-
-	init() {
-		this.$addCertificate = this.generateNodeFromTemplate(this.template());
-		this.props.$root.appendChild(this.$addCertificate);
-		this.addCertificateButton = this.$addCertificate.querySelector('#add-certificate-button');
-		this.serverUrl = this.$addCertificate.querySelectorAll('input.setting-input-value')[0];
-		this.initListeners();
-	}
-
-	validateAndAdd() {
-		const certificate = this._certFile;
-		const serverUrl = this.serverUrl.value;
-		if (certificate !== '' && serverUrl !== '') {
-			const server = encodeURIComponent(DomainUtil.formatUrl(serverUrl));
-			const fileName = path.basename(certificate);
-			const copy = CertificateUtil.copyCertificate(server, certificate, fileName);
-			if (!copy) {
-				return;
-			}
-			CertificateUtil.setCertificate(server, fileName);
-			dialog.showMessageBox({
-				title: 'Success',
-				message: `Certificate saved!`
-			});
-			this.serverUrl.value = '';
-		} else {
-			dialog.showErrorBox('Error', `Please, ${serverUrl === '' ?
-      'Enter an Organization URL' : 'Choose certificate file'}`);
-		}
-	}
-
-	addHandler() {
-		const showDialogOptions = {
-			title: 'Select file',
-			defaultId: 1,
-			properties: ['openFile'],
-			filters: [{ name: 'crt, pem', extensions: ['crt', 'pem'] }]
-		};
-		dialog.showOpenDialog(showDialogOptions, selectedFile => {
-			if (selectedFile) {
-				this._certFile = selectedFile[0] || '';
-				this.validateAndAdd();
-			}
-		});
-	}
-
-	initListeners() {
-		this.addCertificateButton.addEventListener('click', () => {
-			this.addHandler();
-		});
-
-		this.serverUrl.addEventListener('keypress', event => {
-			const EnterkeyCode = event.keyCode;
-
-			if (EnterkeyCode === 13) {
-				this.addHandler();
-			}
-		});
-	}
-}
-
-module.exports = AddCertificate;

app/renderer/js/pages/preference/badge-settings.js

@@ -1,63 +0,0 @@
-'use strict';
-const electron = require('electron');
-const { app } = require('electron');
-
-const ConfigUtil = require(__dirname + '/../../utils/config-util.js');
-
-let instance = null;
-
-class BadgeSettings {
-	constructor() {
-		if (instance) {
-			return instance;
-		} else {
-			instance = this;
-		}
-
-		return instance;
-	}
-
-	showBadgeCount(messageCount, mainWindow) {
-		if (process.platform === 'darwin') {
-			app.setBadgeCount(messageCount);
-		}
-		if (process.platform === 'win32') {
-			this.updateOverlayIcon(messageCount, mainWindow);
-		}
-	}
-
-	hideBadgeCount(mainWindow) {
-		if (process.platform === 'darwin') {
-			app.setBadgeCount(0);
-		}
-		if (process.platform === 'win32') {
-			mainWindow.setOverlayIcon(null, '');
-		}
-	}
-
-	updateBadge(badgeCount, mainWindow) {
-		if (ConfigUtil.getConfigItem('badgeOption', true)) {
-			this.showBadgeCount(badgeCount, mainWindow);
-		} else {
-			this.hideBadgeCount(mainWindow);
-		}
-	}
-
-	updateOverlayIcon(messageCount, mainWindow) {
-		if (!mainWindow.isFocused()) {
-			mainWindow.flashFrame(ConfigUtil.getConfigItem('flashTaskbarOnMessage'));
-		}
-		if (messageCount === 0) {
-			mainWindow.setOverlayIcon(null, '');
-		} else {
-			mainWindow.webContents.send('render-taskbar-icon', messageCount);
-		}
-	}
-
-	updateTaskbarIcon(data, text, mainWindow) {
-		const img = electron.nativeImage.createFromDataURL(data);
-		mainWindow.setOverlayIcon(img, text);
-	}
-}
-
-module.exports = new BadgeSettings();

app/renderer/js/pages/preference/badge-settings.ts

@@ -0,0 +1,44 @@
+import electron, {app} from 'electron';
+
+import * as ConfigUtil from '../../utils/config-util';
+
+function showBadgeCount(messageCount: number, mainWindow: electron.BrowserWindow): void {
+	if (process.platform === 'win32') {
+		updateOverlayIcon(messageCount, mainWindow);
+	} else {
+		app.badgeCount = messageCount;
+	}
+}
+
+function hideBadgeCount(mainWindow: electron.BrowserWindow): void {
+	if (process.platform === 'win32') {
+		mainWindow.setOverlayIcon(null, '');
+	} else {
+		app.badgeCount = 0;
+	}
+}
+
+export function updateBadge(badgeCount: number, mainWindow: electron.BrowserWindow): void {
+	if (ConfigUtil.getConfigItem('badgeOption', true)) {
+		showBadgeCount(badgeCount, mainWindow);
+	} else {
+		hideBadgeCount(mainWindow);
+	}
+}
+
+function updateOverlayIcon(messageCount: number, mainWindow: electron.BrowserWindow): void {
+	if (!mainWindow.isFocused()) {
+		mainWindow.flashFrame(ConfigUtil.getConfigItem('flashTaskbarOnMessage'));
+	}
+
+	if (messageCount === 0) {
+		mainWindow.setOverlayIcon(null, '');
+	} else {
+		mainWindow.webContents.send('render-taskbar-icon', messageCount);
+	}
+}
+
+export function updateTaskbarIcon(data: string, text: string, mainWindow: electron.BrowserWindow): void {
+	const img = electron.nativeImage.createFromDataURL(data);
+	mainWindow.setOverlayIcon(img, text);
+}

app/renderer/js/pages/preference/base-section.js

@@ -1,46 +0,0 @@
-'use strict';
-
-const {ipcRenderer} = require('electron');
-
-const BaseComponent = require(__dirname + '/../../components/base.js');
-
-class BaseSection extends BaseComponent {
-	generateSettingOption(props) {
-		const {$element, value, clickHandler} = props;
-
-		$element.innerHTML = '';
-
-		const $optionControl = this.generateNodeFromTemplate(this.generateOptionTemplate(value));
-		$element.appendChild($optionControl);
-
-		$optionControl.addEventListener('click', clickHandler);
-	}
-
-	generateOptionTemplate(settingOption) {
-		if (settingOption) {
-			return `
-				<div class="action">
-					<div class="switch">
-					  <input class="toggle toggle-round" type="checkbox" checked>
-					  <label></label>
-					</div>
-				</div>
-			`;
-		} else {
-			return `
-				<div class="action">
-					<div class="switch">
-					  <input class="toggle toggle-round" type="checkbox">
-					  <label></label>
-					</div>
-				</div>
-			`;
-		}
-	}
-
-	reloadApp() {
-		ipcRenderer.send('forward-message', 'reload-viewer');
-	}
-}
-
-module.exports = BaseSection;

app/renderer/js/pages/preference/base-section.ts

@@ -0,0 +1,66 @@
+import {ipcRenderer} from 'electron';
+
+import {htmlEscape} from 'escape-goat';
+
+import BaseComponent from '../../components/base';
+
+interface BaseSectionProps {
+	$element: HTMLElement;
+	disabled?: boolean;
+	value: boolean;
+	clickHandler: () => void;
+}
+
+export default class BaseSection extends BaseComponent {
+	generateSettingOption(props: BaseSectionProps): void {
+		const {$element, disabled, value, clickHandler} = props;
+
+		$element.textContent = '';
+
+		const $optionControl = this.generateNodeFromHTML(this.generateOptionHTML(value, disabled));
+		$element.append($optionControl);
+
+		if (!disabled) {
+			$optionControl.addEventListener('click', clickHandler);
+		}
+	}
+
+	generateOptionHTML(settingOption: boolean, disabled?: boolean): string {
+		const labelHTML = disabled ? '<label class="disallowed" title="Setting locked by system administrator."></label>' : '<label></label>';
+		if (settingOption) {
+			return htmlEscape`
+				<div class="action">
+					<div class="switch">
+						<input class="toggle toggle-round" type="checkbox" checked disabled>
+						` + labelHTML + htmlEscape`
+					</div>
+				</div>
+			`;
+		}
+
+		return htmlEscape`
+			<div class="action">
+				<div class="switch">
+					<input class="toggle toggle-round" type="checkbox">
+					` + labelHTML + htmlEscape`
+				</div>
+			</div>
+		`;
+	}
+
+	/* A method that in future can be used to create dropdown menus using <select> <option> tags.
+		it needs an object which has ``key: value`` pairs and will return a string that can be appended to HTML
+	*/
+	generateSelectHTML(options: Record<string, string>, className?: string, idName?: string): string {
+		let html = htmlEscape`<select class="${className}" id="${idName}">\n`;
+		Object.keys(options).forEach(key => {
+			html += htmlEscape`<option name="${key}" value="${key}">${options[key]}</option>\n`;
+		});
+		html += '</select>';
+		return html;
+	}
+
+	reloadApp(): void {
+		ipcRenderer.send('forward-message', 'reload-viewer');
+	}
+}

app/renderer/js/pages/preference/connected-org-section.js

@@ -1,72 +0,0 @@
-'use strict';
-
-const BaseSection = require(__dirname + '/base-section.js');
-const DomainUtil = require(__dirname + '/../../utils/domain-util.js');
-const ServerInfoForm = require(__dirname + '/server-info-form.js');
-const AddCertificate = require(__dirname + '/add-certificate.js');
-
-class ConnectedOrgSection extends BaseSection {
-	constructor(props) {
-		super();
-		this.props = props;
-	}
-
-	template() {
-		return `
-			<div class="settings-pane" id="server-settings-pane">
-				<div class="page-title">Connected organizations</div>
-				<div class="title" id="existing-servers">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">Connect to another organization</button></div>
-				<div class="page-title">Add Custom Certificates</div>
-				<div id="add-certificate-container"></div>
-			</div>
-		`;
-	}
-
-	init() {
-		this.initServers();
-	}
-
-	initServers() {
-		this.props.$root.innerHTML = '';
-
-		const servers = DomainUtil.getDomains();
-		this.props.$root.innerHTML = this.template();
-
-		this.$serverInfoContainer = document.getElementById('server-info-container');
-		this.$existingServers = document.getElementById('existing-servers');
-		this.$newOrgButton = document.getElementById('new-org-button');
-		this.$addCertificateContainer = document.getElementById('add-certificate-container');
-
-		const noServerText = 'All the connected orgnizations will appear here';
-		// Show noServerText if no servers are there otherwise hide it
-		this.$existingServers.innerHTML = servers.length === 0 ? noServerText : '';
-
-		for (let i = 0; i < servers.length; i++) {
-			new ServerInfoForm({
-				$root: this.$serverInfoContainer,
-				server: servers[i],
-				index: i,
-				onChange: this.reloadApp
-			}).init();
-		}
-
-		this.$newOrgButton.addEventListener('click', () => {
-			// We don't need to import this since it's already imported in other files
-			// eslint-disable-next-line no-undef
-			ipcRenderer.send('forward-message', 'open-org-tab');
-		});
-
-		this.initAddCertificate();
-	}
-
-	initAddCertificate() {
-		new AddCertificate({
-			$root: this.$addCertificateContainer
-		}).init();
-	}
-
-}
-
-module.exports = ConnectedOrgSection;

app/renderer/js/pages/preference/connected-org-section.ts

@@ -0,0 +1,80 @@
+import {ipcRenderer} from 'electron';
+
+import {htmlEscape} from 'escape-goat';
+
+import * as DomainUtil from '../../utils/domain-util';
+import * as t from '../../utils/translation-util';
+
+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;
+	$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.__('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.$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.initFindAccounts();
+	}
+
+	initFindAccounts(): void {
+		new FindAccounts({
+			$root: this.$findAccountsContainer
+		}).init();
+	}
+}

app/renderer/js/pages/preference/find-accounts.ts

@@ -0,0 +1,80 @@
+import {htmlEscape} from 'escape-goat';
+
+import BaseComponent from '../../components/base';
+import * as LinkUtil from '../../utils/link-util';
+import * as t from '../../utils/translation-util';
+
+interface FindAccountsProps {
+	$root: Element;
+}
+
+export default class FindAccounts extends BaseComponent {
+	props: FindAccountsProps;
+	$findAccounts: Element | null;
+	$findAccountsButton: Element | null;
+	$serverUrlField: HTMLInputElement | null;
+	constructor(props: FindAccountsProps) {
+		super();
+		this.props = props;
+	}
+
+	templateHTML(): string {
+		return htmlEscape`
+			<div class="settings-card certificate-card">
+				<div class="certificate-input">
+					<div>${t.__('Organization URL')}</div>
+					<input class="setting-input-value" value="zulipchat.com"/>
+				</div>
+				<div class="certificate-input">
+					<button class="green w-150" id="find-accounts-button">${t.__('Find accounts')}</button>
+				</div>
+			</div>
+		`;
+	}
+
+	init(): void {
+		this.$findAccounts = this.generateNodeFromHTML(this.templateHTML());
+		this.props.$root.append(this.$findAccounts);
+		this.$findAccountsButton = this.$findAccounts.querySelector('#find-accounts-button');
+		this.$serverUrlField = this.$findAccounts.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
+		this.initListeners();
+	}
+
+	async findAccounts(url: string): Promise<void> {
+		if (!url) {
+			return;
+		}
+
+		if (!url.startsWith('http')) {
+			url = 'https://' + url;
+		}
+
+		await LinkUtil.openBrowser(new URL('/accounts/find', url));
+	}
+
+	initListeners(): void {
+		this.$findAccountsButton.addEventListener('click', async () => {
+			await this.findAccounts(this.$serverUrlField.value);
+		});
+
+		this.$serverUrlField.addEventListener('click', () => {
+			if (this.$serverUrlField.value === 'zulipchat.com') {
+				this.$serverUrlField.setSelectionRange(0, 0);
+			}
+		});
+
+		this.$serverUrlField.addEventListener('keypress', async event => {
+			if (event.key === 'Enter') {
+				await this.findAccounts(this.$serverUrlField.value);
+			}
+		});
+
+		this.$serverUrlField.addEventListener('input', () => {
+			if (this.$serverUrlField.value) {
+				this.$serverUrlField.classList.remove('invalid-input-value');
+			} else {
+				this.$serverUrlField.classList.add('invalid-input-value');
+			}
+		});
+	}
+}

app/renderer/js/pages/preference/general-section.js

@@ -1,450 +0,0 @@
-'use strict';
-const path = require('path');
-const { ipcRenderer, remote } = require('electron');
-const fs = require('fs-extra');
-
-const { app, dialog } = remote;
-const currentBrowserWindow = remote.getCurrentWindow();
-const BaseSection = require(__dirname + '/base-section.js');
-const ConfigUtil = require(__dirname + '/../../utils/config-util.js');
-
-class GeneralSection extends BaseSection {
-	constructor(props) {
-		super();
-		this.props = props;
-	}
-
-	template() {
-		return `
-            <div class="settings-pane">
-                <div class="title">Appearance</div>
-                <div id="appearance-option-settings" class="settings-card">
-					<div class="setting-row" id="tray-option">
-						<div class="setting-description">Show app icon in system tray</div>
-						<div class="setting-control"></div>
-					</div>
-					<div class="setting-row" id="menubar-option" style= "display:${process.platform === 'darwin' ? 'none' : ''}">
-						<div class="setting-description">Auto hide menu bar (Press Alt key to display)</div>
-						<div class="setting-control"></div>
-					</div>
-					<div class="setting-row" id="sidebar-option">
-						<div class="setting-description">Show sidebar (<span class="code">${process.platform === 'darwin' ? 'Cmd+Shift+S' : 'Ctrl+Shift+S'}</span>)</div>
-						<div class="setting-control"></div>
-					</div>
-					<div class="setting-row" id="badge-option">
-						<div class="setting-description">Show app unread badge</div>
-						<div class="setting-control"></div>
-					</div>
-					<div class="setting-row" id="dock-bounce-option" style= "display:${process.platform === 'darwin' ? '' : 'none'}">
-						<div class="setting-description">Bounce dock on new private message</div>
-						<div class="setting-control"></div>
-					</div>
-					<div class="setting-row" id="flash-taskbar-option" style= "display:${process.platform === 'win32' ? '' : 'none'}">
-						<div class="setting-description">Flash taskbar on new message</div>
-						<div class="setting-control"></div>
-					</div>
-				</div>
-				<div class="title">Desktop Notifications</div>
-				<div class="settings-card">
-					<div class="setting-row" id="show-notification-option">
-						<div class="setting-description">Show desktop notifications</div>
-						<div class="setting-control"></div>
-					</div>
-					<div class="setting-row" id="silent-option">
-						<div class="setting-description">Mute all sounds from Zulip</div>
-						<div class="setting-control"></div>
-					</div>
-				</div>
-				<div class="title">App Updates</div>
-				<div class="settings-card">
-				<div class="setting-row" id="autoupdate-option">
-						<div class="setting-description">Enable auto updates</div>
-						<div class="setting-control"></div>
-					</div>
-					<div class="setting-row" id="betaupdate-option">
-						<div class="setting-description">Get beta updates</div>
-						<div class="setting-control"></div>
-					</div>
-				</div>
-				<div class="title">Functionality</div>
-                <div class="settings-card">
-					<div class="setting-row" id="startAtLogin-option">
-						<div class="setting-description">Start app at login</div>
-						<div class="setting-control"></div>
-					</div>
-					<div class="setting-row" id="start-minimize-option">
-						<div class="setting-description">Always start minimized</div>
-						<div class="setting-control"></div>
-					</div>
-					<div class="setting-row" id="enable-spellchecker-option">
-						<div class="setting-description">Enable spellchecker (requires restart)</div>
-						<div class="setting-control"></div>
-					</div>
-				</div>
-				<div class="title">Advanced</div>
-				<div class="settings-card">
-				<div class="setting-row" id="enable-error-reporting">
-					<div class="setting-description">Enable error reporting (requires restart)</div>
-					<div class="setting-control"></div>
-				</div>
-				<div class="setting-row" id="show-download-folder">
-					<div class="setting-description">Show downloaded files in file manager</div>
-					<div class="setting-control"></div>
-				</div>
-				<div class="setting-row" id="add-custom-css">
-				<div class="setting-description">
-					Add custom CSS
-				</div>
-				<button class="custom-css-button green">Upload</button>
-			</div>
-			<div class="setting-row" id="remove-custom-css">
-				<div class="setting-description">
-					<div class="selected-css-path" id="custom-css-path">${ConfigUtil.getConfigItem('customCSS')}</div>
-				</div>
-				<div class="action red" id="css-delete-action">
-					<i class="material-icons">indeterminate_check_box</i>
-					<span>Delete</span>
-				</div>
-			</div>
-					<div class="setting-row" id="download-folder">
-						<div class="setting-description">
-							Default download location
-						</div>
-						<button class="download-folder-button green">Change</button>
-					</div>
-					<div class="setting-row">
-						<div class="setting-description">
-							<div class="download-folder-path">${ConfigUtil.getConfigItem('downloadsPath', `${app.getPath('downloads')}`)}</div>
-						</div>
-					</div>
-
-				</div>
-				<div class="title">Reset Application Data</div>
-                <div class="settings-card">
-					<div class="setting-row" id="resetdata-option">
-						<div class="setting-description">This will delete all application data including all added accounts and preferences
-						</div>
-						<button class="reset-data-button red w-150">Reset App Data</button>
-					</div>
-				</div>
-            </div>
-		`;
-	}
-
-	init() {
-		this.props.$root.innerHTML = this.template();
-		this.updateTrayOption();
-		this.updateBadgeOption();
-		this.updateSilentOption();
-		this.autoUpdateOption();
-		this.betaUpdateOption();
-		this.updateSidebarOption();
-		this.updateStartAtLoginOption();
-		this.updateResetDataOption();
-		this.showDesktopNotification();
-		this.enableSpellchecker();
-		this.minimizeOnStart();
-		this.addCustomCSS();
-		this.showCustomCSSPath();
-		this.removeCustomCSS();
-		this.downloadFolder();
-		this.showDownloadFolder();
-		this.enableErrorReporting();
-
-		// Platform specific settings
-
-		// Flashing taskbar on Windows
-		if (process.platform === 'win32') {
-			this.updateFlashTaskbar();
-		}
-		// Dock bounce on macOS
-		if (process.platform === 'darwin') {
-			this.updateDockBouncing();
-		}
-
-		// Auto hide menubar on Windows and Linux
-		if (process.platform !== 'darwin') {
-			this.updateMenubarOption();
-		}
-	}
-
-	updateTrayOption() {
-		this.generateSettingOption({
-			$element: document.querySelector('#tray-option .setting-control'),
-			value: ConfigUtil.getConfigItem('trayIcon', true),
-			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('trayIcon');
-				ConfigUtil.setConfigItem('trayIcon', newValue);
-				ipcRenderer.send('forward-message', 'toggletray');
-				this.updateTrayOption();
-			}
-		});
-	}
-
-	updateMenubarOption() {
-		this.generateSettingOption({
-			$element: document.querySelector('#menubar-option .setting-control'),
-			value: ConfigUtil.getConfigItem('autoHideMenubar', false),
-			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('autoHideMenubar');
-				ConfigUtil.setConfigItem('autoHideMenubar', newValue);
-				ipcRenderer.send('toggle-menubar', newValue);
-				this.updateMenubarOption();
-			}
-		});
-	}
-
-	updateBadgeOption() {
-		this.generateSettingOption({
-			$element: document.querySelector('#badge-option .setting-control'),
-			value: ConfigUtil.getConfigItem('badgeOption', true),
-			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('badgeOption');
-				ConfigUtil.setConfigItem('badgeOption', newValue);
-				ipcRenderer.send('toggle-badge-option', newValue);
-				this.updateBadgeOption();
-			}
-		});
-	}
-
-	updateDockBouncing() {
-		this.generateSettingOption({
-			$element: document.querySelector('#dock-bounce-option .setting-control'),
-			value: ConfigUtil.getConfigItem('dockBouncing', true),
-			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('dockBouncing');
-				ConfigUtil.setConfigItem('dockBouncing', newValue);
-				this.updateDockBouncing();
-			}
-		});
-	}
-
-	updateFlashTaskbar() {
-		this.generateSettingOption({
-			$element: document.querySelector('#flash-taskbar-option .setting-control'),
-			value: ConfigUtil.getConfigItem('flashTaskbarOnMessage', true),
-			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('flashTaskbarOnMessage');
-				ConfigUtil.setConfigItem('flashTaskbarOnMessage', newValue);
-				this.updateFlashTaskbar();
-			}
-		});
-	}
-
-	autoUpdateOption() {
-		this.generateSettingOption({
-			$element: document.querySelector('#autoupdate-option .setting-control'),
-			value: ConfigUtil.getConfigItem('autoUpdate', true),
-			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('autoUpdate');
-				ConfigUtil.setConfigItem('autoUpdate', newValue);
-				if (!newValue) {
-					ConfigUtil.setConfigItem('betaUpdate', false);
-					this.betaUpdateOption();
-				}
-				this.autoUpdateOption();
-			}
-		});
-	}
-
-	betaUpdateOption() {
-		this.generateSettingOption({
-			$element: document.querySelector('#betaupdate-option .setting-control'),
-			value: ConfigUtil.getConfigItem('betaUpdate', false),
-			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('betaUpdate');
-				if (ConfigUtil.getConfigItem('autoUpdate')) {
-					ConfigUtil.setConfigItem('betaUpdate', newValue);
-					this.betaUpdateOption();
-				}
-			}
-		});
-	}
-
-	updateSilentOption() {
-		this.generateSettingOption({
-			$element: document.querySelector('#silent-option .setting-control'),
-			value: ConfigUtil.getConfigItem('silent', false),
-			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('silent', true);
-				ConfigUtil.setConfigItem('silent', newValue);
-				this.updateSilentOption();
-				currentBrowserWindow.send('toggle-silent', newValue);
-			}
-		});
-	}
-
-	showDesktopNotification() {
-		this.generateSettingOption({
-			$element: document.querySelector('#show-notification-option .setting-control'),
-			value: ConfigUtil.getConfigItem('showNotification', true),
-			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('showNotification', true);
-				ConfigUtil.setConfigItem('showNotification', newValue);
-				this.showDesktopNotification();
-			}
-		});
-	}
-
-	updateSidebarOption() {
-		this.generateSettingOption({
-			$element: document.querySelector('#sidebar-option .setting-control'),
-			value: ConfigUtil.getConfigItem('showSidebar', true),
-			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('showSidebar');
-				ConfigUtil.setConfigItem('showSidebar', newValue);
-				ipcRenderer.send('forward-message', 'toggle-sidebar', newValue);
-				this.updateSidebarOption();
-			}
-		});
-	}
-
-	updateStartAtLoginOption() {
-		this.generateSettingOption({
-			$element: document.querySelector('#startAtLogin-option .setting-control'),
-			value: ConfigUtil.getConfigItem('startAtLogin', false),
-			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('startAtLogin');
-				ConfigUtil.setConfigItem('startAtLogin', newValue);
-				ipcRenderer.send('toggleAutoLauncher', newValue);
-				this.updateStartAtLoginOption();
-			}
-		});
-	}
-
-	enableSpellchecker() {
-		this.generateSettingOption({
-			$element: document.querySelector('#enable-spellchecker-option .setting-control'),
-			value: ConfigUtil.getConfigItem('enableSpellchecker', true),
-			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('enableSpellchecker');
-				ConfigUtil.setConfigItem('enableSpellchecker', newValue);
-				this.enableSpellchecker();
-			}
-		});
-	}
-
-	enableErrorReporting() {
-		this.generateSettingOption({
-			$element: document.querySelector('#enable-error-reporting .setting-control'),
-			value: ConfigUtil.getConfigItem('errorReporting', true),
-			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('errorReporting');
-				ConfigUtil.setConfigItem('errorReporting', newValue);
-				this.enableErrorReporting();
-			}
-		});
-	}
-
-	clearAppDataDialog() {
-		const clearAppDataMessage = 'By clicking proceed you will be removing all added accounts and preferences from Zulip. When the application restarts, it will be as if you are starting Zulip for the first time.';
-		const getAppPath = path.join(app.getPath('appData'), app.getName());
-
-		dialog.showMessageBox({
-			type: 'warning',
-			buttons: ['YES', 'NO'],
-			defaultId: 0,
-			message: 'Are you sure',
-			detail: clearAppDataMessage
-		}, response => {
-			if (response === 0) {
-				fs.remove(getAppPath);
-				setTimeout(() => ipcRenderer.send('forward-message', 'hard-reload'), 1000);
-			}
-		});
-	}
-
-	customCssDialog() {
-		const showDialogOptions = {
-			title: 'Select file',
-			defaultId: 1,
-			properties: ['openFile'],
-			filters: [{ name: 'CSS file', extensions: ['css'] }]
-		};
-
-		dialog.showOpenDialog(showDialogOptions, selectedFile => {
-			if (selectedFile) {
-				ConfigUtil.setConfigItem('customCSS', selectedFile[0]);
-				ipcRenderer.send('forward-message', 'hard-reload');
-			}
-		});
-	}
-
-	updateResetDataOption() {
-		const resetDataButton = document.querySelector('#resetdata-option .reset-data-button');
-		resetDataButton.addEventListener('click', () => {
-			this.clearAppDataDialog();
-		});
-	}
-
-	minimizeOnStart() {
-		this.generateSettingOption({
-			$element: document.querySelector('#start-minimize-option .setting-control'),
-			value: ConfigUtil.getConfigItem('startMinimized', false),
-			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('startMinimized');
-				ConfigUtil.setConfigItem('startMinimized', newValue);
-				this.minimizeOnStart();
-			}
-		});
-	}
-
-	addCustomCSS() {
-		const customCSSButton = document.querySelector('#add-custom-css .custom-css-button');
-		customCSSButton.addEventListener('click', () => {
-			this.customCssDialog();
-		});
-	}
-
-	showCustomCSSPath() {
-		if (!ConfigUtil.getConfigItem('customCSS')) {
-			const cssPATH = document.getElementById('remove-custom-css');
-			cssPATH.style.display = 'none';
-		}
-	}
-
-	removeCustomCSS() {
-		const removeCSSButton = document.getElementById('css-delete-action');
-		removeCSSButton.addEventListener('click', () => {
-			ConfigUtil.setConfigItem('customCSS');
-			ipcRenderer.send('forward-message', 'hard-reload');
-		});
-	}
-
-	downloadFolderDialog() {
-		const showDialogOptions = {
-			title: 'Select Download Location',
-			defaultId: 1,
-			properties: ['openDirectory']
-		};
-
-		dialog.showOpenDialog(showDialogOptions, selectedFolder => {
-			if (selectedFolder) {
-				ConfigUtil.setConfigItem('downloadsPath', selectedFolder[0]);
-				const downloadFolderPath = document.querySelector('.download-folder-path');
-				downloadFolderPath.innerText = selectedFolder[0];
-			}
-		});
-	}
-	downloadFolder() {
-		const downloadFolder = document.querySelector('#download-folder .download-folder-button');
-		downloadFolder.addEventListener('click', () => {
-			this.downloadFolderDialog();
-		});
-	}
-
-	showDownloadFolder() {
-		this.generateSettingOption({
-			$element: document.querySelector('#show-download-folder .setting-control'),
-			value: ConfigUtil.getConfigItem('showDownloadFolder', false),
-			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('showDownloadFolder');
-				ConfigUtil.setConfigItem('showDownloadFolder', newValue);
-				this.showDownloadFolder();
-			}
-		});
-	}
-
-}
-
-module.exports = GeneralSection;

app/renderer/js/pages/preference/general-section.ts

@@ -0,0 +1,583 @@
+import {ipcRenderer, remote, OpenDialogOptions} from 'electron';
+import path from 'path';
+
+import Tagify from '@yaireo/tagify';
+import {htmlEscape} from 'escape-goat';
+import fs from 'fs-extra';
+import ISO6391 from 'iso-639-1';
+
+import supportedLocales from '../../../../translations/supported-locales.json';
+import * as ConfigUtil from '../../utils/config-util';
+import * as EnterpriseUtil from '../../utils/enterprise-util';
+import * as t from '../../utils/translation-util';
+
+import BaseSection from './base-section';
+
+const {app, dialog, session} = remote;
+const currentBrowserWindow = remote.getCurrentWindow();
+
+interface GeneralSectionProps {
+	$root: Element;
+}
+
+export default class GeneralSection extends BaseSection {
+	props: GeneralSectionProps;
+	constructor(props: GeneralSectionProps) {
+		super();
+		this.props = props;
+	}
+
+	templateHTML(): string {
+		return htmlEscape`
+            <div class="settings-pane">
+                <div class="title">${t.__('Appearance')}</div>
+                <div id="appearance-option-settings" class="settings-card">
+					<div class="setting-row" id="tray-option">
+						<div class="setting-description">${t.__('Show app icon in system tray')}</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-row" id="menubar-option" style= "display:${process.platform === 'darwin' ? 'none' : ''}">
+						<div class="setting-description">${t.__('Auto hide menu bar (Press Alt key to display)')}</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-row" id="sidebar-option">
+						<div class="setting-description">${t.__('Show sidebar')} (<span class="code">${process.platform === 'darwin' ? 'Cmd+Shift+S' : 'Ctrl+Shift+S'}</span>)</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-row" id="badge-option">
+						<div class="setting-description">${t.__('Show app unread badge')}</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-row" id="dock-bounce-option" style= "display:${process.platform === 'darwin' ? '' : 'none'}">
+						<div class="setting-description">${t.__('Bounce dock on new private message')}</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-row" id="flash-taskbar-option" style= "display:${process.platform === 'win32' ? '' : 'none'}">
+						<div class="setting-description">${t.__('Flash taskbar on new message')}</div>
+						<div class="setting-control"></div>
+					</div>
+				</div>
+				<div class="title">${t.__('Desktop Notifications')}</div>
+				<div class="settings-card">
+					<div class="setting-row" id="show-notification-option">
+						<div class="setting-description">${t.__('Show desktop notifications')}</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-row" id="silent-option">
+						<div class="setting-description">${t.__('Mute all sounds from Zulip')}</div>
+						<div class="setting-control"></div>
+					</div>
+				</div>
+				<div class="title">${t.__('App Updates')}</div>
+				<div class="settings-card">
+				<div class="setting-row" id="autoupdate-option">
+						<div class="setting-description">${t.__('Enable auto updates')}</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-row" id="betaupdate-option">
+						<div class="setting-description">${t.__('Get beta updates')}</div>
+						<div class="setting-control"></div>
+					</div>
+				</div>
+				<div class="title">${t.__('Functionality')}</div>
+                <div class="settings-card">
+					<div class="setting-row" id="startAtLogin-option">
+						<div class="setting-description">${t.__('Start app at login')}</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-row" id="start-minimize-option">
+						<div class="setting-description">${t.__('Always start minimized')}</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-row" id="quitOnClose-option">
+						<div class="setting-description">${t.__('Quit when the window is closed')}</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-row" id="enable-spellchecker-option">
+						<div class="setting-description">${t.__('Enable spellchecker (requires restart)')}</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-row" id="spellcheck-langs" style= "display:${process.platform === 'darwin' ? 'none' : ''}"></div>
+					<div class="setting-row" id="note"></div>
+				</div>
+
+				<div class="title">${t.__('Advanced')}</div>
+				<div class="settings-card">
+
+					<div class="setting-row" id="enable-error-reporting">
+						<div class="setting-description">${t.__('Enable error reporting (requires restart)')}</div>
+						<div class="setting-control"></div>
+					</div>
+
+					<div class="setting-row" id="app-language">
+						<div class="setting-description">${t.__('App language (requires restart)')}</div>
+						<div  id="lang-div" class="lang-div"></div>
+					</div>
+
+					<div class="setting-row" id="add-custom-css">
+						<div class="setting-description">
+							${t.__('Add custom CSS')}
+						</div>
+						<button class="custom-css-button green">${t.__('Upload')}</button>
+					</div>
+					<div class="setting-row" id="remove-custom-css">
+						<div class="setting-description">
+							<div class="selected-css-path" id="custom-css-path">${ConfigUtil.getConfigString('customCSS', '')}</div>
+						</div>
+						<div class="action red" id="css-delete-action">
+							<i class="material-icons">indeterminate_check_box</i>
+							<span>${t.__('Delete')}</span>
+						</div>
+					</div>
+					<div class="setting-row" id="download-folder">
+						<div class="setting-description">
+							${t.__('Default download location')}
+						</div>
+						<button class="download-folder-button green">${t.__('Change')}</button>
+					</div>
+					<div class="setting-row">
+						<div class="setting-description">
+							<div class="download-folder-path">${ConfigUtil.getConfigString('downloadsPath', app.getPath('downloads'))}</div>
+						</div>
+					</div>
+					<div class="setting-row" id="prompt-download">
+						<div class="setting-description">${t.__('Ask where to save files before downloading')}</div>
+						<div class="setting-control"></div>
+					</div>
+				</div>
+				<div class="title">${t.__('Factory Reset Data')}</div>
+                <div class="settings-card">
+					<div class="setting-row" id="factory-reset-option">
+						<div class="setting-description">${t.__('Reset the application, thus deleting all the connected organizations and accounts.')}
+						</div>
+						<button class="factory-reset-button red w-150">${t.__('Factory Reset')}</button>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+
+	init(): void {
+		this.props.$root.innerHTML = this.templateHTML();
+		this.updateTrayOption();
+		this.updateBadgeOption();
+		this.updateSilentOption();
+		this.autoUpdateOption();
+		this.betaUpdateOption();
+		this.updateSidebarOption();
+		this.updateStartAtLoginOption();
+		this.factoryReset();
+		this.showDesktopNotification();
+		this.enableSpellchecker();
+		this.minimizeOnStart();
+		this.addCustomCSS();
+		this.showCustomCSSPath();
+		this.removeCustomCSS();
+		this.downloadFolder();
+		this.updateQuitOnCloseOption();
+		this.updatePromptDownloadOption();
+		this.enableErrorReporting();
+		this.setLocale();
+		this.initSpellChecker();
+
+		// Platform specific settings
+
+		// Flashing taskbar on Windows
+		if (process.platform === 'win32') {
+			this.updateFlashTaskbar();
+		}
+
+		// Dock bounce on macOS
+		if (process.platform === 'darwin') {
+			this.updateDockBouncing();
+		}
+
+		// Auto hide menubar on Windows and Linux
+		if (process.platform !== 'darwin') {
+			this.updateMenubarOption();
+		}
+	}
+
+	updateTrayOption(): void {
+		this.generateSettingOption({
+			$element: document.querySelector('#tray-option .setting-control'),
+			value: ConfigUtil.getConfigItem('trayIcon', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('trayIcon');
+				ConfigUtil.setConfigItem('trayIcon', newValue);
+				ipcRenderer.send('forward-message', 'toggletray');
+				this.updateTrayOption();
+			}
+		});
+	}
+
+	updateMenubarOption(): void {
+		this.generateSettingOption({
+			$element: document.querySelector('#menubar-option .setting-control'),
+			value: ConfigUtil.getConfigItem('autoHideMenubar', false),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('autoHideMenubar');
+				ConfigUtil.setConfigItem('autoHideMenubar', newValue);
+				ipcRenderer.send('toggle-menubar', newValue);
+				this.updateMenubarOption();
+			}
+		});
+	}
+
+	updateBadgeOption(): void {
+		this.generateSettingOption({
+			$element: document.querySelector('#badge-option .setting-control'),
+			value: ConfigUtil.getConfigItem('badgeOption', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('badgeOption');
+				ConfigUtil.setConfigItem('badgeOption', newValue);
+				ipcRenderer.send('toggle-badge-option', newValue);
+				this.updateBadgeOption();
+			}
+		});
+	}
+
+	updateDockBouncing(): void {
+		this.generateSettingOption({
+			$element: document.querySelector('#dock-bounce-option .setting-control'),
+			value: ConfigUtil.getConfigItem('dockBouncing', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('dockBouncing');
+				ConfigUtil.setConfigItem('dockBouncing', newValue);
+				this.updateDockBouncing();
+			}
+		});
+	}
+
+	updateFlashTaskbar(): void {
+		this.generateSettingOption({
+			$element: document.querySelector('#flash-taskbar-option .setting-control'),
+			value: ConfigUtil.getConfigItem('flashTaskbarOnMessage', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('flashTaskbarOnMessage');
+				ConfigUtil.setConfigItem('flashTaskbarOnMessage', newValue);
+				this.updateFlashTaskbar();
+			}
+		});
+	}
+
+	autoUpdateOption(): void {
+		this.generateSettingOption({
+			$element: document.querySelector('#autoupdate-option .setting-control'),
+			disabled: EnterpriseUtil.configItemExists('autoUpdate'),
+			value: ConfigUtil.getConfigItem('autoUpdate', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('autoUpdate');
+				ConfigUtil.setConfigItem('autoUpdate', newValue);
+				if (!newValue) {
+					ConfigUtil.setConfigItem('betaUpdate', false);
+					this.betaUpdateOption();
+				}
+
+				this.autoUpdateOption();
+			}
+		});
+	}
+
+	betaUpdateOption(): void {
+		this.generateSettingOption({
+			$element: document.querySelector('#betaupdate-option .setting-control'),
+			value: ConfigUtil.getConfigItem('betaUpdate', false),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('betaUpdate');
+				if (ConfigUtil.getConfigItem('autoUpdate')) {
+					ConfigUtil.setConfigItem('betaUpdate', newValue);
+					this.betaUpdateOption();
+				}
+			}
+		});
+	}
+
+	updateSilentOption(): void {
+		this.generateSettingOption({
+			$element: document.querySelector('#silent-option .setting-control'),
+			value: ConfigUtil.getConfigItem('silent', false),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('silent', true);
+				ConfigUtil.setConfigItem('silent', newValue);
+				this.updateSilentOption();
+				currentBrowserWindow.webContents.send('toggle-silent', newValue);
+			}
+		});
+	}
+
+	showDesktopNotification(): void {
+		this.generateSettingOption({
+			$element: document.querySelector('#show-notification-option .setting-control'),
+			value: ConfigUtil.getConfigItem('showNotification', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('showNotification', true);
+				ConfigUtil.setConfigItem('showNotification', newValue);
+				this.showDesktopNotification();
+			}
+		});
+	}
+
+	updateSidebarOption(): void {
+		this.generateSettingOption({
+			$element: document.querySelector('#sidebar-option .setting-control'),
+			value: ConfigUtil.getConfigItem('showSidebar', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('showSidebar');
+				ConfigUtil.setConfigItem('showSidebar', newValue);
+				ipcRenderer.send('forward-message', 'toggle-sidebar', newValue);
+				this.updateSidebarOption();
+			}
+		});
+	}
+
+	updateStartAtLoginOption(): void {
+		this.generateSettingOption({
+			$element: document.querySelector('#startAtLogin-option .setting-control'),
+			value: ConfigUtil.getConfigItem('startAtLogin', false),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('startAtLogin');
+				ConfigUtil.setConfigItem('startAtLogin', newValue);
+				ipcRenderer.send('toggleAutoLauncher', newValue);
+				this.updateStartAtLoginOption();
+			}
+		});
+	}
+
+	updateQuitOnCloseOption(): void {
+		this.generateSettingOption({
+			$element: document.querySelector('#quitOnClose-option .setting-control'),
+			value: ConfigUtil.getConfigItem('quitOnClose', false),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('quitOnClose');
+				ConfigUtil.setConfigItem('quitOnClose', newValue);
+				this.updateQuitOnCloseOption();
+			}
+		});
+	}
+
+	enableSpellchecker(): void {
+		this.generateSettingOption({
+			$element: document.querySelector('#enable-spellchecker-option .setting-control'),
+			value: ConfigUtil.getConfigItem('enableSpellchecker', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('enableSpellchecker');
+				ConfigUtil.setConfigItem('enableSpellchecker', newValue);
+				this.enableSpellchecker();
+				const spellcheckerLanguageInput: HTMLElement = document.querySelector('#spellcheck-langs');
+				const spellcheckerNote: HTMLElement = document.querySelector('#note');
+				spellcheckerLanguageInput.style.display = spellcheckerLanguageInput.style.display === 'none' ? '' : 'none';
+				spellcheckerNote.style.display = spellcheckerNote.style.display === 'none' ? '' : 'none';
+			}
+		});
+	}
+
+	enableErrorReporting(): void {
+		this.generateSettingOption({
+			$element: document.querySelector('#enable-error-reporting .setting-control'),
+			value: ConfigUtil.getConfigItem('errorReporting', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('errorReporting');
+				ConfigUtil.setConfigItem('errorReporting', newValue);
+				this.enableErrorReporting();
+			}
+		});
+	}
+
+	async customCssDialog(): Promise<void> {
+		const showDialogOptions: OpenDialogOptions = {
+			title: 'Select file',
+			properties: ['openFile'],
+			filters: [{name: 'CSS file', extensions: ['css']}]
+		};
+
+		const {filePaths, canceled} = await dialog.showOpenDialog(showDialogOptions);
+		if (!canceled) {
+			ConfigUtil.setConfigItem('customCSS', filePaths[0]);
+			ipcRenderer.send('forward-message', 'hard-reload');
+		}
+	}
+
+	setLocale(): void {
+		const langDiv: HTMLSelectElement = document.querySelector('.lang-div');
+		const langListHTML = this.generateSelectHTML(supportedLocales, 'lang-menu');
+		langDiv.innerHTML += langListHTML;
+		// `langMenu` is the select-option dropdown menu formed after executing the previous command
+		const langMenu: HTMLSelectElement = document.querySelector('.lang-menu');
+
+		// The next three lines set the selected language visible on the dropdown button
+		let language = ConfigUtil.getConfigItem('appLanguage');
+		language = language && langMenu.options.namedItem(language) ? language : 'en';
+		langMenu.options.namedItem(language).selected = true;
+
+		langMenu.addEventListener('change', (event: Event) => {
+			ConfigUtil.setConfigItem('appLanguage', (event.target as HTMLSelectElement).value);
+		});
+	}
+
+	minimizeOnStart(): void {
+		this.generateSettingOption({
+			$element: document.querySelector('#start-minimize-option .setting-control'),
+			value: ConfigUtil.getConfigItem('startMinimized', false),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('startMinimized');
+				ConfigUtil.setConfigItem('startMinimized', newValue);
+				this.minimizeOnStart();
+			}
+		});
+	}
+
+	addCustomCSS(): void {
+		const customCSSButton = document.querySelector('#add-custom-css .custom-css-button');
+		customCSSButton.addEventListener('click', async () => {
+			await this.customCssDialog();
+		});
+	}
+
+	showCustomCSSPath(): void {
+		if (!ConfigUtil.getConfigItem('customCSS')) {
+			const cssPATH: HTMLElement = document.querySelector('#remove-custom-css');
+			cssPATH.style.display = 'none';
+		}
+	}
+
+	removeCustomCSS(): void {
+		const removeCSSButton = document.querySelector('#css-delete-action');
+		removeCSSButton.addEventListener('click', () => {
+			ConfigUtil.setConfigItem('customCSS', '');
+			ipcRenderer.send('forward-message', 'hard-reload');
+		});
+	}
+
+	async downloadFolderDialog(): Promise<void> {
+		const showDialogOptions: OpenDialogOptions = {
+			title: 'Select Download Location',
+			properties: ['openDirectory']
+		};
+
+		const {filePaths, canceled} = await dialog.showOpenDialog(showDialogOptions);
+		if (!canceled) {
+			ConfigUtil.setConfigItem('downloadsPath', filePaths[0]);
+			const downloadFolderPath: HTMLElement = document.querySelector('.download-folder-path');
+			downloadFolderPath.textContent = filePaths[0];
+		}
+	}
+
+	downloadFolder(): void {
+		const downloadFolder = document.querySelector('#download-folder .download-folder-button');
+		downloadFolder.addEventListener('click', async () => {
+			await this.downloadFolderDialog();
+		});
+	}
+
+	updatePromptDownloadOption(): void {
+		this.generateSettingOption({
+			$element: document.querySelector('#prompt-download .setting-control'),
+			value: ConfigUtil.getConfigItem('promptDownload', false),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('promptDownload');
+				ConfigUtil.setConfigItem('promptDownload', newValue);
+				this.updatePromptDownloadOption();
+			}
+		});
+	}
+
+	async factoryResetSettings(): Promise<void> {
+		const clearAppDataMessage = 'When the application restarts, it will be as if you have just downloaded Zulip app.';
+		const getAppPath = path.join(app.getPath('appData'), app.name);
+
+		const {response} = await dialog.showMessageBox({
+			type: 'warning',
+			buttons: ['YES', 'NO'],
+			defaultId: 0,
+			message: 'Are you sure?',
+			detail: clearAppDataMessage
+		});
+		if (response === 0) {
+			await fs.remove(getAppPath);
+			setTimeout(() => ipcRenderer.send('clear-app-settings'), 1000);
+		}
+	}
+
+	factoryReset(): void {
+		const factoryResetButton = document.querySelector('#factory-reset-option .factory-reset-button');
+		factoryResetButton.addEventListener('click', async () => {
+			await this.factoryResetSettings();
+		});
+	}
+
+	initSpellChecker(): void {
+		// The elctron API is a no-op on macOS and macOS default spellchecker is used.
+		if (process.platform === 'darwin') {
+			const note: HTMLElement = document.querySelector('#note');
+			note.append(t.__('On macOS, the OS spellchecker is used.'));
+			note.append(document.createElement('br'));
+			note.append(t.__('Change the language from System Preferences → Keyboard → Text → Spelling.'));
+		} else {
+			const note: HTMLElement = document.querySelector('#note');
+			note.append(t.__('You can select a maximum of 3 languages for spellchecking.'));
+			const spellDiv: HTMLElement = document.querySelector('#spellcheck-langs');
+			spellDiv.innerHTML += htmlEscape`
+				<div class="setting-description">${t.__('Spellchecker Languages')}</div>
+				<input name='spellcheck' placeholder='Enter Languages'>`;
+
+			const availableLanguages = session.fromPartition('persist:webviewsession').availableSpellCheckerLanguages;
+			let languagePairs: Map<string, string> = new Map();
+			availableLanguages.forEach((l: string) => {
+				if (ISO6391.validate(l)) {
+					languagePairs.set(ISO6391.getName(l), l);
+				}
+			});
+
+			// Manually set names for languages not available in ISO6391
+			languagePairs.set('English (AU)', 'en-AU');
+			languagePairs.set('English (CA)', 'en-CA');
+			languagePairs.set('English (GB)', 'en-GB');
+			languagePairs.set('English (US)', 'en-US');
+			languagePairs.set('Spanish (Latin America)', 'es-419');
+			languagePairs.set('Spanish (Argentina)', 'es-AR');
+			languagePairs.set('Spanish (Mexico)', 'es-MX');
+			languagePairs.set('Spanish (US)', 'es-US');
+			languagePairs.set('Portuguese (Brazil)', 'pt-BR');
+			languagePairs.set('Portuguese (Portugal)', 'pt-PT');
+			languagePairs.set('Serbo-Croatian', 'sh');
+
+			languagePairs = new Map([...languagePairs].sort((a, b) => ((a[0] < b[0]) ? -1 : 1)));
+
+			const tagField: HTMLElement = document.querySelector('input[name=spellcheck]');
+			const tagify = new Tagify(tagField, {
+				whitelist: [...languagePairs.keys()],
+				enforceWhitelist: true,
+				maxTags: 3,
+				dropdown: {
+					enabled: 0,
+					maxItems: Infinity,
+					closeOnSelect: false,
+					highlightFirst: true
+				}
+			});
+
+			const configuredLanguages: string[] = ConfigUtil.getConfigItem('spellcheckerLanguages').map((code: string) => [...languagePairs].find(pair => (pair[1] === code))[0]);
+			tagify.addTags(configuredLanguages);
+
+			tagField.addEventListener('change', event => {
+				if ((event.target as HTMLInputElement).value.length === 0) {
+					ConfigUtil.setConfigItem('spellcheckerLanguages', []);
+					ipcRenderer.send('set-spellcheck-langs');
+				} else {
+					const spellLangs: string[] = [...JSON.parse((event.target as HTMLInputElement).value).values()].map(elt => languagePairs.get(elt.value));
+					ConfigUtil.setConfigItem('spellcheckerLanguages', spellLangs);
+					ipcRenderer.send('set-spellcheck-langs');
+				}
+			});
+		}
+
+		// Do not display the spellchecker input and note if it is disabled
+		if (!ConfigUtil.getConfigItem('enableSpellchecker')) {
+			const spellcheckerLanguageInput: HTMLElement = document.querySelector('#spellcheck-langs');
+			const spellcheckerNote: HTMLElement = document.querySelector('#note');
+			spellcheckerLanguageInput.style.display = 'none';
+			spellcheckerNote.style.display = 'none';
+		}
+	}
+}

app/renderer/js/pages/preference/nav.js

@@ -1,67 +0,0 @@
-'use strict';
-
-const BaseComponent = require(__dirname + '/../../components/base.js');
-
-class PreferenceNav extends BaseComponent {
-	constructor(props) {
-		super();
-
-		this.props = props;
-
-		this.navItems = ['General', 'Network', 'AddServer', 'Organizations', 'Shortcuts'];
-
-		this.init();
-	}
-
-	template() {
-		let navItemsTemplate = '';
-		for (const navItem of this.navItems) {
-			navItemsTemplate += `<div class="nav" id="nav-${navItem}">${navItem}</div>`;
-		}
-
-		return `
-			<div>
-				<div id="settings-header">Settings</div>
-				<div id="nav-container">${navItemsTemplate}</div>
-			</div>
-		`;
-	}
-
-	init() {
-		this.$el = this.generateNodeFromTemplate(this.template());
-		this.props.$root.appendChild(this.$el);
-
-		this.registerListeners();
-	}
-
-	registerListeners() {
-		for (const navItem of this.navItems) {
-			const $item = document.getElementById(`nav-${navItem}`);
-			$item.addEventListener('click', () => {
-				this.props.onItemSelected(navItem);
-			});
-		}
-	}
-
-	select(navItemToSelect) {
-		for (const navItem of this.navItems) {
-			if (navItem === navItemToSelect) {
-				this.activate(navItem);
-			} else {
-				this.deactivate(navItem);
-			}
-		}
-	}
-
-	activate(navItem) {
-		const $item = document.getElementById(`nav-${navItem}`);
-		$item.classList.add('active');
-	}
-
-	deactivate(navItem) {
-		const $item = document.getElementById(`nav-${navItem}`);
-		$item.classList.remove('active');
-	}
-}
-
-module.exports = PreferenceNav;

app/renderer/js/pages/preference/nav.ts

@@ -0,0 +1,70 @@
+import {htmlEscape} from 'escape-goat';
+
+import BaseComponent from '../../components/base';
+import * as t from '../../utils/translation-util';
+
+interface PreferenceNavProps {
+	$root: Element;
+	onItemSelected: (navItem: string) => void;
+}
+
+export default class PreferenceNav extends BaseComponent {
+	props: PreferenceNavProps;
+	navItems: string[];
+	$el: Element;
+	constructor(props: PreferenceNavProps) {
+		super();
+		this.props = props;
+		this.navItems = ['General', 'Network', 'AddServer', 'Organizations', 'Shortcuts'];
+		this.init();
+	}
+
+	templateHTML(): string {
+		let navItemsHTML = '';
+		for (const navItem of this.navItems) {
+			navItemsHTML += htmlEscape`<div class="nav" id="nav-${navItem}">${t.__(navItem)}</div>`;
+		}
+
+		return htmlEscape`
+			<div>
+				<div id="settings-header">${t.__('Settings')}</div>
+				<div id="nav-container">` + navItemsHTML + htmlEscape`</div>
+			</div>
+		`;
+	}
+
+	init(): void {
+		this.$el = this.generateNodeFromHTML(this.templateHTML());
+		this.props.$root.append(this.$el);
+		this.registerListeners();
+	}
+
+	registerListeners(): void {
+		for (const navItem of this.navItems) {
+			const $item = document.querySelector(`#nav-${CSS.escape(navItem)}`);
+			$item.addEventListener('click', () => {
+				this.props.onItemSelected(navItem);
+			});
+		}
+	}
+
+	select(navItemToSelect: string): void {
+		for (const navItem of this.navItems) {
+			if (navItem === navItemToSelect) {
+				this.activate(navItem);
+			} else {
+				this.deactivate(navItem);
+			}
+		}
+	}
+
+	activate(navItem: string): void {
+		const $item = document.querySelector(`#nav-${CSS.escape(navItem)}`);
+		$item.classList.add('active');
+	}
+
+	deactivate(navItem: string): void {
+		const $item = document.querySelector(`#nav-${CSS.escape(navItem)}`);
+		$item.classList.remove('active');
+	}
+}

app/renderer/js/pages/preference/network-section.ts

@@ -1,45 +1,57 @@
-'use strict';
+import {ipcRenderer} from 'electron';
 
-const {ipcRenderer} = require('electron');
+import {htmlEscape} from 'escape-goat';
 
-const BaseSection = require(__dirname + '/base-section.js');
-const ConfigUtil = require(__dirname + '/../../utils/config-util.js');
+import * as ConfigUtil from '../../utils/config-util';
+import * as t from '../../utils/translation-util';
 
-class NetworkSection extends BaseSection {
-	constructor(props) {
+import BaseSection from './base-section';
+
+interface NetworkSectionProps {
+	$root: Element;
+}
+
+export default class NetworkSection extends BaseSection {
+	props: NetworkSectionProps;
+	$proxyPAC: HTMLInputElement;
+	$proxyRules: HTMLInputElement;
+	$proxyBypass: HTMLInputElement;
+	$proxySaveAction: Element;
+	$manualProxyBlock: Element;
+	constructor(props: NetworkSectionProps) {
 		super();
 		this.props = props;
 	}
 
-	template() {
-		return `
+	templateHTML(): string {
+		return htmlEscape`
             <div class="settings-pane">
-                <div class="title">Proxy</div>
+                <div class="title">${t.__('Proxy')}</div>
                 <div id="appearance-option-settings" class="settings-card">
 					<div class="setting-row" id="use-system-settings">
-						<div class="setting-description">Use system proxy settings (requires restart)</div>
+						<div class="setting-description">${t.__('Use system proxy settings (requires restart)')}</div>
 						<div class="setting-control"></div>
 					</div>
 					<div class="setting-row" id="use-manual-settings">
-						<div class="setting-description">Manual proxy configuration</div>
+						<div class="setting-description">${t.__('Manual proxy configuration')}</div>
 						<div class="setting-control"></div>
 					</div>
 					<div class="manual-proxy-block">
 						<div class="setting-row" id="proxy-pac-option">
-							<span class="setting-input-key">PAC script</span>
+							<span class="setting-input-key">PAC ${t.__('script')}</span>
 							<input class="setting-input-value" placeholder="e.g. foobar.com/pacfile.js"/>
 						</div>
 						<div class="setting-row" id="proxy-rules-option">
-							<span class="setting-input-key">Proxy rules</span>
+							<span class="setting-input-key">${t.__('Proxy rules')}</span>
 							<input class="setting-input-value" placeholder="e.g. http=foopy:80;ftp=foopy2"/>
 						</div>
 						<div class="setting-row" id="proxy-bypass-option">
-							<span class="setting-input-key">Proxy bypass rules</span>
+							<span class="setting-input-key">${t.__('Proxy bypass rules')}</span>
 							<input class="setting-input-value" placeholder="e.g. foobar.com"/>
 						</div>
 						<div class="setting-row">
 							<div class="action green" id="proxy-save-action">
-								<span>Save</span>
+								<span>${t.__('Save')}</span>
 							</div>
 						</div>
 					</div>
@@ -48,12 +60,12 @@ class NetworkSection extends BaseSection {
 		`;
 	}
 
-	init() {
-		this.props.$root.innerHTML = this.template();
+	init(): void {
+		this.props.$root.innerHTML = this.templateHTML();
 		this.$proxyPAC = document.querySelector('#proxy-pac-option .setting-input-value');
 		this.$proxyRules = document.querySelector('#proxy-rules-option .setting-input-value');
 		this.$proxyBypass = document.querySelector('#proxy-bypass-option .setting-input-value');
-		this.$proxySaveAction = document.getElementById('proxy-save-action');
+		this.$proxySaveAction = document.querySelector('#proxy-save-action');
 		this.$manualProxyBlock = this.props.$root.querySelector('.manual-proxy-block');
 		this.initProxyOption();
 
@@ -70,14 +82,14 @@ class NetworkSection extends BaseSection {
 		});
 	}
 
-	initProxyOption() {
+	initProxyOption(): void {
 		const manualProxyEnabled = ConfigUtil.getConfigItem('useManualProxy', false);
 		this.toggleManualProxySettings(manualProxyEnabled);
 
 		this.updateProxyOption();
 	}
 
-	toggleManualProxySettings(option) {
+	toggleManualProxySettings(option: boolean): void {
 		if (option) {
 			this.$manualProxyBlock.classList.remove('hidden');
 		} else {
@@ -85,7 +97,7 @@ class NetworkSection extends BaseSection {
 		}
 	}
 
-	updateProxyOption() {
+	updateProxyOption(): void {
 		this.generateSettingOption({
 			$element: document.querySelector('#use-system-settings .setting-control'),
 			value: ConfigUtil.getConfigItem('useSystemProxy', false),
@@ -96,11 +108,13 @@ class NetworkSection extends BaseSection {
 					ConfigUtil.setConfigItem('useManualProxy', !manualProxyValue);
 					this.toggleManualProxySettings(!manualProxyValue);
 				}
-				if (newValue === false) {
+
+				if (!newValue) {
 					// Remove proxy system proxy settings
 					ConfigUtil.setConfigItem('proxyRules', '');
 					ipcRenderer.send('forward-message', 'reload-proxy', false);
 				}
+
 				ConfigUtil.setConfigItem('useSystemProxy', newValue);
 				this.updateProxyOption();
 			}
@@ -115,6 +129,7 @@ class NetworkSection extends BaseSection {
 				if (systemProxyValue && newValue) {
 					ConfigUtil.setConfigItem('useSystemProxy', !systemProxyValue);
 				}
+
 				ConfigUtil.setConfigItem('proxyRules', '');
 				ConfigUtil.setConfigItem('useManualProxy', newValue);
 				// Reload app only when turning manual proxy off, hence !newValue
@@ -124,5 +139,3 @@ class NetworkSection extends BaseSection {
 		});
 	}
 }
-
-module.exports = NetworkSection;

app/renderer/js/pages/preference/new-server-form.js

@@ -1,89 +0,0 @@
-'use strict';
-
-const BaseComponent = require(__dirname + '/../../components/base.js');
-const DomainUtil = require(__dirname + '/../../utils/domain-util.js');
-const shell = require('electron').shell;
-
-class NewServerForm extends BaseComponent {
-	constructor(props) {
-		super();
-		this.props = props;
-	}
-
-	template() {
-		return `
-			<div class="server-input-container">
-				<div class="title">Organization URL</div>
-				<div class="add-server-info-row">
-					<input class="setting-input-value" autofocus placeholder="your-organization.zulipchat.com or zulip.your-organization.com"/>
-				</div>
-				<div class="server-center">
-					<div class="server-save-action">
-						<button id="connect">Connect</button>
-					</div>
-				</div>
-				<div class="server-center">
-				<div class="divider">
-					<hr class="left"/>OR<hr class="right" />
-				</div>
-				</div>
-				<div class="server-center">
-				<div class="server-save-action">
-					<button id="open-create-org-link">Create a new organization</button>
-			</div>
-					</div>
-			</div>
-		`;
-	}
-
-	init() {
-		this.initForm();
-		this.initActions();
-	}
-
-	initForm() {
-		this.$newServerForm = this.generateNodeFromTemplate(this.template());
-		this.$saveServerButton = this.$newServerForm.getElementsByClassName('server-save-action')[0];
-		this.props.$root.innerHTML = '';
-		this.props.$root.appendChild(this.$newServerForm);
-
-		this.$newServerUrl = this.$newServerForm.querySelectorAll('input.setting-input-value')[0];
-	}
-
-	submitFormHandler() {
-		this.$saveServerButton.children[0].innerHTML = 'Connecting...';
-		DomainUtil.checkDomain(this.$newServerUrl.value).then(serverConf => {
-			DomainUtil.addDomain(serverConf).then(() => {
-				this.props.onChange(this.props.index);
-			});
-		}, errorMessage => {
-			this.$saveServerButton.children[0].innerHTML = 'Connect';
-			alert(errorMessage);
-		});
-	}
-
-	openCreateNewOrgExternalLink() {
-		const link = 'https://zulipchat.com/new/';
-		const externalCreateNewOrgEl = document.getElementById('open-create-org-link');
-		externalCreateNewOrgEl.addEventListener('click', () => {
-			shell.openExternal(link);
-		});
-	}
-
-	initActions() {
-		this.$saveServerButton.addEventListener('click', () => {
-			this.submitFormHandler();
-		});
-		this.$newServerUrl.addEventListener('keypress', event => {
-			const EnterkeyCode = event.keyCode;
-			// Submit form when Enter key is pressed
-			if (EnterkeyCode === 13) {
-				this.submitFormHandler();
-			}
-		});
-		// open create new org link in default browser
-		this.openCreateNewOrgExternalLink();
-	}
-}
-
-module.exports = NewServerForm;

app/renderer/js/pages/preference/new-server-form.ts

@@ -0,0 +1,114 @@
+import {ipcRenderer, remote} from 'electron';
+
+import {htmlEscape} from 'escape-goat';
+
+import BaseComponent from '../../components/base';
+import * as DomainUtil from '../../utils/domain-util';
+import * as LinkUtil from '../../utils/link-util';
+import * as t from '../../utils/translation-util';
+
+const {dialog} = remote;
+
+interface NewServerFormProps {
+	$root: Element;
+	onChange: () => void;
+}
+
+export default class NewServerForm extends BaseComponent {
+	props: NewServerFormProps;
+	$newServerForm: Element;
+	$saveServerButton: HTMLButtonElement;
+	$newServerUrl: HTMLInputElement;
+	constructor(props: NewServerFormProps) {
+		super();
+		this.props = props;
+	}
+
+	templateHTML(): string {
+		return htmlEscape`
+			<div class="server-input-container">
+				<div class="title">${t.__('Organization URL')}</div>
+				<div class="add-server-info-row">
+					<input class="setting-input-value" autofocus placeholder="your-organization.zulipchat.com or zulip.your-organization.com"/>
+				</div>
+				<div class="server-center">
+					<button id="connect">${t.__('Connect')}</button>
+				</div>
+				<div class="server-center">
+					<div class="divider">
+						<hr class="left"/>${t.__('OR')}<hr class="right" />
+					</div>
+				</div>
+				<div class="server-center">
+					<button id="open-create-org-link">${t.__('Create a new organization')}</button>
+				</div>
+				<div class="server-center">
+					<div class="server-network-option">
+						<span id="open-network-settings">${t.__('Network and Proxy Settings')}</span>
+						<i class="material-icons open-network-button">open_in_new</i>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+
+	init(): void {
+		this.initForm();
+		this.initActions();
+	}
+
+	initForm(): void {
+		this.$newServerForm = this.generateNodeFromHTML(this.templateHTML());
+		this.$saveServerButton = this.$newServerForm.querySelector('#connect');
+		this.props.$root.textContent = '';
+		this.props.$root.append(this.$newServerForm);
+		this.$newServerUrl = this.$newServerForm.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
+	}
+
+	async submitFormHandler(): Promise<void> {
+		this.$saveServerButton.textContent = 'Connecting...';
+		let serverConf;
+		try {
+			serverConf = await DomainUtil.checkDomain(this.$newServerUrl.value.trim());
+		} catch (error: unknown) {
+			this.$saveServerButton.textContent = 'Connect';
+			await dialog.showMessageBox({
+				type: 'error',
+				message: error instanceof Error ?
+					`${error.name}: ${error.message}` : 'Unknown error',
+				buttons: ['OK']
+			});
+			return;
+		}
+
+		await DomainUtil.addDomain(serverConf);
+		this.props.onChange();
+	}
+
+	openCreateNewOrgExternalLink(): void {
+		const link = 'https://zulip.com/new/';
+		const externalCreateNewOrgElement = document.querySelector('#open-create-org-link');
+		externalCreateNewOrgElement.addEventListener('click', async () => {
+			await LinkUtil.openBrowser(new URL(link));
+		});
+	}
+
+	networkSettingsLink(): void {
+		const networkSettingsId = document.querySelectorAll('.server-network-option')[0];
+		networkSettingsId.addEventListener('click', () => ipcRenderer.send('forward-message', 'open-network-settings'));
+	}
+
+	initActions(): void {
+		this.$saveServerButton.addEventListener('click', async () => {
+			await this.submitFormHandler();
+		});
+		this.$newServerUrl.addEventListener('keypress', async event => {
+			if (event.key === 'Enter') {
+				await this.submitFormHandler();
+			}
+		});
+		// Open create new org link in default browser
+		this.openCreateNewOrgExternalLink();
+		this.networkSettingsLink();
+	}
+}

app/renderer/js/pages/preference/preference.ts

@@ -1,24 +1,29 @@
-'use strict';
+import {ipcRenderer} from 'electron';
 
-const BaseComponent = require(__dirname + '/js/components/base.js');
-const { ipcRenderer } = require('electron');
+import BaseComponent from '../../components/base';
+import type {DNDSettings} from '../../utils/dnd-util';
 
-const Nav = require(__dirname + '/js/pages/preference/nav.js');
-const ServersSection = require(__dirname + '/js/pages/preference/servers-section.js');
-const GeneralSection = require(__dirname + '/js/pages/preference/general-section.js');
-const NetworkSection = require(__dirname + '/js/pages/preference/network-section.js');
-const ConnectedOrgSection = require(__dirname + '/js/pages/preference/connected-org-section.js');
-const ShortcutsSection = require(__dirname + '/js/pages/preference/shortcuts-section.js');
+import ConnectedOrgSection from './connected-org-section';
+import GeneralSection from './general-section';
+import Nav from './nav';
+import NetworkSection from './network-section';
+import ServersSection from './servers-section';
+import ShortcutsSection from './shortcuts-section';
 
-class PreferenceView extends BaseComponent {
+type Section = ServersSection | GeneralSection | NetworkSection | ConnectedOrgSection | ShortcutsSection;
+
+export default class PreferenceView extends BaseComponent {
+	$sidebarContainer: Element;
+	$settingsContainer: Element;
+	nav: Nav;
+	section: Section;
 	constructor() {
 		super();
-
-		this.$sidebarContainer = document.getElementById('sidebar');
-		this.$settingsContainer = document.getElementById('settings-container');
+		this.$sidebarContainer = document.querySelector('#sidebar');
+		this.$settingsContainer = document.querySelector('#settings-container');
 	}
 
-	init() {
+	init(): void {
 		this.nav = new Nav({
 			$root: this.$sidebarContainer,
 			onItemSelected: this.handleNavigation.bind(this)
@@ -28,16 +33,17 @@ class PreferenceView extends BaseComponent {
 		this.registerIpcs();
 	}
 
-	setDefaultView() {
+	setDefaultView(): void {
 		let nav = 'General';
 		const hasTag = window.location.hash;
 		if (hasTag) {
-			nav = hasTag.substring(1);
+			nav = hasTag.slice(1);
 		}
+
 		this.handleNavigation(nav);
 	}
 
-	handleNavigation(navItem) {
+	handleNavigation(navItem: string): void {
 		this.nav.select(navItem);
 		switch (navItem) {
 			case 'AddServer': {
@@ -46,59 +52,69 @@ class PreferenceView extends BaseComponent {
 				});
 				break;
 			}
+
 			case 'General': {
 				this.section = new GeneralSection({
 					$root: this.$settingsContainer
 				});
 				break;
 			}
+
 			case 'Organizations': {
 				this.section = new ConnectedOrgSection({
 					$root: this.$settingsContainer
 				});
 				break;
 			}
+
 			case 'Network': {
 				this.section = new NetworkSection({
 					$root: this.$settingsContainer
 				});
 				break;
 			}
+
 			case 'Shortcuts': {
 				this.section = new ShortcutsSection({
 					$root: this.$settingsContainer
 				});
 				break;
 			}
+
 			default: break;
 		}
+
 		this.section.init();
 		window.location.hash = `#${navItem}`;
 	}
 
 	// Handle toggling and reflect changes in preference page
-	handleToggle(elementName, state) {
+	handleToggle(elementName: string, state: boolean): void {
 		const inputSelector = `#${elementName} .action .switch input`;
-		const input = document.querySelector(inputSelector);
+		const input: HTMLInputElement = document.querySelector(inputSelector);
 		if (input) {
 			input.checked = state;
 		}
 	}
 
-	registerIpcs() {
-		ipcRenderer.on('switch-settings-nav', (event, navItem) => {
+	registerIpcs(): void {
+		ipcRenderer.on('switch-settings-nav', (_event: Event, navItem: string) => {
 			this.handleNavigation(navItem);
 		});
 
-		ipcRenderer.on('toggle-sidebar-setting', (event, state) => {
+		ipcRenderer.on('toggle-sidebar-setting', (_event: Event, state: boolean) => {
 			this.handleToggle('sidebar-option', state);
 		});
 
-		ipcRenderer.on('toggletray', (event, state) => {
+		ipcRenderer.on('toggle-menubar-setting', (_event: Event, state: boolean) => {
+			this.handleToggle('menubar-option', state);
+		});
+
+		ipcRenderer.on('toggletray', (_event: Event, state: boolean) => {
 			this.handleToggle('tray-option', state);
 		});
 
-		ipcRenderer.on('toggle-dnd', (event, state, newSettings) => {
+		ipcRenderer.on('toggle-dnd', (_event: Event, _state: boolean, newSettings: DNDSettings) => {
 			this.handleToggle('show-notification-option', newSettings.showNotification);
 			this.handleToggle('silent-option', newSettings.silent);
 
@@ -109,7 +125,7 @@ class PreferenceView extends BaseComponent {
 	}
 }
 
-window.onload = () => {
+window.addEventListener('load', () => {
 	const preferenceView = new PreferenceView();
 	preferenceView.init();
-};
+});

app/renderer/js/pages/preference/server-info-form.js

@@ -1,82 +0,0 @@
-'use strict';
-const { dialog } = require('electron').remote;
-const { ipcRenderer } = require('electron');
-
-const BaseComponent = require(__dirname + '/../../components/base.js');
-const DomainUtil = require(__dirname + '/../../utils/domain-util.js');
-
-class ServerInfoForm extends BaseComponent {
-	constructor(props) {
-		super();
-		this.props = props;
-	}
-
-	template() {
-		return `
-			<div class="settings-card">
-				<div class="server-info-left">
-					<img class="server-info-icon" src="${this.props.server.icon}"/>
-					<div class="server-info-row">
-						<span class="server-info-alias">${this.props.server.alias}</span>
-						<i class="material-icons open-tab-button">open_in_new</i>
-					</div>
-				</div>
-				<div class="server-info-right">
-					<div class="server-info-row server-url">
-						<span class="server-url-info" title="${this.props.server.url}">${this.props.server.url}</span>
-					</div>
-					<div class="server-info-row">
-						<div class="action red server-delete-action">
-							<span>Disconnect</span>
-						</div>
-					</div>
-				</div>
-			</div>
-		`;
-	}
-
-	init() {
-		this.initForm();
-		this.initActions();
-	}
-
-	initForm() {
-		this.$serverInfoForm = this.generateNodeFromTemplate(this.template());
-		this.$serverInfoAlias = this.$serverInfoForm.getElementsByClassName('server-info-alias')[0];
-		this.$serverIcon = this.$serverInfoForm.getElementsByClassName('server-info-icon')[0];
-		this.$deleteServerButton = this.$serverInfoForm.getElementsByClassName('server-delete-action')[0];
-		this.$openServerButton = this.$serverInfoForm.getElementsByClassName('open-tab-button')[0];
-		this.props.$root.appendChild(this.$serverInfoForm);
-	}
-
-	initActions() {
-		this.$deleteServerButton.addEventListener('click', () => {
-			dialog.showMessageBox({
-				type: 'warning',
-				buttons: ['YES', 'NO'],
-				defaultId: 0,
-				message: 'Are you sure you want to disconnect this organization?'
-			}, response => {
-				if (response === 0) {
-					DomainUtil.removeDomain(this.props.index);
-					this.props.onChange(this.props.index);
-				}
-			});
-		});
-
-		this.$openServerButton.addEventListener('click', () => {
-			ipcRenderer.send('forward-message', 'switch-server-tab', this.props.index);
-		});
-
-		this.$serverInfoAlias.addEventListener('click', () => {
-			ipcRenderer.send('forward-message', 'switch-server-tab', this.props.index);
-		});
-
-		this.$serverIcon.addEventListener('click', () => {
-			ipcRenderer.send('forward-message', 'switch-server-tab', this.props.index);
-		});
-	}
-
-}
-
-module.exports = ServerInfoForm;

app/renderer/js/pages/preference/server-info-form.ts

@@ -0,0 +1,99 @@
+import {remote, ipcRenderer} from 'electron';
+
+import {htmlEscape} from 'escape-goat';
+
+import * as Messages from '../../../../resources/messages';
+import BaseComponent from '../../components/base';
+import * as DomainUtil from '../../utils/domain-util';
+import * as t from '../../utils/translation-util';
+
+const {dialog} = remote;
+
+interface ServerInfoFormProps {
+	$root: Element;
+	server: DomainUtil.ServerConf;
+	index: number;
+	onChange: () => void;
+}
+
+export default class ServerInfoForm extends BaseComponent {
+	props: ServerInfoFormProps;
+	$serverInfoForm: Element;
+	$serverInfoAlias: Element;
+	$serverIcon: Element;
+	$deleteServerButton: Element;
+	$openServerButton: Element;
+	constructor(props: ServerInfoFormProps) {
+		super();
+		this.props = props;
+	}
+
+	templateHTML(): string {
+		return htmlEscape`
+			<div class="settings-card">
+				<div class="server-info-left">
+					<img class="server-info-icon" src="${this.props.server.icon}"/>
+					<div class="server-info-row">
+						<span class="server-info-alias">${this.props.server.alias}</span>
+						<i class="material-icons open-tab-button">open_in_new</i>
+					</div>
+				</div>
+				<div class="server-info-right">
+					<div class="server-info-row server-url">
+						<span class="server-url-info" title="${this.props.server.url}">${this.props.server.url}</span>
+					</div>
+					<div class="server-info-row">
+						<div class="action red server-delete-action">
+							<span>${t.__('Disconnect')}</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+
+	init(): void {
+		this.initForm();
+		this.initActions();
+	}
+
+	initForm(): void {
+		this.$serverInfoForm = this.generateNodeFromHTML(this.templateHTML());
+		this.$serverInfoAlias = this.$serverInfoForm.querySelectorAll('.server-info-alias')[0];
+		this.$serverIcon = this.$serverInfoForm.querySelectorAll('.server-info-icon')[0];
+		this.$deleteServerButton = this.$serverInfoForm.querySelectorAll('.server-delete-action')[0];
+		this.$openServerButton = this.$serverInfoForm.querySelectorAll('.open-tab-button')[0];
+		this.props.$root.append(this.$serverInfoForm);
+	}
+
+	initActions(): void {
+		this.$deleteServerButton.addEventListener('click', async () => {
+			const {response} = await dialog.showMessageBox({
+				type: 'warning',
+				buttons: [t.__('YES'), t.__('NO')],
+				defaultId: 0,
+				message: t.__('Are you sure you want to disconnect this organization?')
+			});
+			if (response === 0) {
+				if (DomainUtil.removeDomain(this.props.index)) {
+					ipcRenderer.send('reload-full-app');
+				} else {
+					const {title, content} = Messages.orgRemovalError(DomainUtil.getDomain(this.props.index).url);
+					dialog.showErrorBox(title, content);
+				}
+			}
+		});
+
+		this.$openServerButton.addEventListener('click', () => {
+			ipcRenderer.send('forward-message', 'switch-server-tab', this.props.index);
+		});
+
+		this.$serverInfoAlias.addEventListener('click', () => {
+			ipcRenderer.send('forward-message', 'switch-server-tab', this.props.index);
+		});
+
+		this.$serverIcon.addEventListener('click', () => {
+			ipcRenderer.send('forward-message', 'switch-server-tab', this.props.index);
+		});
+	}
+}

app/renderer/js/pages/preference/servers-section.js

@@ -1,46 +0,0 @@
-'use strict';
-
-const BaseSection = require(__dirname + '/base-section.js');
-const NewServerForm = require(__dirname + '/new-server-form.js');
-
-class ServersSection extends BaseSection {
-	constructor(props) {
-		super();
-		this.props = props;
-	}
-
-	template() {
-		return `
-		<div class="add-server-modal">
-			<div class="modal-container">
-				<div class="settings-pane" id="server-settings-pane">
-					<div class="page-title">Add a Zulip organization</div>
-					<div id="new-server-container"></div>
-				</div>
-			</div>
-		</div>
-		`;
-	}
-
-	init() {
-		this.initServers();
-	}
-
-	initServers() {
-		this.props.$root.innerHTML = '';
-
-		this.props.$root.innerHTML = this.template();
-		this.$newServerContainer = document.getElementById('new-server-container');
-
-		this.initNewServerForm();
-	}
-
-	initNewServerForm() {
-		new NewServerForm({
-			$root: this.$newServerContainer,
-			onChange: this.reloadApp
-		}).init();
-	}
-}
-
-module.exports = ServersSection;

app/renderer/js/pages/preference/servers-section.ts

@@ -0,0 +1,52 @@
+import {htmlEscape} from 'escape-goat';
+
+import * as t from '../../utils/translation-util';
+
+import BaseSection from './base-section';
+import NewServerForm from './new-server-form';
+
+interface ServersSectionProps {
+	$root: Element;
+}
+
+export default class ServersSection extends BaseSection {
+	props: ServersSectionProps;
+	$newServerContainer: Element;
+	constructor(props: ServersSectionProps) {
+		super();
+		this.props = props;
+	}
+
+	templateHTML(): string {
+		return htmlEscape`
+			<div class="add-server-modal">
+				<div class="modal-container">
+					<div class="settings-pane" id="server-settings-pane">
+						<div class="page-title">${t.__('Add a Zulip organization')}</div>
+						<div id="new-server-container"></div>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+
+	init(): void {
+		this.initServers();
+	}
+
+	initServers(): void {
+		this.props.$root.textContent = '';
+
+		this.props.$root.innerHTML = this.templateHTML();
+		this.$newServerContainer = document.querySelector('#new-server-container');
+
+		this.initNewServerForm();
+	}
+
+	initNewServerForm(): void {
+		new NewServerForm({
+			$root: this.$newServerContainer,
+			onChange: this.reloadApp
+		}).init();
+	}
+}

app/renderer/js/pages/preference/shortcuts-section.js

@@ -1,338 +0,0 @@
-'use strict';
-
-const BaseSection = require(__dirname + '/base-section.js');
-const shell = require('electron').shell;
-
-class ShortcutsSection extends BaseSection {
-	constructor(props) {
-		super();
-		this.props = props;
-	}
-
-	templateMac() {
-		const userOSKey = '⌘';
-
-		return `
-            <div class="settings-pane">
-            <div class="settings-card tip"><p><b><i class="material-icons md-14">settings</i>Tip:  </b>These desktop app shortcuts extend the Zulip webapp's <span id="open-hotkeys-link"> keyboard shortcuts</span>.</p></div>
-              <div class="title">Application Shortcuts</div>
-              <div class="settings-card">
-                <table>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd><kbd>,</kbd></td>
-                    <td>Settings</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd><kbd>K</kbd></td>
-                    <td>Keyboard Shortcuts</td>
-                  </tr>
-									<tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
-                    <td>Toggle Do Not Disturb</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>D</kbd></td>
-                    <td>Reset App Settings</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd><kbd>L</kbd></td>
-                    <td>Log Out</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd><kbd>H</kbd></td>
-                    <td>Hide Zulip</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>H</kbd></td>
-                    <td>Hide Others</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd><kbd>Q</kbd></td>
-                    <td>Quit Zulip</td>
-                  </tr>
-                </table>
-                <div class="setting-control"></div>
-              </div>
-              <div class="title">Edit Shortcuts</div>
-              <div class="settings-card">
-                <table>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd><kbd>Z</kbd></td>
-                    <td>Undo</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>Z</kbd></td>
-                    <td>Redo</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd><kbd>X</kbd></td>
-                    <td>Cut</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd><kbd>C</kbd></td>
-                    <td>Copy</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd><kbd>V</kbd></td>
-                    <td>Paste</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>V</kbd></td>
-                    <td>Paste and Match Style</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd><kbd>A</kbd></td>
-                    <td>Select All</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>Control</kbd><kbd>${userOSKey}</kbd><kbd>Space</kbd></td>
-                    <td>Emoji & Symbols</td>
-                  </tr>
-                </table>
-                <div class="setting-control"></div>
-              </div>
-              <div class="title">View Shortcuts</div>
-              <div class="settings-card">
-                <table>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd><kbd>R</kbd></td>
-                    <td>Reload</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>R</kbd></td>
-                    <td>Hard Reload</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>Control</kbd><kbd>${userOSKey}</kbd><kbd>F</kbd></td>
-                    <td>Enter Full Screen</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd><kbd>+</kbd></td>
-                    <td>Zoom In</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd><kbd>-</kbd></td>
-                    <td>Zoom Out</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd><kbd>0</kbd></td>
-                    <td>Actual Size</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
-                    <td>Toggle Sidebar</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>I</kbd></td>
-                    <td>Toggle DevTools for Zulip App</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>U</kbd></td>
-                    <td>Toggle DevTools for Active Tab</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>Ctrl</kbd> + <kbd>Tab</kbd></td>
-                    <td>Switch to Next Organization</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Tab</kbd></td>
-                    <td>Switch to Previous Organization</td>
-                  </tr>
-                </table>
-                <div class="setting-control"></div>
-              </div>
-              <div class="title">History Shortcuts</div>
-              <div class="settings-card">
-                <table>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd><kbd>←</kbd></td>
-                    <td>Back</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd><kbd>→</kbd></td>
-                    <td>Forward</td>
-                  </tr>
-                </table>
-                <div class="setting-control"></div>
-              </div>
-              <div class="title">Window Shortcuts</div>
-              <div class="settings-card">
-                <table>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd><kbd>M</kbd></td>
-                    <td>Minimize</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd><kbd>W</kbd></td>
-                    <td>Close</td>
-                  </tr>
-                </table>
-                <div class="setting-control"></div>
-              </div>
-            </div>
-		`;
-	}
-
-	templateWinLin() {
-		const userOSKey = 'Ctrl';
-
-		return `
-            <div class="settings-pane">
-            <div class="settings-card tip"><p><b><i class="material-icons md-14">settings</i>Tip:  </b>These desktop app shortcuts extend the Zulip webapp's <span id="open-hotkeys-link"> keyboard shortcuts</span>.</p></div>
-              <div class="title">Application Shortcuts</div>
-              <div class="settings-card">
-                <table>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>,</kbd></td>
-                    <td>Settings</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>K</kbd></td>
-                    <td>Keyboard Shortcuts</td>
-                  </tr>
-									<tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
-                    <td>Toggle Do Not Disturb</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>L</kbd></td>
-                    <td>Log Out</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>Q</kbd></td>
-                    <td>Quit Zulip</td>
-                  </tr>
-                </table>
-                <div class="setting-control"></div>
-              </div>
-              <div class="title">Edit Shortcuts</div>
-              <div class="settings-card">
-                <table>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>Z</kbd></td>
-                    <td>Undo</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>Y</kbd></td>
-                    <td>Redo</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>X</kbd></td>
-                    <td>Cut</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>C</kbd></td>
-                    <td>Copy</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>V</kbd></td>
-                    <td>Paste</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd></td>
-                    <td>Paste and Match Style</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>A</kbd></td>
-                    <td>Select All</td>
-                  </tr>
-                </table>
-                <div class="setting-control"></div>
-              </div>
-              <div class="title">View Shortcuts</div>
-              <div class="settings-card">
-                <table>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>R</kbd></td>
-                    <td>Reload</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td>
-                    <td>Hard Reload</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>F11</kbd></td>
-                    <td>Toggle Full Screen</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>=</kbd></td>
-                    <td>Zoom In</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>-</kbd></td>
-                    <td>Zoom Out</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>0</kbd></td>
-                    <td>Actual Size</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
-                    <td>Toggle Sidebar</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
-                    <td>Toggle DevTools for Zulip App</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd></td>
-                    <td>Toggle DevTools for Active Tab</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>Tab</kbd></td>
-                    <td>Switch to Next Organization</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>Tab</kbd></td>
-                    <td>Switch to Previous Organization</td>
-                  </tr>
-                </table>
-                <div class="setting-control"></div>
-              </div>
-              <div class="title">History Shortcuts</div>
-              <div class="settings-card">
-                <table>
-                  <tr>
-                    <td><kbd>Alt</kbd> + <kbd>←</kbd></td>
-                    <td>Back</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>Alt</kbd> + <kbd>→</kbd></td>
-                    <td>Forward</td>
-                  </tr>
-                </table>
-                <div class="setting-control"></div>
-              </div>
-              <div class="title">Window Shortcuts</div>
-              <div class="settings-card">
-                <table>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>M</kbd></td>
-                    <td>Minimize</td>
-                  </tr>
-                  <tr>
-                    <td><kbd>${userOSKey}</kbd> + <kbd>W</kbd></td>
-                    <td>Close</td>
-                  </tr>
-                </table>
-                <div class="setting-control"></div>
-              </div>
-            </div>
-		`;
-	}
-
-	openHotkeysExternalLink() {
-		const link = 'https://zulipchat.com/help/keyboard-shortcuts';
-		const externalCreateNewOrgEl = document.getElementById('open-hotkeys-link');
-		externalCreateNewOrgEl.addEventListener('click', () => {
-			shell.openExternal(link);
-		});
-	}
-	init() {
-		this.props.$root.innerHTML = (process.platform === 'darwin') ?
-			this.templateMac() : this.templateWinLin();
-		this.openHotkeysExternalLink();
-	}
-}
-
-module.exports = ShortcutsSection;

app/renderer/js/pages/preference/shortcuts-section.ts

@@ -0,0 +1,348 @@
+import {htmlEscape} from 'escape-goat';
+
+import * as LinkUtil from '../../utils/link-util';
+import * as t from '../../utils/translation-util';
+
+import BaseSection from './base-section';
+
+interface ShortcutsSectionProps {
+	$root: Element;
+}
+
+export default class ShortcutsSection extends BaseSection {
+	props: ShortcutsSectionProps;
+	constructor(props: ShortcutsSectionProps) {
+		super();
+		this.props = props;
+	}
+
+	// TODO - Deduplicate templateMacHTML and templateWinLinHTML functions. In theory
+	// they both should be the same the only thing different should be the userOSKey
+	// variable but there seems to be inconsistences between both function, one has more
+	// lines though one may just be using more new lines and other thing is the use of +.
+	templateMacHTML(): string {
+		const userOSKey = '⌘';
+
+		return htmlEscape`
+						<div class="settings-pane">
+						<div class="settings-card tip"><p><b><i class="material-icons md-14">settings</i>${t.__('Tip')}:  </b>${t.__('These desktop app shortcuts extend the Zulip webapp\'s')} <span id="open-hotkeys-link"> ${t.__('keyboard shortcuts')}</span>.</p></div>
+							<div class="title">${t.__('Application Shortcuts')}</div>
+							<div class="settings-card">
+								<table>
+									<tr>
+										<td><kbd>${userOSKey}</kbd><kbd>,</kbd></td>
+										<td>${t.__('Settings')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd><kbd>K</kbd></td>
+										<td>${t.__('Keyboard Shortcuts')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
+										<td>${t.__('Toggle Do Not Disturb')}</td>
+									</tr>
+									<tr>
+										<td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>D</kbd></td>
+										<td>${t.__('Reset App Settings')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd><kbd>L</kbd></td>
+										<td>${t.__('Log Out')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd><kbd>H</kbd></td>
+										<td>${t.__('Hide Zulip')}</td>
+									</tr>
+									<tr>
+										<td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>H</kbd></td>
+										<td>${t.__('Hide Others')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd><kbd>Q</kbd></td>
+										<td>${t.__('Quit Zulip')}</td>
+									</tr>
+								</table>
+								<div class="setting-control"></div>
+							</div>
+							<div class="title">${t.__('Edit Shortcuts')}</div>
+							<div class="settings-card">
+								<table>
+									<tr>
+										<td><kbd>${userOSKey}</kbd><kbd>Z</kbd></td>
+										<td>${t.__('Undo')}</td>
+									</tr>
+									<tr>
+										<td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>Z</kbd></td>
+										<td>${t.__('Redo')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd><kbd>X</kbd></td>
+										<td>${t.__('Cut')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd><kbd>C</kbd></td>
+										<td>${t.__('Copy')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd><kbd>V</kbd></td>
+										<td>${t.__('Paste')}</td>
+									</tr>
+									<tr>
+										<td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>V</kbd></td>
+										<td>${t.__('Paste and Match Style')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd><kbd>A</kbd></td>
+										<td>${t.__('Select All')}</td>
+									</tr>
+									<tr>
+										<td><kbd>Control</kbd><kbd>${userOSKey}</kbd><kbd>Space</kbd></td>
+										<td>${t.__('Emoji & Symbols')}</td>
+									</tr>
+								</table>
+								<div class="setting-control"></div>
+							</div>
+							<div class="title">${t.__('View Shortcuts')}</div>
+							<div class="settings-card">
+								<table>
+									<tr>
+										<td><kbd>${userOSKey}</kbd><kbd>R</kbd></td>
+										<td>${t.__('Reload')}</td>
+									</tr>
+									<tr>
+										<td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>R</kbd></td>
+										<td>${t.__('Hard Reload')}</td>
+									</tr>
+									<tr>
+										<td><kbd>Control</kbd><kbd>${userOSKey}</kbd><kbd>F</kbd></td>
+										<td>${t.__('Enter Full Screen')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd><kbd>+</kbd></td>
+										<td>${t.__('Zoom In')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd><kbd>-</kbd></td>
+										<td>${t.__('Zoom Out')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd><kbd>0</kbd></td>
+										<td>${t.__('Actual Size')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
+										<td>${t.__('Toggle Sidebar')}</td>
+									</tr>
+									<tr>
+										<td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>I</kbd></td>
+										<td>${t.__('Toggle DevTools for Zulip App')}</td>
+									</tr>
+									<tr>
+										<td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>U</kbd></td>
+										<td>${t.__('Toggle DevTools for Active Tab')}</td>
+									</tr>
+									<tr>
+										<td><kbd>Ctrl</kbd> + <kbd>Tab</kbd></td>
+										<td>${t.__('Switch to Next Organization')}</td>
+									</tr>
+									<tr>
+										<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+										<td>${t.__('Switch to Previous Organization')}</td>
+									</tr>
+								</table>
+								<div class="setting-control"></div>
+							</div>
+							<div class="title">${t.__('History Shortcuts')}</div>
+							<div class="settings-card">
+								<table>
+									<tr>
+										<td><kbd>${userOSKey}</kbd><kbd>←</kbd></td>
+										<td>${t.__('Back')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd><kbd>→</kbd></td>
+										<td>${t.__('Forward')}</td>
+									</tr>
+								</table>
+								<div class="setting-control"></div>
+							</div>
+							<div class="title">Window Shortcuts</div>
+							<div class="settings-card">
+								<table>
+									<tr>
+										<td><kbd>${userOSKey}</kbd><kbd>M</kbd></td>
+										<td>${t.__('Minimize')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd><kbd>W</kbd></td>
+										<td>${t.__('Close')}</td>
+									</tr>
+								</table>
+								<div class="setting-control"></div>
+							</div>
+						</div>
+		`;
+	}
+
+	templateWinLinHTML(): string {
+		const userOSKey = 'Ctrl';
+
+		return htmlEscape`
+						<div class="settings-pane">
+						<div class="settings-card tip"><p><b><i class="material-icons md-14">settings</i>${t.__('Tip')}:  </b>${t.__('These desktop app shortcuts extend the Zulip webapp\'s')} <span id="open-hotkeys-link"> ${t.__('keyboard shortcuts')}</span>.</p></div>
+							<div class="title">${t.__('Application Shortcuts')}</div>
+							<div class="settings-card">
+								<table>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>,</kbd></td>
+										<td>${t.__('Settings')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>K</kbd></td>
+										<td>${t.__('Keyboard Shortcuts')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
+										<td>${t.__('Toggle Do Not Disturb')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>L</kbd></td>
+										<td>${t.__('Log Out')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>Q</kbd></td>
+										<td>${t.__('Quit Zulip')}</td>
+									</tr>
+								</table>
+								<div class="setting-control"></div>
+							</div>
+							<div class="title">${t.__('Edit Shortcuts')}</div>
+							<div class="settings-card">
+								<table>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>Z</kbd></td>
+										<td>${t.__('Undo')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>Y</kbd></td>
+										<td>${t.__('Redo')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>X</kbd></td>
+										<td>${t.__('Cut')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>C</kbd></td>
+										<td>${t.__('Copy')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>V</kbd></td>
+										<td>${t.__('Paste')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd></td>
+										<td>${t.__('Paste and Match Style')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>A</kbd></td>
+										<td>${t.__('Select All')}</td>
+									</tr>
+								</table>
+								<div class="setting-control"></div>
+							</div>
+							<div class="title">${t.__('View Shortcuts')}</div>
+							<div class="settings-card">
+								<table>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>R</kbd></td>
+										<td>${t.__('Reload')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td>
+										<td>${t.__('Hard Reload')}</td>
+									</tr>
+									<tr>
+										<td><kbd>F11</kbd></td>
+										<td>${t.__('Toggle Full Screen')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>=</kbd></td>
+										<td>${t.__('Zoom In')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>-</kbd></td>
+										<td>${t.__('Zoom Out')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>0</kbd></td>
+										<td>${t.__('Actual Size')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
+										<td>${t.__('Toggle Sidebar')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
+										<td>${t.__('Toggle DevTools for Zulip App')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd></td>
+										<td>${t.__('Toggle DevTools for Active Tab')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>Tab</kbd></td>
+										<td>${t.__('Switch to Next Organization')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+										<td>${t.__('Switch to Previous Organization')}</td>
+									</tr>
+								</table>
+								<div class="setting-control"></div>
+							</div>
+							<div class="title">${t.__('History Shortcuts')}</div>
+							<div class="settings-card">
+								<table>
+									<tr>
+										<td><kbd>Alt</kbd> + <kbd>←</kbd></td>
+										<td>${t.__('Back')}</td>
+									</tr>
+									<tr>
+										<td><kbd>Alt</kbd> + <kbd>→</kbd></td>
+										<td>${t.__('Forward')}</td>
+									</tr>
+								</table>
+								<div class="setting-control"></div>
+							</div>
+							<div class="title">${t.__('Window Shortcuts')}</div>
+							<div class="settings-card">
+								<table>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>M</kbd></td>
+										<td>${t.__('Minimize')}</td>
+									</tr>
+									<tr>
+										<td><kbd>${userOSKey}</kbd> + <kbd>W</kbd></td>
+										<td>${t.__('Close')}</td>
+									</tr>
+								</table>
+								<div class="setting-control"></div>
+							</div>
+						</div>
+		`;
+	}
+
+	openHotkeysExternalLink(): void {
+		const link = 'https://zulip.com/help/keyboard-shortcuts';
+		const externalCreateNewOrgElement = document.querySelector('#open-hotkeys-link');
+		externalCreateNewOrgElement.addEventListener('click', async () => {
+			await LinkUtil.openBrowser(new URL(link));
+		});
+	}
+
+	init(): void {
+		this.props.$root.innerHTML = (process.platform === 'darwin') ?
+			this.templateMacHTML() : this.templateWinLinHTML();
+		this.openHotkeysExternalLink();
+	}
+}

app/renderer/js/preload.js

@@ -1,105 +0,0 @@
-'use strict';
-
-const { ipcRenderer, shell } = require('electron');
-const SetupSpellChecker = require('./spellchecker');
-
-const ConfigUtil = require(__dirname + '/utils/config-util.js');
-const LinkUtil = require(__dirname + '/utils/link-util.js');
-const params = require(__dirname + '/utils/params-util.js');
-
-// eslint-disable-next-line import/no-unassigned-import
-require('./notification');
-
-// Prevent drag and drop event in main process which prevents remote code executaion
-require(__dirname + '/shared/preventdrag.js');
-
-// eslint-disable-next-line camelcase
-window.electron_bridge = require('./electron-bridge');
-
-const logout = () => {
-	// Create the menu for the below
-	document.querySelector('.dropdown-toggle').click();
-
-	const nodes = document.querySelectorAll('.dropdown-menu li:last-child a');
-	nodes[nodes.length - 1].click();
-};
-
-const shortcut = () => {
-	// Create the menu for the below
-	const node = document.querySelector('a[data-overlay-trigger=keyboard-shortcuts]');
-	// Additional check
-	if (node.text.trim().toLowerCase() === 'keyboard shortcuts (?)') {
-		node.click();
-	} else {
-		// Atleast click the dropdown
-		document.querySelector('.dropdown-toggle').click();
-	}
-};
-
-process.once('loaded', () => {
-	global.logout = logout;
-	global.shortcut = shortcut;
-});
-
-// To prevent failing this script on linux we need to load it after the document loaded
-document.addEventListener('DOMContentLoaded', () => {
-	if (params.isPageParams()) {
-	// Get the default language of the server
-		const serverLanguage = page_params.default_language; // eslint-disable-line no-undef, camelcase
-		if (serverLanguage) {
-			// Set spellcheker language
-			ConfigUtil.setConfigItem('spellcheckerLanguage', serverLanguage);
-			// Init spellchecker
-			SetupSpellChecker.init();
-		}
-		// redirect users to network troubleshooting page
-		const getRestartButton = document.querySelector('.restart_get_events_button');
-		if (getRestartButton) {
-			getRestartButton.addEventListener('click', () => {
-				ipcRenderer.send('forward-message', 'reload-viewer');
-			});
-		}
-		// Open image attachment link in the lightbox instead of opening in the default browser
-		const { $, lightbox } = window;
-		$('#main_div').on('click', '.message_content p a', function (e) {
-			const url = $(this).attr('href');
-
-			if (LinkUtil.isImage(url)) {
-				const $img = $(this).parent().siblings('.message_inline_image').find('img');
-
-				// prevent the image link from opening in a new page.
-				e.preventDefault();
-				// prevent the message compose dialog from happening.
-				e.stopPropagation();
-
-				// Open image in the default browser if image preview is unavailable
-				if (!$img[0]) {
-					shell.openExternal(window.location.origin + url);
-				}
-				// Open image in lightbox
-				lightbox.open($img);
-			}
-		});
-	}
-});
-
-// Clean up spellchecker events after you navigate away from this page;
-// otherwise, you may experience errors
-window.addEventListener('beforeunload', () => {
-	SetupSpellChecker.unsubscribeSpellChecker();
-});
-
-// electron's globalShortcut can cause unexpected results
-// so adding the reload shortcut in the old-school way
-// Zoom from numpad keys is not supported by electron, so adding it through listeners.
-document.addEventListener('keydown', event => {
-	if (event.code === 'F5') {
-		ipcRenderer.send('forward-message', 'hard-reload');
-	} else if (event.ctrlKey && event.code === 'NumpadAdd') {
-		ipcRenderer.send('forward-message', 'zoomIn');
-	} else if (event.ctrlKey && event.code === 'NumpadSubtract') {
-		ipcRenderer.send('forward-message', 'zoomOut');
-	} else if (event.ctrlKey && event.code === 'Numpad0') {
-		ipcRenderer.send('forward-message', 'zoomActualSize');
-	}
-});

app/renderer/js/preload.ts

@@ -0,0 +1,87 @@
+import {contextBridge, ipcRenderer, webFrame} from 'electron';
+import fs from 'fs';
+
+import electron_bridge, {bridgeEvents} from './electron-bridge';
+import * as NetworkError from './pages/network';
+
+contextBridge.exposeInMainWorld('raw_electron_bridge', electron_bridge);
+
+ipcRenderer.on('logout', () => {
+	if (bridgeEvents.emit('logout')) {
+		return;
+	}
+
+	// Create the menu for the below
+	const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
+	dropdown.click();
+
+	const nodes: NodeListOf<HTMLElement> = document.querySelectorAll('.dropdown-menu li:last-child a');
+	nodes[nodes.length - 1].click();
+});
+
+ipcRenderer.on('show-keyboard-shortcuts', () => {
+	if (bridgeEvents.emit('show-keyboard-shortcuts')) {
+		return;
+	}
+
+	// Create the menu for the below
+	const node: HTMLElement = document.querySelector('a[data-overlay-trigger=keyboard-shortcuts]');
+	// Additional check
+	if (node.textContent.trim().toLowerCase() === 'keyboard shortcuts (?)') {
+		node.click();
+	} else {
+		// Atleast click the dropdown
+		const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
+		dropdown.click();
+	}
+});
+
+ipcRenderer.on('show-notification-settings', () => {
+	if (bridgeEvents.emit('show-notification-settings')) {
+		return;
+	}
+
+	// Create the menu for the below
+	const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
+	dropdown.click();
+
+	const nodes: NodeListOf<HTMLElement> = document.querySelectorAll('.dropdown-menu li a');
+	nodes[2].click();
+
+	const notificationItem: NodeListOf<HTMLElement> = document.querySelectorAll('.normal-settings-list li div');
+
+	// Wait until the notification dom element shows up
+	setTimeout(() => {
+		notificationItem[2].click();
+	}, 100);
+});
+
+window.addEventListener('load', (event: any): void => {
+	if (!event.target.URL.includes('app/renderer/network.html')) {
+		return;
+	}
+
+	const $reconnectButton = document.querySelector('#reconnect');
+	const $settingsButton = document.querySelector('#settings');
+	NetworkError.init($reconnectButton, $settingsButton);
+});
+
+// Electron's globalShortcut can cause unexpected results
+// so adding the reload shortcut in the old-school way
+// Zoom from numpad keys is not supported by electron, so adding it through listeners.
+document.addEventListener('keydown', event => {
+	const cmdOrCtrl = event.ctrlKey || event.metaKey;
+	if (event.code === 'F5') {
+		ipcRenderer.send('forward-message', 'hard-reload');
+	} else if (cmdOrCtrl && (event.code === 'NumpadAdd' || event.code === 'Equal')) {
+		ipcRenderer.send('forward-message', 'zoomIn');
+	} else if (cmdOrCtrl && event.code === 'NumpadSubtract') {
+		ipcRenderer.send('forward-message', 'zoomOut');
+	} else if (cmdOrCtrl && event.code === 'Numpad0') {
+		ipcRenderer.send('forward-message', 'zoomActualSize');
+	}
+});
+
+(async () => webFrame.executeJavaScript(
+	fs.readFileSync(require.resolve('./injected'), 'utf8')
+))();

app/renderer/js/shared/preventdrag.js

@@ -1,17 +0,0 @@
-'use strict';
-
-// This is a security fix. Following function prevents drag and drop event in the app
-// so that attackers can't execute any remote code within the app
-// It doesn't affect the compose box so that users can still
-// use drag and drop event to share files etc
-
-const preventDragAndDrop = () => {
-	const preventEvents = ['dragover', 'drop'];
-	preventEvents.forEach(dragEvents => {
-		document.addEventListener(dragEvents, event => {
-			event.preventDefault();
-		});
-	});
-};
-
-preventDragAndDrop();

app/renderer/js/spellchecker.js

@@ -1,55 +0,0 @@
-'use strict';
-
-const { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } = require('electron-spellchecker');
-
-const ConfigUtil = require(__dirname + '/utils/config-util.js');
-const Logger = require(__dirname + '/utils/logger-util.js');
-
-const logger = new Logger({
-	file: 'errors.log',
-	timestamp: true
-});
-
-class SetupSpellChecker {
-	init() {
-		if (ConfigUtil.getConfigItem('enableSpellchecker')) {
-			this.enableSpellChecker();
-		}
-		this.enableContextMenu();
-	}
-
-	enableSpellChecker() {
-		try {
-			this.SpellCheckHandler = new SpellCheckHandler();
-		} catch (err) {
-			logger.error(err);
-		}
-	}
-
-	enableContextMenu() {
-		if (this.SpellCheckHandler) {
-			this.SpellCheckHandler.attachToInput();
-
-			const userLanguage = ConfigUtil.getConfigItem('spellcheckerLanguage');
-
-			this.SpellCheckHandler.switchLanguage(userLanguage);
-		}
-
-		const contextMenuBuilder = new ContextMenuBuilder(this.SpellCheckHandler);
-		this.contextMenuListener = new ContextMenuListener(info => {
-			contextMenuBuilder.showPopupMenu(info);
-		});
-	}
-
-	unsubscribeSpellChecker() {
-		// eslint-disable-next-line no-undef
-		if (this.SpellCheckHandler) {
-			this.SpellCheckHandler.unsubscribe();
-		}
-		if (this.contextMenuListener) {
-			this.contextMenuListener.unsubscribe();
-		}
-	}
-}
-
-module.exports = new SetupSpellChecker();

app/renderer/js/tray.js

@@ -1,217 +0,0 @@
-'use strict';
-const path = require('path');
-
-const electron = require('electron');
-
-const { ipcRenderer, remote } = electron;
-
-const { Tray, Menu, nativeImage, BrowserWindow } = remote;
-
-const APP_ICON = path.join(__dirname, '../../resources/tray', 'tray');
-
-const ConfigUtil = require(__dirname + '/utils/config-util.js');
-
-const iconPath = () => {
-	if (process.platform === 'linux') {
-		return APP_ICON + 'linux.png';
-	}
-	return APP_ICON + (process.platform === 'win32' ? 'win.ico' : 'osx.png');
-};
-
-let unread = 0;
-
-const trayIconSize = () => {
-	switch (process.platform) {
-		case 'darwin':
-			return 20;
-		case 'win32':
-			return 100;
-		case 'linux':
-			return 100;
-		default: return 80;
-	}
-};
-
-//  Default config for Icon we might make it OS specific if needed like the size
-const config = {
-	pixelRatio: window.devicePixelRatio,
-	unreadCount: 0,
-	showUnreadCount: true,
-	unreadColor: '#000000',
-	readColor: '#000000',
-	unreadBackgroundColor: '#B9FEEA',
-	readBackgroundColor: '#B9FEEA',
-	size: trayIconSize(),
-	thick: process.platform === 'win32'
-};
-
-const renderCanvas = function (arg) {
-	config.unreadCount = arg;
-
-	return new Promise(resolve => {
-		const SIZE = config.size * config.pixelRatio;
-		const PADDING = SIZE * 0.05;
-		const CENTER = SIZE / 2;
-		const HAS_COUNT = config.showUnreadCount && config.unreadCount;
-		const color = config.unreadCount ? config.unreadColor : config.readColor;
-		const backgroundColor = config.unreadCount ? config.unreadBackgroundColor : config.readBackgroundColor;
-
-		const canvas = document.createElement('canvas');
-		canvas.width = SIZE;
-		canvas.height = SIZE;
-		const ctx = canvas.getContext('2d');
-
-		// Circle
-		// If (!config.thick || config.thick && HAS_COUNT) {
-		ctx.beginPath();
-		ctx.arc(CENTER, CENTER, (SIZE / 2) - PADDING, 0, 2 * Math.PI, false);
-		ctx.fillStyle = backgroundColor;
-		ctx.fill();
-		ctx.lineWidth = SIZE / (config.thick ? 10 : 20);
-		ctx.strokeStyle = backgroundColor;
-		ctx.stroke();
-		// Count or Icon
-		if (HAS_COUNT) {
-			ctx.fillStyle = color;
-			ctx.textAlign = 'center';
-			if (config.unreadCount > 99) {
-				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.4}px Helvetica`;
-				ctx.fillText('99+', CENTER, CENTER + (SIZE * 0.15));
-			} else if (config.unreadCount < 10) {
-				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
-				ctx.fillText(config.unreadCount, CENTER, CENTER + (SIZE * 0.20));
-			} else {
-				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
-				ctx.fillText(config.unreadCount, CENTER, CENTER + (SIZE * 0.15));
-			}
-
-			resolve(canvas);
-		}
-	});
-};
-/**
- * Renders the tray icon as a native image
- * @param arg: Unread count
- * @return the native image
- */
-const renderNativeImage = function (arg) {
-	return Promise.resolve()
-		.then(() => renderCanvas(arg))
-		.then(canvas => {
-			const pngData = nativeImage.createFromDataURL(canvas.toDataURL('image/png')).toPNG();
-			return Promise.resolve(nativeImage.createFromBuffer(pngData, {
-				scaleFactor: config.pixelRatio
-			}));
-		});
-};
-
-function sendAction(action) {
-	const win = BrowserWindow.getAllWindows()[0];
-
-	if (process.platform === 'darwin') {
-		win.restore();
-	}
-
-	win.webContents.send(action);
-}
-
-const createTray = function () {
-	window.tray = new Tray(iconPath());
-	const contextMenu = Menu.buildFromTemplate([
-		{
-			label: 'Zulip',
-			click() {
-				ipcRenderer.send('focus-app');
-			}
-		},
-		{
-			label: 'Settings',
-			click() {
-				ipcRenderer.send('focus-app');
-				sendAction('open-settings');
-			}
-		},
-		{
-			type: 'separator'
-		},
-		{
-			label: 'Quit',
-			click() {
-				ipcRenderer.send('quit-app');
-			}
-		}
-	]);
-	window.tray.setContextMenu(contextMenu);
-	if (process.platform === 'linux' || process.platform === 'win32') {
-		window.tray.on('click', () => {
-			ipcRenderer.send('toggle-app');
-		});
-	}
-};
-
-ipcRenderer.on('destroytray', event => {
-	if (!window.tray) {
-		return;
-	}
-
-	window.tray.destroy();
-	if (window.tray.isDestroyed()) {
-		window.tray = null;
-	} else {
-		throw new Error('Tray icon not properly destroyed.');
-	}
-
-	return event;
-});
-
-ipcRenderer.on('tray', (event, arg) => {
-	if (!window.tray) {
-		return;
-	}
-	// We don't want to create tray from unread messages on macOS since it already has dock badges.
-	if (process.platform === 'linux' || process.platform === 'win32') {
-		if (arg === 0) {
-			unread = arg;
-			window.tray.setImage(iconPath());
-			window.tray.setToolTip('No unread messages');
-		} else {
-			unread = arg;
-			renderNativeImage(arg).then(image => {
-				window.tray.setImage(image);
-				window.tray.setToolTip(arg + ' unread messages');
-			});
-		}
-	}
-});
-
-function toggleTray() {
-	let state;
-	if (window.tray) {
-		state = false;
-		window.tray.destroy();
-		if (window.tray.isDestroyed()) {
-			window.tray = null;
-		}
-		ConfigUtil.setConfigItem('trayIcon', false);
-	} else {
-		state = true;
-		createTray();
-		if (process.platform === 'linux' || process.platform === 'win32') {
-			renderNativeImage(unread).then(image => {
-				window.tray.setImage(image);
-				window.tray.setToolTip(unread + ' unread messages');
-			});
-		}
-		ConfigUtil.setConfigItem('trayIcon', true);
-	}
-	const selector = 'webview:not([class*=disabled])';
-	const webview = document.querySelector(selector);
-	const webContents = webview.getWebContents();
-	webContents.send('toggletray', state);
-}
-
-ipcRenderer.on('toggletray', toggleTray);
-
-if (ConfigUtil.getConfigItem('trayIcon', true)) {
-	createTray();
-}

app/renderer/js/tray.ts

@@ -0,0 +1,226 @@
+import {ipcRenderer, remote, WebviewTag, NativeImage} from 'electron';
+import path from 'path';
+
+import * as ConfigUtil from './utils/config-util';
+
+const {Tray, Menu, nativeImage, BrowserWindow} = remote;
+
+let tray: Electron.Tray;
+
+const ICON_DIR = '../../resources/tray';
+
+const TRAY_SUFFIX = 'tray';
+
+const APP_ICON = path.join(__dirname, ICON_DIR, TRAY_SUFFIX);
+
+const iconPath = (): string => {
+	if (process.platform === 'linux') {
+		return APP_ICON + 'linux.png';
+	}
+
+	return APP_ICON + (process.platform === 'win32' ? 'win.ico' : 'macOSTemplate.png');
+};
+
+const winUnreadTrayIconPath = (): string => APP_ICON + 'unread.ico';
+
+let unread = 0;
+
+const trayIconSize = (): number => {
+	switch (process.platform) {
+		case 'darwin':
+			return 20;
+		case 'win32':
+			return 100;
+		case 'linux':
+			return 100;
+		default: return 80;
+	}
+};
+
+//  Default config for Icon we might make it OS specific if needed like the size
+const config = {
+	pixelRatio: window.devicePixelRatio,
+	unreadCount: 0,
+	showUnreadCount: true,
+	unreadColor: '#000000',
+	readColor: '#000000',
+	unreadBackgroundColor: '#B9FEEA',
+	readBackgroundColor: '#B9FEEA',
+	size: trayIconSize(),
+	thick: process.platform === 'win32'
+};
+
+const renderCanvas = function (arg: number): HTMLCanvasElement {
+	config.unreadCount = arg;
+
+	const SIZE = config.size * config.pixelRatio;
+	const PADDING = SIZE * 0.05;
+	const CENTER = SIZE / 2;
+	const HAS_COUNT = config.showUnreadCount && config.unreadCount;
+	const color = config.unreadCount ? config.unreadColor : config.readColor;
+	const backgroundColor = config.unreadCount ? config.unreadBackgroundColor : config.readBackgroundColor;
+
+	const canvas = document.createElement('canvas');
+	canvas.width = SIZE;
+	canvas.height = SIZE;
+	const ctx = canvas.getContext('2d');
+
+	// Circle
+	// If (!config.thick || config.thick && HAS_COUNT) {
+	ctx.beginPath();
+	ctx.arc(CENTER, CENTER, (SIZE / 2) - PADDING, 0, 2 * Math.PI, false);
+	ctx.fillStyle = backgroundColor;
+	ctx.fill();
+	ctx.lineWidth = SIZE / (config.thick ? 10 : 20);
+	ctx.strokeStyle = backgroundColor;
+	ctx.stroke();
+	// Count or Icon
+	if (HAS_COUNT) {
+		ctx.fillStyle = color;
+		ctx.textAlign = 'center';
+		if (config.unreadCount > 99) {
+			ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.4}px Helvetica`;
+			ctx.fillText('99+', CENTER, CENTER + (SIZE * 0.15));
+		} else if (config.unreadCount < 10) {
+			ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
+			ctx.fillText(String(config.unreadCount), CENTER, CENTER + (SIZE * 0.2));
+		} else {
+			ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
+			ctx.fillText(String(config.unreadCount), CENTER, CENTER + (SIZE * 0.15));
+		}
+	}
+
+	return canvas;
+};
+
+/**
+ * Renders the tray icon as a native image
+ * @param arg: Unread count
+ * @return the native image
+ */
+const renderNativeImage = function (arg: number): NativeImage {
+	if (process.platform === 'win32') {
+		return nativeImage.createFromPath(winUnreadTrayIconPath());
+	}
+
+	const canvas = renderCanvas(arg);
+	const pngData = nativeImage.createFromDataURL(canvas.toDataURL('image/png')).toPNG();
+	return nativeImage.createFromBuffer(pngData, {
+		scaleFactor: config.pixelRatio
+	});
+};
+
+function sendAction(action: string): void {
+	const win = BrowserWindow.getAllWindows()[0];
+
+	if (process.platform === 'darwin') {
+		win.restore();
+	}
+
+	win.webContents.send(action);
+}
+
+const createTray = function (): void {
+	const contextMenu = Menu.buildFromTemplate([
+		{
+			label: 'Zulip',
+			click() {
+				ipcRenderer.send('focus-app');
+			}
+		},
+		{
+			label: 'Settings',
+			click() {
+				ipcRenderer.send('focus-app');
+				sendAction('open-settings');
+			}
+		},
+		{
+			type: 'separator'
+		},
+		{
+			label: 'Quit',
+			click() {
+				ipcRenderer.send('quit-app');
+			}
+		}
+	]);
+	tray = new Tray(iconPath());
+	tray.setContextMenu(contextMenu);
+	if (process.platform === 'linux' || process.platform === 'win32') {
+		tray.on('click', () => {
+			ipcRenderer.send('toggle-app');
+		});
+	}
+};
+
+ipcRenderer.on('destroytray', (event: Event): Event => {
+	if (!tray) {
+		return undefined;
+	}
+
+	tray.destroy();
+	if (tray.isDestroyed()) {
+		tray = null;
+	} else {
+		throw new Error('Tray icon not properly destroyed.');
+	}
+
+	return event;
+});
+
+ipcRenderer.on('tray', (_event: Event, arg: number): void => {
+	if (!tray) {
+		return;
+	}
+
+	// We don't want to create tray from unread messages on macOS since it already has dock badges.
+	if (process.platform === 'linux' || process.platform === 'win32') {
+		if (arg === 0) {
+			unread = arg;
+			tray.setImage(iconPath());
+			tray.setToolTip('No unread messages');
+		} else {
+			unread = arg;
+			const image = renderNativeImage(arg);
+			tray.setImage(image);
+			tray.setToolTip(`${arg} unread messages`);
+		}
+	}
+});
+
+function toggleTray(): void {
+	let state;
+	if (tray) {
+		state = false;
+		tray.destroy();
+		if (tray.isDestroyed()) {
+			tray = null;
+		}
+
+		ConfigUtil.setConfigItem('trayIcon', false);
+	} else {
+		state = true;
+		createTray();
+		if (process.platform === 'linux' || process.platform === 'win32') {
+			const image = renderNativeImage(unread);
+			tray.setImage(image);
+			tray.setToolTip(`${unread} unread messages`);
+		}
+
+		ConfigUtil.setConfigItem('trayIcon', true);
+	}
+
+	const selector = 'webview:not([class*=disabled])';
+	const webview: WebviewTag = document.querySelector(selector);
+	const webContents = remote.webContents.fromId(webview.getWebContentsId());
+	webContents.send('toggletray', state);
+}
+
+ipcRenderer.on('toggletray', toggleTray);
+
+if (ConfigUtil.getConfigItem('trayIcon', true)) {
+	createTray();
+}
+
+export {};

app/renderer/js/utils/certificate-util.js

@@ -1,86 +0,0 @@
-'use strict';
-
-const { app, dialog } = require('electron').remote;
-const fs = require('fs');
-const path = require('path');
-const JsonDB = require('node-json-db');
-const Logger = require('./logger-util');
-const { initSetUp } = require('./default-util');
-
-initSetUp();
-
-const logger = new Logger({
-	file: `certificate-util.log`,
-	timestamp: true
-});
-
-let instance = null;
-const certificatesDir = `${app.getPath('userData')}/certificates`;
-
-class CertificateUtil {
-	constructor() {
-		if (instance) {
-			return instance;
-		} else {
-			instance = this;
-		}
-
-		this.reloadDB();
-		return instance;
-	}
-	getCertificate(server, defaultValue = null) {
-		this.reloadDB();
-		const value = this.db.getData('/')[server];
-		if (value === undefined) {
-			return defaultValue;
-		} else {
-			return value;
-		}
-	}
-	// Function to copy the certificate to userData folder
-	copyCertificate(server, location, fileName) {
-		let copied = false;
-		const filePath = `${certificatesDir}/${fileName}`;
-		try {
-			fs.copyFileSync(location, filePath);
-			copied = true;
-		} catch (err) {
-			dialog.showErrorBox(
-				'Error saving certificate',
-				'We encountered error while saving the certificate.'
-			);
-			logger.error('Error while copying the certificate to certificates folder.');
-			logger.error(err);
-		}
-		return copied;
-	}
-	setCertificate(server, fileName) {
-		const filePath = `${certificatesDir}/${fileName}`;
-		this.db.push(`/${server}`, filePath, true);
-		this.reloadDB();
-	}
-	removeCertificate(server) {
-		this.db.delete(`/${server}`);
-		this.reloadDB();
-	}
-	reloadDB() {
-		const settingsJsonPath = path.join(app.getPath('userData'), '/config/certificates.json');
-		try {
-			const file = fs.readFileSync(settingsJsonPath, 'utf8');
-			JSON.parse(file);
-		} catch (err) {
-			if (fs.existsSync(settingsJsonPath)) {
-				fs.unlinkSync(settingsJsonPath);
-				dialog.showErrorBox(
-					'Error saving settings',
-					'We encountered error while saving the certificate.'
-				);
-				logger.error('Error while JSON parsing certificates.json: ');
-				logger.error(err);
-			}
-		}
-		this.db = new JsonDB(settingsJsonPath, true, true);
-	}
-}
-
-module.exports = new CertificateUtil();

app/renderer/js/utils/common-util.js

@@ -1,25 +0,0 @@
-'use strict';
-
-let instance = null;
-
-class CommonUtil {
-	constructor() {
-		if (instance) {
-			return instance;
-		} else {
-			instance = this;
-		}
-		return instance;
-	}
-
-	// unescape already encoded/escaped strings
-	decodeString(string) {
-		const parser = new DOMParser();
-		const dom = parser.parseFromString(
-			'<!doctype html><body>' + string,
-			'text/html');
-		return dom.body.textContent;
-	}
-}
-
-module.exports = new CommonUtil();

app/renderer/js/utils/config-util.js

@@ -1,99 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const process = require('process');
-const JsonDB = require('node-json-db');
-const Logger = require('./logger-util');
-
-const logger = new Logger({
-	file: 'config-util.log',
-	timestamp: true
-});
-
-let instance = null;
-let dialog = null;
-let app = null;
-
-/* To make the util runnable in both main and renderer process */
-if (process.type === 'renderer') {
-	const remote = require('electron').remote;
-	dialog = remote.dialog;
-	app = remote.app;
-} else {
-	const electron = require('electron');
-	dialog = electron.dialog;
-	app = electron.app;
-}
-
-class ConfigUtil {
-	constructor() {
-		if (instance) {
-			return instance;
-		} else {
-			instance = this;
-		}
-
-		this.reloadDB();
-		return instance;
-	}
-
-	getConfigItem(key, defaultValue = null) {
-		try {
-			this.db.reload();
-		} catch (err) {
-			logger.error('Error while reloading settings.json: ');
-			logger.error(err);
-		}
-		const value = this.db.getData('/')[key];
-		if (value === undefined) {
-			this.setConfigItem(key, defaultValue);
-			return defaultValue;
-		} else {
-			return value;
-		}
-	}
-	// This function returns whether a key exists in the configuration file (settings.json)
-	isConfigItemExists(key) {
-		try {
-			this.db.reload();
-		} catch (err) {
-			logger.error('Error while reloading settings.json: ');
-			logger.error(err);
-		}
-		const value = this.db.getData('/')[key];
-		return (value !== undefined);
-	}
-
-	setConfigItem(key, value) {
-		this.db.push(`/${key}`, value, true);
-		this.db.save();
-	}
-
-	removeConfigItem(key) {
-		this.db.delete(`/${key}`);
-		this.db.save();
-	}
-
-	reloadDB() {
-		const settingsJsonPath = path.join(app.getPath('userData'), '/config/settings.json');
-		try {
-			const file = fs.readFileSync(settingsJsonPath, 'utf8');
-			JSON.parse(file);
-		} catch (err) {
-			if (fs.existsSync(settingsJsonPath)) {
-				fs.unlinkSync(settingsJsonPath);
-				dialog.showErrorBox(
-					'Error saving settings',
-					'We encountered an error while saving the settings.'
-				);
-				logger.error('Error while JSON parsing settings.json: ');
-				logger.error(err);
-				logger.reportSentry(err);
-			}
-		}
-		this.db = new JsonDB(settingsJsonPath, true, true);
-	}
-}
-
-module.exports = new ConfigUtil();

app/renderer/js/utils/config-util.ts

@@ -0,0 +1,106 @@
+import electron from 'electron';
+import fs from 'fs';
+import path from 'path';
+
+import {JsonDB} from 'node-json-db';
+
+import * as EnterpriseUtil from './enterprise-util';
+import Logger from './logger-util';
+
+const logger = new Logger({
+	file: 'config-util.log',
+	timestamp: true
+});
+
+let dialog: Electron.Dialog = null;
+let app: Electron.App = null;
+
+/* To make the util runnable in both main and renderer process */
+if (process.type === 'renderer') {
+	const {remote} = electron;
+	dialog = remote.dialog;
+	app = remote.app;
+} else {
+	dialog = electron.dialog;
+	app = electron.app;
+}
+
+let db: JsonDB;
+
+reloadDB();
+
+export function getConfigItem(key: string, defaultValue: unknown = null): any {
+	try {
+		db.reload();
+	} catch (error: unknown) {
+		logger.error('Error while reloading settings.json: ');
+		logger.error(error);
+	}
+
+	const value = db.getData('/')[key];
+	if (value === undefined) {
+		setConfigItem(key, defaultValue);
+		return defaultValue;
+	}
+
+	return value;
+}
+
+export function getConfigString(key: string, defaultValue: string): string {
+	const value = getConfigItem(key, defaultValue);
+	if (typeof value === 'string') {
+		return value;
+	}
+
+	setConfigItem(key, defaultValue);
+	return defaultValue;
+}
+
+// This function returns whether a key exists in the configuration file (settings.json)
+export function isConfigItemExists(key: string): boolean {
+	try {
+		db.reload();
+	} catch (error: unknown) {
+		logger.error('Error while reloading settings.json: ');
+		logger.error(error);
+	}
+
+	const value = db.getData('/')[key];
+	return (value !== undefined);
+}
+
+export function setConfigItem(key: string, value: unknown, override? : boolean): void {
+	if (EnterpriseUtil.configItemExists(key) && !override) {
+		// If item is in global config and we're not trying to override
+		return;
+	}
+
+	db.push(`/${key}`, value, true);
+	db.save();
+}
+
+export function removeConfigItem(key: string): void {
+	db.delete(`/${key}`);
+	db.save();
+}
+
+function reloadDB(): void {
+	const settingsJsonPath = path.join(app.getPath('userData'), '/config/settings.json');
+	try {
+		const file = fs.readFileSync(settingsJsonPath, 'utf8');
+		JSON.parse(file);
+	} catch (error: unknown) {
+		if (fs.existsSync(settingsJsonPath)) {
+			fs.unlinkSync(settingsJsonPath);
+			dialog.showErrorBox(
+				'Error saving settings',
+				'We encountered an error while saving the settings.'
+			);
+			logger.error('Error while JSON parsing settings.json: ');
+			logger.error(error);
+			logger.reportSentry(error);
+		}
+	}
+
+	db = new JsonDB(settingsJsonPath, true, true);
+}

app/renderer/js/utils/default-util.ts

@@ -1,19 +1,14 @@
-const fs = require('fs');
+import electron from 'electron';
+import fs from 'fs';
 
-let app = null;
+const app = process.type === 'renderer' ? electron.remote.app : electron.app;
 let setupCompleted = false;
-if (process.type === 'renderer') {
-	app = require('electron').remote.app;
-} else {
-	app = require('electron').app;
-}
 
 const zulipDir = app.getPath('userData');
 const logDir = `${zulipDir}/Logs/`;
-const certificatesDir = `${zulipDir}/certificates/`;
 const configDir = `${zulipDir}/config/`;
-const initSetUp = () => {
-	// if it is the first time the app is running
+export const initSetUp = (): void => {
+	// If it is the first time the app is running
 	// create zulip dir in userData folder to
 	// avoid errors
 	if (!setupCompleted) {
@@ -25,35 +20,26 @@ const initSetUp = () => {
 			fs.mkdirSync(logDir);
 		}
 
-		if (!fs.existsSync(certificatesDir)) {
-			fs.mkdirSync(certificatesDir);
-		}
-
 		// Migrate config files from app data folder to config folder inside app
 		// data folder. This will be done once when a user updates to the new version.
 		if (!fs.existsSync(configDir)) {
 			fs.mkdirSync(configDir);
 			const domainJson = `${zulipDir}/domain.json`;
-			const certificatesJson = `${zulipDir}/certificates.json`;
 			const settingsJson = `${zulipDir}/settings.json`;
 			const updatesJson = `${zulipDir}/updates.json`;
 			const windowStateJson = `${zulipDir}/window-state.json`;
 			const configData = [
 				{
 					path: domainJson,
-					fileName: `domain.json`
-				},
-				{
-					path: certificatesJson,
-					fileName: `certificates.json`
+					fileName: 'domain.json'
 				},
 				{
 					path: settingsJson,
-					fileName: `settings.json`
+					fileName: 'settings.json'
 				},
 				{
 					path: updatesJson,
-					fileName: `updates.json`
+					fileName: 'updates.json'
 				}
 			];
 			configData.forEach(data => {
@@ -62,7 +48,7 @@ const initSetUp = () => {
 					fs.unlinkSync(data.path);
 				}
 			});
-			// window-state.json is only deleted not moved, as the electron-window-state
+			// `window-state.json` is only deleted not moved, as the electron-window-state
 			// package will recreate the file in the config folder.
 			if (fs.existsSync(windowStateJson)) {
 				fs.unlinkSync(windowStateJson);
@@ -72,7 +58,3 @@ const initSetUp = () => {
 		setupCompleted = true;
 	}
 };
-
-module.exports = {
-	initSetUp
-};

app/renderer/js/utils/dnd-util.ts

@@ -1,17 +1,28 @@
-'use strict';
+import * as ConfigUtil from './config-util';
 
-const ConfigUtil = require(__dirname + '/config-util.js');
+type SettingName = 'showNotification' | 'silent' | 'flashTaskbarOnMessage';
 
-function toggle() {
+export interface DNDSettings {
+	showNotification?: boolean;
+	silent?: boolean;
+	flashTaskbarOnMessage?: boolean;
+}
+
+interface Toggle {
+	dnd: boolean;
+	newSettings: DNDSettings;
+}
+
+export function toggle(): Toggle {
 	const dnd = !ConfigUtil.getConfigItem('dnd', false);
-	const dndSettingList = ['showNotification', 'silent'];
+	const dndSettingList: SettingName[] = ['showNotification', 'silent'];
 	if (process.platform === 'win32') {
 		dndSettingList.push('flashTaskbarOnMessage');
 	}
 
-	let newSettings;
+	let newSettings: DNDSettings;
 	if (dnd) {
-		const oldSettings = {};
+		const oldSettings: DNDSettings = {};
 		newSettings = {};
 
 		// Iterate through the dndSettingList.
@@ -35,7 +46,3 @@ function toggle() {
 	ConfigUtil.setConfigItem('dnd', dnd);
 	return {dnd, newSettings};
 }
-
-module.exports = {
-	toggle
-};

app/renderer/js/utils/domain-util.js

@@ -1,319 +0,0 @@
-'use strict';
-
-const { app, dialog } = require('electron').remote;
-const fs = require('fs');
-const path = require('path');
-const JsonDB = require('node-json-db');
-const request = require('request');
-const escape = require('escape-html');
-
-const Logger = require('./logger-util');
-
-const RequestUtil = require(__dirname + '/../utils/request-util.js');
-
-const logger = new Logger({
-	file: `domain-util.log`,
-	timestamp: true
-});
-
-let instance = null;
-
-const defaultIconUrl = '../renderer/img/icon.png';
-
-class DomainUtil {
-	constructor() {
-		if (instance) {
-			return instance;
-		} else {
-			instance = this;
-		}
-
-		this.reloadDB();
-		// Migrate from old schema
-		if (this.db.getData('/').domain) {
-			this.addDomain({
-				alias: 'Zulip',
-				url: this.db.getData('/domain')
-			});
-			this.db.delete('/domain');
-		}
-
-		return instance;
-	}
-
-	getDomains() {
-		this.reloadDB();
-		if (this.db.getData('/').domains === undefined) {
-			return [];
-		} else {
-			return this.db.getData('/domains');
-		}
-	}
-
-	getDomain(index) {
-		this.reloadDB();
-		return this.db.getData(`/domains[${index}]`);
-	}
-
-	updateDomain(index, server) {
-		this.reloadDB();
-		this.db.push(`/domains[${index}]`, server, true);
-	}
-
-	addDomain(server) {
-		const ignoreCerts = server.ignoreCerts;
-		return new Promise(resolve => {
-			if (server.icon) {
-				this.saveServerIcon(server, ignoreCerts).then(localIconUrl => {
-					server.icon = localIconUrl;
-					this.db.push('/domains[]', server, true);
-					this.reloadDB();
-					resolve();
-				});
-			} else {
-				server.icon = defaultIconUrl;
-				this.db.push('/domains[]', server, true);
-				this.reloadDB();
-				resolve();
-			}
-		});
-	}
-
-	removeDomains() {
-		this.db.delete('/domains');
-		this.reloadDB();
-	}
-
-	removeDomain(index) {
-		this.db.delete(`/domains[${index}]`);
-		this.reloadDB();
-	}
-
-	// Check if domain is already added
-	duplicateDomain(domain) {
-		domain = this.formatUrl(domain);
-		const servers = this.getDomains();
-		for (const i in servers) {
-			if (servers[i].url === domain) {
-				return true;
-			}
-		}
-		return false;
-	}
-
-	// ignoreCerts parameter helps in fetching server icon and
-	// other server details when user chooses to ignore certificate warnings
-	checkDomain(domain, ignoreCerts = false, silent = false) {
-		if (!silent && this.duplicateDomain(domain)) {
-			// Do not check duplicate in silent mode
-			return Promise.reject('This server has been added.');
-		}
-
-		domain = this.formatUrl(domain);
-		const checkDomain = {
-			url: domain + '/static/audio/zulip.ogg',
-			...RequestUtil.requestOptions(domain, ignoreCerts)
-		};
-
-		const serverConf = {
-			icon: defaultIconUrl,
-			url: domain,
-			alias: domain,
-			ignoreCerts
-		};
-
-		return new Promise((resolve, reject) => {
-			request(checkDomain, (error, response) => {
-				// If the domain contains following strings we just bypass the server
-				const whitelistDomains = [
-					'zulipdev.org'
-				];
-
-				// make sure that error is an error or string not undefined
-				// so validation does not throw error.
-				error = error || '';
-
-				const certsError = error.toString().includes('certificate');
-				if (!error && response.statusCode < 400) {
-					// Correct
-					this.getServerSettings(domain, serverConf.ignoreCerts).then(serverSettings => {
-						resolve(serverSettings);
-					}, () => {
-						resolve(serverConf);
-					});
-				} else if (domain.indexOf(whitelistDomains) >= 0 || certsError) {
-					if (silent) {
-						this.getServerSettings(domain, serverConf.ignoreCerts).then(serverSettings => {
-							resolve(serverSettings);
-						}, () => {
-							resolve(serverConf);
-						});
-					} else {
-						// Report error to sentry to get idea of possible certificate errors
-						// users get when adding the servers
-						logger.reportSentry(new Error(error));
-						const certErrorMessage = `Do you trust certificate from ${domain}? \n ${error}`;
-						const certErrorDetail = `The organization you're connecting to is either someone impersonating the Zulip server you entered, or the server you're trying to connect to is configured in an insecure way.
-						\nIf you have a valid certificate please add it from Settings>Organizations and try to add the organization again.
-						\nUnless you have a good reason to believe otherwise, you should not proceed.
-						\nYou can click here if you'd like to proceed with the connection.`;
-
-						dialog.showMessageBox({
-							type: 'warning',
-							buttons: ['Yes', 'No'],
-							defaultId: 1,
-							message: certErrorMessage,
-							detail: certErrorDetail
-						}, response => {
-							if (response === 0) {
-								// set ignoreCerts parameter to true in case user responds with yes
-								serverConf.ignoreCerts = true;
-								this.getServerSettings(domain, serverConf.ignoreCerts).then(serverSettings => {
-									resolve(serverSettings);
-								}, () => {
-									resolve(serverConf);
-								});
-							} else {
-								reject('Untrusted Certificate.');
-							}
-						});
-					}
-				} else {
-					const invalidZulipServerError = `${domain} does not appear to be a valid Zulip server. Make sure that \
-					\n (1) you can connect to that URL in a web browser and \n (2) if you need a proxy to connect to the Internet, that you've configured your proxy in the Network settings \n (3) its a zulip server \
-					\n (4) the server has a valid certificate, you can add custom certificates in Settings>Organizations`;
-					reject(invalidZulipServerError);
-				}
-			});
-		});
-	}
-
-	getServerSettings(domain, ignoreCerts = false) {
-		const serverSettingsOptions = {
-			url: domain + '/api/v1/server_settings',
-			...RequestUtil.requestOptions(domain, ignoreCerts)
-		};
-
-		return new Promise((resolve, reject) => {
-			request(serverSettingsOptions, (error, response) => {
-				if (!error && response.statusCode === 200) {
-					const data = JSON.parse(response.body);
-					if (data.hasOwnProperty('realm_icon') && data.realm_icon) {
-						resolve({
-							// Some Zulip Servers use absolute URL for server icon whereas others use relative URL
-							// Following check handles both the cases
-							icon: data.realm_icon.startsWith('/') ? data.realm_uri + data.realm_icon : data.realm_icon,
-							url: data.realm_uri,
-							alias: escape(data.realm_name),
-							ignoreCerts
-						});
-					}
-				} else {
-					reject('Zulip server version < 1.6.');
-				}
-			});
-		});
-	}
-
-	saveServerIcon(server, ignoreCerts = false) {
-		const url = server.icon;
-		const domain = server.url;
-
-		const serverIconOptions = {
-			url,
-			...RequestUtil.requestOptions(domain, ignoreCerts)
-		};
-
-		// The save will always succeed. If url is invalid, downgrade to default icon.
-		return new Promise(resolve => {
-			const filePath = this.generateFilePath(url);
-			const file = fs.createWriteStream(filePath);
-			try {
-				request(serverIconOptions).on('response', response => {
-					response.on('error', err => {
-						logger.log('Could not get server icon.');
-						logger.log(err);
-						logger.reportSentry(err);
-						resolve(defaultIconUrl);
-					});
-					response.pipe(file).on('finish', () => {
-						resolve(filePath);
-					});
-				}).on('error', err => {
-					logger.log('Could not get server icon.');
-					logger.log(err);
-					logger.reportSentry(err);
-					resolve(defaultIconUrl);
-				});
-			} catch (err) {
-				logger.log('Could not get server icon.');
-				logger.log(err);
-				logger.reportSentry(err);
-				resolve(defaultIconUrl);
-			}
-		});
-	}
-
-	updateSavedServer(url, index) {
-		// Does not promise successful update
-		const ignoreCerts = this.getDomain(index).ignoreCerts;
-		this.checkDomain(url, ignoreCerts, true).then(newServerConf => {
-			this.saveServerIcon(newServerConf, ignoreCerts).then(localIconUrl => {
-				newServerConf.icon = localIconUrl;
-				this.updateDomain(index, newServerConf);
-				this.reloadDB();
-			});
-		});
-	}
-
-	reloadDB() {
-		const domainJsonPath = path.join(app.getPath('userData'), 'config/domain.json');
-		try {
-			const file = fs.readFileSync(domainJsonPath, 'utf8');
-			JSON.parse(file);
-		} catch (err) {
-			if (fs.existsSync(domainJsonPath)) {
-				fs.unlinkSync(domainJsonPath);
-				dialog.showErrorBox(
-					'Error saving new organization',
-					'There seems to be error while saving new organization, ' +
-					'you may have to re-add your previous organizations back.'
-				);
-				logger.error('Error while JSON parsing domain.json: ');
-				logger.error(err);
-				logger.reportSentry(err);
-			}
-		}
-		this.db = new JsonDB(domainJsonPath, true, true);
-	}
-
-	generateFilePath(url) {
-		const dir = `${app.getPath('userData')}/server-icons`;
-		const extension = path.extname(url).split('?')[0];
-
-		let hash = 5381;
-		let len = url.length;
-
-		while (len) {
-			hash = (hash * 33) ^ url.charCodeAt(--len);
-		}
-
-		// Create 'server-icons' directory if not existed
-		if (!fs.existsSync(dir)) {
-			fs.mkdirSync(dir);
-		}
-
-		return `${dir}/${hash >>> 0}${extension}`;
-	}
-
-	formatUrl(domain) {
-		const hasPrefix = (domain.indexOf('http') === 0);
-		if (hasPrefix) {
-			return domain;
-		} else {
-			return (domain.indexOf('localhost:') >= 0) ? `http://${domain}` : `https://${domain}`;
-		}
-	}
-}
-
-module.exports = new DomainUtil();

app/renderer/js/utils/domain-util.ts

@@ -0,0 +1,167 @@
+import {remote, ipcRenderer} from 'electron';
+import fs from 'fs';
+import path from 'path';
+
+import {JsonDB} from 'node-json-db';
+
+import * as Messages from '../../../resources/messages';
+
+import * as EnterpriseUtil from './enterprise-util';
+import Logger from './logger-util';
+
+const {app, dialog} = remote;
+
+export interface ServerConf {
+	url: string;
+	alias?: string;
+	icon?: string;
+}
+
+const logger = new Logger({
+	file: 'domain-util.log',
+	timestamp: true
+});
+
+const defaultIconUrl = '../renderer/img/icon.png';
+
+let db: JsonDB;
+
+reloadDB();
+// Migrate from old schema
+if (db.getData('/').domain) {
+	(async () => {
+		await addDomain({
+			alias: 'Zulip',
+			url: db.getData('/domain')
+		});
+		db.delete('/domain');
+	})();
+}
+
+export function getDomains(): ServerConf[] {
+	reloadDB();
+	if (db.getData('/').domains === undefined) {
+		return [];
+	}
+
+	return db.getData('/domains');
+}
+
+export function getDomain(index: number): ServerConf {
+	reloadDB();
+	return db.getData(`/domains[${index}]`);
+}
+
+export function updateDomain(index: number, server: ServerConf): void {
+	reloadDB();
+	db.push(`/domains[${index}]`, server, true);
+}
+
+export async function addDomain(server: ServerConf): Promise<void> {
+	if (server.icon) {
+		const localIconUrl = await saveServerIcon(server);
+		server.icon = localIconUrl;
+		db.push('/domains[]', server, true);
+		reloadDB();
+	} else {
+		server.icon = defaultIconUrl;
+		db.push('/domains[]', server, true);
+		reloadDB();
+	}
+}
+
+export function removeDomains(): void {
+	db.delete('/domains');
+	reloadDB();
+}
+
+export function removeDomain(index: number): boolean {
+	if (EnterpriseUtil.isPresetOrg(getDomain(index).url)) {
+		return false;
+	}
+
+	db.delete(`/domains[${index}]`);
+	reloadDB();
+	return true;
+}
+
+// Check if domain is already added
+export function duplicateDomain(domain: string): boolean {
+	domain = formatUrl(domain);
+	return getDomains().some(server => server.url === domain);
+}
+
+export async function checkDomain(domain: string, silent = false): Promise<ServerConf> {
+	if (!silent && duplicateDomain(domain)) {
+		// Do not check duplicate in silent mode
+		throw new Error('This server has been added.');
+	}
+
+	domain = formatUrl(domain);
+
+	try {
+		return await getServerSettings(domain);
+	} catch {
+		throw new Error(Messages.invalidZulipServerError(domain));
+	}
+}
+
+async function getServerSettings(domain: string): Promise<ServerConf> {
+	return ipcRenderer.invoke('get-server-settings', domain);
+}
+
+export async function saveServerIcon(server: ServerConf): Promise<string> {
+	return ipcRenderer.invoke('save-server-icon', server.icon);
+}
+
+export async function updateSavedServer(url: string, index: number): Promise<void> {
+	// Does not promise successful update
+	const oldIcon = getDomain(index).icon;
+	try {
+		const newServerConf = await checkDomain(url, true);
+		const localIconUrl = await saveServerIcon(newServerConf);
+		if (!oldIcon || localIconUrl !== '../renderer/img/icon.png') {
+			newServerConf.icon = localIconUrl;
+			updateDomain(index, newServerConf);
+			reloadDB();
+		}
+	} catch (error: unknown) {
+		logger.log('Could not update server icon.');
+		logger.log(error);
+		logger.reportSentry(error);
+	}
+}
+
+function reloadDB(): void {
+	const domainJsonPath = path.join(app.getPath('userData'), 'config/domain.json');
+	try {
+		const file = fs.readFileSync(domainJsonPath, 'utf8');
+		JSON.parse(file);
+	} catch (error: unknown) {
+		if (fs.existsSync(domainJsonPath)) {
+			fs.unlinkSync(domainJsonPath);
+			dialog.showErrorBox(
+				'Error saving new organization',
+				'There seems to be error while saving new organization, ' +
+				'you may have to re-add your previous organizations back.'
+			);
+			logger.error('Error while JSON parsing domain.json: ');
+			logger.error(error);
+			logger.reportSentry(error);
+		}
+	}
+
+	db = new JsonDB(domainJsonPath, true, true);
+}
+
+export function formatUrl(domain: string): string {
+	if (domain.startsWith('http://') || domain.startsWith('https://')) {
+		return domain;
+	}
+
+	if (domain.startsWith('localhost:')) {
+		return `http://${domain}`;
+	}
+
+	return `https://${domain}`;
+}

app/renderer/js/utils/enterprise-util.ts

@@ -0,0 +1,81 @@
+import fs from 'fs';
+import path from 'path';
+
+import Logger from './logger-util';
+
+const logger = new Logger({
+	file: 'enterprise-util.log',
+	timestamp: true
+});
+
+// TODO: replace enterpriseSettings type with an interface once settings are final
+let enterpriseSettings: Record<string, unknown>;
+let configFile: boolean;
+
+reloadDB();
+
+function reloadDB(): void {
+	let enterpriseFile = '/etc/zulip-desktop-config/global_config.json';
+	if (process.platform === 'win32') {
+		enterpriseFile = 'C:\\Program Files\\Zulip-Desktop-Config\\global_config.json';
+	}
+
+	enterpriseFile = path.resolve(enterpriseFile);
+	if (fs.existsSync(enterpriseFile)) {
+		configFile = true;
+		try {
+			const file = fs.readFileSync(enterpriseFile, 'utf8');
+			enterpriseSettings = JSON.parse(file);
+		} catch (error: unknown) {
+			logger.log('Error while JSON parsing global_config.json: ');
+			logger.log(error);
+		}
+	} else {
+		configFile = false;
+	}
+}
+
+export function hasConfigFile(): boolean {
+	return configFile;
+}
+
+export function getConfigItem(key: string, defaultValue?: unknown): any {
+	reloadDB();
+	if (!configFile) {
+		return defaultValue;
+	}
+
+	if (defaultValue === undefined) {
+		defaultValue = null;
+	}
+
+	return configItemExists(key) ? enterpriseSettings[key] : defaultValue;
+}
+
+export function configItemExists(key: string): boolean {
+	reloadDB();
+	if (!configFile) {
+		return false;
+	}
+
+	return (enterpriseSettings[key] !== undefined);
+}
+
+export function isPresetOrg(url: string): boolean {
+	if (!configFile || !configItemExists('presetOrganizations')) {
+		return false;
+	}
+
+	const presetOrgs = enterpriseSettings.presetOrganizations;
+	if (!Array.isArray(presetOrgs)) {
+		throw new TypeError('Expected array for presetOrgs');
+	}
+
+	for (const org of presetOrgs) {
+		if (url.includes(org)) {
+			return true;
+		}
+	}
+
+	return false;
+}

app/renderer/js/utils/link-util.js

@@ -1,45 +0,0 @@
-'use strict';
-
-const wurl = require('wurl');
-
-let instance = null;
-
-class LinkUtil {
-	constructor() {
-		if (instance) {
-			return instance;
-		} else {
-			instance = this;
-		}
-
-		return instance;
-	}
-
-	isInternal(currentUrl, newUrl) {
-		const currentDomain = wurl('hostname', currentUrl);
-		const newDomain = wurl('hostname', newUrl);
-
-		const sameDomainUrl = (currentDomain === newDomain || newUrl === currentUrl + '/');
-		const isUploadsUrl = newUrl.includes(currentUrl + '/user_uploads/');
-		const isInternalUrl = newUrl.includes('/#narrow') || isUploadsUrl;
-
-		return {
-			isInternalUrl: sameDomainUrl && isInternalUrl,
-			isUploadsUrl
-		};
-	}
-
-	isImage(url) {
-		// test for images extension as well as urls like .png?s=100
-		const isImageUrl = /\.(bmp|gif|jpg|jpeg|png|webp)\?*.*$/i;
-		return isImageUrl.test(url);
-	}
-
-	isPDF(url) {
-		// test for pdf extension
-		const isPDFUrl = /\.(pdf)\?*.*$/i;
-		return isPDFUrl.test(url);
-	}
-}
-
-module.exports = new LinkUtil();

app/renderer/js/utils/link-util.ts

@@ -0,0 +1,46 @@
+import {shell} from 'electron';
+import fs from 'fs';
+import os from 'os';
+import path from 'path';
+
+import {htmlEscape} from 'escape-goat';
+
+export function isUploadsUrl(server: string, url: URL): boolean {
+	return url.origin === server && url.pathname.startsWith('/user_uploads/');
+}
+
+export async function openBrowser(url: URL): Promise<void> {
+	if (['http:', 'https:', 'mailto:'].includes(url.protocol)) {
+		await shell.openExternal(url.href);
+	} else {
+		// For security, indirect links to non-whitelisted protocols
+		// through a real web browser via a local HTML file.
+		const dir = fs.mkdtempSync(
+			path.join(os.tmpdir(), 'zulip-redirect-')
+		);
+		const file = path.join(dir, 'redirect.html');
+		fs.writeFileSync(file, htmlEscape`\
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="Refresh" content="0; url=${url.href}" />
+        <title>Redirecting</title>
+        <style>
+            html {
+                font-family: menu, "Helvetica Neue", sans-serif;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Opening <a href="${url.href}">${url.href}</a>…</p>
+    </body>
+</html>
+`);
+		await shell.openPath(file);
+		setTimeout(() => {
+			fs.unlinkSync(file);
+			fs.rmdirSync(dir);
+		}, 15000);
+	}
+}