George - Merge fixes

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;
+  border-radius: 10px;
+}
+.title-title {
+  opacity: 0.7;
+  border: white solid 3px;
+  border-radius: 15px;
+}
 .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/about/aboutTimeshare.vue

       <div class="row">
         <div class="col-sm-12">
           <div class="about-img-box">
-            <img
-              src="img/timeshare2.jpg"
-              alt="About Timeshare"
-              class="img-fluid"
-              style="width:800px;height:400px; border-radius:10px"
-            />
+            <img src="img/timeshare2.jpg" alt="About Timeshare" class="img-fluid title-img" />
           </div>
-          <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
+          <div class="sinse-box title-title">
             <h3 class="sinse-title">Timeshare Resales</h3>
           </div>
         </div>
             </div>
             <div class="col-md-6 col-lg-5 section-md-t3">
               <p class="color-text-a font-weight-bold" style="text-align:left;">
-                found that there was a desperate need for a reputable source for buyers and
+                Uni-Vate Properties found that there was a desperate need for a reputable source for buyers and
                 sellers to turn to with their timeshare needs in South Africa. Over the
                 years, Uni-Vate has developed a treasure of networking alliances of professional
                 acquaintances and that has made timeshare resales a pleasure for both buyers and

src/components/about/aboutUsPage.vue

       <div class="row">
         <div class="col-sm-12">
           <div class="about-img-box">
-            <img
-              src="img/slide-about-1.jpg"
-              alt
-              class="img-fluid"
-              style="width:800px;height:400px; border-radius:10px"
-            />
+            <img src="img/slide-about-1.jpg" alt class="img-fluid title-img" />
           </div>
-          <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
+          <div class="sinse-box title-title">
             <h3 class="sinse-title">About Us</h3>
           </div>
         </div>

src/components/misc/contactUs.vue

           <img
             src="img/Contact-us2.jpg"
             alt="Frequently Asked Questions"
-            class="img-fluid"
-            style="width:800px;height:400px; border-radius:10px"
+            class="img-fluid title-img"
           />
         </div>
-        <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
+        <div class="sinse-box title-title">
           <h3 class="sinse-title">Contact Us</h3>
         </div>
       </div>

src/components/misc/privacyPolicyPage.vue

     <div class="row">
       <div class="col-sm-12">
         <div class="about-img-box">
-          <img
-            src="img/privacy.jpg"
-            alt="Privacy Policy"
-            class="img-fluid"
-            style="width:800px;height:400px; border-radius:10px"
-          />
+          <img src="img/privacy.jpg" alt="Privacy Policy" class="img-fluid title-img" />
         </div>
-        <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
+        <div class="sinse-box title-title">
           <h5 class="sinse-title">Privacy Policy</h5>
         </div>
       </div>

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

           <span></span>
           <span></span>
         </button>
-        <a class="navbar-brand text-brand" @click="routerGoTo('/')">
+        <div class="navbar-brand text-brand" style="cursor: pointer;" @click="routerGoTo('/')">
           <img
             class="img-fluid"
             src="/img/logos/UVProp.png"
           />
           Uni-Vate
           <span class="color-b">Properties</span>
-        </a>
+        </div>
         <button
           type="button"
           class="btn btn-link nav-search navbar-toggle-box-collapse d-md-none"
       <div class="col-md-8">
         <div class="navbar-collapse collapse justify-content-center" id="navbarDefault">
           <ul class="navbar-nav">
-            <!-- <li class="nav-item">
-            <a class="nav-link active" @click="routerGoTo('/')">Home</a>
-            </li>-->
             <li class="nav-item dropdown">
               <a
                 class="nav-link dropdown-toggle"
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/timeshare/sell')"
                 >To Sell</a>
-                <a
-                  v-if="showLogout"
-                  class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/timeshare/sell')"
-                >My Timeshare Weeks</a>
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/faq')">FAQ</a>
+                <div v-if="isLoggedIn">
+                  <hr />
+                  <a
+                    v-if="isLoggedIn"
+                    class="dropdown-item cursor-pointer"
+                    @click="routerGoTo('/timeshare/sell')"
+                  >My Timeshare Weeks</a>
+                </div>
               </div>
             </li>
             <li class="nav-item dropdown">
                 >To Rent</a>
                 <hr v-if="showLogout" />
                 <a
-                  v-if="showLogout"
+                  v-if="isLoggedIn"
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/property/admin/list/my')"
                 >My 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 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) {
   },
 };
 </script>
+<style scoped>
+a {
+  border: transparent thin solid;
+  padding: 5px 12px;
+  font-size: 110%;
+}
+a:hover {
+  background-color: rgba(169, 224, 255, 0.75);
+  border-radius: 5px;
+  border: silver thin solid;
+}
+</style>

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 class="row">
         <div class="col-sm-12">
           <div class="tobuy-img-box">
