Merge

src/App.vue

 <template>
   <div id="app">
+    <a href="#" class="back-to-top">
+      <i class="fa fa-chevron-up"></i>
+    </a>
     <div class="click-closed"></div>
     <SearchTab />
     <NavBar @routerGoTo="routerGoTo" />
     NavBar,
     FooterSection,
   },
+  // created() {
+  //   this.$http.interceptors.response.use(undefined, (err) => {
+  //     return new Promise(function(resolve, reject) {
+  //       if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
+  //         this.$store.dispatch(logout);
+  //       }
+  //       throw err;
+  //     });
+  //   });
+  // },
   methods: {
     routerGoTo(goTo) {
       this.$router.push(goTo);

src/assets/Log.js

+const items = {
+  isLoggedIn() {
+    return localStorage.getItem('token') !== undefined;
+  },
+  getUser() {
+    return localStorage.getItem('User');
+  },
+};
+export default items;

src/components/about/aboutTimeshare.vue

               src="img/timeshare2.jpg"
               alt="About Timeshare"
               class="img-fluid"
-              style="width:800px;height:400px;"
+              style="width:800px;height:400px; border-radius:10px"
             />
           </div>
-          <div class="sinse-box">
-            <h3 class="sinse-title">
-              Timeshare Resales
-              <span></span>
-            </h3>
+          <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
+            <h3 class="sinse-title">Timeshare Resales</h3>
           </div>
         </div>
         <div class="col-md-12 section-t8">
                   src="img/timeshare.jpg"
                   alt
                   class="img-fluid"
-                  style="width:500px;height:330px;"
+                  style="width:500px;height:330px; border-radius:10px"
                 />
               </p>
             </div>

src/components/about/aboutUsPage.vue

               src="img/slide-about-1.jpg"
               alt
               class="img-fluid"
-              style="width:800px;height:400px;"
+              style="width:800px;height:400px; border-radius:10px"
             />
           </div>
-          <div class="sinse-box">
-            <h3 class="sinse-title">
-              About Us
-              <span></span>
-            </h3>
+          <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
+            <h3 class="sinse-title">About Us</h3>
           </div>
         </div>
         <div class="col-md-12 section-t8">
                 <strong>Uni-Vate is able to assist you.</strong>
               </p>
               <p>
-                <img src="img/plan2.jpg" alt class="img-fluid" style="width:450px;height:200px;" />
+                <img
+                  src="img/plan2.jpg"
+                  alt
+                  class="img-fluid"
+                  style="width:450px;height:200px; border-radius:10px"
+                />
               </p>
             </div>
           </div>

src/components/admin/property/propertyTypeList.vue

   <!-- eslint-disable max-len -->
   <div>
     <div class="container">
-      <section class="intro-single">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-12 col-lg-8">
-              <div class="title-single-box">
-                <h1 class="title-single">Property Types</h1>
-              </div>
+      <!-- <section class="intro-single"> -->
+      <div class="container">
+        <br />
+        <br />
+        <br />
+        <br />
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <!-- <div class="title-single-box"> -->
+            <!-- <h1 class="title-single">Property Types</h1> -->
+            <!-- </div> -->
+            <div class="title-box-d">
+              <h1 class="title-d" style="text-align:left; font-size: 250%">Property Types</h1>
             </div>
+            <br />
           </div>
         </div>
-      </section>
+      </div>
+      <!-- </section> -->
     </div>
     <div class="container">
       <button type="button" @click="New()" class="btn btn-b-n" style="width: 85px; height:40px;">New</button>
         </tbody>
       </table>
     </div>
+    <br />
   </div>
 </template>
 

src/components/admin/property/userDefinedGroupsPage.vue

 <template>
   <!-- eslint-disable max-len -->
   <div>
-    <section class="intro-single">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12 col-lg-8">
-            <div class="title-single-box">
-              <h2 class="title-single">User Defined Groups List</h2>
-            </div>
+    <!-- <section class="intro-single"> -->
+    <div class="container">
+      <br />
+      <br />
+      <br />
+      <br />
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <!-- <div class="title-single-box"> -->
+          <!-- <h2 class="title-single">User Defined Groups List</h2> -->
+          <!-- </div> -->
+          <div class="title-box-d">
+            <h1 class="title-d" style="text-align:left; font-size: 250%">User Defined Groups List</h1>
           </div>
+          <br />
         </div>
       </div>
-    </section>
+    </div>
+    <!-- </section> -->
     <div class="container">
       <button type="button" @click="New()" class="btn btn-b-n" style="width: 85px; height:40px;">New</button>
       <table class="table table-bordered">
         </tbody>
       </table>
     </div>
+    <br />
   </div>
 </template>
 <script>

src/components/admin/status/changeLogPage.vue

 <template>
-  <section class="intro-single">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-12 col-lg-8">
-          <div class="title-single-box">
-            <h1 class="title-single" style="text-align:left;">Change Log</h1>
-          </div>
+  <!-- <section class="intro-single"> -->
+  <div class="container">
+    <br />
+    <br />
+    <br />
+    <br />
+    <div class="row">
+      <div class="col-md-12 col-lg-8">
+        <!-- <div class="title-single-box"> -->
+        <!-- <h1 class="title-single" style="text-align:left;">Change Log</h1> -->
+        <!-- </div> -->
+        <div class="title-box-d">
+          <h1 class="title-d" style="text-align:left; font-size: 250%">Change Log</h1>
         </div>
+        <br />
       </div>
     </div>
     <div id="table" class="col-xs-12 table-responsive">
       <datatable :columns="columns" :data="rows"></datatable>
     </div>
-  </section>
+    <br />
+  </div>
+
+  <!-- </section> -->
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';

src/components/admin/status/statusPage.vue

 <template>
   <div>
-    <section class="intro-single">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12 col-lg-8">
-            <div class="title-single-box">
-              <h2 class="title-single">Status List</h2>
-            </div>
+    <!-- <section class="intro-single"> -->
+    <div class="container">
+      <br />
+      <br />
+      <br />
+      <br />
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <!-- <div class="title-single-box"> -->
+          <!-- <h2 class="title-single">Status List</h2> -->
+          <!-- </div> -->
+          <div class="title-box-d">
+            <h1 class="title-d" style="text-align:left; font-size: 250%">Status List</h1>
           </div>
+          <br />
         </div>
       </div>
-    </section>
+    </div>
+    <!-- </section> -->
     <div class="container">
       <table class="table table-bordered">
         <thead>

src/components/admin/status/tenderWeekAdminPage.vue

 <template>
-  <section class="intro-single">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-12 col-lg-8">
-          <div class="title-single-box">
-            <h1 class="title-single" style="text-align:left;">Tender Week Admin</h1>
-          </div>
+  <!-- <section class="intro-single"> -->
+  <div class="container">
+    <br />
+    <br />
+    <br />
+    <br />
+    <div class="row">
+      <div class="col-md-12 col-lg-8">
+        <!-- <div class="title-single-box"> -->
+        <!-- <h1 class="title-single" style="text-align:left;">Tender Week Admin</h1> -->
+        <!-- </div> -->
+        <div class="title-box-d">
+          <h1 class="title-d" style="text-align:left; font-size: 250%">Tender Week Admin</h1>
         </div>
+        <br />
       </div>
     </div>
     <div id="table" class="col-xs-12 table-responsive">
       <datatable :columns="columns" :data="rows"></datatable>
     </div>
-  </section>
+    <br />
+  </div>
+
+  <!-- </section> -->
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';

src/components/admin/status/timeshareAdminPage.vue

 <template>
-  <section class="intro-single">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-12 col-lg-8">
-          <div class="title-single-box">
-            <h1 class="title-single" style="text-align:left;">Timeshare Admin</h1>
-          </div>
+  <!-- <section class="intro-single"> -->
+  <div class="container">
+    <br />
+    <br />
+    <br />
+    <br />
+    <div class="row">
+      <div class="col-md-12 col-lg-8">
+        <!-- <div class="title-single-box"> -->
+        <!-- <h1 class="title-single" style="text-align:left;">Timeshare Admin</h1> -->
+        <!-- </div> -->
+        <div class="title-box-d">
+          <h1 class="title-d" style="text-align:left; font-size: 250%">Timeshare Admin</h1>
         </div>
+        <br />
       </div>
     </div>
     <div id="table" class="col-xs-12 table-responsive">
       <datatable :columns="columns" :data="rows"></datatable>
     </div>
-  </section>
+  </div>
+  <!-- </section> -->
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';

src/components/admin/status/userManagementPage.vue

 <template>
-  <section class="intro-single">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-12 col-lg-8">
-          <div class="title-single-box">
-            <h1 class="title-single" style="text-align:left;">User Management</h1>
-          </div>
+  <!-- <section class="intro-single"> -->
+  <div class="container">
+    <br />
+    <br />
+    <br />
+    <br />
+    <div class="row">
+      <div class="col-md-12 col-lg-8">
+        <!-- <div class="title-single-box"> -->
+        <!-- <h1 class="title-single" style="text-align:left;">User Management</h1> -->
+        <!-- </div> -->
+        <div class="title-box-d">
+          <h1 class="title-d" style="text-align:left; font-size: 250%">User Management</h1>
         </div>
+        <br />
       </div>
     </div>
     <div id="table" class="col-xs-12 table-responsive">
       <datatable :columns="columns" :data="rows"></datatable>
     </div>
-  </section>
+  </div>
+  <!-- </section> -->
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';

src/components/admin/unitConfiguration/unitConfigurationPage.vue

 <template>
   <div>
-    <section class="intro-single">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12 col-lg-8">
-            <div class="title-single-box">
-              <h2 class="title-single">Unit Configuration List</h2>
-            </div>
+    <!-- <section class="intro-single"> -->
+    <div class="container">
+      <br />
+      <br />
+      <br />
+      <br />
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <!-- <div class="title-single-box"> -->
+          <!-- <h2 class="title-single">Unit Configuration List</h2> -->
+          <!-- </div> -->
+          <div class="title-box-d">
+            <h1 class="title-d" style="text-align:left; font-size: 250%">Unit Configuration List</h1>
           </div>
+          <br />
         </div>
       </div>
-    </section>
+    </div>
+    <!-- </section> -->
     <div class="container">
       <table class="table table-bordered">
         <thead>

src/components/home/propertySection.vue

     propertyCard,
   },
   computed: {
-    ...mapState('property', ['latestProperties']),
+    ...mapState('propertySearch', ['latestProperties']),
   },
   methods: {
-    ...mapActions('property', ['searchLatestProperties']),
+    ...mapActions('propertySearch', ['searchLatestProperties']),
   },
   mounted() {
     this.searchLatestProperties();

src/components/home/testimonialSection.vue

                 <div class="col-sm-12 col-md-6">
                   <div class="testimonial-img">
                     <router-link to="/resort/csp">
-                      <img src="img/testimonial-1.png" alt class="CrystalSprings" />
+                      <img
+                        src="img/testimonial-1.png"
+                        alt
+                        class="CrystalSprings"
+                        style="border-radius:10px"
+                      />
                     </router-link>
                   </div>
                 </div>
                 <div class="col-sm-12 col-md-6">
                   <div class="testimonial-img">
                     <router-link to="/resort/nl">
-                      <img src="img/testimonial-2.png" alt class="Ngwenya Lodge" />
+                      <img
+                        src="img/testimonial-2.png"
+                        alt
+                        class="Ngwenya Lodge"
+                        style="border-radius:10px"
+                      />
                     </router-link>
                   </div>
                 </div>
                 <div class="col-sm-12 col-md-6">
                   <div class="testimonial-img">
                     <router-link to="/resort/mnr">
-                      <img src="img/testimonial-3.2.jpg" alt class="Mabalingwe Nature Reserve" />
+                      <img
+                        src="img/testimonial-3.2.jpg"
+                        alt
+                        class="Mabalingwe Nature Reserve"
+                        style="border-radius:10px"
+                      />
                     </router-link>
                   </div>
                 </div>
                 <div class="col-sm-12 col-md-6">
                   <div class="testimonial-img">
                     <router-link to="/resort/le">
-                      <img src="img/testimonial-4.png" alt class="Little Eden" />
+                      <img
+                        src="img/testimonial-4.png"
+                        alt
+                        class="Little Eden"
+                        style="border-radius:10px"
+                      />
                     </router-link>
                   </div>
                 </div>

src/components/misc/contactUs.vue

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

src/components/misc/privacyPolicyPage.vue

 <template>
   <!-- eslint-disable max-len -->
   <div class="container">
-    <section class="intro-single">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12 col-lg-8">
-            <div class="title-single-box">
-              <h1 class="title-single" style="text-align:left;">Privacy Policy</h1>
-            </div>
-          </div>
+    <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"
+          />
+        </div>
+        <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
+          <h3 class="sinse-title">Privacy Policy</h3>
         </div>
       </div>
-    </section>
-    <div class="col-md-12 text-left">
-      <h3>Privacy</h3>
-      <p>We respect your privacy. This Privacy Policy governs the manner in which we will treat your personal information collected when using our website.</p>
+      <div class="col-md-12 text-left">
+        <br />
+        <h3>Privacy</h3>
+        <p>We respect your privacy. This Privacy Policy governs the manner in which we will treat your personal information collected when using our website.</p>
 
-      <h3>How do we collect your personal information?</h3>
-      <p>Your personal information may be collected while using this website: when you contact us, when you complete an application form, when you check-in at your destination or when you make use of the services of one of our affiliated business partners. Personal information includes any information by which you can be identified and which relates to you as an identifiable individual, such as: your name, physical and postal addresses, email address, sex, age and internet address from the domain from which you are visiting.</p>
+        <h3>How do we collect your personal information?</h3>
+        <p>Your personal information may be collected while using this website: when you contact us, when you complete an application form, when you check-in at your destination or when you make use of the services of one of our affiliated business partners. Personal information includes any information by which you can be identified and which relates to you as an identifiable individual, such as: your name, physical and postal addresses, email address, sex, age and internet address from the domain from which you are visiting.</p>
 
-      <h3>User of your personal information</h3>
-      <p>We need to process your personal information when you make use of our service. We use your personal information in the ordinary course of our business and to send you marketing material relating to our service offering. You can unsubscribe at any time and we will thereafter no longer use your personal information. We will not disclose your personal information to third parties unless justifiable in terms of an agreement between us.</p>
+        <h3>User of your personal information</h3>
+        <p>We need to process your personal information when you make use of our service. We use your personal information in the ordinary course of our business and to send you marketing material relating to our service offering. You can unsubscribe at any time and we will thereafter no longer use your personal information. We will not disclose your personal information to third parties unless justifiable in terms of an agreement between us.</p>
 
-      <h3>Access to and correction of personal information</h3>
-      <p>You may access your personal information that we hold by sending an email to: info@univateproperties.co.za</p>
-      <p>In the event that you want to update or correct your personal information held by us, you can send an email to: info@univateproperties.co.za</p>
+        <h3>Access to and correction of personal information</h3>
+        <p>You may access your personal information that we hold by sending an email to: info@univateproperties.co.za</p>
+        <p>In the event that you want to update or correct your personal information held by us, you can send an email to: info@univateproperties.co.za</p>
 
-      <h3>Protection of your personal information</h3>
-      <p>We take reasonable steps and measures to keep your information secure from loss, misuse or unauthorised alteration. Our database has built-in safeguards to ensure the privacy and confidentiality of your information. We do not have control over the websites of affiliated parties or sites linked into from this site and you must therefore refer to the privacy policies of any such parties to see how they protect your personal information.</p>
+        <h3>Protection of your personal information</h3>
+        <p>We take reasonable steps and measures to keep your information secure from loss, misuse or unauthorised alteration. Our database has built-in safeguards to ensure the privacy and confidentiality of your information. We do not have control over the websites of affiliated parties or sites linked into from this site and you must therefore refer to the privacy policies of any such parties to see how they protect your personal information.</p>
 
-      <h3>Cookies</h3>
-      <p>We may use cookies. Cookies are programmes that we transfer to your computer's hard drive to personalise your experience on this website. In this way, the next time you visit, we will know who you are and that you have visited this website before. This will enable us to enhance your browsing experience. You can set your browser to notify you if cookies are to be transferred or to reject cookies but this may prevent your use of some of the web pages.</p>
+        <h3>Cookies</h3>
+        <p>We may use cookies. Cookies are programmes that we transfer to your computer's hard drive to personalise your experience on this website. In this way, the next time you visit, we will know who you are and that you have visited this website before. This will enable us to enhance your browsing experience. You can set your browser to notify you if cookies are to be transferred or to reject cookies but this may prevent your use of some of the web pages.</p>
 
-      <h3>Email Monitoring</h3>
-      <p>We provide email addresses on the website which enable you to contact us. Forms that you complete via this website will also be transmitted via email. In order to check for viruses and to monitor service we reserve the right to monitor and inspect all material and information transmitted over our system.</p>
+        <h3>Email Monitoring</h3>
+        <p>We provide email addresses on the website which enable you to contact us. Forms that you complete via this website will also be transmitted via email. In order to check for viruses and to monitor service we reserve the right to monitor and inspect all material and information transmitted over our system.</p>
 
-      <h3>Changes to this privacy policy</h3>
-      <p>We reserve the right, in our sole discretion, to amend this Privacy Policy from time to time. You agree to review the Privacy Policy whenever you visit this website for any such amendments. The amended version of the Privacy Policy shall supersede and replace all previous versions thereof.</p>
+        <h3>Changes to this privacy policy</h3>
+        <p>We reserve the right, in our sole discretion, to amend this Privacy Policy from time to time. You agree to review the Privacy Policy whenever you visit this website for any such amendments. The amended version of the Privacy Policy shall supersede and replace all previous versions thereof.</p>
 
-      <h3>Which laws apply to your dealings with us?</h3>
-      <p>This policy will be governed and interpreted in accordance with the laws of South Africa. To the extent that a court has jurisdiction over any dispute which may arise out of or in connection with this Privacy Policy, we both submit to the jurisdiction of the South African Courts.</p>
+        <h3>Which laws apply to your dealings with us?</h3>
+        <p>This policy will be governed and interpreted in accordance with the laws of South Africa. To the extent that a court has jurisdiction over any dispute which may arise out of or in connection with this Privacy Policy, we both submit to the jurisdiction of the South African Courts.</p>
+      </div>
     </div>
   </div>
 </template>

src/components/property/propertyList.vue

   <!-- eslint-disable max-len -->
   <div>
     <div class="container">
-      <section class="intro-single">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-12 col-lg-8">
-              <div class="title-single-box">
-                <h1 v-if="user !== 'All'" class="title-single">My {{ propertyType }} Properties</h1>
-                <h1 v-else class="title-single">All {{ propertyType }} Properties</h1>
-              </div>
+      <!-- <section class="intro-single"> -->
+      <div class="container">
+        <br />
+        <br />
+        <br />
+        <br />
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <div class="title-box-d">
+              <h1
+                v-if="user !== 'All'"
+                class="title-d"
+                style="text-align:left; font-size: 250%"
+              >My {{ propertyType }} Properties</h1>
+              <h1
+                v-else
+                class="title-d"
+                style="text-align:left; font-size: 250%"
+              >All {{ propertyType }} Properties</h1>
             </div>
           </div>
         </div>
-      </section>
+      </div>
+      <!-- </section> -->
     </div>
     <div class="container">
       <table class="table table-bordered">
         </tbody>
       </table>
     </div>
+    <br />
   </div>
 </template>
 

src/components/property/propertyPage.vue

                       </li>
                       <li class="d-flex justify-content-between">
                         <strong>Status:</strong>
-                        <span>{{ property.status.code }} - {{ property.status.description }}</span>
+                        <span
+                          v-if="property.status"
+                        >{{ property.status.code }} - {{ property.status.description }}</span>
                       </li>
                       <li class="d-flex justify-content-between">
                         <strong>Address:</strong>
                         <span
+                          style="text-align:right"
                           v-if="property"
                           v-html="formatAddress(property.addressLine1) + formatAddress(property.addressLine2) + formatAddress(property.addressLine3) + formatAddress(property.suburb ? property.suburb.description : '') + formatAddress(property.city ? property.city.description : '') + formatAddress(property.province ? property.province.description : '') "
                         ></span>
                     class="btn btn-b-n"
                     data-toggle="modal"
                     data-target="#myModal"
-                    :disabled="property.status.code === 'E1'"
                   >Make an Offer</button>
                   <div id="myModal" class="modal fade" role="dialog">
                     <div class="modal-dialog modal-lg">

src/components/property/propertySearchFields.vue

 <template>
   <div>
-    <div class="col-md-6 mb-2">
+    <div class="container text-left">
       <div class="form-group">
         <label for="city">For:</label>
-        <select
-          class="form-control form-control-lg form-control-a"
-          id="forSelector"
-          v-model="selectedType"
-          @change="TypeSelected"
-        >
-          <option value="Sale">Sale</option>
-          <option value="Rent">Rent</option>
-        </select>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text" style="color: #60CBEB">
+              <b>F</b>
+            </span>
+          </div>
+          <select
+            class="form-control form-control-lg form-control-a"
+            id="forSelector"
+            v-model="propertySearch.salesType"
+            @change="salesTypeSelected"
+          >
+            <option value="Sale">Sale</option>
+            <option value="Rent">Rent</option>
+          </select>
+        </div>
       </div>
       <div class="form-group" v-if="propertyType === 'Residential'">
-        <label for="city">Property Type</label>
-        <select
-          class="form-control form-control-lg form-control-a"
-          id="forSelector"
-          v-model="selectedPropertyTypeRes"
-          @change="PropertyTypeSelected"
-        >
-          <option>All</option>
-          <option
-            v-for="(propertyType, i) in propertyTypesRes"
-            :key="i"
-          >{{ propertyType.description }}</option>
-        </select>
+        <label for="propertytype">Property Type</label>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text" style="color: #60CBEB">
+              <b>T</b>
+            </span>
+          </div>
+          <select
+            class="form-control form-control-lg form-control-a"
+            id="forSelector"
+            v-model="resType"
+            @change="PropertyTypeSelected"
+          >
+            <option>All</option>
+            <option
+              v-for="(propertyType, i) in propertyTypesRes"
+              :key="i"
+            >{{ propertyType.description }}</option>
+          </select>
+          <div class="input-group-append" @click="clearResType">
+            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+              <b>X</b>
+            </span>
+          </div>
+        </div>
       </div>
       <div v-else class="form-group">
-        <label for="city">Property Type</label>
-        <select
-          class="form-control form-control-lg form-control-a"
-          id="forSelector"
-          v-model="selectedPropertyTypeCom"
-          @change="PropertyTypeSelected"
-        >
-          <option>All</option>
-          <option
-            v-for="(propertyType, i) in propertyTypesCom"
-            :key="i"
-          >{{ propertyType.description }}</option>
-        </select>
+        <label for="propertytype">Property Type</label>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text" style="color: #60CBEB">
+              <b>T</b>
+            </span>
+          </div>
+          <select
+            class="form-control form-control-lg form-control-a"
+            id="forSelector"
+            v-model="comType"
+            @change="PropertyTypeSelected"
+          >
+            <option>All</option>
+            <option
+              v-for="(propertyType, i) in propertyTypesCom"
+              :key="i"
+            >{{ propertyType.description }}</option>
+          </select>
+          <div class="input-group-append" @click="clearComType">
+            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+              <b>X</b>
+            </span>
+          </div>
+        </div>
       </div>
       <div class="form-group">
-        <label for="city">Province</label>
-        <select
-          class="form-control form-control-lg form-control-a"
-          id="provinceselector"
-          @change="ProvinceSelected"
-          v-model="selectedProvince"
-        >
-          <option>All</option>
-          <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
-        </select>
+        <label for="province">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>
+          </div>
+          <select
+            class="form-control form-control-lg form-control-a"
+            id="provinceselector"
+            @change="ProvinceSelected"
+            v-model="propertySearch.province"
+          >
+            <option>All</option>
+            <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
+          </select>
+          <div class="input-group-append" @click="clearFilter('province')">
+            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+              <b>X</b>
+            </span>
+          </div>
+        </div>
       </div>
     </div>
-    <div class="col-md-6 mb-2">
+    <div class="container text-left">
       <div class="form-group">
         <label for="city">City</label>
-        <select
-          class="form-control form-control-lg form-control-a"
-          id="cityselector"
-          @change="CitySelected"
-          v-model="selectedCity"
-        >
-          <option>All</option>
-          <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
-        </select>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text" style="color: #60CBEB">
+              <b>C</b>
+            </span>
+          </div>
+          <select
+            class="form-control form-control-lg form-control-a"
+            id="cityselector"
+            @change="CitySelected"
+            v-model="propertySearch.city"
+          >
+            <option>All</option>
+            <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
+          </select>
+          <div class="input-group-append" @click="clearFilter('city')">
+            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+              <b>X</b>
+            </span>
+          </div>
+        </div>
       </div>
     </div>
-    <div class="col-md-6 mb-2">
+    <div class="container text-left">
       <div class="form-group">
-        <label for="city">Suburb</label>
-        <select
-          class="form-control form-control-lg form-control-a"
-          id="suburbselector"
-          v-model="selectedSuburb"
-          @change="SuburbSelected"
-        >
-          <option>All</option>
-          <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
-        </select>
+        <label for="suburb">Suburb</label>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text" style="color: #60CBEB">
+              <b>S</b>
+            </span>
+          </div>
+          <select
+            class="form-control form-control-lg form-control-a"
+            id="suburbselector"
+            v-model="propertySearch.suburb"
+            @change="SuburbSeleted"
+          >
+            <option>All</option>
+            <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
+          </select>
+          <div class="input-group-append" @click="clearFilter('suburb')">
+            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+              <b>X</b>
+            </span>
+          </div>
+        </div>
       </div>
     </div>
   </div>
   },
   data() {
     return {
-      selectedType: 'Sale',
-      selectedProvince: 'All',
-      selectedCity: 'All',
-      selectedSuburb: 'All',
-      selectedPropertyTypeRes: 'All',
-      selectedPropertyTypeCom: 'All',
+      resType: 'All',
+      comType: 'All',
     };
   },
   mounted() {
     this.getProvince();
-    this.$emit('TypeSelectedUpdated', this.selectedType);
     this.getPropertyTypesRes();
     this.getPropertyTypesCom();
+    this.getPropertySearchObject();
+    setTimeout(() => {
+      this.propertySearch.propertyUsageType = this.propertyType;
+    }, 100);
   },
   computed: {
     ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
     ...mapState('property', ['propertyTypesRes', 'propertyTypesCom']),
+    ...mapState('propertySearch', ['propertySearch']),
   },
   methods: {
     ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
     ...mapActions('property', ['getPropertyTypesRes', 'getPropertyTypesCom']),
-    TypeSelected(item) {
-      this.$emit('TypeSelectedUpdated', item.target.value);
+    ...mapActions('propertySearch', ['getPropertySearchObject', 'clearFilter']),
+    clearResType() {
+      this.clearFilter('propertyType');
+      this.resType = 'All';
+    },
+    clearComType() {
+      this.clearFilter('propertyType');
+      this.comType = 'All';
+    },
+    salesTypeSelected() {
+      this.$emit('updateSearch', this.propertySearch);
     },
     PropertyTypeSelected(item) {
-      this.$emit('PropertyTypeSelectedUpdated', item.target.value);
+      this.propertySearch.propertyType = item.target.value;
+      this.$emit('updateSearch', this.propertySearch);
     },
     ProvinceSelected(item) {
       if (item.target.value !== 'All') {
-        this.getCities(Object.assign({}, { province: this.selectedProvince }));
+        this.getCities(
+          Object.assign({}, { province: this.propertySearch.province }),
+        );
       }
-      this.$emit('ProvinceSelectedUpdated', item.target.value);
+      this.$emit('updateSearch', this.propertySearch);
     },
     CitySelected(item) {
       if (item.target.value !== 'All') {
         this.getSuburbs(
           Object.assign(
             {},
-            { province: this.selectedProvince, city: this.selectedCity },
+            {
+              province: this.propertySearch.province,
+              city: this.propertySearch.city,
+            },
           ),
         );
       }
-      this.$emit('CitySelectedUpdated', item.target.value);
+      this.$emit('updateSearch', this.propertySearch);
     },
-    SuburbSelected(item) {
-      this.$emit('SuburbSelectedUpdated', item.target.value);
+    SuburbSeleted() {
+      this.$emit('updateSearch', this.propertySearch);
     },
   },
 };

src/components/property/propertySearchPage.vue

 <template>
   <!-- eslint-disable max-len -->
   <div class="container">
-    <div class="container col-md-12" v-if="propertyType === 'Residential'">
+    <div class="container col-md-12" v-if="propertySearch.propertyUsageType === 'Residential'">
       <div class="col-sm-12">
         <div class="about-img-box">
           <img
             src="img/Pretoria-South-Africa.jpg"
             alt="Property Listing"
             class="img-fluid"
-            style="width:800px;height:400px;"
+            style="width:800px;height:400px; border-radius:10px"
           />
         </div>
-        <div class="sinse-box">
-          <h3 class="sinse-title">
-            Property Listing
-            <span></span>
-          </h3>
+        <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
+          <h3 class="sinse-title">Property Listing</h3>
         </div>
       </div>
       <br />
       <br />
     </div>
 
-    <div class="container col-md-12" v-if="propertyType === 'Commercial'">
+    <div class="container col-md-12" v-if="propertySearch.propertyUsageType === 'Commercial'">
       <div class="col-sm-12">
         <div class="about-img-box">
           <img
             src="img/Johannesburg-south-africa-1.jpg"
             alt="Property Listing"
             class="img-fluid"
-            style="width:800px;height:400px;"
+            style="width:800px;height:400px; border-radius:10px"
           />
         </div>
-        <div class="sinse-box">
-          <h3 class="sinse-title">
-            Property Listing
-            <span></span>
-          </h3>
+        <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
+          <h3 class="sinse-title">Property Listing</h3>
         </div>
       </div>
       <br />
         </div>
         <div class="col-md-4">
           <p>
-            <img class="img-fluid" src="./../../../public/img/commercial.jpg" alt="About Resale" />
+            <img
+              class="img-fluid"
+              src="./../../../public/img/commercial.jpg"
+              alt="About Resale"
+              style="border-radius:10px"
+            />
           </p>
         </div>
       </div>
       <div>
-        <propertyCard
-          v-if="properties.length > 0"
-          name="propertyholder"
-          :properties="properties"
-          :key="propertysearch"
-        />
+        <propertyCard v-if="properties.length > 0" name="propertyholder" :properties="properties" />
         <div v-if="properties.length === 0">
           <img src="../../../public/img/no-homes.gif" />
           <br />
       suburb: '',
       proptype: '',
       keyword: '',
+      propertySearch: {
+        userID: 0,
+        keyword: '',
+        salesType: 'All',
+        propertyUsageType: 'All',
+        propertyType: 'All',
+        province: 'All',
+        city: 'All',
+        suburb: 'All',
+      },
     };
   },
   methods: {
-    ...mapActions('property', [
-      'searchPropertiesParams',
-      'searchPropertiesKeyword',
-    ]),
+    ...mapActions('propertySearch', ['searchProperties']),
   },
   computed: {
-    ...mapState('property', ['properties']),
+    ...mapState('propertySearch', ['properties']),
     ParamsChanged() {
-      this.propertyTypeparam = this.$route.params.propertyType;
-      this.type = this.$route.query.type;
-      this.propertyType = this.$route.query.propertyType;
-      this.province = this.$route.query.province;
-      this.city = this.$route.query.city;
-      this.suburb = this.$route.query.suburb;
-      this.proptype = this.$route.query.propType;
-      this.keyword = this.$route.query.keyword;
-
-      if (typeof this.propertyType === 'undefined') {
-        this.propertyType = this.propertyTypeparam;
-      }
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.propertySearch = {
+        userID: 0,
+        keyword: '',
+        salesType: 'All',
+        propertyUsageType: 'All',
+        propertyType: 'All',
+        province: 'All',
+        city: 'All',
+        suburb: 'All',
+      };
 
-      if (this.type === '') {
-        this.type = 'undefined';
-      }
-      if (this.propertyType === '') {
-        this.propertyType = 'undefined';
-      }
-      if (this.province === '') {
-        this.province = 'undefined';
-      }
-      if (this.city === '') {
-        this.city = 'undefined';
-      }
-      if (this.suburb === '') {
-        this.suburb = 'undefined';
-      }
-      if (this.proptype === '') {
-        this.propType = 'undefined';
-      }
-      if (typeof this.keyword === 'undefined' || this.keyword === '') {
-        this.searchPropertiesParams(
-          Object.assign(
-            {},
-            {
-              type: this.type,
-              propertyType: this.propertyType,
-              province: this.province,
-              city: this.city,
-              suburb: this.suburb,
-              propType: this.proptype,
-            },
-          ),
-        );
+      if (typeof this.$route.params.propertyType === 'undefined') {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.propertySearch = this.$route.query;
       } else {
-        this.searchPropertiesKeyword(
-          Object.assign({}, { keyword: this.keyword }),
-        );
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.propertySearch.propertyUsageType = this.$route.params.propertyType;
       }
 
+      console.log('PropertySearch = ' + JSON.stringify(this.propertySearch));
+
+      this.searchProperties(this.propertySearch);
+      // this.type = this.$route.query.type;
+      // this.propertyType = this.$route.query.propertyType;
+      // this.province = this.$route.query.province;
+      // this.city = this.$route.query.city;
+      // this.suburb = this.$route.query.suburb;
+      // this.proptype = this.$route.query.propType;
+      // this.keyword = this.$route.query.keyword;
+      // if (typeof this.propertyType === 'undefined') {
+      //   this.propertyType = this.propertyTypeparam;
+      // }
+      // if (this.type === '') {
+      //   this.type = 'undefined';
+      // }
+      // if (this.propertyType === '') {
+      //   this.propertyType = 'undefined';
+      // }
+      // if (this.province === '') {
+      //   this.province = 'undefined';
+      // }
+      // if (this.city === '') {
+      //   this.city = 'undefined';
+      // }
+      // if (this.suburb === '') {
+      //   this.suburb = 'undefined';
+      // }
+      // if (this.proptype === '') {
+      //   this.propType = 'undefined';
+      // }
+      // if (typeof this.keyword === 'undefined' || this.keyword === '') {
+      //   this.searchPropertiesParams(
+      //     Object.assign(
+      //       {},
+      //       {
+      //         type: this.type,
+      //         propertyType: this.propertyType,
+      //         province: this.province,
+      //         city: this.city,
+      //         suburb: this.suburb,
+      //         propType: this.proptype,
+      //       },
+      //     ),
+      //   );
+      // } else {
+      //   this.searchPropertiesKeyword(
+      //     Object.assign({}, { keyword: this.keyword }),
+      //   );
+      // }
       return null;
     },
   },

src/components/property/propertyeditPage.vue

             src="img/Listings2.jpg"
             alt="Timeshare To Buy"
             class="img-fluid"
-            style="width:800px;height:400px;"
+            style="width:800px;height:400px; border-radius:10px"
           />
         </div>
-        <div class="sinse-box">
-          <h3 class="sinse-title">
-            List {{ propertyType }} {{ salesType }} Property
-            <span></span>
-          </h3>
+        <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
+          <h3 class="sinse-title">List {{ propertyType }} {{ salesType }} Property</h3>
         </div>
       </div>
       <br />
                     name="propertyType"
                     id="suburbselector"
                     v-model="property.suburbId"
+                    @change="getPostalCode"
                   >
                     <option value="0">Please select suburb</option>
                     <option
                   <span class="input-group-text">
                     <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
                   </span>
-                  <input class="form-control" type="text" name="postalcode" />
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="postalcode"
+                    v-model="property.addressLine3"
+                  />
                 </div>
               </div>
             </div>
                 </div>
               </div>
             </div>
-            <ImageLoad :loadedImages="loadedImages" :savedImages="propertyImages" />
+            <ImageLoad
+              :loadedImages="loadedImages"
+              :savedImages="propertyImages"
+              @DefaultImage="UpdateDefaultImage"
+            />
             <button
               v-if="!wait"
               type="button"
 <script>
 import { mapState, mapActions } from 'vuex';
 import TextEditor from 'vue-trix';
+import { setTimeout } from 'timers';
 import UserField from './propertyUserField.vue';
 import ImageLoad from './propertyImage.vue';
 
     ]),
     SubmitData() {
       this.wait = true;
+      if (this.salesType === 'Sale') {
+        this.property.isSale = true;
+      }
       for (let i = 0; i < this.images.length; i++) {
         let setAsDefault = false;
         if (i === this.defaultImage) {
           isDefault: setAsDefault,
         });
       }
