User log

Mytimeshare

README.md

 # UnivateProperties
 
+## Project setup
+
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+
+```
+npm run build
+```
+
+### Run your tests
+
+```
+npm run test
+```
+
+### Lints and fixes files
+
+```
+npm run lint
+```
+
+### Customize configuration
+
+See [Configuration Reference](https://cli.vuejs.org/config/).
+
+### Structure
+
+├── index.html
+├── main.js
+├── assets
+│ └── staticData
+│ ├── alertTypes.js
+│ ├── itemsPerPage.js
+│ ├── maritalStatus.js
+│  
+├── components
+│ ├── App.vue
+│ └── ...
+└── store
+├── index.js # where we assemble modules and export the store
+├── actions.js # root actions
+├── mutations.js # root mutations
+└── modules
+├── cart.js # cart module
+└── products.js # products module

package-lock.json

         "to-fast-properties": "^2.0.0"
       }
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "5.11.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.11.2.tgz",
+      "integrity": "sha512-XiUPoS79r1G7PcpnNtq85TJ7inJWe0v+b5oZJZKb0pGHNIV6+UiNeQWiFGmuQ0aj7GEhnD/v9iqxIsjuRKtEnQ==",
+      "dev": true
+    },
     "@hapi/address": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.0.0.tgz",

package.json

     "vuex": "^3.1.1"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.11.2",
     "@vue/cli-plugin-babel": "^3.8.0",
     "@vue/cli-plugin-eslint": "^3.8.0",
     "@vue/cli-service": "^3.8.0",

src/App.vue

 </script>
 
 <style>