-            <img
-              src="img/buy2.jpg"
-              alt="Timeshare To Buy"
-              class="img-fluid"
-              style="width:800px;height:400px; border-radius:10px"
-            />
+            <img src="img/buy2.jpg" alt="Timeshare To Buy" class="img-fluid title-img" />
           </div>
-          <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
+          <div class="sinse-box title-title">
             <h3 class="sinse-title">Timeshare To Buy</h3>
           </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">
-                <div class="card" v-for="(region, r) in regions" :key="r">
+                <div class="card" v-for="(region, r) in availRegion" :key="r">
                   <a
                     class="mb-0 color-text-a"
                     data-toggle="collapse"
-                    :data-target="'#collapse' + region.id"
+                    :data-target="'#collapse' + region.regionCode"
                     aria-expanded="false"
-                    :aria-controls="'collapse' + region.id"
+                    :aria-controls="'collapse' + region.regionCode"
+                    @mouseover="updateMapProvince(region.regionName)"
                   >
-                    <div :id="'header' + region.id">
+                    <div :id="'header' + region.regionCode">
                       <h5
                         class="btn btn-link font-weight-bold color-b"
-                        @mouseover="updateMapProvince(region.regionName)"
-                      >{{ region.regionName }}</h5>
+                      >{{ region.regionName + ' (' + region.available + ')' }}</h5>
                     </div>
                   </a>
                   <div
-                    :id="'collapse' + region.id"
-                    class="collapse"
-                    :aria-labelledby="'header' + region.id"
+                    :id="'collapse' + region.regionCode"
+                    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.resortCode)"
-                        >{{resort.resortName}}</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>
                     allowfullscreen
                   ></iframe>
                   <br />
-
                   <small>
