Change Password After Login

src/components/user/firstLoginPasswordUpdate.vue

@@ -0,0 +1,93 @@
+<template>
+  <main id="main" style="margin-top:-20px; padding-bottom: 500px">
+    <div class="container">
+      <div>
+        <div class="section-header">
+          <h2 style="padding-top:40px">New Password</h2>
+        </div>
+      </div>
+      <div class="row mb-4">
+        <div class="col-md-12">
+          <div v-if="boolSuccess">
+            <alert :text="'Password Updated! You will be redirected shortly.'" :type="'SUCCESS'" />
+          </div>
+          <div v-if="passMissMatch">
+            <alert :text="'The passwords do not match'" :type="'ERROR'" />
+          </div>
+        </div>
+      </div>
+      <div class="row mb-4">
+        <div class="col-md-6">
+          <float-label>
+            <input
+              name="password"
+              placeholder="PASSWORD"
+              class="form-control uniInput"
+              type="password"
+              v-model="password"
+              @input="passMissMatch = false"
+            />
+          </float-label>
+        </div>
+        <div class="col-md-6">
+          <float-label>
+            <input
+              name="confirmPassword"
+              placeholder="CONFIRM PASSWORD"
+              class="form-control uniInput"
+              type="password"
+              v-model="confirmPassword"
+              @input="passMissMatch = false"
+            />
+          </float-label>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <button class="btn-solid-blue" @click="updatePassword">Save</button>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapActions } from "vuex";
+import Log from "../../assets/Log";
+import alert from "../shared/alert";
+
+export default {
+  components: {
+    alert
+  },
+  data() {
+    return {
+      password: "",
+      confirmPassword: "",
+      boolSuccess: false,
+      passMissMatch: false
+    };
+  },
+  methods: {
+    ...mapActions("register", ["updateIndividual"]),
+    updatePassword() {
+      if (this.password === this.confirmPassword) {
+        var userObj = Log.getUser();
+        userObj.password = this.password;
+        console.log(userObj);
+        this.updateIndividual(userObj).then(() => {
+          this.boolSuccess = true;
+          setTimeout(() => {
+            this.$router.push("/user/login");
+          }, 2000);
+        });
+      } else {
+        this.passMissMatch = true;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/user/loginPage.vue

@@ -119,7 +119,12 @@ export default {
     Login() {
       this.login({ username: this.username, password: this.password })
         .then(() => {
-          this.$router.push("/");
+          console.log(Log.getUser());
+          if (!Log.getUser().loginPasswordChange) {
+            this.$router.push("/");
+          } else {
+            this.$router.push("/user/changePasswordOnLogin");
+          }
         })
         .catch(err => {
           this.error = true;

src/router/index.js

@@ -49,6 +49,7 @@ import changeLogPage from "../components/admin/status/changeLogPage.vue";
 import UnitConfiguration from "../components/admin/unitConfiguration/unitConfigurationPage.vue";
 import agentManagementPage from "../components/admin/status/agentsUserManagementPage.vue";
 import Fees from "../components/admin/fees/feesPage.vue";
+import PasswordOnLogin from "../components/user/firstLoginPasswordUpdate.vue";
 
 import ResortPage from "../components/timeshare/resort/resortPageNew.vue";
 import UnitPage from "../components/timeshare/resort/unit/unitPageNew.vue";
@@ -157,6 +158,11 @@ export default new Router({
       name: "UpdateInfo",
       component: UpdateInfo
     },
+    {
+      path: "/user/changePasswordOnLogin",
+      name: "PasswordOnLogin",
+      component: PasswordOnLogin
+    },
     {
       path: "/user/register",
       name: "PrivateIndividual",

src/store/modules/user/register.js

@@ -140,14 +140,12 @@ export default {
         .then(result => commit("addAgent", result.data))
         .catch(console.error);
     },
-    // updateIndividual({
-    //   commit,
-    // }, item) {
-    //   axios
-    //     .put('/api/individual', item)
-    //     .then(result => commit('updateIndividual', item))
-    //     .catch(console.error);
-    // },
+    async updateIndividual({ commit }, userParam) {
+      await axios
+        .put("/api/user", userParam)
+        .then(result => console.log(result))
+        .catch(console.error);
+    },
     // updateAgency({
     //   commit,
     // }, item) {