Added Update Profile

src/components/shared/navBar.vue

@@ -186,6 +186,17 @@
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Offers')">Offers</a>
               </div>
             </li>
+            <li v-if="isLoggedIn">
+              <a
+                class="nav-link"
+                @click="routerGoTo('/user/updateProfileInfo')"
+                id="navbarDropdown"
+                role="button"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+              >Update Profile</a>
+            </li>
             <li class="nav-item dropdown" v-if="!isLoggedIn">
               <a
                 class="nav-link"

src/components/user/registerPage.vue

@@ -119,7 +119,7 @@
                   class="form-control"
                   :type="isPasswordShown"
                   v-model="registerIndividual.password"
-                  id="password"
+                  id="confirmpassword"
                   placeholder="Confirm Password"
                   name="confirmpassword"
                   value

src/components/user/updateProfileInfo.vue

@@ -0,0 +1,71 @@
+<template>
+  <!-- eslint-disable max-len -->
+  <div class="container">
+    <br />
+    <div class="row">
+      <div class="col-md-12 col-lg-8">
+        <div class="title-box-d">
+          <h1 class="title-d" style="text-align:left; font-size: 250%">Update Profile Info</h1>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <table class="table table-bordered">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Surname</th>
+            <th>Cell Number</th>
+            <th>Telephone Number</th>
+            <th>Email</th>
+            <th>Role</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in individuals" :key="i">
+            <td>{{ item.id }}</td>
+            <td>{{ item.name }}</td>
+            <td>{{ item.surname }}</td>
+            <td>{{ item.cellNumber }}</td>
+            <td>{{ item.telephone }}</td>
+            <td>{{ item.email }}</td>
+            <td v-if="item.user">{{ item.user.role }}</td>
+            <td v-else></td>
+            <td>
+              <button
+                type="button"
+                @click="Edit(item)"
+                class="btn btn-b-n"
+                style="width: 85px; height:40px;"
+              >Edit</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <br />
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+// import axios from 'axios';
+
+export default {
+  name: 'UpdateInfo',
+  data() {
+    return {};
+  },
+  methods: {
+    ...mapActions('registerIndividual', ['getIndividuals']),
+  },
+  mounted() {
+    this.getIndividuals();
+  },
+  computed: {
+    ...mapState('registerIndividual', ['individuals']),
+  },
+};
+</script>

src/router/index.js

@@ -13,6 +13,7 @@ import MyWeeksPage from '../components/timeshare/myWeeksPage.vue';
 import Login from '../components/user/loginPage.vue';
 import PrivateIndividual from '../components/user/registerPage.vue';
 import Agency from '../components/user/registerAgencySection.vue';
+import UpdateInfo from '../components/user/updateProfileInfo.vue';
 
 import PropertySearch from '../components/property/propertySearchPage.vue';
 import PropertyPage from '../components/property/propertyPage.vue';
@@ -46,7 +47,6 @@ import searchLog from '../components/admin/logs/SearchLogs.vue';
 
 Vue.use(Router);
 
