Widget: asking user for permission to reload the page

ada-ukraine · Sep 8, 2024 · cd77a0c · cd77a0c
1 parent 9b22f64
commit cd77a0c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 18 deletions.
diff --git a/frontend/src/ts/strings.ts b/frontend/src/ts/strings.ts
@@ -5,6 +5,11 @@ export const RESET_CONFIRM_MSG =
 'Your changes will be lost after reset. ' +
 'Are you sure you want to reset the editor and the compiler options?';
 
+export const RELOAD_CONFIRM_MSG =
+'Changing this setting requires reloading the page: ' +
+'your changes will be lost. ' +
+'Are you sure you want to proceed?';
+
 export const DOWNLOAD_TOOLTIP = 'Download source files';
 export const DOWNLOAD_MAINTENANCE =
 'The download functionilty is currently undergoing maintenance';

diff --git a/frontend/src/ts/widget.ts b/frontend/src/ts/widget.ts
@@ -151,16 +151,23 @@ class Widget {
     this.setTabbedView(tabbedView);
 
     tabSetting.addEventListener('change', () => {
-      let tabbedView = 'true';
-      if (!tabSetting.checked) {
-        tabbedView = 'false';
-      }
-      cookies.set('tabbed_view', tabbedView, {expires: 3650});
-      this.setTabbedView(tabSetting.checked);
+      if (window.confirm(Strings.RELOAD_CONFIRM_MSG)) {
+        let tabbedView = 'true';
+        if (!tabSetting.checked) {
+          tabbedView = 'false';
+        }
+        cookies.set('tabbed_view', tabbedView, {expires: 3650});
+        this.setTabbedView(tabSetting.checked);
 
-      // Current approach: just reload the page to
-      // set the correct theme for all widgets.
-      location.reload();
+        // Current approach: just reload the page to
+        // set the correct theme for all widgets.
+        location.reload();
+      }
+      else
+      {
+        // Revert if user chooses "no change"
+        tabSetting.checked = !tabSetting.checked;
+      }
     });
 
     this.initCompilerSwitches();
@@ -175,16 +182,23 @@ class Widget {
     this.setTheme(cookieTheme);
 
     themeSetting.addEventListener('change', () => {
-      let theme = 'light';
-      if (themeSetting.checked) {
-        theme = 'dark';
-      }
-      cookies.set('theme', theme, {expires: 3650});
-      this.setTheme(theme);
+      if (window.confirm(Strings.RELOAD_CONFIRM_MSG)) {
+        let theme = 'light';
+        if (themeSetting.checked) {
+          theme = 'dark';
+        }
+        cookies.set('theme', theme, {expires: 3650});
+        this.setTheme(theme);
 
-      // Current approach: just reload the page to
-      // set the correct theme for all widgets.
-      location.reload();
+        // Current approach: just reload the page to
+        // set the correct theme for all widgets.
+        location.reload();
+      }
+      else
+      {
+        // Revert if user chooses "no change"
+        themeSetting.checked = !themeSetting.checked;
+      }
     });
 
     const resetButton =