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

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