release: New release v5.4.0.

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

.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
+# Dependency directory
-node_modules/
+/node_modules/
 
 # npm cache directory
 .npm
 
+# transifexrc - if user prefers it to be in working tree
+.transifexrc
+
 # Compiled binary build directory
 dist/
 

.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'
+- '10'
-
+- '12'
-before_install:
-  - ./scripts/travis-xvfb.sh
-  - npm install -g gulp
-  - npm install
 
 cache:
   directories:
   - node_modules
-  - app/node_modules
 
 script:
-- npm run travis
+- npm run test
-notifications:
-  webhooks:
-    urls:
-      - https://zulip.org/zulipbot/travis
-    on_success: always
-    on_failure: always

.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

@@ -9,7 +9,7 @@ Desktop client for Zulip. Available for Mac, Linux, and Windows.
 <img src="http://i.imgur.com/ChzTq4F.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 +18,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,20 +1,24 @@
-'use strict';
+import {app, dialog, session} from 'electron';
-import { app, dialog, shell } from 'electron';
+import {UpdateDownloadedEvent, UpdateInfo, autoUpdater} from 'electron-updater';
-import { autoUpdater } from 'electron-updater';
+import util from 'util';
-import { linuxUpdateNotification } from './linuxupdater';	// Required only in case of linux
+import {linuxUpdateNotification} from './linuxupdater';	// Required only in case of linux
 
-import log = require('electron-log');
+import log from 'electron-log';
-import isDev = require('electron-is-dev');
+import isDev from 'electron-is-dev';
-import ConfigUtil = require('../renderer/js/utils/config-util');
+import * as ConfigUtil from '../renderer/js/utils/config-util';
+import * as LinkUtil from '../renderer/js/utils/link-util';
 
-export function appUpdater(updateFromMenu = false): void {
+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) {
-		linuxUpdateNotification();
+		const ses = session.fromPartition('persist:webviewsession');
+		await linuxUpdateNotification(ses);
 		return;
 	}
 
@@ -34,73 +38,72 @@ export function appUpdater(updateFromMenu = false): void {
 	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
-	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(() => {
+			await sleep(1000);
 			autoUpdater.quitAndInstall();
-					// force app to quit. This is just a workaround, ideally autoUpdater.quitAndInstall() should relaunch the app.
+			// Force app to quit. This is just a workaround, ideally autoUpdater.quitAndInstall() should relaunch the app.
 			app.quit();
-				}, 1000);
 		}
 	});
-	});
 	// Init for updates
-	autoUpdater.checkForUpdates();
+	await autoUpdater.checkForUpdates();
 }

app/main/index.ts

@@ -1,31 +1,20 @@
-'use strict';
+import {sentryInit} from '../renderer/js/utils/sentry-util';
-import { sentryInit } from '../renderer/js/utils/sentry-util';
+import {appUpdater} from './autoupdater';
-import { appUpdater } from './autoupdater';
+import {setAutoLaunch} from './startup';
-import { setAutoLaunch } from './startup';
 
-import windowStateKeeper = require('electron-window-state');
+import windowStateKeeper from 'electron-window-state';
-import path = require('path');
+import path from 'path';
-import fs = require('fs');
+import fs from 'fs';
-import isDev = require('electron-is-dev');
+import electron, {app, dialog, ipcMain, session} from 'electron';
-import electron = require('electron');
-const { app, ipcMain } = electron;
 
-import AppMenu = require('./menu');
+import * as AppMenu from './menu';
-import BadgeSettings = require('../renderer/js/pages/preference/badge-settings');
+import * as BadgeSettings from '../renderer/js/pages/preference/badge-settings';
-import ConfigUtil = require('../renderer/js/utils/config-util');
+import * as CertificateUtil from '../renderer/js/utils/certificate-util';
-import ProxyUtil = require('../renderer/js/utils/proxy-util');
+import * as ConfigUtil from '../renderer/js/utils/config-util';
+import * as ProxyUtil from '../renderer/js/utils/proxy-util';
+import {_getServerSettings, _saveServerIcon, _isOnline} from './request';
 