-      this.property.createdBy = 'GeorgeW';
+      this.property.propertyUserFields = this.propertyFieldValues;
 
       this.saveProperty(this.property);
 
       setTimeout(
         () => this.$router.push({
             path: '/property/search',
-            query: { type: this.salesType, propertyType: this.propertyType },
+            query: {
+              salesType: this.salesType,
+              propertyUsageType: this.propertyType,
+            },
           }),
         3000,
       );
         );
       }
     },
+    getPostalCode(item) {
+      this.property.addressLine3 = this.suburbs[
+        item.target.options.selectedIndex - 1
+      ].postalCode;
+    },
     loadedImages(values) {
       this.images = values;
     },
     if (this.propertyFields.length > 0) {
       this.propertyFields = [];
     }
+    if (this.property.description !== '') {
+      this.property.description = '';
+    }
 
     this.propertyType = this.$route.params.propType;
     this.salesType = this.$route.params.saleType;

src/components/shared/footerSection.vue

             </div>
             <div class="credits">
               Site created by
-              <router-link to="https://provision-sa.com">
+              <a href="http://www.provision-sa.co.za/">
                 <img
                   src="img/logos/provision-logocropped.png"
                   alt
                   class="Provision Logo"
                   style="width: 250px; height:15px;"
                 />
