Add check if password change required at Login

After successfully authenticating on the Login page, check
/redfish/v1/AccountService/Accounts/${username} endpoint for
the PasswordChangeRequired property to see whether or not the
password is expired. If the password is expired, then navigate
to the Change password page, if the password isn't expired
navigate to the Overview page.
After successfully changing an expired password, navigate to the
Overview page.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I32de5f71bcfcbe4099c2953a31c05ba0ebe670bc
diff --git a/src/views/ChangePassword/ChangePassword.vue b/src/views/ChangePassword/ChangePassword.vue
index 0b1b689..b2edcd4 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 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 @@
   },
   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));
     }
   }
 };