hide & reset previous setting when switching to a different one

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

@@ -2,10 +2,17 @@ import { reactive } from 'vue';
 
 export const sharedInlineSettingStore = reactive({
   inlineSettingAlreadyOpen: false,
-  markAsOpened () {
+  inlineSettingUnsavedValues: false,
+  /**
+   * @type InlineSettingMixin
+   */
+  instanceOfCurrentlyOpened: null,
+  markAsOpened (currentInstance) {
     this.inlineSettingAlreadyOpen = true;
+    this.instanceOfCurrentlyOpened = currentInstance;
   },
   markAsClosed () {
+    this.inlineSettingUnsavedValues = false;
     this.inlineSettingAlreadyOpen = false;
   },
 });
@@ -20,15 +27,35 @@ export const InlineSettingMixin = {
   methods: {
     openModal () {
       if (this.sharedState.inlineSettingAlreadyOpen) {
-        return;
+        if (this.sharedState.inlineSettingUnsavedValues) {
+          if (window.confirm('Are you sure? You will lose your unsaved changes.')) {
+            this._hidePrevious();
+            this._openIt();
+          } else {
+            return;
+          }
+        } else {
+          this._hidePrevious();
+        }
       }
 
-      this.sharedState.markAsOpened();
+      this._openIt();
+    },
+    _openIt () {
+      this.sharedState.markAsOpened(this);
       this.modalVisible = true;
     },
+    _hidePrevious () {
+      this.sharedState.instanceOfCurrentlyOpened.resetControls();
+      this.sharedState.instanceOfCurrentlyOpened.closeModal();
+    },
     closeModal () {
       this.modalVisible = false;
       this.sharedState.markAsClosed();
     },
+    modalValuesChanged () {
+      this.sharedState.inlineSettingUnsavedValues = true;
+    },
+    resetControls () {},
   },
 };

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

@@ -97,17 +97,25 @@ export default {
     },
   },
   mounted () {
-    this.selectedFormat = this.currentActiveFormat;
+    this.resetControls();
   },
   methods: {
     changeFormat (e) {
       this.selectedFormat = e;
+      this.modalValuesChanged();
     },
     async changeFormatAndClose () {
       this.user.preferences.dateFormat = this.selectedFormat;
       await this.set('dateFormat');
       this.closeModal();
     },
+    /**
+     * is a callback from the {InlineSettingMixin}
+     * do not remove
+     */
+    resetControls () {
+      this.selectedFormat = this.currentActiveFormat;
+    },
   },
 };
 </script>

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

@@ -53,7 +53,7 @@
                 type="text"
                 :placeholder="$t('newDisplayName')"
                 :class="{'is-invalid input-invalid': displayNameInvalid}"
-                @keyup="inputChanged = true"
+                @keyup="valuesChanged()"
               >
               <div
                 v-if="displayNameIssues.length > 0"
@@ -186,13 +186,15 @@ export default {
     },
   },
   mounted () {
-    this.restoreDisplayName();
+    this.resetControls();
   },
   methods: {
-    restoreDisplayName () {
-      if (this.temporaryDisplayName.length < 1) {
-        this.temporaryDisplayName = this.user.profile.name;
-      }
+    /**
+     * is a callback from the {InlineSettingMixin}
+     * do not remove
+     */
+    resetControls () {
+      this.temporaryDisplayName = this.user.profile.name;
     },
     async changeDisplayName (newName) {
       await axios.put('/api/v4/user/', { 'profile.name': newName });
@@ -200,21 +202,25 @@ export default {
       this.user.profile.name = newName;
       this.temporaryDisplayName = newName;
     },
-    validateDisplayName: debounce(function checkName (displayName) {
+    validateDisplayName: debounce(async function checkName (displayName) {
       if (displayName.length <= 1 || displayName === this.user.profile.name) {
         this.displayNameIssues = [];
         return;
       }
-      this.$store.dispatch('auth:verifyDisplayName', {
+      const res = await this.$store.dispatch('auth:verifyDisplayName', {
         displayName,
-      }).then(res => {
-        if (res.issues !== undefined) {
-          this.displayNameIssues = res.issues;
-        } else {
-          this.displayNameIssues = [];
-        }
       });
+
+      if (res.issues !== undefined) {
+        this.displayNameIssues = res.issues;
+      } else {
+        this.displayNameIssues = [];
+      }
     }, 500),
+    valuesChanged () {
+      this.inputChanged = true;
+      this.modalValuesChanged();
+    },
   },
 };
 </script>

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

@@ -112,12 +112,21 @@ export default {
     },
   },
   mounted () {
-    this.selectedLanguage = this.currentActiveLanguage;
+    this.resetControls();
   },
   methods: {
+    /**
+     * is a callback from the {InlineSettingMixin}
+     * do not remove
+     */
+    resetControls () {
+      this.selectedLanguage = this.currentActiveLanguage;
+    },
     changeLanguage (e) {
       const newLang = e.code;
       this.selectedLanguage = newLang;
+
+      this.modalValuesChanged();
     },
     selectedLanguageLabel (languageKey) {
       if (!this.availableLanguages) {

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

@@ -40,6 +40,7 @@
           v-model="updates.newEmail"
           settings-label="email"
           :is-valid="validEmail"
+          @update:value="modalValuesChanged"
           @blur="restoreEmptyEmail()"
         />
 
@@ -98,11 +99,17 @@ export default {
     this.restoreEmptyEmail();
   },
   methods: {
+    resetControls () {
+      this.restoreEmail();
+    },
     restoreEmptyEmail () {
       if (this.updates.newEmail.length < 1) {
-        this.updates.newEmail = this.user.auth.local.email;
+        this.restoreEmail();
       }
     },
+    restoreEmail () {
+      this.updates.newEmail = this.user.auth.local.email;
+    },
     async changeEmail () {
       await axios.put('/api/v4/user/auth/update-email', this.updates);
 

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

@@ -41,7 +41,7 @@
           settings-label="username"
           :is-valid="usernameValid"
           :invalid-issues="usernameIssues"
-          @update:value="inputChanged = true"
+          @update:value="valuesChanged()"
           @blur="restoreEmptyUsername()"
         />
 
@@ -109,12 +109,19 @@ export default {
     },
   },
   mounted () {
-    this.restoreEmptyUsername();
+    this.resetControls();
   },
   methods: {
+    /**
+     * is a callback from the {InlineSettingMixin}
+     * do not remove
+     */
+    resetControls () {
+      this.inputValue = `@${this.user.auth.local.username}`;
+    },
     restoreEmptyUsername () {
       if (this.inputValue.length < 1) {
-        this.inputValue = `@${this.user.auth.local.username}`;
+        this.resetControls();
       }
     },
     async changeUser (attribute, newUsername) {
@@ -126,6 +133,11 @@ export default {
       // this.localAuth.username = this.user.auth.local.username;
       this.user.flags.verifiedUsername = true;
     },
+    valuesChanged () {
+      this.inputChanged = true;
+
+      this.modalValuesChanged();
+    },
     validateUsername: debounce(async function checkName (username) {
       if (username.length <= 1 || username === this.user.auth.local.username) {
         this.usernameIssues = [];