Merge branch 'master' of http://192.168.6.188:3000/Provision/UnivateProperties

src/App.vue

@@ -24,6 +24,16 @@ export default {
     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

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

src/components/about/aboutTimeshare.vue

@@ -9,14 +9,11 @@
               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">
@@ -65,7 +62,7 @@
                   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

@@ -9,14 +9,11 @@
               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">
@@ -69,7 +66,12 @@
                 <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

@@ -2,17 +2,25 @@
   <!-- 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>
@@ -52,6 +60,7 @@
         </tbody>
       </table>
     </div>
+    <br />
   </div>
 </template>
 

src/components/admin/property/userDefinedGroupsPage.vue

@@ -1,17 +1,25 @@
 <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">
@@ -51,6 +59,7 @@
         </tbody>
       </table>
     </div>
+    <br />
   </div>
 </template>
 <script>

src/components/admin/status/changeLogPage.vue

@@ -1,18 +1,28 @@
 <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

@@ -1,16 +1,24 @@
 <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

@@ -1,18 +1,28 @@
 <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

@@ -1,18 +1,26 @@
 <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

@@ -1,18 +1,26 @@
 <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

@@ -1,16 +1,24 @@
 <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/testimonialSection.vue

@@ -19,7 +19,12 @@
                 <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>
@@ -51,7 +56,12 @@
                 <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>
@@ -81,7 +91,12 @@
                 <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>
@@ -111,7 +126,12 @@
                 <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

@@ -8,14 +8,11 @@
             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

@@ -8,14 +8,11 @@
             src="img/privacy.jpg"
             alt="Privacy Policy"
             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">
-            Privacy Policy
-            <span></span>
-          </h3>
+        <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
+          <h3 class="sinse-title">Privacy Policy</h3>
         </div>
       </div>
       <div class="col-md-12 text-left">

src/components/property/propertyList.vue

@@ -2,18 +2,30 @@
   <!-- 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">
@@ -54,6 +66,7 @@
         </tbody>
       </table>
     </div>
+    <br />
   </div>
 </template>
 

src/components/property/propertySearchPage.vue

@@ -8,14 +8,11 @@
             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 />
@@ -73,14 +70,11 @@
             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 />
@@ -113,7 +107,12 @@
         </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>

src/components/property/propertyeditPage.vue

@@ -8,14 +8,11 @@
             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 />

src/components/shared/navBar.vue

@@ -1,7 +1,7 @@
 <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"
@@ -16,6 +16,12 @@
         <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>
@@ -194,7 +200,7 @@
             >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"
@@ -214,11 +220,33 @@
         <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/timeshare/buy/buyPage.vue

@@ -9,14 +9,11 @@
               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">
-              Timeshare To Buy
-              <span></span>
-            </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>
 
@@ -95,7 +92,7 @@
                     width="100%"
                     height="450"
                     frameborder="0"
-                    style="border:0"
+                    style="border-radius:10px"
                     allowfullscreen
                   ></iframe>
                   <br />

src/components/timeshare/faqPage.vue

@@ -9,14 +9,11 @@
               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

@@ -15,13 +15,13 @@
         </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

@@ -14,13 +14,13 @@
       </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

@@ -9,14 +9,11 @@
               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

@@ -0,0 +1,19 @@
+<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

@@ -6,6 +6,7 @@
         <div class="form">
           <div>
             <h4>Login</h4>
+            <br />
           </div>
           <div class="row">
             <div class="col-md-11" style="margin-bottom: 1em">
@@ -19,6 +20,7 @@
                     type="text"
                     name="username"
                     placeholder="Username"
+                    v-model="username"
                     value
                   />
                 </div>
@@ -57,7 +59,6 @@
           <p v-if="user !== null">{{ user }}</p>
         </div>
       </form>
-
       <form id="forgot">
         <div class="form">
           <h5>Trouble signing in?</h5>
@@ -82,7 +83,9 @@
 </template>
 
 <script>
-const axios = require('axios');
+import { mapActions, mapState } from 'vuex';
+// import axios from 'axios';
+// import User from '../../assets/Log';
 
 export default {
   name: 'Login',
@@ -98,18 +101,19 @@ export default {
       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

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>This page is protected by auth</h1>
+  </div>
+</template>

src/main.js

@@ -1,5 +1,6 @@
 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';
@@ -8,6 +9,24 @@ Vue.use(EvaIcons);
 
 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

@@ -1,3 +1,4 @@
+/* eslint-disable import/prefer-default-export */
 import Vue from 'vue';
 import Router from 'vue-router';
 
@@ -39,6 +40,7 @@ import PrivacyPolicy from '../components/misc/privacyPolicyPage.vue';
 
 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

@@ -16,6 +16,7 @@ import PropertyTypes from './modules/property/propertyTypes';
 import Register from './modules/user/register';
 import WeekList from './modules/timeshare/weekList';
 import Bid from './modules/processFlow/bid';
+import Authentication from './modules/user/authentication';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
@@ -37,5 +38,6 @@ export default new Vuex.Store({
     registerAgency: Register,
     weekList: WeekList,
     bid: Bid,
+    authentication: Authentication,
   },
 });

src/store/modules/user/authentication.js

@@ -0,0 +1,67 @@
+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;
+      });
+    },
+  },
+};