show notification on username change + fix userEmail checks

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

@@ -53,7 +53,7 @@
           />
 
           <save-cancel-buttons
-            :disable-save="allowedToSave"
+            :disable-save="disallowedToSave"
             @saveClicked="changeEmail()"
             @cancelClicked="requestCloseModal()"
           />
@@ -87,18 +87,24 @@ export default {
         newEmail: '',
         password: '',
       },
-      emailChanged: false,
+
+      previousEmail: '',
     };
   },
   computed: {
     ...mapState({
       user: 'user.data',
     }),
+    emailChanged () {
+      return this.previousEmail !== this.updates.newEmail;
+    },
     validEmail () {
       return validator.isEmail(this.updates.newEmail);
     },
-    allowedToSave () {
-      return !this.validEmail || this.updates.password.length === 0;
+    disallowedToSave () {
+      return !this.emailChanged
+        || !this.validEmail
+        || this.updates.password.length === 0;
     },
   },
   mounted () {
@@ -115,6 +121,7 @@ export default {
     },
     restoreEmail () {
       this.updates.newEmail = this.user.auth.local.email;
+      this.previousEmail = this.user.auth.local.email;
     },
     async changeEmail () {
       await this.passwordInputCheckMixinTryCall(async () => {

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

@@ -70,12 +70,13 @@ import { mapState } from '@/libs/store';
 import { InlineSettingMixin } from '../components/inlineSettingMixin';
 import SaveCancelButtons from '../components/saveCancelButtons.vue';
 import ValidatedTextInput from '@/components/ui/validatedTextInput.vue';
+import { NotificationMixins } from '@/mixins/notifications';
 
 // TODO extract usernameIssues/checks to a mixin to share between this and the authForm
 
 export default {
   components: { ValidatedTextInput, SaveCancelButtons },
-  mixins: [InlineSettingMixin],
+  mixins: [InlineSettingMixin, NotificationMixins],
   data () {
     return {
       inputValue: '',
@@ -139,6 +140,8 @@ export default {
       // this.localAuth.username = this.user.auth.local.username;
       this.user.flags.verifiedUsername = true;
 
+      this.text(this.$t('userNameSuccess'));
+
       this.closeModal();
     },
     valuesChanged () {

website/common/locales/en/settings.json

@@ -111,6 +111,7 @@
     "deleteDo": "Do it, delete my account!",
     "invalidPasswordResetCode": "The supplied password reset code is invalid or has expired.",
     "passwordChangeSuccess": "Your password was successfully changed to the one you just chose. You can now use it to access your account.",
+    "userNameSuccess": "Username successfully changed",
     "displayNameSuccess": "Display name successfully changed",
     "emailSuccess": "Email successfully changed",
     "passwordSuccess": "Password successfully changed",