menu: Update the method to get current active server.

Fixes: #758.

.editorconfig

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

.gitattributes

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

.gitignore

@@ -1,5 +1,5 @@
-# Dependency directory
-/node_modules/
+# Dependency directories
+node_modules/
 
 # npm cache directory
 .npm
@@ -36,6 +36,3 @@ config.gypi
 # tests/package.json
 
 .python-version
-
-# Ignore all the typescript compiled files
-app/**/*.js

.travis.yml

@@ -15,17 +15,17 @@ addons:
 
 language: node_js
 node_js:
-- '10'
-- '12'
+- '8'
 
 before_install:
   - ./scripts/travis-xvfb.sh
   - npm install -g gulp
-  - npm ci
+  - npm install
 
 cache:
   directories:
   - node_modules
+  - app/node_modules
 
 script:
 - npm run travis

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.us/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.dev/blog/essential-electron) great article.
 
 ## Community
 

README.md

@@ -18,15 +18,6 @@ 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.js

@@ -1,19 +1,18 @@
-import { app, dialog } from 'electron';
-import { autoUpdater } from 'electron-updater';
-import { linuxUpdateNotification } from './linuxupdater';	// Required only in case of linux
+'use strict';
+const { app, dialog, shell } = require('electron');
+const { autoUpdater } = require('electron-updater');
+const isDev = require('electron-is-dev');
 
-import log from 'electron-log';
-import isDev from 'electron-is-dev';
-import * as ConfigUtil from '../renderer/js/utils/config-util';
-import * as LinkUtil from '../renderer/js/utils/link-util';
+const ConfigUtil = require('./../renderer/js/utils/config-util.js');
 