-
 export default new Router({
   scrollBehavior(to, from, savedPosition) {
     return {
@@ -54,187 +54,193 @@ export default new Router({
       y: 0,
     };
   },
-  routes: [{
-    path: '/',
-    name: 'Home',
-    component: HomePage,
-  },
-  {
-    path: '/about/us',
-    name: 'aboutus',
-    component: AboutUs,
-  },
-  {
-    path: '/about/timeshare',
-    name: 'abouttimeshare',
-    component: AboutTimeshare,
-  },
-  {
-    path: '/timeshare/sell',
-    name: 'TimeshareSell',
-    component: TimeshareSell,
-  },
-  {
-    path: '/timeshare/buy',
-    name: 'TimeshareBuy',
-    component: TimeshareBuy,
-  },
-  {
-    path: '/timeshare/faq',
-    name: 'TimeshareFAQ',
-    component: TimeshareFAQ,
-  },
-  {
-    path: '/timeshare/myWeeks',
-    name: 'MyWeeks',
-    component: MyWeeksPage,
-  },
-  {
-    path: '/user/login',
-    name: 'Login',
-    component: Login,
-  },
-  {
-    path: '/user/register',
-    name: 'PrivateIndividual',
-    component: PrivateIndividual,
-  },
-  {
-    path: '/user/registeragency',
-    name: 'Agency',
-    component: Agency,
-  },
-  {
-    path: '/property/property/:id',
-    name: 'PropertyPage',
-    component: PropertyPage,
-  },
-  {
-    path: '/property/:propertyUsageType/search',
-    name: 'PropertySearch',
-    component: PropertySearch,
-  },
-  {
-    path: '/property/search',
-    name: 'PropertySearchTab',
-    component: PropertySearch,
-  },
-  {
-    path: '/property/:propType/:saleType',
-    name: 'PropertyNew',
-    component: PropertyEdit,
-  },
-  {
-    path: '/property/edit/:id/:propType/:saleType',
-    name: 'PropertyEdit',
-    component: PropertyEdit,
-  },
-  {
-    path: '/property/list/:propertyType/:user',
-    name: 'PropertyList',
-    component: PropertyList,
-  },
-  {
-    path: '/propertyTypes/list',
-    name: 'PropertyTypeList',
-    component: PropertyTypeList,
-  },
-  {
-    path: '/propertyType/new',
-    name: 'PropertyTypeNew',
-    component: PropertyType,
-  },
-  {
-    path: '/propertyType/:id',
-    name: 'PropertyTypeEdit',
-    component: PropertyType,
-  },
-  {
-    path: '/userDefinedGroups/list',
-    name: 'UserDefinedGroupsList',
-    component: UserDefinedGroups,
-  },
-  {
-    path: '/userDefinedGroups/userDefinedGroup/:id',
-    name: 'UserDefinedGroupEdit',
-    component: UserDefinedGroup,
-  },
-  {
-    path: '/userDefinedGroups/userDefinedGroup',
-    name: 'UserDefinedGroupNew',
-    component: UserDefinedGroup,
-  },
-  {
-    path: '/status/list',
-    name: 'StatusList',
-    component: Status,
-  },
-  {
-    path: '/status/timeshareAdmin',
-    name: 'TimeshareAdmin',
-    component: timeshareAdminPage,
-  },
-  {
-    path: '/status/tenderWeekAdmin',
-    name: 'TenderWeekAdmin',
-    component: tenderWeekAdminPage,
-  },
-  {
-    path: '/status/userManagementPage',
-    name: 'userManagementPage',
-    component: userManagementPage,
-  },
-  {
-    path: '/status/changeLogPage',
-    name: 'changeLogPage',
-    component: changeLogPage,
-  },
-  {
-    path: '/unitConfiguration/list',
-    name: 'UnitConfiguration',
-    component: UnitConfiguration,
-  },
-  {
-    path: '/contactus',
-    name: 'ContactUs',
-    component: ContactUs,
-  },
-  {
-    path: '/privacypolicy',
-    name: 'PrivacyPolicy',
-    component: PrivacyPolicy,
-  },
-  {
-    path: '/resort/:resortCode',
-    name: 'ResortPage',
-    component: ResortPage,
-    props: true,
-  },
-  {
-    path: '/resort/:resortCode/:weekId',
-    name: 'UnitPage',
-    component: UnitPage,
-    props: true,
-  },
-  {
-    path: '/MakeOffer',
-    name: 'MakeOffer',
-    component: MakeOffer,
-  },
-  {
-    path: '/Offers',
-    name: 'Offers',
-    component: Offer,
-  },
-  {
-    path: '/timeshare/search',
-    name: 'TimeshareSearch',
-    component: TimeshareSearch,
-  },
-  {
-    path: '/searchLog',
-    name: 'SearchLog',
-    component: searchLog,
-  },
+  routes: [
+    {
+      path: '/',
+      name: 'Home',
+      component: HomePage,
+    },
+    {
+      path: '/about/us',
+      name: 'aboutus',
+      component: AboutUs,
+    },
+    {
+      path: '/about/timeshare',
+      name: 'abouttimeshare',
+      component: AboutTimeshare,
+    },
+    {
+      path: '/timeshare/sell',
+      name: 'TimeshareSell',
+      component: TimeshareSell,
+    },
+    {
+      path: '/timeshare/buy',
+      name: 'TimeshareBuy',
+      component: TimeshareBuy,
+    },
+    {
+      path: '/timeshare/faq',
+      name: 'TimeshareFAQ',
+      component: TimeshareFAQ,
+    },
+    {
+      path: '/timeshare/myWeeks',
+      name: 'MyWeeks',
+      component: MyWeeksPage,
+    },
+    {
+      path: '/user/login',
+      name: 'Login',
+      component: Login,
+    },
+    {
+      path: '/user/updateProfileInfo',
+      name: 'UpdateInfo',
+      component: UpdateInfo,
+    },
+    {
+      path: '/user/register',
+      name: 'PrivateIndividual',
+      component: PrivateIndividual,
+    },
+    {
+      path: '/user/registeragency',
+      name: 'Agency',
+      component: Agency,
+    },
+    {
+      path: '/property/property/:id',
+      name: 'PropertyPage',
+      component: PropertyPage,
+    },
+    {
+      path: '/property/:propertyUsageType/search',
+      name: 'PropertySearch',
+      component: PropertySearch,
+    },
+    {
+      path: '/property/search',
+      name: 'PropertySearchTab',
+      component: PropertySearch,
+    },
+    {
+      path: '/property/:propType/:saleType',
+      name: 'PropertyNew',
+      component: PropertyEdit,
+    },
+    {
+      path: '/property/edit/:id/:propType/:saleType',
+      name: 'PropertyEdit',
+      component: PropertyEdit,
+    },
+    {
+      path: '/property/list/:propertyType/:user',
+      name: 'PropertyList',
+      component: PropertyList,
+    },
+    {
+      path: '/propertyTypes/list',
+      name: 'PropertyTypeList',
+      component: PropertyTypeList,
+    },
+    {
+      path: '/propertyType/new',
+      name: 'PropertyTypeNew',
+      component: PropertyType,
+    },
+    {
+      path: '/propertyType/:id',
+      name: 'PropertyTypeEdit',
+      component: PropertyType,
+    },
+    {
+      path: '/userDefinedGroups/list',
+      name: 'UserDefinedGroupsList',
+      component: UserDefinedGroups,
+    },
+    {
+      path: '/userDefinedGroups/userDefinedGroup/:id',
+      name: 'UserDefinedGroupEdit',
+      component: UserDefinedGroup,
+    },
+    {
+      path: '/userDefinedGroups/userDefinedGroup',
+      name: 'UserDefinedGroupNew',
+      component: UserDefinedGroup,
+    },
+    {
+      path: '/status/list',
+      name: 'StatusList',
+      component: Status,
+    },
+    {
+      path: '/status/timeshareAdmin',
+      name: 'TimeshareAdmin',
+      component: timeshareAdminPage,
+    },
+    {
+      path: '/status/tenderWeekAdmin',
+      name: 'TenderWeekAdmin',
+      component: tenderWeekAdminPage,
+    },
+    {
+      path: '/status/userManagementPage',
+      name: 'userManagementPage',
+      component: userManagementPage,
+    },
+    {
+      path: '/status/changeLogPage',
+      name: 'changeLogPage',
+      component: changeLogPage,
+    },
+    {
+      path: '/unitConfiguration/list',
+      name: 'UnitConfiguration',
+      component: UnitConfiguration,
+    },
+    {
+      path: '/contactus',
+      name: 'ContactUs',
+      component: ContactUs,
+    },
+    {
+      path: '/privacypolicy',
+      name: 'PrivacyPolicy',
+      component: PrivacyPolicy,
+    },
+    {
+      path: '/resort/:resortCode',
+      name: 'ResortPage',
+      component: ResortPage,
+      props: true,
+    },
+    {
+      path: '/resort/:resortCode/:weekId',
+      name: 'UnitPage',
+      component: UnitPage,
+      props: true,
+    },
+    {
+      path: '/MakeOffer',
+      name: 'MakeOffer',
+      component: MakeOffer,
+    },
+    {
+      path: '/Offers',
+      name: 'Offers',
+      component: Offer,
+    },
+    {
+      path: '/timeshare/search',
+      name: 'TimeshareSearch',
+      component: TimeshareSearch,
+    },
+    {
+      path: '/searchLog',
+      name: 'SearchLog',
+      component: searchLog,
+    },
   ],
 });