disable save button if nothing was changed

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()"

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 () {

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);

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: {