From cd77a0c421dc38699694bd2874c5d161d327f157 Mon Sep 17 00:00:00 2001
From: gusthoff <gusthoff@gusthoff.com>
Date: Sun, 8 Sep 2024 06:06:15 +0200
Subject: [PATCH] Widget: asking user for permission to reload the page

---
 frontend/src/ts/strings.ts |  5 ++++
 frontend/src/ts/widget.ts  | 50 ++++++++++++++++++++++++--------------
 2 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/frontend/src/ts/strings.ts b/frontend/src/ts/strings.ts
index 3223837f3..90b4be1ce 100644
--- 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
index 6b71a681d..5fb011cdf 100644
--- 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 =