-interface PatchedGlobal extends NodeJS.Global {
+let mainWindowState: windowStateKeeper.State;
-	mainWindowState: windowStateKeeper.State;
-}
-
-const globalPatched = global as PatchedGlobal;
-
-// 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: Electron.BrowserWindow;
@@ -51,10 +40,30 @@ if (singleInstanceLock) {
 	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 => {
+const iconPath = (): string => APP_ICON + (process.platform === 'win32' ? '.ico' : '.png');
-	return 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 {
@@ -65,9 +74,6 @@ function createMainWindow(): Electron.BrowserWindow {
 		path: `${app.getPath('userData')}/config`
 	});
 
-	// Let's keep the window position global so that we can access it in other process
-	globalPatched.mainWindowState = mainWindowState;
-
 	const win = new electron.BrowserWindow({
 		// This settings needs to be saved in config
 		title: 'Zulip',
@@ -76,12 +82,13 @@ function createMainWindow(): Electron.BrowserWindow {
 		y: mainWindowState.y,
 		width: mainWindowState.width,
 		height: mainWindowState.height,
-		minWidth: 300,
+		minWidth: 500,
 		minHeight: 400,
 		webPreferences: {
 			plugins: true,
 			nodeIntegration: true,
-			partition: 'persist:webviewsession'
+			partition: 'persist:webviewsession',
+			webviewTag: true
 		},
 		show: false
 	});
@@ -90,12 +97,16 @@ function createMainWindow(): Electron.BrowserWindow {
 		win.webContents.send('focus');
 	});
 
-	win.loadURL(mainURL);
+	(async () => win.loadURL(mainURL))();
 
 	// Keep the app running in background on close event
-	win.on('close', e => {
+	win.on('close', event => {
+		if (ConfigUtil.getConfigItem('quitOnClose')) {
+			app.quit();
+		}
+
 		if (!isQuitting) {
-			e.preventDefault();
+			event.preventDefault();
 
 			if (process.platform === 'darwin') {
 				app.hide();
@@ -116,8 +127,8 @@ function createMainWindow(): Electron.BrowserWindow {
 	});
 
 	//  To destroy tray icon when navigate to a new URL
-	win.webContents.on('will-navigate', e => {
+	win.webContents.on('will-navigate', event => {
-		if (e) {
+		if (event) {
 			win.webContents.send('destroytray');
 		}
 	});
@@ -137,19 +148,23 @@ app.disableHardwareAcceleration();
 // More info here - https://github.com/electron/electron/issues/10732
 app.commandLine.appendSwitch('force-color-profile', 'srgb');
 
-// eslint-disable-next-line max-params
+// This event is only available on macOS. Triggers when you click on the dock icon.
-app.on('certificate-error', (event: Event, _webContents: Electron.WebContents, _url: string, _error: string, _certificate: any, callback) => {
-	event.preventDefault();
-	callback(true);
-});
-
 app.on('activate', () => {
-	if (!mainWindow) {
+	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: []
 	});
@@ -158,7 +173,7 @@ app.on('ready', () => {
 	// Auto-hide menu bar on Windows + Linux
 	if (process.platform !== 'darwin') {
 		const shouldHideMenu = ConfigUtil.getConfigItem('autoHideMenubar') || false;
-		mainWindow.setAutoHideMenuBar(shouldHideMenu);
+		mainWindow.autoHideMenuBar = shouldHideMenu;
 		mainWindow.setMenuBarVisibility(!shouldHideMenu);
 	}
 
@@ -171,7 +186,7 @@ app.on('ready', () => {
 	const isSystemProxy = ConfigUtil.getConfigItem('useSystemProxy');
 
 	if (isSystemProxy) {
-		ProxyUtil.resolveSystemProxy(mainWindow);
+		(async () => ProxyUtil.resolveSystemProxy(mainWindow))();
 	}
 
 	const page = mainWindow.webContents;
@@ -184,13 +199,76 @@ app.on('ready', () => {
 		}
 	});
 
-	page.once('did-frame-finish-load', () => {
+	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')) {
-			appUpdater();
+			await appUpdater();
 		}
 	});
 
+	app.on('certificate-error', (
+		event: Event,
+		webContents: Electron.WebContents,
+		urlString: string,
+		error: string,
+		certificate: Electron.Certificate,
+		callback: (isTrusted: boolean) => void
+	) /* eslint-disable-line max-params */ => {
+		// TODO: The entire concept of selectively ignoring certificate errors
+		// is ill-conceived, and this handler needs to be deleted.
+
+		const url = new URL(urlString);
+		if (url.protocol === 'wss:') {
+			url.protocol = 'https:';
+		}
+
+		const filename = CertificateUtil.getCertificate(encodeURIComponent(url.origin));
+		if (filename !== undefined) {
+			try {
+				const savedCertificate = fs.readFileSync(
+					path.join(`${app.getPath('userData')}/certificates`, filename),
+					'utf8'
+				);
+				if (certificate.data.replace(/[\r\n]/g, '') ===
+					savedCertificate.replace(/[\r\n]/g, '')) {
+					event.preventDefault();
+					callback(true);
+					return;
+				}
+			} catch (error) {
+				console.error(`Error reading certificate file ${filename}:`, error);
+			}
+		}
+
+		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();
@@ -238,44 +316,40 @@ app.on('ready', () => {
 	});
 
 	ipcMain.on('clear-app-settings', () => {
-		globalPatched.mainWindowState.unmanage();
+		mainWindowState.unmanage();
 		app.relaunch();
 		app.exit();
 	});
 
 	ipcMain.on('toggle-app', () => {
-		if (!mainWindow.isVisible() || mainWindow.isMinimized()) {
+		toggleApp();
-			mainWindow.show();
-		} else {
-			mainWindow.hide();
-		}
 	});
 
 	ipcMain.on('toggle-badge-option', () => {
 		BadgeSettings.updateBadge(badgeCount, mainWindow);
 	});
 
-	ipcMain.on('toggle-menubar', (_event: Electron.IpcMessageEvent, showMenubar: boolean) => {
+	ipcMain.on('toggle-menubar', (_event: Electron.IpcMainEvent, showMenubar: boolean) => {
-		mainWindow.setAutoHideMenuBar(showMenubar);
+		mainWindow.autoHideMenuBar = showMenubar;
 		mainWindow.setMenuBarVisibility(!showMenubar);
 		page.send('toggle-autohide-menubar', showMenubar, true);
 	});
 
-	ipcMain.on('update-badge', (_event: Electron.IpcMessageEvent, messageCount: number) => {
+	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.IpcMessageEvent, data: any, text: string) => {
+	ipcMain.on('update-taskbar-icon', (_event: Electron.IpcMainEvent, data: string, text: string) => {
 		BadgeSettings.updateTaskbarIcon(data, text, mainWindow);
 	});
 
-	ipcMain.on('forward-message', (_event: Electron.IpcMessageEvent, listener: any, ...params: any[]) => {
+	ipcMain.on('forward-message', (_event: Electron.IpcMainEvent, listener: string, ...parameters: unknown[]) => {
-		page.send(listener, ...params);
+		page.send(listener, ...parameters);
 	});
 
-	ipcMain.on('update-menu', (_event: Electron.IpcMessageEvent, props: any) => {
+	ipcMain.on('update-menu', (_event: Electron.IpcMainEvent, props: AppMenu.MenuProps) => {
 		AppMenu.setMenu(props);
 		const activeTab = props.tabs[props.activeTabIndex];
 		if (activeTab) {
@@ -283,16 +357,20 @@ app.on('ready', () => {
 		}
 	});
 
-	ipcMain.on('toggleAutoLauncher', (_event: Electron.IpcMessageEvent, AutoLaunchValue: boolean) => {
+	ipcMain.on('toggleAutoLauncher', async (_event: Electron.IpcMainEvent, AutoLaunchValue: boolean) => {
-		setAutoLaunch(AutoLaunchValue);
+		await setAutoLaunch(AutoLaunchValue);
 	});
 
-	ipcMain.on('downloadFile', (_event: Electron.IpcMessageEvent, url: string, downloadPath: string) => {
+	ipcMain.on('downloadFile', (_event: Electron.IpcMainEvent, url: string, downloadPath: string) => {
 		page.downloadURL(url);
-		page.session.once('will-download', (_event: Event, item) => {
+		page.session.once('will-download', async (_event: Event, item) => {
-			const filePath = path.join(downloadPath, item.getFilename());
+			if (ConfigUtil.getConfigItem('promptDownload', false)) {
-
+				const showDialogOptions: electron.SaveDialogOptions = {
-			const getTimeStamp = (): any => {
+					defaultPath: path.join(downloadPath, item.getFilename())
+				};
+				item.setSaveDialogOptions(showDialogOptions);
+			} else {
+				const getTimeStamp = (): number => {
 					const date = new Date();
 					return date.getTime();
 				};
@@ -303,15 +381,15 @@ app.on('ready', () => {
 					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;
-			const setFilePath = fs.existsSync(filePath) ? updatedFilePath : filePath;
-
 				item.setSavePath(setFilePath);
+			}
 
-			item.on('updated', (_event: Event, state) => {
+			const updatedListener = (_event: Event, state: string): void => {
 				switch (state) {
 					case 'interrupted': {
 						// Can interrupted to due to network error, cancel download then
@@ -319,49 +397,67 @@ app.on('ready', () => {
 						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) => {
-				const getFileName = fs.existsSync(filePath) ? formatFile(filePath) : item.getFilename();
 				if (state === 'completed') {
-					page.send('downloadFileCompleted', item.getSavePath(), getFileName);
+					page.send('downloadFileCompleted', item.getSavePath(), path.basename(item.getSavePath()));
 				} else {
-					console.log('Download failed state: ', state);
+					console.log('Download failed state:', state);
-					page.send('downloadFileFailed');
+					page.send('downloadFileFailed', state);
 				}
+
 				// To stop item for listening to updated events of this file
-				item.removeAllListeners('updated');
+				item.removeListener('updated', updatedListener);
 			});
 		});
 	});
 
-	ipcMain.on('realm-name-changed', (_event: Electron.IpcMessageEvent, serverURL: string, realmName: string) => {
+	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.IpcMessageEvent, serverURL: string, iconURL: string) => {
+	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.IpcMessageEvent) => {
+	ipcMain.on('error-reporting', (event: Electron.IpcMainEvent) => {
 		event.sender.send('error-reporting-val', errorReporting);
 	});
 
-	ipcMain.on('save-last-tab', (_event: Electron.IpcMessageEvent, index: number) => {
+	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', () => {

app/main/linuxupdater.ts

@@ -1,48 +1,43 @@
-import { app, Notification } from 'electron';
+import {app, Notification, net} from 'electron';
 
-import request = require('request');
+import getStream from 'get-stream';
-import semver = require('semver');
+import semver from 'semver';
-import ConfigUtil = require('../renderer/js/utils/config-util');
+import * as ConfigUtil from '../renderer/js/utils/config-util';
-import ProxyUtil = require('../renderer/js/utils/proxy-util');
+import * as LinuxUpdateUtil from '../renderer/js/utils/linux-update-util';
-import LinuxUpdateUtil = require('../renderer/js/utils/linux-update-util');
+import Logger from '../renderer/js/utils/logger-util';
-import Logger = require('../renderer/js/utils/logger-util');
+import {fetchResponse} from './request';
 
 const logger = new Logger({
 	file: 'linux-update-util.log',
 	timestamp: true
 });
 
-export function linuxUpdateNotification(): void {
+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';
-	const proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');
 
-	const options = {
+	try {
-		url,
+		const response = await fetchResponse(net.request({url, session}));
-		headers: {'User-Agent': 'request'},
+		if (response.statusCode !== 200) {
-		proxy: proxyEnabled ? ProxyUtil.getProxy(url) : '',
+			logger.log('Linux update response status: ', response.statusCode);
-		ecdhCurve: 'auto'
-	};
-
-	request(options, (error: any, response: any, body: any) => {
-		if (error) {
-			logger.error('Linux update error.');
-			logger.error(error);
 			return;
 		}
-		if (response.statusCode < 400) {
+
-			const data = JSON.parse(body);
+		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();
+				new Notification({title: 'Zulip Update', body: `A new version ${latestVersion} is available. Please update using your package manager.`}).show();
 				LinuxUpdateUtil.setUpdateItem(latestVersion, true);
 			}
 		}
-		} else {
+	} catch (error) {
-			logger.log('Linux update response status: ', response.statusCode);
+		logger.error('Linux update error.');
+		logger.error(error);
 	}
-	});
 }

app/main/menu.ts

@@ -1,68 +1,59 @@
-'use strict';
+import {app, shell, BrowserWindow, Menu} from 'electron';
-import { app, shell, BrowserWindow, Menu, dialog } from 'electron';
+import {appUpdater} from './autoupdater';
-import { appUpdater } from './autoupdater';
 
-import AdmZip = require('adm-zip');
+import AdmZip from 'adm-zip';
-import fs = require('fs-extra');
+import * as DNDUtil from '../renderer/js/utils/dnd-util';
-import path = require('path');
+import * as ConfigUtil from '../renderer/js/utils/config-util';
-import DNDUtil = require('../renderer/js/utils/dnd-util');
+import * as LinkUtil from '../renderer/js/utils/link-util';
-import Logger = require('../renderer/js/utils/logger-util');
+import * as t from '../renderer/js/utils/translation-util';
-import ConfigUtil = require('../renderer/js/utils/config-util');
+import type {ServerOrFunctionalTab} from '../renderer/js/main';
-import t = require('../renderer/js/utils/translation-util');
 
-const appName = app.getName();
+export interface MenuProps {
+	tabs: ServerOrFunctionalTab[];
+	activeTabIndex?: number;
+	enableMenu?: boolean;
+}
 
-const logger = new Logger({
+const appName = app.name;
-	file: 'errors.log',
-	timestamp: true
-});
 
-class AppMenu {
+function getHistorySubmenu(enableMenu: boolean): Electron.MenuItemConstructorOptions[] {
-	getHistorySubmenu(enableMenu: boolean): Electron.MenuItemConstructorOptions[] {
 	return [{
 		label: t.__('Back'),
 		accelerator: process.platform === 'darwin' ? 'Command+Left' : 'Alt+Left',
 		enabled: enableMenu,
-			click(_item: any, focusedWindow: any) {
+		click(_item, focusedWindow) {
 			if (focusedWindow) {
-					AppMenu.sendAction('back');
+				sendAction('back');
 			}
 		}
 	}, {
 		label: t.__('Forward'),
 		accelerator: process.platform === 'darwin' ? 'Command+Right' : 'Alt+Right',
 		enabled: enableMenu,
-			click(_item: any, focusedWindow: any) {
+		click(_item, focusedWindow) {
 			if (focusedWindow) {
-					AppMenu.sendAction('forward');
+				sendAction('forward');
 			}
 		}
 	}];
-	}
+}
 
-	getToolsSubmenu(): Electron.MenuItemConstructorOptions[] {
+function getToolsSubmenu(): Electron.MenuItemConstructorOptions[] {
 	return [{
-			label: t.__(`Check for Updates`),
+		label: t.__('Check for Updates'),
-			click() {
+		async click() {
-				AppMenu.checkForUpdate();
+			await checkForUpdate();
 		}
 	},
 	{
-			label: t.__(`Release Notes`),
+		label: t.__('Release Notes'),
-			click() {
+		async click() {
-				shell.openExternal(`https://github.com/zulip/zulip-desktop/releases/tag/v${app.getVersion()}`);
+			await LinkUtil.openBrowser(new URL(`https://github.com/zulip/zulip-desktop/releases/tag/v${app.getVersion()}`));
 		}
 	},
 	{
 		type: 'separator'
 	},
-		{
-			label: t.__('Factory Reset'),
-			accelerator: process.platform === 'darwin' ? 'Command+Shift+D' : 'Ctrl+Shift+D',
-			click() {
-				AppMenu.resetAppSettings();
-			}
-		},
 	{
 		label: t.__('Download App Logs'),
 		click() {
@@ -88,7 +79,7 @@ class AppMenu {
 	{
 		label: t.__('Toggle DevTools for Zulip App'),
 		accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
-			click(_item: any, focusedWindow: any) {
+		click(_item, focusedWindow) {
 			if (focusedWindow) {
 				focusedWindow.webContents.openDevTools({mode: 'undocked'});
 			}
@@ -97,29 +88,29 @@ class AppMenu {
 	{
 		label: t.__('Toggle DevTools for Active Tab'),
 		accelerator: process.platform === 'darwin' ? 'Alt+Command+U' : 'Ctrl+Shift+U',
-			click(_item: any, focusedWindow: any) {
+		click(_item, focusedWindow) {
 			if (focusedWindow) {
-					AppMenu.sendAction('tab-devtools');
+				sendAction('tab-devtools');
 			}
 		}
 	}];
-	}
+}
 
-	getViewSubmenu(): Electron.MenuItemConstructorOptions[] {
+function getViewSubmenu(): Electron.MenuItemConstructorOptions[] {
 	return [{
 		label: t.__('Reload'),
 		accelerator: 'CommandOrControl+R',
-			click(_item: any, focusedWindow: any) {
+		click(_item, focusedWindow) {
 			if (focusedWindow) {
-					AppMenu.sendAction('reload-current-viewer');
+				sendAction('reload-current-viewer');
 			}
 		}
 	}, {
 		label: t.__('Hard Reload'),
 		accelerator: 'CommandOrControl+Shift+R',
-			click(_item: any, focusedWindow: any) {
+		click(_item, focusedWindow) {
 			if (focusedWindow) {
-					AppMenu.sendAction('hard-reload');
+				sendAction('hard-reload');
 			}
 		}
 	}, {
@@ -129,33 +120,33 @@ class AppMenu {
 		role: 'togglefullscreen'
 	}, {
 		label: t.__('Zoom In'),
-			role: 'zoomin',
+		accelerator: 'CommandOrControl+=',
-			click(_item: any, focusedWindow: any) {
+		click(_item, focusedWindow) {
 			if (focusedWindow) {
-					AppMenu.sendAction('zoomIn');
+				sendAction('zoomIn');
 			}
 		}
 	}, {
 		label: t.__('Zoom Out'),
 		accelerator: 'CommandOrControl+-',
-			click(_item: any, focusedWindow: any) {
+		click(_item, focusedWindow) {
 			if (focusedWindow) {
-					AppMenu.sendAction('zoomOut');
+				sendAction('zoomOut');
 			}
 		}
 	}, {
 		label: t.__('Actual Size'),
 		accelerator: 'CommandOrControl+0',
-			click(_item: any, focusedWindow: any) {
+		click(_item, focusedWindow) {
 			if (focusedWindow) {
-					AppMenu.sendAction('zoomActualSize');
+				sendAction('zoomActualSize');
 			}
 		}
 	}, {
 		type: 'separator'
 	}, {
 		label: t.__('Toggle Tray Icon'),
-			click(_item: any, focusedWindow: any) {
+		click(_item, focusedWindow) {
 			if (focusedWindow) {
 				focusedWindow.webContents.send('toggletray');
 			}
@@ -163,7 +154,7 @@ class AppMenu {
 	}, {
 		label: t.__('Toggle Sidebar'),
 		accelerator: 'CommandOrControl+Shift+S',
-			click(_item: any, focusedWindow: any) {
+		click(_item, focusedWindow) {
 			if (focusedWindow) {
 				const newValue = !ConfigUtil.getConfigItem('showSidebar');
 				focusedWindow.webContents.send('toggle-sidebar', newValue);
@@ -174,10 +165,10 @@ class AppMenu {
 		label: t.__('Auto hide Menu bar'),
 		checked: ConfigUtil.getConfigItem('autoHideMenubar', false),
 		visible: process.platform !== 'darwin',
-			click(_item: any, focusedWindow: any) {
+		click(_item, focusedWindow) {
 			if (focusedWindow) {
 				const newValue = !ConfigUtil.getConfigItem('autoHideMenubar');
-					focusedWindow.setAutoHideMenuBar(newValue);
+				focusedWindow.autoHideMenuBar = newValue;
 				focusedWindow.setMenuBarVisibility(!newValue);
 				focusedWindow.webContents.send('toggle-autohide-menubar', newValue);
 				ConfigUtil.setConfigItem('autoHideMenubar', newValue);
@@ -185,9 +176,9 @@ class AppMenu {
 		},
 		type: 'checkbox'
 	}];
-	}
+}
 
-	getHelpSubmenu(): Electron.MenuItemConstructorOptions[] {
+function getHelpSubmenu(): Electron.MenuItemConstructorOptions[] {
 	return [
 		{
 			label: `${appName + ' Desktop'} v${app.getVersion()}`,
@@ -195,24 +186,24 @@ class AppMenu {
 		},
 		{
 			label: t.__('About Zulip'),
-				click(_item: any, focusedWindow: any) {
+			click(_item, focusedWindow) {
 				if (focusedWindow) {
-						AppMenu.sendAction('open-about');
+					sendAction('open-about');
 				}
 			}
 		},
 		{
-				label: t.__(`Help Center`),
+			label: t.__('Help Center'),
 			click(focusedWindow) {
 				if (focusedWindow) {
-						AppMenu.sendAction('open-help');
+					sendAction('open-help');
 				}
 			}
 		},
 		{
 			label: t.__('Report an Issue'),
 			click() {
-					// the goal is to notify the main.html BrowserWindow
+				// 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');
@@ -220,10 +211,10 @@ class AppMenu {
 			}
 		}
 	];
-	}
+}
 
-	getWindowSubmenu(tabs: any[], activeTabIndex: number, enableMenu: boolean): Electron.MenuItemConstructorOptions[] {
+function getWindowSubmenu(tabs: ServerOrFunctionalTab[], activeTabIndex: number): Electron.MenuItemConstructorOptions[] {
-		const initialSubmenu: any[] = [{
+	const initialSubmenu: Electron.MenuItemConstructorOptions[] = [{
 		label: t.__('Minimize'),
 		role: 'minimize'
 	}, {
@@ -246,9 +237,9 @@ class AppMenu {
 				label: tab.props.name,
 				accelerator: tab.props.role === 'function' ? '' : `${ShortcutKey} + ${tab.props.index + 1}`,
 				checked: tab.props.index === activeTabIndex,
-					click(_item: any, focusedWindow: any) {
+				click(_item, focusedWindow) {
 					if (focusedWindow) {
-							AppMenu.sendAction('switch-server-tab', tab.props.index);
+						sendAction('switch-server-tab', tab.props.index);
 					}
 				},
 				type: 'checkbox'
@@ -259,39 +250,39 @@ class AppMenu {
 		});
 		initialSubmenu.push({
 			label: t.__('Switch to Next Organization'),
-				accelerator: `Ctrl+Tab`,
+			accelerator: 'Ctrl+Tab',
 			enabled: tabs.length > 1,
-				click(_item: any, focusedWindow: any) {
+			click(_item, focusedWindow) {
 				if (focusedWindow) {
-						AppMenu.sendAction('switch-server-tab', AppMenu.getNextServer(tabs, activeTabIndex));
+					sendAction('switch-server-tab', getNextServer(tabs, activeTabIndex));
 				}
 			}
 		}, {
 			label: t.__('Switch to Previous Organization'),
-				accelerator: `Ctrl+Shift+Tab`,
+			accelerator: 'Ctrl+Shift+Tab',
 			enabled: tabs.length > 1,
-				click(_item: any, focusedWindow: any) {
+			click(_item, focusedWindow) {
 				if (focusedWindow) {
-						AppMenu.sendAction('switch-server-tab', AppMenu.getPreviousServer(tabs, activeTabIndex));
+					sendAction('switch-server-tab', getPreviousServer(tabs, activeTabIndex));
 				}
 			}
 		});
 	}
 
 	return initialSubmenu;
-	}
+}
 
-	getDarwinTpl(props: any): Electron.MenuItemConstructorOptions[] {
+function getDarwinTpl(props: MenuProps): Electron.MenuItemConstructorOptions[] {
-		const { tabs, activeTabIndex, enableMenu } = props;
+	const {tabs, activeTabIndex, enableMenu} = props;
 
 	return [{
-			label: `${app.getName()}`,
+		label: app.name,
 		submenu: [{
 			label: t.__('Add Organization'),
 			accelerator: 'Cmd+Shift+N',
-				click(_item: any, focusedWindow: any) {
+			click(_item, focusedWindow) {
 				if (focusedWindow) {
-						AppMenu.sendAction('new-server');
+					sendAction('new-server');
 				}
 			}
 		}, {
@@ -299,23 +290,23 @@ class AppMenu {
 			accelerator: 'Cmd+Shift+M',
 			click() {
 				const dndUtil = DNDUtil.toggle();
-					AppMenu.sendAction('toggle-dnd', dndUtil.dnd, dndUtil.newSettings);
+				sendAction('toggle-dnd', dndUtil.dnd, dndUtil.newSettings);
 			}
 		}, {
 			label: t.__('Desktop Settings'),
 			accelerator: 'Cmd+,',
-				click(_item: any, focusedWindow: any) {
+			click(_item, focusedWindow) {
 				if (focusedWindow) {
-						AppMenu.sendAction('open-settings');
+					sendAction('open-settings');
 				}
 			}
 		}, {
 			label: t.__('Keyboard Shortcuts'),
 			accelerator: 'Cmd+Shift+K',
 			enabled: enableMenu,
-				click(_item: any, focusedWindow: any) {
+			click(_item, focusedWindow) {
 				if (focusedWindow) {
-						AppMenu.sendAction('shortcut');
+					sendAction('shortcut');
 				}
 			}
 		}, {
@@ -324,18 +315,18 @@ class AppMenu {
 			label: t.__('Copy Zulip URL'),
 			accelerator: 'Cmd+Shift+C',
 			enabled: enableMenu,
-				click(_item: any, focusedWindow: any) {
+			click(_item, focusedWindow) {
 				if (focusedWindow) {
-						AppMenu.sendAction('copy-zulip-url');
+					sendAction('copy-zulip-url');
 				}
 			}
 		}, {
 			label: t.__('Log Out of Organization'),
 			accelerator: 'Cmd+L',
 			enabled: enableMenu,
-				click(_item: any, focusedWindow: any) {
+			click(_item, focusedWindow) {
 				if (focusedWindow) {
-						AppMenu.sendAction('log-out');
+					sendAction('log-out');
 				}
 			}
 		}, {
@@ -351,7 +342,7 @@ class AppMenu {
 			role: 'hide'
 		}, {
 			label: t.__('Hide Others'),
-				role: 'hideothers'
+			role: 'hideOthers'
 		}, {
 			label: t.__('Unhide'),
 			role: 'unhide'
@@ -371,10 +362,20 @@ class AppMenu {
 		label: t.__('Edit'),
 		submenu: [{
 			label: t.__('Undo'),
-				role: 'undo'
+			accelerator: 'Cmd+Z',
+			click(_item, focusedWindow) {
+				if (focusedWindow) {
+					sendAction('undo');
+				}
+			}
 		}, {
 			label: t.__('Redo'),
-				role: 'redo'
+			accelerator: 'Cmd+Shift+Z',
+			click(_item, focusedWindow) {
+				if (focusedWindow) {
+					sendAction('redo');
+				}
+			}
 		}, {
 			type: 'separator'
 		}, {
@@ -388,40 +389,40 @@ class AppMenu {
 			role: 'paste'
 		}, {
 			label: t.__('Paste and Match Style'),
-				role: 'pasteandmatchstyle'
+			role: 'pasteAndMatchStyle'
 		}, {
 			label: t.__('Select All'),
-				role: 'selectall'
+			role: 'selectAll'
 		}]
 	}, {
 		label: t.__('View'),
-			submenu: this.getViewSubmenu()
+		submenu: getViewSubmenu()
 	}, {
 		label: t.__('History'),
-			submenu: this.getHistorySubmenu(enableMenu)
+		submenu: getHistorySubmenu(enableMenu)
 	}, {
 		label: t.__('Window'),
-			submenu: this.getWindowSubmenu(tabs, activeTabIndex, enableMenu)
+		submenu: getWindowSubmenu(tabs, activeTabIndex)
 	}, {
 		label: t.__('Tools'),
-			submenu: this.getToolsSubmenu()
+		submenu: getToolsSubmenu()
 	}, {
 		label: t.__('Help'),
 		role: 'help',
-			submenu: this.getHelpSubmenu()
+		submenu: getHelpSubmenu()
 	}];
-	}
+}
 
-	getOtherTpl(props: any): Electron.MenuItemConstructorOptions[] {
+function getOtherTpl(props: MenuProps): Electron.MenuItemConstructorOptions[] {
-		const { tabs, activeTabIndex, enableMenu } = props;
+	const {tabs, activeTabIndex, enableMenu} = props;
 	return [{
 		label: t.__('File'),
 		submenu: [{
 			label: t.__('Add Organization'),
 			accelerator: 'Ctrl+Shift+N',
-				click(_item: any, focusedWindow: any) {
+			click(_item, focusedWindow) {
 				if (focusedWindow) {
-						AppMenu.sendAction('new-server');
+					sendAction('new-server');
 				}
 			}
 		}, {
@@ -431,23 +432,23 @@ class AppMenu {
 			accelerator: 'Ctrl+Shift+M',
 			click() {
 				const dndUtil = DNDUtil.toggle();
-					AppMenu.sendAction('toggle-dnd', dndUtil.dnd, dndUtil.newSettings);
+				sendAction('toggle-dnd', dndUtil.dnd, dndUtil.newSettings);
 			}
 		}, {
 			label: t.__('Desktop Settings'),
 			accelerator: 'Ctrl+,',
-				click(_item: any, focusedWindow: any) {
+			click(_item, focusedWindow) {
 				if (focusedWindow) {
-						AppMenu.sendAction('open-settings');
+					sendAction('open-settings');
 				}
 			}
 		}, {
 			label: t.__('Keyboard Shortcuts'),
 			accelerator: 'Ctrl+Shift+K',
 			enabled: enableMenu,
-				click(_item: any, focusedWindow: any) {
+			click(_item, focusedWindow) {
 				if (focusedWindow) {
-						AppMenu.sendAction('shortcut');
+					sendAction('shortcut');
 				}
 			}
 		}, {
@@ -456,18 +457,18 @@ class AppMenu {
 			label: t.__('Copy Zulip URL'),
 			accelerator: 'Ctrl+Shift+C',
 			enabled: enableMenu,
-				click(_item: any, focusedWindow: any) {
+			click(_item, focusedWindow) {
 				if (focusedWindow) {
-						AppMenu.sendAction('copy-zulip-url');
+					sendAction('copy-zulip-url');
 				}
 			}
 		}, {
 			label: t.__('Log Out of Organization'),
 			accelerator: 'Ctrl+L',
 			enabled: enableMenu,
-				click(_item: any, focusedWindow: any) {
+			click(_item, focusedWindow) {
 				if (focusedWindow) {
-						AppMenu.sendAction('log-out');
+					sendAction('log-out');
 				}
 			}
 		}, {
@@ -504,98 +505,66 @@ class AppMenu {
 			role: 'paste'
 		}, {
 			label: t.__('Paste and Match Style'),
-				role: 'pasteandmatchstyle'
+			role: 'pasteAndMatchStyle'
 		}, {
 			type: 'separator'
 		}, {
 			label: t.__('Select All'),
-				role: 'selectall'
+			role: 'selectAll'
 		}]
 	}, {
 		label: t.__('View'),
-			submenu: this.getViewSubmenu()
+		submenu: getViewSubmenu()
 	}, {
 		label: t.__('History'),
-			submenu: this.getHistorySubmenu(enableMenu)
+		submenu: getHistorySubmenu(enableMenu)
 	}, {
 		label: t.__('Window'),
-			submenu: this.getWindowSubmenu(tabs, activeTabIndex, enableMenu)
+		submenu: getWindowSubmenu(tabs, activeTabIndex)
 	}, {
 		label: t.__('Tools'),
-			submenu: this.getToolsSubmenu()
+		submenu: getToolsSubmenu()
 	}, {
 		label: t.__('Help'),
 		role: 'help',
-			submenu: this.getHelpSubmenu()
+		submenu: getHelpSubmenu()
 	}];
-	}
+}
 
-	static sendAction(action: any, ...params: any[]): void {
+function sendAction(action: string, ...parameters: unknown[]): void {
 	const win = BrowserWindow.getAllWindows()[0];
 
 	if (process.platform === 'darwin') {
 		win.restore();
 	}
 
-		win.webContents.send(action, ...params);
+	win.webContents.send(action, ...parameters);
-	}
+}
 
-	static checkForUpdate(): void {
+async function checkForUpdate(): Promise<void> {
-		appUpdater(true);
+	await appUpdater(true);
-	}
+}
 
-	static getNextServer(tabs: any[], activeTabIndex: number): number {
+function getNextServer(tabs: ServerOrFunctionalTab[], activeTabIndex: number): number {
 	do {
 		activeTabIndex = (activeTabIndex + 1) % tabs.length;
 	}
 	while (tabs[activeTabIndex].props.role !== 'server');
-		return activeTabIndex;
-	}
 
-	static getPreviousServer(tabs: any[], activeTabIndex: number): number {
+	return activeTabIndex;
+}
+
+function getPreviousServer(tabs: ServerOrFunctionalTab[], activeTabIndex: number): number {
 	do {
 		activeTabIndex = (activeTabIndex - 1 + tabs.length) % tabs.length;
 	}
 	while (tabs[activeTabIndex].props.role !== 'server');
+
 	return activeTabIndex;
-	}
-
-	static resetAppSettings(): void {
-		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: any) => {
-						if (error) {
-							logger.error('Error while resetting app settings.');
-							logger.error(error);
-						} else {
-							fs.unlink(getSettingFilesPath, () => {
-								AppMenu.sendAction('clear-app-data');
-							});
-						}
-					});
-				});
-			}
-		});
-	}
-
-	setMenu(props: any): void {
-		const tpl = process.platform === 'darwin' ? this.getDarwinTpl(props) : this.getOtherTpl(props);
-		const menu = Menu.buildFromTemplate(tpl);
-		Menu.setApplicationMenu(menu);
-	}
 }
 
-export = new AppMenu();
+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,111 @@
+import {ClientRequest, IncomingMessage, app, net} from 'electron';
+import fs from 'fs';
+import path from 'path';
+import stream from 'stream';
+import util from 'util';
+import * as Messages from '../resources/messages';
+import Logger from '../renderer/js/utils/logger-util';
+import {ServerConf} from '../renderer/js/utils/domain-util';
+import escape from 'escape-html';
+import getStream from 'get-stream';
+
+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: escape(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) {
+		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) {
+		logger.log(error);
+		return false;
+	}
+};

app/main/startup.ts

@@ -1,31 +1,32 @@
-'use strict';
+import {app} from 'electron';
-import { app } from 'electron';
 
-import AutoLaunch = require('auto-launch');
+import AutoLaunch from 'auto-launch';
-import isDev = require('electron-is-dev');
+import isDev from 'electron-is-dev';
-import ConfigUtil = require('../renderer/js/utils/config-util');
+import * as ConfigUtil from '../renderer/js/utils/config-util';
 
-export const setAutoLaunch = (AutoLaunchValue: boolean): void => {
+export const setAutoLaunch = async (AutoLaunchValue: boolean): Promise<void> => {
 	// 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);
 
+	// `setLoginItemSettings` doesn't support linux
+	if (process.platform === 'linux') {
+		const ZulipAutoLauncher = new AutoLaunch({
+			name: 'Zulip',
+			isHidden: false
+		});
 		if (autoLaunchOption) {
-		ZulipAutoLauncher.enable();
+			await ZulipAutoLauncher.enable();
 		} else {
-		ZulipAutoLauncher.disable();
+			await ZulipAutoLauncher.disable();
+		}
+	} else {
+		app.setLoginItemSettings({
+			openAtLogin: autoLaunchOption,
+			openAsHidden: false
+		});
 	}
 };

app/package.json

@@ -1,50 +0,0 @@
-{
-  "name": "zulip",
-  "productName": "Zulip",
-  "version": "4.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",
-    "dotenv": "8.0.0",
-    "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",
-    "i18n": "0.8.3",
-    "is-online": "7.0.0",
-    "node-json-db": "0.9.2",
-    "request": "2.85.0",
-    "semver": "5.4.1",
-    "wurl": "2.5.0"
-  },
-  "optionalDependencies": {
-    "node-mac-notifier": "1.1.0"
-  }
-}

app/renderer/about.html

@@ -14,33 +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);
-            }
         </script>
         <script>require('./js/shared/preventdrag.js')</script>
     </body>

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/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

@@ -389,6 +389,10 @@ img.server-info-icon {
     margin: 6px;
 }
 
+#note {
+    font-size: 10px;
+}
+
 .code {
     font-family: Courier New, Courier, monospace;
 }
@@ -642,7 +646,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,
@@ -675,9 +719,6 @@ input.toggle-round:checked + label::after {
         margin-right: 6px;
         width: 43%;
     }
-    #new-server-container {
-        padding-left: 0px;
-    }
 }
 
 @media (max-width: 600px) {
@@ -704,3 +745,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 {clipboard} from 'electron';
+import crypto from 'crypto';
+
+// 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.ts

@@ -1,11 +1,7 @@
-'use strict';
+export default class BaseComponent {
-
-class BaseComponent {
 	generateNodeFromTemplate(template: string): Element | null {
 		const wrapper = document.createElement('div');
 		wrapper.innerHTML = template;
 		return wrapper.firstElementChild;
 	}
 }
-
-export = BaseComponent;

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

@@ -0,0 +1,113 @@
+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.ts

@@ -1,9 +1,13 @@
-'use strict';
+import Tab, {TabProps} from './tab';
 
-import Tab = require('./tab');
+export default class FunctionalTab extends Tab {
-
-class FunctionalTab extends Tab {
 	$closeButton: Element;
+
+	constructor(props: TabProps) {
+		super(props);
+		this.init();
+	}
+
 	template(): string {
 		return `<div class="tab functional-tab" data-tab-id="${this.props.tabIndex}">
 					<div class="server-tab-badge close-button">
@@ -15,12 +19,6 @@ class FunctionalTab extends Tab {
 				</div>`;
 	}
 
-	// TODO: Typescript - This type for props should be TabProps
-	constructor(props: any) {
-		super(props);
-		this.init();
-	}
-
 	init(): void {
 		this.$el = this.generateNodeFromTemplate(this.template());
 		if (this.props.name !== 'Settings') {
@@ -41,11 +39,9 @@ class FunctionalTab extends Tab {
 			this.$closeButton.classList.remove('active');
 		});
 
-		this.$closeButton.addEventListener('click', (e: Event) => {
+		this.$closeButton.addEventListener('click', (event: Event) => {
 			this.props.onDestroy();
-			e.stopPropagation();
+			event.stopPropagation();
 		});
 	}
 }
-
-export = FunctionalTab;

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

@@ -1,83 +1,60 @@
-import { ipcRenderer, remote } from 'electron';
+import {ipcRenderer, remote} from 'electron';
 
-import LinkUtil = require('../utils/link-util');
+import * as LinkUtil from '../utils/link-util';
-import DomainUtil = require('../utils/domain-util');
+import * as ConfigUtil from '../utils/config-util';
-import ConfigUtil = require('../utils/config-util');
+import type WebView from './webview';
 
-const { shell, app } = remote;
+const {shell, app} = remote;
 
 const dingSound = new Audio('../resources/sounds/ding.ogg');
 
-// TODO: TypeScript - Figure out a way to pass correct type here.
+export default function handleExternalLink(this: WebView, event: Electron.NewWindowEvent): void {
-function handleExternalLink(this: any, event: any): void {
-	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)
+	const url = new URL(event.url);
-		// Show pdf attachments in a new window
+	const downloadPath = ConfigUtil.getConfigItem('downloadsPath', `${app.getPath('downloads')}`);
-		// if (LinkUtil.isPDF(url) && isUploadsURL) {
-		// 	ipcRenderer.send('pdf-view', url);
-		// 	return;
-		// }
 
-		// download txt, mp3, mp4 etc.. by using downloadURL in the
+	if (LinkUtil.isUploadsUrl(this.props.url, url)) {
-		// main process which allows the user to save the files to their desktop
+		ipcRenderer.send('downloadFile', url.href, downloadPath);
-		// and not trigger webview reload while image in webview will
+		ipcRenderer.once('downloadFileCompleted', async (_event: Event, filePath: string, fileName: string) => {
-		// 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: Event, filePath: string, fileName: string) => {
 			const downloadNotification = new Notification('Download Complete', {
-					body: shouldShowInFolder ? `Click to show ${fileName} in folder` : `Click to open ${fileName}`,
+				body: `Click to show ${fileName} in folder`,
 				silent: true // We'll play our own sound - ding.ogg
 			});
 
-				// Play sound to indicate download complete
-				if (!ConfigUtil.getConfigItem('silent')) {
-					dingSound.play();
-				}
-
 			downloadNotification.addEventListener('click', () => {
-					if (shouldShowInFolder) {
 				// Reveal file in download folder
 				shell.showItemInFolder(filePath);
-					} else {
-						// Open file in the default native app
-						shell.openItem(filePath);
-					}
 			});
 			ipcRenderer.removeAllListeners('downloadFileFailed');
+
+			// Play sound to indicate download complete
+			if (!ConfigUtil.getConfigItem('silent')) {
+				await dingSound.play();
+			}
 		});
 
-			ipcRenderer.once('downloadFileFailed', () => {
+		ipcRenderer.once('downloadFileFailed', (_event: Event, state: string) => {
 			// Automatic download failed, so show save dialog prompt and download
 			// through webview
-				this.$el.downloadURL(url);
+			// 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');
 		});
-			return;
-		}
-
-		// open internal urls inside the current webview.
-		this.$el.loadURL(url);
 	} else {
-		event.preventDefault();
+		(async () => LinkUtil.openBrowser(url))();
-		shell.openExternal(url);
 	}
 }
-
-export = handleExternalLink;

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

@@ -1,13 +1,16 @@
-'use strict';
+import {ipcRenderer} from 'electron';
 
-import { ipcRenderer } from 'electron';
+import Tab, {TabProps} from './tab';
+import * as SystemUtil from '../utils/system-util';
 
-import Tab = require('./tab');
+export default class ServerTab extends Tab {
-import SystemUtil = require('../utils/system-util');
-
-class ServerTab extends Tab {
 	$badge: Element;
 
+	constructor(props: TabProps) {
+		super(props);
+		this.init();
+	}
+
 	template(): string {
 		return `<div class="tab" data-tab-id="${this.props.tabIndex}">
 					<div class="server-tooltip" style="display:none">${this.props.name}</div>
@@ -19,12 +22,6 @@ class ServerTab extends Tab {
 				</div>`;
 	}
 
-	// TODO: Typescript - This type for props should be TabProps
-	constructor(props: any) {
-		super(props);
-		this.init();
-	}
-
 	init(): void {
 		this.$el = this.generateNodeFromTemplate(this.template());
 		this.props.$root.append(this.$el);
@@ -64,5 +61,3 @@ class ServerTab extends Tab {
 		return shortcutText;
 	}
 }
-
-export = ServerTab;

app/renderer/js/components/tab.ts

@@ -1,14 +1,22 @@
-'use strict';
+import WebView from './webview';
+import BaseComponent from './base';
 
-import WebView = require('./webview');
+export interface TabProps {
-import BaseComponent = require('./base');
+	role: string;
-
+	icon?: string;
-// TODO: TypeScript - Type annotate props
+	name: string;
-interface TabProps {
+	$root: Element;
-	[key: string]: any;
+	onClick: () => void;
+	index: number;
+	tabIndex: number;
+	onHover?: () => void;
+	onHoverOut?: () => void;
+	webview: WebView;
+	materialIcon?: string;
+	onDestroy?: () => void;
 }
 
-class Tab extends BaseComponent {
+export default class Tab extends BaseComponent {
 	props: TabProps;
 	webview: WebView;
 	$el: Element;
@@ -25,6 +33,10 @@ class Tab extends BaseComponent {
 		this.$el.addEventListener('mouseout', this.props.onHoverOut);
 	}
 
+	showNetworkError(): void {
+		this.webview.forceLoad();
+	}
+
 	activate(): void {
 		this.$el.classList.add('active');
 		this.webview.load();
@@ -36,9 +48,7 @@ class Tab extends BaseComponent {
 	}
 
 	destroy(): void {
-		this.$el.parentNode.removeChild(this.$el);
+		this.$el.remove();
-		this.webview.$el.parentNode.removeChild(this.webview.$el);
+		this.webview.$el.remove();
 	}
 }
-
-export = Tab;

app/renderer/js/components/webview.ts

@@ -1,40 +1,48 @@
-'use strict';
+import {ipcRenderer, remote} from 'electron';
-import { remote } from 'electron';
 
-import path = require('path');
+import path from 'path';
-import fs = require('fs');
+import fs from 'fs';
-import ConfigUtil = require('../utils/config-util');
+import * as ConfigUtil from '../utils/config-util';
-import SystemUtil = require('../utils/system-util');
+import * as SystemUtil from '../utils/system-util';
-import BaseComponent = require('../components/base');
+import BaseComponent from './base';
-import handleExternalLink = require('../components/handle-external-link');
+import handleExternalLink from './handle-external-link';
+import {contextMenu} from './context-menu';
 
-const { app, dialog } = remote;
+const {app, dialog} = remote;
 
 const shouldSilentWebview = ConfigUtil.getConfigItem('silent');
 
-// TODO: TypeScript - Type annotate WebViewProps.
 interface WebViewProps {
-	[key: string]: any;
+	$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;
 }
 
-class WebView extends BaseComponent {
+export default class WebView extends BaseComponent {
-	props: any;
+	props: WebViewProps;
 	zoomFactor: number;
 	badgeCount: number;
 	loading: boolean;
 	customCSS: string;
 	$webviewsContainer: DOMTokenList;
 	$el: Electron.WebviewTag;
-
+	domReady?: Promise<void>;
-	// This is required because in main.js we access WebView.method as
-	// webview[method].
-	[key: string]: any;
 
 	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');
@@ -47,16 +55,22 @@ class WebView extends BaseComponent {
 					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">
+					webpreferences="
+						${this.props.nodeIntegration ? '' : 'contextIsolation,'}
+						${ConfigUtil.getConfigItem('enableSpellchecker') ? 'spellcheck,' : ''}
+						javascript
+					">
 				</webview>`;
 	}
 
 	init(): void {
 		this.$el = this.generateNodeFromTemplate(this.template()) as Electron.WebviewTag;
+		this.domReady = new Promise(resolve => {
+			this.$el.addEventListener('dom-ready', () => resolve(), true);
+		});
 		this.props.$root.append(this.$el);
 
 		this.registerListeners();
@@ -74,7 +88,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();
 		});
@@ -84,6 +98,7 @@ class WebView extends BaseComponent {
 			if (isSettingPage) {
 				return;
 			}
+
 			this.canGoBackButton();
 		});
 
@@ -92,14 +107,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();
 				}
@@ -107,9 +122,15 @@ 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();
@@ -121,11 +142,13 @@ class WebView extends BaseComponent {
 		});
 
 		this.$el.addEventListener('did-fail-load', event => {
-			const { errorDescription } = event;
+			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);
+				}
 			}
 		});
 
@@ -134,12 +157,6 @@ class WebView extends BaseComponent {
 			if (!isSettingPage) {
 				this.props.switchLoading(true, this.props.url);
 			}
-			let userAgent = SystemUtil.getUserAgent();
-			if (!userAgent) {
-				SystemUtil.setUserAgent(this.$el.getUserAgent());
-				userAgent = SystemUtil.getUserAgent();
-			}
-			this.$el.setUserAgent(userAgent);
 		});
 
 		this.$el.addEventListener('did-stop-loading', () => {
@@ -152,6 +169,10 @@ class WebView extends BaseComponent {
 		return messageCountInTitle ? Number(messageCountInTitle[1]) : 0;
 	}
 
+	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()) {
@@ -175,27 +196,27 @@ 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!';
+				const errorMessage = 'The custom css previously set is deleted!';
-				dialog.showErrorBox('custom css file deleted!', errMsg);
+				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(): void {
-		// focus Webview and it's contents when Window regain focus.
+		// Focus Webview and it's contents when Window regain focus.
-		const webContents = this.$el.getWebContents();
+		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) {
@@ -232,16 +253,16 @@ class WebView extends BaseComponent {
 	}
 
 	zoomActualSize(): void {
-		this.zoomFactor = 1.0;
+		this.zoomFactor = 1;
 		this.$el.setZoomFactor(this.zoomFactor);
 	}
 
 	logOut(): void {
-		this.$el.executeJavaScript('logout()');
+		ipcRenderer.sendTo(this.$el.getWebContentsId(), 'logout');
 	}
 
 	showShortcut(): void {
-		this.$el.executeJavaScript('shortcut()');
+		ipcRenderer.sendTo(this.$el.getWebContentsId(), 'shortcut');
 	}
 
 	openDevTools(): void {
@@ -279,9 +300,12 @@ class WebView extends BaseComponent {
 		this.$el.reload();
 	}
 
-	send(channel: string, ...param: any[]): void {
+	forceLoad(): void {
-		this.$el.send(channel, ...param);
+		this.init();
+	}
+
+	async send(channel: string, ...parameters: unknown[]): Promise<void> {
+		await this.domReady;
+		await this.$el.send(channel, ...parameters);
 	}
 }
-
-export = WebView;

app/renderer/js/electron-bridge.ts

@@ -1,25 +1,58 @@
-import { ipcRenderer } from 'electron';
+import {ipcRenderer} from 'electron';
 
-import events = require('events');
+import {EventEmitter} from 'events';
+
+import {ClipboardDecrypterImpl} from './clipboard-decrypter';
+import {NotificationData, newNotification} from './notification';
 
 type ListenerType = ((...args: any[]) => void);
 
-// we have and will have some non camelcase stuff
+class ElectronBridgeImpl extends EventEmitter implements ElectronBridge {
-// while working with zulip so just turning the rule off
+	send_notification_reply_message_supported: boolean;
-// for the whole file.
+	idle_on_system: boolean;
-/* eslint-disable @typescript-eslint/camelcase */
+	last_active_on_system: number;
-class ElectronBridge extends events {
+
-	send_notification_reply_message_supported = false;
+	constructor() {
-	send_event(eventName: string | symbol, ...args: any[]): void {
+		super();
-		this.emit(eventName, ...args);
+		this.send_notification_reply_message_supported = false;
+		// Indicates if the user is idle or not
+		this.idle_on_system = false;
+
+		// Indicates the time at which user was last active
+		this.last_active_on_system = Date.now();
 	}
 
-	on_event(eventName: string, listener: ListenerType): void {
+	send_event = (eventName: string | symbol, ...args: unknown[]): void => {
+		this.emit(eventName, ...args);
+	};
+
+	on_event = (eventName: string, listener: ListenerType): void => {
 		this.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 => this.idle_on_system;
+
+	get_last_active_on_system = (): number => this.last_active_on_system;
+
+	get_send_notification_reply_message_supported = (): boolean =>
+		this.send_notification_reply_message_supported;
+
+	set_send_notification_reply_message_supported = (value: boolean): void => {
+		this.send_notification_reply_message_supported = value;
+	};
+
+	decrypt_clipboard = (version: number): ClipboardDecrypterImpl =>
+		new ClipboardDecrypterImpl(version);
 }
 
-const electron_bridge = new ElectronBridge();
+const electron_bridge = new ElectronBridgeImpl();
 
 electron_bridge.on('total_unread_count', (...args) => {
 	ipcRenderer.send('unread-count', ...args);
@@ -30,17 +63,19 @@ electron_bridge.on('realm_name', realmName => {
 	ipcRenderer.send('realm-name-changed', serverURL, realmName);
 });
 
-electron_bridge.on('realm_icon_url', iconURL => {
+electron_bridge.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);
 });
 
-// this follows node's idiomatic implementation of event
+// 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 = electron_bridge;
+export default electron_bridge;
-
-/* eslint-enable @typescript-eslint/camelcase */

app/renderer/js/feedback.ts

@@ -1,56 +1,36 @@
-import { remote } from 'electron';
+import {remote} from 'electron';
 import SendFeedback from '@electron-elements/send-feedback';
 
-import path = require('path');
+import path from 'path';
-import fs = require('fs');
+import fs from 'fs';
 
-const { app } = remote;
+const {app} = remote;
-
-interface SendFeedback extends HTMLElement {
-	[key: string]: any;
-}
-
-type SendFeedbackType = SendFeedback;
-
-// 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);
-export const sendFeedback: SendFeedbackType = document.querySelector('send-feedback');
+export const sendFeedback: SendFeedback = document.querySelector('send-feedback');
 export const feedbackHolder = sendFeedback.parentElement;
 
-// customize the fields of custom elements
+// 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: 'akash@zulipchat.com'
+	email: 'support@zulip.com'
 });
 
-feedbackHolder.addEventListener('click', (e: Event) => {
+feedbackHolder.addEventListener('click', (event: Event) => {
-	// only remove the class if the grey out faded
+	// Only remove the class if the grey out faded
 	// part is clicked and not the feedback element itself
-	if (e.target === e.currentTarget) {
+	if (event.target === event.currentTarget) {
 		feedbackHolder.classList.remove('show');
 	}
 });
@@ -61,6 +41,10 @@ sendFeedback.addEventListener('feedback-submitted', () => {
 	}, 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,133 @@
+'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;
+		narrow: {
+			by_subject?: (target_id: number, opts: {trigger?: string}) => void;
+			by_topic?: (target_id: number, opts: {trigger?: string}) => void;
+		};
+		page_params?: {
+			default_language?: string;
+		};
+		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;
+
+	(async () => {
+		if (document.readyState === 'loading') {
+			await new Promise(resolve => {
+				document.addEventListener('DOMContentLoaded', () => {
+					resolve();
+				});
+			});
+		}
+
+		const {page_params} = zulipWindow;
+		if (page_params) {
+			electron_bridge.send_event('zulip-loaded');
+		}
+	})();
+
+	electron_bridge.on_event('narrow-by-topic', (id: number) => {
+		const {narrow} = zulipWindow;
+		const narrowByTopic = narrow.by_topic || narrow.by_subject;
+		narrowByTopic(id, {trigger: 'notification'});
+	});
+
+	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.ts

@@ -1,32 +1,27 @@
-'use strict';
+import {ipcRenderer, remote, clipboard} from 'electron';
+import {feedbackHolder} from './feedback';
 
-import { ipcRenderer, remote, clipboard, shell } from 'electron';
+import path from 'path';
-import { feedbackHolder } from './feedback';
+import escape from 'escape-html';
-
+import isDev from 'electron-is-dev';
-import path = require('path');
+const {session, app, Menu, dialog} = remote;
-import escape = require('escape-html');
-import isDev = require('electron-is-dev');
-const { session, app, Menu, dialog } = remote;
 
 // eslint-disable-next-line import/no-unassigned-import
-require('./tray');
+import './tray';
 
-import DomainUtil = require('./utils/domain-util');
+import * as DomainUtil from './utils/domain-util';
-import WebView = require('./components/webview');
+import WebView from './components/webview';
-import ServerTab = require('./components/server-tab');
+import ServerTab from './components/server-tab';
-import FunctionalTab = require('./components/functional-tab');
+import FunctionalTab from './components/functional-tab';
-import ConfigUtil = require('./utils/config-util');
+import * as ConfigUtil from './utils/config-util';
-import DNDUtil = require('./utils/dnd-util');
+import * as DNDUtil from './utils/dnd-util';
-import ReconnectUtil = require('./utils/reconnect-util');
+import ReconnectUtil from './utils/reconnect-util';
-import Logger = require('./utils/logger-util');
+import Logger from './utils/logger-util';
-import CommonUtil = require('./utils/common-util');
+import * as CommonUtil from './utils/common-util';
-import EnterpriseUtil = require('./utils/enterprise-util');
+import * as EnterpriseUtil from './utils/enterprise-util';
-import Messages = require('./../../resources/messages');
+import * as LinkUtil from './utils/link-util';
-
+import * as Messages from '../../resources/messages';
-const logger = new Logger({
+import type {DNDSettings} from './utils/dnd-util';
-	file: 'errors.log',
-	timestamp: true
-});
 
 interface FunctionalTabProps {
 	name: string;
@@ -34,11 +29,7 @@ interface FunctionalTabProps {
 	url: string;
 }
 
-interface AnyObject {
+interface SettingsOptions extends DNDSettings {
-	[key: string]: any;
-}
-
-interface SettingsOptions {
 	autoHideMenubar: boolean;
 	trayIcon: boolean;
 	useManualProxy: boolean;
@@ -48,28 +39,27 @@ interface SettingsOptions {
 	startAtLogin: boolean;
 	startMinimized: boolean;
 	enableSpellchecker: boolean;
-	showNotification: boolean;
 	autoUpdate: boolean;
 	betaUpdate: boolean;
 	errorReporting: boolean;
 	customCSS: boolean;
-	silent: boolean;
 	lastActiveTab: number;
 	dnd: boolean;
-	dndPreviousSettings: {
+	dndPreviousSettings: DNDSettings;
-		showNotification: boolean;
-		silent: boolean;
-		flashTaskbarOnMessage?: boolean;
-	};
 	downloadsPath: string;
-	showDownloadFolder: boolean;
+	quitOnClose: boolean;
-	flashTaskbarOnMessage?: boolean;
+	promptDownload: boolean;
 	dockBouncing?: boolean;
-	loading?: AnyObject;
+	spellcheckerLanguages?: string[];
 }
 
+const logger = new Logger({
+	file: 'errors.log',
+	timestamp: true
+});
+
 const rendererDirectory = path.resolve(__dirname, '..');
-type ServerOrFunctionalTab = ServerTab | FunctionalTab;
+export type ServerOrFunctionalTab = ServerTab | FunctionalTab;
 
 class ServerManagerView {
 	$addServerButton: HTMLButtonElement;
@@ -90,10 +80,10 @@ class ServerManagerView {
 	$sidebar: Element;
 	$fullscreenPopup: Element;
 	$fullscreenEscapeKey: string;
-	loading: AnyObject;
+	loading: Set<string>;
 	activeTabIndex: number;
 	tabs: ServerOrFunctionalTab[];
-	functionalTabs: AnyObject;
+	functionalTabs: Map<string, number>;
 	tabIndex: number;
 	presetOrgs: string[];
 	constructor() {
@@ -128,29 +118,30 @@ class ServerManagerView {
 		this.$fullscreenEscapeKey = process.platform === 'darwin' ? '^⌘F' : 'F11';
 		this.$fullscreenPopup.innerHTML = `Press ${this.$fullscreenEscapeKey} to exit full screen`;
 
-		this.loading = {};
+		this.loading = new Set();
 		this.activeTabIndex = -1;
 		this.tabs = [];
 		this.presetOrgs = [];
-		this.functionalTabs = {};
+		this.functionalTabs = new Map();
 		this.tabIndex = 0;
 	}
 
-	init(): void {
+	async init(): Promise<void> {
-		this.loadProxy().then(() => {
+		await this.loadProxy();
 		this.initDefaultSettings();
 		this.initSidebar();
-			if (EnterpriseUtil.configFile) {
+		this.removeUAfromDisk();
-				this.initPresetOrgs();
+		if (EnterpriseUtil.hasConfigFile()) {
-			}
+			await this.initPresetOrgs();
-			this.initTabs();
-			this.initActions();
-			this.registerIpcs();
-		});
 		}
 
-	loadProxy(): Promise<boolean> {
+		await this.initTabs();
-		return new Promise(resolve => {
+		this.initActions();
+		this.registerIpcs();
+		ipcRenderer.send('set-spellcheck-langs');
+	}
+
+	async loadProxy(): Promise<void> {
 		// To change proxyEnable to useManualProxy in older versions
 		const proxyEnabledOld = ConfigUtil.isConfigItemExists('useProxy');
 		if (proxyEnabledOld) {
@@ -158,25 +149,25 @@ class ServerManagerView {
 			if (proxyEnableOldState) {
 				ConfigUtil.setConfigItem('useManualProxy', true);
 			}
+
 			ConfigUtil.removeConfigItem('useProxy');
 		}
 
 		const proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');
 		if (proxyEnabled) {
-				session.fromPartition('persist:webviewsession').setProxy({
+			await session.fromPartition('persist:webviewsession').setProxy({
 				pacScript: ConfigUtil.getConfigItem('proxyPAC', ''),
 				proxyRules: ConfigUtil.getConfigItem('proxyRules', ''),
 				proxyBypassRules: ConfigUtil.getConfigItem('proxyBypass', '')
-				}, resolve);
+			});
 		} else {
-				session.fromPartition('persist:webviewsession').setProxy({
+			await 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
@@ -190,7 +181,7 @@ class ServerManagerView {
 			useSystemProxy: false,
 			showSidebar: true,
 			badgeOption: true,
-			startAtLogin: true,
+			startAtLogin: false,
 			startMinimized: false,
 			enableSpellchecker: true,
 			showNotification: true,
@@ -206,7 +197,8 @@ class ServerManagerView {
 				silent: false
 			},
 			downloadsPath: `${app.getPath('downloads')}`,
-			showDownloadFolder: false
+			quitOnClose: false,
+			promptDownload: false
 		};
 
 		// Platform specific settings
@@ -224,15 +216,15 @@ class ServerManagerView {
 
 		if (process.platform !== 'darwin') {
 			settingOptions.autoHideMenubar = false;
+			settingOptions.spellcheckerLanguages = ['en-US'];
 		}
 
-		for (const i in settingOptions) {
+		for (const [setting, value] of Object.entries(settingOptions)) {
-			const setting = i as keyof SettingsOptions;
+			// Give preference to defaults defined in global_config.json
-			// give preference to defaults defined in global_config.json
 			if (EnterpriseUtil.configItemExists(setting)) {
 				ConfigUtil.setConfigItem(setting, EnterpriseUtil.getConfigItem(setting), true);
 			} else if (ConfigUtil.getConfigItem(setting) === null) {
-				ConfigUtil.setConfigItem(setting, settingOptions[setting]);
+				ConfigUtil.setConfigItem(setting, value);
 			}
 		}
 	}
@@ -242,97 +234,122 @@ class ServerManagerView {
 		this.toggleSidebar(showSidebar);
 	}
 
-	async queueDomain(domain: any): Promise<boolean> {
+	// Remove the stale UA string from the disk if the app is not freshly
-		// allows us to start adding multiple domains to the app simultaneously
+	// installed.  This should be removed in a further release.
+	removeUAfromDisk(): void {
+		ConfigUtil.removeConfigItem('userAgent');
+	}
+
+	async queueDomain(domain: string): Promise<boolean> {
+		// Allows us to start adding multiple domains to the app simultaneously
 		// promise of addition resolves in both cases, but we consider it rejected
 		// if the resolved value is false
 		try {
 			const serverConf = await DomainUtil.checkDomain(domain);
 			await DomainUtil.addDomain(serverConf);
 			return true;
-		} catch (err) {
+		} catch (error) {
-			logger.error(err);
+			logger.error(error);
-			logger.error('Could not add ' + domain + '. Please contact your system administrator.');
+			logger.error(`Could not add ${domain}. Please contact your system administrator.`);
 			return false;
 		}
 	}
 
 	async initPresetOrgs(): Promise<void> {
-		// read preset organizations from global_config.json and queues them
+		// Read preset organizations from global_config.json and queues them
 		// for addition to the app's domains
 		const preAddedDomains = DomainUtil.getDomains();
 		this.presetOrgs = EnterpriseUtil.getConfigItem('presetOrganizations', []);
-		// set to true if at least one new domain is added
+		// Set to true if at least one new domain is added
 		const domainPromises = [];
 		for (const url of this.presetOrgs) {
 			if (DomainUtil.duplicateDomain(url)) {
 				continue;
 			}
+
 			domainPromises.push(this.queueDomain(url));
 		}
+
 		const domainsAdded = await Promise.all(domainPromises);
 		if (domainsAdded.includes(true)) {
-			// at least one domain was resolved
+			// At least one domain was resolved
 			if (preAddedDomains.length > 0) {
-				// user already has servers added
+				// User already has servers added
 				// ask them before reloading the app
-				dialog.showMessageBox({
+				const {response} = await dialog.showMessageBox({
 					type: 'question',
 					buttons: ['Yes', 'Later'],
 					defaultId: 0,
 					message: 'New server' + (domainsAdded.length > 1 ? 's' : '') + ' added. Reload app now?'
-				}, response => {
+				});
 				if (response === 0) {
 					ipcRenderer.send('reload-full-app');
 				}
-				});
 			} else {
 				ipcRenderer.send('reload-full-app');
 			}
 		} else if (domainsAdded.length > 0) {
-			// find all orgs that failed
+			// Find all orgs that failed
 			const failedDomains: string[] = [];
 			for (const org of this.presetOrgs) {
 				if (DomainUtil.duplicateDomain(org)) {
 					continue;
 				}
+
 				failedDomains.push(org);
 			}
-			const { title, content } = Messages.enterpriseOrgError(domainsAdded.length, failedDomains);
+
+			const {title, content} = Messages.enterpriseOrgError(domainsAdded.length, failedDomains);
 			dialog.showErrorBox(title, content);
 			if (DomainUtil.getDomains().length === 0) {
-				// no orgs present, stop showing loading gif
+				// No orgs present, stop showing loading gif
-				this.openSettings('AddServer');
+				await this.openSettings('AddServer');
 			}
 		}
 	}
 
-	initTabs(): void {
+	async initTabs(): Promise<void> {
 		const servers = DomainUtil.getDomains();
 		if (servers.length > 0) {
-			for (let i = 0; i < servers.length; i++) {
+			for (const [i, server] of servers.entries()) {
-				this.initServer(servers[i], i);
+				this.initServer(server, i);
-				DomainUtil.updateSavedServer(servers[i].url, i);
-				this.activateTab(i);
 			}
+
 			// Open last active tab
-			this.activateTab(ConfigUtil.getConfigItem('lastActiveTab'));
+			let lastActiveTab = ConfigUtil.getConfigItem('lastActiveTab');
+			if (lastActiveTab >= servers.length) {
+				lastActiveTab = 0;
+			}
+
+			// `checkDomain()` and `webview.load()` for lastActiveTab before the others
+			await DomainUtil.updateSavedServer(servers[lastActiveTab].url, lastActiveTab);
+			this.activateTab(lastActiveTab);
+			await Promise.all(servers.map(async (server, i) => {
+				// After the lastActiveTab is activated, we load the others in the background
+				// without activating them, to prevent flashing of server icons
+				if (i === lastActiveTab) {
+					return;
+				}
+
+				await DomainUtil.updateSavedServer(server.url, i);
+				this.tabs[i].webview.load();
+			}));
 			// Remove focus from the settings icon at sidebar bottom
 			this.$settingsButton.classList.remove('active');
 		} else if (this.presetOrgs.length === 0) {
-			// not attempting to add organisations in the background
+			// Not attempting to add organisations in the background
-			this.openSettings('AddServer');
+			await this.openSettings('AddServer');
 		} else {
 			this.showLoading(true);
 		}
 	}
 
-	initServer(server: any, index: number): void {
+	initServer(server: DomainUtil.ServerConf, index: number): void {
 		const tabIndex = this.getTabIndex();
 		this.tabs.push(new ServerTab({
 			role: 'server',
 			icon: server.icon,
-			name: server.alias,
+			name: CommonUtil.decodeString(server.alias),
 			$root: this.$tabsContainer,
 			onClick: this.activateLastTab.bind(this, index),
 			index,
@@ -346,24 +363,25 @@ class ServerManagerView {
 				url: server.url,
 				role: 'server',
 				name: CommonUtil.decodeString(server.alias),
-				isActive: () => {
+				hasPermission: (origin: string, permission: string) =>
-					return index === this.activeTabIndex;
+					origin === server.url && permission === 'notifications',
-				},
+				isActive: () => index === this.activeTabIndex,
 				switchLoading: (loading: boolean, url: string) => {
-					if (!loading && this.loading[url]) {
+					if (loading) {
-						this.loading[url] = false;
+						this.loading.add(url);
-					} else if (loading && !this.loading[url]) {
+					} else {
-						this.loading[url] = true;
+						this.loading.delete(url);
 					}
-					this.showLoading(this.loading[this.tabs[this.activeTabIndex].webview.props.url]);
+
+					this.showLoading(this.loading.has(this.tabs[this.activeTabIndex].webview.props.url));
 				},
-				onNetworkError: this.openNetworkTroubleshooting.bind(this),
+				onNetworkError: (index: number) => this.openNetworkTroubleshooting(index),
 				onTitleChange: this.updateBadge.bind(this),
 				nodeIntegration: false,
 				preload: true
 			})
 		}));
-		this.loading[server.url] = true;
+		this.loading.add(server.url);
 	}
 
 	initActions(): void {
@@ -379,6 +397,7 @@ class ServerManagerView {
 			if ($serverImg.src.includes('img/icon.png')) {
 				this.displayInitialCharLogo($serverImg, index);
 			}
+
 			$serverImg.addEventListener('error', () => {
 				this.displayInitialCharLogo($serverImg, index);
 			});
@@ -393,11 +412,11 @@ class ServerManagerView {
 		this.$reloadButton.addEventListener('click', () => {
 			this.tabs[this.activeTabIndex].webview.reload();
 		});
-		this.$addServerButton.addEventListener('click', () => {
+		this.$addServerButton.addEventListener('click', async () => {
-			this.openSettings('AddServer');
+			await this.openSettings('AddServer');
 		});
-		this.$settingsButton.addEventListener('click', () => {
+		this.$settingsButton.addEventListener('click', async () => {
-			this.openSettings('General');
+			await this.openSettings('General');
 		});
 		this.$backButton.addEventListener('click', () => {
 			this.tabs[this.activeTabIndex].webview.back();
@@ -427,10 +446,9 @@ class ServerManagerView {
 	}
 
 	displayInitialCharLogo($img: HTMLImageElement, index: number): void {
-		/*
+		// The index parameter is needed because webview[data-tab-id] can
-			index parameter needed because webview[data-tab-id] can increment
+		// increment beyond the size of the sidebar org array and throw an
-			beyond size of sidebar org array and throw error
+		// error
-		*/
 
 		const $altIcon = document.createElement('div');
 		const $parent = $img.parentElement;
@@ -448,7 +466,7 @@ class ServerManagerView {
 		$altIcon.classList.add('server-icon');
 		$altIcon.classList.add('alt-icon');
 
-		$parent.removeChild($img);
+		$img.remove();
 		$parent.append($altIcon);
 
 		this.addContextMenu($altIcon as HTMLImageElement, index);
@@ -462,8 +480,8 @@ class ServerManagerView {
 			// 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();
+				const {top} = SidebarButton.getBoundingClientRect();
-				SidebarTooltip.style.top = top + 'px';
+				SidebarTooltip.style.top = `${top}px`;
 			}
 		});
 		SidebarButton.addEventListener('mouseout', () => {
@@ -472,14 +490,14 @@ class ServerManagerView {
 	}
 
 	onHover(index: number): void {
-		// this.$serverIconTooltip[index].innerHTML already has realm name, so we are just
+		// `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();
+		const {top} = this.$serverIconTooltip[index].parentElement.getBoundingClientRect();
-		this.$serverIconTooltip[index].style.top = top + 'px';
+		this.$serverIconTooltip[index].style.top = `${top}px`;
 	}
 
 	onHoverOut(index: number): void {
@@ -487,12 +505,12 @@ class ServerManagerView {
 	}
 
 	openFunctionalTab(tabProps: FunctionalTabProps): void {
-		if (this.functionalTabs[tabProps.name] !== undefined) {
+		if (this.functionalTabs.has(tabProps.name)) {
-			this.activateTab(this.functionalTabs[tabProps.name]);
+			this.activateTab(this.functionalTabs.get(tabProps.name));
 			return;
 		}
 
-		this.functionalTabs[tabProps.name] = this.tabs.length;
+		this.functionalTabs.set(tabProps.name, this.tabs.length);
 
 		const tabIndex = this.getTabIndex();
 
@@ -501,29 +519,28 @@ class ServerManagerView {
 			materialIcon: tabProps.materialIcon,
 			name: tabProps.name,
 			$root: this.$tabsContainer,
-			index: this.functionalTabs[tabProps.name],
+			index: this.functionalTabs.get(tabProps.name),
 			tabIndex,
-			onClick: this.activateTab.bind(this, this.functionalTabs[tabProps.name]),
+			onClick: this.activateTab.bind(this, this.functionalTabs.get(tabProps.name)),
-			onDestroy: this.destroyTab.bind(this, tabProps.name, this.functionalTabs[tabProps.name]),
+			onDestroy: this.destroyTab.bind(this, tabProps.name, this.functionalTabs.get(tabProps.name)),
 			webview: new WebView({
 				$root: this.$webviewsContainer,
-				index: this.functionalTabs[tabProps.name],
+				index: this.functionalTabs.get(tabProps.name),
 				tabIndex,
 				url: tabProps.url,
 				role: 'function',
 				name: tabProps.name,
-				isActive: () => {
+				isActive: () => this.functionalTabs.get(tabProps.name) === this.activeTabIndex,
-					return this.functionalTabs[tabProps.name] === this.activeTabIndex;
+				switchLoading: (loading: boolean, url: string) => {
-				},
+					if (loading) {
-				switchLoading: (loading: AnyObject, url: string) => {
+						this.loading.add(url);
-					if (!loading && this.loading[url]) {
+					} else {
-						this.loading[url] = false;
+						this.loading.delete(url);
-					} else if (loading && !this.loading[url]) {
-						this.loading[url] = true;
 					}
-					this.showLoading(this.loading[this.tabs[this.activeTabIndex].webview.props.url]);
+
+					this.showLoading(this.loading.has(this.tabs[this.activeTabIndex].webview.props.url));
 				},
-				onNetworkError: this.openNetworkTroubleshooting.bind(this),
+				onNetworkError: (index: number) => this.openNetworkTroubleshooting(index),
 				onTitleChange: this.updateBadge.bind(this),
 				nodeIntegration: true,
 				preload: false
@@ -534,17 +551,17 @@ class ServerManagerView {
 		// closed when the functional tab DOM is ready, handled in webview.js
 		this.$webviewsContainer.classList.remove('loaded');
 
-		this.activateTab(this.functionalTabs[tabProps.name]);
+		this.activateTab(this.functionalTabs.get(tabProps.name));
 	}
 
-	openSettings(nav = 'General'): void {
+	async openSettings(nav = 'General'): Promise<void> {
 		this.openFunctionalTab({
 			name: 'Settings',
 			materialIcon: 'settings',
 			url: `file://${rendererDirectory}/preference.html#${nav}`
 		});
 		this.$settingsButton.classList.add('active');
-		this.tabs[this.functionalTabs.Settings].webview.send('switch-settings-nav', nav);
+		await this.tabs[this.functionalTabs.get('Settings')].webview.send('switch-settings-nav', nav);
 	}
 
 	openAbout(): void {
@@ -555,12 +572,11 @@ class ServerManagerView {
 		});
 	}
 
-	openNetworkTroubleshooting(): void {
+	openNetworkTroubleshooting(index: number): void {
-		this.openFunctionalTab({
+		const reconnectUtil = new ReconnectUtil(this.tabs[index].webview);
-			name: 'Network Troubleshooting',
+		reconnectUtil.pollInternetAndReload();
-			materialIcon: 'network_check',
+		this.tabs[index].webview.props.url = `file://${rendererDirectory}/network.html`;
-			url: `file://${rendererDirectory}/network.html`
+		this.tabs[index].showNetworkError();
-		});
 	}
 
 	activateLastTab(index: number): void {
@@ -570,7 +586,7 @@ class ServerManagerView {
 		ipcRenderer.send('save-last-tab', index);
 	}
 
-	// returns this.tabs in an way that does
+	// 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.
@@ -580,7 +596,7 @@ class ServerManagerView {
 			const proto = Object.create(Object.getPrototypeOf(tab));
 			const tabClone = Object.assign(proto, tab);
 
-			tabClone.webview = { props: {} };
+			tabClone.webview = {props: {}};
 			tabClone.webview.props.name = tab.webview.props.name;
 			delete tabClone.props.webview;
 			tabs.push(tabClone);
@@ -597,24 +613,27 @@ class ServerManagerView {
 		if (this.activeTabIndex !== -1) {
 			if (this.activeTabIndex === index) {
 				return;
-			} else if (hideOldTab) {
+			}
+
+			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) {
+		} catch {
 		}
 
 		this.activeTabIndex = index;
 		this.tabs[index].activate();
 
-		this.showLoading(this.loading[this.tabs[this.activeTabIndex].webview.props.url]);
+		this.showLoading(this.loading.has(this.tabs[this.activeTabIndex].webview.props.url));
 
 		ipcRenderer.send('update-menu', {
 			// JSON stringify this.tabs to avoid a crash
@@ -644,7 +663,7 @@ class ServerManagerView {
 		this.tabs[index].destroy();
 
 		delete this.tabs[index];
-		delete this.functionalTabs[name];
+		this.functionalTabs.delete(name);
 
 		// Issue #188: If the functional tab was not focused, do not activate another tab.
 		if (this.activeTabIndex === index) {
@@ -659,21 +678,21 @@ class ServerManagerView {
 		// Clear global variables
 		this.activeTabIndex = -1;
 		this.tabs = [];
-		this.functionalTabs = {};
+		this.functionalTabs.clear();
 
 		// Clear DOM elements
 		this.$tabsContainer.innerHTML = '';
 		this.$webviewsContainer.innerHTML = '';
 	}
 
-	reloadView(): void {
+	async reloadView(): Promise<void> {
 		// 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();
+		await this.initTabs();
 		this.initServerActions();
 	}
 
@@ -696,11 +715,9 @@ class ServerManagerView {
 		ipcRenderer.send('update-badge', messageCountAll);
 	}
 
-	updateGeneralSettings(setting: string, value: any): void {
+	updateGeneralSettings(setting: string, value: unknown): void {
-		const selector = 'webview:not([class*=disabled])';
+		if (this.getActiveWebview()) {
-		const webview: Electron.WebviewTag = document.querySelector(selector);
+			const webContents = remote.webContents.fromId(this.getActiveWebview().getWebContentsId());
-		if (webview) {
-			const webContents = webview.getWebContents();
 			webContents.send(setting, value);
 		}
 	}
@@ -719,28 +736,47 @@ class ServerManagerView {
 		this.$dndButton.querySelector('i').textContent = alert ? 'notifications_off' : 'notifications';
 	}
 
+	isLoggedIn(tabIndex: number): boolean {
+		const url = this.tabs[tabIndex].webview.$el.src;
+		return !(url.endsWith('/login/') || this.tabs[tabIndex].webview.loading);
+	}
+
+	getActiveWebview(): Electron.WebviewTag {
+		const selector = 'webview:not(.disabled)';
+		const webview: Electron.WebviewTag = document.querySelector(selector);
+		return webview;
+	}
+
 	addContextMenu($serverImg: HTMLImageElement, index: number): void {
-		$serverImg.addEventListener('contextmenu', e => {
+		$serverImg.addEventListener('contextmenu', event => {
-			e.preventDefault();
+			event.preventDefault();
 			const template = [
 				{
 					label: 'Disconnect organization',
-					click: () => {
+					click: async () => {
-						dialog.showMessageBox({
+						const {response} = await dialog.showMessageBox({
 							type: 'warning',
 							buttons: ['YES', 'NO'],
 							defaultId: 0,
 							message: 'Are you sure you want to disconnect this organization?'
-						}, response => {
+						});
 						if (response === 0) {
 							if (DomainUtil.removeDomain(index)) {
 								ipcRenderer.send('reload-full-app');
 							} else {
-									const { title, content } = Messages.orgRemovalError(DomainUtil.getDomain(index).url);
+								const {title, content} = Messages.orgRemovalError(DomainUtil.getDomain(index).url);
 								dialog.showErrorBox(title, content);
 							}
 						}
-						});
+					}
+				},
+				{
+					label: 'Notification settings',
+					enabled: this.isLoggedIn(index),
+					click: () => {
+						// Switch to tab whose icon was right-clicked
+						this.activateTab(index);
+						this.tabs[index].webview.showNotificationSettings();
 					}
 				},
 				{
@@ -751,43 +787,70 @@ class ServerManagerView {
 				}
 			];
 			const contextMenu = Menu.buildFromTemplate(template);
-			contextMenu.popup({ window: remote.getCurrentWindow() });
+			contextMenu.popup({window: remote.getCurrentWindow()});
 		});
 	}
 
 	registerIpcs(): void {
-		const webviewListeners: AnyObject = {
+		const webviewListeners: Array<[string, (webview: WebView) => void]> = [
-			'webview-reload': 'reload',
+			['webview-reload', webview => webview.reload()],
-			back: 'back',
+			['back', webview => webview.back()],
-			focus: 'focus',
+			['focus', webview => webview.focus()],
-			forward: 'forward',
+			['forward', webview => webview.forward()],
-			zoomIn: 'zoomIn',
+			['zoomIn', webview => webview.zoomIn()],
-			zoomOut: 'zoomOut',
+			['zoomOut', webview => webview.zoomOut()],
-			zoomActualSize: 'zoomActualSize',
+			['zoomActualSize', webview => webview.zoomActualSize()],
-			'log-out': 'logOut',
+			['log-out', webview => webview.logOut()],
-			shortcut: 'showShortcut',
+			['shortcut', webview => webview.showShortcut()],
-			'tab-devtools': 'openDevTools'
+			['tab-devtools', webview => webview.openDevTools()]
-		};
+		];
 
-		for (const key in webviewListeners) {
+		for (const [channel, listener] of webviewListeners) {
-			ipcRenderer.on(key, () => {
+			ipcRenderer.on(channel, () => {
 				const activeWebview = this.tabs[this.activeTabIndex].webview;
 				if (activeWebview) {
-					activeWebview[webviewListeners[key] as string]();
+					listener(activeWebview);
 				}
 			});
 		}
 
-		ipcRenderer.on('open-settings', (event: Event, settingNav: string) => {
+		ipcRenderer.on('permission-request', (
-			this.openSettings(settingNav);
+			event: Event,
+			{webContentsId, origin, permission}: {
+				webContentsId: number | null;
+				origin: string;
+				permission: string;
+			},
+			rendererCallbackId: number
+		) => {
+			const grant = webContentsId === null ?
+				origin === 'null' && permission === 'notifications' :
+				this.tabs.some(
+					({webview}) =>
+						!webview.loading &&
+						webview.$el.getWebContentsId() === webContentsId &&
+						webview.props.hasPermission?.(origin, permission)
+				);
+			console.log(
+				grant ? 'Granted' : 'Denied', 'permissions request for',
+				permission, 'from', origin
+			);
+			ipcRenderer.send('renderer-callback', rendererCallbackId, grant);
+		});
+
+		ipcRenderer.on('show-network-error', (event: Event, index: number) => {
+			this.openNetworkTroubleshooting(index);
+		});
+
+		ipcRenderer.on('open-settings', async (event: Event, settingNav: string) => {
+			await this.openSettings(settingNav);
 		});
 
 		ipcRenderer.on('open-about', this.openAbout.bind(this));
 
-		ipcRenderer.on('open-help', () => {
+		ipcRenderer.on('open-help', async () => {
 			// Open help page of current active server
-			const helpPage = this.getCurrentActiveServer() + '/help';
+			await LinkUtil.openBrowser(new URL('https://zulip.com/help/'));
-			shell.openExternal(helpPage);
 		});
 
 		ipcRenderer.on('reload-viewer', this.reloadView.bind(this, this.tabs[this.activeTabIndex].props.index));
@@ -798,26 +861,24 @@ class ServerManagerView {
 			ipcRenderer.send('reload-full-app');
 		});
 
-		ipcRenderer.on('clear-app-data', () => {
-			ipcRenderer.send('clear-app-settings');
-		});
-
 		ipcRenderer.on('switch-server-tab', (event: Event, index: number) => {
 			this.activateLastTab(index);
 		});
 
-		ipcRenderer.on('open-org-tab', () => {
+		ipcRenderer.on('open-org-tab', async () => {
-			this.openSettings('AddServer');
+			await this.openSettings('AddServer');
 		});
 
-		ipcRenderer.on('reload-proxy', (event: Event, showAlert: boolean) => {
+		ipcRenderer.on('reload-proxy', async (event: Event, showAlert: boolean) => {
-			this.loadProxy().then(() => {
+			await this.loadProxy();
 			if (showAlert) {
-					alert('Proxy settings saved!');
+				await dialog.showMessageBox({
+					message: 'Proxy settings saved!',
+					buttons: ['OK']
+				});
 				ipcRenderer.send('reload-full-app');
 			}
 		});
-		});
 
 		ipcRenderer.on('toggle-sidebar', (event: Event, show: boolean) => {
 			// Toggle the left sidebar
@@ -832,8 +893,8 @@ class ServerManagerView {
 			webviews.forEach(webview => {
 				try {
 					webview.setAudioMuted(state);
-				} catch (err) {
+				} catch {
-					// webview is not ready yet
+					// Webview is not ready yet
 					webview.addEventListener('dom-ready', () => {
 						webview.setAudioMuted(state);
 					});
@@ -849,31 +910,28 @@ class ServerManagerView {
 				});
 				return;
 			}
+
 			this.updateGeneralSettings('toggle-menubar-setting', autoHideMenubar);
 		});
 
-		ipcRenderer.on('toggle-dnd', (event: Event, state: boolean, newSettings: SettingsOptions) => {
+		ipcRenderer.on('toggle-dnd', (event: Event, state: boolean, newSettings: DNDSettings) => {
 			this.toggleDNDButton(state);
 			ipcRenderer.send('forward-message', 'toggle-silent', newSettings.silent);
-			const selector = 'webview:not([class*=disabled])';
+			const webContents = remote.webContents.fromId(this.getActiveWebview().getWebContentsId());
-			const webview: Electron.WebviewTag = document.querySelector(selector);
-			const webContents = webview.getWebContents();
 			webContents.send('toggle-dnd', state, newSettings);
 		});
 
 		ipcRenderer.on('update-realm-name', (event: Event, serverURL: string, realmName: string) => {
-			// TODO: TypeScript - Type annotate getDomains() or this domain paramter.
+			DomainUtil.getDomains().forEach((domain: DomainUtil.ServerConf, index: number) => {
-			DomainUtil.getDomains().forEach((domain: any, index: number) => {
 				if (domain.url.includes(serverURL)) {
-					const serverTooltipSelector = `.tab .server-tooltip`;
+					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.updateDomain(index, domain);
-					DomainUtil.reloadDB();
 					// Update the realm name also on the Window menu
 					ipcRenderer.send('update-menu', {
 						tabs: this.tabsForIpc,
@@ -884,18 +942,17 @@ class ServerManagerView {
 		});
 
 		ipcRenderer.on('update-realm-icon', (event: Event, serverURL: string, iconURL: string) => {
-			// TODO: TypeScript - Type annotate getDomains() or this domain paramter.
+			DomainUtil.getDomains().forEach(async (domain, index) => {
-			DomainUtil.getDomains().forEach((domain: any, index: number) => {
 				if (domain.url.includes(serverURL)) {
-					DomainUtil.saveServerIcon(iconURL).then((localIconUrl: string) => {
+					const localIconUrl: string = await DomainUtil.saveServerIcon({
-						const serverImgsSelector = `.tab .server-icons`;
+						url: serverURL,
+						icon: iconURL
+					});
+					const serverImgsSelector = '.tab .server-icons';
 					const serverImgs: NodeListOf<HTMLImageElement> = document.querySelectorAll(serverImgsSelector);
 					serverImgs[index].src = localIconUrl;
-
 					domain.icon = localIconUrl;
-						DomainUtil.db.push(`/domains[${index}]`, domain, true);
+					DomainUtil.updateDomain(index, domain);
-						DomainUtil.reloadDB();
-					});
 				}
 			});
 		});
@@ -912,7 +969,7 @@ class ServerManagerView {
 		ipcRenderer.on('focus-webview-with-id', (event: Event, webviewId: number) => {
 			const webviews: NodeListOf<Electron.WebviewTag> = document.querySelectorAll('webview');
 			webviews.forEach(webview => {
-				const currentId = webview.getWebContents().id;
+				const currentId = webview.getWebContentsId();
 				const tabId = webview.getAttribute('data-tab-id');
 				const concurrentTab: HTMLButtonElement = document.querySelector(`div[data-tab-id="${tabId}"]`);
 				if (currentId === webviewId) {
@@ -945,8 +1002,10 @@ class ServerManagerView {
 					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));
 		});
 
@@ -958,33 +1017,41 @@ class ServerManagerView {
 			clipboard.writeText(this.getCurrentActiveServer());
 		});
 
-		ipcRenderer.on('new-server', () => {
+		ipcRenderer.on('new-server', async () => {
-			this.openSettings('AddServer');
+			await this.openSettings('AddServer');
+		});
+
+		// Redo and undo functionality since the default API doesn't work on macOS
+		ipcRenderer.on('undo', () => this.getActiveWebview().undo());
+
+		ipcRenderer.on('redo', () => this.getActiveWebview().redo());
+
+		ipcRenderer.on('set-active', async () => {
+			const webviews: NodeListOf<Electron.WebviewTag> = document.querySelectorAll('webview');
+			await Promise.all([...webviews].map(async webview => webview.send('set-active')));
+		});
+
+		ipcRenderer.on('set-idle', async () => {
+			const webviews: NodeListOf<Electron.WebviewTag> = document.querySelectorAll('webview');
+			await Promise.all([...webviews].map(async webview => webview.send('set-idle')));
+		});
+
+		ipcRenderer.on('open-network-settings', async () => {
+			await this.openSettings('Network');
 		});
 	}
 }
 
-window.addEventListener('load', () => {
+window.addEventListener('load', async () => {
-	const serverManagerView = new ServerManagerView();
+	// Only start electron-connect (auto reload on change) when its ran
-	const reconnectUtil = new ReconnectUtil(serverManagerView);
+	// from `npm run dev` or `gulp dev` and not from `npm start`
-	serverManagerView.init();
+	if (isDev && remote.getGlobal('process').argv.includes('--electron-connect')) {
-	window.addEventListener('online', () => {
+		// eslint-disable-next-line node/no-unsupported-features/es-syntax
-		reconnectUtil.pollInternetAndReload();
+		(await import('electron-connect')).client.create();
-	});
-
-	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')) {
-		require('electron-connect').client.create();
 	}
+
+	const serverManagerView = new ServerManagerView();
+	await serverManagerView.init();
 });
 
-export = new ServerManagerView();
+export { };

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

@@ -1,34 +1,31 @@
-'use strict';
+import {ipcRenderer} from 'electron';
-import { ipcRenderer } from 'electron';
 import {
-	appId, customReply, focusCurrentServer, parseReply, setupReply
+	appId, customReply, focusCurrentServer, parseReply
 } from './helpers';
 
-import url = require('url');
+import MacNotifier from 'node-mac-notifier';
-import MacNotifier = require('node-mac-notifier');
+import * as ConfigUtil from '../utils/config-util';
-import ConfigUtil = require('../utils/config-util');
+import electron_bridge from '../electron-bridge';
 
 type ReplyHandler = (response: string) => void;
 type ClickHandler = () => void;
 let replyHandler: ReplyHandler;
 let clickHandler: ClickHandler;
 
-declare const window: ZulipWebWindow;
 interface NotificationHandlerArgs {
 	response: string;
 }
 
 class DarwinNotification {
-	tag: string;
+	tag: number;
 
-	constructor(title: string, opts: NotificationOptions) {
+	constructor(title: string, options: NotificationOptions) {
 		const silent: boolean = ConfigUtil.getConfigItem('silent') || false;
-		const { host, protocol } = location;
+		const {icon} = options;
-		const { icon } = opts;
+		const profilePic = new URL(icon, location.href).href;
-		const profilePic = url.resolve(`${protocol}//${host}`, icon);
 
-		this.tag = opts.tag;
+		this.tag = Number.parseInt(options.tag, 10);
-		const notification = new MacNotifier(title, Object.assign(opts, {
+		const notification = new MacNotifier(title, Object.assign(options, {
 			bundleId: appId,
 			canReply: true,
 			silent,
@@ -36,7 +33,7 @@ class DarwinNotification {
 		}));
 
 		notification.addEventListener('click', () => {
-			// focus to the server who sent the
+			// Focus to the server who sent the
 			// notification if not focused already
 			if (clickHandler) {
 				clickHandler();
@@ -50,7 +47,7 @@ class DarwinNotification {
 	}
 
 	static requestPermission(): void {
-		return; // eslint-disable-line no-useless-return
+		// Do nothing
 	}
 
 	// Override default Notification permission
@@ -58,23 +55,23 @@ class DarwinNotification {
 		return ConfigUtil.getConfigItem('showNotification') ? 'granted' : 'denied';
 	}
 
-	set onreply(handler: ReplyHandler) {
-		replyHandler = handler;
-	}
-
 	get onreply(): ReplyHandler {
 		return replyHandler;
 	}
 
-	set onclick(handler: ClickHandler) {
+	set onreply(handler: ReplyHandler) {
-		clickHandler = handler;
+		replyHandler = handler;
 	}
 
 	get onclick(): ClickHandler {
 		return clickHandler;
 	}
 
-	// not something that is common or
+	set onclick(handler: ClickHandler) {
+		clickHandler = handler;
+	}
+
+	// Not something that is common or
 	// used by zulip server but added to be
 	// future proff.
 	addEventListener(event: string, handler: ClickHandler | ReplyHandler): void {
@@ -87,15 +84,15 @@ class DarwinNotification {
 		}
 	}
 
-	notificationHandler({ response }: NotificationHandlerArgs): void {
+	async notificationHandler({response}: NotificationHandlerArgs): Promise<void> {
-		response = parseReply(response);
+		response = await parseReply(response);
 		focusCurrentServer();
-		if (window.electron_bridge.send_notification_reply_message_supported) {
+		if (electron_bridge.send_notification_reply_message_supported) {
-			window.electron_bridge.send_event('send_notification_reply_message', this.tag, response);
+			electron_bridge.send_event('send_notification_reply_message', this.tag, response);
 			return;
 		}
 
-		setupReply(this.tag);
+		electron_bridge.emit('narrow-by-topic', this.tag);
 		if (replyHandler) {
 			replyHandler(response);
 			return;
@@ -104,10 +101,10 @@ class DarwinNotification {
 		customReply(response);
 	}
 
-	// method specific to notification api
+	// Method specific to notification api
 	// used by zulip
 	close(): void {
-		return; // eslint-disable-line no-useless-return
+		// Do nothing
 	}
 }
 

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

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

app/renderer/js/notification/helpers.ts

@@ -1,6 +1,6 @@
-import { remote } from 'electron';
+import {remote} from 'electron';
 
-import Logger = require('../utils/logger-util');
+import Logger from '../utils/logger-util';
 
 const logger = new Logger({
 	file: 'errors.log',
@@ -14,37 +14,28 @@ export type BotListItem = [string, string];
 const botsList: BotListItem[] = [];
 let botsListLoaded = false;
 
-// this function load list of bots from the server
+// 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
-export function loadBots(sync = false): void {
+export async function loadBots(): Promise<void> {
-	const { $ } = window;
 	botsList.length = 0;
-	if (sync) {
+	const response = await fetch('/json/users');
-		$.ajaxSetup({async: false});
+	if (response.ok) {
-	}
+		const {members} = await response.json();
-	$.getJSON('/json/users')
+		members.forEach(({is_bot, full_name}: {[key: string]: unknown}) => {
-		.done((data: any) => {
+			if (is_bot && typeof full_name === 'string') {
-			const { members } = data;
+				const bot = `@${full_name}`;
-			members.forEach((membersRow: any) => {
-				if (membersRow.is_bot) {
-					const bot = `@${membersRow.full_name}`;
 				const mention = `@**${bot.replace(/^@/, '')}**`;
 				botsList.push([bot, mention]);
 			}
 		});
 		botsListLoaded = true;
-		})
+	} else {
-		.fail((error: any) => {
+		logger.log('Load bots request failed: ', await response.text());
-			logger.log('Load bots request failed: ', error.responseText);
+		logger.log('Load bots request status: ', response.status);
-			logger.log('Load bots request status: ', error.statusText);
-		});
-	if (sync) {
-		$.ajaxSetup({async: true});
 	}
 }
 
-export function checkElements(...elements: any[]): boolean {
+export function checkElements(...elements: unknown[]): boolean {
 	let status = true;
 	elements.forEach(element => {
 		if (element === null || element === undefined) {
@@ -55,14 +46,14 @@ export function checkElements(...elements: any[]): boolean {
 }
 
 export function customReply(reply: string): void {
-	// server does not support notification reply yet.
+	// 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: HTMLInputElement = document.querySelector('#compose-textarea');
 	const messagebox: HTMLButtonElement = document.querySelector(messageboxSelector);
 	const sendButton: HTMLButtonElement = document.querySelector(buttonSelector);
 
-	// sanity check for old server versions
+	// Sanity check for old server versions
 	const elementsExists = checkElements(textarea, messagebox, sendButton);
 	if (!elementsExists) {
 		return;
@@ -77,19 +68,18 @@ const currentWindow = remote.getCurrentWindow();
 const webContents = remote.getCurrentWebContents();
 const webContentsId = webContents.id;
 
-// this function will focus the server that sent
+// This function will focus the server that sent
 // the notification. Main function implemented in main.js
 export function focusCurrentServer(): void {
-	// TODO: TypeScript: currentWindow of type BrowserWindow doesn't
+	currentWindow.webContents.send('focus-webview-with-id', webContentsId);
-	// have a .send() property per typescript.
-	(currentWindow as any).send('focus-webview-with-id', webContentsId);
 }
-// this function parses the reply from to notification
+
+// 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
-export function parseReply(reply: string): string {
+export async function parseReply(reply: string): Promise<string> {
 	const usersDiv = document.querySelectorAll('#user_presences li');
 	const streamHolder = document.querySelectorAll('#stream_filters li');
 
@@ -128,9 +118,9 @@ export function parseReply(reply: string): string {
 		reply = reply.replace(regex, streamMention);
 	});
 
-	// If botsList isn't completely loaded yet, make a synchronous getJSON request for list
+	// If botsList isn't completely loaded yet, make a request for list
-	if (botsListLoaded === false) {
+	if (!botsListLoaded) {
-		loadBots(true);
+		await loadBots();
 	}
 
 	// Iterate for every bot name and replace in reply
@@ -145,9 +135,3 @@ export function parseReply(reply: string): string {
 	reply = reply.replace(/\\n/, '\n');
 	return reply;
 }
-
-export function setupReply(id: string): void {
-	const { narrow } = window;
-	const narrowByTopic = narrow.by_topic || narrow.by_subject;
-	narrowByTopic(id, { trigger: 'notification' });
-}

app/renderer/js/notification/index.ts

@@ -1,25 +1,73 @@
-'use strict';
+import {remote} from 'electron';
+import electron_bridge from '../electron-bridge';
+import {appId, loadBots} from './helpers';
 
-import { remote } from 'electron';
+import DefaultNotification from './default-notification';
-import * as params from '../utils/params-util';
+const {app} = remote;
-import { appId, loadBots } from './helpers';
-
-import DefaultNotification = require('./default-notification');
-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);
 
-window.Notification = DefaultNotification;
+let Notification = DefaultNotification;
 
 if (process.platform === 'darwin') {
-	window.Notification = require('./darwin-notifications');
+	Notification = require('./darwin-notifications');
 }
 
-window.addEventListener('load', () => {
+export interface NotificationData {
-	// eslint-disable-next-line no-undef, @typescript-eslint/camelcase
+	close: () => void;
-	if (params.isPageParams() && page_params.realm_uri) {
+	title: string;
-		loadBots();
+	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 Notification(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
+	};
+}
+
+electron_bridge.once('zulip-loaded', async () => {
+	await loadBots();
 });

app/renderer/js/pages/network.ts

@@ -1,21 +1,10 @@
-'use strict';
+import {ipcRenderer} from 'electron';
 
-import { ipcRenderer } from 'electron';
+export function init($reconnectButton: Element, $settingsButton: Element): void {
-
+	$reconnectButton.addEventListener('click', () => {
-class NetworkTroubleshootingView {
-	$reconnectButton: Element;
-	constructor() {
-		this.$reconnectButton = document.querySelector('#reconnect');
-	}
-
-	init(): void {
-		this.$reconnectButton.addEventListener('click', () => {
 		ipcRenderer.send('forward-message', 'reload-viewer');
 	});
-	}
+	$settingsButton.addEventListener('click', () => {
+		ipcRenderer.send('forward-message', 'open-settings');
+	});
 }
-
-window.addEventListener('load', () => {
-	const networkTroubleshootingView = new NetworkTroubleshootingView();
-	networkTroubleshootingView.init();
-});

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

@@ -1,23 +1,26 @@
 'use-strict';
 
-import { remote, OpenDialogOptions } from 'electron';
+import {remote, OpenDialogOptions} from 'electron';
 
-import path = require('path');
+import path from 'path';
-import BaseComponent = require('../../components/base');
+import BaseComponent from '../../components/base';
-import CertificateUtil = require('../../utils/certificate-util');
+import * as CertificateUtil from '../../utils/certificate-util';
-import DomainUtil = require('../../utils/domain-util');
+import * as DomainUtil from '../../utils/domain-util';
-import t = require('../../utils/translation-util');
+import * as t from '../../utils/translation-util';
 
-const { dialog } = remote;
+interface AddCertificateProps {
+	$root: Element;
+}
 
-class AddCertificate extends BaseComponent {
+const {dialog} = remote;
-	// TODO: TypeScript - Here props should be object type
+
-	props: any;
+export default class AddCertificate extends BaseComponent {
+	props: AddCertificateProps;
 	_certFile: string;
 	$addCertificate: Element | null;
 	addCertificateButton: Element | null;
 	serverUrl: HTMLInputElement | null;
-	constructor(props: any) {
+	constructor(props: AddCertificateProps) {
 		super();
 		this.props = props;
 		this._certFile = '';
@@ -46,7 +49,7 @@ class AddCertificate extends BaseComponent {
 		this.initListeners();
 	}
 
-	validateAndAdd(): void {
+	async validateAndAdd(): Promise<void> {
 		const certificate = this._certFile;
 		const serverUrl = this.serverUrl.value;
 		if (certificate !== '' && serverUrl !== '') {
@@ -56,45 +59,41 @@ class AddCertificate extends BaseComponent {
 			if (!copy) {
 				return;
 			}
+
 			CertificateUtil.setCertificate(server, fileName);
-			dialog.showMessageBox({
-				title: 'Success',
-				message: `Certificate saved!`
-			});
 			this.serverUrl.value = '';
+			await dialog.showMessageBox({
+				title: 'Success',
+				message: 'Certificate saved!'
+			});
 		} else {
 			dialog.showErrorBox('Error', `Please, ${serverUrl === '' ?
 				'Enter an Organization URL' : 'Choose certificate file'}`);
 		}
 	}
 
-	addHandler(): void {
+	async addHandler(): Promise<void> {
 		const showDialogOptions: OpenDialogOptions = {
 			title: 'Select file',
 			properties: ['openFile'],
-			filters: [{ name: 'crt, pem', extensions: ['crt', 'pem'] }]
+			filters: [{name: 'crt, pem', extensions: ['crt', 'pem']}]
 		};
-		dialog.showOpenDialog(showDialogOptions, selectedFile => {
+		const {filePaths, canceled} = await dialog.showOpenDialog(showDialogOptions);
-			if (selectedFile) {
+		if (!canceled) {
-				this._certFile = selectedFile[0] || '';
+			this._certFile = filePaths[0] || '';
-				this.validateAndAdd();
+			await this.validateAndAdd();
 		}
-		});
 	}
 
 	initListeners(): void {
-		this.addCertificateButton.addEventListener('click', () => {
+		this.addCertificateButton.addEventListener('click', async () => {
-			this.addHandler();
+			await this.addHandler();
 		});
 
-		this.serverUrl.addEventListener('keypress', event => {
+		this.serverUrl.addEventListener('keypress', async event => {
-			const EnterkeyCode = event.keyCode;
+			if (event.key === 'Enter') {
-
+				await this.addHandler();
-			if (EnterkeyCode === 13) {
-				this.addHandler();
 			}
 		});
 	}
 }
-
-export = AddCertificate;

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

@@ -1,63 +1,44 @@
-'use strict';
+import electron, {app} from 'electron';
-import { app } from 'electron';
 
-import electron = require('electron');
+import * as ConfigUtil from '../../utils/config-util';
-import ConfigUtil = require('../../utils/config-util');
 
-let instance: BadgeSettings | any = null;
+function showBadgeCount(messageCount: number, mainWindow: electron.BrowserWindow): void {
-
-class BadgeSettings {
-	constructor() {
-		if (instance) {
-			return instance;
-		} else {
-			instance = this;
-		}
-
-		return instance;
-	}
-
-	showBadgeCount(messageCount: number, mainWindow: electron.BrowserWindow): void {
-		if (process.platform === 'darwin') {
-			app.setBadgeCount(messageCount);
-		}
 	if (process.platform === 'win32') {
-			this.updateOverlayIcon(messageCount, mainWindow);
+		updateOverlayIcon(messageCount, mainWindow);
-		}
+	} else {
+		app.badgeCount = messageCount;
 	}
+}
 
-	hideBadgeCount(mainWindow: electron.BrowserWindow): void {
+function hideBadgeCount(mainWindow: electron.BrowserWindow): void {
-		if (process.platform === 'darwin') {
-			app.setBadgeCount(0);
-		}
 	if (process.platform === 'win32') {
 		mainWindow.setOverlayIcon(null, '');
-		}
-	}
-
-	updateBadge(badgeCount: number, mainWindow: electron.BrowserWindow): void {
-		if (ConfigUtil.getConfigItem('badgeOption', true)) {
-			this.showBadgeCount(badgeCount, mainWindow);
 	} else {
-			this.hideBadgeCount(mainWindow);
+		app.badgeCount = 0;
-		}
 	}
+}
 
-	updateOverlayIcon(messageCount: number, mainWindow: electron.BrowserWindow): void {
+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);
 	}
-	}
-
-	updateTaskbarIcon(data: string, text: string, mainWindow: electron.BrowserWindow): void {
-		const img = electron.nativeImage.createFromDataURL(data);
-		mainWindow.setOverlayIcon(img, text);
-	}
 }
 
-export = new BadgeSettings();
+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.ts

@@ -1,12 +1,17 @@
-'use strict';
+import {ipcRenderer} from 'electron';
+import escape from 'escape-html';
 
-import { ipcRenderer } from 'electron';
+import BaseComponent from '../../components/base';
 
-import BaseComponent = require('../../components/base');
+interface BaseSectionProps {
+	$element: HTMLElement;
+	disabled?: boolean;
+	value: boolean;
+	clickHandler: () => void;
+}
 
-class BaseSection extends BaseComponent {
+export default class BaseSection extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
+	generateSettingOption(props: BaseSectionProps): void {
-	generateSettingOption(props: any): void {
 		const {$element, disabled, value, clickHandler} = props;
 
 		$element.innerHTML = '';
@@ -19,8 +24,8 @@ class BaseSection extends BaseComponent {
 		}
 	}
 
-	generateOptionTemplate(settingOption: boolean, disabled: boolean): string {
+	generateOptionTemplate(settingOption: boolean, disabled?: boolean): string {
-		const label = disabled ? `<label class="disallowed" title="Setting locked by system administrator."/>` : `<label/>`;
+		const label = disabled ? '<label class="disallowed" title="Setting locked by system administrator."/>' : '<label/>';
 		if (settingOption) {
 			return `
 				<div class="action">
@@ -30,7 +35,8 @@ class BaseSection extends BaseComponent {
 					</div>
 				</div>
 			`;
-		} else {
+		}
+
 		return `
 				<div class="action">
 					<div class="switch">
@@ -40,11 +46,20 @@ class BaseSection extends BaseComponent {
 				</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
+	*/
+	generateSelectTemplate(options: {[key: string]: string}, className?: string, idName?: string): string {
+		let select = `<select class="${escape(className)}" id="${escape(idName)}">\n`;
+		Object.keys(options).forEach(key => {
+			select += `<option name="${escape(key)}" value="${escape(key)}">${escape(options[key])}</option>\n`;
+		});
+		select += '</select>';
+		return select;
 	}
 
 	reloadApp(): void {
 		ipcRenderer.send('forward-message', 'reload-viewer');
 	}
 }
-
-export = BaseSection;

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

@@ -1,23 +1,24 @@
-'use strict';
+import {ipcRenderer} from 'electron';
 
-import { ipcRenderer } from 'electron';
+import BaseSection from './base-section';
+import * as DomainUtil from '../../utils/domain-util';
+import ServerInfoForm from './server-info-form';
+import AddCertificate from './add-certificate';
+import FindAccounts from './find-accounts';
+import * as t from '../../utils/translation-util';
 
-import BaseSection = require('./base-section');
+interface ConnectedOrgSectionProps {
-import DomainUtil = require('../../utils/domain-util');
+	$root: Element;
-import ServerInfoForm = require('./server-info-form');
+}
-import AddCertificate = require('./add-certificate');
-import FindAccounts = require('./find-accounts');
-import t = require('../../utils/translation-util');
 
-class ConnectedOrgSection extends BaseSection {
+export default class ConnectedOrgSection extends BaseSection {
-	// TODO: TypeScript - Here props should be object type
+	props: ConnectedOrgSectionProps;
-	props: any;
 	$serverInfoContainer: Element | null;
 	$existingServers: Element | null;
 	$newOrgButton: HTMLButtonElement | null;
 	$addCertificateContainer: Element | null;
 	$findAccountsContainer: Element | null;
-	constructor(props: any) {
+	constructor(props: ConnectedOrgSectionProps) {
 		super();
 		this.props = props;
 	}
@@ -57,10 +58,10 @@ class ConnectedOrgSection extends BaseSection {
 		// 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++) {
+		for (const [i, server] of servers.entries()) {
 			new ServerInfoForm({
 				$root: this.$serverInfoContainer,
-				server: servers[i],
+				server,
 				index: i,
 				onChange: this.reloadApp
 			}).init();
@@ -86,5 +87,3 @@ class ConnectedOrgSection extends BaseSection {
 		}).init();
 	}
 }
-
-export = ConnectedOrgSection;

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

@@ -1,17 +1,19 @@
 'use-strict';
 
-import { shell } from 'electron';
+import BaseComponent from '../../components/base';
+import * as LinkUtil from '../../utils/link-util';
+import * as t from '../../utils/translation-util';
 
-import BaseComponent = require('../../components/base');
+interface FindAccountsProps {
-import t = require('../../utils/translation-util');
+	$root: Element;
+}
 
-class FindAccounts extends BaseComponent {
+export default class FindAccounts extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
+	props: FindAccountsProps;
-	props: any;
 	$findAccounts: Element | null;
 	$findAccountsButton: Element | null;
 	$serverUrlField: HTMLInputElement | null;
-	constructor(props: any) {
+	constructor(props: FindAccountsProps) {
 		super();
 		this.props = props;
 	}
@@ -38,19 +40,21 @@ class FindAccounts extends BaseComponent {
 		this.initListeners();
 	}
 
-	findAccounts(url: string): void {
+	async findAccounts(url: string): Promise<void> {
 		if (!url) {
 			return;
 		}
+
 		if (!url.startsWith('http')) {
 			url = 'https://' + url;
 		}
-		shell.openExternal(url + '/accounts/find');
+
+		await LinkUtil.openBrowser(new URL('/accounts/find', url));
 	}
 
 	initListeners(): void {
-		this.$findAccountsButton.addEventListener('click', () => {
+		this.$findAccountsButton.addEventListener('click', async () => {
-			this.findAccounts(this.$serverUrlField.value);
+			await this.findAccounts(this.$serverUrlField.value);
 		});
 
 		this.$serverUrlField.addEventListener('click', () => {
@@ -59,9 +63,9 @@ class FindAccounts extends BaseComponent {
 			}
 		});
 
-		this.$serverUrlField.addEventListener('keypress', event => {
+		this.$serverUrlField.addEventListener('keypress', async event => {
-			if (event.keyCode === 13) {
+			if (event.key === 'Enter') {
-				this.findAccounts(this.$serverUrlField.value);
+				await this.findAccounts(this.$serverUrlField.value);
 			}
 		});
 
@@ -74,5 +78,3 @@ class FindAccounts extends BaseComponent {
 		});
 	}
 }
-
-export = FindAccounts;

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

@@ -1,21 +1,26 @@
-'use strict';
+import {ipcRenderer, remote, OpenDialogOptions} from 'electron';
-import { ipcRenderer, remote, OpenDialogOptions } from 'electron';
 
-import path = require('path');
+import path from 'path';
-import fs = require('fs-extra');
+import fs from 'fs-extra';
 
-const { app, dialog } = remote;
+const {app, dialog, session} = remote;
 const currentBrowserWindow = remote.getCurrentWindow();
 
-import BaseSection = require('./base-section');
+import BaseSection from './base-section';
-import ConfigUtil = require('../../utils/config-util');
+import * as ConfigUtil from '../../utils/config-util';
-import EnterpriseUtil = require('./../../utils/enterprise-util');
+import * as EnterpriseUtil from '../../utils/enterprise-util';
-import t = require('../../utils/translation-util');
+import * as t from '../../utils/translation-util';
+import supportedLocales from '../../../../translations/supported-locales.json';
+import Tagify from '@yaireo/tagify';
+import ISO6391 from 'iso-639-1';
 
-class GeneralSection extends BaseSection {
+interface GeneralSectionProps {
-	// TODO: TypeScript - Here props should be object type
+	$root: Element;
-	props: any;
+}
-	constructor(props: any) {
+
+export default class GeneralSection extends BaseSection {
+	props: GeneralSectionProps;
+	constructor(props: GeneralSectionProps) {
 		super();
 		this.props = props;
 	}
@@ -42,7 +47,7 @@ class GeneralSection extends BaseSection {
 						<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-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'}">
@@ -82,21 +87,31 @@ class GeneralSection extends BaseSection {
 						<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="show-download-folder">
+
-					<div class="setting-description">${t.__('Show downloaded files in file manager')}</div>
+					<div class="setting-row" id="app-language">
-					<div class="setting-control"></div>
+						<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')}
@@ -105,7 +120,7 @@ class GeneralSection extends BaseSection {
 					</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 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>
@@ -120,17 +135,20 @@ class GeneralSection extends BaseSection {
 					</div>
 					<div class="setting-row">
 						<div class="setting-description">
-							<div class="download-folder-path">${ConfigUtil.getConfigItem('downloadsPath', `${app.getPath('downloads')}`)}</div>
+							<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 class="title">${t.__('Reset Application Data')}</div>
+				</div>
+				<div class="title">${t.__('Factory Reset Data')}</div>
                 <div class="settings-card">
-					<div class="setting-row" id="resetdata-option">
+					<div class="setting-row" id="factory-reset-option">
-						<div class="setting-description">${t.__('This will delete all application data including all added accounts and preferences')}
+						<div class="setting-description">${t.__('Reset the application, thus deleting all the connected organizations, accounts, and certificates.')}
 						</div>
-						<button class="reset-data-button red w-150">${t.__('Reset App Data')}</button>
+						<button class="factory-reset-button red w-150">${t.__('Factory Reset')}</button>
 					</div>
 				</div>
 			</div>
@@ -146,7 +164,7 @@ class GeneralSection extends BaseSection {
 		this.betaUpdateOption();
 		this.updateSidebarOption();
 		this.updateStartAtLoginOption();
-		this.updateResetDataOption();
+		this.factoryReset();
 		this.showDesktopNotification();
 		this.enableSpellchecker();
 		this.minimizeOnStart();
@@ -154,8 +172,11 @@ class GeneralSection extends BaseSection {
 		this.showCustomCSSPath();
 		this.removeCustomCSS();
 		this.downloadFolder();
-		this.showDownloadFolder();
+		this.updateQuitOnCloseOption();
+		this.updatePromptDownloadOption();
 		this.enableErrorReporting();
+		this.setLocale();
+		this.initSpellChecker();
 
 		// Platform specific settings
 
@@ -163,6 +184,7 @@ class GeneralSection extends BaseSection {
 		if (process.platform === 'win32') {
 			this.updateFlashTaskbar();
 		}
+
 		// Dock bounce on macOS
 		if (process.platform === 'darwin') {
 			this.updateDockBouncing();
@@ -249,6 +271,7 @@ class GeneralSection extends BaseSection {
 					ConfigUtil.setConfigItem('betaUpdate', false);
 					this.betaUpdateOption();
 				}
+
 				this.autoUpdateOption();
 			}
 		});
@@ -276,9 +299,7 @@ class GeneralSection extends BaseSection {
 				const newValue = !ConfigUtil.getConfigItem('silent', true);
 				ConfigUtil.setConfigItem('silent', newValue);
 				this.updateSilentOption();
-				// TODO: TypeScript: currentWindow of type BrowserWindow doesn't
+				currentBrowserWindow.webContents.send('toggle-silent', newValue);
-				// have a .send() property per typescript.
-				(currentBrowserWindow as any).send('toggle-silent', newValue);
 			}
 		});
 	}
@@ -321,6 +342,18 @@ class GeneralSection extends BaseSection {
 		});
 	}
 
+	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'),
@@ -329,6 +362,10 @@ class GeneralSection extends BaseSection {
 				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';
 			}
 		});
 	}
@@ -345,43 +382,34 @@ class GeneralSection extends BaseSection {
 		});
 	}
 
-	clearAppDataDialog(): void {
+	async customCssDialog(): Promise<void> {
-		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(): void {
 		const showDialogOptions: OpenDialogOptions = {
 			title: 'Select file',
 			properties: ['openFile'],
-			filters: [{ name: 'CSS file', extensions: ['css'] }]
+			filters: [{name: 'CSS file', extensions: ['css']}]
 		};
 
-		dialog.showOpenDialog(showDialogOptions, selectedFile => {
+		const {filePaths, canceled} = await dialog.showOpenDialog(showDialogOptions);
-			if (selectedFile) {
+		if (!canceled) {
-				ConfigUtil.setConfigItem('customCSS', selectedFile[0]);
+			ConfigUtil.setConfigItem('customCSS', filePaths[0]);
 			ipcRenderer.send('forward-message', 'hard-reload');
 		}
-		});
 	}
 
-	updateResetDataOption(): void {
+	setLocale(): void {
-		const resetDataButton = document.querySelector('#resetdata-option .reset-data-button');
+		const langDiv: HTMLSelectElement = document.querySelector('.lang-div');
-		resetDataButton.addEventListener('click', () => {
+		const langList = this.generateSelectTemplate(supportedLocales, 'lang-menu');
-			this.clearAppDataDialog();
+		langDiv.innerHTML += langList;
+		// `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);
 		});
 	}
 
@@ -399,8 +427,8 @@ class GeneralSection extends BaseSection {
 
 	addCustomCSS(): void {
 		const customCSSButton = document.querySelector('#add-custom-css .custom-css-button');
-		customCSSButton.addEventListener('click', () => {
+		customCSSButton.addEventListener('click', async () => {
-			this.customCssDialog();
+			await this.customCssDialog();
 		});
 	}
 
@@ -414,43 +442,140 @@ class GeneralSection extends BaseSection {
 	removeCustomCSS(): void {
 		const removeCSSButton = document.querySelector('#css-delete-action');
 		removeCSSButton.addEventListener('click', () => {
-			ConfigUtil.setConfigItem('customCSS', "");
+			ConfigUtil.setConfigItem('customCSS', '');
 			ipcRenderer.send('forward-message', 'hard-reload');
 		});
 	}
 
-	downloadFolderDialog(): void {
+	async downloadFolderDialog(): Promise<void> {
 		const showDialogOptions: OpenDialogOptions = {
 			title: 'Select Download Location',
 			properties: ['openDirectory']
 		};
 
-		dialog.showOpenDialog(showDialogOptions, selectedFolder => {
+		const {filePaths, canceled} = await dialog.showOpenDialog(showDialogOptions);
-			if (selectedFolder) {
+		if (!canceled) {
-				ConfigUtil.setConfigItem('downloadsPath', selectedFolder[0]);
+			ConfigUtil.setConfigItem('downloadsPath', filePaths[0]);
 			const downloadFolderPath: HTMLElement = document.querySelector('.download-folder-path');
-				downloadFolderPath.innerText = selectedFolder[0];
+			downloadFolderPath.textContent = filePaths[0];
 		}
-		});
 	}
+
 	downloadFolder(): void {
 		const downloadFolder = document.querySelector('#download-folder .download-folder-button');
-		downloadFolder.addEventListener('click', () => {
+		downloadFolder.addEventListener('click', async () => {
-			this.downloadFolderDialog();
+			await this.downloadFolderDialog();
 		});
 	}
 
-	showDownloadFolder(): void {
+	updatePromptDownloadOption(): void {
 		this.generateSettingOption({
-			$element: document.querySelector('#show-download-folder .setting-control'),
+			$element: document.querySelector('#prompt-download .setting-control'),
-			value: ConfigUtil.getConfigItem('showDownloadFolder', false),
+			value: ConfigUtil.getConfigItem('promptDownload', false),
 			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('showDownloadFolder');
+				const newValue = !ConfigUtil.getConfigItem('promptDownload');
-				ConfigUtil.setConfigItem('showDownloadFolder', newValue);
+				ConfigUtil.setConfigItem('promptDownload', newValue);
-				this.showDownloadFolder();
+				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 += `
+				<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].filter(pair => (pair[1] === code))[0][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';
+		}
+	}
 }
-
-export = GeneralSection;

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

@@ -1,14 +1,16 @@
-'use strict';
+import BaseComponent from '../../components/base';
+import * as t from '../../utils/translation-util';
 
-import BaseComponent = require('../../components/base');
+interface PreferenceNavProps {
-import t = require('../../utils/translation-util');
+	$root: Element;
+	onItemSelected: (navItem: string) => void;
+}
 
-class PreferenceNav extends BaseComponent {
+export default class PreferenceNav extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
+	props: PreferenceNavProps;
-	props: any;
 	navItems: string[];
 	$el: Element;
-	constructor(props: any) {
+	constructor(props: PreferenceNavProps) {
 		super();
 		this.props = props;
 		this.navItems = ['General', 'Network', 'AddServer', 'Organizations', 'Shortcuts'];
@@ -64,5 +66,3 @@ class PreferenceNav extends BaseComponent {
 		$item.classList.remove('active');
 	}
 }
-
-export = PreferenceNav;

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

@@ -1,20 +1,21 @@
-'use strict';
+import {ipcRenderer} from 'electron';
 
-import { ipcRenderer } from 'electron';
+import BaseSection from './base-section';
+import * as ConfigUtil from '../../utils/config-util';
+import * as t from '../../utils/translation-util';
 
-import BaseSection = require('./base-section');
+interface NetworkSectionProps {
-import ConfigUtil = require('../../utils/config-util');
+	$root: Element;
-import t = require('../../utils/translation-util');
+}
 
-class NetworkSection extends BaseSection {
+export default class NetworkSection extends BaseSection {
-	// TODO: TypeScript - Here props should be object type
+	props: NetworkSectionProps;
-	props: any;
 	$proxyPAC: HTMLInputElement;
 	$proxyRules: HTMLInputElement;
 	$proxyBypass: HTMLInputElement;
 	$proxySaveAction: Element;
 	$manualProxyBlock: Element;
-	constructor(props: any) {
+	constructor(props: NetworkSectionProps) {
 		super();
 		this.props = props;
 	}
@@ -104,11 +105,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();
 			}
@@ -123,6 +126,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
@@ -132,5 +136,3 @@ class NetworkSection extends BaseSection {
 		});
 	}
 }
-
-export = NetworkSection;

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

@@ -1,18 +1,23 @@
-'use strict';
+import {ipcRenderer, remote} from 'electron';
 
-import { shell } from 'electron';
+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';
 
-import BaseComponent = require('../../components/base');
+const {dialog} = remote;
-import DomainUtil = require('../../utils/domain-util');
-import t = require('../../utils/translation-util');
 
-class NewServerForm extends BaseComponent {
+interface NewServerFormProps {
-	// TODO: TypeScript - Here props should be object type
+	$root: Element;
-	props: any;
+	onChange: () => void;
+}
+
+export default class NewServerForm extends BaseComponent {
+	props: NewServerFormProps;
 	$newServerForm: Element;
 	$saveServerButton: HTMLButtonElement;
 	$newServerUrl: HTMLInputElement;
-	constructor(props: any) {
+	constructor(props: NewServerFormProps) {
 		super();
 		this.props = props;
 	}
@@ -25,19 +30,21 @@ class NewServerForm extends BaseComponent {
 					<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">${t.__('Connect')}</button>
 				</div>
-				</div>
 				<div class="server-center">
 					<div class="divider">
 						<hr class="left"/>${t.__('OR')}<hr class="right" />
 					</div>
 				</div>
 				<div class="server-center">
-				<div class="server-save-action">
 					<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>
 		`;
@@ -50,46 +57,55 @@ class NewServerForm extends BaseComponent {
 
 	initForm(): void {
 		this.$newServerForm = this.generateNodeFromTemplate(this.template());
-		this.$saveServerButton = this.$newServerForm.querySelectorAll('.server-save-action')[0] as HTMLButtonElement;
+		this.$saveServerButton = this.$newServerForm.querySelector('#connect');
 		this.props.$root.innerHTML = '';
 		this.props.$root.append(this.$newServerForm);
 		this.$newServerUrl = this.$newServerForm.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
 	}
 
-	submitFormHandler(): void {
+	async submitFormHandler(): Promise<void> {
-		this.$saveServerButton.children[0].innerHTML = 'Connecting...';
+		this.$saveServerButton.innerHTML = 'Connecting...';
-		DomainUtil.checkDomain(this.$newServerUrl.value).then(serverConf => {
+		let serverConf;
-			DomainUtil.addDomain(serverConf).then(() => {
+		try {
-				this.props.onChange(this.props.index);
+			serverConf = await DomainUtil.checkDomain(this.$newServerUrl.value);
-			});
+		} catch (error) {
-		}, errorMessage => {
+			this.$saveServerButton.innerHTML = 'Connect';
-			this.$saveServerButton.children[0].innerHTML = 'Connect';
+			await dialog.showMessageBox({
-			alert(errorMessage);
+				type: 'error',
+				message: error.toString(),
+				buttons: ['OK']
 			});
+			return;
+		}
+
+		await DomainUtil.addDomain(serverConf);
+		this.props.onChange();
 	}
 
 	openCreateNewOrgExternalLink(): void {
-		const link = 'https://zulipchat.com/new/';
+		const link = 'https://zulip.com/new/';
-		const externalCreateNewOrgEl = document.querySelector('#open-create-org-link');
+		const externalCreateNewOrgElement = document.querySelector('#open-create-org-link');
-		externalCreateNewOrgEl.addEventListener('click', () => {
+		externalCreateNewOrgElement.addEventListener('click', async () => {
-			shell.openExternal(link);
+			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', () => {
+		this.$saveServerButton.addEventListener('click', async () => {
-			this.submitFormHandler();
+			await this.submitFormHandler();
 		});
-		this.$newServerUrl.addEventListener('keypress', event => {
+		this.$newServerUrl.addEventListener('keypress', async event => {
-			const EnterkeyCode = event.keyCode;
+			if (event.key === 'Enter') {
-			// Submit form when Enter key is pressed
+				await this.submitFormHandler();
-			if (EnterkeyCode === 13) {
-				this.submitFormHandler();
 			}
 		});
-		// open create new org link in default browser
+		// Open create new org link in default browser
 		this.openCreateNewOrgExternalLink();
+		this.networkSettingsLink();
 	}
 }
-
-export = NewServerForm;

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

@@ -1,18 +1,17 @@
-'use strict';
+import {ipcRenderer} from 'electron';
 
-import { ipcRenderer } from 'electron';
+import BaseComponent from '../../components/base';
-
+import Nav from './nav';
-import BaseComponent = require('../../components/base');
+import ServersSection from './servers-section';
-import Nav = require('./nav');
+import GeneralSection from './general-section';
-import ServersSection = require('./servers-section');
+import NetworkSection from './network-section';
-import GeneralSection = require('./general-section');
+import ConnectedOrgSection from './connected-org-section';
-import NetworkSection = require('./network-section');
+import ShortcutsSection from './shortcuts-section';
-import ConnectedOrgSection = require('./connected-org-section');
+import type {DNDSettings} from '../../utils/dnd-util';
-import ShortcutsSection = require('./shortcuts-section');
 
 type Section = ServersSection | GeneralSection | NetworkSection | ConnectedOrgSection | ShortcutsSection;
 
-class PreferenceView extends BaseComponent {
+export default class PreferenceView extends BaseComponent {
 	$sidebarContainer: Element;
 	$settingsContainer: Element;
 	nav: Nav;
@@ -37,8 +36,9 @@ class PreferenceView extends BaseComponent {
 		let nav = 'General';
 		const hasTag = window.location.hash;
 		if (hasTag) {
-			nav = hasTag.substring(1);
+			nav = hasTag.slice(1);
 		}
+
 		this.handleNavigation(nav);
 	}
 
@@ -51,32 +51,38 @@ 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}`;
 	}
@@ -107,7 +113,7 @@ class PreferenceView extends BaseComponent {
 			this.handleToggle('tray-option', state);
 		});
 
-		ipcRenderer.on('toggle-dnd', (_event: Event, _state: boolean, newSettings: any) => {
+		ipcRenderer.on('toggle-dnd', (_event: Event, _state: boolean, newSettings: DNDSettings) => {
 			this.handleToggle('show-notification-option', newSettings.showNotification);
 			this.handleToggle('silent-option', newSettings.silent);
 
@@ -122,5 +128,3 @@ window.addEventListener('load', () => {
 	const preferenceView = new PreferenceView();
 	preferenceView.init();
 });
-
-export = PreferenceView;

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

@@ -1,23 +1,27 @@
-'use strict';
+import {remote, ipcRenderer} from 'electron';
 
-import { remote, ipcRenderer } from 'electron';
+import BaseComponent from '../../components/base';
+import * as DomainUtil from '../../utils/domain-util';
+import * as Messages from '../../../../resources/messages';
+import * as t from '../../utils/translation-util';
 
-import BaseComponent = require('../../components/base');
+const {dialog} = remote;
-import DomainUtil = require('../../utils/domain-util');
-import Messages = require('./../../../../resources/messages');
-import t = require('../../utils/translation-util');
 
-const { dialog } = remote;
+interface ServerInfoFormProps {
+	$root: Element;
+	server: DomainUtil.ServerConf;
+	index: number;
+	onChange: () => void;
+}
 
-class ServerInfoForm extends BaseComponent {
+export default class ServerInfoForm extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
+	props: ServerInfoFormProps;
-	props: any;
 	$serverInfoForm: Element;
 	$serverInfoAlias: Element;
 	$serverIcon: Element;
 	$deleteServerButton: Element;
 	$openServerButton: Element;
-	constructor(props: any) {
+	constructor(props: ServerInfoFormProps) {
 		super();
 		this.props = props;
 	}
@@ -61,23 +65,22 @@ class ServerInfoForm extends BaseComponent {
 	}
 
 	initActions(): void {
-		this.$deleteServerButton.addEventListener('click', () => {
+		this.$deleteServerButton.addEventListener('click', async () => {
-			dialog.showMessageBox({
+			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?')
-			}, response => {
+			});
 			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);
+					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);
@@ -92,5 +95,3 @@ class ServerInfoForm extends BaseComponent {
 		});
 	}
 }
-
-export = ServerInfoForm;

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

@@ -1,14 +1,15 @@
-'use strict';
+import BaseSection from './base-section';
+import NewServerForm from './new-server-form';
+import * as t from '../../utils/translation-util';
 
-import BaseSection = require('./base-section');
+interface ServersSectionProps {
-import NewServerForm = require('./new-server-form');
+	$root: Element;
-import t = require('../../utils/translation-util');
+}
 
-class ServersSection extends BaseSection {
+export default class ServersSection extends BaseSection {
-	// TODO: TypeScript - Here props should be object type
+	props: ServersSectionProps;
-	props: any;
 	$newServerContainer: Element;
-	constructor(props: any) {
+	constructor(props: ServersSectionProps) {
 		super();
 		this.props = props;
 	}
@@ -46,5 +47,3 @@ class ServersSection extends BaseSection {
 		}).init();
 	}
 }
-
-export = ServersSection;

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

@@ -1,17 +1,18 @@
-'use strict';
+import BaseSection from './base-section';
+import * as LinkUtil from '../../utils/link-util';
+import * as t from '../../utils/translation-util';
 
-import { shell } from 'electron';
+interface ShortcutsSectionProps {
+	$root: Element;
+}
 
-import BaseSection = require('./base-section');
+export default class ShortcutsSection extends BaseSection {
-import t = require('../../utils/translation-util');
+	props: ShortcutsSectionProps;
-
+	constructor(props: ShortcutsSectionProps) {
-class ShortcutsSection extends BaseSection {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
-	constructor(props: any) {
 		super();
 		this.props = props;
 	}
+
 	// TODO - Deduplicate templateMac and templateWinLin 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
@@ -329,17 +330,16 @@ class ShortcutsSection extends BaseSection {
 	}
 
 	openHotkeysExternalLink(): void {
-		const link = 'https://zulipchat.com/help/keyboard-shortcuts';
+		const link = 'https://zulip.com/help/keyboard-shortcuts';
-		const externalCreateNewOrgEl = document.querySelector('#open-hotkeys-link');
+		const externalCreateNewOrgElement = document.querySelector('#open-hotkeys-link');
-		externalCreateNewOrgEl.addEventListener('click', () => {
+		externalCreateNewOrgElement.addEventListener('click', async () => {
-			shell.openExternal(link);
+			await LinkUtil.openBrowser(new URL(link));
 		});
 	}
+
 	init(): void {
 		this.props.$root.innerHTML = (process.platform === 'darwin') ?
 			this.templateMac() : this.templateWinLin();
 		this.openHotkeysExternalLink();
 	}
 }
-
-export = ShortcutsSection;

app/renderer/js/preload.ts

@@ -1,39 +1,30 @@
-'use strict';
+import {contextBridge, ipcRenderer, webFrame} from 'electron';
+import fs from 'fs';
 
-import { ipcRenderer, shell } from 'electron';
+import isDev from 'electron-is-dev';
-import SetupSpellChecker from './spellchecker';
 
-import LinkUtil = require('./utils/link-util');
+import * as NetworkError from './pages/network';
-import params = require('./utils/params-util');
-
-interface PatchedGlobal extends NodeJS.Global {
-	logout: () => void;
-	shortcut: () => void;
-}
-
-const globalPatched = global as PatchedGlobal;
 
 // eslint-disable-next-line import/no-unassigned-import
-require('./notification');
+import './notification';
 
 // Prevent drag and drop event in main process which prevents remote code executaion
-require(__dirname + '/shared/preventdrag.js');
+// eslint-disable-next-line import/no-unassigned-import
+import './shared/preventdrag';
 
-declare let window: ZulipWebWindow;
+import electron_bridge from './electron-bridge';
+contextBridge.exposeInMainWorld('raw_electron_bridge', electron_bridge);
 
-// eslint-disable-next-line @typescript-eslint/camelcase
+ipcRenderer.on('logout', () => {
-window.electron_bridge = require('./electron-bridge');
-
-const logout = (): void => {
 	// 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();
-};
+});
 
-const shortcut = (): void => {
+ipcRenderer.on('shortcut', () => {
 	// Create the menu for the below
 	const node: HTMLElement = document.querySelector('a[data-overlay-trigger=keyboard-shortcuts]');
 	// Additional check
@@ -44,60 +35,45 @@ const shortcut = (): void => {
 		const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
 		dropdown.click();
 	}
-};
-
-process.once('loaded', (): void => {
-	globalPatched.logout = logout;
-	globalPatched.shortcut = shortcut;
 });
 
-// To prevent failing this script on linux we need to load it after the document loaded
+ipcRenderer.on('show-notification-settings', () => {
-document.addEventListener('DOMContentLoaded', (): void => {
+	// Create the menu for the below
-	if (params.isPageParams()) {
+	const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
-	// Get the default language of the server
+	dropdown.click();
-		const serverLanguage = page_params.default_language; // eslint-disable-line no-undef, @typescript-eslint/camelcase
+
-		if (serverLanguage) {
+	const nodes: NodeListOf<HTMLElement> = document.querySelectorAll('.dropdown-menu li a');
-			// Init spellchecker
+	nodes[2].click();
-			SetupSpellChecker.init(serverLanguage);
+
-		}
+	const notificationItem: NodeListOf<HTMLElement> = document.querySelectorAll('.normal-settings-list li div');
-		// redirect users to network troubleshooting page
+
+	// Wait until the notification dom element shows up
+	setTimeout(() => {
+		notificationItem[2].click();
+	}, 100);
+});
+
+electron_bridge.once('zulip-loaded', () => {
+	// 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 (this: HTMLElement, e: Event) {
-			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;
+window.addEventListener('load', (event: any): void => {
-// otherwise, you may experience errors
+	if (!event.target.URL.includes('app/renderer/network.html')) {
-window.addEventListener('beforeunload', (): void => {
+		return;
-	SetupSpellChecker.unsubscribeSpellChecker();
+	}
+
+	const $reconnectButton = document.querySelector('#reconnect');
+	const $settingsButton = document.querySelector('#settings');
+	NetworkError.init($reconnectButton, $settingsButton);
 });
 
-// electron's globalShortcut can cause unexpected results
+// 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 => {
@@ -112,3 +88,26 @@ document.addEventListener('keydown', event => {
 		ipcRenderer.send('forward-message', 'zoomActualSize');
 	}
 });
+
+// Set user as active and update the time of last activity
+ipcRenderer.on('set-active', () => {
+	if (isDev) {
+		console.log('active');
+	}
+
+	electron_bridge.idle_on_system = false;
+	electron_bridge.last_active_on_system = Date.now();
+});
+
+// Set user as idle and time of last activity is left unchanged
+ipcRenderer.on('set-idle', () => {
+	if (isDev) {
+		console.log('idle');
+	}
+
+	electron_bridge.idle_on_system = true;
+});
+
+(async () => webFrame.executeJavaScript(
+	fs.readFileSync(require.resolve('./injected'), 'utf8')
+))();

app/renderer/js/shared/preventdrag.ts

@@ -1,5 +1,3 @@
-'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
@@ -15,3 +13,5 @@ const preventDragAndDrop = (): void => {
 };
 
 preventDragAndDrop();
+
+export {};

app/renderer/js/spellchecker.ts

@@ -1,56 +0,0 @@
-'use strict';
-
-import { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } from 'electron-spellchecker';
-
-import ConfigUtil = require('./utils/config-util');
-import Logger = require('./utils/logger-util');
-
-const logger = new Logger({
-	file: 'errors.log',
-	timestamp: true
-});
-
-class SetupSpellChecker {
-	SpellCheckHandler: typeof SpellCheckHandler;
-	contextMenuListener: typeof ContextMenuListener;
-	init(serverLanguage: string): void {
-		if (ConfigUtil.getConfigItem('enableSpellchecker')) {
-			this.enableSpellChecker();
-		}
-		this.enableContextMenu(serverLanguage);
-	}
-
-	enableSpellChecker(): void {
-		try {
-			this.SpellCheckHandler = new SpellCheckHandler();
-		} catch (err) {
-			logger.error(err);
-		}
-	}
-
-	enableContextMenu(serverLanguage: string): void {
-		if (this.SpellCheckHandler) {
-			this.SpellCheckHandler.attachToInput();
-			this.SpellCheckHandler.switchLanguage(serverLanguage);
-			this.SpellCheckHandler.currentSpellcheckerChanged.subscribe(() => {
-				this.SpellCheckHandler.switchLanguage(this.SpellCheckHandler.currentSpellcheckerLanguage);
-			});
-		}
-
-		const contextMenuBuilder = new ContextMenuBuilder(this.SpellCheckHandler);
-		this.contextMenuListener = new ContextMenuListener((info: object) => {
-			contextMenuBuilder.showPopupMenu(info);
-		});
-	}
-
-	unsubscribeSpellChecker(): void {
-		if (this.SpellCheckHandler) {
-			this.SpellCheckHandler.unsubscribe();
-		}
-		if (this.contextMenuListener) {
-			this.contextMenuListener.unsubscribe();
-		}
-	}
-}
-
-export = new SetupSpellChecker();

app/renderer/js/tray.ts

@@ -1,19 +1,24 @@
-'use strict';
+import {ipcRenderer, remote, WebviewTag, NativeImage} from 'electron';
-import { ipcRenderer, remote, WebviewTag, NativeImage } from 'electron';
 
-import path = require('path');
+import path from 'path';
-import ConfigUtil = require('./utils/config-util.js');
+import * as ConfigUtil from './utils/config-util';
-const { Tray, Menu, nativeImage, BrowserWindow } = remote;
 
-const APP_ICON = path.join(__dirname, '../../resources/tray', 'tray');
+const {Tray, Menu, nativeImage, BrowserWindow} = remote;
 
-declare let window: ZulipWebWindow;
+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' : 'osx.png');
+
+	return APP_ICON + (process.platform === 'win32' ? 'win.ico' : 'macOSTemplate.png');
 };
 
 let unread = 0;
@@ -43,10 +48,9 @@ const config = {
 	thick: process.platform === 'win32'
 };
 
-const renderCanvas = function (arg: number): Promise<HTMLCanvasElement> {
+const renderCanvas = function (arg: number): HTMLCanvasElement {
 	config.unreadCount = arg;
 
-	return new Promise(resolve => {
 	const SIZE = config.size * config.pixelRatio;
 	const PADDING = SIZE * 0.05;
 	const CENTER = SIZE / 2;
@@ -77,34 +81,26 @@ const renderCanvas = function (arg: number): Promise<HTMLCanvasElement> {
 			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.20));
+			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));
 		}
-
-			resolve(canvas);
 	}
-	});
+
+	return canvas;
 };
+
 /**
  * Renders the tray icon as a native image
  * @param arg: Unread count
  * @return the native image
  */
-const renderNativeImage = function (arg: number): Promise<NativeImage> {
+const renderNativeImage = function (arg: number): NativeImage {
-	return Promise.resolve()
+	const canvas = renderCanvas(arg);
-		.then(() => renderCanvas(arg))
-		.then(canvas => {
 	const pngData = nativeImage.createFromDataURL(canvas.toDataURL('image/png')).toPNG();
-
+	return nativeImage.createFromBuffer(pngData, {
-			// TODO: Fix the function to correctly use Promise correctly.
-			// the Promise.resolve().then(...) above is useless we should
-			// start with renderCanvas(arg).then
-			// eslint-disable-next-line promise/no-return-wrap
-			return Promise.resolve(nativeImage.createFromBuffer(pngData, {
 		scaleFactor: config.pixelRatio
-			}));
 	});
 };
 
@@ -119,7 +115,6 @@ function sendAction(action: string): void {
 }
 
 const createTray = function (): void {
-	window.tray = new Tray(iconPath());
 	const contextMenu = Menu.buildFromTemplate([
 		{
 			label: 'Zulip',
@@ -144,22 +139,23 @@ const createTray = function (): void {
 			}
 		}
 	]);
-	window.tray.setContextMenu(contextMenu);
+	tray = new Tray(iconPath());
+	tray.setContextMenu(contextMenu);
 	if (process.platform === 'linux' || process.platform === 'win32') {
-		window.tray.on('click', () => {
+		tray.on('click', () => {
 			ipcRenderer.send('toggle-app');
 		});
 	}
 };
 
 ipcRenderer.on('destroytray', (event: Event): Event => {
-	if (!window.tray) {
+	if (!tray) {
 		return undefined;
 	}
 
-	window.tray.destroy();
+	tray.destroy();
-	if (window.tray.isDestroyed()) {
+	if (tray.isDestroyed()) {
-		window.tray = null;
+		tray = null;
 	} else {
 		throw new Error('Tray icon not properly destroyed.');
 	}
@@ -168,48 +164,50 @@ ipcRenderer.on('destroytray', (event: Event): Event => {
 });
 
 ipcRenderer.on('tray', (_event: Event, arg: number): void => {
-	if (!window.tray) {
+	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;
-			window.tray.setImage(iconPath());
+			tray.setImage(iconPath());
-			window.tray.setToolTip('No unread messages');
+			tray.setToolTip('No unread messages');
 		} else {
 			unread = arg;
-			renderNativeImage(arg).then(image => {
+			const image = renderNativeImage(arg);
-				window.tray.setImage(image);
+			tray.setImage(image);
-				window.tray.setToolTip(arg + ' unread messages');
+			tray.setToolTip(`${arg} unread messages`);
-			});
 		}
 	}
 });
 
 function toggleTray(): void {
 	let state;
-	if (window.tray) {
+	if (tray) {
 		state = false;
-		window.tray.destroy();
+		tray.destroy();
-		if (window.tray.isDestroyed()) {
+		if (tray.isDestroyed()) {
-			window.tray = null;
+			tray = null;
 		}
+
 		ConfigUtil.setConfigItem('trayIcon', false);
 	} else {
 		state = true;
 		createTray();
 		if (process.platform === 'linux' || process.platform === 'win32') {
-			renderNativeImage(unread).then(image => {
+			const image = renderNativeImage(unread);
-				window.tray.setImage(image);
+			tray.setImage(image);
-				window.tray.setToolTip(unread + ' unread messages');
+			tray.setToolTip(`${unread} unread messages`);
-			});
 		}
+
 		ConfigUtil.setConfigItem('trayIcon', true);
 	}
+
 	const selector = 'webview:not([class*=disabled])';
 	const webview: WebviewTag = document.querySelector(selector);
-	const webContents = webview.getWebContents();
+	const webContents = remote.webContents.fromId(webview.getWebContentsId());
 	webContents.send('toggletray', state);
 }
 
@@ -218,3 +216,5 @@ ipcRenderer.on('toggletray', toggleTray);
 if (ConfigUtil.getConfigItem('trayIcon', true)) {
 	createTray();
 }
+
+export {};

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

@@ -1,84 +1,68 @@
-'use strict';
+import electron from 'electron';
+import {JsonDB} from 'node-json-db';
+import {initSetUp} from './default-util';
 
-import { remote } from 'electron';
+import fs from 'fs';
-import JsonDB from 'node-json-db';
+import path from 'path';
-import { initSetUp } from './default-util';
+import Logger from './logger-util';
 
-import fs = require('fs');
+const {app, dialog} =
-import path = require('path');
+	process.type === 'renderer' ? electron.remote : electron;
-import Logger = require('./logger-util');
-
-const { app, dialog } = remote;
 
 initSetUp();
 
 const logger = new Logger({
-	file: `certificate-util.log`,
+	file: 'certificate-util.log',
 	timestamp: true
 });
 
-let instance: null | CertificateUtil = null;
 const certificatesDir = `${app.getPath('userData')}/certificates`;
 
-class CertificateUtil {
+let db: JsonDB;
-	db: JsonDB;
 
-	constructor() {
+reloadDB();
-		if (instance) {
-			return instance;
-		} else {
-			instance = this;
-		}
 
-		this.reloadDB();
+export function getCertificate(server: string): string | undefined {
-		return instance;
+	reloadDB();
-	}
+	return db.getData('/')[server];
+}
 
-	getCertificate(server: string, defaultValue: any = null): any {
+// Function to copy the certificate to userData folder
-		this.reloadDB();
+export function copyCertificate(_server: string, location: string, fileName: string): boolean {
-		const value = this.db.getData('/')[server];
-		if (value === undefined) {
-			return defaultValue;
-		} else {
-			return value;
-		}
-	}
-
-	// Function to copy the certificate to userData folder
-	copyCertificate(_server: string, location: string, fileName: string): boolean {
 	let copied = false;
 	const filePath = `${certificatesDir}/${fileName}`;
 	try {
 		fs.copyFileSync(location, filePath);
 		copied = true;
-		} catch (err) {
+	} catch (error) {
 		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);
+		logger.error(error);
 	}
+
 	return copied;
-	}
+}
 
-	setCertificate(server: string, fileName: string): void {
+export function setCertificate(server: string, fileName: string): void {
-		const filePath = `${certificatesDir}/${fileName}`;
+	const filePath = `${fileName}`;
-		this.db.push(`/${server}`, filePath, true);
+	db.push(`/${server}`, filePath, true);
-		this.reloadDB();
+	reloadDB();
-	}
+}
 
-	removeCertificate(server: string): void {
+export function removeCertificate(server: string): void {
-		this.db.delete(`/${server}`);
+	db.delete(`/${server}`);
-		this.reloadDB();
+	reloadDB();
-	}
+}
 
-	reloadDB(): void {
+function reloadDB(): void {
 	const settingsJsonPath = path.join(app.getPath('userData'), '/config/certificates.json');
 	try {
 		const file = fs.readFileSync(settingsJsonPath, 'utf8');
 		JSON.parse(file);
-		} catch (err) {
+	} catch (error) {
 		if (fs.existsSync(settingsJsonPath)) {
 			fs.unlinkSync(settingsJsonPath);
 			dialog.showErrorBox(
@@ -86,11 +70,9 @@ class CertificateUtil {
 				'We encountered error while saving the certificate.'
 			);
 			logger.error('Error while JSON parsing certificates.json: ');
-				logger.error(err);
+			logger.error(error);
 		}
 	}
-		this.db = new JsonDB(settingsJsonPath, true, true);
-	}
-}
 
-export = new CertificateUtil();
+	db = new JsonDB(settingsJsonPath, true, true);
+}

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

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

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

@@ -1,24 +1,22 @@
-'use strict';
+import {JsonDB} from 'node-json-db';
-import JsonDB from 'node-json-db';
 
-import fs = require('fs');
+import fs from 'fs';
-import path = require('path');
+import path from 'path';
-import electron = require('electron');
+import electron from 'electron';
-import Logger = require('./logger-util');
+import Logger from './logger-util';
-import EnterpriseUtil = require('./enterprise-util');
+import * as EnterpriseUtil from './enterprise-util';
 
 const logger = new Logger({
 	file: 'config-util.log',
 	timestamp: true
 });
 
-let instance: null | ConfigUtil = null;
 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;
+	const {remote} = electron;
 	dialog = remote.dialog;
 	app = remote.app;
 } else {
@@ -26,68 +24,71 @@ if (process.type === 'renderer') {
 	app = electron.app;
 }
 
-class ConfigUtil {
+let db: JsonDB;
-	db: JsonDB;
 
-	constructor() {
+reloadDB();
-		if (instance) {
-			return instance;
-		} else {
-			instance = this;
-		}
 
-		this.reloadDB();
+export function getConfigItem(key: string, defaultValue: unknown = null): any {
-		return instance;
-	}
-
-	getConfigItem(key: string, defaultValue: any = null): any {
 	try {
-			this.db.reload();
+		db.reload();
-		} catch (err) {
+	} catch (error) {
 		logger.error('Error while reloading settings.json: ');
-			logger.error(err);
+		logger.error(error);
 	}
-		const value = this.db.getData('/')[key];
+
+	const value = db.getData('/')[key];
 	if (value === undefined) {
-			this.setConfigItem(key, defaultValue);
+		setConfigItem(key, defaultValue);
 		return defaultValue;
-		} else {
+	}
+
+	return value;
+}
+
+export function getConfigString(key: string, defaultValue: string): string {
+	const value = getConfigItem(key, defaultValue);
+	if (typeof value === 'string') {
 		return value;
 	}
-	}
 
-	// This function returns whether a key exists in the configuration file (settings.json)
+	setConfigItem(key, defaultValue);
-	isConfigItemExists(key: string): boolean {
+	return defaultValue;
+}
+
+// This function returns whether a key exists in the configuration file (settings.json)
+export function isConfigItemExists(key: string): boolean {
 	try {
-			this.db.reload();
+		db.reload();
-		} catch (err) {
+	} catch (error) {
 		logger.error('Error while reloading settings.json: ');
-			logger.error(err);
+		logger.error(error);
-		}
-		const value = this.db.getData('/')[key];
-		return (value !== undefined);
 	}
 
-	setConfigItem(key: string, value: any, override? : boolean): void {
+	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
+		// If item is in global config and we're not trying to override
 		return;
 	}
-		this.db.push(`/${key}`, value, true);
-		this.db.save();
-	}
 
-	removeConfigItem(key: string): void {
+	db.push(`/${key}`, value, true);
-		this.db.delete(`/${key}`);
+	db.save();
-		this.db.save();
+}
-	}
 
-	reloadDB(): void {
+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 (err) {
+	} catch (error) {
 		if (fs.existsSync(settingsJsonPath)) {
 			fs.unlinkSync(settingsJsonPath);
 			dialog.showErrorBox(
@@ -95,12 +96,10 @@ class ConfigUtil {
 				'We encountered an error while saving the settings.'
 			);
 			logger.error('Error while JSON parsing settings.json: ');
-				logger.error(err);
+			logger.error(error);
-				logger.reportSentry(err);
+			logger.reportSentry(error);
 		}
 	}
-		this.db = new JsonDB(settingsJsonPath, true, true);
-	}
-}
 
-export = new ConfigUtil();
+	db = new JsonDB(settingsJsonPath, true, true);
+}

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

@@ -1,11 +1,12 @@
-import fs = require('fs');
+import electron from 'electron';
+import fs from 'fs';
 
 let app: Electron.App = null;
 let setupCompleted = false;
 if (process.type === 'renderer') {
-	app = require('electron').remote.app;
+	app = electron.remote.app;
 } else {
-	app = require('electron').app;
+	app = electron.app;
 }
 
 const zulipDir = app.getPath('userData');
@@ -13,7 +14,7 @@ const logDir = `${zulipDir}/Logs/`;
 const certificatesDir = `${zulipDir}/certificates/`;
 const configDir = `${zulipDir}/config/`;
 export const initSetUp = (): void => {
-	// if it is the first time the app is running
+	// If it is the first time the app is running
 	// create zulip dir in userData folder to
 	// avoid errors
 	if (!setupCompleted) {
@@ -41,19 +42,19 @@ export const initSetUp = (): void => {
 			const configData = [
 				{
 					path: domainJson,
-					fileName: `domain.json`
+					fileName: 'domain.json'
 				},
 				{
 					path: certificatesJson,
-					fileName: `certificates.json`
+					fileName: 'certificates.json'
 				},
 				{
 					path: settingsJson,
-					fileName: `settings.json`
+					fileName: 'settings.json'
 				},
 				{
 					path: updatesJson,
-					fileName: `updates.json`
+					fileName: 'updates.json'
 				}
 			];
 			configData.forEach(data => {
@@ -62,7 +63,7 @@ export const initSetUp = (): void => {
 					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);

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

@@ -1,30 +1,28 @@
-'use strict';
+import * as ConfigUtil from './config-util';
 
-import ConfigUtil = require('./config-util');
+type SettingName = 'showNotification' | 'silent' | 'flashTaskbarOnMessage';
 
-// TODO: TypeScript - add to Setting interface
+export interface DNDSettings {
-// the list of settings since we have fixed amount of them
+	showNotification?: boolean;
-// We want to do this by creating a new module that exports
+	silent?: boolean;
-// this interface
+	flashTaskbarOnMessage?: boolean;
-interface Setting {
-	[key: string]: any;
 }
 
 interface Toggle {
 	dnd: boolean;
-	newSettings: Setting;
+	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: Setting;
+	let newSettings: DNDSettings;
 	if (dnd) {
-		const oldSettings: Setting = {};
+		const oldSettings: DNDSettings = {};
 		newSettings = {};
 
 		// Iterate through the dndSettingList.

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

@@ -1,276 +1,179 @@
-'use strict';
+import {JsonDB} from 'node-json-db';
-import JsonDB from 'node-json-db';
 
-import escape = require('escape-html');
+import fs from 'fs';
-import request = require('request');
+import path from 'path';
-import fs = require('fs');
+import Logger from './logger-util';
-import path = require('path');
+import {remote, ipcRenderer} from 'electron';
-import Logger = require('./logger-util');
-import electron = require('electron');
 
-import RequestUtil = require('./request-util');
+import * as EnterpriseUtil from './enterprise-util';
-import EnterpriseUtil = require('./enterprise-util');
+import * as Messages from '../../../resources/messages';
-import Messages = require('../../../resources/messages');
 
-const { app, dialog } = electron.remote;
+const {app, dialog} = remote;
+
+export interface ServerConf {
+	url: string;
+	alias?: string;
+	icon?: string;
+}
 
 const logger = new Logger({
-	file: `domain-util.log`,
+	file: 'domain-util.log',
 	timestamp: true
 });
 
-let instance: null | DomainUtil = null;
-
 const defaultIconUrl = '../renderer/img/icon.png';
 
-class DomainUtil {
+let db: JsonDB;
-	db: JsonDB;
-	constructor() {
-		if (instance) {
-			return instance;
-		} else {
-			instance = this;
-		}
 
-		this.reloadDB();
+reloadDB();
-		// Migrate from old schema
+// Migrate from old schema
-		if (this.db.getData('/').domain) {
+if (db.getData('/').domain) {
-			this.addDomain({
+	(async () => {
+		await addDomain({
 			alias: 'Zulip',
-				url: this.db.getData('/domain')
+			url: db.getData('/domain')
 		});
-			this.db.delete('/domain');
+		db.delete('/domain');
-		}
+	})();
+}
 
-		return instance;
+export function getDomains(): ServerConf[] {
-	}
+	reloadDB();
-
+	if (db.getData('/').domains === undefined) {
-	getDomains(): any {
-		this.reloadDB();
-		if (this.db.getData('/').domains === undefined) {
 		return [];
-		} else {
-			return this.db.getData('/domains');
-		}
 	}
 
-	getDomain(index: number): any {
+	return db.getData('/domains');
-		this.reloadDB();
+}
-		return this.db.getData(`/domains[${index}]`);
-	}
 
-	updateDomain(index: number, server: object): void {
+export function getDomain(index: number): ServerConf {
-		this.reloadDB();
+	reloadDB();
-		this.db.push(`/domains[${index}]`, server, true);
+	return db.getData(`/domains[${index}]`);
-	}
+}
 
-	addDomain(server: any): Promise<void> {
+export function updateDomain(index: number, server: ServerConf): void {
-		const { ignoreCerts } = server;
+	reloadDB();
-		return new Promise(resolve => {
+	db.push(`/domains[${index}]`, server, true);
+}
+
+export async function addDomain(server: ServerConf): Promise<void> {
 	if (server.icon) {
-				this.saveServerIcon(server, ignoreCerts).then(localIconUrl => {
+		const localIconUrl = await saveServerIcon(server);
 		server.icon = localIconUrl;
-					this.db.push('/domains[]', server, true);
+		db.push('/domains[]', server, true);
-					this.reloadDB();
+		reloadDB();
-					resolve();
-				});
 	} else {
 		server.icon = defaultIconUrl;
-				this.db.push('/domains[]', server, true);
+		db.push('/domains[]', server, true);
-				this.reloadDB();
+		reloadDB();
-				resolve();
-			}
-		});
 	}
+}
 
-	removeDomains(): void {
+export function removeDomains(): void {
-		this.db.delete('/domains');
+	db.delete('/domains');
-		this.reloadDB();
+	reloadDB();
-	}
+}
 
-	removeDomain(index: number): boolean {
+export function removeDomain(index: number): boolean {
-		if (EnterpriseUtil.isPresetOrg(this.getDomain(index).url)) {
+	if (EnterpriseUtil.isPresetOrg(getDomain(index).url)) {
-			return false;
-		}
-		this.db.delete(`/domains[${index}]`);
-		this.reloadDB();
-		return true;
-	}
-
-	// Check if domain is already added
-	duplicateDomain(domain: any): boolean {
-		domain = this.formatUrl(domain);
-		const servers = this.getDomains();
-		for (const i in servers) {
-			if (servers[i].url === domain) {
-				return true;
-			}
-		}
 		return false;
 	}
 
-	async checkCertError(domain: any, serverConf: any, error: string, silent: boolean): Promise<string | object> {
+	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);
+}
+
+async function checkCertError(domain: string, serverConf: ServerConf, error: any, silent: boolean): Promise<ServerConf> {
 	if (silent) {
-			// since getting server settings has already failed
+		// Since getting server settings has already failed
 		return serverConf;
-		} else {
+	}
+
 	// Report error to sentry to get idea of possible certificate errors
 	// users get when adding the servers
-			logger.reportSentry(new Error(error).toString());
+	logger.reportSentry(error);
 	const certErrorMessage = Messages.certErrorMessage(domain, error);
 	const certErrorDetail = Messages.certErrorDetail();
 
-			const response = await (dialog.showMessageBox({
+	await dialog.showMessageBox({
-				type: 'warning',
+		type: 'error',
-				buttons: ['Yes', 'No'],
+		buttons: ['OK'],
-				defaultId: 1,
 		message: certErrorMessage,
 		detail: certErrorDetail
-			}) as any); // TODO: TypeScript - Figure this out
+	});
-			if (response === 0) {
-				// set ignoreCerts parameter to true in case user responds with yes
-				serverConf.ignoreCerts = true;
-				try {
-					return await this.getServerSettings(domain, serverConf.ignoreCerts);
-				} catch (_) {
-					if (error === Messages.noOrgsError(domain)) {
-						throw new Error(error);
-					}
-					return serverConf;
-				}
-			} else {
 	throw new Error('Untrusted certificate.');
-			}
+}
-		}
-	}
 
-	// ignoreCerts parameter helps in fetching server icon and
+export async function checkDomain(domain: string, silent = false): Promise<ServerConf> {
-	// other server details when user chooses to ignore certificate warnings
+	if (!silent && duplicateDomain(domain)) {
-	async checkDomain(domain: any, ignoreCerts = false, silent = false): Promise<any> {
-		if (!silent && this.duplicateDomain(domain)) {
 		// Do not check duplicate in silent mode
 		throw new Error('This server has been added.');
 	}
 
-		domain = this.formatUrl(domain);
+	domain = formatUrl(domain);
 
 	const serverConf = {
 		icon: defaultIconUrl,
 		url: domain,
-			alias: domain,
+		alias: domain
-			ignoreCerts
 	};
 
 	try {
-			return await this.getServerSettings(domain, serverConf.ignoreCerts);
+		return await getServerSettings(domain);
-		} catch (err) {
+	} catch (error_) {
-			// If the domain contains following strings we just bypass the server
+		// Make sure that error is an error or string not undefined
-			const whitelistDomains = [
-				'zulipdev.org'
-			];
-
-			// make sure that error is an error or string not undefined
 		// so validation does not throw error.
-			const error = err || '';
+		const error = error_ || '';
 
 		const certsError = error.toString().includes('certificate');
-			if (domain.indexOf(whitelistDomains) >= 0 || certsError) {
+		if (certsError) {
-				return this.checkCertError(domain, serverConf, error, silent);
+			const result = await checkCertError(domain, serverConf, error, silent);
-			} else {
+			return result;
-				throw Messages.invalidZulipServerError(domain);
-			}
-		}
 		}
 
-	getServerSettings(domain: any, ignoreCerts = false): Promise<object | string> {
+		throw new Error(Messages.invalidZulipServerError(domain));
-		const serverSettingsOptions = {
-			url: domain + '/api/v1/server_settings',
-			...RequestUtil.requestOptions(domain, ignoreCerts)
-		};
-
-		return new Promise((resolve, reject) => {
-			request(serverSettingsOptions, (error: string, response: any) => {
-				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(Messages.noOrgsError(domain));
-					}
-				} else {
-					reject(response);
-				}
-			});
-		});
 	}
+}
 
-	saveServerIcon(server: any, ignoreCerts = false): Promise<string> {
+async function getServerSettings(domain: string): Promise<ServerConf> {
-		const url = server.icon;
+	return ipcRenderer.invoke('get-server-settings', domain);
-		const domain = server.url;
+}
 
-		const serverIconOptions = {
+export async function saveServerIcon(server: ServerConf): Promise<string> {
-			url,
+	return ipcRenderer.invoke('save-server-icon', server.icon);
-			...RequestUtil.requestOptions(domain, ignoreCerts)
+}
-		};
 
-		// The save will always succeed. If url is invalid, downgrade to default icon.
+export async function updateSavedServer(url: string, index: number): Promise<void> {
-		return new Promise(resolve => {
-			const filePath = this.generateFilePath(url);
-			const file = fs.createWriteStream(filePath);
-			try {
-				request(serverIconOptions).on('response', (response: any) => {
-					response.on('error', (err: string) => {
-						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: string) => {
-					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: string, index: number): void {
 	// Does not promise successful update
-		const oldIcon = this.getDomain(index).icon;
+	const oldIcon = getDomain(index).icon;
-		const { ignoreCerts } = this.getDomain(index);
+	try {
-		this.checkDomain(url, ignoreCerts, true).then(newServerConf => {
+		const newServerConf = await checkDomain(url, true);
-			this.saveServerIcon(newServerConf, ignoreCerts).then(localIconUrl => {
+		const localIconUrl = await saveServerIcon(newServerConf);
 		if (!oldIcon || localIconUrl !== '../renderer/img/icon.png') {
 			newServerConf.icon = localIconUrl;
-					this.updateDomain(index, newServerConf);
+			updateDomain(index, newServerConf);
-					this.reloadDB();
+			reloadDB();
 		}
-			});
+	} catch (error) {
-		});
+		logger.log('Could not update server icon.');
+		logger.log(error);
+		logger.reportSentry(error);
 	}
+}
 
-	reloadDB(): void {
+function reloadDB(): void {
 	const domainJsonPath = path.join(app.getPath('userData'), 'config/domain.json');
 	try {
 		const file = fs.readFileSync(domainJsonPath, 'utf8');
 		JSON.parse(file);
-		} catch (err) {
+	} catch (error) {
 		if (fs.existsSync(domainJsonPath)) {
 			fs.unlinkSync(domainJsonPath);
 			dialog.showErrorBox(
@@ -279,40 +182,22 @@ class DomainUtil {
 				'you may have to re-add your previous organizations back.'
 			);
 			logger.error('Error while JSON parsing domain.json: ');
-				logger.error(err);
+			logger.error(error);
-				logger.reportSentry(err);
+			logger.reportSentry(error);
 		}
 	}
-		this.db = new JsonDB(domainJsonPath, true, true);
-	}
 
-	generateFilePath(url: string): string {
+	db = new JsonDB(domainJsonPath, true, true);
-		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: any): string {
-		const hasPrefix = (domain.indexOf('http') === 0);
-		if (hasPrefix) {
-			return domain;
-		} else {
-			return (domain.indexOf('localhost:') >= 0) ? `http://${domain}` : `https://${domain}`;
-		}
-	}
 }
 
-export = new DomainUtil();
+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

@@ -1,29 +1,20 @@
-import fs = require('fs');
+import fs from 'fs';
-import path = require('path');
+import path from 'path';
 
-import Logger = require('./logger-util');
+import Logger from './logger-util';
 
 const logger = new Logger({
 	file: 'enterprise-util.log',
 	timestamp: true
 });
 
-let instance: null | EnterpriseUtil = null;
+// TODO: replace enterpriseSettings type with an interface once settings are final
+let enterpriseSettings: {[key: string]: unknown};
+let configFile: boolean;
 
-class EnterpriseUtil {
+reloadDB();
-	// todo: replace enterpriseSettings type with an interface once settings are final
-	enterpriseSettings: any;
-	configFile: boolean;
-	constructor() {
-		if (instance) {
-			return instance;
-		}
-		instance = this;
 
-		this.reloadDB();
+function reloadDB(): void {
-	}
-
-	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';
@@ -31,50 +22,60 @@ class EnterpriseUtil {
 
 	enterpriseFile = path.resolve(enterpriseFile);
 	if (fs.existsSync(enterpriseFile)) {
-			this.configFile = true;
+		configFile = true;
 		try {
 			const file = fs.readFileSync(enterpriseFile, 'utf8');
-				this.enterpriseSettings = JSON.parse(file);
+			enterpriseSettings = JSON.parse(file);
-			} catch (err) {
+		} catch (error) {
 			logger.log('Error while JSON parsing global_config.json: ');
-				logger.log(err);
+			logger.log(error);
 		}
 	} else {
-			this.configFile = false;
+		configFile = false;
-		}
 	}
+}
 
-	getConfigItem(key: string, defaultValue?: any): any {
+export function hasConfigFile(): boolean {
-		this.reloadDB();
+	return configFile;
-		if (!this.configFile) {
+}
+
+export function getConfigItem(key: string, defaultValue?: unknown): any {
+	reloadDB();
+	if (!configFile) {
 		return defaultValue;
 	}
+
 	if (defaultValue === undefined) {
 		defaultValue = null;
 	}
-		return this.configItemExists(key) ? this.enterpriseSettings[key] : defaultValue;
-	}
 
-	configItemExists(key: string): boolean {
+	return configItemExists(key) ? enterpriseSettings[key] : defaultValue;
-		this.reloadDB();
+}
-		if (!this.configFile) {
+
+export function configItemExists(key: string): boolean {
+	reloadDB();
+	if (!configFile) {
 		return false;
 	}
-		return (this.enterpriseSettings[key] !== undefined);
-	}
 
-	isPresetOrg(url: string): boolean {
+	return (enterpriseSettings[key] !== undefined);
-		if (!this.configFile || !this.configItemExists('presetOrganizations')) {
+}
+
+export function isPresetOrg(url: string): boolean {
+	if (!configFile || !configItemExists('presetOrganizations')) {
 		return false;
 	}
-		const presetOrgs = this.enterpriseSettings.presetOrganizations;
+
+	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;
-	}
-}
 
-export = new EnterpriseUtil();
+	return false;
+}

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

@@ -1,51 +1,45 @@
-'use strict';
+import {shell} from 'electron';
+import escape from 'escape-html';
+import fs from 'fs';
+import os from 'os';
+import path from 'path';
 
-// TODO: TypeScript - Add @types/
+export function isUploadsUrl(server: string, url: URL): boolean {
-import wurl = require('wurl');
+	return url.origin === server && url.pathname.startsWith('/user_uploads/');
-
-let instance: null | LinkUtil = null;
-
-interface IsInternalResponse {
-	isInternalUrl: boolean;
-	isUploadsUrl: boolean;
 }
 
-class LinkUtil {
+export async function openBrowser(url: URL): Promise<void> {
-	constructor() {
+	if (['http:', 'https:', 'mailto:'].includes(url.protocol)) {
-		if (instance) {
+		await shell.openExternal(url.href);
-			return instance;
 	} else {
-			instance = this;
+		// 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, `\
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="Refresh" content="0; url=${escape(url.href)}" />
+        <title>Redirecting</title>
+        <style>
+            html {
+                font-family: menu, "Helvetica Neue", sans-serif;
             }
-
+        </style>
-		return instance;
+    </head>
-	}
+    <body>
-
+        <p>Opening <a href="${escape(url.href)}">${escape(url.href)}</a>…</p>
-	isInternal(currentUrl: string, newUrl: string): IsInternalResponse {
+    </body>
-		const currentDomain = wurl('hostname', currentUrl);
+</html>
-		const newDomain = wurl('hostname', newUrl);
+`);
-
+		shell.openItem(file);
-		const sameDomainUrl = (currentDomain === newDomain || newUrl === currentUrl + '/');
+		setTimeout(() => {
-		const isUploadsUrl = newUrl.includes(currentUrl + '/user_uploads/');
+			fs.unlinkSync(file);
-		const isInternalUrl = newUrl.includes('/#narrow') || isUploadsUrl;
+			fs.rmdirSync(dir);
-
+		}, 15000);
-		return {
-			isInternalUrl: sameDomainUrl && isInternalUrl,
-			isUploadsUrl
-		};
-	}
-
-	isImage(url: string): boolean {
-		// 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: string): boolean {
-		// test for pdf extension
-		const isPDFUrl = /\.(pdf)\?*.*$/i;
-		return isPDFUrl.test(url);
 	}
 }
-
-export = new LinkUtil();

app/renderer/js/utils/linux-update-util.ts

@@ -1,10 +1,9 @@
-'use strict';
+import {JsonDB} from 'node-json-db';
-import JsonDB from 'node-json-db';
 
-import fs = require('fs');
+import fs from 'fs';
-import path = require('path');
+import path from 'path';
-import electron = require('electron');
+import electron from 'electron';
-import Logger = require('./logger-util');
+import Logger from './logger-util';
 
 const remote =
 	process.type === 'renderer' ? electron.remote : electron;
@@ -15,50 +14,39 @@ const logger = new Logger({
 });
 
 /* To make the util runnable in both main and renderer process */
-const { dialog, app } = remote;
+const {dialog, app} = remote;
-let instance: null | LinuxUpdateUtil = null;
 
-class LinuxUpdateUtil {
+let db: JsonDB;
-	db: JsonDB;
 
-	constructor() {
+reloadDB();
-		if (instance) {
-			return instance;
-		} else {
-			instance = this;
-		}
 
-		this.reloadDB();
+export function getUpdateItem(key: string, defaultValue: unknown = null): any {
-		return instance;
+	reloadDB();
-	}
+	const value = db.getData('/')[key];
-
-	getUpdateItem(key: string, defaultValue: any = null): any {
-		this.reloadDB();
-		const value = this.db.getData('/')[key];
 	if (value === undefined) {
-			this.setUpdateItem(key, defaultValue);
+		setUpdateItem(key, defaultValue);
 		return defaultValue;
-		} else {
+	}
+
 	return value;
-		}
+}
-	}
 
-	setUpdateItem(key: string, value: any): void {
+export function setUpdateItem(key: string, value: unknown): void {
-		this.db.push(`/${key}`, value, true);
+	db.push(`/${key}`, value, true);
-		this.reloadDB();
+	reloadDB();
-	}
+}
 
-	removeUpdateItem(key: string): void {
+export function removeUpdateItem(key: string): void {
-		this.db.delete(`/${key}`);
+	db.delete(`/${key}`);
-		this.reloadDB();
+	reloadDB();
-	}
+}
 
-	reloadDB(): void {
+function reloadDB(): void {
 	const linuxUpdateJsonPath = path.join(app.getPath('userData'), '/config/updates.json');
 	try {
 		const file = fs.readFileSync(linuxUpdateJsonPath, 'utf8');
 		JSON.parse(file);
-		} catch (err) {
+	} catch (error) {
 		if (fs.existsSync(linuxUpdateJsonPath)) {
 			fs.unlinkSync(linuxUpdateJsonPath);
 			dialog.showErrorBox(
@@ -66,11 +54,9 @@ class LinuxUpdateUtil {
 				'We encountered an error while saving the update notifications.'
 			);
 			logger.error('Error while JSON parsing updates.json: ');
-				logger.error(err);
+			logger.error(error);
 		}
 	}
-		this.db = new JsonDB(linuxUpdateJsonPath, true, true);
-	}
-}
 
-export = new LinuxUpdateUtil();
+	db = new JsonDB(linuxUpdateJsonPath, true, true);
+}

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

@@ -1,19 +1,14 @@
-import { Console as NodeConsole } from 'console'; // eslint-disable-line node/prefer-global/console
+import {Console} from 'console'; // eslint-disable-line node/prefer-global/console
-import { initSetUp } from './default-util';
+import {initSetUp} from './default-util';
-import { sentryInit, captureException } from './sentry-util';
+import {sentryInit, captureException} from './sentry-util';
 
-import fs = require('fs');
+import fs from 'fs';
-import os = require('os');
+import os from 'os';
-import isDev = require('electron-is-dev');
+import isDev from 'electron-is-dev';
-import electron = require('electron');
+import electron from 'electron';
-// this interface adds [key: string]: any so
-// we can do console[type] later on in the code
-interface PatchedConsole extends Console {
-	[key: string]: any;
-}
 
 interface LoggerOptions {
-	timestamp?: any;
+	timestamp?: true | (() => string);
 	file?: string;
 	level?: boolean;
 	logInDevMode?: boolean;
@@ -29,9 +24,9 @@ if (process.type === 'renderer') {
 	// Report Errors to Sentry only if it is enabled in settings
 	// Gets the value of reportErrors from config-util for renderer process
 	// For main process, sentryInit() is handled in index.js
-	const { ipcRenderer } = electron;
+	const {ipcRenderer} = electron;
 	ipcRenderer.send('error-reporting');
-	ipcRenderer.on('error-reporting-val', (_event: any, errorReporting: boolean) => {
+	ipcRenderer.on('error-reporting-val', (_event: Event, errorReporting: boolean) => {
 		reportErrors = errorReporting;
 		if (reportErrors) {
 			sentryInit();
@@ -41,23 +36,31 @@ if (process.type === 'renderer') {
 	app = electron.app;
 }
 
-const browserConsole: PatchedConsole = console;
 const logDir = `${app.getPath('userData')}/Logs`;
 
-class Logger {
+type Level = 'log' | 'debug' | 'info' | 'warn' | 'error';
-	nodeConsole: PatchedConsole;
+const levels: Level[] = ['log', 'debug', 'info', 'warn', 'error'];
-	timestamp: any; // TODO: TypeScript - Figure out how to make this work with string | Function.
+type LogMethod = (...args: unknown[]) => void;
+
+export default class Logger {
+	log: LogMethod;
+	debug: LogMethod;
+	info: LogMethod;
+	warn: LogMethod;
+	error: LogMethod;
+
+	nodeConsole: Console;
+	timestamp?: () => string;
 	level: boolean;
 	logInDevMode: boolean;
-	[key: string]: any;
 
-	constructor(opts: LoggerOptions = {}) {
+	constructor(options: LoggerOptions = {}) {
 		let {
 			timestamp = true,
 			file = 'console.log',
 			level = true,
 			logInDevMode = false
-		} = opts;
+		} = options;
 
 		file = `${logDir}/${file}`;
 		if (timestamp === true) {
@@ -71,8 +74,8 @@ class Logger {
 			process.nextTick(() => this.trimLog(file));
 		}
 
-		const fileStream = fs.createWriteStream(file, { flags: 'a' });
+		const fileStream = fs.createWriteStream(file, {flags: 'a'});
-		const nodeConsole = new NodeConsole(fileStream);
+		const nodeConsole = new Console(fileStream);
 
 		this.nodeConsole = nodeConsole;
 		this.timestamp = timestamp;
@@ -81,42 +84,38 @@ class Logger {
 		this.setUpConsole();
 	}
 
-	_log(type: string, ...args: any[]): void {
+	_log(type: Level, ...args: unknown[]): void {
 		const {
 			nodeConsole, timestamp, level, logInDevMode
 		} = this;
-		let nodeConsoleLog;
 
-		/* eslint-disable no-fallthrough */
 		switch (true) {
 			case typeof timestamp === 'function':
 				args.unshift(timestamp() + ' |\t');
+				// Fall through
 
-			case (level !== false):
+			case (level):
 				args.unshift(type.toUpperCase() + ' |');
+				// Fall through
 
 			case isDev || logInDevMode:
-				nodeConsoleLog = nodeConsole[type] || nodeConsole.log;
+				nodeConsole[type](...args);
-				nodeConsoleLog.apply(null, args); // eslint-disable-line prefer-spread
+				break;
 
-			default: break;
+			default:
 		}
-		/* eslint-enable no-fallthrough */
 
-		browserConsole[type].apply(null, args);
+		console[type](...args);
 	}
 
 	setUpConsole(): void {
-		for (const type in browserConsole) {
+		for (const type of levels) {
 			this.setupConsoleMethod(type);
 		}
 	}
 
-	setupConsoleMethod(type: string): void {
+	setupConsoleMethod(type: Level): void {
-		this[type] = (...args: any[]) => {
+		this[type] = (...args: unknown[]) => this._log(type, ...args);
-			const log = this._log.bind(this, type, ...args);
-			log();
-		};
 	}
 
 	getTimestamp(): string {
@@ -127,7 +126,7 @@ class Logger {
 		return timestamp;
 	}
 
-	reportSentry(err: string): void {
+	reportSentry(err: unknown): void {
 		if (reportErrors) {
 			captureException(err);
 		}
@@ -138,6 +137,7 @@ class Logger {
 			if (err) {
 				throw err;
 			}
+
 			const MAX_LOG_FILE_LINES = 500;
 			const logs = data.split(os.EOL);
 			const logLength = logs.length - 1;
@@ -151,5 +151,3 @@ class Logger {
 		});
 	}
 }
-
-export = Logger;

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

@@ -1,11 +0,0 @@
-// This util function returns the page params if they're present else returns null
-export function isPageParams(): null | object {
-	let webpageParams = null;
-	try {
-		// eslint-disable-next-line no-undef, @typescript-eslint/camelcase
-		webpageParams = page_params;
-	} catch (_) {
-		webpageParams = null;
-	}
-	return webpageParams;
-}

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

@@ -1,116 +1,61 @@
-'use strict';
+import * as ConfigUtil from './config-util';
 
-import url = require('url');
+export interface ProxyRule {
-
-import ConfigUtil = require('./config-util');
-
-let instance: null | ProxyUtil = null;
-
-interface ProxyRule {
 	hostname?: string;
 	port?: number;
 }
 
-class ProxyUtil {
+// TODO: Refactor to async function
-	constructor() {
+export async function resolveSystemProxy(mainWindow: Electron.BrowserWindow): Promise<void> {
-		if (instance) {
-			return instance;
-		} else {
-			instance = this;
-		}
-
-		return instance;
-	}
-
-	// Return proxy to be used for a particular uri, to be used for request
-	getProxy(_uri: string): ProxyRule | void {
-		const parsedUri = url.parse(_uri);
-		if (parsedUri === null) {
-			return;
-		}
-
-		const uri = parsedUri;
-		const proxyRules = ConfigUtil.getConfigItem('proxyRules', '').split(';');
-		// If SPS is on and system uses no proxy then request should not try to use proxy from
-		// environment. NO_PROXY = '*' makes request ignore all environment proxy variables.
-		if (proxyRules[0] === '') {
-			process.env.NO_PROXY = '*';
-			return;
-		}
-
-		const proxyRule: any = {};
-		if (uri.protocol === 'http:') {
-			proxyRules.forEach((proxy: string) => {
-				if (proxy.includes('http=')) {
-					proxyRule.hostname = proxy.split('http=')[1].trim().split(':')[0];
-					proxyRule.port = proxy.split('http=')[1].trim().split(':')[1];
-				}
-			});
-			return proxyRule;
-		}
-
-		if (uri.protocol === 'https:') {
-			proxyRules.forEach((proxy: string) => {
-				if (proxy.includes('https=')) {
-					proxyRule.hostname = proxy.split('https=')[1].trim().split(':')[0];
-					proxyRule.port = proxy.split('https=')[1].trim().split(':')[1];
-				}
-			});
-			return proxyRule;
-		}
-	}
-
-	// TODO: Refactor to async function
-	resolveSystemProxy(mainWindow: Electron.BrowserWindow): void {
 	const page = mainWindow.webContents;
 	const ses = page.session;
 	const resolveProxyUrl = 'www.example.com';
 
 	// Check HTTP Proxy
-		const httpProxy = new Promise(resolve => {
+	const httpProxy = (async () => {
-			ses.resolveProxy('http://' + resolveProxyUrl, (proxy: string) => {
+		const proxy = await ses.resolveProxy('http://' + resolveProxyUrl);
 		let httpString = '';
 		if (proxy !== 'DIRECT') {
-					// in case of proxy HTTPS url:port, windows gives first word as HTTPS while linux gives PROXY
+			// In case of proxy HTTPS url:port, windows gives first word as HTTPS while linux gives PROXY
 			// for all other HTTP or direct url:port both uses PROXY
 			if (proxy.includes('PROXY') || proxy.includes('HTTPS')) {
 				httpString = 'http=' + proxy.split('PROXY')[1] + ';';
 			}
 		}
-				resolve(httpString);
+
-			});
+		return httpString;
-		});
+	})();
 	// Check HTTPS Proxy
-		const httpsProxy = new Promise(resolve => {
+	const httpsProxy = (async () => {
-			ses.resolveProxy('https://' + resolveProxyUrl, (proxy: string) => {
+		const proxy = await ses.resolveProxy('https://' + resolveProxyUrl);
 		let httpsString = '';
 		if (proxy !== 'DIRECT' || proxy.includes('HTTPS')) {
-					// in case of proxy HTTPS url:port, windows gives first word as HTTPS while linux gives PROXY
+			// In case of proxy HTTPS url:port, windows gives first word as HTTPS while linux gives PROXY
 			// for all other HTTP or direct url:port both uses PROXY
 			if (proxy.includes('PROXY') || proxy.includes('HTTPS')) {
 				httpsString += 'https=' + proxy.split('PROXY')[1] + ';';
 			}
 		}
-				resolve(httpsString);
+
-			});
+		return httpsString;
-		});
+	})();
 
 	// Check FTP Proxy
-		const ftpProxy = new Promise(resolve => {
+	const ftpProxy = (async () => {
-			ses.resolveProxy('ftp://' + resolveProxyUrl, (proxy: string) => {
+		const proxy = await ses.resolveProxy('ftp://' + resolveProxyUrl);
 		let ftpString = '';
 		if (proxy !== 'DIRECT') {
 			if (proxy.includes('PROXY')) {
 				ftpString += 'ftp=' + proxy.split('PROXY')[1] + ';';
 			}
 		}
-				resolve(ftpString);
+
-			});
+		return ftpString;
-		});
+	})();
 
 	// Check SOCKS Proxy
-		const socksProxy = new Promise(resolve => {
+	const socksProxy = (async () => {
-			ses.resolveProxy('socks4://' + resolveProxyUrl, (proxy: string) => {
+		const proxy = await ses.resolveProxy('socks4://' + resolveProxyUrl);
 		let socksString = '';
 		if (proxy !== 'DIRECT') {
 			if (proxy.includes('SOCKS5')) {
@@ -121,11 +66,11 @@ class ProxyUtil {
 				socksString += 'socks=' + proxy.split('PROXY')[1] + ';';
 			}
 		}
-				resolve(socksString);
-			});
-		});
 
-		Promise.all([httpProxy, httpsProxy, ftpProxy, socksProxy]).then(values => {
+		return socksString;
+	})();
+
+	const values = await Promise.all([httpProxy, httpsProxy, ftpProxy, socksProxy]);
 	let proxyString = '';
 	values.forEach(proxy => {
 		proxyString += proxy;
@@ -135,8 +80,4 @@ class ProxyUtil {
 	if (useSystemProxy) {
 		ConfigUtil.setConfigItem('proxyRules', proxyString);
 	}
-		});
-	}
 }
-
-export = new ProxyUtil();

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

@@ -1,67 +1,68 @@
-import isOnline = require('is-online');
+import {ipcRenderer} from 'electron';
-import Logger = require('./logger-util');
+
+import type WebView from '../components/webview';
+import backoff from 'backoff';
+import Logger from './logger-util';
 
 const logger = new Logger({
-	file: `domain-util.log`,
+	file: 'domain-util.log',
 	timestamp: true
 });
 
-class ReconnectUtil {
+export default class ReconnectUtil {
-	// TODO: TypeScript - Figure out how to annotate serverManagerView
+	webview: WebView;
-	// it should be ServerManagerView; maybe make it a generic so we can
+	url: string;
-	// pass the class from main.js
-	serverManagerView: any;
 	alreadyReloaded: boolean;
+	fibonacciBackoff: backoff.Backoff;
 
-	constructor(serverManagerView: any) {
+	constructor(webview: WebView) {
-		this.serverManagerView = serverManagerView;
+		this.webview = webview;
+		this.url = webview.props.url;
 		this.alreadyReloaded = false;
+		this.clearState();
 	}
 
 	clearState(): void {
-		this.alreadyReloaded = false;
+		this.fibonacciBackoff = backoff.fibonacci({
+			initialDelay: 5000,
+			maxDelay: 300000
+		});
+	}
+
+	async isOnline(): Promise<boolean> {
+		return ipcRenderer.invoke('is-online', this.url);
 	}
 
 	pollInternetAndReload(): void {
-		const pollInterval = setInterval(() => {
+		this.fibonacciBackoff.backoff();
-			this._checkAndReload()
+		this.fibonacciBackoff.on('ready', async () => {
-				.then(status => {
+			if (await this._checkAndReload()) {
-					if (status) {
+				this.fibonacciBackoff.reset();
-						this.alreadyReloaded = true;
+			} else {
-						clearInterval(pollInterval);
+				this.fibonacciBackoff.backoff();
 			}
 		});
-		}, 1500);
 	}
 
-	// TODO: Make this a async function
+	async _checkAndReload(): Promise<boolean> {
-	_checkAndReload(): Promise<boolean> {
+		if (this.alreadyReloaded) {
-		return new Promise(resolve => {
+			return true;
-			if (!this.alreadyReloaded) { // eslint-disable-line no-negated-condition
-				isOnline()
-					.then((online: boolean) => {
-						if (online) {
-							if (!this.alreadyReloaded) {
-								this.serverManagerView.reloadCurrentView();
 		}
+
+		if (await this.isOnline()) {
+			ipcRenderer.send('forward-message', 'reload-viewer');
 			logger.log('You\'re back online.');
-							return resolve(true);
+			return true;
 		}
 
 		logger.log('There is no internet connection, try checking network cables, modem and router.');
-						const errMsgHolder = document.querySelector('#description');
+		const errorMessageHolder = document.querySelector('#description');
-						if (errMsgHolder) {
+		if (errorMessageHolder) {
-							errMsgHolder.innerHTML = `
+			errorMessageHolder.innerHTML = `
 						<div>Your internet connection doesn't seem to work properly!</div>
 						<div>Verify that it works and then click try again.</div>`;
 		}
-						return resolve(false);
+
-					});
+		return false;
-			} else {
-				return resolve(true);
-			}
-		});
 	}
 }
-
-export = ReconnectUtil;

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

@@ -1,73 +0,0 @@
-import fs = require('fs');
-import ConfigUtil = require('./config-util');
-import Logger = require('./logger-util');
-import ProxyUtil = require('./proxy-util');
-import CertificateUtil = require('./certificate-util');
-import SystemUtil = require('./system-util');
-
-const logger = new Logger({
-	file: `request-util.log`,
-	timestamp: true
-});
-
-let instance: null | RequestUtil = null;
-
-// TODO: TypeScript - Use ProxyRule for the proxy property
-// we can do this now since we use export = ProxyUtil syntax
-interface RequestUtilResponse {
-	ca: string;
-	proxy: string | void | object;
-	ecdhCurve: 'auto';
-	headers: { 'User-Agent': string };
-	rejectUnauthorized: boolean;
-}
-
-class RequestUtil {
-	constructor() {
-		if (!instance) {
-			instance = this;
-		}
-
-		return instance;
-	}
-
-	// ignoreCerts parameter helps in fetching server icon and
-	// other server details when user chooses to ignore certificate warnings
-	requestOptions(domain: string, ignoreCerts: boolean): RequestUtilResponse {
-		domain = this.formatUrl(domain);
-		const certificate = CertificateUtil.getCertificate(
-			encodeURIComponent(domain)
-		);
-		let certificateLocation = '';
-		if (certificate) {
-			// To handle case where certificate has been moved from the location in certificates.json
-			try {
-				certificateLocation = fs.readFileSync(certificate, 'utf8');
-			} catch (err) {
-				logger.warn(`Error while trying to get certificate: ${err}`);
-			}
-		}
-		const proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');
-		// If certificate for the domain exists add it as a ca key in the request's parameter else consider only domain as the parameter for request
-		// Add proxy as a parameter if it is being used.
-		return {
-			ca: certificateLocation ? certificateLocation : '',
-			proxy: proxyEnabled ? ProxyUtil.getProxy(domain) : '',
-			ecdhCurve: 'auto',
-			headers: { 'User-Agent': SystemUtil.getUserAgent() },
-			rejectUnauthorized: !ignoreCerts
-		};
-	}
-
-	formatUrl(domain: string): string {
-		const hasPrefix = domain.startsWith('http', 0);
-		if (hasPrefix) {
-			return domain;
-		} else {
-			return domain.includes('localhost:') ? `http://${domain}` : `https://${domain}`;
-		}
-	}
-}
-
-const requestUtil = new RequestUtil();
-export = requestUtil;

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

@@ -1,21 +1,18 @@
-import { init } from '@sentry/electron';
+import {init} from '@sentry/electron';
 
-import isDev = require('electron-is-dev');
+import isDev from 'electron-is-dev';
-import path = require('path');
-import dotenv = require('dotenv');
-dotenv.config({ path: path.resolve(__dirname, '/../../../../.env') });
 
 export const sentryInit = (): void => {
 	if (!isDev) {
 		init({
-			dsn: process.env.SENTRY_DSN,
+			dsn: 'https://628dc2f2864243a08ead72e63f94c7b1@sentry.io/204668',
 			// We should ignore this error since it's harmless and we know the reason behind this
 			// This error mainly comes from the console logs.
 			// This is a temp solution until Sentry supports disabling the console logs
 			ignoreErrors: ['does not appear to be a valid Zulip server']
-			// sendTimeout: 30 // wait 30 seconds before considering the sending capture to have failed, default is 1 second
+			/// sendTimeout: 30 // wait 30 seconds before considering the sending capture to have failed, default is 1 second
 		});
 	}
 };
 
-export { captureException } from '@sentry/electron';
+export {captureException} from '@sentry/electron';

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

@@ -1,60 +1,39 @@
-'use strict';
+import {ipcRenderer} from 'electron';
-import { remote } from 'electron';
 
-import os = require('os');
+import os from 'os';
 
-const { app } = remote;
+export const connectivityERR: string[] = [
-let instance: null | SystemUtil = null;
-
-class SystemUtil {
-	connectivityERR: string[];
-
-	userAgent: string | null;
-
-	constructor() {
-		if (instance) {
-			return instance;
-		} else {
-			instance = this;
-		}
-
-		this.connectivityERR = [
 	'ERR_INTERNET_DISCONNECTED',
 	'ERR_PROXY_CONNECTION_FAILED',
 	'ERR_CONNECTION_RESET',
 	'ERR_NOT_CONNECTED',
 	'ERR_NAME_NOT_RESOLVED',
 	'ERR_NETWORK_CHANGED'
-		];
+];
-		this.userAgent = null;
 
-		return instance;
+const userAgent = ipcRenderer.sendSync('fetch-user-agent');
-	}
 
-	getOS(): string {
+export function getOS(): string {
 	const platform = os.platform();
 	if (platform === 'darwin') {
 		return 'Mac';
-		} else if (platform === 'linux') {
+	}
+
+	if (platform === 'linux') {
 		return 'Linux';
-		} else if (platform === 'win32') {
+	}
-			if (parseFloat(os.release()) < 6.2) {
+
+	if (platform === 'win32') {
+		if (Number.parseFloat(os.release()) < 6.2) {
 			return 'Windows 7';
-			} else {
+		}
+
 		return 'Windows 10';
 	}
-		} else {
+
 	return '';
-		}
-	}
-
-	setUserAgent(webViewUserAgent: string): void {
-		this.userAgent = `ZulipElectron/${app.getVersion()} ${webViewUserAgent}`;
-	}
-
-	getUserAgent(): string | null {
-		return this.userAgent;
-	}
 }
 
-export = new SystemUtil();
+export function getUserAgent(): string {
+	return userAgent;
+}

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

@@ -1,29 +0,0 @@
-'use strict';
-const path = require("path");
-const electron = require("electron");
-const i18n = require("i18n");
-let instance = null;
-let app = null;
-/* To make the util runnable in both main and renderer process */
-if (process.type === 'renderer') {
-    app = electron.remote.app;
-}
-else {
-    app = electron.app;
-}
-class TranslationUtil {
-    constructor() {
-        if (instance) {
-            return this;
-        }
-        instance = this;
-        i18n.configure({
-            directory: path.join(__dirname, '../../../translations/'),
-            register: this
-        });
-    }
-    __(phrase) {
-        return i18n.__({ phrase, locale: app.getLocale() });
-    }
-}
-module.exports = new TranslationUtil();

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

@@ -1,35 +1,16 @@
-'use strict';
+import path from 'path';
+import i18n from 'i18n';
+import * as ConfigUtil from './config-util';
 
-import path = require('path');
+i18n.configure({
-import electron = require('electron');
-import i18n = require('i18n');
-
-let instance: TranslationUtil = null;
-let app: Electron.App = null;
-
-/* To make the util runnable in both main and renderer process */
-if (process.type === 'renderer') {
-	app = electron.remote.app;
-} else {
-	app = electron.app;
-}
-
-class TranslationUtil {
-	constructor() {
-		if (instance) {
-			return this;
-		}
-
-		instance = this;
-		i18n.configure({
 	directory: path.join(__dirname, '../../../translations/'),
-			register: this
+	updateFiles: false
-		});
+});
-	}
 
-	__(phrase: string): string {
+/* Fetches the current appLocale from settings.json */
-		return i18n.__({ phrase, locale: app.getLocale() ? app.getLocale() : 'en' });
+const appLocale = ConfigUtil.getConfigItem('appLanguage');
-	}
+
+/* If no locale present in the json, en is set default */
+export function __(phrase: string): string {
+	return i18n.__({phrase, locale: appLocale ? appLocale : 'en'});
 }
-
-export = new TranslationUtil();

app/renderer/main.html

@@ -52,7 +52,7 @@
         </div>
 
         <div id="feedback-modal">
-            <send-feedback></send-feedback>
+            <send-feedback show-cancel-button="show"></send-feedback>
         </div>
     </body>
     

app/renderer/network.html

@@ -9,14 +9,18 @@
     <body>
         <div id="content">
             <div id="picture"><img src="img/zulip_network.png"></div>
-            <div id="title">Zulip can't connect</div>
+            <div id="title">We can't connect to this organization</div>
-            <div id="description">
+            <div id="subtitle">This could be because</div>
-                <div>Your computer seems to be offline.</div>
+            <ul id="description">
-                <div>We will keep trying to reconnect, or you can try now.</div>
+                <li>You're not online or your proxy is misconfigured.</li>
+                <li>There is no Zulip organization hosted at this URL.</li>
+                <li>This Zulip organization is temporarily unavailable.</li>
+                <li>This Zulip organization has been moved or deleted.</li>
+            </ul>
+            <div id="buttons">
+                <div id="reconnect" class="button">Reconnect</div>
+                <div id="settings" class="button">Settings</div>
             </div>
-            <div id="reconnect">Try now</div>
         </div>
     </body>
-    <script src="js/pages/network.js"></script>
-    <script>require('./js/shared/preventdrag.js')</script>
 </html>

app/renderer/preference.html

@@ -5,6 +5,7 @@
         <meta name="viewport" content="width=device-width">
         <title>Zulip - Settings</title>
         <link rel="stylesheet" href="css/preference.css" type="text/css" media="screen">
+        <link id="tagify-css" rel="stylesheet" href="data:text/css,">
     </head>
     <body>
         <div id="content">
@@ -13,6 +14,7 @@
         </div>
     </body>
     <script>
+        document.querySelector('#tagify-css').href = require.resolve('@yaireo/tagify/dist/tagify.css');
         require('./js/pages/preference/preference.js');
         require('./js/shared/preventdrag.js')
     </script>

app/resources/messages.ts

@@ -3,48 +3,45 @@ interface DialogBoxError {
 	content: string;
 }
 
-class Messages {
+export function invalidZulipServerError(domain: string): string {
-	invalidZulipServerError(domain: string): string {
 	return `${domain} does not appear to be a valid Zulip server. Make sure that
 		\n • You can connect to that URL in a web browser.\
 		\n • If you need a proxy to connect to the Internet, that you've configured your proxy in the Network settings.\
 		\n • It's a Zulip server. (The oldest supported version is 1.6).\
-			\n • The server has a valid certificate. (You can add custom certificates in Settings > Organizations).`;
+		\n • The server has a valid certificate. (You can add custom certificates in Settings > Organizations). \
-	}
+		\n • The SSL is correctly configured for the certificate. Check out the SSL troubleshooting guide -
+		\n https://zulip.readthedocs.io/en/stable/production/ssl-certificates.html`;
+}
 
-	noOrgsError(domain: string): string {
+export function noOrgsError(domain: string): string {
 	return `${domain} does not have any organizations added.\
 	\nPlease contact your server administrator.`;
-	}
+}
 
-	certErrorMessage(domain: string, error: string): string {
+export function certErrorMessage(domain: string, error: string): string {
-		return `Do you trust certificate from ${domain}? \n ${error}`;
+	return `Certificate error for ${domain}\n${error}`;
-	}
+}
 
-	certErrorDetail(): string {
+export function certErrorDetail(): string {
 	return `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.
+	\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.`;
-	}
 
-	enterpriseOrgError(length: number, domains: string[]): DialogBoxError {
+export function enterpriseOrgError(length: number, domains: string[]): DialogBoxError {
 	let domainList = '';
 	for (const domain of domains) {
 		domainList += `• ${domain}\n`;
 	}
+
 	return {
-			title: `Could not add the following ${length === 1 ? `organization` : `organizations`}`,
+		title: `Could not add the following ${length === 1 ? 'organization' : 'organizations'}`,
 		content: `${domainList}\nPlease contact your system administrator.`
 	};
-	}
-
-	orgRemovalError(url: string): DialogBoxError {
-		return {
-			title: `Removing ${url} is a restricted operation.`,
-			content: `Please contact your system administrator.`
-		};
-	}
 }
 
-export = new Messages();
+export function orgRemovalError(url: string): DialogBoxError {
+	return {
+		title: `Removing ${url} is a restricted operation.`,
+		content: 'Please contact your system administrator.'
+	};
+}

app/translations/README.md

@@ -0,0 +1,20 @@
+# How to help translate Zulip Desktop
+
+These are *generated* files (*) that contain translations of the strings in
+the app.
+
+You can help translate Zulip Desktop into your language!  We do our
+translations in Transifex, which is a nice web app for collaborating on
+translations; a maintainer then syncs those translations into this repo.
+To help out, [join the Zulip project on
+Transifex](https://www.transifex.com/zulip/zulip/) and enter translations
+there.  More details in the [Zulip contributor docs](https://zulip.readthedocs.io/en/latest/translating/translating.html#translators-workflow).
+
+Within that Transifex project, if you'd like to focus on Zulip Desktop, look
+at `desktop.json`.  The other resources there are for the Zulip web/mobile
+app, where translations are also very welcome.
+
+(*) One file is an exception: `en.json` is manually maintained as a
+list of (English) messages in the source code, and is used when we upload to
+Transifex a list of strings to be translated.  It doesn't contain any
+translations.

app/translations/ar.json

@@ -0,0 +1,134 @@
+{
+	"About Zulip": "حول \"زوليب\"",
+	"Actual Size": "الحجم الفعلي",
+	"Add Custom Certificates": "إضافة رخصة معدلة",
+	"Add Organization": "إضافة منظمة",
+	"Add a Zulip organization": "إضافة منظمة \"زوليب\"",
+	"Add custom CSS": "إصافة CSS معدلة",
+	"Advanced": "متقدم",
+	"All the connected organizations will appear here": "جميع المنظمات المتصلة تعرض هنا",
+	"Always start minimized": "دائماً إبدأ بالقليل",
+	"App Updates": "تحديث التطبيق",
+	"Appearance": "المظهر",
+	"Application Shortcuts": "إختصارات التطبيق",
+	"Are you sure you want to disconnect this organization?": "هل أنت متأكد من فصل هذة المنظمة؟",
+	"Auto hide Menu bar": "أخف القائمة تلقائياً",
+	"Auto hide menu bar (Press Alt key to display)": "أخف القائمة تلقائياً (إضغط Alt لعرض القائمة)",
+	"Back": "رجوع",
+	"Bounce dock on new private message": "أخرج المنصة في حال رسالة خاصة جديدة",
+	"Certificate file": "ملف الشهادة",
+	"Change": "تغيير",
+	"Check for Updates": "التحقق من التحديثات",
+	"Close": "اغلاق",
+	"Connect": "اتصال",
+	"Connect to another organization": "التوصيل مع منظمة أخرى",
+	"Connected organizations": "المنظمات المتصلة",
+	"Copy": "نسخ",
+	"Copy Zulip URL": "نسخ رابط زوليب",
+	"Create a new organization": "Create a new organization",
+	"Cut": "قص",
+	"Default download location": "موقع التحميل الافتراضي",
+	"Delete": "حذف",
+	"Desktop App Settings": "إعدادت تطبيق سطح المكتب",
+	"Desktop Notifications": "إشعارات سطح المكتب",
+	"Desktop Settings": "إعدادات سطح المكتب",
+	"Disconnect": "قطع الاتصال",
+	"Download App Logs": "تنزيل سجلات التطبيق",
+	"Edit": "تعديل",
+	"Edit Shortcuts": "تعديل الاختصارات",
+	"Enable auto updates": "تفعيل التحديثات التلقائية",
+	"Enable error reporting (requires restart)": "تفعيل تقارير الأخطاء (يتطلب إعادة التشغيل)",
+	"Enable spellchecker (requires restart)": "Enable spellchecker (requires restart)",
+	"Factory Reset": "إعادة ضبط المصنع",
+	"File": "ملف",
+	"Find accounts": "Find accounts",
+	"Find accounts by email": "Find accounts by email",
+	"Flash taskbar on new message": "Flash taskbar on new message",
+	"Forward": "Forward",
+	"Functionality": "Functionality",
+	"General": "General",
+	"Get beta updates": "Get beta updates",
+	"Hard Reload": "Hard Reload",
+	"Help": "Help",
+	"Help Center": "Help Center",
+	"History": "History",
+	"History Shortcuts": "History Shortcuts",
+	"Keyboard Shortcuts": "Keyboard Shortcuts",
+	"Log Out": "Log Out",
+	"Log Out of Organization": "Log Out of Organization",
+	"Manual proxy configuration": "Manual proxy configuration",
+	"Minimize": "Minimize",
+	"Mute all sounds from Zulip": "Mute all sounds from Zulip",
+	"NO": "NO",
+	"Network": "Network",
+	"OR": "OR",
+	"Organization URL": "Organization URL",
+	"Organizations": "Organizations",
+	"Paste": "Paste",
+	"Paste and Match Style": "Paste and Match Style",
+	"Proxy": "Proxy",
+	"Proxy bypass rules": "Proxy bypass rules",
+	"Proxy rules": "Proxy rules",
+	"Quit": "Quit",
+	"Quit Zulip": "Quit Zulip",
+	"Redo": "Redo",
+	"Release Notes": "Release Notes",
+	"Reload": "Reload",
+	"Report an Issue": "Report an Issue",
+	"Save": "Save",
+	"Select All": "Select All",
+	"Settings": "Settings",
+	"Shortcuts": "Shortcuts",
+	"Show App Logs": "Show App Logs",
+	"Show app icon in system tray": "Show app icon in system tray",
+	"Show app unread badge": "Show app unread badge",
+	"Show desktop notifications": "Show desktop notifications",
+	"Show downloaded files in file manager": "Show downloaded files in file manager",
+	"Show sidebar": "Show sidebar",
+	"Start app at login": "Start app at login",
+	"Switch to Next Organization": "Switch to Next Organization",
+	"Switch to Previous Organization": "Switch to Previous Organization",
+	"These desktop app shortcuts extend the Zulip webapp's": "These desktop app shortcuts extend the Zulip webapp's",
+	"This will delete all application data including all added accounts and preferences": "This will delete all application data including all added accounts and preferences",
+	"Tip": "Tip",
+	"Toggle DevTools for Active Tab": "Toggle DevTools for Active Tab",
+	"Toggle DevTools for Zulip App": "Toggle DevTools for Zulip App",
+	"Toggle Do Not Disturb": "Toggle Do Not Disturb",
+	"Toggle Full Screen": "Toggle Full Screen",
+	"Toggle Sidebar": "Toggle Sidebar",
+	"Toggle Tray Icon": "Toggle Tray Icon",
+	"Tools": "Tools",
+	"Undo": "Undo",
+	"Upload": "Upload",
+	"Use system proxy settings (requires restart)": "Use system proxy settings (requires restart)",
+	"View": "View",
+	"View Shortcuts": "View Shortcuts",
+	"Window": "Window",
+	"Window Shortcuts": "Window Shortcuts",
+	"YES": "YES",
+	"Zoom In": "Zoom In",
+	"Zoom Out": "Zoom Out",
+	"Zulip Help": "Zulip Help",
+	"keyboard shortcuts": "keyboard shortcuts",
+	"script": "script",
+	"Quit when the window is closed": "Quit when the window is closed",
+	"Ask where to save files before downloading": "Ask where to save files before downloading",
+	"Services": "Services",
+	"Hide": "Hide",
+	"Hide Others": "Hide Others",
+	"Unhide": "Unhide",
+	"AddServer": "AddServer",
+	"App language (requires restart)": "App language (requires restart)",
+	"Factory Reset Data": "Factory Reset Data",
+	"Reset the application, thus deleting all the connected organizations, accounts, and certificates.": "Reset the application, thus deleting all the connected organizations, accounts, and certificates.",
+	"On macOS, the OS spellchecker is used.": "On macOS, the OS spellchecker is used.",
+	"Change the language from System Preferences → Keyboard → Text → Spelling.": "Change the language from System Preferences → Keyboard → Text → Spelling.",
+	"Copy Link": "Copy Link",
+	"Copy Image": "Copy Image",
+	"Copy Image URL": "Copy Image URL",
+	"No Suggestion Found": "No Suggestion Found",
+	"You can select a maximum of 3 languages for spellchecking.": "You can select a maximum of 3 languages for spellchecking.",
+	"Spellchecker Languages": "Spellchecker Languages",
+	"Add to Dictionary": "Add to Dictionary",
+	"Look Up": "Look Up"
+}

app/translations/bg.json

@@ -1,5 +1,5 @@
 {
-	"About Zulip": "За Zulip",
+	"About Zulip": "Относно Zulip",
 	"Actual Size": "Действителен размер",
 	"Add Custom Certificates": "Добавяне на персонализирани сертификати",
 	"Add Organization": "Добавяне на организация",
@@ -75,9 +75,6 @@
 	"Release Notes": "Бележки към изданието",
 	"Reload": "Презареди",
 	"Report an Issue": "Подаване на сигнал за проблем",
-	"Reset App Data": "Нулиране на данни за приложения",
-	"Reset App Settings": "Нулиране на настройките на приложението",
-	"Reset Application Data": "Нулиране на данните на приложението",
 	"Save": "Запази",
 	"Select All": "Избери всички",
 	"Settings": "Настройки",
@@ -113,5 +110,25 @@
 	"Zoom Out": "Отдалечавам",
 	"Zulip Help": "Помощ за Zulip",
 	"keyboard shortcuts": "комбинация от клавиши",
-	"script": "писменост"
+	"script": "писменост",
+	"Quit when the window is closed": "Quit when the window is closed",
+	"Ask where to save files before downloading": "Ask where to save files before downloading",
+	"Services": "Services",
+	"Hide": "Hide",
+	"Hide Others": "Hide Others",
+	"Unhide": "Unhide",
+	"AddServer": "AddServer",
+	"App language (requires restart)": "App language (requires restart)",
+	"Factory Reset Data": "Factory Reset Data",
+	"Reset the application, thus deleting all the connected organizations, accounts, and certificates.": "Reset the application, thus deleting all the connected organizations, accounts, and certificates.",
+	"On macOS, the OS spellchecker is used.": "On macOS, the OS spellchecker is used.",
+	"Change the language from System Preferences → Keyboard → Text → Spelling.": "Change the language from System Preferences → Keyboard → Text → Spelling.",
+	"Copy Link": "Copy Link",
+	"Copy Image": "Copy Image",
+	"Copy Image URL": "Copy Image URL",
+	"No Suggestion Found": "No Suggestion Found",
+	"You can select a maximum of 3 languages for spellchecking.": "You can select a maximum of 3 languages for spellchecking.",
+	"Spellchecker Languages": "Spellchecker Languages",
+	"Add to Dictionary": "Add to Dictionary",
+	"Look Up": "Look Up"
 }

app/translations/ca.json

@@ -0,0 +1,134 @@
+{
+	"About Zulip": "Quant a Zulip",
+	"Actual Size": "Actual Size",
+	"Add Custom Certificates": "Add Custom Certificates",
+	"Add Organization": "Add Organization",
+	"Add a Zulip organization": "Add a Zulip organization",
+	"Add custom CSS": "Add custom CSS",
+	"Advanced": "Advanced",
+	"All the connected organizations will appear here": "All the connected organizations will appear here",
+	"Always start minimized": "Always start minimized",
+	"App Updates": "App Updates",
+	"Appearance": "Appearance",
+	"Application Shortcuts": "Application Shortcuts",
+	"Are you sure you want to disconnect this organization?": "Are you sure you want to disconnect this organization?",
+	"Auto hide Menu bar": "Auto hide Menu bar",
+	"Auto hide menu bar (Press Alt key to display)": "Auto hide menu bar (Press Alt key to display)",
+	"Back": "Back",
+	"Bounce dock on new private message": "Bounce dock on new private message",
+	"Certificate file": "Certificate file",
+	"Change": "Change",
+	"Check for Updates": "Check for Updates",
+	"Close": "Tancar",
+	"Connect": "Connect",
+	"Connect to another organization": "Connect to another organization",
+	"Connected organizations": "Connected organizations",
+	"Copy": "Copia",
+	"Copy Zulip URL": "Copy Zulip URL",
+	"Create a new organization": "Crea una nova organització",
+	"Cut": "Cut",
+	"Default download location": "Default download location",
+	"Delete": "Elimina",
+	"Desktop App Settings": "Configuració de l'aplicació d'escriptori",
+	"Desktop Notifications": "Desktop Notifications",
+	"Desktop Settings": "Configuració d'escriptori",
+	"Disconnect": "Disconnect",
+	"Download App Logs": "Download App Logs",
+	"Edit": "Edita",
+	"Edit Shortcuts": "Edit Shortcuts",
+	"Enable auto updates": "Enable auto updates",
+	"Enable error reporting (requires restart)": "Enable error reporting (requires restart)",
+	"Enable spellchecker (requires restart)": "Enable spellchecker (requires restart)",
+	"Factory Reset": "Factory Reset",
+	"File": "Fitxer",
+	"Find accounts": "Find accounts",
+	"Find accounts by email": "Find accounts by email",
+	"Flash taskbar on new message": "Flash taskbar on new message",
+	"Forward": "Forward",
+	"Functionality": "Functionality",
+	"General": "General",
+	"Get beta updates": "Get beta updates",
+	"Hard Reload": "Hard Reload",
+	"Help": "Help",
+	"Help Center": "Centre d'ajuda",
+	"History": "Historial",
+	"History Shortcuts": "Dreceres d'historial",
+	"Keyboard Shortcuts": "Keyboard Shortcuts",
+	"Log Out": "Log Out",
+	"Log Out of Organization": "Log Out of Organization",
+	"Manual proxy configuration": "Manual proxy configuration",
+	"Minimize": "Minimize",
+	"Mute all sounds from Zulip": "Silencia tots els sons de Zulip",
+	"NO": "NO",
+	"Network": "Network",
+	"OR": "OR",
+	"Organization URL": "URL d'organització",
+	"Organizations": "Organizations",
+	"Paste": "Paste",
+	"Paste and Match Style": "Paste and Match Style",
+	"Proxy": "Proxy",
+	"Proxy bypass rules": "Proxy bypass rules",
+	"Proxy rules": "Proxy rules",
+	"Quit": "Quit",
+	"Quit Zulip": "Quit Zulip",
+	"Redo": "Redo",
+	"Release Notes": "Release Notes",
+	"Reload": "Reload",
+	"Report an Issue": "Report an Issue",
+	"Save": "Guardar",
+	"Select All": "Select All",
+	"Settings": "Configuració",
+	"Shortcuts": "Shortcuts",
+	"Show App Logs": "Show App Logs",
+	"Show app icon in system tray": "Show app icon in system tray",
+	"Show app unread badge": "Mostrar una marca en la icona si hi ha missatges no llegits",
+	"Show desktop notifications": "Show desktop notifications",
+	"Show downloaded files in file manager": "Show downloaded files in file manager",
+	"Show sidebar": "Show sidebar",
+	"Start app at login": "Start app at login",
+	"Switch to Next Organization": "Switch to Next Organization",
+	"Switch to Previous Organization": "Switch to Previous Organization",
+	"These desktop app shortcuts extend the Zulip webapp's": "These desktop app shortcuts extend the Zulip webapp's",
+	"This will delete all application data including all added accounts and preferences": "This will delete all application data including all added accounts and preferences",
+	"Tip": "Tip",
+	"Toggle DevTools for Active Tab": "Toggle DevTools for Active Tab",
+	"Toggle DevTools for Zulip App": "Toggle DevTools for Zulip App",
+	"Toggle Do Not Disturb": "Toggle Do Not Disturb",
+	"Toggle Full Screen": "Toggle Full Screen",
+	"Toggle Sidebar": "Toggle Sidebar",
+	"Toggle Tray Icon": "Toggle Tray Icon",
+	"Tools": "Tools",
+	"Undo": "Undo",
+	"Upload": "Pujada",
+	"Use system proxy settings (requires restart)": "Use system proxy settings (requires restart)",
+	"View": "View",
+	"View Shortcuts": "View Shortcuts",
+	"Window": "Window",
+	"Window Shortcuts": "Window Shortcuts",
+	"YES": "YES",
+	"Zoom In": "Zoom In",
+	"Zoom Out": "Zoom Out",
+	"Zulip Help": "Zulip Help",
+	"keyboard shortcuts": "keyboard shortcuts",
+	"script": "script",
+	"Quit when the window is closed": "Quit when the window is closed",
+	"Ask where to save files before downloading": "Ask where to save files before downloading",
+	"Services": "Services",
+	"Hide": "Hide",
+	"Hide Others": "Hide Others",
+	"Unhide": "Unhide",
+	"AddServer": "AddServer",
+	"App language (requires restart)": "App language (requires restart)",
+	"Factory Reset Data": "Factory Reset Data",
+	"Reset the application, thus deleting all the connected organizations, accounts, and certificates.": "Reset the application, thus deleting all the connected organizations, accounts, and certificates.",
+	"On macOS, the OS spellchecker is used.": "On macOS, the OS spellchecker is used.",
+	"Change the language from System Preferences → Keyboard → Text → Spelling.": "Change the language from System Preferences → Keyboard → Text → Spelling.",
+	"Copy Link": "Copy Link",
+	"Copy Image": "Copy Image",
+	"Copy Image URL": "Copy Image URL",
+	"No Suggestion Found": "No Suggestion Found",
+	"You can select a maximum of 3 languages for spellchecking.": "You can select a maximum of 3 languages for spellchecking.",
+	"Spellchecker Languages": "Spellchecker Languages",
+	"Add to Dictionary": "Add to Dictionary",
+	"Look Up": "Look Up"
+}