From edb427158fd69213eb34c57cd156de1ba08ba8bc Mon Sep 17 00:00:00 2001
From: negue <negue@users.noreply.github.com>
Date: Wed, 23 Nov 2022 00:03:19 +0100
Subject: [PATCH] disable save button if nothing was changed

---
 .../settings/inlineSettings/deleteAccount.vue    |  1 +
 .../inlineSettings/displayNameSetting.vue        | 16 ++++++++--------
 .../settings/inlineSettings/passwordSetting.vue  | 16 +++++++++++++++-
 .../settings/inlineSettings/userNameSetting.vue  |  4 +++-
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/website/client/src/pages/settings/inlineSettings/deleteAccount.vue b/website/client/src/pages/settings/inlineSettings/deleteAccount.vue
index 9616e1a20b..88fc86c9b7 100644
--- a/website/client/src/pages/settings/inlineSettings/deleteAccount.vue
+++ b/website/client/src/pages/settings/inlineSettings/deleteAccount.vue
@@ -58,6 +58,7 @@
 
         <div class="input-area">
           <save-cancel-buttons
+            :disable-save="!passwordValue"
             primary-button-color="btn-danger"
             primary-button-label="deleteAccount"
             @saveClicked="deleteAccount()"
diff --git a/website/client/src/pages/settings/inlineSettings/displayNameSetting.vue b/website/client/src/pages/settings/inlineSettings/displayNameSetting.vue
index ff5c130e5d..baaf582a5e 100644
--- a/website/client/src/pages/settings/inlineSettings/displayNameSetting.vue
+++ b/website/client/src/pages/settings/inlineSettings/displayNameSetting.vue
@@ -53,6 +53,7 @@
                 type="text"
                 :placeholder="$t('newDisplayName')"
                 :class="{'is-invalid input-invalid': displayNameInvalid}"
+                @keyup="inputChanged = true"
               >
               <div
                 v-if="displayNameIssues.length > 0"
@@ -144,6 +145,7 @@ export default {
   data () {
     return {
       temporaryDisplayName: '',
+      inputChanged: false,
       displayNameIssues: [],
       updates: {
         newEmail: '',
@@ -165,16 +167,14 @@ export default {
       return !this.validEmail || this.updates.password.length === 0;
     },
     displayNameInvalid () {
-      if (this.temporaryDisplayName.length <= 1) return false;
-      return !this.displayNameValid;
-    },
-    displayNameValid () {
-      if (this.temporaryDisplayName.length <= 1) return false;
-      return this.displayNameIssues.length === 0;
+      if (this.temporaryDisplayName.length <= 1) {
+        return false;
+      }
+
+      return true;
     },
     displayNameCannotSubmit () {
-      if (this.temporaryDisplayName.length <= 1) return true;
-      return !this.displayNameValid;
+      return this.displayNameInvalid || !this.inputChanged;
     },
   },
   mounted () {
diff --git a/website/client/src/pages/settings/inlineSettings/passwordSetting.vue b/website/client/src/pages/settings/inlineSettings/passwordSetting.vue
index 6663bd1b86..218c4dacff 100644
--- a/website/client/src/pages/settings/inlineSettings/passwordSetting.vue
+++ b/website/client/src/pages/settings/inlineSettings/passwordSetting.vue
@@ -53,6 +53,7 @@
         />
 
         <save-cancel-buttons
+          :disable-save="inputsInvalid"
           @saveClicked="changePassword( passwordUpdates)"
           @cancelClicked="closeModal()"
         />
@@ -121,9 +122,22 @@ export default {
   mixins: [InlineSettingMixin],
   data () {
     return {
-      passwordUpdates: {},
+      passwordUpdates: {
+        password: '',
+        newPassword: '',
+        confirmPassword: '',
+      },
     };
   },
+  computed: {
+    inputsInvalid () {
+      if (!this.passwordUpdates.password) {
+        return true;
+      }
+
+      return this.passwordUpdates.newPassword !== this.passwordUpdates.confirmPassword;
+    },
+  },
   methods: {
     async changePassword (updates) {
       await axios.put('/api/v4/user/auth/update-password', updates);
diff --git a/website/client/src/pages/settings/inlineSettings/userNameSetting.vue b/website/client/src/pages/settings/inlineSettings/userNameSetting.vue
index 303c16096f..7c9a978c2f 100644
--- a/website/client/src/pages/settings/inlineSettings/userNameSetting.vue
+++ b/website/client/src/pages/settings/inlineSettings/userNameSetting.vue
@@ -52,6 +52,7 @@
                 type="text"
                 :placeholder="$t('newUsername')"
                 :class="{ 'is-invalid input-invalid': !usernameValid }"
+                @keyup="inputChanged = true"
                 @blur="restoreEmptyUsername()"
               >
               <div class="input-floating-checkmark">
@@ -147,6 +148,7 @@ export default {
   data () {
     return {
       inputValue: '',
+      inputChanged: false,
       usernameIssues: [],
       icons: Object.freeze({
         checkIcon,
@@ -172,7 +174,7 @@ export default {
       if (this.cleanedInputValue.length <= 1) {
         return true;
       }
-      return !this.usernameValid;
+      return !this.usernameValid || !this.inputChanged;
     },
   },
   watch: {