check for unsaved changes when pressing cancel

website/client/src/pages/settings/components/inlineSettingMixin.js

@@ -28,7 +28,7 @@ export const InlineSettingMixin = {
     openModal () {
       if (this.sharedState.inlineSettingAlreadyOpen) {
         if (this.sharedState.inlineSettingUnsavedValues) {
-          if (window.confirm('Are you sure? You will lose your unsaved changes.')) {
+          if (window.confirm(this.$t('confirmCancelChanges'))) {
             this._hidePrevious();
             this._openIt();
           } else {
@@ -53,12 +53,26 @@ export const InlineSettingMixin = {
       this.sharedState.instanceOfCurrentlyOpened.resetControls();
       this.sharedState.instanceOfCurrentlyOpened.closeModal();
     },
+    /**
+     * This is just for the cancel buttons - so that they also ask if there are unchanged values
+     */
+    requestCloseModal () {
+      if (this.sharedState.inlineSettingUnsavedValues && !window.confirm(this.$t('confirmCancelChanges'))) {
+        return;
+      }
+
+      this.resetControls();
+      this.closeModal();
+    },
+    /**
+     * This is for the save methods to call it after they are done
+     */
     closeModal () {
       this.modalVisible = false;
       this.sharedState.markAsClosed();
     },
-    modalValuesChanged () {
-      this.sharedState.inlineSettingUnsavedValues = true;
+    modalValuesChanged (value = true) {
+      this.sharedState.inlineSettingUnsavedValues = value;
     },
     resetControls () {},
   },

website/client/src/pages/settings/inlineSettings/audioThemeSetting.vue

@@ -83,7 +83,7 @@
         <save-cancel-buttons
           :disable-save="previousValue === currentAudioTheme"
           @saveClicked="changeAudioThemeAndClose()"
-          @cancelClicked="closeModal()"
+          @cancelClicked="requestCloseModal()"
         />
       </td>
     </tr>

website/client/src/pages/settings/inlineSettings/classSetting.vue

@@ -54,7 +54,7 @@
               :key="classType"
               class="class-card"
               :class="{[classType]: true, selected: classType === selectedClass}"
-              @click="selectedClass = classType"
+              @click="markSelectedClass(classType)"
             >
               <span
                 class="svg-icon icon-48 mb-1"
@@ -88,7 +88,7 @@
             class="mb-2"
             :disable-save="previousValue === selectedClass"
             @saveClicked="changeClassAndClose()"
-            @cancelClicked="closeModal()"
+            @cancelClicked="requestCloseModal()"
           />
 
           <your-balance />
@@ -269,6 +269,10 @@ export default {
     this.resetControls();
   },
   methods: {
+    markSelectedClass (newValue) {
+      this.selectedClass = newValue;
+      this.modalValuesChanged(this.previousValue !== newValue);
+    },
     async changeClassAndClose () {
       if (this.user.flags.classSelected && !window.confirm(this.$t('changeClassConfirmCost'))) {
         return;

website/client/src/pages/settings/inlineSettings/dateFormatSetting.vue

@@ -51,7 +51,7 @@
         <save-cancel-buttons
           :disable-save="selectedFormat === currentActiveFormat"
           @saveClicked="changeFormatAndClose()"
-          @cancelClicked="closeModal()"
+          @cancelClicked="requestCloseModal()"
         />
       </td>
     </tr>

website/client/src/pages/settings/inlineSettings/dayStartAdjustmentSetting.vue

@@ -71,7 +71,7 @@
           <save-cancel-buttons
             :disable-save="newDayStart === user.preferences.dayStart"
             @saveClicked="saveDayStart()"
-            @cancelClicked="closeModal()"
+            @cancelClicked="requestCloseModal()"
           />
         </div>
       </td>

website/client/src/pages/settings/inlineSettings/deleteAccount.vue

@@ -63,7 +63,7 @@
             primary-button-color="btn-danger"
             primary-button-label="deleteAccount"
             @saveClicked="deleteAccount()"
-            @cancelClicked="closeModal()"
+            @cancelClicked="requestCloseModal()"
           />
         </div>
       </td>

website/client/src/pages/settings/inlineSettings/displayNameSetting.vue

@@ -73,7 +73,7 @@
           <save-cancel-buttons
             :disable-save="displayNameCannotSubmit"
             @saveClicked="changeDisplayName(temporaryDisplayName)"
-            @cancelClicked="closeModal()"
+            @cancelClicked="requestCloseModal()"
           />
         </div>
       </td>

website/client/src/pages/settings/inlineSettings/languageSetting.vue

@@ -63,7 +63,7 @@
         <save-cancel-buttons
           :disable-save="selectedLanguage === currentActiveLanguage"
           @saveClicked="changeLanguageAndClose()"
-          @cancelClicked="closeModal()"
+          @cancelClicked="requestCloseModal()"
         />
       </td>
     </tr>

website/client/src/pages/settings/inlineSettings/passwordSetting.vue

@@ -55,7 +55,7 @@
         <save-cancel-buttons
           :disable-save="inputsInvalid"
           @saveClicked="changePassword( passwordUpdates)"
-          @cancelClicked="closeModal()"
+          @cancelClicked="requestCloseModal()"
         />
       </td>
     </tr>

website/client/src/pages/settings/inlineSettings/resetAccount.vue

@@ -69,7 +69,7 @@
             primary-button-color="btn-danger"
             primary-button-label="resetAccount"
             @saveClicked="reset()"
-            @cancelClicked="closeModal()"
+            @cancelClicked="requestCloseModal()"
           />
         </div>
       </td>

website/client/src/pages/settings/inlineSettings/userEmailSetting.vue

@@ -52,7 +52,7 @@
         <save-cancel-buttons
           :disable-save="allowedToSave"
           @saveClicked="changeEmail()"
-          @cancelClicked="closeModal()"
+          @cancelClicked="requestCloseModal()"
         />
       </td>
     </tr>

website/client/src/pages/settings/inlineSettings/userNameSetting.vue

@@ -48,7 +48,7 @@
         <save-cancel-buttons
           :disable-save="usernameCannotSubmit"
           @saveClicked="changeUser('username', cleanedInputValue)"
-          @cancelClicked="closeModal()"
+          @cancelClicked="requestCloseModal()"
         />
       </td>
     </tr>

website/common/locales/en/settings.json

@@ -1,6 +1,7 @@
 {
     "settings": "Settings",
     "generalSettings": "General Settings",
+    "confirmCancelChanges": "Are you sure? You will lose your unsaved changes.",
     "account": "Account",
     "loginMethods": "Login Methods",
     "character": "Character",