-                    <a
-                      :href="mapUrl"
-                      style="color:#60CBEB;text-align:left"
-                      target="_blank"
-                    >See map bigger</a>
+                    <a :href="mapUrl" class="map-url" target="_blank">See map bigger</a>
                   </small>
                 </div>
               </div>
     };
   },
   mounted() {
-    this.getRegions();
+    console.log(4);
+    this.init();
   },
   computed: {
-    ...mapState('timeshareBuy', ['detailedRegion', 'resort']),
+    ...mapState('timeshareBuy', ['detailedRegion', 'resort', 'availRegion']),
     mapUrl() {
-      // return 'http://maps.google.com/maps/place/Gauteng/';
       return `http://maps.google.com/maps?q=${this.myMap}&z=${this.myZoom}&output=embed`;
     },
     regions() {
     },
   },
   methods: {
-    ...mapActions('timeshareBuy', ['getRegions', 'getResort']),
+    ...mapActions('timeshareBuy', [
+      'init',
+      'getAvail',
+      'getRegions',
+      'getResort',
+    ]),
     routerGoTo(goTo) {
       this.$router.push(goTo);
     },
-    updateMap(resortCode) {
-      this.myMap = 'SouthAfrice';
-      this.getResort(resortCode);
-      // `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=7&output=embed`;
-      this.myMap = `${this.resort.prLatitude},${this.resort.prLongitude}`;
+    updateMap(resort) {
+      this.myMap = 'SouthAfrica';
+      this.myMap = `${resort.lat},${resort.long}`;
       this.myZoom = 10;
     },
     updateMapProvince(province) {
   },
 };
 </script>
+<style scoped>
+.map-url {
+  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/faqPage.vue

             <img
               src="img/questions.jpg"
               alt="Frequently Asked Questions"
-              class="img-fluid"
-              style="width:800px;height:400px; border-radius:10px"
+              class="img-fluid title-img"
             />
           </div>
-          <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
+          <div class="sinse-box title-title">
             <h3 class="sinse-title">Frequently Asked Questions</h3>
           </div>
         </div>
         <div class="container col-md-10">
           <br />
           <div id="accordion">
-            <!-- <div class="card"> -->
             <div class="card" id="heading1">
-              <!-- <h5 class="mb-0 color-text-a"> -->
               <button
                 class="btn btn-link font-weight-bold color-b text-left"
                 data-toggle="collapse"
                 aria-expanded="true"
                 aria-controls="collapse1"
               >What is timeshare vacation ownership?</button>
-              <!-- </h5> -->
             </div>
             <div
               id="collapse1"
               class="collapse show color-text-a"
               aria-labelledby="heading1"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 Owning a timeshare means you own a portion of time in a specific unit in a resort. Most commonly the
               class="collapse"
               aria-labelledby="heading2"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 Most timeshare resorts are self-catering which means you have a ‘home away from home” holiday. You will
               class="collapse"
               aria-labelledby="heading3"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 Should the needs or lifestyle change for the timeshare owner, he may decide to sell his week. As a proud
               class="collapse"
               aria-labelledby="heading4"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 Uni-Vate Properties specialise in fixed weeks or flexi week timeshare but are qualified to sell and/or
               class="collapse"
               aria-labelledby="heading5"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 You can complete the on-line details which you will find under the “To Sell” tab. There will be a listing
               class="collapse"
               aria-labelledby="heading6"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 Timeshare is not an appreciating property investment but it is an investment into your vacation lifestyle.
               class="collapse"
               aria-labelledby="heading7"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 Through Uni-Vate Properties your week will be marketed extensively to all of their available channels.
               class="collapse"
               aria-labelledby="heading8"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 All available and verified weeks will be listed on the website for prospective buyers. Once you identify a
               class="collapse"
               aria-labelledby="heading9"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 By law, your money will be held in a trust account while the transfer is being processed. This trust
               class="collapse"
               aria-labelledby="heading10"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 Most definitely! Once the week has been transferred to you, you have a choice of membership with RCI
               class="collapse"
               aria-labelledby="heading"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 Uni-Vate Properties (Pty) Ltd is affiliated to the Estate Agents Board (EAAB) as well as the Institute of
               class="collapse"
               aria-labelledby="heading12"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 Both are equally viable. The difference is either the seller is the developer of a resort marketing
               class="collapse"
               aria-labelledby="heading13"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 The selling price is always market related determined by five factors. Resort quality, season, sleeper
               class="collapse"
               aria-labelledby="heading14"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 Levies are determined by the share block Board of Directors who are accountable to the shareholders. The

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/resortImage.vue

+<template>
+  <div class="outer">
+    <div id="mainImage">
+      <img class="img-fluid main-image" :src="imageX" alt="Resort Image" />
+    </div>
+    <div class="list-images">
+      <div class="scrolling-wrapper-flexbox row inner">
+        <div v-for="(image, i) in images" :key="i" :class="myClass">
+          <a @click="changeImage(i)">
+            <img class="small-image" :src="image" alt="Resort Image" />
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+  props: {
+    images: [],
+  },
+  data() {
+    return {
+      largeImg: 0,
+    };
+  },
+  computed: {
+    myClass() {
+      if (this.images && this.images.length === 3) {
+        return 'col-md-4';
+      }
+      return 'col-md-3 nopadding';
+    },
+    imageX() {
+      return this.images[this.largeImg];
+    },
+    ...mapState('resort', ['resort', 'description', 'images', 'layout']),
+  },
+  methods: {
+    changeImage(number) {
+      this.largeImg = number;
+    },
+  },
+};
+</script>
+<style scoped>
+.outer {
+  background-color: #efefef;
+  padding: 10px;
+}
+.inner {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.main-image {
+  max-width: 80%;
+  max-height: 412px;
+}
+.list-images {
+  padding: 5px;
+  float: left;
+  border-top: 1px solid #dedede;
+  border-right: 1px solid #dedede;
+  border-bottom: 1px solid #dedede;
+  background-color: white;
+  width: 100%;
+  text-align: center;
+}
+.small-image {
+  width: 100%;
+  height: 125px;
+}
+</style>

src/components/timeshare/resort/resortPage.vue

 <template>
   <!-- eslint-disable max-len -->
-  <section>
-    <div class="container">
-      <br />
-      <br />
-      <br />
-      <br />
+  <section class="my-top">
+    <div class="my-container">
       <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%">{{resort.prName}}</h1>
+            <h1 class="title-d my-title">{{resort.prName}}</h1>
           </div>
           <br />
         </div>
-        <div class="row mb-4">
-          <div class="col-md-4">
-            <img class="img-fluid" :src="image1" alt="Resort Image" style="border-radius:10px" />
-          </div>
-          <div class="col-md-4">
-            <img class="img-fluid" :src="image2" alt="Resort Image" style="border-radius:10px" />
-          </div>
-          <div class="col-md-4">
-            <img class="img-fluid" :src="image3" alt="Resort Image" style="border-radius:10px" />
+        <div class="col-md-6 col-lg-6">
+          <ResortImages :images="images" />
+        </div>
+        <div class="col-md-6">
+          <ul class="nav nav-tabs" id="myTab" role="tablist">
+            <li class="nav-item">
+              <a
+                class="nav-link active"
+                id="directions-tab"
+                data-toggle="tab"
+                href="#directions"
+                role="tab"
+                aria-controls="directions"
+                aria-selected="false"
+              >Directions</a>
+            </li>
+            <li class="nav-item">
+              <a
+                class="nav-link"
+                id="resort-layout-tab"
+                data-toggle="tab"
+                href="#resort-layout"
+                role="tab"
+                aria-controls="resort-layout"
+                aria-selected="true"
+              >Resort Layout</a>
+            </li>
+          </ul>
+          <div class="tab-content" id="myTabContent">
+            <div
+              class="tab-pane fade show active"
+              id="directions"
+              role="tabpanel"
+              aria-labelledby="directions-tab"
+            >
+              <iframe
+                :src="mapUrl"
+                width="100%"
+                height="300"
+                frameborder="0"
+                style="border:0"
+                allowfullscreen
+              ></iframe>
+              <br />
+              <small>
+                <a
+                  :href="mapUrl"
+                  style="color:#60CBEB;text-align:left"
+                  target="_blank"
+                >See map bigger</a>
+              </small>
+            </div>
+            <div
+              class="tab-pane fade"
+              id="resort-layout"
+              role="tabpanel"
+              aria-labelledby="resort-layout-tab"
+            >
+              <img class="img-fluid" :src="layout" alt="Resort Layout" />
+            </div>
           </div>
         </div>
       </div>
     </div>
+    <hr />
     <div class="myMargin">
       <div class="row">
-        <div class="col-md-3">
+        <div class="col-md-4">
           <h4>Filter Resort</h4>
           <FilterComponent :hideTop="true" />
         </div>
-        <div class="col-md-9">
+        <div class="col-md-8">
           <WeekList :resortCode="resortCode" />
           <div>
             <div class="btn btn-b-n" @click="routerGoTo('/timeshare/buy')">Back to Region</div>
           </div>
           {{description}}
           <hr />
-          <div class="row">
-            <div class="col-md-10 mb-4">
-              <ul class="nav nav-tabs" id="myTab" role="tablist">
-                <li class="nav-item">
-                  <a
-                    class="nav-link active"
-                    id="directions-tab"
-                    data-toggle="tab"
-                    href="#directions"
-                    role="tab"
-                    aria-controls="directions"
-                    aria-selected="false"
-                  >Directions</a>
-                </li>
-                <li class="nav-item">
-                  <a
-                    class="nav-link"
-                    id="resort-layout-tab"
-                    data-toggle="tab"
-                    href="#resort-layout"
-                    role="tab"
-                    aria-controls="resort-layout"
-                    aria-selected="true"
-                  >Resort Layout</a>
-                </li>
-              </ul>
-              <div class="tab-content" id="myTabContent">
-                <div
-                  class="tab-pane fade show active"
-                  id="directions"
-                  role="tabpanel"
-                  aria-labelledby="directions-tab"
-                >
-                  <iframe
-                    :src="mapUrl"
-                    width="100%"
-                    height="450"
-                    frameborder="0"
-                    style="border:0"
-                    allowfullscreen
-                  ></iframe>
-                  <br />
-
-                  <small>
-                    <a
-                      :href="mapUrl"
-                      style="color:#60CBEB;text-align:left"
-                      target="_blank"
-                    >See map bigger</a>
-                  </small>
-                </div>
-                <div
-                  class="tab-pane fade"
-                  id="resort-layout"
-                  role="tabpanel"
-                  aria-labelledby="resort-layout-tab"
-                >
-                  <img class="img-fluid" :src="layout" alt="Resort Layout" />
-                </div>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     </div>
 import { mapState, mapActions } from 'vuex';
 import WeekList from '../buy/weekListComponent.vue';
 import FilterComponent from '../searchTimeshare.vue';
+import ResortImages from './resortImage.vue';
 
 export default {
   props: {
   components: {
     WeekList,
     FilterComponent,
+    ResortImages,
   },
   mounted() {
     this.initResort(this.resortCode);
   },
   computed: {
-    ...mapState('resort', [
-      'resort',
-      'description',
-      'image1',
-      'image2',
-      'image3',
-      'layout',
-    ]),
+    ...mapState('resort', ['resort', 'description', 'images', 'layout']),
     mapUrl() {
       return this.resort
         ? `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=15&output=embed`
   },
 };
 </script>
-<style>
+<style scoped>
+.my-top {
+  padding-top: 25px;
+}
+.my-container {
+  padding-left: 200px;
+  padding-right: 200px;
+}
+.my-title {
+  text-align: left;
+  font-size: 250%;
+}
+.scrolling-wrapper-flexbox {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+.scrolling-wrapper-flexbox .card {
+  flex: 0 0 auto;
+}
+.nopadding {
+  padding: 1px !important;
+  margin: 0 !important;
+}
 .myMargin {
   margin-left: 2%;
   margin-right: 2%;

src/components/timeshare/resort/unitPage.vue

 <template>
   <!-- eslint-disable max-len -->
-  <div class="container">
+  <div class="my-container my-top">
     <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%"
-          >{{week ? week.resortName : ''}}</h1>
+          <h1 class="title-d my-title">{{week ? week.resortName : ''}}</h1>
         </div>
         <br />
       </div>
       <div class="row mb-4">
-        <div class="col-md-4">
-          <img class="img-fluid" :src="image1" alt="Resort Image" style="border-radius:10px" />
-        </div>
-        <div class="col-md-4">
-          <img class="img-fluid" :src="image2" alt="Resort Image" style="border-radius:10px" />
-        </div>
-        <div class="col-md-4">
-          <img class="img-fluid" :src="image3" alt="Resort Image" style="border-radius:10px" />
-        </div>
-      </div>
-    </div>
-    <br />
-    <div class="container col-md-12" style="text-align:left;">
-      <div class="row">
         <div class="col-md-6">
-          <div class="title-box-d">
-            <h3 class="title-d">Property Description</h3>
-          </div>
-          <p>{{description}}</p>
-          <div>
-            <div class="title-box-d">
-              <h3 class="title-d">Facilities</h3>
-            </div>
-            <div class="row" v-if="resort.prUnitFacilities">
-              <div
-                class="col-md-4"
-                v-for="(item, i) in resort.prUnitFacilities.split('\n')"
-                :key="i"
-              >{{item}}</div>
-            </div>
-          </div>
+          <ResortImages :images="images" />
         </div>
-        <div class="col-md-6" v-if="week">
-          <form
-            id="mainForm"
-            method="POST"
-            action="/interested-timeshare/"
-            accept-charset="UTF-8"
-            enctype="multipart/form-data"
-          >
-            <div class="title-box-d">
-              <h3 class="title-d">Summary</h3>
-            </div>
-            <div class="form-row">
-              <div class="col-md-6">
-                <label for="resortunit">Unit</label>
-                <div class="input-group mb-3">
-                  <div class="input-group-prepend">
-                    <span class="input-group-text" style="color: #60CBEB">
-                      <b>U#</b>
-                    </span>
+        <div class="col-md-6">
+          <hr />
+          <div v-if="week">
+            <form
+              id="mainForm"
+              method="POST"
+              action="/interested-timeshare/"
+              accept-charset="UTF-8"
+              enctype="multipart/form-data"
+            >
+              <div class="title-box-d">
+                <h3 class="title-d">Summary</h3>
+              </div>
+              <div class="form-row">
+                <div class="col-md-6">
+                  <label for="resortunit">Unit</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>U#</b>
+                      </span>
+                    </div>
+                    <input
+                      class="form-control"
+                      type="text"
+                      id="resort"
+                      name="resortunit"
+                      :value="week ? week.unitNumber : ''"
+                      disabled
+                    />
                   </div>
-                  <input
-                    class="form-control"
-                    type="text"
-                    id="resort"
-                    name="resortunit"
-                    :value="week ? week.unitNumber : ''"
-                    disabled
-                  />
                 </div>
-              </div>
-              <div class="col-md-6">
-                <label for="resortWeek">Module / Week Number</label>
-                <div class="input-group mb-3">
-                  <div class="input-group-prepend">
-                    <span class="input-group-text" style="color: #60CBEB">
-                      <b>M</b>
-                    </span>
+                <div class="col-md-6">
+                  <label for="resortWeek">Module / Week Number</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>M</b>
+                      </span>
+                    </div>
+                    <input
+                      class="form-control"
+                      type="text"
+                      id="week"
+                      name="resortWeek"
+                      :value="week ? week.weekNumber : ''"
+                      disabled
+                    />
                   </div>
-                  <input
-                    class="form-control"
-                    type="text"
-                    id="week"
-                    name="resortWeek"
-                    :value="week ? week.weekNumber : ''"
-                    disabled
-                  />
                 </div>
-              </div>
 
-              <div class="col-md-6">
-                <label for="resortModule">Current Year Levy</label>
-                <div class="input-group mb-3">
-                  <div class="input-group-prepend">
-                    <span class="input-group-text" style="color: #60CBEB">
-                      <b>R</b>
-                    </span>
+                <div class="col-md-6">
+                  <label for="resortModule">Current Year Levy</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>R</b>
+                      </span>
+                    </div>
+                    <input
+                      class="form-control"
+                      type="text"
+                      id="levy"
+                      name="levy"
+                      :value="formatPrice(week ? week.levyAmount : 0)"
+                      disabled
+                    />
                   </div>
-                  <input
-                    class="form-control"
-                    type="text"
-                    id="levy"
-                    name="levy"
-                    :value="formatPrice(week ? week.levyAmount : 0)"
-                    disabled
-                  />
                 </div>
-              </div>
-              <div class="col-md-6">
-                <label for="price">Price</label>
-                <div class="property-price d-flex">
-                  <!-- <div class="card-header-c d-flex"> -->
-                  <div style="width: 260px; height: 70px; border-style: solid; color: #60CBEB;">
-                    <!-- <div class="card-title-c align-self-center"> -->
-                    <a class="justify-content-center" style="color: black; font-size: 250%">
-                      <b>R{{ formatPrice(week ? week.sellPrice : 0) }}</b>
-                    </a>
-                    <!-- </div> -->
+                <div class="col-md-6">
+                  <label for="price">Price</label>
+                  <div class="property-price d-flex">
+                    <div class="price-border">
+                      <div class="price-label">
+                        <b>R {{ formatPrice(week ? week.sellPrice : 0) }}</b>
+                      </div>
+                    </div>
                   </div>
-                  <!-- </div> -->
                 </div>
               </div>
-            </div>
-            <br />
-          </form>
-          <br />
-
-          <!-- <a
-              class="btn btn-b-n even-width mr-auto"
-              href="/share-transfer-initiation-for-purchaser/"
-          >Make an Offer</a>-->
-          <button
-            type="button"
-            class="btn btn-b-n even-width mr-auto"
-            data-toggle="modal"
-            data-target="#myModal"
-          >Make an Offer</button>
-          <div class="col-md-12">
-            <div id="myModal" class="modal fade" role="dialog">
-              <div class="modal-dialog modal-lg">
-                <!-- Modal content-->
-                <div class="modal-content">
-                  <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal">&times;</button>
-                  </div>
-                  <div padding-left="20px">
-                    <makeOffer
-                      name="MakeOffer"
-                      :isMakeOffer="true"
-                      :isProperty="false"
-                      :item="week"
-                    />
+            </form>
+            <hr />
+            <div class="d-flex justify-content-between">
+              <div class="p-1">
+                <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
+              </div>
+              <div class="p-1">
+                <button
+                  type="button"
+                  class="btn btn-lg btn-b-n even-width mr-auto"
+                  data-toggle="modal"
+                  data-target="#myModal"
+                >Make an Offer</button>
+                <div class="col-md-12">
+                  <div id="myModal" class="modal fade" role="dialog">
+                    <div class="modal-dialog modal-lg">
+                      <!-- Modal content-->
+                      <div class="modal-content">
+                        <div class="modal-header">
+                          <button type="button" class="close" data-dismiss="modal">&times;</button>
+                        </div>
+                        <div padding-left="20px">
+                          <makeOffer
+                            name="MakeOffer"
+                            :isMakeOffer="true"
+                            :isProperty="false"
+                            :item="week"
+                          />
+                        </div>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
+            <hr />
           </div>
-
-          <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
+        </div>
+        <hr />
+        <div class="col-md-12">
+          <hr />
+        </div>
+        <div class="col-md-6">
+          <div class="title-box-d">
+            <h3 class="title-d">Facilities</h3>
+          </div>
+          <div class="row" v-if="resort.prUnitFacilities">
+            <div
+              class="col-md-4"
+              v-for="(item, i) in resort.prUnitFacilities.split('\n')"
+              :key="i"
+            >{{item}}</div>
+          </div>
+        </div>
+        <div class="col-md-6">
+          <div class="title-box-d">
+            <h3 class="title-d">Property Description</h3>
+          </div>
+          <p>{{description}}</p>
         </div>
       </div>
     </div>
 <script>
 import { mapState, mapActions } from 'vuex';
 import makeOffer from '../../processFlow/makeOffer.vue';
+import ResortImages from './resortImage.vue';
 
 export default {
   name: 'unit',
   components: {
     makeOffer,
+    ResortImages,
   },
   props: {
     resortCode: {},
     this.initWeek(this.weekId);
   },
   computed: {
-    ...mapState('resort', [
-      'resort',
-      'description',
-      'image1',
-      'image2',
-      'image3',
-    ]),
+    ...mapState('resort', ['resort', 'description', 'images']),
     ...mapState('week', ['week']),
   },
   methods: {
 };
 </script>
 <style scoped>
+.my-top {
+  padding-top: 25px;
+}
+.my-container {
+  padding-left: 15%;
+  padding-right: 15%;
+}
+.my-title {
+  text-align: left;
+  font-size: 250%;
+}
 .btn.btn-b-c {
   background-color: #ffffff;
   color: #60cbeb;
   border-radius: 0;
 }
-
 .btn.btn-b-c:hover {
   background-color: #089bf0;
   color: #ffffff;
 }
+.price-border {
+  background-color: #a9e0ff;
+  width: 100%;
+  border: solid #60cbeb medium;
+  padding: 0px 20px;
+}
+.price-label {
+  color: black;
+  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>
                 step="any"
                 id="minPrice"
                 name="minPrice"
-                placeholder="Minimum Price"
+                placeholder="Min"
                 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>
                 step="any"
                 id="maxPrice"
                 name="maxPrice"
-                placeholder="Maximum Price"
+                placeholder="Max"
                 v-model="filter.maxPrice"
               />
               <div class="input-group-append" @click="clearFilter('maxPrice')">
 export default {
   props: {
     hideTop: undefined,
+    keyword: undefined,
   },
   created() {
     this.initTimeshare();

src/components/timeshare/sell/sellPage.vue

       <div class="col-md-12">
         <div class="col-sm-12">
           <div class="about-img-box">
-            <img
-              src="img/sell3.jpg"
-              alt="Timeshare To Sell"
-              class="img-fluid"
-              style="width:800px;height:400px; border-radius:10px"
-            />
+            <img src="img/sell3.jpg" alt="Timeshare To Sell" class="img-fluid title-img" />
           </div>
-          <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
+          <div class="sinse-box title-title">
             <h3 class="sinse-title">Timeshare To Sell</h3>
           </div>
         </div>
           <br />
           <br />
           <p style="text-align:center;">
-            To rent your week out
-            <a href="https://www.tradeunipoint.com/" target="_blank">click here</a>
+            <strong>
+              To rent your week out
+              <a
+                href="https://www.tradeunipoint.com/"
+                target="_blank"
+              >click here</a>
+            </strong>
           </p>
         </form>
       </div>

src/components/user/loginPage.vue

     <!-- eslint-disable max-len -->
     <div class="login-page">
       <form id="signIn">
-        <div class="form">
+        <div class="form col-md-12">
           <div>
             <h4>Login</h4>
-            <br />
           </div>
-          <!--<alert :text="'Login successful'" :type="'SUCCESS'" />
-          <alert :text="'User does not exist, please register'" :type="'ERROR'" />
-          <alert :text="'Username is incorrect'" :type="'WARNING'" />
-          <alert :text="'Password is incorrect'" :type="'WARNING'" />
-          <alert :text="'Caps Lock is on'" :type="'INFO'" />-->
+          <button
+            @click="routerGoTo('/user/register')"
+            class="btn"
+            style="margin:2px; color: #60CBEB"
+          >Register</button>
+          <button
+            @click="routerGoTo('/user/registeragency')"
+            class="btn"
+            style="margin:2px; color: #60CBEB"
+          >Agency Registration</button>
+          <div v-if="this.$store.state.authentication.status === 'error'">
+            <alert
+              :text="'User doesn\'t exist or Username and Password is incorrect'"
+              :type="'ERROR'"
+            />
+          </div>
           <div class="row">
-            <div class="col-md-11" style="margin-bottom: 1em">
+            <div class="col-md-12" style="margin-bottom: 1em">
               <div class="input-group mb-3">
                 <div class="input-group-prepend">
                   <span class="input-group-text">
               </div>
             </div>
           </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')"
-            class="btn"
-            style="margin:2px"
-            type="button"
-          >Registration</button>
-          <button
-            @click="routerGoTo('/user/registeragency')"
-            class="btn"
-            style="margin:2px"
-          >Agency Registration</button>
-        </div>
-      </form>
-
-      <form id="forgot">
-        <div class="form">
-          <h5>Trouble signing in?</h5>
-          <div>
-            <!--<alert :text="'Username & password request email sent'" :type="'SUCCESS'" />-->
+          <div
+            @click="ToggleTrouble()"
+            class="btn cursor: pointer;"
+            style="margin:2px; color: #60CBEB; font-size:110%;"
+          >Trouble signing in?</div>
+          <br />
+          <div v-if="troubleToggle">
+            <!-- <alert :text="'Username & password request email sent'" :type="'SUCCESS'" /> -->
             <div class="row">
               <div class="input-group-prepend">
                 <span class="input-group-text">
                 <input class="form-control" placeholder="Your Email" type="text" name="email" value />
               </div>
             </div>
-          </div>
-          <div class="form-group row"></div>
-          <div class="offset-md-3 col-md-5">
-            <button @click="SendMail()" class="btn btn-b-n" type="submit">Get Help</button>
+            <br />
+            <button @click="SendMail()" class="btn btn-b-n" type="submit">Submit</button>
           </div>
         </div>
       </form>
 
 <script>
 import { mapActions, mapState } from 'vuex';
-// import alert from '../shared/alert.vue';
+import alert from '../shared/alert.vue';
 
 export default {
   name: 'Login',
   components: {
-    // alert,
+    alert,
   },
   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: '',
+      troubleToggle: false,
     };
   },
   computed: {
-    ...mapState('authentication', ['token', 'status']),
+    ...mapState('authentication', ['token', 'status', 'username', 'password']),
   },
   methods: {
-    ...mapActions('authentication', ['login']),
+    ...mapActions('authentication', ['login', 'init']),
+    ToggleTrouble() {
+      if (this.troubleToggle) {
+        this.troubleToggle = false;
+      } else this.troubleToggle = true;
+    },
     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(() => {
+        if (this.$store.state.authentication.status === 'error') {
+          this.$router.push('/user/login');
+        }
+      });
     },
     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';
       name: 'TimeshareFAQ',
       component: TimeshareFAQ,
     },
+    {
+      path: '/timeshare/myWeeks',
+      name: 'MyWeeks',
+      component: MyWeeksPage,
+    },
     {
       path: '/user/login',
       name: 'Login',

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/buyPage.js

   state: {
     regions: [],
     detailedRegion: [],
+    availRegion: [],
     resort: {},
   },
   mutations: {
+    clearAvail(state, avail) {
+      state.availRegion = [];
+    },
+    addAvail(state, avail) {
+      state.availRegion.push(avail);
+    },
     setRegions(state, regions) {
       state.regions = regions;
     },
   },
   getters: {},
   actions: {
+    init({
+      commit,
+      dispatch,
+    }) {
+      commit('clearAvail');
+      dispatch('getAvail');
+      dispatch('getRegions');
+    },
+    getAvail({
+      commit,
+    }) {
+      axios.get('/api/timeshareweek/getAvailResort').then((r) => {
+        for (const reg in r.data) {
+          const newRegion = {};
+          newRegion.regionCode = r.data[reg].regionCode;
+          newRegion.regionName = r.data[reg].regionName;
+          newRegion.available = r.data[reg].available;
+          newRegion.resorts = [];
+          for (const res in r.data[reg].resorts) {
+            const newResort = {
+              resortCode: '',
+              resortName: '',
+              lat: 0,
+              long: 0,
+            };
+            newResort.resortCode = r.data[reg].resorts[res].resortCode;
+            newResort.resortName = r.data[reg].resorts[res].resortName;
+            newResort.available = r.data[reg].resorts[res].available;
+            if (r.data[reg].resorts[res]) {
+              axios.get(
+                `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/TRESORT/${
+                  r.data[reg].resorts[res].resortCode}`,
+              )
+                .then((result) => {
+                  newResort.lat = result.data.prLatitude;
+                  newResort.long = result.data.prLongitude;
+                })
+                .catch(console.error);
+            }
+            newRegion.resorts.push(newResort);
+          }
+          commit('addAvail', newRegion);
+        }
+      }).catch(
+        console
+          .error,
+      );
+    },
     getRegions({
       commit,
       dispatch,

src/store/modules/timeshare/myWeeks.js

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

src/store/modules/timeshare/resort.js

   namespaced: true,
   state: {
     resort: {},
-    image1: '',
-    image2: '',
-    image3: '',
+    images: [],
     layout: '',
     description: '',
   },
     setDescription(state, description) {
       state.description = description;
     },
+    addImage(state, image) {
+      state.images.push(`data:image/jpeg;base64,${image}`);
+    },
     clear(state) {
       state.resort = {};
-      state.image1 = '';
-      state.image2 = '';
-      state.image3 = '';
+      state.images = [];
       state.layout = '';
     },
-    setImage1(state, image) {
-      state.image1 = `data:image/jpeg;base64,${image}`;
-    },
-    setImage2(state, image) {
-      state.image2 = `data:image/jpeg;base64,${image}`;
-    },
-    setImage3(state, image) {
-      state.image3 = `data:image/jpeg;base64,${image}`;
-    },
     setLayout(state, image) {
       state.layout = `data:image/jpeg;base64,${image}`;
     },
       dispatch('getImage1', resortCode);
       dispatch('getImage2', resortCode);
       dispatch('getImage3', resortCode);
+      dispatch('getImage4', resortCode);
       dispatch('getLayout', resortCode);
     },
     getDescription({
       commit,
     }, resortCode) {
-      axios.get(
-        `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/dsc`,
-      )
+      axios
+        .get(
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/dsc`,
+        )
         .then((result) => {
           commit('setDescription', result.data);
         })
     getResort({
       commit,
     }, resortCode) {
-      axios.get(
-        `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/TRESORT/${
-          resortCode}`,
-      )
+      axios
+        .get(
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/TRESORT/${resortCode}`,
+        )
         .then((result) => {
           commit('setResort', result.data);
         })
     getImage1({
       commit,
     }, resortCode) {
-      axios.get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${
-        resortCode}/image/1`)
-        .then(result => commit('setImage1', result.data))
+      axios
+        .get(
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/1`,
+        )
+        .then(result => commit('addImage', result.data))
         .catch(console.error);
     },
     getImage2({
       commit,
     }, resortCode) {
-      axios.get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${
-        resortCode}/image/2`)
-        .then(result => commit('setImage2', result.data))
+      axios
+        .get(
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/2`,
+        )
+        .then(result => commit('addImage', result.data))
         .catch(console.error);
     },
     getImage3({
       commit,
     }, resortCode) {
-      axios.get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${
-        resortCode}/image/3`)
-        .then(result => commit('setImage3', result.data))
+      axios
+        .get(
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/3`,
+        )
+        .then(result => commit('addImage', result.data))
+        .catch(console.error);
+    },
+    getImage4({
+      commit,
+    }, resortCode) {
+      axios
+        .get(
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/4`,
+        )
+        .then((result) => {
+          if (result.data && result.data.length > 0) {
+            commit('addImage', result.data);
+          }
+        })
         .catch(console.error);
     },
     getLayout({
       commit,
     }, resortCode) {
-      axios.get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${
-        resortCode}/layout`)
+      axios
+        .get(
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/layout`,
+        )
         .then(result => commit('setLayout', result.data))
         .catch(console.error);
     },

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,
+    }) {
+      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) => {
         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);
+            log.clearValues();
+            log.setValues(resp.data);
+            commit('auth_success', resp.data);
           })
           .catch((err) => {
             commit('auth_error');
-            sessionStorage.removeItem('token');
-            sessionStorage.removeItem('username');
-            sessionStorage.removeItem('name');
+            log.clearValues();
             reject(err);
+            commit('auth_error', err.data);
           });
       });
     },
-    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;
       });
     },