-export function appUpdater(updateFromMenu = false): void {
+function appUpdater(updateFromMenu = false) {
 	// Don't initiate auto-updates in development
 	if (isDev) {
 		return;
 	}
 
 	if (process.platform === 'linux' && !process.env.APPIMAGE) {
+		const { linuxUpdateNotification } = require('./linuxupdater');
 		linuxUpdateNotification();
 		return;
 	}
@@ -24,6 +23,8 @@ export function appUpdater(updateFromMenu = false): void {
 	const LogsDir = `${app.getPath('userData')}/Logs`;
 
 	// Log whats happening
+	const log = require('electron-log');
+
 	log.transports.file.file = `${LogsDir}/updates.log`;
 	log.transports.file.level = 'info';
 	autoUpdater.logger = log;
@@ -62,19 +63,20 @@ export function appUpdater(updateFromMenu = false): void {
 		}
 	});
 
-	autoUpdater.on('error', async error => {
+	autoUpdater.on('error', error => {
 		if (updateFromMenu) {
 			const messageText = (updateAvailable) ? ('Unable to download the updates') : ('Unable to check for updates');
-			const { response } = await dialog.showMessageBox({
+			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()}`
+Current Version: ${app.getVersion()}`
+			}, response => {
+				if (response === 0) {
+					shell.openExternal('https://zulipchat.com/apps/');
+				}
 			});
-			if (response === 0) {
-				LinkUtil.openBrowser(new URL('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();
@@ -82,23 +84,29 @@ export function appUpdater(updateFromMenu = false): void {
 	});
 
 	// Ask the user if update is available
-	autoUpdater.on('update-downloaded', async event => {
+	// eslint-disable-next-line no-unused-vars
+	autoUpdater.on('update-downloaded', event => {
 		// Ask user to update the app
-		const { response } = await dialog.showMessageBox({
+		dialog.showMessageBox({
 			type: 'question',
 			buttons: ['Install and Relaunch', 'Install Later'],
 			defaultId: 0,
 			message: `A new update ${event.version} has been downloaded`,
 			detail: 'It will be installed the next time you restart the application'
+		}, response => {
+			if (response === 0) {
+				setTimeout(() => {
+					autoUpdater.quitAndInstall();
+					// force app to quit. This is just a workaround, ideally autoUpdater.quitAndInstall() should relaunch the app.
+					app.quit();
+				}, 1000);
+			}
 		});
-		if (response === 0) {
-			setTimeout(() => {
-				autoUpdater.quitAndInstall();
-				// force app to quit. This is just a workaround, ideally autoUpdater.quitAndInstall() should relaunch the app.
-				app.quit();
-			}, 1000);
-		}
 	});
 	// Init for updates
 	autoUpdater.checkForUpdates();
 }
+
+module.exports = {
+	appUpdater
+};

app/main/index.js

@@ -1,26 +1,31 @@
-import { sentryInit } from '../renderer/js/utils/sentry-util';
-import { appUpdater } from './autoupdater';
-import { setAutoLaunch } from './startup';
+'use strict';
+const path = require('path');
+const fs = require('fs');
 
-import windowStateKeeper from 'electron-window-state';
-import path from 'path';
-import fs from 'fs';
-import electron, { app, ipcMain, session, dialog } from 'electron';
+const electron = require('electron');
+const windowStateKeeper = require('electron-window-state');
+const isDev = require('electron-is-dev');
+const appMenu = require('./menu');
+const { appUpdater } = require('./autoupdater');
 
-import * as AppMenu from './menu';
-import * as BadgeSettings from '../renderer/js/pages/preference/badge-settings';
-import * as ConfigUtil from '../renderer/js/utils/config-util';
-import * as ProxyUtil from '../renderer/js/utils/proxy-util';
+const { setAutoLaunch } = require('./startup');
 
-interface PatchedGlobal extends NodeJS.Global {
-	mainWindowState: windowStateKeeper.State;
+const { app, ipcMain } = electron;
+
+const BadgeSettings = require('./../renderer/js/pages/preference/badge-settings.js');
+const ConfigUtil = require('./../renderer/js/utils/config-util.js');
+const ProxyUtil = require('./../renderer/js/utils/proxy-util.js');
+const { sentryInit } = require('./../renderer/js/utils/sentry-util.js');
+
+// Adds debug features like hotkeys for triggering dev tools and reload
+// in development mode
+if (isDev) {
+	require('electron-debug')();
 }
 
-const globalPatched = global as PatchedGlobal;
-
 // Prevent window being garbage collected
-let mainWindow: Electron.BrowserWindow;
-let badgeCount: number;
+let mainWindow;
+let badgeCount;
 
 let isQuitting = false;
 
@@ -44,29 +49,20 @@ if (singleInstanceLock) {
 
 const APP_ICON = path.join(__dirname, '../resources', 'Icon');
 
-const iconPath = (): string => {
+const iconPath = () => {
 	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 {
+function createMainWindow() {
 	// Load the previous state with fallback to defaults
-	const mainWindowState: windowStateKeeper.State = windowStateKeeper({
+	const mainWindowState = windowStateKeeper({
 		defaultWidth: 1100,
 		defaultHeight: 720,
 		path: `${app.getPath('userData')}/config`
 	});
 
 	// Let's keep the window position global so that we can access it in other process
-	globalPatched.mainWindowState = mainWindowState;
+	global.mainWindowState = mainWindowState;
 
 	const win = new electron.BrowserWindow({
 		// This settings needs to be saved in config
@@ -81,8 +77,7 @@ function createMainWindow(): Electron.BrowserWindow {
 		webPreferences: {
 			plugins: true,
 			nodeIntegration: true,
-			partition: 'persist:webviewsession',
-			webviewTag: true
+			partition: 'persist:webviewsession'
 		},
 		show: false
 	});
@@ -94,12 +89,9 @@ function createMainWindow(): Electron.BrowserWindow {
 	win.loadURL(mainURL);
 
 	// Keep the app running in background on close event
-	win.on('close', event => {
-		if (ConfigUtil.getConfigItem('quitOnClose')) {
-			app.quit();
-		}
+	win.on('close', e => {
 		if (!isQuitting) {
-			event.preventDefault();
+			e.preventDefault();
 
 			if (process.platform === 'darwin') {
 				app.hide();
@@ -120,8 +112,8 @@ function createMainWindow(): Electron.BrowserWindow {
 	});
 
 	//  To destroy tray icon when navigate to a new URL
-	win.webContents.on('will-navigate', event => {
-		if (event) {
+	win.webContents.on('will-navigate', e => {
+		if (e) {
 			win.webContents.send('destroytray');
 		}
 	});
@@ -142,26 +134,19 @@ app.disableHardwareAcceleration();
 app.commandLine.appendSwitch('force-color-profile', 'srgb');
 
 // eslint-disable-next-line max-params
-app.on('certificate-error', (event: Event, _webContents: Electron.WebContents, _url: string, _error: string, _certificate: any, callback) => {
+app.on('certificate-error', (event, webContents, url, error, certificate, callback) => {
 	event.preventDefault();
 	callback(true);
 });
 
-// this event is only available on macOS. Triggers when you click on the dock icon.
 app.on('activate', () => {
-	if (mainWindow) {
-		// if there is already a window show it
-		mainWindow.show();
-	} else {
+	if (!mainWindow) {
 		mainWindow = createMainWindow();
 	}
 });
 
 app.on('ready', () => {
-	const ses = session.fromPartition('persist:webviewsession');
-	ses.setUserAgent(`ZulipElectron/${app.getVersion()} ${ses.getUserAgent()}`);
-
-	AppMenu.setMenu({
+	appMenu.setMenu({
 		tabs: []
 	});
 	mainWindow = createMainWindow();
@@ -169,7 +154,7 @@ app.on('ready', () => {
 	// Auto-hide menu bar on Windows + Linux
 	if (process.platform !== 'darwin') {
 		const shouldHideMenu = ConfigUtil.getConfigItem('autoHideMenubar') || false;
-		mainWindow.autoHideMenuBar = shouldHideMenu;
+		mainWindow.setAutoHideMenuBar(shouldHideMenu);
 		mainWindow.setMenuBarVisibility(!shouldHideMenu);
 	}
 
@@ -195,10 +180,6 @@ app.on('ready', () => {
 		}
 	});
 
-	ipcMain.on('fetch-user-agent', event => {
-		event.returnValue = session.fromPartition('persist:webviewsession').getUserAgent();
-	});
-
 	page.once('did-frame-finish-load', () => {
 		// Initiate auto-updates on MacOS and Windows
 		if (ConfigUtil.getConfigItem('autoUpdate')) {
@@ -206,27 +187,6 @@ app.on('ready', () => {
 		}
 	});
 
-	const permissionCallbacks = new Map();
-	let nextPermissionId = 0;
-
-	page.session.setPermissionRequestHandler((webContents, permission, callback, details) => {
-		const {origin} = new URL(details.requestingUrl);
-		permissionCallbacks.set(nextPermissionId, callback);
-		page.send('permission-request', nextPermissionId, {
-			webContentsId: webContents.id === mainWindow.webContents.id ?
-				null :
-				webContents.id,
-			origin,
-			permission
-		});
-		nextPermissionId++;
-	});
-
-	ipcMain.on('permission-response', (event: Event, permissionId: number, grant: boolean) => {
-		permissionCallbacks.get(permissionId)(grant);
-		permissionCallbacks.delete(permissionId);
-	});
-
 	// Temporarily remove this event
 	// electron.powerMonitor.on('resume', () => {
 	// 	mainWindow.reload();
@@ -274,91 +234,80 @@ app.on('ready', () => {
 	});
 
 	ipcMain.on('clear-app-settings', () => {
-		globalPatched.mainWindowState.unmanage();
+		global.mainWindowState.unmanage(mainWindow);
 		app.relaunch();
 		app.exit();
 	});
 
 	ipcMain.on('toggle-app', () => {
-		toggleApp();
+		if (!mainWindow.isVisible() || mainWindow.isMinimized()) {
+			mainWindow.show();
+		} else {
+			mainWindow.hide();
+		}
 	});
 
 	ipcMain.on('toggle-badge-option', () => {
 		BadgeSettings.updateBadge(badgeCount, mainWindow);
 	});
 
-	ipcMain.on('toggle-menubar', (_event: Electron.IpcMainEvent, showMenubar: boolean) => {
-		mainWindow.autoHideMenuBar = showMenubar;
+	ipcMain.on('toggle-menubar', (event, showMenubar) => {
+		mainWindow.setAutoHideMenuBar(showMenubar);
 		mainWindow.setMenuBarVisibility(!showMenubar);
 		page.send('toggle-autohide-menubar', showMenubar, true);
 	});
 
-	ipcMain.on('update-badge', (_event: Electron.IpcMainEvent, messageCount: number) => {
+	ipcMain.on('update-badge', (event, messageCount) => {
 		badgeCount = messageCount;
 		BadgeSettings.updateBadge(badgeCount, mainWindow);
 		page.send('tray', messageCount);
 	});
 
-	ipcMain.on('update-taskbar-icon', (_event: Electron.IpcMainEvent, data: string, text: string) => {
+	ipcMain.on('update-taskbar-icon', (event, data, text) => {
 		BadgeSettings.updateTaskbarIcon(data, text, mainWindow);
 	});
 
-	ipcMain.on('forward-message', (_event: Electron.IpcMainEvent, listener: string, ...parameters: any[]) => {
-		page.send(listener, ...parameters);
+	ipcMain.on('forward-message', (event, listener, ...params) => {
+		page.send(listener, ...params);
 	});
 
-	ipcMain.on('update-menu', (_event: Electron.IpcMainEvent, props: any) => {
-		AppMenu.setMenu(props);
+	ipcMain.on('update-menu', (event, props) => {
+		appMenu.setMenu(props);
 		const activeTab = props.tabs[props.activeTabIndex];
 		if (activeTab) {
 			mainWindow.setTitle(`Zulip - ${activeTab.webview.props.name}`);
 		}
 	});
 
-	ipcMain.on('toggleAutoLauncher', (_event: Electron.IpcMainEvent, AutoLaunchValue: boolean) => {
+	ipcMain.on('toggleAutoLauncher', (event, AutoLaunchValue) => {
 		setAutoLaunch(AutoLaunchValue);
 	});
 
-	ipcMain.on('downloadFile', (_event: Electron.IpcMainEvent, url: string, downloadPath: string) => {
+	ipcMain.on('downloadFile', (event, url, downloadPath) => {
 		page.downloadURL(url);
-		page.session.once('will-download', async (_event: Event, item) => {
-			let setFilePath: string;
-			let shortFileName: string;
-			if (ConfigUtil.getConfigItem('promptDownload', false)) {
-				const showDialogOptions: object = {
-					defaultPath: path.join(downloadPath, item.getFilename())
-				};
+		page.session.once('will-download', (event, item) => {
+			const filePath = path.join(downloadPath, item.getFilename());
 
-				const result = await dialog.showSaveDialog(mainWindow, showDialogOptions);
-				if (result.canceled) {
-					item.cancel();
-					return;
-				}
-				setFilePath = result.filePath;
-				shortFileName = path.basename(setFilePath);
-			} else {
-				const getTimeStamp = (): number => {
-					const date = new Date();
-					return date.getTime();
-				};
+			const getTimeStamp = () => {
+				const date = new Date();
+				return date.getTime();
+			};
 
-				const formatFile = (filePath: string): string => {
-					const fileExtension = path.extname(filePath);
-					const baseName = path.basename(filePath, fileExtension);
-					return `${baseName}-${getTimeStamp()}${fileExtension}`;
-				};
+			const formatFile = filePath => {
+				const fileExtension = path.extname(filePath);
+				const baseName = path.basename(filePath, fileExtension);
+				return `${baseName}-${getTimeStamp()}${fileExtension}`;
+			};
 
-				const filePath = path.join(downloadPath, item.getFilename());
+			// Update the name and path of the file if it already exists
 
-				// Update the name and path of the file if it already exists
-				const updatedFilePath = path.join(downloadPath, formatFile(filePath));
-				setFilePath = fs.existsSync(filePath) ? updatedFilePath : filePath;
-				shortFileName = fs.existsSync(filePath) ? formatFile(filePath) : item.getFilename();
-			}
+			const updatedFilePath = path.join(downloadPath, formatFile(filePath));
+
+			const setFilePath = fs.existsSync(filePath) ? updatedFilePath : filePath;
 
 			item.setSavePath(setFilePath);
 
-			const updatedListener = (_event: Event, state: string): void => {
+			item.on('updated', (event, state) => {
 				switch (state) {
 					case 'interrupted': {
 						// Can interrupted to due to network error, cancel download then
@@ -377,51 +326,34 @@ app.on('ready', () => {
 						console.info('Unknown updated state of download item');
 					}
 				}
-			};
-			item.on('updated', updatedListener);
-			item.once('done', (_event: Event, state) => {
+			});
+			item.once('done', (event, state) => {
+				const getFileName = fs.existsSync(filePath) ? formatFile(filePath) : item.getFilename();
 				if (state === 'completed') {
-					page.send('downloadFileCompleted', item.getSavePath(), shortFileName);
+					page.send('downloadFileCompleted', item.getSavePath(), getFileName);
 				} else {
-					console.log('Download failed state:', state);
+					console.log('Download failed state: ', state);
 					page.send('downloadFileFailed');
 				}
 				// To stop item for listening to updated events of this file
-				item.removeListener('updated', updatedListener);
+				item.removeAllListeners('updated');
 			});
 		});
 	});
 
-	ipcMain.on('realm-name-changed', (_event: Electron.IpcMainEvent, serverURL: string, realmName: string) => {
+	ipcMain.on('realm-name-changed', (event, serverURL, realmName) => {
 		page.send('update-realm-name', serverURL, realmName);
 	});
 
-	ipcMain.on('realm-icon-changed', (_event: Electron.IpcMainEvent, serverURL: string, iconURL: string) => {
+	ipcMain.on('realm-icon-changed', (event, serverURL, iconURL) => {
 		page.send('update-realm-icon', serverURL, iconURL);
 	});
 
 	// Using event.sender.send instead of page.send here to
 	// make sure the value of errorReporting is sent only once on load.
-	ipcMain.on('error-reporting', (event: Electron.IpcMainEvent) => {
+	ipcMain.on('error-reporting', event => {
 		event.sender.send('error-reporting-val', errorReporting);
 	});
-
-	ipcMain.on('save-last-tab', (_event: Electron.IpcMainEvent, index: number) => {
-		ConfigUtil.setConfigItem('lastActiveTab', index);
-	});
-
-	// Update user idle status for each realm after every 15s
-	const idleCheckInterval = 15 * 1000; // 15 seconds
-	setInterval(() => {
-		// Set user idle if no activity in 1 second (idleThresholdSeconds)
-		const idleThresholdSeconds = 1; // 1 second
-		const idleState = electron.powerMonitor.getSystemIdleState(idleThresholdSeconds);
-		if (idleState === 'active') {
-			page.send('set-active');
-		} else {
-			page.send('set-idle');
-		}
-	}, idleCheckInterval);
 });
 
 app.on('before-quit', () => {

app/main/linuxupdater.js

@@ -1,18 +1,19 @@
-import { app, Notification } from 'electron';
+const { app } = require('electron');
+const { Notification } = require('electron');
 
-import request from 'request';
-import semver from 'semver';
-import * as ConfigUtil from '../renderer/js/utils/config-util';
-import * as ProxyUtil from '../renderer/js/utils/proxy-util';
-import * as LinuxUpdateUtil from '../renderer/js/utils/linux-update-util';
-import Logger from '../renderer/js/utils/logger-util';
+const request = require('request');
+const semver = require('semver');
+const ConfigUtil = require('../renderer/js/utils/config-util');
+const ProxyUtil = require('../renderer/js/utils/proxy-util');
+const LinuxUpdateUtil = require('../renderer/js/utils/linux-update-util');
+const Logger = require('../renderer/js/utils/logger-util');
 
 const logger = new Logger({
 	file: 'linux-update-util.log',
 	timestamp: true
 });
 
-export function linuxUpdateNotification(): void {
+function linuxUpdateNotification() {
 	let	url = 'https://api.github.com/repos/zulip/zulip-desktop/releases';
 	url = ConfigUtil.getConfigItem('betaUpdate') ? url : url + '/latest';
 	const proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');
@@ -24,7 +25,7 @@ export function linuxUpdateNotification(): void {
 		ecdhCurve: 'auto'
 	};
 
-	request(options, (error: any, response: any, body: any) => {
+	request(options, (error, response, body) => {
 		if (error) {
 			logger.error('Linux update error.');
 			logger.error(error);
@@ -46,3 +47,7 @@ export function linuxUpdateNotification(): void {
 		}
 	});
 }
+
+module.exports = {
+	linuxUpdateNotification
+};

app/main/menu.js

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

app/main/menu.ts

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

app/main/startup.js

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

app/main/startup.ts

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

app/package.json

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

app/renderer/about.html

@@ -14,19 +14,33 @@
             <div class="maintenance-info">
                 <p class="detail maintainer">
                     Maintained by
-                    <a href="https://zulipchat.com" target="_blank" rel="noopener noreferrer">Zulip</a>
+                    <a onclick="linkInBrowser('website')">Zulip</a>
                 </p>
                 <p class="detail license">
                     Available under the
-                    <a href="https://github.com/zulip/zulip-desktop/blob/master/LICENSE" target="_blank" rel="noopener noreferrer">Apache 2.0 License</a>
+                    <a onclick="linkInBrowser('license')">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/network.css

@@ -17,43 +17,27 @@ 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: 96px;
+    width: 84px;
     height: 32px;
     border-radius: 5px;
     line-height: 32px;
+    margin: 20px auto 0;
     cursor: pointer;
 }
 
-.button:hover {
+#reconnect:hover {
     opacity: 0.8;
 }

app/renderer/css/preference.css

@@ -399,17 +399,8 @@ i.open-tab-button {
     cursor: pointer;
 }
 
-#css-delete-action {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-
-    /*
-        .action class will add extra margin to right which
-        we don't want for a button; the extra margin is intended for radio buttons
-    */
-    margin-right: 0px;
+.css-delete-action {
+    margin-bottom: 10px;
 }
 
 .selected-css-path,
@@ -462,11 +453,6 @@ i.open-tab-button {
     user-select: none;
 }
 
-.disallowed:hover {
-    background-color: rgba(241, 241, 241, 1.000);
-    cursor: not-allowed;
-}
-
 input.toggle-round + label {
     padding: 2px;
     width: 50px;
@@ -642,26 +628,6 @@ 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 (max-width: 650px) {
@@ -724,13 +690,3 @@ i.open-network-button {
         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/components/base.js

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

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

@@ -1,8 +1,9 @@
-import Tab, { TabProps } from './tab';
+'use strict';
 
-export default class FunctionalTab extends Tab {
-	$closeButton: Element;
-	template(): string {
+const Tab = require(__dirname + '/../components/tab.js');
+
+class FunctionalTab extends Tab {
+	template() {
 		return `<div class="tab functional-tab" data-tab-id="${this.props.tabIndex}">
 					<div class="server-tab-badge close-button">
 						<i class="material-icons">close</i>
@@ -13,21 +14,16 @@ export default class FunctionalTab extends Tab {
 				</div>`;
 	}
 
-	constructor(props: TabProps) {
-		super(props);
-		this.init();
-	}
-
-	init(): void {
+	init() {
 		this.$el = this.generateNodeFromTemplate(this.template());
 		if (this.props.name !== 'Settings') {
-			this.props.$root.append(this.$el);
-			this.$closeButton = this.$el.querySelectorAll('.server-tab-badge')[0];
+			this.props.$root.appendChild(this.$el);
+			this.$closeButton = this.$el.getElementsByClassName('server-tab-badge')[0];
 			this.registerListeners();
 		}
 	}
 
-	registerListeners(): void {
+	registerListeners() {
 		super.registerListeners();
 
 		this.$el.addEventListener('mouseover', () => {
@@ -38,9 +34,11 @@ export default class FunctionalTab extends Tab {
 			this.$closeButton.classList.remove('active');
 		});
 
-		this.$closeButton.addEventListener('click', (event: Event) => {
+		this.$closeButton.addEventListener('click', e => {
 			this.props.onDestroy();
-			event.stopPropagation();
+			e.stopPropagation();
 		});
 	}
 }
+
+module.exports = FunctionalTab;

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

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

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

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

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

@@ -1,12 +1,12 @@
-import { ipcRenderer } from 'electron';
+'use strict';
 
-import Tab, { TabProps } from './tab';
-import * as SystemUtil from '../utils/system-util';
+const Tab = require(__dirname + '/../components/tab.js');
+const SystemUtil = require(__dirname + '/../utils/system-util.js');
 
-export default class ServerTab extends Tab {
-	$badge: Element;
+const {ipcRenderer} = require('electron');
 
-	template(): string {
+class ServerTab extends Tab {
+	template() {
 		return `<div class="tab" data-tab-id="${this.props.tabIndex}">
 					<div class="server-tooltip" style="display:none">${this.props.name}</div>
 					<div class="server-tab-badge"></div>
@@ -17,21 +17,16 @@ export default class ServerTab extends Tab {
 				</div>`;
 	}
 
-	constructor(props: TabProps) {
-		super(props);
-		this.init();
+	init() {
+		super.init();
+
+		this.$badge = this.$el.getElementsByClassName('server-tab-badge')[0];
 	}
 
-	init(): void {
-		this.$el = this.generateNodeFromTemplate(this.template());
-		this.props.$root.append(this.$el);
-		this.registerListeners();
-		this.$badge = this.$el.querySelectorAll('.server-tab-badge')[0];
-	}
-
-	updateBadge(count: number): void {
+	updateBadge(count) {
 		if (count > 0) {
-			const formattedCount = count > 999 ? '1K+' : count.toString();
+			const formattedCount = count > 999 ? '1K+' : count;
+
 			this.$badge.innerHTML = formattedCount;
 			this.$badge.classList.add('active');
 		} else {
@@ -39,7 +34,7 @@ export default class ServerTab extends Tab {
 		}
 	}
 
-	generateShortcutText(): string {
+	generateShortcutText() {
 		// Only provide shortcuts for server [0..10]
 		if (this.props.index >= 10) {
 			return '';
@@ -61,3 +56,5 @@ export default class ServerTab extends Tab {
 		return shortcutText;
 	}
 }
+
+module.exports = ServerTab;

app/renderer/js/components/tab.js

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

app/renderer/js/components/tab.ts

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

app/renderer/js/components/webview.js

@@ -1,81 +1,51 @@
-import { ipcRenderer, remote } from 'electron';
+'use strict';
 
-import path from 'path';
-import fs from 'fs';
-import * as ConfigUtil from '../utils/config-util';
-import * as SystemUtil from '../utils/system-util';
-import BaseComponent from './base';
-import handleExternalLink from './handle-external-link';
+const path = require('path');
+const fs = require('fs');
 
-const { app, dialog } = remote;
+const ConfigUtil = require(__dirname + '/../utils/config-util.js');
+const SystemUtil = require(__dirname + '/../utils/system-util.js');
+const { app, dialog } = require('electron').remote;
+
+const BaseComponent = require(__dirname + '/../components/base.js');
+const handleExternalLink = require(__dirname + '/../components/handle-external-link.js');
 
 const shouldSilentWebview = ConfigUtil.getConfigItem('silent');
-
-interface WebViewProps {
-	$root: Element;
-	index: number;
-	tabIndex: number;
-	url: any;
-	role: string;
-	name: string;
-	isActive: () => boolean;
-	switchLoading: (loading: any, url: string) => void;
-	onNetworkError: (index: number) => void;
-	nodeIntegration: boolean;
-	preload: boolean;
-	onTitleChange: any;
-	hasPermission?: (origin: string, permission: string) => boolean;
-}
-
-export default class WebView extends BaseComponent {
-	props: WebViewProps;
-	zoomFactor: number;
-	badgeCount: number;
-	loading: boolean;
-	customCSS: string;
-	$webviewsContainer: DOMTokenList;
-	$el: Electron.WebviewTag;
-	domReady?: Promise<void>;
-
-	// This is required because in main.js we access WebView.method as
-	// webview[method].
-	[key: string]: any;
-
-	constructor(props: WebViewProps) {
+class WebView extends BaseComponent {
+	constructor(props) {
 		super();
 
 		this.props = props;
-		this.zoomFactor = 1;
+
+		this.zoomFactor = 1.0;
 		this.loading = true;
 		this.badgeCount = 0;
 		this.customCSS = ConfigUtil.getConfigItem('customCSS');
 		this.$webviewsContainer = document.querySelector('#webviews-container').classList;
 	}
 
-	template(): string {
+	template() {
 		return `<webview
 					class="disabled"
 					data-tab-id="${this.props.tabIndex}"
 					src="${this.props.url}"
 					${this.props.nodeIntegration ? 'nodeIntegration' : ''}
+					disablewebsecurity
 					${this.props.preload ? 'preload="js/preload.js"' : ''}
 					partition="persist:webviewsession"
 					name="${this.props.name}"
-					webpreferences="${this.props.nodeIntegration ? '' : 'contextIsolation, '}javascript=yes">
+					webpreferences="allowRunningInsecureContent, javascript=yes">
 				</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);
+	init() {
+		this.$el = this.generateNodeFromTemplate(this.template());
+		this.props.$root.appendChild(this.$el);
 
 		this.registerListeners();
 	}
 
-	registerListeners(): void {
+	registerListeners() {
 		this.$el.addEventListener('new-window', event => {
 			handleExternalLink.call(this, event);
 		});
@@ -135,12 +105,10 @@ export default class WebView extends BaseComponent {
 
 		this.$el.addEventListener('did-fail-load', event => {
 			const { errorDescription } = event;
-			const hasConnectivityErr = SystemUtil.connectivityERR.includes(errorDescription);
+			const hasConnectivityErr = (SystemUtil.connectivityERR.indexOf(errorDescription) >= 0);
 			if (hasConnectivityErr) {
 				console.error('error', errorDescription);
-				if (!this.props.url.includes('network.html')) {
-					this.props.onNetworkError(this.props.index);
-				}
+				this.props.onNetworkError();
 			}
 		});
 
@@ -149,6 +117,12 @@ export default 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', () => {
@@ -156,16 +130,12 @@ export default class WebView extends BaseComponent {
 		});
 	}
 
-	getBadgeCount(title: string): number {
-		const messageCountInTitle = (/\((\d+)\)/).exec(title);
+	getBadgeCount(title) {
+		const messageCountInTitle = (/\(([0-9]+)\)/).exec(title);
 		return messageCountInTitle ? Number(messageCountInTitle[1]) : 0;
 	}
 
-	showNotificationSettings(): void {
-		ipcRenderer.sendTo(this.$el.getWebContentsId(), 'show-notification-settings');
-	}
-
-	show(): void {
+	show() {
 		// Do not show WebView if another tab was selected and this tab should be in background.
 		if (!this.props.isActive()) {
 			return;
@@ -197,8 +167,8 @@ export default class WebView extends BaseComponent {
 				this.customCSS = null;
 				ConfigUtil.setConfigItem('customCSS', null);
 
-				const errorMessage = 'The custom css previously set is deleted!';
-				dialog.showErrorBox('custom css file deleted!', errorMessage);
+				const errMsg = 'The custom css previously set is deleted!';
+				dialog.showErrorBox('custom css file deleted!', errMsg);
 				return;
 			}
 
@@ -206,7 +176,7 @@ export default class WebView extends BaseComponent {
 		}
 	}
 
-	focus(): void {
+	focus() {
 		// focus Webview and it's contents when Window regain focus.
 		const webContents = this.$el.getWebContents();
 		// HACK: webContents.isFocused() seems to be true even without the element
@@ -215,18 +185,18 @@ export default class WebView extends BaseComponent {
 			// HACK: Looks like blur needs to be called on the previously focused
 			// element to transfer focus correctly, in Electron v3.0.10
 			// See https://github.com/electron/electron/issues/15718
-			(document.activeElement as HTMLElement).blur();
+			document.activeElement.blur();
 			this.$el.focus();
 			webContents.focus();
 		}
 	}
 
-	hide(): void {
+	hide() {
 		this.$el.classList.add('disabled');
 		this.$el.classList.remove('active');
 	}
 
-	load(): void {
+	load() {
 		if (this.$el) {
 			this.show();
 		} else {
@@ -234,41 +204,41 @@ export default class WebView extends BaseComponent {
 		}
 	}
 
-	zoomIn(): void {
+	zoomIn() {
 		this.zoomFactor += 0.1;
 		this.$el.setZoomFactor(this.zoomFactor);
 	}
 
-	zoomOut(): void {
+	zoomOut() {
 		this.zoomFactor -= 0.1;
 		this.$el.setZoomFactor(this.zoomFactor);
 	}
 
-	zoomActualSize(): void {
-		this.zoomFactor = 1;
+	zoomActualSize() {
+		this.zoomFactor = 1.0;
 		this.$el.setZoomFactor(this.zoomFactor);
 	}
 
-	logOut(): void {
-		ipcRenderer.sendTo(this.$el.getWebContentsId(), 'logout');
+	logOut() {
+		this.$el.executeJavaScript('logout()');
 	}
 
-	showShortcut(): void {
-		ipcRenderer.sendTo(this.$el.getWebContentsId(), 'shortcut');
+	showShortcut() {
+		this.$el.executeJavaScript('shortcut()');
 	}
 
-	openDevTools(): void {
+	openDevTools() {
 		this.$el.openDevTools();
 	}
 
-	back(): void {
+	back() {
 		if (this.$el.canGoBack()) {
 			this.$el.goBack();
 			this.focus();
 		}
 	}
 
-	canGoBackButton(): void {
+	canGoBackButton() {
 		const $backButton = document.querySelector('#actions-container #back-action');
 		if (this.$el.canGoBack()) {
 			$backButton.classList.remove('disable');
@@ -277,27 +247,23 @@ export default class WebView extends BaseComponent {
 		}
 	}
 
-	forward(): void {
+	forward() {
 		if (this.$el.canGoForward()) {
 			this.$el.goForward();
 		}
 	}
 
-	reload(): void {
+	reload() {
 		this.hide();
 		// Shows the loading indicator till the webview is reloaded
 		this.$webviewsContainer.remove('loaded');
 		this.loading = true;
-		this.props.switchLoading(true, this.props.url);
 		this.$el.reload();
 	}
 
-	forceLoad(): void {
-		this.init();
-	}
-
-	async send(channel: string, ...parameters: any[]): Promise<void> {
-		await this.domReady;
-		this.$el.send(channel, ...parameters);
+	send(...param) {
+		this.$el.send(...param);
 	}
 }
+
+module.exports = WebView;

app/renderer/js/electron-bridge.js

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

app/renderer/js/electron-bridge.ts

@@ -1,73 +0,0 @@
-import { ipcRenderer } from 'electron';
-
-import { EventEmitter } from 'events';
-
-import { NotificationData, newNotification } from './notification';
-
-type ListenerType = ((...args: any[]) => void);
-
-class ElectronBridge extends EventEmitter {
-	send_notification_reply_message_supported: boolean;
-	idle_on_system: boolean;
-	last_active_on_system: number;
-
-	constructor() {
-		super();
-		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();
-	}
-
-	send_event = (eventName: string | symbol, ...args: any[]): 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;
-	};
-}
-
-const electron_bridge = new ElectronBridge();
-
-electron_bridge.on('total_unread_count', (...args) => {
-	ipcRenderer.send('unread-count', ...args);
-});
-
-electron_bridge.on('realm_name', realmName => {
-	const serverURL = location.origin;
-	ipcRenderer.send('realm-name-changed', serverURL, realmName);
-});
-
-electron_bridge.on('realm_icon_url', iconURL => {
-	const serverURL = location.origin;
-	iconURL = iconURL.includes('http') ? iconURL : `${serverURL}${iconURL}`;
-	ipcRenderer.send('realm-icon-changed', serverURL, iconURL);
-});
-
-// this follows node's idiomatic implementation of event
-// emitters to make event handling more simpler instead of using
-// functions zulip side will emit event using ElectronBrigde.send_event
-// which is alias of .emit and on this side we can handle the data by adding
-// a listener for the event.
-export default electron_bridge;

app/renderer/js/feedback.js

@@ -1,16 +1,7 @@
-import { remote } from 'electron';
-import SendFeedback from '@electron-elements/send-feedback';
-
-import path from 'path';
-import fs from 'fs';
-
-const { app } = remote;
-
-interface SendFeedback extends HTMLElement {
-	[key: string]: any;
-}
-
-type SendFeedbackType = SendFeedback;
+const { app } = require('electron').remote;
+const path = require('path');
+const fs = require('fs');
+const SendFeedback = require('@electron-elements/send-feedback');
 
 // make the button color match zulip app's theme
 SendFeedback.customStyles = `
@@ -31,29 +22,15 @@ button {
 `;
 
 customElements.define('send-feedback', SendFeedback);
-export const sendFeedback: SendFeedbackType = document.querySelector('send-feedback');
-export const feedbackHolder = sendFeedback.parentElement;
-
-/* eslint-disable no-multi-str */
+const sendFeedback = document.querySelector('send-feedback');
+const feedbackHolder = sendFeedback.parentElement;
 
 // customize the fields of custom elements
 sendFeedback.title = 'Report Issue';
 sendFeedback.titleLabel = 'Issue title:';
 sendFeedback.titlePlaceholder = 'Enter issue title';
 sendFeedback.textareaLabel = 'Describe the issue:';
-sendFeedback.textareaPlaceholder = 'Succinctly describe your issue and steps to reproduce it...\n\n\
----\n\
-<!-- Please Include: -->\n\
-- **Operating System**:\n\
-  - [ ] Windows\n\
-  - [ ] Linux/Ubuntu\n\
-  - [ ] macOS\n\
-- **Clear steps to reproduce the issue**:\n\
-- **Relevant error messages and/or screenshots**:\n\
-';
-
-/* eslint-enable no-multi-str */
-
+sendFeedback.textareaPlaceholder = 'Succinctly describe your issue and steps to reproduce it...';
 sendFeedback.buttonLabel = 'Report Issue';
 sendFeedback.loaderSuccessText = '';
 
@@ -61,10 +38,10 @@ sendFeedback.useReporter('emailReporter', {
 	email: 'akash@zulipchat.com'
 });
 
-feedbackHolder.addEventListener('click', (event: Event) => {
-	// only remove the class if the grey out faded
-	// part is clicked and not the feedback element itself
-	if (event.target === event.currentTarget) {
+feedbackHolder.addEventListener('click', e => {
+  // only remove the class if the grey out faded
+  // part is clicked and not the feedback element itself
+	if (e.target === e.currentTarget) {
 		feedbackHolder.classList.remove('show');
 	}
 });
@@ -78,3 +55,8 @@ sendFeedback.addEventListener('feedback-submitted', () => {
 const dataDir = app.getPath('userData');
 const logsDir = path.join(dataDir, '/Logs');
 sendFeedback.logs.push(...fs.readdirSync(logsDir).map(file => path.join(logsDir, file)));
+
+module.exports = {
+	feedbackHolder,
+	sendFeedback
+};

app/renderer/js/injected.ts

@@ -1,122 +0,0 @@
-'use strict';
-
-(() => {
-	const zulipWindow = window as typeof window & {
-		electron_bridge: any;
-		narrow: any;
-		page_params: any;
-		raw_electron_bridge: any;
-	};
-
-	const electron_bridge = {
-		...zulipWindow.raw_electron_bridge,
-
-		get idle_on_system() {
-			return this.get_idle_on_system();
-		},
-
-		get last_active_on_system() {
-			return this.get_last_active_on_system();
-		},
-
-		get send_notification_reply_message_supported() {
-			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', {
-				serverLanguage: page_params.default_language
-			});
-		}
-	})();
-
-	electron_bridge.on_event('narrow-by-topic', (id: string) => {
-		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.js

@@ -1,187 +1,108 @@
-import { ipcRenderer, remote, clipboard } from 'electron';
-import { feedbackHolder } from './feedback';
+'use strict';
+
+const { ipcRenderer, remote, clipboard, shell } = require('electron');
+const isDev = require('electron-is-dev');
 
-import path from 'path';
-import escape from 'escape-html';
-import isDev from 'electron-is-dev';
 const { session, app, Menu, dialog } = remote;
+const escape = require('escape-html');
 
-// eslint-disable-next-line import/no-unassigned-import
-import './tray';
+require(__dirname + '/js/tray.js');
+const DomainUtil = require(__dirname + '/js/utils/domain-util.js');
+const WebView = require(__dirname + '/js/components/webview.js');
+const ServerTab = require(__dirname + '/js/components/server-tab.js');
+const FunctionalTab = require(__dirname + '/js/components/functional-tab.js');
+const ConfigUtil = require(__dirname + '/js/utils/config-util.js');
+const DNDUtil = require(__dirname + '/js/utils/dnd-util.js');
+const ReconnectUtil = require(__dirname + '/js/utils/reconnect-util.js');
+const Logger = require(__dirname + '/js/utils/logger-util.js');
+const CommonUtil = require(__dirname + '/js/utils/common-util.js');
 
-import * as DomainUtil from './utils/domain-util';
-import WebView from './components/webview';
-import ServerTab from './components/server-tab';
-import FunctionalTab from './components/functional-tab';
-import * as ConfigUtil from './utils/config-util';
-import * as DNDUtil from './utils/dnd-util';
-import ReconnectUtil from './utils/reconnect-util';
-import Logger from './utils/logger-util';
-import * as CommonUtil from './utils/common-util';
-import * as EnterpriseUtil from './utils/enterprise-util';
-import * as LinkUtil from './utils/link-util';
-import * as Messages from '../../resources/messages';
-
-interface FunctionalTabProps {
-	name: string;
-	materialIcon: string;
-	url: string;
-}
-
-interface AnyObject {
-	[key: string]: any;
-}
-
-interface SettingsOptions {
-	autoHideMenubar: boolean;
-	trayIcon: boolean;
-	useManualProxy: boolean;
-	useSystemProxy: boolean;
-	showSidebar: boolean;
-	badgeOption: boolean;
-	startAtLogin: boolean;
-	startMinimized: boolean;
-	enableSpellchecker: boolean;
-	showNotification: boolean;
-	autoUpdate: boolean;
-	betaUpdate: boolean;
-	errorReporting: boolean;
-	customCSS: boolean;
-	silent: boolean;
-	lastActiveTab: number;
-	dnd: boolean;
-	dndPreviousSettings: {
-		showNotification: boolean;
-		silent: boolean;
-		flashTaskbarOnMessage?: boolean;
-	};
-	downloadsPath: string;
-	quitOnClose: boolean;
-	promptDownload: boolean;
-	flashTaskbarOnMessage?: boolean;
-	dockBouncing?: boolean;
-	loading?: AnyObject;
-}
+const { feedbackHolder } = require(__dirname + '/js/feedback.js');
 
 const logger = new Logger({
 	file: 'errors.log',
 	timestamp: true
 });
 
-const rendererDirectory = path.resolve(__dirname, '..');
-type ServerOrFunctionalTab = ServerTab | FunctionalTab;
-
 class ServerManagerView {
-	$addServerButton: HTMLButtonElement;
-	$tabsContainer: Element;
-	$reloadButton: HTMLButtonElement;
-	$loadingIndicator: HTMLButtonElement;
-	$settingsButton: HTMLButtonElement;
-	$webviewsContainer: Element;
-	$backButton: HTMLButtonElement;
-	$dndButton: HTMLButtonElement;
-	$addServerTooltip: HTMLElement;
-	$reloadTooltip: HTMLElement;
-	$loadingTooltip: HTMLElement;
-	$settingsTooltip: HTMLElement;
-	$serverIconTooltip: HTMLCollectionOf<HTMLElement>;
-	$backTooltip: HTMLElement;
-	$dndTooltip: HTMLElement;
-	$sidebar: Element;
-	$fullscreenPopup: Element;
-	$fullscreenEscapeKey: string;
-	loading: AnyObject;
-	activeTabIndex: number;
-	tabs: ServerOrFunctionalTab[];
-	functionalTabs: AnyObject;
-	tabIndex: number;
-	presetOrgs: string[];
 	constructor() {
-		this.$addServerButton = document.querySelector('#add-tab');
-		this.$tabsContainer = document.querySelector('#tabs-container');
+		this.$addServerButton = document.getElementById('add-tab');
+		this.$tabsContainer = document.getElementById('tabs-container');
 
-		const $actionsContainer = document.querySelector('#actions-container');
+		const $actionsContainer = document.getElementById('actions-container');
 		this.$reloadButton = $actionsContainer.querySelector('#reload-action');
 		this.$loadingIndicator = $actionsContainer.querySelector('#loading-action');
 		this.$settingsButton = $actionsContainer.querySelector('#settings-action');
-		this.$webviewsContainer = document.querySelector('#webviews-container');
+		this.$webviewsContainer = document.getElementById('webviews-container');
 		this.$backButton = $actionsContainer.querySelector('#back-action');
 		this.$dndButton = $actionsContainer.querySelector('#dnd-action');
 
-		this.$addServerTooltip = document.querySelector('#add-server-tooltip');
+		this.$addServerTooltip = document.getElementById('add-server-tooltip');
 		this.$reloadTooltip = $actionsContainer.querySelector('#reload-tooltip');
 		this.$loadingTooltip = $actionsContainer.querySelector('#loading-tooltip');
 		this.$settingsTooltip = $actionsContainer.querySelector('#setting-tooltip');
-
-		// TODO: This should have been querySelector but the problem is that
-		// querySelector doesn't return elements not present in dom whereas somehow
-		// getElementsByClassName does. To fix this we need to call this after this.initTabs
-		// is called in this.init.
-		// eslint-disable-next-line unicorn/prefer-query-selector
-		this.$serverIconTooltip = document.getElementsByClassName('server-tooltip') as HTMLCollectionOf<HTMLElement>;
+		this.$serverIconTooltip = document.getElementsByClassName('server-tooltip');
 		this.$backTooltip = $actionsContainer.querySelector('#back-tooltip');
 		this.$dndTooltip = $actionsContainer.querySelector('#dnd-tooltip');
 
-		this.$sidebar = document.querySelector('#sidebar');
+		this.$sidebar = document.getElementById('sidebar');
 
-		this.$fullscreenPopup = document.querySelector('#fullscreen-popup');
+		this.$fullscreenPopup = document.getElementById('fullscreen-popup');
 		this.$fullscreenEscapeKey = process.platform === 'darwin' ? '^⌘F' : 'F11';
 		this.$fullscreenPopup.innerHTML = `Press ${this.$fullscreenEscapeKey} to exit full screen`;
 
 		this.loading = {};
 		this.activeTabIndex = -1;
 		this.tabs = [];
-		this.presetOrgs = [];
 		this.functionalTabs = {};
 		this.tabIndex = 0;
 	}
 
-	async init(): Promise<void> {
-		await this.loadProxy();
-		this.initDefaultSettings();
-		this.initSidebar();
-		this.removeUAfromDisk();
-		if (EnterpriseUtil.configFile) {
-			this.initPresetOrgs();
-		}
-		this.initTabs();
-		this.initActions();
-		this.registerIpcs();
+	init() {
+		this.loadProxy().then(() => {
+			this.initSidebar();
+			this.initTabs();
+			this.initActions();
+			this.registerIpcs();
+			this.initDefaultSettings();
+		});
 	}
 
-	async loadProxy(): Promise<void> {
-		// To change proxyEnable to useManualProxy in older versions
-		const proxyEnabledOld = ConfigUtil.isConfigItemExists('useProxy');
-		if (proxyEnabledOld) {
-			const proxyEnableOldState = ConfigUtil.getConfigItem('useProxy');
-			if (proxyEnableOldState) {
-				ConfigUtil.setConfigItem('useManualProxy', true);
+	loadProxy() {
+		return new Promise(resolve => {
+			// To change proxyEnable to useManualProxy in older versions
+			const proxyEnabledOld = ConfigUtil.isConfigItemExists('useProxy');
+			if (proxyEnabledOld) {
+				const proxyEnableOldState = ConfigUtil.getConfigItem('useProxy');
+				if (proxyEnableOldState) {
+					ConfigUtil.setConfigItem('useManualProxy', true);
+				}
+				ConfigUtil.removeConfigItem('useProxy');
 			}
-			ConfigUtil.removeConfigItem('useProxy');
-		}
 
-		const proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');
-		if (proxyEnabled) {
-			await session.fromPartition('persist:webviewsession').setProxy({
-				pacScript: ConfigUtil.getConfigItem('proxyPAC', ''),
-				proxyRules: ConfigUtil.getConfigItem('proxyRules', ''),
-				proxyBypassRules: ConfigUtil.getConfigItem('proxyBypass', '')
-			});
-		} else {
-			await session.fromPartition('persist:webviewsession').setProxy({
-				pacScript: '',
-				proxyRules: '',
-				proxyBypassRules: ''
-			});
-		}
+			const proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');
+			if (proxyEnabled) {
+				session.fromPartition('persist:webviewsession').setProxy({
+					pacScript: ConfigUtil.getConfigItem('proxyPAC', ''),
+					proxyRules: ConfigUtil.getConfigItem('proxyRules', ''),
+					proxyBypassRules: ConfigUtil.getConfigItem('proxyBypass', '')
+				}, resolve);
+			} else {
+				session.fromPartition('persist:webviewsession').setProxy({
+					pacScript: '',
+					proxyRules: '',
+					proxyBypassRules: ''
+				}, resolve);
+			}
+		});
 	}
 
 	// Settings are initialized only when user clicks on General/Server/Network section settings
 	// In case, user doesn't visit these section, those values set to be null automatically
 	// This will make sure the default settings are correctly set to either true or false
-	initDefaultSettings(): void {
+	initDefaultSettings() {
 		// Default settings which should be respected
-		const settingOptions: SettingsOptions = {
+		const settingOptions = {
 			autoHideMenubar: false,
 			trayIcon: true,
 			useManualProxy: false,
@@ -204,8 +125,7 @@ class ServerManagerView {
 				silent: false
 			},
 			downloadsPath: `${app.getPath('downloads')}`,
-			quitOnClose: false,
-			promptDownload: false
+			showDownloadFolder: false
 		};
 
 		// Platform specific settings
@@ -225,130 +145,41 @@ class ServerManagerView {
 			settingOptions.autoHideMenubar = false;
 		}
 
-		for (const [setting, value] of Object.entries(settingOptions)) {
-			// 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, value);
+		for (const i in settingOptions) {
+			if (ConfigUtil.getConfigItem(i) === null) {
+				ConfigUtil.setConfigItem(i, settingOptions[i]);
 			}
 		}
 	}
 
-	initSidebar(): void {
+	initSidebar() {
 		const showSidebar = ConfigUtil.getConfigItem('showSidebar', true);
 		this.toggleSidebar(showSidebar);
 	}
 
-	// Remove the stale UA string from the disk if the app is not freshly
-	// installed.  This should be removed in a further release.
-	removeUAfromDisk(): void {
-		ConfigUtil.removeConfigItem('userAgent');
-	}
-
-	async queueDomain(domain: any): 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) {
-			logger.error(err);
-			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
-		// 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
-		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
-			if (preAddedDomains.length > 0) {
-				// user already has servers added
-				// ask them before reloading the app
-				const { response } = await dialog.showMessageBox({
-					type: 'question',
-					buttons: ['Yes', 'Later'],
-					defaultId: 0,
-					message: 'New server' + (domainsAdded.length > 1 ? 's' : '') + ' added. Reload app now?'
-				});
-				if (response === 0) {
-					ipcRenderer.send('reload-full-app');
-				}
-			} else {
-				ipcRenderer.send('reload-full-app');
-			}
-		} else if (domainsAdded.length > 0) {
-			// 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);
-			dialog.showErrorBox(title, content);
-			if (DomainUtil.getDomains().length === 0) {
-				// no orgs present, stop showing loading gif
-				await this.openSettings('AddServer');
-			}
-		}
-	}
-
-	initTabs(): void {
+	initTabs() {
 		const servers = DomainUtil.getDomains();
 		if (servers.length > 0) {
-			for (const [i, server] of servers.entries()) {
-				this.initServer(server, i);
+			for (let i = 0; i < servers.length; i++) {
+				this.initServer(servers[i], i);
+				DomainUtil.updateSavedServer(servers[i].url, i);
+				this.activateTab(i);
 			}
 			// Open last active tab
-			let lastActiveTab = ConfigUtil.getConfigItem('lastActiveTab');
-			if (lastActiveTab >= servers.length) {
-				lastActiveTab = 0;
-			}
-			// checkDomain() and webview.load() for lastActiveTab before the others
-			DomainUtil.updateSavedServer(servers[lastActiveTab].url, lastActiveTab);
-			this.activateTab(lastActiveTab);
-			for (const [i, server] of servers.entries()) {
-				// after the lastActiveTab is activated, we load the others in the background
-				// without activating them, to prevent flashing of server icons
-				if (i === lastActiveTab) {
-					continue;
-				}
-				DomainUtil.updateSavedServer(server.url, i);
-				this.tabs[i].webview.load();
-			}
+			this.activateTab(ConfigUtil.getConfigItem('lastActiveTab'));
 			// 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
-			this.openSettings('AddServer');
 		} else {
-			this.showLoading(true);
+			this.openSettings('AddServer');
 		}
 	}
 
-	initServer(server: any, index: number): void {
+	initServer(server, index) {
 		const tabIndex = this.getTabIndex();
 		this.tabs.push(new ServerTab({
 			role: 'server',
 			icon: server.icon,
-			name: CommonUtil.decodeString(server.alias),
+			name: server.alias,
 			$root: this.$tabsContainer,
 			onClick: this.activateLastTab.bind(this, index),
 			index,
@@ -362,12 +193,10 @@ class ServerManagerView {
 				url: server.url,
 				role: 'server',
 				name: CommonUtil.decodeString(server.alias),
-				hasPermission: (origin: string, permission: string) =>
-					origin === server.url && permission === 'notifications',
 				isActive: () => {
 					return index === this.activeTabIndex;
 				},
-				switchLoading: (loading: boolean, url: string) => {
+				switchLoading: (loading, url) => {
 					if (!loading && this.loading[url]) {
 						this.loading[url] = false;
 					} else if (loading && !this.loading[url]) {
@@ -375,7 +204,7 @@ class ServerManagerView {
 					}
 					this.showLoading(this.loading[this.tabs[this.activeTabIndex].webview.props.url]);
 				},
-				onNetworkError: (index: number) => this.openNetworkTroubleshooting(index),
+				onNetworkError: this.openNetworkTroubleshooting.bind(this),
 				onTitleChange: this.updateBadge.bind(this),
 				nodeIntegration: false,
 				preload: true
@@ -384,14 +213,14 @@ class ServerManagerView {
 		this.loading[server.url] = true;
 	}
 
-	initActions(): void {
+	initActions() {
 		this.initDNDButton();
 		this.initServerActions();
 		this.initLeftSidebarEvents();
 	}
 
-	initServerActions(): void {
-		const $serverImgs: NodeListOf<HTMLImageElement> = document.querySelectorAll('.server-icons');
+	initServerActions() {
+		const $serverImgs = document.querySelectorAll('.server-icons');
 		$serverImgs.forEach(($serverImg, index) => {
 			this.addContextMenu($serverImg, index);
 			if ($serverImg.src.includes('img/icon.png')) {
@@ -403,7 +232,7 @@ class ServerManagerView {
 		});
 	}
 
-	initLeftSidebarEvents(): void {
+	initLeftSidebarEvents() {
 		this.$dndButton.addEventListener('click', () => {
 			const dndUtil = DNDUtil.toggle();
 			ipcRenderer.send('forward-message', 'toggle-dnd', dndUtil.dnd, dndUtil.newSettings);
@@ -429,22 +258,22 @@ class ServerManagerView {
 		this.sidebarHoverEvent(this.$dndButton, this.$dndTooltip);
 	}
 
-	initDNDButton(): void {
+	initDNDButton() {
 		const dnd = ConfigUtil.getConfigItem('dnd', false);
 		this.toggleDNDButton(dnd);
 	}
 
-	getTabIndex(): number {
+	getTabIndex() {
 		const currentIndex = this.tabIndex;
 		this.tabIndex++;
 		return currentIndex;
 	}
 
-	getCurrentActiveServer(): string {
+	getCurrentActiveServer() {
 		return this.tabs[this.activeTabIndex].webview.props.url;
 	}
 
-	displayInitialCharLogo($img: HTMLImageElement, index: number): void {
+	displayInitialCharLogo($img, index) {
 		/*
 			index parameter needed because webview[data-tab-id] can increment
 			beyond size of sidebar org array and throw error
@@ -466,13 +295,13 @@ class ServerManagerView {
 		$altIcon.classList.add('server-icon');
 		$altIcon.classList.add('alt-icon');
 
-		$img.remove();
-		$parent.append($altIcon);
+		$parent.removeChild($img);
+		$parent.appendChild($altIcon);
 
-		this.addContextMenu($altIcon as HTMLImageElement, index);
+		this.addContextMenu($altIcon, index);
 	}
 
-	sidebarHoverEvent(SidebarButton: HTMLButtonElement, SidebarTooltip: HTMLElement, addServer = false): void {
+	sidebarHoverEvent(SidebarButton, SidebarTooltip, addServer = false) {
 		SidebarButton.addEventListener('mouseover', () => {
 			SidebarTooltip.removeAttribute('style');
 			// To handle position of add server tooltip due to scrolling of list of organizations
@@ -489,7 +318,7 @@ class ServerManagerView {
 		});
 	}
 
-	onHover(index: number): void {
+	onHover(index) {
 		// this.$serverIconTooltip[index].innerHTML already has realm name, so we are just
 		// removing the style.
 		this.$serverIconTooltip[index].removeAttribute('style');
@@ -500,11 +329,11 @@ class ServerManagerView {
 		this.$serverIconTooltip[index].style.top = top + 'px';
 	}
 
-	onHoverOut(index: number): void {
+	onHoverOut(index) {
 		this.$serverIconTooltip[index].style.display = 'none';
 	}
 
-	openFunctionalTab(tabProps: FunctionalTabProps): void {
+	openFunctionalTab(tabProps) {
 		if (this.functionalTabs[tabProps.name] !== undefined) {
 			this.activateTab(this.functionalTabs[tabProps.name]);
 			return;
@@ -533,7 +362,7 @@ class ServerManagerView {
 				isActive: () => {
 					return this.functionalTabs[tabProps.name] === this.activeTabIndex;
 				},
-				switchLoading: (loading: AnyObject, url: string) => {
+				switchLoading: (loading, url) => {
 					if (!loading && this.loading[url]) {
 						this.loading[url] = false;
 					} else if (loading && !this.loading[url]) {
@@ -541,7 +370,7 @@ class ServerManagerView {
 					}
 					this.showLoading(this.loading[this.tabs[this.activeTabIndex].webview.props.url]);
 				},
-				onNetworkError: (index: number) => this.openNetworkTroubleshooting(index),
+				onNetworkError: this.openNetworkTroubleshooting.bind(this),
 				onTitleChange: this.updateBadge.bind(this),
 				nodeIntegration: true,
 				preload: false
@@ -555,45 +384,46 @@ class ServerManagerView {
 		this.activateTab(this.functionalTabs[tabProps.name]);
 	}
 
-	async openSettings(nav = 'General'): Promise<void> {
+	openSettings(nav = 'General') {
 		this.openFunctionalTab({
 			name: 'Settings',
 			materialIcon: 'settings',
-			url: `file://${rendererDirectory}/preference.html#${nav}`
+			url: `file://${__dirname}/preference.html#${nav}`
 		});
 		this.$settingsButton.classList.add('active');
-		await this.tabs[this.functionalTabs.Settings].webview.send('switch-settings-nav', nav);
+		this.tabs[this.functionalTabs.Settings].webview.send('switch-settings-nav', nav);
 	}
 
-	openAbout(): void {
+	openAbout() {
 		this.openFunctionalTab({
 			name: 'About',
 			materialIcon: 'sentiment_very_satisfied',
-			url: `file://${rendererDirectory}/about.html`
+			url: `file://${__dirname}/about.html`
 		});
 	}
 
-	openNetworkTroubleshooting(index: number): void {
-		const reconnectUtil = new ReconnectUtil(this.tabs[index].webview);
-		reconnectUtil.pollInternetAndReload();
-		this.tabs[index].webview.props.url = `file://${rendererDirectory}/network.html`;
-		this.tabs[index].showNetworkError();
+	openNetworkTroubleshooting() {
+		this.openFunctionalTab({
+			name: 'Network Troubleshooting',
+			materialIcon: 'network_check',
+			url: `file://${__dirname}/network.html`
+		});
 	}
 
-	activateLastTab(index: number): void {
+	activateLastTab(index) {
 		// Open all the tabs in background, also activate the tab based on the index
 		this.activateTab(index);
-		// Save last active tab via main process to avoid JSON DB errors
-		ipcRenderer.send('save-last-tab', index);
+		// Save last active tab
+		ConfigUtil.setConfigItem('lastActiveTab', index);
 	}
 
 	// returns this.tabs in an way that does
 	// not crash app when this.tabs is passed into
 	// ipcRenderer. Something about webview, and props.webview
 	// properties in ServerTab causes the app to crash.
-	get tabsForIpc(): ServerOrFunctionalTab[] {
-		const tabs: ServerOrFunctionalTab[] = [];
-		this.tabs.forEach((tab: ServerOrFunctionalTab) => {
+	get tabsForIpc() {
+		const tabs = [];
+		this.tabs.forEach(tab => {
 			const proto = Object.create(Object.getPrototypeOf(tab));
 			const tabClone = Object.assign(proto, tab);
 
@@ -606,7 +436,7 @@ class ServerManagerView {
 		return tabs;
 	}
 
-	activateTab(index: number, hideOldTab = true): void {
+	activateTab(index, hideOldTab = true) {
 		if (!this.tabs[index]) {
 			return;
 		}
@@ -643,7 +473,7 @@ class ServerManagerView {
 		});
 	}
 
-	showLoading(loading: boolean): void {
+	showLoading(loading) {
 		if (!loading) {
 			this.$reloadButton.removeAttribute('style');
 			this.$loadingIndicator.style.display = 'none';
@@ -653,7 +483,7 @@ class ServerManagerView {
 		}
 	}
 
-	destroyTab(name: string, index: number): void {
+	destroyTab(name, index) {
 		if (this.tabs[index].webview.loading) {
 			return;
 		}
@@ -669,7 +499,7 @@ class ServerManagerView {
 		}
 	}
 
-	destroyView(): void {
+	destroyView() {
 		// Show loading indicator
 		this.$webviewsContainer.classList.remove('loaded');
 
@@ -683,7 +513,7 @@ class ServerManagerView {
 		this.$webviewsContainer.innerHTML = '';
 	}
 
-	reloadView(): void {
+	reloadView() {
 		// Save and remember the index of last active tab so that we can use it later
 		const lastActiveTab = this.tabs[this.activeTabIndex].props.index;
 		ConfigUtil.setConfigItem('lastActiveTab', lastActiveTab);
@@ -696,31 +526,33 @@ class ServerManagerView {
 
 	// This will trigger when pressed CTRL/CMD + R [WIP]
 	// It won't reload the current view properly when you add/delete a server.
-	reloadCurrentView(): void {
+	reloadCurrentView() {
 		this.$reloadButton.click();
 	}
 
-	updateBadge(): void {
+	updateBadge() {
 		let messageCountAll = 0;
-		for (const tab of this.tabs) {
-			if (tab && tab instanceof ServerTab && tab.updateBadge) {
-				const count = tab.webview.badgeCount;
+		for (let i = 0; i < this.tabs.length; i++) {
+			if (this.tabs[i] && this.tabs[i].updateBadge) {
+				const count = this.tabs[i].webview.badgeCount;
 				messageCountAll += count;
-				tab.updateBadge(count);
+				this.tabs[i].updateBadge(count);
 			}
 		}
 
 		ipcRenderer.send('update-badge', messageCountAll);
 	}
 
-	updateGeneralSettings(setting: string, value: any): void {
-		if (this.getActiveWebview()) {
-			const webContents = this.getActiveWebview().getWebContents();
+	updateGeneralSettings(setting, value) {
+		const selector = 'webview:not([class*=disabled])';
+		const webview = document.querySelector(selector);
+		if (webview) {
+			const webContents = webview.getWebContents();
 			webContents.send(setting, value);
 		}
 	}
 
-	toggleSidebar(show: boolean): void {
+	toggleSidebar(show) {
 		if (show) {
 			this.$sidebar.classList.remove('sidebar-hide');
 		} else {
@@ -729,52 +561,29 @@ class ServerManagerView {
 	}
 
 	// Toggles the dnd button icon.
-	toggleDNDButton(alert: boolean): void {
+	toggleDNDButton(alert) {
 		this.$dndTooltip.textContent = (alert ? 'Disable' : 'Enable') + ' Do Not Disturb';
 		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', event => {
-			event.preventDefault();
+	addContextMenu($serverImg, index) {
+		$serverImg.addEventListener('contextmenu', e => {
+			e.preventDefault();
 			const template = [
 				{
 					label: 'Disconnect organization',
-					click: async () => {
-						const { response } = await dialog.showMessageBox({
+					click: () => {
+						dialog.showMessageBox({
 							type: 'warning',
 							buttons: ['YES', 'NO'],
 							defaultId: 0,
 							message: 'Are you sure you want to disconnect this organization?'
-						});
-						if (response === 0) {
-							if (DomainUtil.removeDomain(index)) {
+						}, response => {
+							if (response === 0) {
+								DomainUtil.removeDomain(index);
 								ipcRenderer.send('reload-full-app');
-							} else {
-								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();
+						});
 					}
 				},
 				{
@@ -789,8 +598,8 @@ class ServerManagerView {
 		});
 	}
 
-	registerIpcs(): void {
-		const webviewListeners: AnyObject = {
+	registerIpcs() {
+		const webviewListeners = {
 			'webview-reload': 'reload',
 			back: 'back',
 			focus: 'focus',
@@ -803,43 +612,16 @@ class ServerManagerView {
 			'tab-devtools': 'openDevTools'
 		};
 
-		for (const [key, method] of Object.entries(webviewListeners)) {
+		for (const key in webviewListeners) {
 			ipcRenderer.on(key, () => {
 				const activeWebview = this.tabs[this.activeTabIndex].webview;
 				if (activeWebview) {
-					activeWebview[method]();
+					activeWebview[webviewListeners[key]]();
 				}
 			});
 		}
 
-		ipcRenderer.on('permission-request', (
-			event: Event,
-			permissionId: number,
-			{webContentsId, origin, permission}: {
-				webContentsId: number | null;
-				origin: string;
-				permission: string;
-			}
-		) => {
-			const grant = webContentsId === null ?
-				origin === 'null' && permission === 'notifications' :
-				this.tabs.some(
-					({webview}) =>
-						webview.$el.getWebContentsId() === webContentsId &&
-					webview.props.hasPermission?.(origin, permission)
-				);
-			console.log(
-				grant ? 'Granted' : 'Denied', 'permissions request for',
-				permission, 'from', origin
-			);
-			ipcRenderer.send('permission-response', permissionId, grant);
-		});
-
-		ipcRenderer.on('show-network-error', (event: Event, index: number) => {
-			this.openNetworkTroubleshooting(index);
-		});
-
-		ipcRenderer.on('open-settings', (event: Event, settingNav: string) => {
+		ipcRenderer.on('open-settings', (event, settingNav) => {
 			this.openSettings(settingNav);
 		});
 
@@ -847,7 +629,8 @@ class ServerManagerView {
 
 		ipcRenderer.on('open-help', () => {
 			// Open help page of current active server
-			LinkUtil.openBrowser(new URL('/help', this.getCurrentActiveServer()));
+			const helpPage = this.getCurrentActiveServer() + '/help';
+			shell.openExternal(helpPage);
 		});
 
 		ipcRenderer.on('reload-viewer', this.reloadView.bind(this, this.tabs[this.activeTabIndex].props.index));
@@ -862,7 +645,7 @@ class ServerManagerView {
 			ipcRenderer.send('clear-app-settings');
 		});
 
-		ipcRenderer.on('switch-server-tab', (event: Event, index: number) => {
+		ipcRenderer.on('switch-server-tab', (event, index) => {
 			this.activateLastTab(index);
 		});
 
@@ -870,15 +653,16 @@ class ServerManagerView {
 			this.openSettings('AddServer');
 		});
 
-		ipcRenderer.on('reload-proxy', async (event: Event, showAlert: boolean) => {
-			await this.loadProxy();
-			if (showAlert) {
-				alert('Proxy settings saved!');
-				ipcRenderer.send('reload-full-app');
-			}
+		ipcRenderer.on('reload-proxy', (event, showAlert) => {
+			this.loadProxy().then(() => {
+				if (showAlert) {
+					alert('Proxy settings saved!');
+					ipcRenderer.send('reload-full-app');
+				}
+			});
 		});
 
-		ipcRenderer.on('toggle-sidebar', (event: Event, show: boolean) => {
+		ipcRenderer.on('toggle-sidebar', (event, show) => {
 			// Toggle the left sidebar
 			this.toggleSidebar(show);
 
@@ -886,8 +670,8 @@ class ServerManagerView {
 			this.updateGeneralSettings('toggle-sidebar-setting', show);
 		});
 
-		ipcRenderer.on('toggle-silent', (event: Event, state: boolean) => {
-			const webviews: NodeListOf<Electron.WebviewTag> = document.querySelectorAll('webview');
+		ipcRenderer.on('toggle-silent', (event, state) => {
+			const webviews = document.querySelectorAll('webview');
 			webviews.forEach(webview => {
 				try {
 					webview.setAudioMuted(state);
@@ -900,7 +684,7 @@ class ServerManagerView {
 			});
 		});
 
-		ipcRenderer.on('toggle-autohide-menubar', (event: Event, autoHideMenubar: boolean, updateMenu: boolean) => {
+		ipcRenderer.on('toggle-autohide-menubar', (event, autoHideMenubar, updateMenu) => {
 			if (updateMenu) {
 				ipcRenderer.send('update-menu', {
 					tabs: this.tabsForIpc,
@@ -911,17 +695,19 @@ class ServerManagerView {
 			this.updateGeneralSettings('toggle-menubar-setting', autoHideMenubar);
 		});
 
-		ipcRenderer.on('toggle-dnd', (event: Event, state: boolean, newSettings: SettingsOptions) => {
+		ipcRenderer.on('toggle-dnd', (event, state, newSettings) => {
 			this.toggleDNDButton(state);
 			ipcRenderer.send('forward-message', 'toggle-silent', newSettings.silent);
-			const webContents = this.getActiveWebview().getWebContents();
+			const selector = 'webview:not([class*=disabled])';
+			const webview = document.querySelector(selector);
+			const webContents = webview.getWebContents();
 			webContents.send('toggle-dnd', state, newSettings);
 		});
 
-		ipcRenderer.on('update-realm-name', (event: Event, serverURL: string, realmName: string) => {
-			DomainUtil.getDomains().forEach((domain: DomainUtil.ServerConf, index: number) => {
+		ipcRenderer.on('update-realm-name', (event, serverURL, realmName) => {
+			DomainUtil.getDomains().forEach((domain, index) => {
 				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);
@@ -939,19 +725,18 @@ class ServerManagerView {
 			});
 		});
 
-		ipcRenderer.on('update-realm-icon', (event: Event, serverURL: string, iconURL: string) => {
-			DomainUtil.getDomains().forEach(async (domain, index) => {
+		ipcRenderer.on('update-realm-icon', (event, serverURL, iconURL) => {
+			DomainUtil.getDomains().forEach((domain, index) => {
 				if (domain.url.includes(serverURL)) {
-					const localIconUrl: string = await DomainUtil.saveServerIcon({
-						url: serverURL,
-						icon: iconURL
+					DomainUtil.saveServerIcon(iconURL).then(localIconUrl => {
+						const serverImgsSelector = `.tab .server-icons`;
+						const serverImgs = document.querySelectorAll(serverImgsSelector);
+						serverImgs[index].src = localIconUrl;
+
+						domain.icon = localIconUrl;
+						DomainUtil.db.push(`/domains[${index}]`, domain, true);
+						DomainUtil.reloadDB();
 					});
-					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.reloadDB();
 				}
 			});
 		});
@@ -965,21 +750,21 @@ class ServerManagerView {
 			this.$fullscreenPopup.classList.remove('show');
 		});
 
-		ipcRenderer.on('focus-webview-with-id', (event: Event, webviewId: number) => {
-			const webviews: NodeListOf<Electron.WebviewTag> = document.querySelectorAll('webview');
+		ipcRenderer.on('focus-webview-with-id', (event, webviewId) => {
+			const webviews = document.querySelectorAll('webview');
 			webviews.forEach(webview => {
 				const currentId = webview.getWebContents().id;
 				const tabId = webview.getAttribute('data-tab-id');
-				const concurrentTab: HTMLButtonElement = document.querySelector(`div[data-tab-id="${tabId}"]`);
+				const concurrentTab = document.querySelector(`div[data-tab-id="${tabId}"]`);
 				if (currentId === webviewId) {
 					concurrentTab.click();
 				}
 			});
 		});
 
-		ipcRenderer.on('render-taskbar-icon', (event: Event, messageCount: number) => {
+		ipcRenderer.on('render-taskbar-icon', (event, messageCount) => {
 			// Create a canvas from unread messagecounts
-			function createOverlayIcon(messageCount: number): HTMLCanvasElement {
+			function createOverlayIcon(messageCount) {
 				const canvas = document.createElement('canvas');
 				canvas.height = 128;
 				canvas.width = 128;
@@ -1017,47 +802,29 @@ class ServerManagerView {
 		ipcRenderer.on('new-server', () => {
 			this.openSettings('AddServer');
 		});
-
-		// Redo and undo functionality since the default API doesn't work on macOS
-		ipcRenderer.on('undo', () => {
-			return this.getActiveWebview().undo();
-		});
-
-		ipcRenderer.on('redo', () => {
-			return this.getActiveWebview().redo();
-		});
-
-		ipcRenderer.on('set-active', () => {
-			const webviews: NodeListOf<Electron.WebviewTag> = document.querySelectorAll('webview');
-			webviews.forEach(webview => {
-				webview.send('set-active');
-			});
-		});
-
-		ipcRenderer.on('set-idle', () => {
-			const webviews: NodeListOf<Electron.WebviewTag> = document.querySelectorAll('webview');
-			webviews.forEach(webview => {
-				webview.send('set-idle');
-			});
-		});
-
-		ipcRenderer.on('open-network-settings', () => {
-			this.openSettings('Network');
-		});
 	}
 }
 
-window.addEventListener('load', () => {
+window.onload = () => {
 	const serverManagerView = new ServerManagerView();
+	const reconnectUtil = new ReconnectUtil(serverManagerView);
 	serverManagerView.init();
+	window.addEventListener('online', () => {
+		reconnectUtil.pollInternetAndReload();
+	});
+
+	window.addEventListener('offline', () => {
+		reconnectUtil.clearState();
+		logger.log('No internet connection, you are offline.');
+	});
+
 	// only start electron-connect (auto reload on change) when its ran
 	// from `npm run dev` or `gulp dev` and not from `npm start` when
 	// app is started `npm start` main process's proces.argv will have
 	// `--no-electron-connect`
 	const mainProcessArgv = remote.getGlobal('process').argv;
 	if (isDev && !mainProcessArgv.includes('--no-electron-connect')) {
-		require('electron-connect').client.create();
+		const electronConnect = require('electron-connect');
+		electronConnect.client.create();
 	}
-});
-
-export {};
+};

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

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

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

@@ -1,111 +0,0 @@
-import { ipcRenderer } from 'electron';
-import {
-	appId, customReply, focusCurrentServer, parseReply
-} from './helpers';
-
-import MacNotifier from 'node-mac-notifier';
-import * as ConfigUtil from '../utils/config-util';
-import electron_bridge from '../electron-bridge';
-
-type ReplyHandler = (response: string) => void;
-type ClickHandler = () => void;
-let replyHandler: ReplyHandler;
-let clickHandler: ClickHandler;
-
-interface NotificationHandlerArgs {
-	response: string;
-}
-
-class DarwinNotification {
-	tag: string;
-
-	constructor(title: string, options: NotificationOptions) {
-		const silent: boolean = ConfigUtil.getConfigItem('silent') || false;
-		const { icon } = options;
-		const profilePic = new URL(icon, location.href).href;
-
-		this.tag = options.tag;
-		const notification = new MacNotifier(title, Object.assign(options, {
-			bundleId: appId,
-			canReply: true,
-			silent,
-			icon: profilePic
-		}));
-
-		notification.addEventListener('click', () => {
-			// focus to the server who sent the
-			// notification if not focused already
-			if (clickHandler) {
-				clickHandler();
-			}
-
-			focusCurrentServer();
-			ipcRenderer.send('focus-app');
-		});
-
-		notification.addEventListener('reply', this.notificationHandler);
-	}
-
-	static requestPermission(): void {
-		return; // eslint-disable-line no-useless-return
-	}
-
-	// Override default Notification permission
-	static get permission(): NotificationPermission {
-		return ConfigUtil.getConfigItem('showNotification') ? 'granted' : 'denied';
-	}
-
-	get onreply(): ReplyHandler {
-		return replyHandler;
-	}
-
-	set onreply(handler: ReplyHandler) {
-		replyHandler = handler;
-	}
-
-	get onclick(): ClickHandler {
-		return clickHandler;
-	}
-
-	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 {
-		if (event === 'click') {
-			clickHandler = handler as ClickHandler;
-		}
-
-		if (event === 'reply') {
-			replyHandler = handler as ReplyHandler;
-		}
-	}
-
-	async notificationHandler({ response }: NotificationHandlerArgs): Promise<void> {
-		response = await parseReply(response);
-		focusCurrentServer();
-		if (electron_bridge.send_notification_reply_message_supported) {
-			electron_bridge.send_event('send_notification_reply_message', this.tag, response);
-			return;
-		}
-
-		electron_bridge.emit('narrow-by-topic', this.tag);
-		if (replyHandler) {
-			replyHandler(response);
-			return;
-		}
-
-		customReply(response);
-	}
-
-	// method specific to notification api
-	// used by zulip
-	close(): void {
-		return; // eslint-disable-line no-useless-return
-	}
-}
-
-module.exports = DarwinNotification;

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

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

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

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

app/renderer/js/notification/helpers.js

@@ -1,6 +1,5 @@
-import { remote } from 'electron';
-
-import Logger from '../utils/logger-util';
+const { remote } = require('electron');
+const Logger = require('../utils/logger-util.js');
 
 const logger = new Logger({
 	file: 'errors.log',
@@ -8,34 +7,42 @@ const logger = new Logger({
 });
 
 // Do not change this
-export const appId = 'org.zulip.zulip-electron';
+const appId = 'org.zulip.zulip-electron';
 
-export type BotListItem = [string, string];
-const botsList: BotListItem[] = [];
+const botsList = [];
 let botsListLoaded = false;
 
 // this function load list of bots from the server
+// sync=True for a synchronous getJSON request
 // in case botsList isn't already completely loaded when required in parseRely
-export async function loadBots(): Promise<void> {
+function loadBots(sync = false) {
+	const { $ } = window;
 	botsList.length = 0;
-	const response = await fetch('/json/users');
-	if (response.ok) {
-		const { members } = await response.json();
-		members.forEach((membersRow: any) => {
-			if (membersRow.is_bot) {
-				const bot = `@${membersRow.full_name}`;
-				const mention = `@**${bot.replace(/^@/, '')}**`;
-				botsList.push([bot, mention]);
-			}
+	if (sync) {
+		$.ajaxSetup({async: false});
+	}
+	$.getJSON('/json/users')
+		.done(data => {
+			const members = data.members;
+			members.forEach(membersRow => {
+				if (membersRow.is_bot) {
+					const bot = `@${membersRow.full_name}`;
+					const mention = `@**${bot.replace(/^@/, '')}**`;
+					botsList.push([bot, mention]);
+				}
+			});
+			botsListLoaded = true;
+		})
+		.fail(error => {
+			logger.log('Load bots request failed: ', error.responseText);
+			logger.log('Load bots request status: ', error.statusText);
 		});
-		botsListLoaded = true;
-	} else {
-		logger.log('Load bots request failed: ', await response.text());
-		logger.log('Load bots request status: ', response.status);
+	if (sync) {
+		$.ajaxSetup({async: true});
 	}
 }
 
-export function checkElements(...elements: any[]): boolean {
+function checkElements(...elements) {
 	let status = true;
 	elements.forEach(element => {
 		if (element === null || element === undefined) {
@@ -45,13 +52,13 @@ export function checkElements(...elements: any[]): boolean {
 	return status;
 }
 
-export function customReply(reply: string): void {
+function customReply(reply) {
 	// server does not support notification reply yet.
 	const buttonSelector = '.messagebox #send_controls button[type=submit]';
 	const messageboxSelector = '.selected_message .messagebox .messagebox-border .messagebox-content';
-	const textarea: HTMLInputElement = document.querySelector('#compose-textarea');
-	const messagebox: HTMLButtonElement = document.querySelector(messageboxSelector);
-	const sendButton: HTMLButtonElement = document.querySelector(buttonSelector);
+	const textarea = document.querySelector('#compose-textarea');
+	const messagebox = document.querySelector(messageboxSelector);
+	const sendButton = document.querySelector(buttonSelector);
 
 	// sanity check for old server versions
 	const elementsExists = checkElements(textarea, messagebox, sendButton);
@@ -70,22 +77,19 @@ const webContentsId = webContents.id;
 
 // this function will focus the server that sent
 // the notification. Main function implemented in main.js
-export function focusCurrentServer(): void {
-	currentWindow.webContents.send('focus-webview-with-id', webContentsId);
+function focusCurrentServer() {
+	currentWindow.send('focus-webview-with-id', webContentsId);
 }
 // this function parses the reply from to notification
 // making it easier to reply from notification eg
 // @username in reply will be converted to @**username**
 // #stream in reply will be converted to #**stream**
 // bot mentions are not yet supported
-export async function parseReply(reply: string): Promise<string> {
+function parseReply(reply) {
 	const usersDiv = document.querySelectorAll('#user_presences li');
 	const streamHolder = document.querySelectorAll('#stream_filters li');
-
-	type UsersItem = BotListItem;
-	type StreamsItem = BotListItem;
-	const users: UsersItem[] = [];
-	const streams: StreamsItem[] = [];
+	const users = [];
+	const streams = [];
 
 	usersDiv.forEach(userRow => {
 		const anchor = userRow.querySelector('span a');
@@ -117,9 +121,9 @@ export async function parseReply(reply: string): Promise<string> {
 		reply = reply.replace(regex, streamMention);
 	});
 
-	// If botsList isn't completely loaded yet, make a request for list
-	if (!botsListLoaded) {
-		await loadBots();
+	// If botsList isn't completely loaded yet, make a synchronous getJSON request for list
+	if (botsListLoaded === false) {
+		loadBots(true);
 	}
 
 	// Iterate for every bot name and replace in reply
@@ -134,3 +138,19 @@ export async function parseReply(reply: string): Promise<string> {
 	reply = reply.replace(/\\n/, '\n');
 	return reply;
 }
+
+function setupReply(id) {
+	const { narrow } = window;
+	const narrowByTopic = narrow.by_topic || narrow.by_subject;
+	narrowByTopic(id, { trigger: 'notification' });
+}
+
+module.exports = {
+	appId,
+	checkElements,
+	customReply,
+	parseReply,
+	setupReply,
+	focusCurrentServer,
+	loadBots
+};

app/renderer/js/notification/index.js

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

app/renderer/js/notification/index.ts

@@ -1,72 +0,0 @@
-import { remote } from 'electron';
-import electron_bridge from '../electron-bridge';
-import { appId, loadBots } from './helpers';
-
-import DefaultNotification from './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);
-
-let Notification = DefaultNotification;
-
-if (process.platform === 'darwin') {
-	Notification = require('./darwin-notifications');
-}
-
-export interface NotificationData {
-	close(): void;
-	title: string;
-	dir: NotificationDirection;
-	lang: string;
-	body: string;
-	tag: string;
-	image: string;
-	icon: string;
-	badge: string;
-	vibrate: readonly number[];
-	timestamp: number;
-	renotify: boolean;
-	silent: boolean;
-	requireInteraction: boolean;
-	data: unknown;
-	actions: readonly NotificationAction[];
-}
-
-export function newNotification(
-	title: string,
-	options: NotificationOptions | undefined,
-	dispatch: (type: string, eventInit: EventInit) => boolean
-): NotificationData {
-	const notification = new 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', () => {
-	loadBots();
-});

app/renderer/js/pages/network.js

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

app/renderer/js/pages/network.ts

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

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

@@ -1,55 +1,43 @@
 'use-strict';
 
-import { remote, OpenDialogOptions } from 'electron';
+const { dialog } = require('electron').remote;
+const path = require('path');
 
-import path from 'path';
-import BaseComponent from '../../components/base';
-import * as CertificateUtil from '../../utils/certificate-util';
-import * as DomainUtil from '../../utils/domain-util';
-import * as t from '../../utils/translation-util';
+const BaseComponent = require(__dirname + '/../../components/base.js');
+const CertificateUtil = require(__dirname + '/../../utils/certificate-util.js');
+const DomainUtil = require(__dirname + '/../../utils/domain-util.js');
 
-interface AddCertificateProps {
-	$root: Element;
-}
-
-const { dialog } = remote;
-
-export default class AddCertificate extends BaseComponent {
-	props: AddCertificateProps;
-	_certFile: string;
-	$addCertificate: Element | null;
-	addCertificateButton: Element | null;
-	serverUrl: HTMLInputElement | null;
-	constructor(props: AddCertificateProps) {
+class AddCertificate extends BaseComponent {
+	constructor(props) {
 		super();
 		this.props = props;
 		this._certFile = '';
 	}
 
-	template(): string {
+	template() {
 		return `
 			<div class="settings-card certificates-card">
 				<div class="certificate-input">
-					<div>${t.__('Organization URL')}</div>
+					<div>Organization URL</div>
 					<input class="setting-input-value" autofocus placeholder="your-organization.zulipchat.com or zulip.your-organization.com"/>
 				</div>
 				<div class="certificate-input">
-					<div>${t.__('Certificate file')}</div>
-					<button class="green" id="add-certificate-button">${t.__('Upload')}</button>
+					<div>Certificate file</div>
+					<button class="green" id="add-certificate-button">Upload</button>
 				</div>
 			</div>
 		`;
 	}
 
-	init(): void {
+	init() {
 		this.$addCertificate = this.generateNodeFromTemplate(this.template());
-		this.props.$root.append(this.$addCertificate);
+		this.props.$root.appendChild(this.$addCertificate);
 		this.addCertificateButton = this.$addCertificate.querySelector('#add-certificate-button');
-		this.serverUrl = this.$addCertificate.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
+		this.serverUrl = this.$addCertificate.querySelectorAll('input.setting-input-value')[0];
 		this.initListeners();
 	}
 
-	validateAndAdd(): void {
+	validateAndAdd() {
 		const certificate = this._certFile;
 		const serverUrl = this.serverUrl.value;
 		if (certificate !== '' && serverUrl !== '') {
@@ -62,37 +50,43 @@ export default class AddCertificate extends BaseComponent {
 			CertificateUtil.setCertificate(server, fileName);
 			dialog.showMessageBox({
 				title: 'Success',
-				message: 'Certificate saved!'
+				message: `Certificate saved!`
 			});
 			this.serverUrl.value = '';
 		} else {
 			dialog.showErrorBox('Error', `Please, ${serverUrl === '' ?
-				'Enter an Organization URL' : 'Choose certificate file'}`);
+      'Enter an Organization URL' : 'Choose certificate file'}`);
 		}
 	}
 
-	async addHandler(): Promise<void> {
-		const showDialogOptions: OpenDialogOptions = {
+	addHandler() {
+		const showDialogOptions = {
 			title: 'Select file',
+			defaultId: 1,
 			properties: ['openFile'],
 			filters: [{ name: 'crt, pem', extensions: ['crt', 'pem'] }]
 		};
-		const { filePaths, canceled } = await dialog.showOpenDialog(showDialogOptions);
-		if (!canceled) {
-			this._certFile = filePaths[0] || '';
-			this.validateAndAdd();
-		}
+		dialog.showOpenDialog(showDialogOptions, selectedFile => {
+			if (selectedFile) {
+				this._certFile = selectedFile[0] || '';
+				this.validateAndAdd();
+			}
+		});
 	}
 
-	initListeners(): void {
+	initListeners() {
 		this.addCertificateButton.addEventListener('click', () => {
 			this.addHandler();
 		});
 
 		this.serverUrl.addEventListener('keypress', event => {
-			if (event.key === 'Enter') {
+			const EnterkeyCode = event.keyCode;
+
+			if (EnterkeyCode === 13) {
 				this.addHandler();
 			}
 		});
 	}
 }
+
+module.exports = AddCertificate;

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

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

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

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

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

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

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

@@ -1,65 +0,0 @@
-import { ipcRenderer } from 'electron';
-import escape from 'escape-html';
-
-import BaseComponent from '../../components/base';
-
-interface BaseSectionProps {
-	$element: HTMLElement;
-	disabled?: boolean;
-	value: boolean;
-	clickHandler: () => void;
-}
-
-export default class BaseSection extends BaseComponent {
-	generateSettingOption(props: BaseSectionProps): void {
-		const {$element, disabled, value, clickHandler} = props;
-
-		$element.innerHTML = '';
-
-		const $optionControl = this.generateNodeFromTemplate(this.generateOptionTemplate(value, disabled));
-		$element.append($optionControl);
-
-		if (!disabled) {
-			$optionControl.addEventListener('click', clickHandler);
-		}
-	}
-
-	generateOptionTemplate(settingOption: boolean, disabled?: boolean): string {
-		const label = disabled ? '<label class="disallowed" title="Setting locked by system administrator."/>' : '<label/>';
-		if (settingOption) {
-			return `
-				<div class="action">
-					<div class="switch">
-					  <input class="toggle toggle-round" type="checkbox" checked disabled>
-					  ${label}
-					</div>
-				</div>
-			`;
-		} else {
-			return `
-				<div class="action">
-					<div class="switch">
-					  <input class="toggle toggle-round" type="checkbox">
-					  ${label}
-					</div>
-				</div>
-			`;
-		}
-	}
-
-	/* a method that in future can be used to create dropdown menus using <select> <option> tags.
-		it needs an object which has ``key: value`` pairs and will return a string that can be appended to HTML
-	*/
-	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');
-	}
-}

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

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

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

@@ -1,89 +0,0 @@
-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';
-
-interface ConnectedOrgSectionProps {
-	$root: Element;
-}
-
-export default class ConnectedOrgSection extends BaseSection {
-	props: ConnectedOrgSectionProps;
-	$serverInfoContainer: Element | null;
-	$existingServers: Element | null;
-	$newOrgButton: HTMLButtonElement | null;
-	$addCertificateContainer: Element | null;
-	$findAccountsContainer: Element | null;
-	constructor(props: ConnectedOrgSectionProps) {
-		super();
-		this.props = props;
-	}
-
-	template(): string {
-		return `
-			<div class="settings-pane" id="server-settings-pane">
-				<div class="page-title">${t.__('Connected organizations')}</div>
-				<div class="title" id="existing-servers">${t.__('All the connected orgnizations will appear here.')}</div>
-				<div id="server-info-container"></div>
-				<div id="new-org-button"><button class="green sea w-250">${t.__('Connect to another organization')}</button></div>
-				<div class="page-title">${t.__('Add Custom Certificates')}</div>
-				<div id="add-certificate-container"></div>
-				<div class="page-title">${t.__('Find accounts by email')}</div>
-				<div id="find-accounts-container"></div>
-			</div>
-		`;
-	}
-
-	init(): void {
-		this.initServers();
-	}
-
-	initServers(): void {
-		this.props.$root.innerHTML = '';
-
-		const servers = DomainUtil.getDomains();
-		this.props.$root.innerHTML = this.template();
-
-		this.$serverInfoContainer = document.querySelector('#server-info-container');
-		this.$existingServers = document.querySelector('#existing-servers');
-		this.$newOrgButton = document.querySelector('#new-org-button');
-		this.$addCertificateContainer = document.querySelector('#add-certificate-container');
-		this.$findAccountsContainer = document.querySelector('#find-accounts-container');
-
-		const noServerText = t.__('All the connected orgnizations will appear here');
-		// Show noServerText if no servers are there otherwise hide it
-		this.$existingServers.innerHTML = servers.length === 0 ? noServerText : '';
-
-		for (const [i, server] of servers.entries()) {
-			new ServerInfoForm({
-				$root: this.$serverInfoContainer,
-				server,
-				index: i,
-				onChange: this.reloadApp
-			}).init();
-		}
-
-		this.$newOrgButton.addEventListener('click', () => {
-			ipcRenderer.send('forward-message', 'open-org-tab');
-		});
-
-		this.initAddCertificate();
-		this.initFindAccounts();
-	}
-
-	initAddCertificate(): void {
-		new AddCertificate({
-			$root: this.$addCertificateContainer
-		}).init();
-	}
-
-	initFindAccounts(): void {
-		new FindAccounts({
-			$root: this.$findAccountsContainer
-		}).init();
-	}
-}

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

@@ -1,56 +1,48 @@
 'use-strict';
 
-import BaseComponent from '../../components/base';
-import * as LinkUtil from '../../utils/link-util';
-import * as t from '../../utils/translation-util';
+const { shell } = require('electron');
 
-interface FindAccountsProps {
-	$root: Element;
-}
+const BaseComponent = require(__dirname + '/../../components/base.js');
 
-export default class FindAccounts extends BaseComponent {
-	props: FindAccountsProps;
-	$findAccounts: Element | null;
-	$findAccountsButton: Element | null;
-	$serverUrlField: HTMLInputElement | null;
-	constructor(props: FindAccountsProps) {
+class FindAccounts extends BaseComponent {
+	constructor(props) {
 		super();
 		this.props = props;
 	}
 
-	template(): string {
+	template() {
 		return `
 			<div class="settings-card certificate-card">
 				<div class="certificate-input">
-					<div>${t.__('Organization URL')}</div>
+					<div>Organization URL</div>
 					<input class="setting-input-value" value="zulipchat.com"/>
 				</div>
 				<div class="certificate-input">
-					<button class="green w-150" id="find-accounts-button">${t.__('Find accounts')}</button>
+					<button class="green w-150" id="find-accounts-button">Find accounts</button>
 				</div>
 			</div>
 		`;
 	}
 
-	init(): void {
+	init() {
 		this.$findAccounts = this.generateNodeFromTemplate(this.template());
-		this.props.$root.append(this.$findAccounts);
+		this.props.$root.appendChild(this.$findAccounts);
 		this.$findAccountsButton = this.$findAccounts.querySelector('#find-accounts-button');
-		this.$serverUrlField = this.$findAccounts.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
+		this.$serverUrlField = this.$findAccounts.querySelectorAll('input.setting-input-value')[0];
 		this.initListeners();
 	}
 
-	findAccounts(url: string): void {
+	findAccounts(url) {
 		if (!url) {
 			return;
 		}
 		if (!url.startsWith('http')) {
 			url = 'https://' + url;
 		}
-		LinkUtil.openBrowser(new URL('/accounts/find', url));
+		shell.openExternal(url + '/accounts/find');
 	}
 
-	initListeners(): void {
+	initListeners() {
 		this.$findAccountsButton.addEventListener('click', () => {
 			this.findAccounts(this.$serverUrlField.value);
 		});
@@ -62,7 +54,7 @@ export default class FindAccounts extends BaseComponent {
 		});
 
 		this.$serverUrlField.addEventListener('keypress', event => {
-			if (event.key === 'Enter') {
+			if (event.keyCode === 13) {
 				this.findAccounts(this.$serverUrlField.value);
 			}
 		});
@@ -76,3 +68,5 @@ export default class FindAccounts extends BaseComponent {
 		});
 	}
 }
+
+module.exports = FindAccounts;

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

@@ -1,156 +1,137 @@
-import { ipcRenderer, remote, OpenDialogOptions } from 'electron';
-
-import path from 'path';
-import fs from 'fs-extra';
+'use strict';
+const path = require('path');
+const { ipcRenderer, remote } = require('electron');
+const fs = require('fs-extra');
 
 const { app, dialog } = remote;
 const currentBrowserWindow = remote.getCurrentWindow();
+const BaseSection = require(__dirname + '/base-section.js');
+const ConfigUtil = require(__dirname + '/../../utils/config-util.js');
 
-import BaseSection from './base-section';
-import * as ConfigUtil from '../../utils/config-util';
-import * as EnterpriseUtil from '../../utils/enterprise-util';
-import * as t from '../../utils/translation-util';
-import supportedLocales from '../../../../translations/supported-locales.json';
-
-interface GeneralSectionProps {
-	$root: Element;
-}
-
-export default class GeneralSection extends BaseSection {
-	props: GeneralSectionProps;
-	constructor(props: GeneralSectionProps) {
+class GeneralSection extends BaseSection {
+	constructor(props) {
 		super();
 		this.props = props;
 	}
 
-	template(): string {
+	template() {
 		return `
             <div class="settings-pane">
-                <div class="title">${t.__('Appearance')}</div>
+                <div class="title">Appearance</div>
                 <div id="appearance-option-settings" class="settings-card">
 					<div class="setting-row" id="tray-option">
-						<div class="setting-description">${t.__('Show app icon in system tray')}</div>
+						<div class="setting-description">Show app icon in system tray</div>
 						<div class="setting-control"></div>
 					</div>
 					<div class="setting-row" id="menubar-option" style= "display:${process.platform === 'darwin' ? 'none' : ''}">
-						<div class="setting-description">${t.__('Auto hide menu bar (Press Alt key to display)')}</div>
+						<div class="setting-description">Auto hide menu bar (Press Alt key to display)</div>
 						<div class="setting-control"></div>
 					</div>
 					<div class="setting-row" id="sidebar-option">
-						<div class="setting-description">${t.__('Show sidebar')} (<span class="code">${process.platform === 'darwin' ? 'Cmd+Shift+S' : 'Ctrl+Shift+S'}</span>)</div>
+						<div class="setting-description">Show sidebar (<span class="code">${process.platform === 'darwin' ? 'Cmd+Shift+S' : 'Ctrl+Shift+S'}</span>)</div>
 						<div class="setting-control"></div>
 					</div>
 					<div class="setting-row" id="badge-option">
-						<div class="setting-description">${t.__('Show app unread badge')}</div>
+						<div class="setting-description">Show app unread badge</div>
 						<div class="setting-control"></div>
 					</div>
 					<div class="setting-row" id="dock-bounce-option" style= "display:${process.platform === 'darwin' ? '' : 'none'}">
-						<div class="setting-description">${t.__('Bounce dock on new private message')}</div>
+						<div class="setting-description">Bounce dock on new private message</div>
 						<div class="setting-control"></div>
 					</div>
 					<div class="setting-row" id="flash-taskbar-option" style= "display:${process.platform === 'win32' ? '' : 'none'}">
-						<div class="setting-description">${t.__('Flash taskbar on new message')}</div>
+						<div class="setting-description">Flash taskbar on new message</div>
 						<div class="setting-control"></div>
 					</div>
 				</div>
-				<div class="title">${t.__('Desktop Notifications')}</div>
+				<div class="title">Desktop Notifications</div>
 				<div class="settings-card">
 					<div class="setting-row" id="show-notification-option">
-						<div class="setting-description">${t.__('Show desktop notifications')}</div>
+						<div class="setting-description">Show desktop notifications</div>
 						<div class="setting-control"></div>
 					</div>
 					<div class="setting-row" id="silent-option">
-						<div class="setting-description">${t.__('Mute all sounds from Zulip')}</div>
+						<div class="setting-description">Mute all sounds from Zulip</div>
 						<div class="setting-control"></div>
 					</div>
 				</div>
-				<div class="title">${t.__('App Updates')}</div>
+				<div class="title">App Updates</div>
 				<div class="settings-card">
 				<div class="setting-row" id="autoupdate-option">
-						<div class="setting-description">${t.__('Enable auto updates')}</div>
+						<div class="setting-description">Enable auto updates</div>
 						<div class="setting-control"></div>
 					</div>
 					<div class="setting-row" id="betaupdate-option">
-						<div class="setting-description">${t.__('Get beta updates')}</div>
+						<div class="setting-description">Get beta updates</div>
 						<div class="setting-control"></div>
 					</div>
 				</div>
-				<div class="title">${t.__('Functionality')}</div>
+				<div class="title">Functionality</div>
                 <div class="settings-card">
 					<div class="setting-row" id="startAtLogin-option">
-						<div class="setting-description">${t.__('Start app at login')}</div>
+						<div class="setting-description">Start app at login</div>
 						<div class="setting-control"></div>
 					</div>
 					<div class="setting-row" id="start-minimize-option">
-						<div class="setting-description">${t.__('Always start minimized')}</div>
-						<div class="setting-control"></div>
-					</div>
-					<div class="setting-row" id="quitOnClose-option">
-						<div class="setting-description">${t.__('Quit when the window is closed')}</div>
+						<div class="setting-description">Always start minimized</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-description">Enable spellchecker (requires restart)</div>
 						<div class="setting-control"></div>
 					</div>
 				</div>
-				<div class="title">${t.__('Advanced')}</div>
+				<div class="title">Advanced</div>
 				<div class="settings-card">
-
-					<div class="setting-row" id="enable-error-reporting">
-						<div class="setting-description">${t.__('Enable error reporting (requires restart)')}</div>
-						<div class="setting-control"></div>
-					</div>
-					
-					<div class="setting-row" id="app-language">
-						<div class="setting-description">${t.__('App language (requires restart)')}</div>
-						<div  id="lang-div" class="lang-div"></div>
-					</div>
-
-					<div class="setting-row" id="add-custom-css">
-						<div class="setting-description">
-							${t.__('Add custom CSS')}
-						</div>
-						<button class="custom-css-button green">${t.__('Upload')}</button>
-					</div>
-					<div class="setting-row" id="remove-custom-css">
-						<div class="setting-description">
-							<div class="selected-css-path" id="custom-css-path">${ConfigUtil.getConfigItem('customCSS')}</div>
-						</div>
-						<div class="action red" id="css-delete-action">
-							<i class="material-icons">indeterminate_check_box</i>
-							<span>${t.__('Delete')}</span>
-						</div>
-					</div>
+				<div class="setting-row" id="enable-error-reporting">
+					<div class="setting-description">Enable error reporting (requires restart)</div>
+					<div class="setting-control"></div>
+				</div>
+				<div class="setting-row" id="show-download-folder">
+					<div class="setting-description">Show downloaded files in file manager</div>
+					<div class="setting-control"></div>
+				</div>
+				<div class="setting-row" id="add-custom-css">
+				<div class="setting-description">
+					Add custom CSS
+				</div>
+				<button class="custom-css-button green">Upload</button>
+			</div>
+			<div class="setting-row" id="remove-custom-css">
+				<div class="setting-description">
+					<div class="selected-css-path" id="custom-css-path">${ConfigUtil.getConfigItem('customCSS')}</div>
+				</div>
+				<div class="action red" id="css-delete-action">
+					<i class="material-icons">indeterminate_check_box</i>
+					<span>Delete</span>
+				</div>
+			</div>
 					<div class="setting-row" id="download-folder">
 						<div class="setting-description">
-							${t.__('Default download location')}
+							Default download location
 						</div>
-						<button class="download-folder-button green">${t.__('Change')}</button>
+						<button class="download-folder-button green">Change</button>
 					</div>
 					<div class="setting-row">
 						<div class="setting-description">
 							<div class="download-folder-path">${ConfigUtil.getConfigItem('downloadsPath', `${app.getPath('downloads')}`)}</div>
 						</div>
 					</div>
-					<div class="setting-row" id="prompt-download">
-						<div class="setting-description">${t.__('Ask where to save files before downloading')}</div>
-						<div class="setting-control"></div>
-					</div>
+
 				</div>
-				<div class="title">${t.__('Reset Application Data')}</div>
+				<div class="title">Reset Application Data</div>
                 <div class="settings-card">
 					<div class="setting-row" id="resetdata-option">
-						<div class="setting-description">${t.__('This will delete all application data including all added accounts and preferences')}
+						<div class="setting-description">This will delete all application data including all added accounts and preferences
 						</div>
-						<button class="reset-data-button red w-150">${t.__('Reset App Data')}</button>
+						<button class="reset-data-button red w-150">Reset App Data</button>
 					</div>
 				</div>
-			</div>
+            </div>
 		`;
 	}
 
-	init(): void {
+	init() {
 		this.props.$root.innerHTML = this.template();
 		this.updateTrayOption();
 		this.updateBadgeOption();
@@ -167,10 +148,8 @@ export default class GeneralSection extends BaseSection {
 		this.showCustomCSSPath();
 		this.removeCustomCSS();
 		this.downloadFolder();
-		this.updateQuitOnCloseOption();
-		this.updatePromptDownloadOption();
+		this.showDownloadFolder();
 		this.enableErrorReporting();
-		this.setLocale();
 
 		// Platform specific settings
 
@@ -189,7 +168,7 @@ export default class GeneralSection extends BaseSection {
 		}
 	}
 
-	updateTrayOption(): void {
+	updateTrayOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#tray-option .setting-control'),
 			value: ConfigUtil.getConfigItem('trayIcon', true),
@@ -202,7 +181,7 @@ export default class GeneralSection extends BaseSection {
 		});
 	}
 
-	updateMenubarOption(): void {
+	updateMenubarOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#menubar-option .setting-control'),
 			value: ConfigUtil.getConfigItem('autoHideMenubar', false),
@@ -215,7 +194,7 @@ export default class GeneralSection extends BaseSection {
 		});
 	}
 
-	updateBadgeOption(): void {
+	updateBadgeOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#badge-option .setting-control'),
 			value: ConfigUtil.getConfigItem('badgeOption', true),
@@ -228,7 +207,7 @@ export default class GeneralSection extends BaseSection {
 		});
 	}
 
-	updateDockBouncing(): void {
+	updateDockBouncing() {
 		this.generateSettingOption({
 			$element: document.querySelector('#dock-bounce-option .setting-control'),
 			value: ConfigUtil.getConfigItem('dockBouncing', true),
@@ -240,7 +219,7 @@ export default class GeneralSection extends BaseSection {
 		});
 	}
 
-	updateFlashTaskbar(): void {
+	updateFlashTaskbar() {
 		this.generateSettingOption({
 			$element: document.querySelector('#flash-taskbar-option .setting-control'),
 			value: ConfigUtil.getConfigItem('flashTaskbarOnMessage', true),
@@ -252,10 +231,9 @@ export default class GeneralSection extends BaseSection {
 		});
 	}
 
-	autoUpdateOption(): void {
+	autoUpdateOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#autoupdate-option .setting-control'),
-			disabled: EnterpriseUtil.configItemExists('autoUpdate'),
 			value: ConfigUtil.getConfigItem('autoUpdate', true),
 			clickHandler: () => {
 				const newValue = !ConfigUtil.getConfigItem('autoUpdate');
@@ -269,7 +247,7 @@ export default class GeneralSection extends BaseSection {
 		});
 	}
 
-	betaUpdateOption(): void {
+	betaUpdateOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#betaupdate-option .setting-control'),
 			value: ConfigUtil.getConfigItem('betaUpdate', false),
@@ -283,7 +261,7 @@ export default class GeneralSection extends BaseSection {
 		});
 	}
 
-	updateSilentOption(): void {
+	updateSilentOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#silent-option .setting-control'),
 			value: ConfigUtil.getConfigItem('silent', false),
@@ -291,12 +269,12 @@ export default class GeneralSection extends BaseSection {
 				const newValue = !ConfigUtil.getConfigItem('silent', true);
 				ConfigUtil.setConfigItem('silent', newValue);
 				this.updateSilentOption();
-				currentBrowserWindow.webContents.send('toggle-silent', newValue);
+				currentBrowserWindow.send('toggle-silent', newValue);
 			}
 		});
 	}
 
-	showDesktopNotification(): void {
+	showDesktopNotification() {
 		this.generateSettingOption({
 			$element: document.querySelector('#show-notification-option .setting-control'),
 			value: ConfigUtil.getConfigItem('showNotification', true),
@@ -308,7 +286,7 @@ export default class GeneralSection extends BaseSection {
 		});
 	}
 
-	updateSidebarOption(): void {
+	updateSidebarOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#sidebar-option .setting-control'),
 			value: ConfigUtil.getConfigItem('showSidebar', true),
@@ -321,7 +299,7 @@ export default class GeneralSection extends BaseSection {
 		});
 	}
 
-	updateStartAtLoginOption(): void {
+	updateStartAtLoginOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#startAtLogin-option .setting-control'),
 			value: ConfigUtil.getConfigItem('startAtLogin', false),
@@ -334,19 +312,7 @@ export default 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 {
+	enableSpellchecker() {
 		this.generateSettingOption({
 			$element: document.querySelector('#enable-spellchecker-option .setting-control'),
 			value: ConfigUtil.getConfigItem('enableSpellchecker', true),
@@ -358,7 +324,7 @@ export default class GeneralSection extends BaseSection {
 		});
 	}
 
-	enableErrorReporting(): void {
+	enableErrorReporting() {
 		this.generateSettingOption({
 			$element: document.querySelector('#enable-error-reporting .setting-control'),
 			value: ConfigUtil.getConfigItem('errorReporting', true),
@@ -370,63 +336,48 @@ export default class GeneralSection extends BaseSection {
 		});
 	}
 
-	async clearAppDataDialog(): Promise<void> {
+	clearAppDataDialog() {
 		const clearAppDataMessage = 'By clicking proceed you will be removing all added accounts and preferences from Zulip. When the application restarts, it will be as if you are starting Zulip for the first time.';
-		const getAppPath = path.join(app.getPath('appData'), app.name);
+		const getAppPath = path.join(app.getPath('appData'), app.getName());
 
-		const { response } = await dialog.showMessageBox({
+		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);
+			}
 		});
-		if (response === 0) {
-			fs.remove(getAppPath);
-			setTimeout(() => ipcRenderer.send('forward-message', 'hard-reload'), 1000);
-		}
 	}
 
-	async customCssDialog(): Promise<void> {
-		const showDialogOptions: OpenDialogOptions = {
+	customCssDialog() {
+		const showDialogOptions = {
 			title: 'Select file',
+			defaultId: 1,
 			properties: ['openFile'],
 			filters: [{ name: 'CSS file', extensions: ['css'] }]
 		};
 
-		const { filePaths, canceled } = await dialog.showOpenDialog(showDialogOptions);
-		if (!canceled) {
-			ConfigUtil.setConfigItem('customCSS', filePaths[0]);
-			ipcRenderer.send('forward-message', 'hard-reload');
-		}
+		dialog.showOpenDialog(showDialogOptions, selectedFile => {
+			if (selectedFile) {
+				ConfigUtil.setConfigItem('customCSS', selectedFile[0]);
+				ipcRenderer.send('forward-message', 'hard-reload');
+			}
+		});
 	}
 
-	updateResetDataOption(): void {
+	updateResetDataOption() {
 		const resetDataButton = document.querySelector('#resetdata-option .reset-data-button');
 		resetDataButton.addEventListener('click', () => {
 			this.clearAppDataDialog();
 		});
 	}
 
-	setLocale(): void {
-		const langDiv: HTMLSelectElement = document.querySelector('.lang-div');
-		// This path is for the JSON file that stores key: value pairs for supported locales
-		const langList = this.generateSelectTemplate(supportedLocales, 'lang-menu');
-		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-US';
-		langMenu.options.namedItem(language).selected = true;
-
-		langMenu.addEventListener('change', (event: Event) => {
-			ConfigUtil.setConfigItem('appLanguage', (event.target as HTMLSelectElement).value);
-		});
-	}
-
-	minimizeOnStart(): void {
+	minimizeOnStart() {
 		this.generateSettingOption({
 			$element: document.querySelector('#start-minimize-option .setting-control'),
 			value: ConfigUtil.getConfigItem('startMinimized', false),
@@ -438,58 +389,62 @@ export default class GeneralSection extends BaseSection {
 		});
 	}
 
-	addCustomCSS(): void {
+	addCustomCSS() {
 		const customCSSButton = document.querySelector('#add-custom-css .custom-css-button');
 		customCSSButton.addEventListener('click', () => {
 			this.customCssDialog();
 		});
 	}
 
-	showCustomCSSPath(): void {
+	showCustomCSSPath() {
 		if (!ConfigUtil.getConfigItem('customCSS')) {
-			const cssPATH: HTMLElement = document.querySelector('#remove-custom-css');
+			const cssPATH = document.getElementById('remove-custom-css');
 			cssPATH.style.display = 'none';
 		}
 	}
 
-	removeCustomCSS(): void {
-		const removeCSSButton = document.querySelector('#css-delete-action');
+	removeCustomCSS() {
+		const removeCSSButton = document.getElementById('css-delete-action');
 		removeCSSButton.addEventListener('click', () => {
-			ConfigUtil.setConfigItem('customCSS', '');
+			ConfigUtil.setConfigItem('customCSS');
 			ipcRenderer.send('forward-message', 'hard-reload');
 		});
 	}
 
-	async downloadFolderDialog(): Promise<void> {
-		const showDialogOptions: OpenDialogOptions = {
+	downloadFolderDialog() {
+		const showDialogOptions = {
 			title: 'Select Download Location',
+			defaultId: 1,
 			properties: ['openDirectory']
 		};
 
-		const { filePaths, canceled } = await dialog.showOpenDialog(showDialogOptions);
-		if (!canceled) {
-			ConfigUtil.setConfigItem('downloadsPath', filePaths[0]);
-			const downloadFolderPath: HTMLElement = document.querySelector('.download-folder-path');
-			downloadFolderPath.textContent = filePaths[0];
-		}
+		dialog.showOpenDialog(showDialogOptions, selectedFolder => {
+			if (selectedFolder) {
+				ConfigUtil.setConfigItem('downloadsPath', selectedFolder[0]);
+				const downloadFolderPath = document.querySelector('.download-folder-path');
+				downloadFolderPath.innerText = selectedFolder[0];
+			}
+		});
 	}
-
-	downloadFolder(): void {
+	downloadFolder() {
 		const downloadFolder = document.querySelector('#download-folder .download-folder-button');
 		downloadFolder.addEventListener('click', () => {
 			this.downloadFolderDialog();
 		});
 	}
 
-	updatePromptDownloadOption(): void {
+	showDownloadFolder() {
 		this.generateSettingOption({
-			$element: document.querySelector('#prompt-download .setting-control'),
-			value: ConfigUtil.getConfigItem('promptDownload', false),
+			$element: document.querySelector('#show-download-folder .setting-control'),
+			value: ConfigUtil.getConfigItem('showDownloadFolder', false),
 			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('promptDownload');
-				ConfigUtil.setConfigItem('promptDownload', newValue);
-				this.updatePromptDownloadOption();
+				const newValue = !ConfigUtil.getConfigItem('showDownloadFolder');
+				ConfigUtil.setConfigItem('showDownloadFolder', newValue);
+				this.showDownloadFolder();
 			}
 		});
 	}
+
 }
+
+module.exports = GeneralSection;

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

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

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

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

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

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

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

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

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

@@ -1,104 +0,0 @@
-import { ipcRenderer } 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';
-
-interface NewServerFormProps {
-	$root: Element;
-	onChange: () => void;
-}
-
-export default class NewServerForm extends BaseComponent {
-	props: NewServerFormProps;
-	$newServerForm: Element;
-	$saveServerButton: HTMLButtonElement;
-	$newServerUrl: HTMLInputElement;
-	constructor(props: NewServerFormProps) {
-		super();
-		this.props = props;
-	}
-
-	template(): string {
-		return `
-			<div class="server-input-container">
-				<div class="title">${t.__('Organization URL')}</div>
-				<div class="add-server-info-row">
-					<input class="setting-input-value" autofocus placeholder="your-organization.zulipchat.com or zulip.your-organization.com"/>
-				</div>
-				<div class="server-center">
-					<button id="connect">${t.__('Connect')}</button>
-				</div>
-				<div class="server-center">
-					<div class="divider">
-						<hr class="left"/>${t.__('OR')}<hr class="right" />
-					</div>
-				</div>
-				<div class="server-center">
-					<button id="open-create-org-link">${t.__('Create a new organization')}</button>
-				</div>
-				<div class="server-center">
-					<div class="server-network-option">
-						<span id="open-network-settings">${t.__('Network and Proxy Settings')}</span>
-						<i class="material-icons open-network-button">open_in_new</i>
-					</div>
-				</div>
-			</div>
-		`;
-	}
-
-	init(): void {
-		this.initForm();
-		this.initActions();
-	}
-
-	initForm(): void {
-		this.$newServerForm = this.generateNodeFromTemplate(this.template());
-		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;
-	}
-
-	async submitFormHandler(): Promise<void> {
-		this.$saveServerButton.innerHTML = 'Connecting...';
-		let serverConf;
-		try {
-			serverConf = await DomainUtil.checkDomain(this.$newServerUrl.value);
-		} catch (errorMessage) {
-			this.$saveServerButton.innerHTML = 'Connect';
-			alert(errorMessage);
-			return;
-		}
-		await DomainUtil.addDomain(serverConf);
-		this.props.onChange();
-	}
-
-	openCreateNewOrgExternalLink(): void {
-		const link = 'https://zulipchat.com/new/';
-		const externalCreateNewOrgElement = document.querySelector('#open-create-org-link');
-		externalCreateNewOrgElement.addEventListener('click', () => {
-			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.submitFormHandler();
-		});
-		this.$newServerUrl.addEventListener('keypress', event => {
-			if (event.key === 'Enter') {
-				this.submitFormHandler();
-			}
-		});
-		// open create new org link in default browser
-		this.openCreateNewOrgExternalLink();
-		this.networkSettingsLink();
-	}
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

app/renderer/js/preload.js

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

app/renderer/js/preload.ts

@@ -1,122 +0,0 @@
-import { contextBridge, ipcRenderer, webFrame } from 'electron';
-import fs from 'fs';
-import * as SetupSpellChecker from './spellchecker';
-
-import isDev from 'electron-is-dev';
-
-import * as NetworkError from './pages/network';
-
-// eslint-disable-next-line import/no-unassigned-import
-import './notification';
-
-// Prevent drag and drop event in main process which prevents remote code executaion
-// eslint-disable-next-line import/no-unassigned-import
-import './shared/preventdrag';
-
-import electron_bridge from './electron-bridge';
-contextBridge.exposeInMainWorld('raw_electron_bridge', electron_bridge);
-
-ipcRenderer.on('logout', () => {
-	// Create the menu for the below
-	const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
-	dropdown.click();
-
-	const nodes: NodeListOf<HTMLElement> = document.querySelectorAll('.dropdown-menu li:last-child a');
-	nodes[nodes.length - 1].click();
-});
-
-ipcRenderer.on('shortcut', () => {
-	// Create the menu for the below
-	const node: HTMLElement = document.querySelector('a[data-overlay-trigger=keyboard-shortcuts]');
-	// Additional check
-	if (node.textContent.trim().toLowerCase() === 'keyboard shortcuts (?)') {
-		node.click();
-	} else {
-		// Atleast click the dropdown
-		const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
-		dropdown.click();
-	}
-});
-
-ipcRenderer.on('show-notification-settings', () => {
-	// Create the menu for the below
-	const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
-	dropdown.click();
-
-	const nodes: NodeListOf<HTMLElement> = document.querySelectorAll('.dropdown-menu li a');
-	nodes[2].click();
-
-	const notificationItem: NodeListOf<HTMLElement> = document.querySelectorAll('.normal-settings-list li div');
-
-	// wait until the notification dom element shows up
-	setTimeout(() => {
-		notificationItem[2].click();
-	}, 100);
-});
-
-electron_bridge.once('zulip-loaded', ({ serverLanguage }) => {
-	// Get the default language of the server
-	if (serverLanguage) {
-		// Init spellchecker
-		SetupSpellChecker.init(serverLanguage);
-	}
-	// 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');
-		});
-	}
-});
-
-// Clean up spellchecker events after you navigate away from this page;
-// otherwise, you may experience errors
-window.addEventListener('beforeunload', (): void => {
-	SetupSpellChecker.unsubscribeSpellChecker();
-});
-
-window.addEventListener('load', (event: any): void => {
-	if (!event.target.URL.includes('app/renderer/network.html')) {
-		return;
-	}
-	const $reconnectButton = document.querySelector('#reconnect');
-	const $settingsButton = document.querySelector('#settings');
-	NetworkError.init($reconnectButton, $settingsButton);
-});
-
-// electron's globalShortcut can cause unexpected results
-// so adding the reload shortcut in the old-school way
-// Zoom from numpad keys is not supported by electron, so adding it through listeners.
-document.addEventListener('keydown', event => {
-	const cmdOrCtrl = event.ctrlKey || event.metaKey;
-	if (event.code === 'F5') {
-		ipcRenderer.send('forward-message', 'hard-reload');
-	} else if (cmdOrCtrl && (event.code === 'NumpadAdd' || event.code === 'Equal')) {
-		ipcRenderer.send('forward-message', 'zoomIn');
-	} else if (cmdOrCtrl && event.code === 'NumpadSubtract') {
-		ipcRenderer.send('forward-message', 'zoomOut');
-	} else if (cmdOrCtrl && event.code === 'Numpad0') {
-		ipcRenderer.send('forward-message', 'zoomActualSize');
-	}
-});
-
-// 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;
-});
-
-webFrame.executeJavaScript(
-	fs.readFileSync(require.resolve('./injected'), 'utf8')
-);

app/renderer/js/shared/preventdrag.js

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

app/renderer/js/spellchecker.js

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

app/renderer/js/spellchecker.ts

@@ -1,59 +0,0 @@
-import type { Subject } from 'rxjs';
-import { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } from 'electron-spellchecker';
-
-import * as ConfigUtil from './utils/config-util';
-import Logger from './utils/logger-util';
-
-declare module 'electron-spellchecker' {
-	interface SpellCheckHandler {
-		currentSpellcheckerChanged: Subject<true>;
-		currentSpellcheckerLanguage: string;
-	}
-}
-
-const logger = new Logger({
-	file: 'errors.log',
-	timestamp: true
-});
-
-let spellCheckHandler: SpellCheckHandler;
-let contextMenuListener: ContextMenuListener;
-
-export function init(serverLanguage: string): void {
-	if (ConfigUtil.getConfigItem('enableSpellchecker')) {
-		enableSpellChecker();
-	}
-	enableContextMenu(serverLanguage);
-}
-
-function enableSpellChecker(): void {
-	try {
-		spellCheckHandler = new SpellCheckHandler();
-	} catch (err) {
-		logger.error(err);
-	}
-}
-
-function enableContextMenu(serverLanguage: string): void {
-	if (spellCheckHandler) {
-		spellCheckHandler.attachToInput();
-		spellCheckHandler.switchLanguage(serverLanguage);
-		spellCheckHandler.currentSpellcheckerChanged.subscribe(() => {
-			spellCheckHandler.switchLanguage(spellCheckHandler.currentSpellcheckerLanguage);
-		});
-	}
-
-	const contextMenuBuilder = new ContextMenuBuilder(spellCheckHandler);
-	contextMenuListener = new ContextMenuListener(info => {
-		contextMenuBuilder.showPopupMenu(info);
-	});
-}
-
-export function unsubscribeSpellChecker(): void {
-	if (spellCheckHandler) {
-		spellCheckHandler.unsubscribe();
-	}
-	if (contextMenuListener) {
-		contextMenuListener.unsubscribe();
-	}
-}

app/renderer/js/tray.js

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

app/renderer/js/tray.ts

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

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

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

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

@@ -1,80 +0,0 @@
-import { remote } from 'electron';
-import { JsonDB } from 'node-json-db';
-import { initSetUp } from './default-util';
-
-import fs from 'fs';
-import path from 'path';
-import Logger from './logger-util';
-
-const { app, dialog } = remote;
-
-initSetUp();
-
-const logger = new Logger({
-	file: 'certificate-util.log',
-	timestamp: true
-});
-
-const certificatesDir = `${app.getPath('userData')}/certificates`;
-
-let db: JsonDB;
-
-reloadDB();
-
-export function getCertificate(server: string, defaultValue: any = null): any {
-	reloadDB();
-	const value = db.getData('/')[server];
-	if (value === undefined) {
-		return defaultValue;
-	} else {
-		return value;
-	}
-}
-
-// Function to copy the certificate to userData folder
-export function copyCertificate(_server: string, location: string, fileName: string): boolean {
-	let copied = false;
-	const filePath = `${certificatesDir}/${fileName}`;
-	try {
-		fs.copyFileSync(location, filePath);
-		copied = true;
-	} catch (err) {
-		dialog.showErrorBox(
-			'Error saving certificate',
-			'We encountered error while saving the certificate.'
-		);
-		logger.error('Error while copying the certificate to certificates folder.');
-		logger.error(err);
-	}
-	return copied;
-}
-
-export function setCertificate(server: string, fileName: string): void {
-	const filePath = `${fileName}`;
-	db.push(`/${server}`, filePath, true);
-	reloadDB();
-}
-
-export function removeCertificate(server: string): void {
-	db.delete(`/${server}`);
-	reloadDB();
-}
-
-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) {
-		if (fs.existsSync(settingsJsonPath)) {
-			fs.unlinkSync(settingsJsonPath);
-			dialog.showErrorBox(
-				'Error saving settings',
-				'We encountered error while saving the certificate.'
-			);
-			logger.error('Error while JSON parsing certificates.json: ');
-			logger.error(err);
-		}
-	}
-	db = new JsonDB(settingsJsonPath, true, true);
-}

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

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

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

@@ -1,8 +0,0 @@
-// unescape already encoded/escaped strings
-export function decodeString(stringInput: string): string {
-	const parser = new DOMParser();
-	const dom = parser.parseFromString(
-		'<!doctype html><body>' + stringInput,
-		'text/html');
-	return dom.body.textContent;
-}

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

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

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

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

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

@@ -1,19 +1,18 @@
-import electron from 'electron';
-import fs from 'fs';
+const fs = require('fs');
 
-let app: Electron.App = null;
+let app = null;
 let setupCompleted = false;
 if (process.type === 'renderer') {
-	app = electron.remote.app;
+	app = require('electron').remote.app;
 } else {
-	app = electron.app;
+	app = require('electron').app;
 }
 
 const zulipDir = app.getPath('userData');
 const logDir = `${zulipDir}/Logs/`;
 const certificatesDir = `${zulipDir}/certificates/`;
 const configDir = `${zulipDir}/config/`;
-export const initSetUp = (): void => {
+const initSetUp = () => {
 	// if it is the first time the app is running
 	// create zulip dir in userData folder to
 	// avoid errors
@@ -42,19 +41,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 => {
@@ -73,3 +72,7 @@ export const initSetUp = (): void => {
 		setupCompleted = true;
 	}
 };
+
+module.exports = {
+	initSetUp
+};

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

@@ -1,28 +1,17 @@
-import * as ConfigUtil from './config-util';
+'use strict';
 
-// TODO: TypeScript - add to Setting interface
-// the list of settings since we have fixed amount of them
-// We want to do this by creating a new module that exports
-// this interface
-interface Setting {
-	[key: string]: boolean;
-}
+const ConfigUtil = require(__dirname + '/config-util.js');
 
-interface Toggle {
-	dnd: boolean;
-	newSettings: Setting;
-}
-
-export function toggle(): Toggle {
+function toggle() {
 	const dnd = !ConfigUtil.getConfigItem('dnd', false);
 	const dndSettingList = ['showNotification', 'silent'];
 	if (process.platform === 'win32') {
 		dndSettingList.push('flashTaskbarOnMessage');
 	}
 
-	let newSettings: Setting;
+	let newSettings;
 	if (dnd) {
-		const oldSettings: Setting = {};
+		const oldSettings = {};
 		newSettings = {};
 
 		// Iterate through the dndSettingList.
@@ -46,3 +35,7 @@ export function toggle(): Toggle {
 	ConfigUtil.setConfigItem('dnd', dnd);
 	return {dnd, newSettings};
 }
+
+module.exports = {
+	toggle
+};

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

@@ -0,0 +1,312 @@
+'use strict';
+
+const { app, dialog } = require('electron').remote;
+const fs = require('fs');
+const path = require('path');
+const JsonDB = require('node-json-db');
+const request = require('request');
+const escape = require('escape-html');
+
+const Logger = require('./logger-util');
+
+const RequestUtil = require(__dirname + '/../utils/request-util.js');
+const Messages = require(__dirname + '/../../../resources/messages.js');
+
+const logger = new Logger({
+	file: `domain-util.log`,
+	timestamp: true
+});
+
+let instance = null;
+
+const defaultIconUrl = '../renderer/img/icon.png';
+
+class DomainUtil {
+	constructor() {
+		if (instance) {
+			return instance;
+		} else {
+			instance = this;
+		}
+
+		this.reloadDB();
+		// Migrate from old schema
+		if (this.db.getData('/').domain) {
+			this.addDomain({
+				alias: 'Zulip',
+				url: this.db.getData('/domain')
+			});
+			this.db.delete('/domain');
+		}
+
+		return instance;
+	}
+
+	getDomains() {
+		this.reloadDB();
+		if (this.db.getData('/').domains === undefined) {
+			return [];
+		} else {
+			return this.db.getData('/domains');
+		}
+	}
+
+	getDomain(index) {
+		this.reloadDB();
+		return this.db.getData(`/domains[${index}]`);
+	}
+
+	updateDomain(index, server) {
+		this.reloadDB();
+		this.db.push(`/domains[${index}]`, server, true);
+	}
+
+	addDomain(server) {
+		const ignoreCerts = server.ignoreCerts;
+		return new Promise(resolve => {
+			if (server.icon) {
+				this.saveServerIcon(server, ignoreCerts).then(localIconUrl => {
+					server.icon = localIconUrl;
+					this.db.push('/domains[]', server, true);
+					this.reloadDB();
+					resolve();
+				});
+			} else {
+				server.icon = defaultIconUrl;
+				this.db.push('/domains[]', server, true);
+				this.reloadDB();
+				resolve();
+			}
+		});
+	}
+
+	removeDomains() {
+		this.db.delete('/domains');
+		this.reloadDB();
+	}
+
+	removeDomain(index) {
+		this.db.delete(`/domains[${index}]`);
+		this.reloadDB();
+	}
+
+	// Check if domain is already added
+	duplicateDomain(domain) {
+		domain = this.formatUrl(domain);
+		const servers = this.getDomains();
+		for (const i in servers) {
+			if (servers[i].url === domain) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	async checkCertError(domain, serverConf, error, silent) {
+		if (silent) {
+			// 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));
+			const certErrorMessage = Messages.certErrorMessage(domain, error);
+			const certErrorDetail = Messages.certErrorDetail();
+
+			const response = await dialog.showMessageBox({
+				type: 'warning',
+				buttons: ['Yes', 'No'],
+				defaultId: 1,
+				message: certErrorMessage,
+				detail: certErrorDetail
+			});
+			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 (err) {
+					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
+	// other server details when user chooses to ignore certificate warnings
+	async checkDomain(domain, ignoreCerts = false, silent = false) {
+		if (!silent && this.duplicateDomain(domain)) {
+			// Do not check duplicate in silent mode
+			throw new Error('This server has been added.');
+		}
+
+		domain = this.formatUrl(domain);
+
+		const serverConf = {
+			icon: defaultIconUrl,
+			url: domain,
+			alias: domain,
+			ignoreCerts
+		};
+
+		try {
+			return await this.getServerSettings(domain, serverConf.ignoreCerts);
+		} catch (err) {
+			// If the domain contains following strings we just bypass the server
+			const whitelistDomains = [
+				'zulipdev.org'
+			];
+
+			// make sure that error is an error or string not undefined
+			// so validation does not throw error.
+			const error = err || '';
+
+			const certsError = error.toString().includes('certificate');
+			if (domain.indexOf(whitelistDomains) >= 0 || certsError) {
+				try {
+					return await this.checkCertError(domain, serverConf, error, silent);
+				} catch (err) {
+					throw err;
+				}
+			} else {
+				throw Messages.invalidZulipServerError(domain);
+			}
+		}
+	}
+
+	getServerSettings(domain, ignoreCerts = false) {
+		const serverSettingsOptions = {
+			url: domain + '/api/v1/server_settings',
+			...RequestUtil.requestOptions(domain, ignoreCerts)
+		};
+
+		return new Promise((resolve, reject) => {
+			request(serverSettingsOptions, (error, response) => {
+				if (!error && response.statusCode === 200) {
+					const data = JSON.parse(response.body);
+					if (data.hasOwnProperty('realm_icon') && data.realm_icon) {
+						resolve({
+							// Some Zulip Servers use absolute URL for server icon whereas others use relative URL
+							// Following check handles both the cases
+							icon: data.realm_icon.startsWith('/') ? data.realm_uri + data.realm_icon : data.realm_icon,
+							url: data.realm_uri,
+							alias: escape(data.realm_name),
+							ignoreCerts
+						});
+					} else {
+						reject(Messages.noOrgsError(domain));
+					}
+				} else {
+					reject(response);
+				}
+			});
+		});
+	}
+
+	saveServerIcon(server, ignoreCerts = false) {
+		const url = server.icon;
+		const domain = server.url;
+
+		const serverIconOptions = {
+			url,
+			...RequestUtil.requestOptions(domain, ignoreCerts)
+		};
+
+		// The save will always succeed. If url is invalid, downgrade to default icon.
+		return new Promise(resolve => {
+			const filePath = this.generateFilePath(url);
+			const file = fs.createWriteStream(filePath);
+			try {
+				request(serverIconOptions).on('response', response => {
+					response.on('error', err => {
+						logger.log('Could not get server icon.');
+						logger.log(err);
+						logger.reportSentry(err);
+						resolve(defaultIconUrl);
+					});
+					response.pipe(file).on('finish', () => {
+						resolve(filePath);
+					});
+				}).on('error', err => {
+					logger.log('Could not get server icon.');
+					logger.log(err);
+					logger.reportSentry(err);
+					resolve(defaultIconUrl);
+				});
+			} catch (err) {
+				logger.log('Could not get server icon.');
+				logger.log(err);
+				logger.reportSentry(err);
+				resolve(defaultIconUrl);
+			}
+		});
+	}
+
+	updateSavedServer(url, index) {
+		// Does not promise successful update
+		const ignoreCerts = this.getDomain(index).ignoreCerts;
+		this.checkDomain(url, ignoreCerts, true).then(newServerConf => {
+			this.saveServerIcon(newServerConf, ignoreCerts).then(localIconUrl => {
+				newServerConf.icon = localIconUrl;
+				this.updateDomain(index, newServerConf);
+				this.reloadDB();
+			});
+		});
+	}
+
+	reloadDB() {
+		const domainJsonPath = path.join(app.getPath('userData'), 'config/domain.json');
+		try {
+			const file = fs.readFileSync(domainJsonPath, 'utf8');
+			JSON.parse(file);
+		} catch (err) {
+			if (fs.existsSync(domainJsonPath)) {
+				fs.unlinkSync(domainJsonPath);
+				dialog.showErrorBox(
+					'Error saving new organization',
+					'There seems to be error while saving new organization, ' +
+					'you may have to re-add your previous organizations back.'
+				);
+				logger.error('Error while JSON parsing domain.json: ');
+				logger.error(err);
+				logger.reportSentry(err);
+			}
+		}
+		this.db = new JsonDB(domainJsonPath, true, true);
+	}
+
+	generateFilePath(url) {
+		const dir = `${app.getPath('userData')}/server-icons`;
+		const extension = path.extname(url).split('?')[0];
+
+		let hash = 5381;
+		let len = url.length;
+
+		while (len) {
+			hash = (hash * 33) ^ url.charCodeAt(--len);
+		}
+
+		// Create 'server-icons' directory if not existed
+		if (!fs.existsSync(dir)) {
+			fs.mkdirSync(dir);
+		}
+
+		return `${dir}/${hash >>> 0}${extension}`;
+	}
+
+	formatUrl(domain) {
+		const hasPrefix = (domain.indexOf('http') === 0);
+		if (hasPrefix) {
+			return domain;
+		} else {
+			return (domain.indexOf('localhost:') >= 0) ? `http://${domain}` : `https://${domain}`;
+		}
+	}
+}
+
+module.exports = new DomainUtil();

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

@@ -1,309 +0,0 @@
-import { JsonDB } from 'node-json-db';
-
-import escape from 'escape-html';
-import request from 'request';
-import fs from 'fs';
-import path from 'path';
-import Logger from './logger-util';
-import { remote } from 'electron';
-
-import * as RequestUtil from './request-util';
-import * as EnterpriseUtil from './enterprise-util';
-import * as Messages from '../../../resources/messages';
-
-const { app, dialog } = remote;
-
-export interface ServerConf {
-	url: string;
-	alias?: string;
-	icon?: string;
-	ignoreCerts?: boolean;
-}
-
-const logger = new Logger({
-	file: 'domain-util.log',
-	timestamp: true
-});
-
-const defaultIconUrl = '../renderer/img/icon.png';
-
-export let db: JsonDB;
-
-reloadDB();
-// Migrate from old schema
-if (db.getData('/').domain) {
-	addDomain({
-		alias: 'Zulip',
-		url: db.getData('/domain')
-	});
-	db.delete('/domain');
-}
-
-export function getDomains(): ServerConf[] {
-	reloadDB();
-	if (db.getData('/').domains === undefined) {
-		return [];
-	} else {
-		return db.getData('/domains');
-	}
-}
-
-export function getDomain(index: number): ServerConf {
-	reloadDB();
-	return db.getData(`/domains[${index}]`);
-}
-
-export function shouldIgnoreCerts(url: string): boolean {
-	const domains = getDomains();
-	for (const domain of domains) {
-		if (domain.url === url) {
-			return domain.ignoreCerts;
-		}
-	}
-	return null;
-}
-
-function updateDomain(index: number, server: ServerConf): void {
-	reloadDB();
-	db.push(`/domains[${index}]`, server, true);
-}
-
-export async function addDomain(server: ServerConf): Promise<void> {
-	const { ignoreCerts } = server;
-	if (server.icon) {
-		const localIconUrl = await saveServerIcon(server, ignoreCerts);
-		server.icon = localIconUrl;
-		db.push('/domains[]', server, true);
-		reloadDB();
-	} else {
-		server.icon = defaultIconUrl;
-		db.push('/domains[]', server, true);
-		reloadDB();
-	}
-}
-
-export function removeDomains(): void {
-	db.delete('/domains');
-	reloadDB();
-}
-
-export function removeDomain(index: number): boolean {
-	if (EnterpriseUtil.isPresetOrg(getDomain(index).url)) {
-		return false;
-	}
-	db.delete(`/domains[${index}]`);
-	reloadDB();
-	return true;
-}
-
-// Check if domain is already added
-export function duplicateDomain(domain: string): boolean {
-	domain = formatUrl(domain);
-	return getDomains().some(server => server.url === domain);
-}
-
-async function checkCertError(domain: string, serverConf: ServerConf, error: string, silent: boolean): Promise<ServerConf> {
-	if (silent) {
-		// 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());
-		const certErrorMessage = Messages.certErrorMessage(domain, error);
-		const certErrorDetail = Messages.certErrorDetail();
-
-		const { response } = await dialog.showMessageBox({
-			type: 'warning',
-			buttons: ['Yes', 'No'],
-			defaultId: 1,
-			message: certErrorMessage,
-			detail: certErrorDetail
-		});
-		if (response === 0) {
-			// set ignoreCerts parameter to true in case user responds with yes
-			serverConf.ignoreCerts = true;
-			try {
-				return await 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
-// other server details when user chooses to ignore certificate warnings
-export async function checkDomain(domain: string, ignoreCerts = false, silent = false): Promise<ServerConf> {
-	if (!silent && duplicateDomain(domain)) {
-		// Do not check duplicate in silent mode
-		throw new Error('This server has been added.');
-	}
-
-	domain = formatUrl(domain);
-
-	const serverConf = {
-		icon: defaultIconUrl,
-		url: domain,
-		alias: domain,
-		ignoreCerts
-	};
-
-	try {
-		return await getServerSettings(domain, serverConf.ignoreCerts);
-	} catch (err) {
-		// Make sure that error is an error or string not undefined
-		// so validation does not throw error.
-		const error = err || '';
-
-		const certsError = error.toString().includes('certificate');
-		if (certsError) {
-			const result = await checkCertError(domain, serverConf, error, silent);
-			return result;
-		} else {
-			throw new Error(Messages.invalidZulipServerError(domain));
-		}
-	}
-}
-
-async function getServerSettings(domain: string, ignoreCerts = false): Promise<ServerConf> {
-	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 (Object.prototype.hasOwnProperty.call(data, '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);
-			}
-		});
-	});
-}
-
-export async function saveServerIcon(server: ServerConf, ignoreCerts = false): Promise<string> {
-	const url = server.icon;
-	const domain = server.url;
-
-	const serverIconOptions = {
-		url,
-		...RequestUtil.requestOptions(domain, ignoreCerts)
-	};
-
-	// The save will always succeed. If url is invalid, downgrade to default icon.
-	return new Promise(resolve => {
-		const filePath = 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);
-		}
-	});
-}
-
-export async function updateSavedServer(url: string, index: number): Promise<void> {
-	// Does not promise successful update
-	const oldIcon = getDomain(index).icon;
-	const { ignoreCerts } = getDomain(index);
-	try {
-		const newServerConf = await checkDomain(url, ignoreCerts, true);
-		const localIconUrl = await saveServerIcon(newServerConf, ignoreCerts);
-		if (!oldIcon || localIconUrl !== '../renderer/img/icon.png') {
-			newServerConf.icon = localIconUrl;
-			updateDomain(index, newServerConf);
-			reloadDB();
-		}
-	} catch (err) {
-		logger.log('Could not update server icon.');
-		logger.log(err);
-		logger.reportSentry(err);
-	}
-}
-
-export 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) {
-		if (fs.existsSync(domainJsonPath)) {
-			fs.unlinkSync(domainJsonPath);
-			dialog.showErrorBox(
-				'Error saving new organization',
-				'There seems to be error while saving new organization, ' +
-				'you may have to re-add your previous organizations back.'
-			);
-			logger.error('Error while JSON parsing domain.json: ');
-			logger.error(err);
-			logger.reportSentry(err);
-		}
-	}
-	db = new JsonDB(domainJsonPath, true, true);
-}
-
-function 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 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,68 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-
-import Logger from './logger-util';
-
-const logger = new Logger({
-	file: 'enterprise-util.log',
-	timestamp: true
-});
-
-// todo: replace enterpriseSettings type with an interface once settings are final
-export let enterpriseSettings: any;
-export let configFile: boolean;
-
-reloadDB();
-
-function reloadDB(): void {
-	let enterpriseFile = '/etc/zulip-desktop-config/global_config.json';
-	if (process.platform === 'win32') {
-		enterpriseFile = 'C:\\Program Files\\Zulip-Desktop-Config\\global_config.json';
-	}
-
-	enterpriseFile = path.resolve(enterpriseFile);
-	if (fs.existsSync(enterpriseFile)) {
-		configFile = true;
-		try {
-			const file = fs.readFileSync(enterpriseFile, 'utf8');
-			enterpriseSettings = JSON.parse(file);
-		} catch (err) {
-			logger.log('Error while JSON parsing global_config.json: ');
-			logger.log(err);
-		}
-	} else {
-		configFile = false;
-	}
-}
-
-export function getConfigItem(key: string, defaultValue?: any): any {
-	reloadDB();
-	if (!configFile) {
-		return defaultValue;
-	}
-	if (defaultValue === undefined) {
-		defaultValue = null;
-	}
-	return configItemExists(key) ? enterpriseSettings[key] : defaultValue;
-}
-
-export function configItemExists(key: string): boolean {
-	reloadDB();
-	if (!configFile) {
-		return false;
-	}
-	return (enterpriseSettings[key] !== undefined);
-}
-
-export function isPresetOrg(url: string): boolean {
-	if (!configFile || !configItemExists('presetOrganizations')) {
-		return false;
-	}
-	const presetOrgs = enterpriseSettings.presetOrganizations;
-	for (const org of presetOrgs) {
-		if (url.includes(org)) {
-			return true;
-		}
-	}
-	return false;
-}

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

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

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

@@ -1,45 +0,0 @@
-import { shell } from 'electron';
-import escape from 'escape-html';
-import fs from 'fs';
-import os from 'os';
-import path from 'path';
-
-export function isUploadsUrl(server: string, url: URL): boolean {
-	return url.origin === server && url.pathname.startsWith('/user_uploads/');
-}
-
-export function openBrowser(url: URL): void {
-	if (['http:', 'https:', 'mailto:'].includes(url.protocol)) {
-		shell.openExternal(url.href);
-	} else {
-		// For security, indirect links to non-whitelisted protocols
-		// through a real web browser via a local HTML file.
-		const dir = fs.mkdtempSync(
-			path.join(os.tmpdir(), 'zulip-redirect-')
-		);
-		const file = path.join(dir, 'redirect.html');
-		fs.writeFileSync(file, `\
-<!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>
-    </head>
-    <body>
-        <p>Opening <a href="${escape(url.href)}">${escape(url.href)}</a>…</p>
-    </body>
-</html>
-`);
-		shell.openItem(file);
-		setTimeout(() => {
-			fs.unlinkSync(file);
-			fs.rmdirSync(dir);
-		}, 15000);
-	}
-}

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

@@ -0,0 +1,74 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const process = require('process');
+const remote =
+	process.type === 'renderer' ? require('electron').remote : require('electron');
+const JsonDB = require('node-json-db');
+const Logger = require('./logger-util');
+
+const logger = new Logger({
+	file: 'linux-update-util.log',
+	timestamp: true
+});
+
+/* To make the util runnable in both main and renderer process */
+const { dialog, app } = remote;
+
+let instance = null;
+
+class LinuxUpdateUtil {
+	constructor() {
+		if (instance) {
+			return instance;
+		} else {
+			instance = this;
+		}
+
+		this.reloadDB();
+		return instance;
+	}
+
+	getUpdateItem(key, defaultValue = null) {
+		this.reloadDB();
+		const value = this.db.getData('/')[key];
+		if (value === undefined) {
+			this.setUpdateItem(key, defaultValue);
+			return defaultValue;
+		} else {
+			return value;
+		}
+	}
+
+	setUpdateItem(key, value) {
+		this.db.push(`/${key}`, value, true);
+		this.reloadDB();
+	}
+
+	removeUpdateItem(key) {
+		this.db.delete(`/${key}`);
+		this.reloadDB();
+	}
+
+	reloadDB() {
+		const linuxUpdateJsonPath = path.join(app.getPath('userData'), '/config/updates.json');
+		try {
+			const file = fs.readFileSync(linuxUpdateJsonPath, 'utf8');
+			JSON.parse(file);
+		} catch (err) {
+			if (fs.existsSync(linuxUpdateJsonPath)) {
+				fs.unlinkSync(linuxUpdateJsonPath);
+				dialog.showErrorBox(
+					'Error saving update notifications.',
+					'We encountered an error while saving the update notifications.'
+				);
+				logger.error('Error while JSON parsing updates.json: ');
+				logger.error(err);
+			}
+		}
+		this.db = new JsonDB(linuxUpdateJsonPath, true, true);
+	}
+}
+
+module.exports = new LinuxUpdateUtil();

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

@@ -1,61 +0,0 @@
-import { JsonDB } from 'node-json-db';
-
-import fs from 'fs';
-import path from 'path';
-import electron from 'electron';
-import Logger from './logger-util';
-
-const remote =
-	process.type === 'renderer' ? electron.remote : electron;
-
-const logger = new Logger({
-	file: 'linux-update-util.log',
-	timestamp: true
-});
-
-/* To make the util runnable in both main and renderer process */
-const { dialog, app } = remote;
-
-let db: JsonDB;
-
-reloadDB();
-
-export function getUpdateItem(key: string, defaultValue: any = null): any {
-	reloadDB();
-	const value = db.getData('/')[key];
-	if (value === undefined) {
-		setUpdateItem(key, defaultValue);
-		return defaultValue;
-	} else {
-		return value;
-	}
-}
-
-export function setUpdateItem(key: string, value: any): void {
-	db.push(`/${key}`, value, true);
-	reloadDB();
-}
-
-export function removeUpdateItem(key: string): void {
-	db.delete(`/${key}`);
-	reloadDB();
-}
-
-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) {
-		if (fs.existsSync(linuxUpdateJsonPath)) {
-			fs.unlinkSync(linuxUpdateJsonPath);
-			dialog.showErrorBox(
-				'Error saving update notifications.',
-				'We encountered an error while saving the update notifications.'
-			);
-			logger.error('Error while JSON parsing updates.json: ');
-			logger.error(err);
-		}
-	}
-	db = new JsonDB(linuxUpdateJsonPath, true, true);
-}

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

@@ -1,63 +1,43 @@
-import { Console as NodeConsole } from 'console'; // eslint-disable-line node/prefer-global/console
-import { initSetUp } from './default-util';
-import { sentryInit, captureException } from './sentry-util';
-
-import fs from 'fs';
-import os from 'os';
-import isDev from 'electron-is-dev';
-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?: true | (() => string);
-	file?: string;
-	level?: boolean;
-	logInDevMode?: boolean;
-}
+const NodeConsole = require('console').Console;
+const fs = require('fs');
+const os = require('os');
+const isDev = require('electron-is-dev');
+const { initSetUp } = require('./default-util');
+const { sentryInit, captureException } = require('./sentry-util');
 
 initSetUp();
 
-let app: Electron.App = null;
+let app = null;
 let reportErrors = true;
 if (process.type === 'renderer') {
-	app = electron.remote.app;
+	app = require('electron').remote.app;
 
 	// 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 } = require('electron');
 	ipcRenderer.send('error-reporting');
-	ipcRenderer.on('error-reporting-val', (_event: any, errorReporting: boolean) => {
+	ipcRenderer.on('error-reporting-val', (event, errorReporting) => {
 		reportErrors = errorReporting;
 		if (reportErrors) {
 			sentryInit();
 		}
 	});
 } else {
-	app = electron.app;
+	app = require('electron').app;
 }
 
-const browserConsole: PatchedConsole = console;
+const browserConsole = console;
 const logDir = `${app.getPath('userData')}/Logs`;
 
-export default class Logger {
-	nodeConsole: PatchedConsole;
-	timestamp?: () => string;
-	level: boolean;
-	logInDevMode: boolean;
-	[key: string]: any;
-
-	constructor(options: LoggerOptions = {}) {
+class Logger {
+	constructor(opts = {}) {
 		let {
 			timestamp = true,
 			file = 'console.log',
 			level = true,
 			logInDevMode = false
-		} = options;
+		} = opts;
 
 		file = `${logDir}/${file}`;
 		if (timestamp === true) {
@@ -81,7 +61,7 @@ export default class Logger {
 		this.setUpConsole();
 	}
 
-	_log(type: string, ...args: any[]): void {
+	_log(type, ...args) {
 		const {
 			nodeConsole, timestamp, level, logInDevMode
 		} = this;
@@ -92,12 +72,12 @@ export default class Logger {
 			case typeof timestamp === 'function':
 				args.unshift(timestamp() + ' |\t');
 
-			case (level):
+			case (level !== false):
 				args.unshift(type.toUpperCase() + ' |');
 
 			case isDev || logInDevMode:
 				nodeConsoleLog = nodeConsole[type] || nodeConsole.log;
-				nodeConsoleLog.apply(null, args); // eslint-disable-line prefer-spread
+				nodeConsoleLog.apply(null, args);
 
 			default: break;
 		}
@@ -106,20 +86,19 @@ export default class Logger {
 		browserConsole[type].apply(null, args);
 	}
 
-	setUpConsole(): void {
-		for (const type of Object.keys(browserConsole)) {
+	setUpConsole() {
+		for (const type in browserConsole) {
 			this.setupConsoleMethod(type);
 		}
 	}
 
-	setupConsoleMethod(type: string): void {
-		this[type] = (...args: any[]) => {
-			const log = this._log.bind(this, type, ...args);
-			log();
+	setupConsoleMethod(type) {
+		this[type] = (...args) => {
+			this._log(type, ...args);
 		};
 	}
 
-	getTimestamp(): string {
+	getTimestamp() {
 		const date = new Date();
 		const timestamp =
 			`${date.getMonth()}/${date.getDate()} ` +
@@ -127,13 +106,13 @@ export default class Logger {
 		return timestamp;
 	}
 
-	reportSentry(err: string): void {
+	reportSentry(err) {
 		if (reportErrors) {
 			captureException(err);
 		}
 	}
 
-	trimLog(file: string): void{
+	trimLog(file) {
 		fs.readFile(file, 'utf8', (err, data) => {
 			if (err) {
 				throw err;
@@ -151,3 +130,5 @@ export default class Logger {
 		});
 	}
 }
+
+module.exports = Logger;

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

@@ -0,0 +1,15 @@
+// This util function returns the page params if they're present else returns null
+function isPageParams() {
+	let webpageParams = null;
+	try {
+		// eslint-disable-next-line no-undef, camelcase
+		webpageParams = page_params;
+	} catch (err) {
+		webpageParams = null;
+	}
+	return webpageParams;
+}
+
+module.exports = {
+	isPageParams
+};

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

@@ -0,0 +1,130 @@
+'use strict';
+
+const url = require('url');
+const ConfigUtil = require('./config-util.js');
+
+let instance = null;
+
+class ProxyUtil {
+	constructor() {
+		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) {
+		uri = url.parse(uri);
+		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 = {};
+		if (uri.protocol === 'http:') {
+			proxyRules.forEach(proxy => {
+				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 => {
+				if (proxy.includes('https=')) {
+					proxyRule.hostname = proxy.split('https=')[1].trim().split(':')[0];
+					proxyRule.port = proxy.split('https=')[1].trim().split(':')[1];
+				}
+			});
+			return proxyRule;
+		}
+	}
+
+	resolveSystemProxy(mainWindow) {
+		const page = mainWindow.webContents;
+		const ses = page.session;
+		const resolveProxyUrl = 'www.example.com';
+
+		// Check HTTP Proxy
+		const httpProxy = new Promise(resolve => {
+			ses.resolveProxy('http://' + resolveProxyUrl, proxy => {
+				let httpString = '';
+				if (proxy !== 'DIRECT') {
+					// 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);
+			});
+		});
+		// Check HTTPS Proxy
+		const httpsProxy = new Promise(resolve => {
+			ses.resolveProxy('https://' + resolveProxyUrl, proxy => {
+				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
+					// 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);
+			});
+		});
+
+		// Check FTP Proxy
+		const ftpProxy = new Promise(resolve => {
+			ses.resolveProxy('ftp://' + resolveProxyUrl, proxy => {
+				let ftpString = '';
+				if (proxy !== 'DIRECT') {
+					if (proxy.includes('PROXY')) {
+						ftpString += 'ftp=' + proxy.split('PROXY')[1] + ';';
+					}
+				}
+				resolve(ftpString);
+			});
+		});
+
+		// Check SOCKS Proxy
+		const socksProxy = new Promise(resolve => {
+			ses.resolveProxy('socks4://' + resolveProxyUrl, proxy => {
+				let socksString = '';
+				if (proxy !== 'DIRECT') {
+					if (proxy.includes('SOCKS5')) {
+						socksString += 'socks=' + proxy.split('SOCKS5')[1] + ';';
+					} else if (proxy.includes('SOCKS4')) {
+						socksString += 'socks=' + proxy.split('SOCKS4')[1] + ';';
+					} else if (proxy.includes('PROXY')) {
+						socksString += 'socks=' + proxy.split('PROXY')[1] + ';';
+					}
+				}
+				resolve(socksString);
+			});
+		});
+
+		Promise.all([httpProxy, httpsProxy, ftpProxy, socksProxy]).then(values => {
+			let proxyString = '';
+			values.forEach(proxy => {
+				proxyString += proxy;
+			});
+			ConfigUtil.setConfigItem('systemProxyRules', proxyString);
+			const useSystemProxy = ConfigUtil.getConfigItem('useSystemProxy');
+			if (useSystemProxy) {
+				ConfigUtil.setConfigItem('proxyRules', proxyString);
+			}
+		});
+	}
+}
+
+module.exports = new ProxyUtil();

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

@@ -1,118 +0,0 @@
-import * as ConfigUtil from './config-util';
-
-export interface ProxyRule {
-	hostname?: string;
-	port?: number;
-}
-
-// Return proxy to be used for a particular uri, to be used for request
-export function getProxy(_uri: string): ProxyRule | void {
-	let uri;
-	try {
-		uri = new URL(_uri);
-	} catch (err) {
-		return;
-	}
-
-	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
-export async function resolveSystemProxy(mainWindow: Electron.BrowserWindow): Promise<void> {
-	const page = mainWindow.webContents;
-	const ses = page.session;
-	const resolveProxyUrl = 'www.example.com';
-
-	// Check HTTP Proxy
-	const httpProxy = (async () => {
-		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
-			// for all other HTTP or direct url:port both uses PROXY
-			if (proxy.includes('PROXY') || proxy.includes('HTTPS')) {
-				httpString = 'http=' + proxy.split('PROXY')[1] + ';';
-			}
-		}
-		return httpString;
-	})();
-	// Check HTTPS Proxy
-	const httpsProxy = (async () => {
-		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
-			// for all other HTTP or direct url:port both uses PROXY
-			if (proxy.includes('PROXY') || proxy.includes('HTTPS')) {
-				httpsString += 'https=' + proxy.split('PROXY')[1] + ';';
-			}
-		}
-		return httpsString;
-	})();
-
-	// Check FTP Proxy
-	const ftpProxy = (async () => {
-		const proxy = await ses.resolveProxy('ftp://' + resolveProxyUrl);
-		let ftpString = '';
-		if (proxy !== 'DIRECT') {
-			if (proxy.includes('PROXY')) {
-				ftpString += 'ftp=' + proxy.split('PROXY')[1] + ';';
-			}
-		}
-		return ftpString;
-	})();
-
-	// Check SOCKS Proxy
-	const socksProxy = (async () => {
-		const proxy = await ses.resolveProxy('socks4://' + resolveProxyUrl);
-		let socksString = '';
-		if (proxy !== 'DIRECT') {
-			if (proxy.includes('SOCKS5')) {
-				socksString += 'socks=' + proxy.split('SOCKS5')[1] + ';';
-			} else if (proxy.includes('SOCKS4')) {
-				socksString += 'socks=' + proxy.split('SOCKS4')[1] + ';';
-			} else if (proxy.includes('PROXY')) {
-				socksString += 'socks=' + proxy.split('PROXY')[1] + ';';
-			}
-		}
-		return socksString;
-	})();
-
-	const values = await Promise.all([httpProxy, httpsProxy, ftpProxy, socksProxy]);
-	let proxyString = '';
-	values.forEach(proxy => {
-		proxyString += proxy;
-	});
-	ConfigUtil.setConfigItem('systemProxyRules', proxyString);
-	const useSystemProxy = ConfigUtil.getConfigItem('useSystemProxy');
-	if (useSystemProxy) {
-		ConfigUtil.setConfigItem('proxyRules', proxyString);
-	}
-}

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

@@ -0,0 +1,60 @@
+const isOnline = require('is-online');
+const Logger = require('./logger-util');
+
+const logger = new Logger({
+	file: `domain-util.log`,
+	timestamp: true
+});
+
+class ReconnectUtil {
+	constructor(serverManagerView) {
+		this.serverManagerView = serverManagerView;
+		this.alreadyReloaded = false;
+	}
+
+	clearState() {
+		this.alreadyReloaded = false;
+	}
+
+	pollInternetAndReload() {
+		const pollInterval = setInterval(() => {
+			this._checkAndReload()
+				.then(status => {
+					if (status) {
+						this.alreadyReloaded = true;
+						clearInterval(pollInterval);
+					}
+				});
+		}, 1500);
+	}
+
+	_checkAndReload() {
+		return new Promise(resolve => {
+			if (!this.alreadyReloaded) { // eslint-disable-line no-negated-condition
+				isOnline()
+					.then(online => {
+						if (online) {
+							if (!this.alreadyReloaded) {
+								this.serverManagerView.reloadView();
+							}
+							logger.log('You\'re back online.');
+							return resolve(true);
+						}
+
+						logger.log('There is no internet connection, try checking network cables, modem and router.');
+						const errMsgHolder = document.querySelector('#description');
+						if (errMsgHolder) {
+							errMsgHolder.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);
+					});
+			} else {
+				return resolve(true);
+			}
+		});
+	}
+}
+
+module.exports = ReconnectUtil;

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

@@ -1,88 +0,0 @@
-import { ipcRenderer } from 'electron';
-
-import type WebView from '../components/webview';
-import backoff from 'backoff';
-import request from 'request';
-import Logger from './logger-util';
-import * as RequestUtil from './request-util';
-import * as DomainUtil from './domain-util';
-
-const logger = new Logger({
-	file: 'domain-util.log',
-	timestamp: true
-});
-
-export default class ReconnectUtil {
-	webview: WebView;
-	url: string;
-	alreadyReloaded: boolean;
-	fibonacciBackoff: backoff.Backoff;
-
-	constructor(webview: WebView) {
-		this.webview = webview;
-		this.url = webview.props.url;
-		this.alreadyReloaded = false;
-		this.clearState();
-	}
-
-	clearState(): void {
-		this.fibonacciBackoff = backoff.fibonacci({
-			initialDelay: 5000,
-			maxDelay: 300000
-		});
-	}
-
-	async isOnline(): Promise<boolean> {
-		return new Promise(resolve => {
-			try {
-				const ignoreCerts = DomainUtil.shouldIgnoreCerts(this.url);
-				if (ignoreCerts === null) {
-					return;
-				}
-				request(
-					{
-						url: `${this.url}/static/favicon.ico`,
-						...RequestUtil.requestOptions(this.url, ignoreCerts)
-					},
-					(error: Error, response: any) => {
-						const isValidResponse =
-							!error && response.statusCode >= 200 && response.statusCode < 400;
-						resolve(isValidResponse);
-					}
-				);
-			} catch (err) {
-				logger.log(err);
-			}
-		});
-	}
-
-	pollInternetAndReload(): void {
-		this.fibonacciBackoff.backoff();
-		this.fibonacciBackoff.on('ready', async () => {
-			if (await this._checkAndReload()) {
-				this.fibonacciBackoff.reset();
-			} else {
-				this.fibonacciBackoff.backoff();
-			}
-		});
-	}
-
-	async _checkAndReload(): Promise<boolean> {
-		if (this.alreadyReloaded) {
-			return true;
-		}
-		if (await this.isOnline()) {
-			ipcRenderer.send('forward-message', 'reload-viewer');
-			logger.log('You\'re back online.');
-			return true;
-		}
-		logger.log('There is no internet connection, try checking network cables, modem and router.');
-		const errorMessageHolder = document.querySelector('#description');
-		if (errorMessageHolder) {
-			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 false;
-	}
-}

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

@@ -0,0 +1,62 @@
+const fs = require('fs');
+const Logger = require('./logger-util');
+
+const CertificateUtil = require(__dirname + '/certificate-util.js');
+const ProxyUtil = require(__dirname + '/proxy-util.js');
+const ConfigUtil = require(__dirname + '/config-util.js');
+const SystemUtil = require(__dirname + '/../utils/system-util.js');
+
+const logger = new Logger({
+	file: `request-util.log`,
+	timestamp: true
+});
+
+let instance = null;
+
+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, ignoreCerts) {
+		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);
+			} 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) {
+		const hasPrefix = (domain.indexOf('http') === 0);
+		if (hasPrefix) {
+			return domain;
+		} else {
+			return (domain.indexOf('localhost:') >= 0) ? `http://${domain}` : `https://${domain}`;
+		}
+	}
+}
+
+module.exports = new RequestUtil();

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

@@ -1,70 +0,0 @@
-import { remote } from 'electron';
-
-import fs from 'fs';
-import path from 'path';
-import * as ConfigUtil from './config-util';
-import Logger from './logger-util';
-import * as ProxyUtil from './proxy-util';
-import * as CertificateUtil from './certificate-util';
-import * as SystemUtil from './system-util';
-
-const { app } = remote;
-
-const logger = new Logger({
-	file: 'request-util.log',
-	timestamp: true
-});
-
-interface RequestUtilResponse {
-	ca: string;
-	proxy: string | void | ProxyUtil.ProxyRule;
-	ecdhCurve: 'auto';
-	headers: { 'User-Agent': string };
-	rejectUnauthorized: boolean;
-}
-
-// ignoreCerts parameter helps in fetching server icon and
-// other server details when user chooses to ignore certificate warnings
-export function requestOptions(domain: string, ignoreCerts: boolean): RequestUtilResponse {
-	domain = formatUrl(domain);
-	const certificate = CertificateUtil.getCertificate(
-		encodeURIComponent(domain)
-	);
-
-	let certificateFile = null;
-	if (certificate?.includes('/')) {
-		// certificate saved using old app version
-		certificateFile = certificate;
-	} else if (certificate) {
-		certificateFile = path.join(`${app.getPath('userData')}/certificates`, certificate);
-	}
-
-	let certificateLocation = '';
-	if (certificate) {
-		// To handle case where certificate has been moved from the location in certificates.json
-		try {
-			certificateLocation = fs.readFileSync(certificateFile, '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
-	};
-}
-
-function formatUrl(domain: string): string {
-	const hasPrefix = domain.startsWith('http', 0);
-	if (hasPrefix) {
-		return domain;
-	} else {
-		return domain.includes('localhost:') ? `http://${domain}` : `https://${domain}`;
-	}
-}

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

@@ -0,0 +1,20 @@
+const { init, captureException } = require('@sentry/electron');
+const isDev = require('electron-is-dev');
+
+const sentryInit = () => {
+	if (!isDev) {
+		init({
+			dsn: 'SENTRY_DSN',
+			// 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
+		});
+	}
+};
+
+module.exports = {
+	sentryInit,
+	captureException
+};

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

@@ -1,18 +0,0 @@
-import { init } from '@sentry/electron';
-
-import isDev from 'electron-is-dev';
-
-export const sentryInit = (): void => {
-	if (!isDev) {
-		init({
-			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
-		});
-	}
-};
-
-export { captureException } from '@sentry/electron';

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

@@ -0,0 +1,55 @@
+'use strict';
+
+const {app} = require('electron').remote;
+
+const os = require('os');
+
+let instance = null;
+
+class SystemUtil {
+	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;
+	}
+
+	getOS() {
+		if (os.platform() === 'darwin') {
+			return 'Mac';
+		}
+		if (os.platform() === 'linux') {
+			return 'Linux';
+		}
+		if (os.platform() === 'win32' || os.platform() === 'win64') {
+			if (parseFloat(os.release()) < 6.2) {
+				return 'Windows 7';
+			} else {
+				return 'Windows 10';
+			}
+		}
+	}
+
+	setUserAgent(webViewUserAgent) {
+		this.userAgent = 'ZulipElectron/' + app.getVersion() + ' ' + webViewUserAgent;
+	}
+
+	getUserAgent() {
+		return this.userAgent;
+	}
+}
+
+module.exports = new SystemUtil();

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

@@ -1,34 +0,0 @@
-import { ipcRenderer } from 'electron';
-
-import os from 'os';
-
-export const connectivityERR: string[] = [
-	'ERR_INTERNET_DISCONNECTED',
-	'ERR_PROXY_CONNECTION_FAILED',
-	'ERR_CONNECTION_RESET',
-	'ERR_NOT_CONNECTED',
-	'ERR_NAME_NOT_RESOLVED',
-	'ERR_NETWORK_CHANGED'
-];
-
-const userAgent = ipcRenderer.sendSync('fetch-user-agent');
-
-export function getOS(): string {
-	const platform = os.platform();
-	if (platform === 'darwin') {
-		return 'Mac';
-	} else if (platform === 'linux') {
-		return 'Linux';
-	} else if (platform === 'win32') {
-		if (parseFloat(os.release()) < 6.2) {
-			return 'Windows 7';
-		} else {
-			return 'Windows 10';
-		}
-	} else {
-		return '';
-	}
-}
-export function getUserAgent(): string {
-	return userAgent;
-}

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

@@ -1,15 +0,0 @@
-import path from 'path';
-import i18n from 'i18n';
-import * as ConfigUtil from './config-util';
-
-i18n.configure({
-	directory: path.join(__dirname, '../../../translations/')
-});
-
-/* fetches the current appLocale from settings.json */
-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' });
-}

app/renderer/main.html

@@ -32,7 +32,7 @@
                         <i class="material-icons md-48">refresh</i>
                         <span id="reload-tooltip" style="display:none">Reload</span>
                     </div>
-                    <div class="action-button disable" id="loading-action">
+                    <div class="action-button" id="loading-action">
                         <i class="refresh material-icons md-48">loop</i>
                         <span id="loading-tooltip" style="display:none">Loading</span>
                     </div>
@@ -55,11 +55,6 @@
             <send-feedback></send-feedback>
         </div>
     </body>
-    
-    <script>
-        // we don't use src='./js/main' in the script tag because
-        // it messes up require module path resolution
-        require('./js/main');
-    </script>
+    <script src="js/main.js"></script>
     <script>require('./js/shared/preventdrag.js')</script>
 </html>

app/renderer/network.html

@@ -9,18 +9,14 @@
     <body>
         <div id="content">
             <div id="picture"><img src="img/zulip_network.png"></div>
-            <div id="title">We can't connect to this organization</div>
-            <div id="subtitle">This could be because</div>
-            <ul id="description">
-                <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 id="title">Zulip can't connect</div>
+            <div id="description">
+                <div>Your computer seems to be offline.</div>
+                <div>We will keep trying to reconnect, or you can try now.</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

@@ -12,8 +12,6 @@
             <div id="settings-container"></div>
         </div>
     </body>
-    <script>
-        require('./js/pages/preference/preference.js');
-        require('./js/shared/preventdrag.js')
-    </script>
+    <script src="js/pages/preference/preference.js"></script>
+    <script>require('./js/shared/preventdrag.js')</script>
 </html>