-              </router-link>
+              </a>
             </div>
           </div>
         </div>

src/components/shared/navBar.vue

 <template>
   <!-- eslint-disable max-len -->
   <nav class="navbar navbar-default navbar-trans navbar-expand-lg fixed-top">
-    <div class="container">
+    <div class="container-fluid">
       <button
         class="navbar-toggler collapsed"
         type="button"
         <span></span>
       </button>
       <a class="navbar-brand text-brand" @click="routerGoTo('/')">
+        <img
+          class="img-fluid"
+          src="/img/logos/UVProp.png"
+          alt="UVProp logo"
+          style="width:110px;height:60px;"
+        />
         Uni-Vate
         <span class="color-b">Properties</span>
       </a>
             >Login</a>
             <div class="dropdown-menu" aria-labelledby="navbarDropdown">
               <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/login')">Login</a>
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/login')">Logout</a>
+              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/logout')">Logout</a>
               <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/register')">Register</a>
               <a
                 class="dropdown-item cursor-pointer"
         <span class="fa fa-search" aria-hidden="true"></span>
       </button>
     </div>
+    <span v-if="showLogout">
+      <a @click="logout()">Logout</a>
+    </span>
+    <span v-else></span>
   </nav>
 </template>
+
 <script>
+import { mapGetters, mapActions } from 'vuex';
+
 export default {
+  data() {
+    return {};
+  },
+  computed: {
+    showLogout() {
+      return this.$store.state.authentication.status === 'success';
+    },
+    Logout() {
+      return this.$store.state.authentication.methods.logout;
+    },
+  },
+
   methods: {
+    ...mapGetters('authentication', ['isLoggedIn']),
+    ...mapActions('authentication', ['logout']),
+
     routerGoTo(goTo) {
       console.log(goTo);
       this.$emit('routerGoTo', goTo);

src/components/shared/searchTab.vue

   <!-- eslint-disable max-len -->
   <div class="box-collapse">
     <div class="title-box-d">
-      <h3 class="title-d">Search</h3>
+      <h3 class="title-d" style="text-align:left">Search</h3>
     </div>
     <span class="close-box-collapse right-boxed ion-ios-close"></span>
     <div class="box-collapse-wrap">
       <form class="form-a">
         <div class="row">
           <div class="col-md-12 mb-2">
-            <div class="form-group">
+            <div class="form-group" style="text-align:left">
               <label for="Type">Keyword</label>
               <input
                 type="text"
                 role="tabpanel"
                 aria-labelledby="pills-plans-tab"
               >
-                <propertySearch
-                  propertyType="Residential"
-                  @TypeSelectedUpdated="TypeSelectedUpdated"
-                  @ProvinceSelectedUpdated="ProvinceSelectedUpdated"
-                  @CitySelectedUpdated="CitySelectedUpdated"
-                  @SuburbSelectedUpdated="SuburbSelectedUpdated"
-                  @PropertyTypeSelectedUpdated="PropertyTypeSelectedUpdated"
-                />
+                <propertySearch propertyType="Residential" @updateSearch="updateSearch" />
               </div>
               <div
                 class="tab-pane fade"
                 role="tabpanel"
                 aria-labelledby="pills-map-tab"
               >
-                <propertySearch
-                  propertyType="Commercial"
-                  @TypeSelectedUpdated="TypeSelectedUpdated"
-                  @ProvinceSelectedUpdated="ProvinceSelectedUpdated"
-                  @CitySelectedUpdated="CitySelectedUpdated"
-                  @SuburbSelectedUpdated="SuburbSelectedUpdated"
-                  @PropertyTypeSelectedUpdated="PropertyTypeSelectedUpdated"
-                />
+                <propertySearch propertyType="Commercial" />
               </div>
             </div>
           </div>
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex';
 import propertySearch from '../property/propertySearchFields.vue';
 import timeshareSearch from '../timeshare/searchTimeshare.vue';
 
   data() {
     return {
       selectedPropertyType: 'timeshare',
-      selectedType: '',
-      selectedProvince: '',
-      selectedCity: '',
-      selectedSuburb: '',
-      selectedPropType: '',
       keyword: '',
+      propertySearch: {
+        userID: 0,
+        keyword: '',
+        salesType: 'Sale',
+        propertyUsageType: 'All',
+        propertyType: 'All',
+        province: 'All',
+        city: 'All',
+        suburb: 'All',
+      },
     };
   },
+  computed: {},
   methods: {
     updateType(item) {
       this.selectedPropertyType = item;
     },
-    TypeSelectedUpdated(item) {
-      this.selectedType = item;
-    },
-    PropertyTypeSelectedUpdated(item) {
-      this.selectedPropType = item;
-    },
-    ProvinceSelectedUpdated(item) {
-      this.selectedProvince = item;
-    },
-    CitySelectedUpdated(item) {
-      this.selectedCity = item;
-    },
-    SuburbSelectedUpdated(item) {
-      this.selectedSuburb = item;
+    updateSearch(item) {
+      this.propertySearch = item;
+      this.propertySearch.propertyUsageType = this.selectedPropertyType;
+      this.propertySearch.keyword = this.keyword;
     },
     Search() {
       if (this.selectedPropertyType === 'timeshare') {
       } else {
         this.$router.push({
           path: '/property/search',
-          query: {
-            type: this.selectedType,
-            propertyType: this.selectedPropertyType,
-            province: this.selectedProvince,
-            city: this.selectedCity,
-            suburb: this.selectedSuburb,
-            propType: this.selectedPropType,
-            keyword: this.keyword,
-          },
+          query: this.propertySearch,
         });
+        // this.$router.push('/property/search');
       }
     },
   },

src/components/timeshare/buy/buyPage.vue

               src="img/buy.jpg"
               alt="Timeshare To Buy"
               class="img-fluid"
-              style="width:800px;height:400px;"
+              style="width:800px;height:400px; border-radius:10px"
             />
           </div>
-          <div class="sinse-box">
-            <h3 class="sinse-title">Timshare</h3>
+          <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
+            <h3 class="sinse-title">Timeshare To Buy</h3>
           </div>
         </div>
 
                     width="100%"
                     height="450"
                     frameborder="0"
-                    style="border:0"
+                    style="border-radius:10px"
                     allowfullscreen
                   ></iframe>
                   <br />

src/components/timeshare/buy/weekListPage.vue

 <template>
-  <div>
-    <br />
-    <br />
+  <!-- eslint-disable max-len -->
+  <div class="container">
     <br />
     <br />
     <br />
     <br />
+    <div class="row">
+      <div class="col-md-12 col-lg-8">
+        <div class="title-box-d">
+          <h1 class="title-d" style="text-align:left; font-size: 250%">Search Results</h1>
+        </div>
+        <br />
+      </div>
+      <!-- <div class="row mb-4">
+        <div class="col-md-4">
+          <img />
+        </div>
+        <div class="col-md-4">
+          <img />
+        </div>
+        <div class="col-md-4">
+          <img />
+        </div>
+      </div>-->
+    </div>
     <br />
     <WeekListComponent />
+    <br />
   </div>
 </template>
 <script>

src/components/timeshare/faqPage.vue

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

src/components/timeshare/resort/resortPage.vue

         </div>
         <div class="row mb-4">
           <div class="col-md-4">
-            <img class="img-fluid" :src="image1" alt="Resort Image" />
+            <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" />
+            <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" />
+            <img class="img-fluid" :src="image3" alt="Resort Image" style="border-radius:10px" />
           </div>
         </div>
       </div>

src/components/timeshare/resort/unitPage.vue

       </div>
       <div class="row mb-4">
         <div class="col-md-4">
-          <img class="img-fluid" :src="image1" alt="Resort Image" />
+          <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" />
+          <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" />
+          <img class="img-fluid" :src="image3" alt="Resort Image" style="border-radius:10px" />
         </div>
       </div>
     </div>

src/components/timeshare/sell/sellPage.vue

               src="img/sell2.jpg"
               alt="Timeshare To Sell"
               class="img-fluid"
-              style="width:800px;height:400px;"
+              style="width:800px;height:400px; border-radius:10px"
             />
           </div>
-          <div class="sinse-box">
-            <h3 class="sinse-title">
-              Timeshare To Sell
-              <span></span>
-            </h3>
+          <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
+            <h3 class="sinse-title">Timeshare To Sell</h3>
           </div>
         </div>
         <br />

src/components/user/logOut.vue

+<script>
+import { mapActions } from 'vuex';
+
+export default {
+  computed: {
+    isLoggedIn() {
+      return this.$store.getters.isLoggedIn;
+    },
+  },
+  methods: {
+    ...mapActions('authentication', ['logout']),
+    Logout() {
+      this.logout('logout').then(() => {
+        this.$router.push('/users/login');
+      });
+    },
+  },
+};
+</script>

src/components/user/loginPage.vue

         <div class="form">
           <div>
             <h4>Login</h4>
+            <br />
           </div>
           <div class="row">
             <div class="col-md-11" style="margin-bottom: 1em">
                     type="text"
                     name="username"
                     placeholder="Username"
+                    v-model="username"
                     value
                   />
                 </div>
           <p v-if="user !== null">{{ user }}</p>
         </div>
       </form>
-
       <form id="forgot">
         <div class="form">
           <h5>Trouble signing in?</h5>
 </template>
 
 <script>
-const axios = require('axios');
+import { mapActions, mapState } from 'vuex';
+// import axios from 'axios';
+// import User from '../../assets/Log';
 
 export default {
   name: 'Login',
       text: '',
       showPassword: false,
       password: '',
+      email: '',
     };
   },
+  computed: {
+    ...mapState('authentication', ['token', 'status']),
+  },
   methods: {
+    ...mapActions('authentication', ['login']),
     Login() {
-      axios
-        .post('/api/register/authenticate', {
-          username: this.username,
-          password: this.password,
-        })
-        .then(response => console.log(response.data))
-        .catch(error => console.log(error.push));
-      this.$router.push('/');
+      this.login({ username: this.username, password: this.password })
+        .then(() => this.router.push('/'))
+        .catch(err => console.log(err));
+      this.$router.push('/about/us');
     },
     togglePassword() {
       this.showPassword = true;

src/components/user/secure.vue

+<template>
+  <div>
+    <h1>This page is protected by auth</h1>
+  </div>
+</template>

src/main.js

 /* eslint-disable prefer-template */
 import Vue from 'vue';
 import EvaIcons from 'vue-eva-icons';
+import axios from 'axios';
 import App from './App.vue';
 import router from './router';
 import store from './store';
 
 Vue.config.productionTip = false;
 
+Vue.prototype.$http = axios;
+const token = localStorage.getItem('token');
+if (token) {
+  Vue.prototype.$http.defaults.headers.common.Authorization = token;
+}
+
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(record => record.meta.requiresAuth)) {
+    if (store.getters.isLoggedIn) {
+      next();
+      return;
+    }
+    next('/users/login');
+  } else {
+    next();
+  }
+});
+
 Vue.filter('toCurrency', (value) => {
   if (typeof value !== 'number') {
     return value;

src/router/index.js

+/* eslint-disable import/prefer-default-export */
 import Vue from 'vue';
 import Router from 'vue-router';
 
 
 import MakeOffer from '../components/processFlow/makeOffer.vue';
 import Offer from '../components/processFlow/offers.vue';
+// import store from '../store';
 
 Vue.use(Router);
 

src/store/index.js

 import Register from './modules/user/register';
 import WeekList from './modules/timeshare/weekList';
 import Bid from './modules/processFlow/bid';
+import Authentication from './modules/user/authentication';
+import PropertySearch from './modules/property/propertySearch';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
     registerAgency: Register,
     weekList: WeekList,
     bid: Bid,
+    authentication: Authentication,
+    propertySearch: PropertySearch,
   },
 });

src/store/modules/property/property.js

     propertyTypesCom: [],
     propertyOverviewFields: [],
     propertyFields: [],
-    properties: [],
-    latestProperties: [],
   },
   mutations: {
     setProperty(state, property) {
       state.propertyFields = fields;
     },
     updateCurrentProperty(state, property) {
-      state.property = property;
-    },
-    updateSearch(state, propertySearch) {
-      state.properties = propertySearch;
-    },
-    setLatestProperties(state, properties) {
-      state.latestProperties = properties;
+      state.properties.push(property);
     },
     clearProperty(state) {
       state.property = {
     clearPropertyImages(state) {
       state.propertyImages = [];
     },
-    setProperties(state, properties) {
-      state.properties = properties;
-    },
   },
   getters: {},
   actions: {
         .then(result => commit('updateCurrentProperty', result.data))
         .catch(console.error);
     },
-    searchPropertiesParams({ commit }, item) {
-      axios
-        .get(
-          `/api/property/search/${item.type}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.propType}`,
-        )
-        .then(response => commit('updateSearch', response.data))
-        .catch(console.error);
-    },
-    searchPropertiesKeyword({ commit }, item) {
-      axios
-        .get(`/api/Property/Search/${item.keyword}`)
-        .then(response => commit('updateSearch', response.data))
-        .catch(console.error);
-    },
-    searchLatestProperties({ commit }) {
-      axios
-        .get('/api/property/latestProperties')
-        .then(response => commit('setLatestProperties', response.data))
-        .catch(console.error);
-    },
     clearProperty({ commit }) {
       commit('clearProperty');
     },

src/store/modules/property/propertySearch.js

+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    propertySearch: {
+      userID: 0,
+      keyword: '',
+      salesType: 'Sale',
+      propertyUsageType: 'All',
+      propertyType: 'All',
+      province: 'All',
+      city: 'All',
+      suburb: 'All',
+    },
+    properties: [],
+    latestProperties: [],
+  },
+  mutations: {
+    updateSearch(state, propertySearch) {
+      state.properties = [];
+      state.properties = propertySearch;
+    },
+    setLatestProperties(state, properties) {
+      state.latestProperties = properties;
+    },
+    setPropertySearch(state, search) {
+      state.propertySearch = search;
+    },
+    onClearFilter(state, filter) {
+      state.propertySearch[filter] = 'All';
+    },
+  },
+  getters: {},
+  actions: {
+    clearFilter({ commit }, filter) {
+      commit('onClearFilter', filter);
+    },
+    getPropertySearchObject({ commit }) {
+      const search = {
+        userID: 0,
+        keyword: '',
+        salesType: 'Sale',
+        propertyUsageType: 'All',
+        propertyType: 'All',
+        province: 'All',
+        city: 'All',
+        suburb: 'All',
+      };
+      commit('setPropertySearch', search);
+    },
+    searchProperties({ commit }, item) {
+      axios
+        .post('/api/Property/Search', item)
+        .then(result => commit('updateSearch', result.data))
+        .catch(console.error);
+    },
+    searchLatestProperties({ commit }) {
+      axios
+        .get('/api/property/latestProperties')
+        .then(response => commit('setLatestProperties', response.data))
+        .catch(console.error);
+    },
+  },
+};

src/store/modules/user/authentication.js

+import Vue from 'vue';
+import Vuex from 'vuex';
+import axios from 'axios';
+
+Vue.use(Vuex);
+export default {
+  namespaced: true,
+  state: {
+    status: '',
+    token: localStorage.getItem('token') || '',
+    user: {},
+  },
+  mutations: {
+    auth_request(state) {
+      state.status = 'loading';
+    },
+    auth_success(state, token, user) {
+      state.status = 'success';
+      state.token = token;
+      state.user = user;
+    },
+    auth_error(state) {
+      state.status = 'error';
+    },
+    logout(state) {
+      state.status = '';
+      state.token = '';
+    },
+  },
+  getters: {
+    isLoggedIn: state => !!state.token,
+    authStatus: state => state.status,
+  },
+  actions: {
+    login({
+      commit,
+    }, user) {
+      return new Promise((reject) => {
+        commit('auth_request');
+        axios({
+          url: '/api/register/authenticate',
+          data: user,
+          method: 'POST',
+        })
+          .then((resp) => {
+            console.log(resp.data);
+            localStorage.setItem('token', resp.data.token);
+            commit('auth_success', resp.data.token, resp.data);
+          })
+          .catch((err) => {
+            commit('auth_error');
+            localStorage.removeItem('token');
+            reject(err);
+          });
+      });
+    },
+    logout({
+      commit,
+    }) {
+      return new Promise(() => {
+        commit('logout');
+        localStorage.removeItem('token');
+        delete axios.defaults.headers.common.Authorization;
+      });
+    },
+  },
+};

src/store/modules/user/register.js

     //   commit,
     // }, id) {
     //   axios
-    //     .get(`http://192.168.6.188:5000/api/user/${id}`)
+    //     .get(`/api/user/${id}`)
     //     .then(result => commit('setIndividual', result.data))
     //     .catch(console.error);
     // },
     //   commit,
     // }, id) {
     //   axios
-    //     .get(`http://192.168.6.188:5000/api/agency/${id}`)
+    //     .get(`/api/agency/${id}`)
     //     .then(result => commit('setAgency', result.data))
     //     .catch(console.error);
     // },
       commit,
     }, item) {
       axios
-        .post('http://192.168.6.188:5000/api/register/register', item)
+        .post('/api/register/register', item)
         .then(result => commit('addIndividual', result.data))
         .catch(console.error);
     },
       commit,
     }, item) {
       axios
-        .post('http://192.168.6.188:5000/api/register/registeragency', item)
+        .post('/api/register/registeragency', item)
         .then(result => commit('addAgency', result.data))
         .catch(console.error);
     },
     //   commit,
     // }, item) {
     //   axios
-    //     .put('http://192.168.6.188:5000/api/individual', item)
+    //     .put('/api/individual', item)
     //     .then(result => commit('updateIndividual', item))
     //     .catch(console.error);
     // },
     //   commit,
     // }, item) {
     //   axios
-    //     .put('http://192.168.6.188:5000/api/agency', item)
+    //     .put('/api/agency', item)
     //     .then(result => commit('updateAgency', item))
     //     .catch(console.error);
     // },
     //   commit,
     // }, id) {
     //   axios
-    //     .delete(`http://192.168.6.188:5000/api/individual/${id}`)
+    //     .delete(`/api/individual/${id}`)
     //     .then(result => commit('removeIndividual', id))
     //     .catch(console.error);
     // },
     //   commit,
     // }, id) {
     //   axios
-    //     .delete(`http://192.168.6.188:5000/api/agency/${id}`)
+    //     .delete(`/api/agency/${id}`)
     //     .then(result => commit('removeAgency', id))
     //     .catch(console.error);
     // },