+hr {
+  background-color: #60cbeb;
+}
 .title-img {
   width: 800px;
   height: 400px;
 }
 .myFill {
   fill: #60cbeb;
+  color: #60cbeb;
 }
 a {
   cursor: pointer;

src/assets/Log.js

 const items = {
+  setValues(item) {
+    localStorage.setItem('user', JSON.stringify(item.user));
+    localStorage.setItem('token', JSON.stringify(item.token));
+    localStorage.setItem('person', JSON.stringify(item.person));
+    localStorage.setItem('agency', JSON.stringify(item.agency));
+  },
+  tokenExpired() {
+    const item = this.getJSONObject('token');
+    if (!item && !item.expires && item.expires !== null) {
+      const today = new Date();
+      const date = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;
+      const time = `${today.getHours()}:${today.getMinutes()}:${today.getSeconds()}`;
+      const dateTime = `${date} ${time}`;
+      return item.expires > dateTime;
+    }
+    return true;
+  },
+  updateTokenExpiry() {
+    const item = this.getJSONObject('token');
+    if (!item && !item.expires) {
+      item.expires = this.addMinutes();
+      localStorage.removeItem('token');
+      localStorage.setItem('token', JSON.stringify(item));
+    }
+  },
+  getJSONObject(itemString) {
+    const item = localStorage.getItem(itemString);
+    if (!item) {
+      return JSON.parse(item);
+    }
+    return item;
+  },
+  addMinutes() {
+    const today = new Date();
+    const date = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;
+    const time = `${today.getHours()}:${today.getMinutes()}:${today.getSeconds()}`;
+    const dateTime = `${date} ${time}`;
+    return new Date(dateTime + 15 * 60000);
+  },
+  clearValues() {
+    localStorage.removeItem('user');
+    localStorage.removeItem('token');
+    localStorage.removeItem('person');
+    localStorage.removeItem('agency');
+  },
   isLoggedIn() {
-    return localStorage.getItem('token') !== undefined;
+    return localStorage.getItem('token') !== undefined && localStorage.getItem('token') !== null;
   },
   getUser() {
-    return localStorage.getItem('User');
+    return localStorage.getItem('user');
   },
 };
 export default items;

src/components/property/propertySearchFields.vue

           </div>
           <select
             class="form-control"
-            id="forSelector"
             v-model="propertySearch.salesType"
             @change="salesTypeSelected"
           >
               <b>T</b>
             </span>
           </div>
-          <select
-            class="form-control"
-            id="forSelector"
-            v-model="resType"
-            @change="PropertyTypeSelected"
-          >
+          <select class="form-control" v-model="resType" @change="PropertyTypeSelected">
             <option>All</option>
             <option
               v-for="(propertyType, i) in propertyTypesRes"
               <b>T</b>
             </span>
           </div>
-          <select
-            class="form-control"
-            id="forSelector"
-            v-model="comType"
-            @change="PropertyTypeSelected"
-          >
+          <select class="form-control" v-model="comType" @change="PropertyTypeSelected">
             <option>All</option>
             <option
               v-for="(propertyType, i) in propertyTypesCom"
               <b>P</b>
             </span>
           </div>
-          <select
-            class="form-control"
-            id="provinceselector"
-            @change="ProvinceSelected"
-            v-model="propertySearch.province"
-          >
+          <select class="form-control" @change="ProvinceSelected" v-model="propertySearch.province">
             <option>All</option>
             <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
           </select>
               <b>C</b>
             </span>
           </div>
-          <select
-            class="form-control"
-            id="cityselector"
-            @change="CitySelected"
-            v-model="propertySearch.city"
-          >
+          <select class="form-control" @change="CitySelected" v-model="propertySearch.city">
             <option>All</option>
             <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
           </select>
               <b>S</b>
             </span>
           </div>
-          <select
-            class="form-control"
-            id="suburbselector"
-            v-model="propertySearch.suburb"
-            @change="SuburbSeleted"
-          >
+          <select class="form-control" v-model="propertySearch.suburb" @change="SuburbSeleted">
             <option>All</option>
             <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
           </select>
                 class="form-control"
                 type="number"
                 step="any"
-                id="minPrice"
                 name="minPrice"
                 v-model="propertySearch.minPrice"
               />
                 class="form-control"
                 type="number"
                 step="any"
-                id="maxPrice"
                 name="maxPrice"
                 v-model="propertySearch.maxPrice"
               />

src/components/shared/footerSection.vue

                       <eva-icon name="slash-outline" class="myFill"></eva-icon>
                       <router-link to="/privacypolicy">Privacy Policy</router-link>
                     </li>
-                    <br />
                     <li class="list-inline-item">
                       <a href="https://www.facebook.com/univateproperties/">
                         <eva-icon name="facebook-outline" class="myFill"></eva-icon>Facebook

src/components/shared/navBar.vue

                   @click="routerGoTo('/timeshare/sell')"
                 >To Sell</a>
                 <a
-                  v-if="showLogout"
+                  v-if="isLoggedIn"
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/timeshare/sell')"
                 >My Timeshare Weeks</a>
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/property/Residential/Rental')"
                 >To Rent Residential Properties</a>
-                <hr v-if="showLogout" />
+                <hr v-if="isLoggedIn" />
                 <a
-                  v-if="showLogout"
+                  v-if="isLoggedIn"
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/property/list/Commercial/MyListings')"
                 >My Commercial Properties</a>
                 <a
-                  v-if="showLogout"
+                  v-if="isLoggedIn"
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/property/list/Residential/MyListings')"
                 >My Residential Properties</a>
               </div>
             </li>
 
-            <li v-if="showLogout" class="nav-item dropdown">
+            <li v-if="isLoggedIn" class="nav-item dropdown">
               <a
                 class="nav-link dropdown-toggle"
                 href="#"
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Offers')">Offers</a>
               </div>
             </li>
-            <li class="nav-item dropdown" v-if="hideLogin">
+            <li class="nav-item dropdown" v-if="!isLoggedIn">
               <a
                 class="nav-link"
                 @click="routerGoTo('/user/login')"
                 aria-expanded="false"
               >Login</a>
             </li>
-            <li class="nav-item dropdown" v-if="showLogout">
+            <li class="nav-item dropdown" v-if="isLoggedIn">
               <span>
                 <a class="nav-link" @click="logout(routerGoTo('/user/login'))">Logout</a>
               </span>
               <!-- <span v-else></span> -->
             </li>
             <li>
-              <span v-if="showLogout">
+              <span v-if="isLoggedIn">
                 <a>
                   Welcome!
                   <br />
-                  {{ username }}
+                  {{ NAME }}
                 </a>
               </span>
               <span v-else></span>
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 
 export default {
-  data() {
-    return {
-      username: sessionStorage.getItem('name'),
-    };
-  },
   computed: {
-    showLogout() {
-      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-      this.username = sessionStorage.getItem('name');
-      return this.$store.state.authentication.status === 'success';
+    ...mapState('authentication', [
+      'user',
+      'flag',
+      'status',
+      'person',
+      'token',
+    ]),
+    NAME() {
+      return JSON.parse(this.person).fullName;
     },
-    hideLogin() {
-      return this.$store.state.authentication.status !== 'success';
+    isLoggedIn() {
+      return this.token !== null && this.token !== undefined;
     },
     // eslint-disable-next-line vue/return-in-computed-property
     Logout() {
-      return this.$store.state.authentication.methods.logout;
+      return this.logout();
     },
   },
-
   methods: {
-    ...mapGetters('authentication', ['isLoggedIn']),
     ...mapActions('authentication', ['logout']),
 
     routerGoTo(goTo) {

src/components/shared/searchTab.vue

           <div class="col-md-12">
             <div class="form-group" style="text-align:left">
               <label for="Type">Keyword</label>
-              <input
-                type="text"
-                class="form-control"
-                placeholder="Keyword"
-                v-model="propertySearch.keyword"
-              />
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text myFill" style="font-size:75%;">
+                    <i class="fa fa-search"></i>
+                  </span>
+                </div>
+                <input type="text" class="form-control" placeholder="Keyword" v-model="keyword" />
+                <div class="input-group-append" @click="clearFilter('resort')">
+                  <span class="input-group-text cursor-pointer myFill">
+                    <b>X</b>
+                  </span>
+                </div>
+              </div>
             </div>
           </div>
           <div class="col-md-12">
                 role="tabpanel"
                 aria-labelledby="pills-video-tab"
               >
-                <timeshareSearch />
+                <timeshareSearch :keyword="keyword" />
               </div>
               <div
                 class="tab-pane fade"
   data() {
     return {
       selectedPropertyType: 'timeshare',
+      keyword: '',
       propertySearch: {
         keyword: '',
         userName: '',

src/components/timeshare/buy/buyPage.vue

           </div>
         </div>
         <div class="container col-md-10">
-          <br />
+          <hr />
           <div class="row">
             <div class="col-md-12 text-left">
               <p>
               </p>
             </div>
           </div>
-          <br />
+          <hr />
           <div class="row mb-4">
             <div class="container col-md-4">
               <div class="accordion" id="accordionExample">
                   </a>
                   <div
                     :id="'collapse' + region.regionCode"
-                    class="collapse"
+                    class="collapse secondary"
                     :aria-labelledby="'header' + region.regionCode"
                     data-parent="#accordionExample"
+                    style="background-color:#E3E3E3"
                   >
                     <div class="card-body">
-                      <p class="mb-0" v-for="(resort, i) in region.resorts" :key="i">
-                        <a
-                          class="cursor-pointer"
-                          href="#"
-                          @click="routerGoTo('/resort/' + resort.resortCode)"
-                          @mouseover="updateMap(resort)"
-                        >{{resort.resortName + ' (' + resort.available + ')'}}</a>
-                        <br />
-                      </p>
+                      <div
+                        v-for="(resort, i) in region.resorts"
+                        :key="i"
+                        @click="routerGoTo('/resort/' + resort.resortCode)"
+                        @mouseover="updateMap(resort)"
+                      >
+                        <p class="mb-0 card-item">
+                          <a
+                            class="cursor-pointer"
+                            href="#"
+                          >{{resort.resortName + ' (' + resort.available + ')'}}</a>
+                          <br />
+                        </p>
+                      </div>
                     </div>
                   </div>
                 </div>
   color: #60cbeb;
   text-align: left;
 }
+.card-item {
+  font-size: 100%;
+}
+.card-item:hover {
+  background-color: rgba(255, 255, 255, 0.75);
+  border-radius: 5px;
+  cursor: pointer;
+}
 </style>

src/components/timeshare/myWeeksPage.vue

+<template>
+  <div>
+    <br />
+    <br />
+    <br />
+    <br />
+    <img
+      src="http://www.provision-sa.com:3000/Provision/UnivateProperties/src/branch/master/public/img/logos/UVProp.png"
+      height="200"
+      width="200"
+    />
+    {{getUser}}
+    <br />
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+import log from '../../assets/Log';
+
+export default {
+  computed: {
+    ...mapState('myWeeks', ['test']),
+    getUser() {
+      return log.getUser();
+    },
+  },
+};
+</script>

src/components/timeshare/resort/unitPage.vue

 }
 .price-label {
   color: black;
-  font-size: 250%;
+  font-size: 225%;
 }
 </style>

src/components/timeshare/searchTimeshare.vue

         <label>Province</label>
         <div class="input-group mb-3">
           <div class="input-group-prepend">
-            <span class="input-group-text" style="color: #60CBEB">
-              <b>P</b>
+            <span class="input-group-text myFill">
+              <i class="fa fa-map"></i>
             </span>
           </div>
           <select class="form-control" name="region" id="region" v-model="filter.region">
             <option v-for="(item, i) in regions" :key="i" :value="item">{{item.regionName}}</option>
           </select>
           <div class="input-group-append" @click="clearFilter('region')">
-            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+            <span class="input-group-text cursor-pointer myFill">
               <b>X</b>
             </span>
           </div>
         <label>Resort Name</label>
         <div class="input-group mb-3">
           <div class="input-group-prepend">
-            <span class="input-group-text" style="color: #60CBEB">
+            <span class="input-group-text myFill" style="font-size:75%;">
               <b>RN</b>
             </span>
           </div>
             <option v-for="(item, i) in filteredResorts" :key="i" :value="item">{{item.resortName}}</option>
           </select>
           <div class="input-group-append" @click="clearFilter('resort')">
-            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+            <span class="input-group-text cursor-pointer myFill">
               <b>X</b>
             </span>
           </div>
         <label>Bedrooms</label>
         <div class="input-group mb-3">
           <div class="input-group-prepend">
-            <span class="input-group-text" style="color: #60CBEB">
-              <b>Bed</b>
+            <span class="input-group-text myFill">
+              <i class="fa fa-bed"></i>
             </span>
           </div>
           <select class="form-control" name="bedrooms" v-model="filter.bedrooms">
             <option v-for="(item, i) in resortBedrooms" :key="i">{{item}}</option>
           </select>
           <div class="input-group-append" @click="clearFilter('bedrooms')">
-            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+            <span class="input-group-text cursor-pointer myFill">
               <b>X</b>
             </span>
           </div>
         </div>
       </div>
-      <hr />
       <div class="form-group text-left">
         <label>Date</label>
         <div class="input-group mb-3">
           <div class="input-group-prepend">
-            <span class="input-group-text" style="color: #60CBEB">
-              <b>D</b>
+            <span class="input-group-text myFill">
+              <i class="fa fa-calendar"></i>
             </span>
           </div>
           <input type="date" class="form-control" name="arrivaldate" v-model="filter.date" />
           <div class="input-group-append" @click="clearFilter('date')">
-            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+            <span class="input-group-text cursor-pointer myFill">
               <b>X</b>
             </span>
           </div>
         </div>
       </div>
-      <hr />
       <div class="form-group">
         <div class="row">
           <div class="col-md-6 text-left">
             <label>Minimum Price</label>
             <div class="input-group mb-3">
               <div class="input-group-prepend">
-                <span class="input-group-text" style="color: #60CBEB">
+                <span class="input-group-text myFill">
                   <b>R</b>
                 </span>
               </div>
                 v-model="filter.minPrice"
               />
               <div class="input-group-append" @click="clearFilter('minPrice')">
-                <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+                <span class="input-group-text cursor-pointer myFill">
                   <b>X</b>
                 </span>
               </div>
 export default {
   props: {
     hideTop: undefined,
+    keyword: undefined,
   },
   created() {
     this.initTimeshare();

src/components/user/loginPage.vue

           </div>
           <div class="form-group row"></div>
           <button @click="Login()" class="btn btn-b-n" type="submit">Sign In</button>
-          <p v-if="user !== null">{{ user }}</p>
           <hr />
           <button
             @click="routerGoTo('/user/register')"
   },
   data() {
     return {
-      username: '',
-      user: null,
       isPasswordShown: 'password',
       selectItems: [{ text: 'password', value: 0 }],
       selectErrors: 'Some error with the field',
       textErrors: 'Some error with the field',
       text: '',
       showPassword: false,
-      password: '',
       email: '',
     };
   },
   computed: {
-    ...mapState('authentication', ['token', 'status']),
+    ...mapState('authentication', ['token', 'status', 'username', 'password']),
   },
   methods: {
-    ...mapActions('authentication', ['login']),
+    ...mapActions('authentication', ['login', 'init']),
     Login() {
-      this.login({ username: this.username, password: this.password })
-        .then(() => this.router.push('/'))
-        .catch(err => console.log(err));
-      this.$router.push('/about/us');
+      this.login()
+        .then(() => {})
+        .catch(() => {});
     },
     togglePassword() {
       this.showPassword = true;

src/router/index.js

 import TimeshareSell from '../components/timeshare/sell/sellPage.vue';
 import TimeshareFAQ from '../components/timeshare/faqPage.vue';
 import TimeshareSearch from '../components/timeshare/buy/weekListPage.vue';
+import MyWeeksPage from '../components/timeshare/myWeeksPage.vue';
 
 import Login from '../components/user/loginPage.vue';
 import PrivateIndividual from '../components/user/registerPage.vue';
 
 Vue.use(Router);
 
+
 export default new Router({
   scrollBehavior(to, from, savedPosition) {
     return {
       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: '/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/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,
+  },
   ],
 });

src/store/index.js

 import PropertyTypes from './modules/property/propertyTypes';
 import Register from './modules/user/register';
 import WeekList from './modules/timeshare/weekList';
+import MyWeeks from './modules/timeshare/myWeeks';
 import Bid from './modules/processFlow/bid';
 import Authentication from './modules/user/authentication';
 import PropertySearch from './modules/property/propertySearch';
 /* eslint no-param-reassign: ["error", { "props": false }] */
 export default new Vuex.Store({
   modules: {
+    myWeeks: MyWeeks,
     timeshare: TimeshareModule,
     users: UsersModule,
     status: StatusModule,

src/store/modules/timeshare/myWeeks.js

+export default {
+  namespaced: true,
+  state: {
+    test: 'kobus',
+    items: [],
+  },
+  mutations: {},
+  getters: {},
+  actions: {},
+};

src/store/modules/timeshare/weekList.js

       date: undefined,
       minPrice: undefined,
       maxPrice: undefined,
-      keyword: null,
+      keyword: undefined,
     },
+    prevFilter: undefined,
+    difFilter: undefined,
   },
   mutations: {
     onClearFilter(state, filter) {
   },
   getters: {
     filteredWeeks: (state) => {
+      console.log(JSON.stringify(state.filter));
       let weekList = state.weeks;
       const {
         filter,
     }, filter) {
       commit('onClearFilter', filter);
     },
-    addDummyWeek({
-      commit,
-    }) {
-      commit('addWeek', {
-        id: 1,
-        unit: '359',
-        week: 'N18',
-        module: '359/N18 River View',
-        sellingPrice: 85000,
-        currentLevy: 5455,
-        arrivalDate: '2019/09/09',
-        departureDate: '2019/09/16',
-        region: {
-          regionCode: 'EC',
-          regionName: 'Eastern Cape',
-          id: 1,
-        },
-        resort: {
-          resortName: 'Ekuthuleni Hoedspruit',
-          resortCode: 'EKU',
-          town: 'Hoedspruit',
-          city: 'Hoedspruit',
-          id: 17,
-        },
-        bedrooms: '2',
-        unitNumber: '18',
-        weekNumber: '25',
-      });
-    },
   },
 };

src/store/modules/user/authentication.js

 import Vue from 'vue';
 import Vuex from 'vuex';
 import axios from 'axios';
+import log from '../../../assets/Log';
 
 Vue.use(Vuex);
 export default {
   namespaced: true,
   state: {
-    status: '',
-    token: sessionStorage.getItem('token') || '',
-    user: {},
-    individual: {},
+    username: 'UniVate2018',
+    password: 'UniVate2018',
+    isLoggedIn: log.isLoggedIn(),
+    flag: false,
+    status: undefined,
+    token: undefined,
+    user: undefined,
+    person: undefined,
+    agency: undefined,
   },
   mutations: {
     auth_request(state) {
       state.status = 'loading';
     },
-    auth_success(state, token, user) {
+    auth_success(state, user) {
       state.status = 'success';
-      state.token = token;
-      state.user = user;
+      state.token = user.token;
+      state.user = user.user;
+      state.person = user.person;
+      state.agency = user.agency;
     },
     auth_error(state) {
       state.status = 'error';
     },
     logout(state) {
-      state.status = '';
-      state.token = '';
+      state.status = undefined;
+      state.token = undefined;
+      state.person = undefined;
+      state.agency = undefined;
+      state.user = undefined;
+    },
+    runInit(state, item) {
+      state.flag = true;
+      state.user = item.user;
+      state.token = item.token;
+      state.person = item.person;
+      state.agency = item.agency;
+    },
+    updateFlag(state) {
+      state.flag = true;
     },
   },
   getters: {
-    isLoggedIn: state => !!state.token,
     authStatus: state => state.status,
   },
   actions: {
-    login({ commit }, user) {
+    init({
+      commit,
+    }) {
+      console.log('init');
+      if (!log.isLoggedIn() && log.tokenExpired) {
+        log.clearValues();
+      } else log.updateTokenExpiry();
+      commit('runInit', {
+        user: log.getJSONObject('user'),
+        token: log.getJSONObject('token'),
+        person: log.getJSONObject('person'),
+        agency: log.getJSONObject('agency'),
+      });
+    },
+    login({
+      commit,
+      state,
+    }) {
       return new Promise((reject) => {
+        console.log(state.username);
         commit('auth_request');
+        const user = {
+          username: state.username,
+          password: state.password,
+        };
         axios({
           url: '/api/register/authenticate',
           data: user,
           method: 'POST',
         })
           .then((resp) => {
-            console.log(resp.data);
-            sessionStorage.setItem('token', resp.data.token);
-            sessionStorage.setItem('username', resp.data.username);
-            sessionStorage.setItem('name', resp.data.name);
-            commit('auth_success', resp.data.token, resp.data);
+            console.log(resp);
+            log.clearValues();
+            log.setValues(resp.data);
+            commit('auth_success', resp.data);
           })
           .catch((err) => {
+            console.log(err);
             commit('auth_error');
-            sessionStorage.removeItem('token');
-            sessionStorage.removeItem('username');
-            sessionStorage.removeItem('name');
+            log.clearValues();
             reject(err);
           });
       });
     },
-    logout({ commit }) {
+    logout({
+      commit,
+    }) {
       return new Promise(() => {
         commit('logout');
-        sessionStorage.removeItem('token');
-        sessionStorage.removeItem('username');
-        sessionStorage.removeItem('name');
+        log.clearValues();
         delete axios.defaults.headers.common.Authorization;
       });
     },