Implement alert for unsaved changes

src/_locales/en/messages.json

@@ -525,6 +525,9 @@
 	"settingsChangesReverted": {
 		"message": "Changes reverted successfully."
 	},
+	"settingsConfirmSaveAllChanged": {
+		"message": "Do you want to save all unsaved changes?"
+	},
 	"settingsConfirmRemoveProxyRule": {
 		"message": "Are you sure to remove the selected rule?"
 	},

src/core/definitions.ts

@@ -584,7 +584,7 @@ export enum ThemeType {
 	Dark
 }
 
-export class GeneralOptions implements Cloneable {
+export class GeneralOptions implements Cloneable, Comparable {
 	public static defaultDarkThemeName: string = "themes-cosmo-dark";
 
 	public syncSettings: boolean = false;
@@ -630,12 +630,48 @@ export class GeneralOptions implements Cloneable {
 		this.themesDark = source['themesDark'];
 		this.themesDarkCustomUrl = source['themesDarkCustomUrl'];
 	}
+
+	Equals(other: GeneralOptions): Boolean {
+		if (neq(other.syncSettings, this.syncSettings)) return false;
+		if (neq(other.syncActiveProfile, this.syncActiveProfile)) return false;
+		if (neq(other.syncActiveProxy, this.syncActiveProxy)) return false;
+		if (neq(other.detectRequestFailures, this.detectRequestFailures)) return false;
+		if (neq(other.displayFailedOnBadge, this.displayFailedOnBadge)) return false;
+		if (neq(other.displayAppliedProxyOnBadge, this.displayAppliedProxyOnBadge)) return false;
+		if (neq(other.displayMatchedRuleOnBadge, this.displayMatchedRuleOnBadge)) return false;
+		if (neq(other.refreshTabOnConfigChanges, this.refreshTabOnConfigChanges)) return false;
+		if (neq(other.proxyPerOrigin, this.proxyPerOrigin)) return false;
+		if (neq(other.activeIncognitoProfileId, this.activeIncognitoProfileId)) return false;
+		if (neq(other.enableShortcuts, this.enableShortcuts)) return false;
+		if (neq(other.shortcutNotification, this.shortcutNotification)) return false;
+		if (neq(other.themeType, this.themeType)) return false;
+		if (neq(other.themesLight, this.themesLight)) return false;
+		if (neq(other.themesLightCustomUrl, this.themesLightCustomUrl)) return false;
+		if (neq(other.themesDark, this.themesDark)) return false;
+		if (neq(other.themesDarkCustomUrl, this.themesDarkCustomUrl)) return false;
+
+		function neq(thisVal: any, thatVal: any): boolean {
+			/** Not equal. Treating empty string as null and undefined */
+			if (thisVal === "")
+				thisVal = null;
+			if (thatVal === "")
+				thatVal = null;
+			// null and undefined are treated as same
+			return thisVal != thatVal;
+		}
+
+		return true;
+	}
 }
 
 interface Cloneable {
 	CopyFrom(source: any): void;
 }
 
+interface Comparable {
+	Equals(other: any): Boolean;
+}
+
 class ProxyServerConnectDetails {
 	public order: number;
 	public host: string;

src/ui/code/settingsPage.ts

@@ -43,10 +43,29 @@ export class settingsPage {
 	private static changeTracking = {
 		options: false,
 		smartProfiles: false,
+		newSmartProfile: false,
 		servers: false,
 		activeProxy: false,
 		serverSubscriptions: false,
-		rulesSubscriptions: false
+		rulesSubscriptions: false,
+		isDirty: function () {
+			return this.options
+				|| this.servers
+				|| this.activeProxy
+				|| this.smartProfiles
+				|| this.newSmartProfile
+				|| this.rulesSubscriptions
+				|| this.serverSubscriptions
+		},
+		resetStats: function () {
+			this.options = false;
+			this.servers = false;
+			this.activeProxy = false;
+			this.smartProfiles = false;
+			this.newSmartProfile = false;
+			this.rulesSubscriptions = false;
+			this.serverSubscriptions = false;
+		}
 	};
 
 	public static initialize() {
@@ -204,6 +223,8 @@ export class settingsPage {
 
 		// Debug
 		jq("#btnEnableDiagnostics").click(settingsPage.uiEvents.onClickEnableDiagnostics);
+
+		jq(window).on("beforeunload", settingsPage.uiEvents.onWindowUnload);
 	}
 
 	private static initializeGrids() {
@@ -1253,6 +1274,7 @@ export class settingsPage {
 	private static removeUnsavedProfileAndReload(unsavedPageSmartProfile: SettingsPageSmartProfile, savedProfile: SmartProfile) {
 		// clean up
 		this.removePageSmartProfile(unsavedPageSmartProfile);
+		settingsPage.changeTracking.newSmartProfile = false;
 
 		// adding the new one
 		let pageSmartProfile = this.createProfileContainer(savedProfile, false, true);
@@ -1374,6 +1396,8 @@ export class settingsPage {
 		// tab
 		profileTab.attr("id", tabId);
 		profileTab.addClass('tab-smart-profile-item');
+		if (isNewProfile)
+			profileTab.addClass('tab-new-unsaved-smart-profile-item');
 		profileTab.find("#lblProfileName").html(profile.profileName + ` <i class="fas fa-pencil-alt fa-xs"></i>`);
 		profileTab.find("#txtSmartProfileName").val(profile.profileName);
 		profileTab.find("#lblProfileType").text(getSmartProfileTypeName(profile.profileType));
@@ -1688,6 +1712,20 @@ export class settingsPage {
 
 			settingsPage.updateProfileGridsLayout(pageProfile);
 		});
+
+		tabContainer.find("#txtSmartProfileName").on("input", () => {
+			settingsPage.changeTracking.smartProfiles = true;
+		});
+		tabContainer.find("#chkSmartProfileEnabled").on("change", () => {
+			settingsPage.changeTracking.smartProfiles = true;
+		});
+
+		tabContainer.find("#cmbProfileProxyServer").on("change", (event) => {
+			// To prevent auto triggered on fulfiled when page loaded initially
+			if (event.originalEvent && event.originalEvent.isTrusted) {
+				settingsPage.changeTracking.smartProfiles = true;
+			}
+		});
 	}
 
 	//#endregion
@@ -2250,6 +2288,10 @@ export class settingsPage {
 			settingsPage.updateProfileGridsLayout(pageSmartProfile);
 			settingsPage.selectAddNewProfileMenu();
 
+			settingsPage.changeTracking.newSmartProfile = true;
+			pageSmartProfile.htmlProfileMenu.one("hidden.bs.tab", () => {
+				settingsPage.changeTracking.newSmartProfile = false;
+			});
 			// ---
 			modal.modal("hide");
 		},
@@ -2261,6 +2303,7 @@ export class settingsPage {
 			if (server) {
 				// this can be null
 				settingsPage.currentSettings.defaultProxyServerId = server.id;
+				settingsPage.changeTracking.activeProxy = true;
 			}
 			else {
 				Debug.warn("Settings> Selected ActiveProxyServer ID not found!");
@@ -2572,6 +2615,7 @@ export class settingsPage {
 
 			// insert to the grid
 			settingsPage.insertNewRuleListInGrid(pageProfile, resultRuleList);
+			settingsPage.changeTracking.smartProfiles = true;
 
 			modal.modal("hide");
 		},
@@ -2914,6 +2958,7 @@ export class settingsPage {
 				settingsPage.insertNewRuleInGrid(pageProfile, ruleInfo);
 			}
 
+			settingsPage.changeTracking.smartProfiles = true;
 			modal.modal("hide");
 		},
 		onRulesEditClick(pageProfile: SettingsPageSmartProfile, e: any) {
@@ -2940,6 +2985,7 @@ export class settingsPage {
 
 					// remove then redraw the grid page
 					row.remove().draw('full-hold');
+					settingsPage.changeTracking.smartProfiles = true;
 				});
 		},
 		onClickClearProxyRules(pageProfile: SettingsPageSmartProfile) {
@@ -2948,6 +2994,7 @@ export class settingsPage {
 				() => {
 					settingsPage.loadRules(pageProfile, []);
 
+					settingsPage.changeTracking.smartProfiles = true;
 					// All rules are removed.<br/>You have to save to apply the changes.
 					messageBox.info(api.i18n.getMessage("settingsRemoveAllRulesSuccess"));
 				});
@@ -2988,6 +3035,7 @@ export class settingsPage {
 						let updatedProfile: SmartProfile = response.smartProfile || smartProfile;
 
 						settingsPage.changeTracking.smartProfiles = false;
+						settingsPage.changeTracking.rulesSubscriptions = false;
 
 						if (smartProfile.profileId || smartProfile.profileType == SmartProfileType.IgnoreFailureRules) {
 							// sync the change to menu
@@ -3008,6 +3056,16 @@ export class settingsPage {
 					messageBox.error(api.i18n.getMessage("settingsErrorFailedToSaveSmartProfile") + " " + error.message);
 				});
 		},
+		saveUnsavedSmartProfile() {
+			/** This is to be used on places when SettingsPageSmartProfile is not accessible, e.g. on window unload event */
+			let unsavedSmartProfileElement = jq(".tab-smart-profile-item" + ".tab-new-unsaved-smart-profile-item:visible");
+			if (!unsavedSmartProfileElement.length)
+				// no active unsaved new profile
+				return;
+
+			let saveButton = unsavedSmartProfileElement.find("#btnSaveSmartProfile");
+			saveButton.trigger('click');
+		},
 		onClickRejectSmartProfile(pageProfile: SettingsPageSmartProfile) {
 			// // reset the data
 			// settingsPage.currentSettings.proxyRules = settingsPage.originalSettings.proxyRules.slice();
@@ -3738,6 +3796,7 @@ export class settingsPage {
 						settingsPage.loadServersGrid(servers);
 						settingsPage.loadDefaultProxyServer();
 
+						settingsPage.changeTracking.servers = true;
 						// close the window
 						modalContainer.modal("hide");
 					} else {
@@ -3763,14 +3822,17 @@ export class settingsPage {
 						},
 						(response: ResultHolder) => {
 							if (response.success) {
+								jq(window).off("beforeunload");
 								if (response.message) {
 									messageBox.success(response.message,
 										800,
 										() => {
+											settingsPage.changeTracking.resetStats();
 											// reload the current settings page
 											document.location.reload();
 										});
 								} else {
+									settingsPage.changeTracking.resetStats();
 									// reload the current settings page
 									document.location.reload();
 								}
@@ -3797,14 +3859,17 @@ export class settingsPage {
 					},
 					(response: ResultHolder) => {
 						if (response.success) {
+							jq(window).off("beforeunload");
 							if (response.message) {
 								messageBox.success(response.message,
 									500,
 									() => {
+										settingsPage.changeTracking.resetStats();
 										// reload the current settings page
 										document.location.reload();
 									});
 							} else {
+								settingsPage.changeTracking.resetStats();
 								// reload the current settings page
 								document.location.reload();
 							}
@@ -3855,6 +3920,46 @@ export class settingsPage {
 				alert("Diagnostics are enabled for this session only. Check this page for more info.");
 				window.open("https://github.com/salarcode/SmartProxy/wiki/Enable-Diagnostics")
 			}
+		},
+		onWindowUnload(event) {
+			// Check GeneralOptions via comparison
+			if (!settingsPage.readGeneralOptions().Equals(settingsPage.currentSettings.options)) {
+				settingsPage.changeTracking.options = true;
+			}
+			if (!settingsPage.changeTracking.isDirty())
+				return;
+
+			// If user choose to stay, show a messagebox asking if saving all unsaved changes.
+			jq(window).one("focus", () => {
+				// setTimeout to avoid when user choose to leave, this messagebox flash before the window close itself
+				setTimeout(() => {
+					messageBox.confirm(api.i18n.getMessage("settingsConfirmSaveAllChanged"),
+						() => {
+							if (settingsPage.changeTracking.options) {
+								settingsPage.uiEvents.onClickSaveGeneralOptions();
+							}
+							if (settingsPage.changeTracking.smartProfiles || settingsPage.changeTracking.rulesSubscriptions) {
+								for (let pageProfile of settingsPage.pageSmartProfiles) {
+									settingsPage.uiEvents.onClickSaveSmartProfile(pageProfile);
+								}
+							}
+
+							// When profile name is not set an error message will show but we will proceed anyway
+							settingsPage.uiEvents.saveUnsavedSmartProfile();
+
+							if (settingsPage.changeTracking.servers || settingsPage.changeTracking.activeProxy) {
+								settingsPage.uiEvents.onClickSaveProxyServers();
+							}
+							if (settingsPage.changeTracking.serverSubscriptions) {
+								settingsPage.uiEvents.onClickSaveServerSubscriptionsChanges();
+							}
+						});
+				}, 200);
+			});
+
+			// Browser will show a dialog asking user to leave or stay.
+			event.preventDefault();
+			event.returnValue = true;
 		}
 	};