1 files changed, 24 insertions, 11 deletions

diff --git a/src/views/ChangePassword/ChangePassword.vue b/src/views/ChangePassword/ChangePassword.vue
index 0b1b6897..b2edcd47 100644
--- a/src/views/ChangePassword/ChangePassword.vue
+++ b/src/views/ChangePassword/ChangePassword.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="change-password-container mx-auto ml-md-5 mb-3">
     <alert variant="danger" class="mb-4">
-      <p>{{ $t('pageChangePassword.changePasswordAlertMessage') }}</p>
+      <p v-if="changePasswordError">
+        {{ $t('pageChangePassword.changePasswordError') }}
+      </p>
+      <p v-else>{{ $t('pageChangePassword.changePasswordAlertMessage') }}</p>
     </alert>
     <dl>
       <dt>{{ $t('pageChangePassword.username') }}</dt>
@@ -19,7 +22,7 @@
             autofocus="autofocus"
             type="password"
             :state="getValidationState($v.form.password)"
-            @blur="$v.form.password.$touch()"
+            @change="$v.form.password.$touch()"
           >
           </b-form-input>
           <b-form-invalid-feedback role="alert">
@@ -39,7 +42,7 @@
             v-model="form.passwordConfirm"
             type="password"
             :state="getValidationState($v.form.passwordConfirm)"
-            @blur="$v.form.passwordConfirm.$touch()"
+            @change="$v.form.passwordConfirm.$touch()"
           >
           </b-form-input>
           <b-form-invalid-feedback role="alert">
@@ -53,7 +56,7 @@
         </input-password-toggle>
       </b-form-group>
       <div class="text-right">
-        <b-button type="button" variant="link" to="login" @click="goBack">
+        <b-button type="button" variant="link" @click="goBack">
           {{ $t('pageChangePassword.goBack') }}
         </b-button>
         <b-button type="submit" variant="primary">
@@ -69,18 +72,20 @@ import { required, sameAs } from 'vuelidate/lib/validators';
 import Alert from '@/components/Global/Alert';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
 import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
 
 export default {
   name: 'ChangePassword',
   components: { Alert, InputPasswordToggle },
-  mixins: [VuelidateMixin],
+  mixins: [VuelidateMixin, BVToastMixin],
   data() {
     return {
       form: {
         password: null,
         passwordConfirm: null
       },
-      username: this.$store.getters['global/username']
+      username: this.$store.getters['global/username'],
+      changePasswordError: false
     };
   },
   validations() {
@@ -96,13 +101,21 @@ export default {
   },
   methods: {
     goBack() {
-      // Remove temporary session created if navigating back
-      // to the Login page
-      this.$store.commit('authentication/logout');
+      // Remove session created if navigating back to the Login page
+      this.$store.dispatch('authentication/logout');
     },
     changePassword() {
-      // Should make PATCH request with new password
-      // then reroute to Overview page
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      let data = {
+        originalUsername: this.username,
+        password: this.form.password
+      };
+
+      this.$store
+        .dispatch('localUsers/updateUser', data)
+        .then(() => this.$router.push('/'))
+        .catch(() => (this.changePasswordError = true));
     }
   }
 };