Old password input in change password screen

When the user changed their password in profile settings, to prevent
XSS attacks, I added the current password input field to authenticate
the user.

Once the authentication had success with the current password, then
allowing the update was possible. After the password is changed
successfully, all the sessions of the user who changed the password
will be disconnected, including the current session. and the current
session will navigate to the login page.

Signed-off-by: Kirankumar Ballapalli <kirankumarb@ami.com>
Change-Id: Idb8bc9d6ada420329c38407da76a08dc83fddd61

2 files changed, 53 insertions, 5 deletions

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 4e9b5f58..d3319935 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -679,6 +679,7 @@
         "confirmPassword": "Confirm new password",
         "defaultUTC": "Default (UTC)",
         "newPassword": "New password",
+        "currentPassword": "Current password",
         "newPassLabelTextInfo": "Password must be between %{min} - %{max} characters",
         "passwordsDoNotMatch": "Passwords do not match",
         "profileInfoTitle": "Profile information",
@@ -687,7 +688,8 @@
         "timezoneDisplayDesc": "Select how time is displayed throughout the application",
         "username": "Username",
         "toast": {
-            "successUpdatingTimeZone": "Timezone updated successfully."
+            "successUpdatingTimeZone": "Timezone updated successfully.",
+            "wrongCredentials": "Wrong credentials"
         }
     },
     "pageNetwork": {
diff --git a/src/views/ProfileSettings/ProfileSettings.vue b/src/views/ProfileSettings/ProfileSettings.vue
index 8f01c59b..bfd47ca4 100644
--- a/src/views/ProfileSettings/ProfileSettings.vue
+++ b/src/views/ProfileSettings/ProfileSettings.vue
@@ -24,6 +24,21 @@
             :section-title="$t('pageProfileSettings.changePassword')"
           >
             <b-form-group
+              id="input-group-0"
+              :label="$t('pageProfileSettings.currentPassword')"
+              label-for="input-0"
+            >
+              <input-password-toggle>
+                <b-form-input
+                  id="old-password"
+                  v-model="form.currentPassword"
+                  type="password"
+                  data-test-id="profileSettings-input-ocurrentPassword"
+                  class="form-control-with-button"
+                />
+              </input-password-toggle>
+            </b-form-group>
+            <b-form-group
               id="input-group-1"
               :label="$t('pageProfileSettings.newPassword')"
               label-for="input-1"
@@ -151,6 +166,7 @@ export default {
       form: {
         newPassword: '',
         confirmPassword: '',
+        currentPassword: '',
         isUtcDisplay: this.$store.getters['global/isUtcDisplay'],
       },
     };
@@ -198,9 +214,12 @@ export default {
       this.$store
         .dispatch('userManagement/updateUser', userData)
         .then((message) => {
-          (this.form.newPassword = ''), (this.form.confirmPassword = '');
+          (this.form.newPassword = ''),
+            (this.form.confirmPassword = ''),
+            (this.form.currentPassword = '');
           this.$v.$reset();
           this.successToast(message);
+          this.$store.dispatch('authentication/logout');
         })
         .catch(({ message }) => this.errorToast(message));
     },
@@ -212,10 +231,37 @@ export default {
       );
     },
     submitForm() {
-      if (this.form.confirmPassword || this.form.newPassword) {
-        this.saveNewPasswordInputData();
+      if (
+        this.form.confirmPassword &&
+        this.form.newPassword &&
+        this.form.currentPassword
+      ) {
+        this.confirmAuthenticate();
       }
-      this.saveTimeZonePrefrenceData();
+      if (
+        this.$store.getters['global/isUtcDisplay'] != this.form.isUtcDisplay
+      ) {
+        this.saveTimeZonePrefrenceData();
+      }
+    },
+    confirmAuthenticate() {
+      this.$v.form.newPassword.$touch();
+      if (this.$v.$invalid) return;
+
+      const username = this.username;
+      const password = this.form.currentPassword;
+
+      this.$store
+        .dispatch('authentication/login', { username, password })
+        .then(() => {
+          this.saveNewPasswordInputData();
+        })
+        .catch(() => {
+          this.$v.$reset();
+          this.errorToast(
+            this.$t('pageProfileSettings.toast.wrongCredentials')
+          );
+        });
     },
   },
 };