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

5 files changed, 44 insertions, 13 deletions

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 76d9aaf1..02600f4c 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -118,6 +118,7 @@
   "pageChangePassword": {
     "changePassword": "Change password",
     "changePasswordAlertMessage": "The password is expired and must be changed.",
+    "changePasswordError": "There was an error changing the password.",
     "confirmNewPassword": "Confirm new password",
     "goBack": "Go back",
     "newPassword": "New password",
diff --git a/src/router/index.js b/src/router/index.js
index 8fa42c89..0da37fa8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -164,7 +164,8 @@ const routes = [
         name: 'change-password',
         component: () => import('@/views/ChangePassword'),
         meta: {
-          title: 'appPageTitle.changePassword'
+          title: 'appPageTitle.changePassword',
+          requiresAuth: true
         }
       }
     ]
diff --git a/src/store/modules/Authentication/AuthenticanStore.js b/src/store/modules/Authentication/AuthenticanStore.js
index 407c2b57..4afb11de 100644
--- a/src/store/modules/Authentication/AuthenticanStore.js
+++ b/src/store/modules/Authentication/AuthenticanStore.js
@@ -43,6 +43,12 @@ const AuthenticationStore = {
         .then(() => commit('logout'))
         .then(() => router.go('/login'))
         .catch(error => console.log(error));
+    },
+    async checkPasswordChangeRequired(_, username) {
+      return await api
+        .get(`/redfish/v1/AccountService/Accounts/${username}`)
+        .then(({ data: { PasswordChangeRequired } }) => PasswordChangeRequired)
+        .catch(error => console.log(error));
     }
   }
 };
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));
     }
   }
 };
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 369c56dd..e33cde78 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -118,12 +118,22 @@ export default {
       const password = this.userInfo.password;
       this.$store
         .dispatch('authentication/login', [username, password])
-        .then(() => this.$router.push('/'))
         .then(() => {
           localStorage.setItem('storedLanguage', i18n.locale);
           localStorage.setItem('storedUsername', username);
           this.$store.commit('global/setUsername', username);
           this.$store.commit('global/setLanguagePreference', i18n.locale);
+          return this.$store.dispatch(
+            'authentication/checkPasswordChangeRequired',
+            username
+          );
+        })
+        .then(passwordChangeRequired => {
+          if (passwordChangeRequired) {
+            this.$router.push('/change-password');
+          } else {
+            this.$router.push('/');
+          }
         })
         .catch(error => console.log(error))
         .finally(() => (this.disableSubmitButton = false));