Implement alert for unsaved changes

src/_locales/default-messages.json

@@ -512,6 +512,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/_locales/en/messages.json

@@ -512,6 +512,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

@@ -549,7 +549,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;
@@ -595,12 +595,37 @@ export class GeneralOptions implements Cloneable {
 		this.themesDark = source['themesDark'];
 		this.themesDarkCustomUrl = source['themesDarkCustomUrl'];
 	}
+
+	Equals(other: GeneralOptions): Boolean {
+		if (other.syncSettings !== this.syncSettings) return false;
+		if (other.syncActiveProfile !== this.syncActiveProfile) return false;
+		if (other.syncActiveProxy !== this.syncActiveProxy) return false;
+		if (other.detectRequestFailures !== this.detectRequestFailures) return false;
+		if (other.displayFailedOnBadge !== this.displayFailedOnBadge) return false;
+		if (other.displayAppliedProxyOnBadge !== this.displayAppliedProxyOnBadge) return false;
+		if (other.displayMatchedRuleOnBadge !== this.displayMatchedRuleOnBadge) return false;
+		if (other.refreshTabOnConfigChanges !== this.refreshTabOnConfigChanges) return false;
+		if (other.proxyPerOrigin !== this.proxyPerOrigin) return false;
+		if (other.activeIncognitoProfileId !== this.activeIncognitoProfileId) return false;
+		if (other.enableShortcuts !== this.enableShortcuts) return false;
+		if (other.shortcutNotification !== this.shortcutNotification) return false;
+		if (other.themeType !== this.themeType) return false;
+		if (other.themesLight !== this.themesLight) return false;
+		if (other.themesLightCustomUrl !== this.themesLightCustomUrl) return false;
+		if (other.themesDark !== this.themesDark) return false;
+		if (other.themesDarkCustomUrl !== this.themesDarkCustomUrl) return false;
+		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

@@ -36,6 +36,7 @@ export class settingsPage {
 	private static currentSettings: SettingsConfig;
 	private static pageSmartProfiles: SettingsPageSmartProfile[] = [];
 	private static debugDiagnosticsRequested = false;
+	private static unsavedProfile: SettingsPageSmartProfile;
 
 	/** Used to track changes and restore when reject changes selected */
 	private static originalSettings: SettingsConfig;
@@ -46,7 +47,23 @@ export class settingsPage {
 		servers: false,
 		activeProxy: false,
 		serverSubscriptions: false,
-		rulesSubscriptions: false
+		rulesSubscriptions: false,
+		isDirty: function () {
+			return this.options
+				|| this.servers
+				|| this.activeProxy
+				|| this.smartProfiles
+				|| this.rulesSubscriptions
+				|| this.serverSubscriptions
+		},
+		resetStats: function () {
+			this.options = false;
+			this.servers = false;
+			this.activeProxy = false;
+			this.smartProfiles = false;
+			this.rulesSubscriptions = false;
+			this.serverSubscriptions = false;
+		}
 	};
 
 	public static initialize() {
@@ -199,6 +216,8 @@ export class settingsPage {
 
 		// Debug
 		jq("#btnEnableDiagnostics").click(settingsPage.uiEvents.onClickEnableDiagnostics);
+
+		jq(window).on("beforeunload", settingsPage.uiEvents.onWindowUnload);
 	}
 
 	private static initializeGrids() {
@@ -1630,6 +1649,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
@@ -2186,6 +2219,10 @@ export class settingsPage {
 			settingsPage.updateProfileGridsLayout(pageSmartProfile);
 			settingsPage.selectAddNewProfileMenu();
 
+			settingsPage.unsavedProfile = pageSmartProfile;
+			pageSmartProfile.htmlProfileMenu.one("hidden.bs.tab", () => {
+				settingsPage.unsavedProfile = null;
+			});
 			// ---
 			modal.modal("hide");
 		},
@@ -2197,6 +2234,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!");
@@ -2475,6 +2513,7 @@ export class settingsPage {
 
 			// insert to the grid
 			settingsPage.insertNewRuleListInGrid(pageProfile, resultRuleList);
+			settingsPage.changeTracking.smartProfiles = true;
 
 			modal.modal("hide");
 		},
@@ -2702,6 +2741,7 @@ export class settingsPage {
 				settingsPage.insertNewRuleInGrid(pageProfile, ruleInfo);
 			}
 
+			settingsPage.changeTracking.smartProfiles = true;
 			modal.modal("hide");
 		},
 		onRulesEditClick(pageProfile: SettingsPageSmartProfile, e: any) {
@@ -2728,6 +2768,7 @@ export class settingsPage {
 
 					// remove then redraw the grid page
 					row.remove().draw('full-hold');
+					settingsPage.changeTracking.smartProfiles = true;
 				});
 		},
 		onClickClearProxyRules(pageProfile: SettingsPageSmartProfile) {
@@ -2736,6 +2777,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"));
 				});
@@ -2776,6 +2818,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
@@ -3498,6 +3541,7 @@ export class settingsPage {
 						settingsPage.loadServersGrid(servers);
 						settingsPage.loadDefaultProxyServer();
 
+						settingsPage.changeTracking.servers = true;
 						// close the window
 						modalContainer.modal("hide");
 					} else {
@@ -3556,6 +3600,7 @@ export class settingsPage {
 						let rules = response.result;
 						settingsPage.loadRules(pageProfile, rules);
 
+						settingsPage.changeTracking.smartProfiles = true;
 						// close the window
 						modalContainer.modal("hide");
 					} else {
@@ -3580,14 +3625,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();
 								}
@@ -3614,14 +3662,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();
 							}
@@ -3672,6 +3723,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);
+								}
+								if (settingsPage.unsavedProfile) {
+									// if profile name not set, error message box will show.
+									settingsPage.uiEvents.onClickSaveSmartProfile(settingsPage.unsavedProfile);
+								}
+							}
+							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;
 		}
 	};