Validation and standardisation

src/components/admin/status/agencyUserManagementPage.vue

@@ -31,7 +31,7 @@
         <div class="col-md-1 offset-1">
             <button type="button" class="btn-solid-blue">AGENCIES</button>
           </div>
-        <div class="col-md-2 offset-3">
+        <div class="col-md-3 offset-3">
           <button
             type="button"
             class="btn-white-border"

src/components/admin/status/agentsUserManagementPage.vue → src/components/admin/status/agentUserManagementPage.vue

@@ -36,17 +36,17 @@
             type="button"
             class="btn-white-border"
             data-toggle="modal"
-            :data-target="'#myModalAgency'"
+            :data-target="'#myModalAgent'"
           >
             NEW AGENT
           </button>
-          <div :id="'myModalAgency'" class="modal fade" role="dialog">
+          <div :id="'myModalAgent'" class="modal fade" role="dialog">
             <div class="modal-dialog modal-lg">
               <div class="modal-content">
                 <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal">&times;</button>
                 </div>
-                <Agency name="Agency" :isAddAgent="false" :item="item" />
+                <Agent name="Agent" :isAddAgent="false" :item="item" />
               </div>
             </div>
           </div>
@@ -88,7 +88,7 @@
 /* eslint-disable */
 import { mapState, mapActions } from "vuex";
 import axios from "axios";
-import Agency from "../../user/registerAgencySection.vue";
+import Agent from "../../user/registerAgentSection.vue";
 // import alert from '../../shared/alert.vue';
 import ListView from "../../shared/listView.vue";
 
@@ -96,7 +96,7 @@ export default {
   name: "agentManagementPage",
   components: {
     ListView,
-    Agency
+    Agent
     // alert,
   },
   props: {
@@ -110,7 +110,7 @@ export default {
     };
   },
   methods: {
-    ...mapActions("register", ["getAgents", "deleteAgent"]),
+    ...mapActions("register", ["getAgencies", "getAgents", "deleteAgent"]),
     addNewAgent({ commit }) {
       axios
         .post("/api/agent")
@@ -130,6 +130,7 @@ export default {
   },
   mounted() {
     this.getAgents();
+    this.getAgencies();
   },
   computed: {
     ...mapState("register", ["agents", "removeAgent"])

src/components/home/carouselSection.vue

@@ -1,118 +1,148 @@
 <template>
   <section id="intro">
     <div class="container">
-      <div class="row">
-        <div align="left" class="col-sm-12 col-md-12 col-lg-8">
-          <div class="intro-content introContentAdjust">
-            <h2>Find your perfect Property</h2>
-            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
-              <li class="nav-item">
-                <a
-                  class="nav-link btn-white-border"
-                  id="timeshare-tab"
-                  data-toggle="pill"
-                  href="#timeshare"
-                  role="tab"
-                  aria-controls="timeshare"
-                  aria-selected="true"
-                >Timeshare</a>
-              </li>
-              <li class="nav-item">
-                <a
-                  class="nav-link btn-white-border"
-                  id="commercial-tab"
-                  data-toggle="pill"
-                  href="#commercial"
-                  role="tab"
-                  aria-controls="commercial"
-                  aria-selected="false"
-                >Commercial</a>
-              </li>
-              <li class="nav-item">
-                <a
-                  class="nav-link btn-white-border"
-                  id="residential-tab"
-                  data-toggle="pill"
-                  href="#residential"
-                  role="tab"
-                  aria-controls="residential"
-                  aria-selected="false"
-                >Residential</a>
-              </li>
-            </ul>
-            <!--========    header tabs      ==========-->
-            <div class="tab-content" id="pills-tabContent">
-              <div
-                class="tab-pane fade show active"
-                id="start"
-                role="tabpanel"
-                aria-labelledby="start-tab"
-              >
-                <p>Choose an option to start your adventure</p>
-              </div>
+      <div class="form">
+        <div class="row">
+          <div align="left" class="col-sm-12 col-md-12 col-lg-8">
+            <div class="intro-content">
+              <h2>Find your perfect Property</h2>
+              <ul class="nav nav-tabs mb-3" id="pills-tab" role="tablist">
+                <li class="nav-item">
+                  <a
+                    class="nav-link"
+                    id="timeshare-tab"
+                    data-toggle="pill"
+                    href="#timeshare"
+                    role="tab"
+                    aria-controls="timeshare"
+                    aria-selected="false"
+                  >
+                    Timeshare
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a
+                    class="nav-link"
+                    id="commercial-tab"
+                    data-toggle="pill"
+                    href="#commercial"
+                    role="tab"
+                    aria-controls="commercial"
+                    aria-selected="false"
+                  >
+                    Commercial
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a
+                    class="nav-link"
+                    id="residential-tab"
+                    data-toggle="pill"
+                    href="#residential"
+                    role="tab"
+                    aria-controls="residential"
+                    aria-selected="false"
+                  >
+                    Residential
+                  </a>
+                </li>
+              </ul>
+              <!--========    header tabs      ==========-->
+              <div class="tab-content" id="pills-tabContent">
+                <div
+                  class="tab-pane fade show active"
+                  id="start"
+                  role="tabpanel"
+                  aria-labelledby="start-tab"
+                >
+                  <p>Choose an option to start your adventure</p>
+                </div>
 
-              <div
-                class="tab-pane fade show"
-                id="timeshare"
-                role="tabpanel"
-                aria-labelledby="timeshare-tab"
-              >
-                <H4>TIMESHARE SALES</H4>
-                <p>Start exploring your posibilities</p>
-                <div id="row">
-                  <router-link to="/timeshare/buy" class="btn-solid-blue">
-                    <i class="fa fa-search"></i> BUY
-                  </router-link>
-                  <router-link to="/timeshare/sell" class="btn-solid-blue">
-                    <i class="fa chevron-circle-right"></i> SELL
-                  </router-link>
+                <div
+                  class="tab-pane fade"
+                  id="timeshare"
+                  role="tabpanel"
+                  aria-labelledby="timeshare-tab"
+                >
+                  <H4>Timeshare Sales</H4>
+                  <p>Start exploring your posibilities</p>
+                  <div id="row">
+                    <router-link to="/timeshare/buy" class="btn-white-border">
+                      <i class="fa fa-search"></i>
+                      Buy
+                    </router-link>
+                    <router-link to="/timeshare/sell" class="btn-white-border">
+                      <i class="fa chevron-circle-right"></i>
+                      Sell
+                    </router-link>
+                  </div>
                 </div>
-              </div>
 
-              <div
-                class="tab-pane fade"
-                id="commercial"
-                role="tabpanel"
-                aria-labelledby="commercial-tab"
-              >
-                <h4>COMMERCIAL PROPERTIES</h4>
-                <p>Select the region you are looking for to start your search</p>
-                <div id="row">
-                  <div class="form-group">
-                    <autoComplete @GoogleAddress="UpdateAddress" />
+                <div
+                  class="tab-pane fade"
+                  id="commercial"
+                  role="tabpanel"
+                  aria-labelledby="commercial-tab"
+                >
+                  <h4>Commercial Properties</h4>
+                  <p>
+                    Select the region you are looking for to start your search
+                  </p>
+                  <div id="row">
+                    <div class="form-group">
+                      <autoComplete @GoogleAddress="UpdateAddress" />
+                    </div>
+                    <a
+                      v-on:click="SearchClickRentComm()"
+                      class="btn-white-border scrollto"
+                    >
+                      <i class="fa fa-search"></i>
+                      Rent
+                    </a>
+                    <a
+                      v-on:click="SearchClickBuyComm()"
+                      class="btn-white-border scrollto"
+                    >
+                      <i class="fa fa-search"></i>
+                      Buy
+                    </a>
                   </div>
-                  <a v-on:click="SearchClickRentComm()" class="btn-solid-blue scrollto">
-                    <i class="fa fa-search"></i> RENT
-                  </a>
-                  <a v-on:click="SearchClickBuyComm()" class="btn-solid-blue scrollto">
-                    <i class="fa fa-search"></i> BUY
-                  </a>
                 </div>
-              </div>
 
-              <div
-                class="tab-pane fade"
-                id="residential"
-                role="tabpanel"
-                aria-labelledby="residential-tab"
-              >
-                <h4>RESIDENTIAL PROPERTIES</h4>
-                <p>Select the region you are looking for to start your search</p>
-                <div id="row">
-                  <div class="form-group">
-                    <autoComplete @GoogleAddress="UpdateAddress" />
+                <div
+                  class="tab-pane fade"
+                  id="residential"
+                  role="tabpanel"
+                  aria-labelledby="residential-tab"
+                >
+                  <h4>Residential Properties</h4>
+                  <p>
+                    Select the region you are looking for to start your search
+                  </p>
+                  <div id="row">
+                    <div class="form-group">
+                      <autoComplete @GoogleAddress="UpdateAddress" />
+                    </div>
+                    <a
+                      v-on:click="SearchClickRentRes()"
+                      class="btn-white-border scrollto"
+                    >
+                      <i class="fa fa-search"></i>
+                      Rent
+                    </a>
+                    <a
+                      v-on:click="SearchClickBuyRes()"
+                      class="btn-white-border scrollto"
+                    >
+                      <i class="fa fa-search"></i>
+                      Buy
+                    </a>
                   </div>
-                  <a v-on:click="SearchClickRentRes()" class="btn-solid-blue scrollto">
-                    <i class="fa fa-search"></i> RENT
-                  </a>
-                  <a v-on:click="SearchClickBuyRes()" class="btn-solid-blue scrollto">
-                    <i class="fa fa-search"></i> BUY
-                  </a>
                 </div>
               </div>
-            </div>
 
-            <div></div>
+              <div></div>
+            </div>
           </div>
         </div>
       </div>
@@ -125,15 +155,48 @@
       :autoplay="true"
       :loop="true"
       id="intro-carousel"
-      style="margin-top:-50px"
-      :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
+      style="margin-top: -50px;"
+      :responsive="{
+        0: { items: 1, nav: false },
+        600: { items: 1, nav: false },
+      }"
     >
-      <img class="item" src="/img/intro-carousel/home-1.jpg" style="object-fit: cover" alt />
-      <img class="item" src="/img/intro-carousel/home-2.jpg" style="object-fit: cover" alt />
-      <img class="item" src="/img/intro-carousel/home-3.jpg" style="object-fit: cover" alt />
-      <img class="item" src="/img/intro-carousel/home-4.jpg" style="object-fit: cover" alt />
-      <img class="item" src="/img/intro-carousel/home-5.jpg" style="object-fit: cover" alt />
-      <img class="item" src="/img/intro-carousel/home-6.jpg" style="object-fit: cover" alt />
+      <img
+        class="item"
+        src="/img/intro-carousel/home-1.jpg"
+        style="object-fit: cover;"
+        alt
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/home-2.jpg"
+        style="object-fit: cover;"
+        alt
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/home-3.jpg"
+        style="object-fit: cover;"
+        alt
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/home-4.jpg"
+        style="object-fit: cover;"
+        alt
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/home-5.jpg"
+        style="object-fit: cover;"
+        alt
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/home-6.jpg"
+        style="object-fit: cover;"
+        alt
+      />
     </carousel>
 
     <div id="intro-carousel" class="owl-carousel"></div>
@@ -143,80 +206,80 @@
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
-import carousel from "vue-owl-carousel";
-import autoComplete from "../shared/addressAutoComplete";
+import { mapState, mapActions } from 'vuex'
+import carousel from 'vue-owl-carousel'
+import autoComplete from '../shared/addressAutoComplete'
 export default {
   components: {
     carousel,
     autoComplete,
   },
   computed: {
-    ...mapState("propertySearch", ["suburbs", "suburbList", "propertySearch"]),
+    ...mapState('propertySearch', ['suburbs', 'suburbList', 'propertySearch']),
   },
   data() {
     return {
-      propertyUsageType: "Commercial",
-      salesType: "Sale",
-      searchText: "",
+      propertyUsageType: 'Commercial',
+      salesType: 'Sale',
+      searchText: '',
       clicked: false,
-    };
+    }
   },
   methods: {
-    ...mapActions("propertySearch", ["applyFilter"]),
+    ...mapActions('propertySearch', ['applyFilter']),
     SetSalesType(value) {
-      this.salesType = value;
+      this.salesType = value
     },
     SearchClickBuyRes() {
       // const item = this.suburbs.find((s) => s.display === this.searchText);
       // this.propertySearch.province = item.province;
       // this.propertySearch.city = item.city;
       // this.propertySearch.suburb = item.suburb;
-      this.propertySearch.propertyUsageType = "Residential";
-      this.propertySearch.salesType = "Sale";
+      this.propertySearch.propertyUsageType = 'Residential'
+      this.propertySearch.salesType = 'Sale'
 
-      this.$router.push("/property/residential/searchResult");
+      this.$router.push('/property/residential/searchResult')
     },
     SearchClickRentRes() {
       // const item = this.suburbs.find((s) => s.display === this.searchText);
       // this.propertySearch.province = item.province;
       // this.propertySearch.city = item.city;
       // this.propertySearch.suburb = item.suburb;
-      this.propertySearch.propertyUsageType = "Residential";
-      this.propertySearch.salesType = "Rent";
+      this.propertySearch.propertyUsageType = 'Residential'
+      this.propertySearch.salesType = 'Rent'
 
-      this.$router.push("/property/residential/searchResult");
+      this.$router.push('/property/residential/searchResult')
     },
     SearchClickBuyComm() {
       // const item = this.suburbs.find((s) => s.display === this.searchText);
       // this.propertySearch.province = item.province;
       // this.propertySearch.city = item.city;
       // this.propertySearch.suburb = item.suburb;
-      this.propertySearch.propertyUsageType = "Commercial";
-      this.propertySearch.salesType = "Sale";
+      this.propertySearch.propertyUsageType = 'Commercial'
+      this.propertySearch.salesType = 'Sale'
 
-      this.$router.push("/property/commercial/searchResult");
+      this.$router.push('/property/commercial/searchResult')
     },
     SearchClickRentComm() {
       // const item = this.suburbs.find((s) => s.display === this.searchText);
       // this.propertySearch.province = item.province;
       // this.propertySearch.city = item.city;
       // this.propertySearch.suburb = item.suburb;
-      this.propertySearch.propertyUsageType = "Commercial";
-      this.propertySearch.salesType = "Rent";
+      this.propertySearch.propertyUsageType = 'Commercial'
+      this.propertySearch.salesType = 'Rent'
 
-      this.$router.push("/property/commercial/searchResult");
+      this.$router.push('/property/commercial/searchResult')
     },
     SelectedFilter(item) {
-      this.searchText = item;
+      this.searchText = item
     },
     UpdateAddress(place) {
-      this.propertySearch.province = place.province;
-      this.propertySearch.city = place.city;
-      this.propertySearch.suburb = place.suburb;
+      this.propertySearch.province = place.province
+      this.propertySearch.city = place.city
+      this.propertySearch.suburb = place.suburb
     },
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -254,4 +317,31 @@ export default {
     margin-top: 120px !important;
   }
 }
+.nav-tabs li a {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  background-color: white;
+  border-bottom-color: rgb(27, 117, 187);
+  border: 1px solid rgb(27, 117, 187);
+}
+
+.nav-tabs li :hover {
+  color: white;
+  background-color: rgb(27, 117, 187);
+}
+
+.nav-tabs li a.active {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  color: white;
+  background-color: rgb(80, 133, 240);
+  border-bottom-color: rgb(80, 133, 240);
+}
+
+.nav-tabs li a :hover {
+  background-color: transparent;
+  color: white;
+}
 </style>

src/components/property/commercial/commercialCarouselSection.vue

@@ -1,69 +1,77 @@
 <template>
   <section id="intro">
     <div class="container">
-      <div class="row">
-        <div align="left" class="col-sm-12 col-md-8">
-          <div class="intro-content">
-            <h2>Find an Office</h2>
-
-            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
-              <li class="nav-item">
-                <a
-                  class="nav-link btn-white-border"
-                  id="buy-tab"
-                  data-toggle="pill"
-                  href="#buy"
-                  role="tab"
-                  aria-controls="buy"
-                  aria-selected="true"
-                  @click="SetSalesType('Sale')"
-                >Buy office space</a>
-              </li>
-              <li class="nav-item">
-                <a
-                  class="nav-link btn-white-border"
-                  id="rent-tab"
-                  data-toggle="pill"
-                  href="#rent"
-                  role="tab"
-                  aria-controls="rent"
-                  aria-selected="false"
-                  @click="SetSalesType('Rent')"
-                >Rent an office</a>
-              </li>
-            </ul>
-            <div class="tab-content" id="pills-tabContent">
-              <div
-                class="tab-pane fade show active"
-                id="start"
-                role="tabpanel"
-                aria-labelledby="start-tab"
-              >
-                <p></p>
-              </div>
-
-              <div class="tab-pane fade show" id="buy" role="tabpanel" aria-labelledby="buy-tab">
-                <h4>PROPERTIES FOR SALE</h4>
-                <div class="row">
-                  <div class="form-group col-md-12">
-                    <autoComplete @GoogleAddress="SetAddress" />
+      <div class="form">
+        <div class="row">
+          <div align="left" class="col-sm-12 col-md-8">
+            <div class="intro-content">
+              <h2>Find an Office</h2>
+              <ul class="nav nav-tabs mb-3" id="pills-tab" role="tablist">
+                <li class="nav-item">
+                  <a
+                    class="nav-link active"
+                    id="buy-tab"
+                    data-toggle="pill"
+                    href="#buy"
+                    role="tab"
+                    aria-controls="buy"
+                    aria-selected="true"
+                    @click="SetSalesType('Sale')"
+                  >
+                    Buy an office
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a
+                    class="nav-link"
+                    id="rent-tab"
+                    data-toggle="pill"
+                    href="#rent"
+                    role="tab"
+                    aria-controls="rent"
+                    aria-selected="false"
+                    @click="SetSalesType('Rent')"
+                  >
+                    Rent an office
+                  </a>
+                </li>
+              </ul>
+              <div class="tab-content" id="pills-tabContent">
+                <div
+                  class="tab-pane fade show active"
+                  id="buy"
+                  role="tabpanel"
+                  aria-labelledby="buy-tab"
+                >
+                  <h4>Properties for Sale</h4>
+                  <div class="row">
+                    <div class="form-group col-md-12">
+                      <autoComplete @GoogleAddress="SetAddress" />
+                    </div>
                   </div>
+                  <a v-on:click="SearchClick" class="btn-white-border">
+                    <i class="fa fa-search"></i>
+                    Search
+                  </a>
                 </div>
-                <a v-on:click="SearchClick" class="btn-solid-blue">
-                  <i class="fa fa-search"></i> SEARCH
-                </a>
-              </div>
 
-              <div class="tab-pane fade" id="rent" role="tabpanel" aria-labelledby="rent-tab">
-                <h4>RENTAL PROPERTIES</h4>
-                <div class="row">
-                  <div class="form-group col-md-12">
-                    <autoComplete @GoogleAddress="SetAddress" />
+                <div
+                  class="tab-pane fade"
+                  id="rent"
+                  role="tabpanel"
+                  aria-labelledby="rent-tab"
+                >
+                  <h4>Rental Properties</h4>
+                  <div class="row">
+                    <div class="form-group col-md-12">
+                      <autoComplete @GoogleAddress="SetAddress" />
+                    </div>
                   </div>
+                  <a v-on:click="SearchClick" class="btn-white-border">
+                    <i class="fa fa-search"></i>
+                    Search
+                  </a>
                 </div>
-                <a v-on:click="SearchClick" class="btn-solid-blue">
-                  <i class="fa fa-search"></i> FIND
-                </a>
               </div>
             </div>
           </div>
@@ -78,8 +86,11 @@
       :autoplay="true"
       :loop="true"
       id="intro-carousel"
-      style="margin-top:-50px"
-      :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
+      style="margin-top: -50px;"
+      :responsive="{
+        0: { items: 1, nav: false },
+        600: { items: 1, nav: false },
+      }"
     >
       <img class="item" src="img/intro-carousel/comm-1.jpg" alt />
       <img class="item" src="img/intro-carousel/comm-2.jpg" alt />
@@ -95,10 +106,10 @@
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
-import autoComplete from "../../shared/addressAutoComplete";
-import carousel from "vue-owl-carousel";
-import searchResult from "./commercialSearchResults";
+import { mapState, mapActions } from 'vuex'
+import autoComplete from '../../shared/addressAutoComplete'
+import carousel from 'vue-owl-carousel'
+import searchResult from './commercialSearchResults'
 export default {
   components: {
     carousel,
@@ -107,38 +118,66 @@ export default {
   },
   data() {
     return {
-      propertyUsageType: "Commercial",
-      salesType: "Sale",
-      searchText: "",
+      propertyUsageType: 'Commercial',
+      salesType: 'Sale',
+      searchText: '',
       clicked: false,
-    };
+    }
   },
   computed: {
-    ...mapState("propertySearch", ["propertySearch"]),
+    ...mapState('propertySearch', ['propertySearch']),
   },
   methods: {
-    ...mapActions("propertySearch", ["applyFilter"]),
+    ...mapActions('propertySearch', ['applyFilter']),
     SetSalesType(value) {
-      this.salesType = value;
+      this.salesType = value
     },
     SearchClick() {
-      this.propertySearch.propertyUsageType = this.propertyUsageType;
-      this.propertySearch.salesType = this.salesType;
+      this.propertySearch.propertyUsageType = this.propertyUsageType
+      this.propertySearch.salesType = this.salesType
 
-      this.$router.push("/property/commercial/searchResult");
+      this.$router.push('/property/commercial/searchResult')
     },
     SetAddress(place) {
-      this.propertySearch.province = place.province;
-      this.propertySearch.city = place.city;
-      this.propertySearch.suburb = place.suburb;
+      this.propertySearch.province = place.province
+      this.propertySearch.city = place.city
+      this.propertySearch.suburb = place.suburb
     },
   },
-  mounted() {    
-    this.propertySearch.city = "All";
-    this.propertySearch.suburb = "All";
-    this.propertySearch.province = "All";
-  }
-};
+  mounted() {
+    this.propertySearch.city = 'All'
+    this.propertySearch.suburb = 'All'
+    this.propertySearch.province = 'All'
+  },
+}
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.nav-tabs li a {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  background-color: white;
+  border-bottom-color: rgb(27, 117, 187);
+  border: 1px solid rgb(27, 117, 187);
+}
+
+.nav-tabs li :hover {
+  color: white;
+  background-color: rgb(27, 117, 187);
+}
+
+.nav-tabs li a.active {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  color: white;
+  background-color: rgb(80, 133, 240);
+  border-bottom-color: rgb(80, 133, 240);
+}
+
+.nav-tabs li a :hover {
+  background-color: transparent;
+  color: white;
+}
+</style>

src/components/property/propertyPage.vue

@@ -6,10 +6,9 @@
       <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%"
-            >{{ property.shortDescription }}</h1>
+            <h1 class="title-d" style="text-align: left; font-size: 250%;">
+              {{ property.shortDescription }}
+            </h1>
           </div>
         </div>
       </div>
@@ -30,7 +29,11 @@
                 :key="i"
               />
             </div>
-            <gallery :images="propertyImages" :index="index" @close="index = null"></gallery>
+            <gallery
+              :images="propertyImages"
+              :index="index"
+              @close="index = null"
+            ></gallery>
           </div>
         </div>
         <br />
@@ -41,17 +44,19 @@
                 <div class="row">
                   <div class="col-sm-12">
                     <div class="title-box-d">
-                      <h3 class="title-d" style="text-align:left">Property Description</h3>
+                      <h3 class="title-d" style="text-align: left;">
+                        Property Description
+                      </h3>
                     </div>
                   </div>
                 </div>
                 <div
                   class="property-description"
-                  style="text-align:left"
+                  style="text-align: left;"
                   v-html="property.description"
                 />
                 <div v-for="display in property.displayData" :key="display.id">
-                  <div class="row section-t3" style="text-align:left">
+                  <div class="row section-t3" style="text-align: left;">
                     <div class="col-sm-12">
                       <div class="title-box-d">
                         <h3 class="title-d">{{ display.groupName }}</h3>
@@ -59,7 +64,11 @@
                     </div>
                   </div>
                   <div class="summary-list">
-                    <ul class="list" v-for="item in display.values" :key="item.id">
+                    <ul
+                      class="list"
+                      v-for="item in display.values"
+                      :key="item.id"
+                    >
                       <li class="d-flex justify-content-between">
                         <strong>{{ item.name }}:</strong>
                         <span v-html="item.value"></span>
@@ -71,12 +80,23 @@
               <div class="col-md-5 col-lg-4">
                 <div class="property-price d-flex justify-content-center foo">
                   <!-- <div class="card-header-c d-flex"> -->
-                  <div style="width: 300px; height: 80px; border-style: solid; color: #60CBEB;">
+                  <div
+                    style="
+                      width: 300px;
+                      height: 80px;
+                      border-style: solid;
+                      color: #60cbeb;
+                    "
+                  >
                     <!-- <span class="ion-money">R</span> -->
 
                     <div class="card-title-c align-self-center">
-                      <h5 class="title-c">R{{ formatPrice(property.price) }}</h5>
-                      <h6 v-if="property.pricePer">Per {{ property.pricePer }}</h6>
+                      <h5 class="title-c">
+                        R{{ formatPrice(property.price) }}
+                      </h5>
+                      <h6 v-if="property.pricePer">
+                        Per {{ property.pricePer }}
+                      </h6>
                     </div>
                   </div>
                   <!-- </div> -->
@@ -85,17 +105,22 @@
                   <div class="row">
                     <div class="col-sm-12">
                       <div class="title-box-d section-t4">
-                        <h3 class="title-d" style="text-align:left">Summary</h3>
+                        <h3 class="title-d" style="text-align: left;">
+                          Summary
+                        </h3>
                       </div>
                     </div>
                   </div>
                   <div class="summary-list">
                     <ul class="list">
-                      <li v-if="!property.isSale" class="d-flex justify-content-between">
+                      <li
+                        v-if="!property.isSale"
+                        class="d-flex justify-content-between"
+                      >
                         <strong>Available:</strong>
-                        <span
-                          v-if="property.dateAvailable < date"
-                        >{{ property.dateAvailable | toDate }}</span>
+                        <span v-if="property.dateAvailable < date">
+                          {{ property.dateAvailable | toDate }}
+                        </span>
                         <span v-else>Now</span>
                       </li>
                       <li class="d-flex justify-content-between">
@@ -112,15 +137,25 @@
                       <li class="d-flex justify-content-between">
                         <strong>Address:</strong>
                         <span
-                          style="text-align:right"
+                          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 : '')
+                            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>
                       </li>
@@ -133,13 +168,21 @@
                     class="btn btn-b-n"
                     data-toggle="modal"
                     data-target="#myModal"
-                  >Make an Offer</button>
+                  >
+                    Make an Offer
+                  </button>
                   <div id="myModal" class="modal fade" role="dialog">
                     <div class="modal-dialog modal-lg">
                       <!-- Modal content-->
                       <div class="modal-content">
                         <div class="modal-header">
-                          <button type="button" class="close" data-dismiss="modal">&times;</button>
+                          <button
+                            type="button"
+                            class="close"
+                            data-dismiss="modal"
+                          >
+                            &times;
+                          </button>
                         </div>
                         <div padding-left="20px">
                           <makeOffer
@@ -150,7 +193,7 @@
                               id: property.id,
                               shortDescription: property.shortDescription,
                               description: property.description,
-                              price: property.price
+                              price: property.price,
                             }"
                           />
                         </div>
@@ -171,7 +214,9 @@
                   <div class="row section-t3">
                     <div class="col-sm-12">
                       <div class="title-box-d">
-                        <h3 class="title-d" style="text-align:left">Contact Agent</h3>
+                        <h3 class="title-d" style="text-align: left;">
+                          Contact Agent
+                        </h3>
                       </div>
                     </div>
                   </div>
@@ -217,7 +262,9 @@
                               </div>
                             </div>
                             <div class="col-md-12">
-                              <button type="submit" class="btn btn-b-n">Send Message</button>
+                              <button type="submit" class="btn btn-b-n">
+                                Send Message
+                              </button>
                             </div>
                           </div>
                         </form>
@@ -233,12 +280,17 @@
         <!-- Tab Control -->
         <div class="row">
           <div class="col-md-12">
-            <div v-if="property.virtualTour" class="row justify-content-between">
+            <div
+              v-if="property.virtualTour"
+              class="row justify-content-between"
+            >
               <div class="col-md-12 col-lg-12 section-md-t3">
                 <div class="row">
                   <div class="col-md-12">
                     <div class="title-box-d">
-                      <h3 class="title-d" style="text-align:left">Virtual Tour</h3>
+                      <h3 class="title-d" style="text-align: left;">
+                        Virtual Tour
+                      </h3>
                     </div>
                   </div>
                 </div>
@@ -261,7 +313,7 @@
                 <div class="row">
                   <div class="col-md-12">
                     <div class="title-box-d">
-                      <h3 class="title-d" style="text-align:left">Video</h3>
+                      <h3 class="title-d" style="text-align: left;">Video</h3>
                     </div>
                   </div>
                 </div>
@@ -270,7 +322,7 @@
                   width="100%"
                   height="700"
                   frameborder="0"
-                  style="border:0"
+                  style="border: 0;"
                   allowfullscreen
                 ></iframe>
               </div>
@@ -284,53 +336,53 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
-import makeOffer from "../processFlow/makeOffer.vue";
-import gallery from "../shared/gallerySlideShow.vue";
+import { mapState, mapActions } from 'vuex'
+import makeOffer from '../processFlow/makeOffer.vue'
+import gallery from '../shared/gallerySlideShow.vue'
 
 export default {
-  name: "property",
+  name: 'property',
   components: {
     makeOffer,
-    gallery
+    gallery,
   },
   data() {
     return {
       index: null,
-      date: new Date()
-    };
+      date: new Date(),
+    }
   },
   mounted() {
-    this.getProperty(this.$route.params.id);
-    this.getPropertyImages(this.$route.params.id);
-    this.mayEditProperty(this.$route.params.id);
+    this.getProperty(this.$route.params.id)
+    this.getPropertyImages(this.$route.params.id)
+    this.mayEditProperty(this.$route.params.id)
   },
   computed: {
-    ...mapState("property", ["property", "propertyImages"]),
-    ...mapState("propertyEdit", ["mayEdit"])
+    ...mapState('property', ['property', 'propertyImages']),
+    ...mapState('propertyEdit', ['mayEdit']),
   },
   methods: {
-    ...mapActions("property", [
-      "getProperty",
-      "getPropertyImages",
-      "clearPropertyImages"
+    ...mapActions('property', [
+      'getProperty',
+      'getPropertyImages',
+      'clearPropertyImages',
     ]),
-    ...mapActions("propertyEdit", ["mayEditProperty"]),
+    ...mapActions('propertyEdit', ['mayEditProperty']),
     formatPrice(value) {
-      const val = (value / 1).toFixed(2);
-      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
+      const val = (value / 1).toFixed(2)
+      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
     },
     formatAddress(value) {
-      if (value !== "") {
-        return `${value}<br/>`;
+      if (value !== '') {
+        return `${value}<br/>`
       }
-      return "";
-    }
+      return ''
+    },
   },
   beforeDestroy() {
-    this.clearPropertyImages();
-  }
-};
+    this.clearPropertyImages()
+  },
+}
 </script>
 
 <style lang="scss">

src/components/property/residential/residentialCarouselSection.vue

@@ -2,69 +2,78 @@
   <div>
     <section id="intro">
       <div class="container">
-        <div class="row">
-          <div align="left" class="col-sm-12 col-md-8">
-            <div class="intro-content">
-              <h2>Find your Home</h2>
-
-              <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
-                <li class="nav-item">
-                  <a
-                    class="nav-link btn-white-border"
-                    id="buy-tab"
-                    data-toggle="pill"
-                    href="#buy"
-                    role="tab"
-                    aria-controls="buy"
-                    aria-selected="true"
-                    @click="SetSalesType('Sale')"
-                  >Buy</a>
-                </li>
-                <li class="nav-item">
-                  <a
-                    class="nav-link btn-white-border"
-                    id="rent-tab"
-                    data-toggle="pill"
-                    href="#rent"
-                    role="tab"
-                    aria-controls="rent"
-                    aria-selected="false"
-                    @click="SetSalesType('Rent')"
-                  >Rent</a>
-                </li>
-              </ul>
-              <div class="tab-content" id="pills-tabContent">
-                <div
-                  class="tab-pane fade show active"
-                  id="start"
-                  role="tabpanel"
-                  aria-labelledby="start-tab"
-                >
-                  <p></p>
-                </div>
+        <div class="form">
+          <div class="row">
+            <div align="left" class="col-sm-12 col-md-8">
+              <div class="intro-content">
+                <h2>Find your Home</h2>
 
-                <div class="tab-pane fade show" id="buy" role="tabpanel" aria-labelledby="buy-tab">
-                  <h4>PROPERTIES FOR SALE</h4>
-                  <div class="row">
-                    <div align="left" class="form-group col-md-12">
-                      <autoComplete @GoogleAddress="UpdateAddress" />
+                <ul class="nav nav-tabs mb-3" id="pills-tab" role="tablist">
+                  <li class="nav-item">
+                    <a
+                      class="nav-link active"
+                      id="buy-tab"
+                      data-toggle="pill"
+                      href="#buy"
+                      role="tab"
+                      aria-controls="buy"
+                      aria-selected="true"
+                      @click="SetSalesType('Sale')"
+                    >
+                      Buy
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a
+                      class="nav-link"
+                      id="rent-tab"
+                      data-toggle="pill"
+                      href="#rent"
+                      role="tab"
+                      aria-controls="rent"
+                      aria-selected="false"
+                      @click="SetSalesType('Rent')"
+                    >
+                      Rent
+                    </a>
+                  </li>
+                </ul>
+                <div class="tab-content" id="pills-tabContent">
+                  <div
+                    class="tab-pane fade show active"
+                    id="buy"
+                    role="tabpanel"
+                    aria-labelledby="buy-tab"
+                  >
+                    <h4>Properties for Sale</h4>
+                    <div class="row">
+                      <div align="left" class="form-group col-md-12">
+                        <autoComplete @GoogleAddress="UpdateAddress" />
+                      </div>
                     </div>
+                    <a v-on:click="SearchClick" class="btn-white-border">
+                      <i class="fa fa-search"></i>
+                      Search
+                    </a>
                   </div>
-                  <a v-on:click="SearchClick" class="btn-solid-blue">
-                    <i class="fa fa-search"></i> SEARCH
-                  </a>
-                </div>
 
-                <div class="tab-pane fade" id="rent" role="tabpanel" aria-labelledby="rent-tab">
-                  <h4>RENTAL PROPERTIES</h4>
-                  <div class="row">
-                    <div align="left" class="form-group col">
-                      <autoComplete @GoogleAddress="UpdateAddress" />
+                  <div
+                    class="tab-pane fade"
+                    id="rent"
+                    role="tabpanel"
+                    aria-labelledby="rent-tab"
+                  >
+                    <h4>Rental Properties</h4>
+                    <div class="row">
+                      <div align="left" class="form-group col">
+                        <autoComplete @GoogleAddress="UpdateAddress" />
+                      </div>
                     </div>
+                    <a v-on:click="SearchClick" class="btn-white-border">
+                      <i class="fa fa-search"></i>
+                      Search
+                    </a>
                   </div>
-                  <a v-on:click="SearchClick" class="btn-solid-blue">
-                    <i class="fa fa-search"></i> FIND
-                  </a>
                 </div>
               </div>
             </div>
@@ -79,18 +88,51 @@
         :autoplay="true"
         :loop="true"
         id="intro-carousel"
-        style="margin-top:-50px"
-        :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
+        style="margin-top: -50px;"
+        :responsive="{
+          0: { items: 1, nav: false },
+          600: { items: 1, nav: false },
+        }"
       >
-        <img class="item" src="img/intro-carousel/residential-1.jpg" style="object-fit: cover" alt />
-        <img class="item" src="img/intro-carousel/residential-2.jpg" style="object-fit: cover" alt />
-        <img class="item" src="img/intro-carousel/residential-3.jpg" style="object-fit: cover" alt />
-        <img class="item" src="img/intro-carousel/residential-4.jpg" style="object-fit: cover" alt />
-        <img class="item" src="img/intro-carousel/residential-5.jpg" style="object-fit: cover" alt />
-        <img class="item" src="img/intro-carousel/residential-6.jpg" style="object-fit: cover" alt />
+        <img
+          class="item"
+          src="img/intro-carousel/residential-1.jpg"
+          style="object-fit: cover;"
+          alt
+        />
+        <img
+          class="item"
+          src="img/intro-carousel/residential-2.jpg"
+          style="object-fit: cover;"
+          alt
+        />
+        <img
+          class="item"
+          src="img/intro-carousel/residential-3.jpg"
+          style="object-fit: cover;"
+          alt
+        />
+        <img
+          class="item"
+          src="img/intro-carousel/residential-4.jpg"
+          style="object-fit: cover;"
+          alt
+        />
+        <img
+          class="item"
+          src="img/intro-carousel/residential-5.jpg"
+          style="object-fit: cover;"
+          alt
+        />
+        <img
+          class="item"
+          src="img/intro-carousel/residential-6.jpg"
+          style="object-fit: cover;"
+          alt
+        />
       </carousel>
     </section>
-    <main id="main" style="margin-top:-20px">
+    <main id="main" style="margin-top: -20px;">
       <div class="container-fluid">
         <div class="row">
           <div
@@ -111,10 +153,10 @@
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
-import autoComplete from "../../shared/addressAutoComplete";
-import carousel from "vue-owl-carousel";
-import searchResult from "../propertySearchResults";
+import { mapState, mapActions } from 'vuex'
+import autoComplete from '../../shared/addressAutoComplete'
+import carousel from 'vue-owl-carousel'
+import searchResult from '../propertySearchResults'
 export default {
   components: {
     carousel,
@@ -123,42 +165,42 @@ export default {
   },
   data() {
     return {
-      propertyUsageType: "Residential",
-      salesType: "Sale",
-      searchText: "",
+      propertyUsageType: 'Residential',
+      salesType: 'Sale',
+      searchText: '',
       clicked: false,
-    };
+    }
   },
   computed: {
-    ...mapState("propertySearch", ["propertySearch"]),
+    ...mapState('propertySearch', ['propertySearch']),
   },
   methods: {
-    ...mapActions("propertySearch", ["applyFilter"]),
+    ...mapActions('propertySearch', ['applyFilter']),
     SetSalesType(value) {
-      this.salesType = value;
+      this.salesType = value
     },
     SearchClick() {
-      this.propertySearch.propertyUsageType = this.propertyUsageType;
-      this.propertySearch.salesType = this.salesType;
+      this.propertySearch.propertyUsageType = this.propertyUsageType
+      this.propertySearch.salesType = this.salesType
 
       //this.clicked = true;
-      this.$router.push("/property/residential/searchResult");
+      this.$router.push('/property/residential/searchResult')
     },
     SelectedFilter(item) {
-      this.searchText = item;
+      this.searchText = item
     },
     UpdateAddress(place) {
-      this.propertySearch.province = place.province;
-      this.propertySearch.city = place.city;
-      this.propertySearch.suburb = place.suburb;
+      this.propertySearch.province = place.province
+      this.propertySearch.city = place.city
+      this.propertySearch.suburb = place.suburb
     },
   },
-  mounted() {    
-    this.propertySearch.city = "All";
-    this.propertySearch.suburb = "All";
-    this.propertySearch.province = "All";
-  }
-};
+  mounted() {
+    this.propertySearch.city = 'All'
+    this.propertySearch.suburb = 'All'
+    this.propertySearch.province = 'All'
+  },
+}
 </script>
 
 <style lang="scss" scoped>
@@ -215,4 +257,31 @@ export default {
 .searchComponent--clicked {
   opacity: 1;
 }
+.nav-tabs li a {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  background-color: white;
+  border-bottom-color: rgb(27, 117, 187);
+  border: 1px solid rgb(27, 117, 187);
+}
+
+.nav-tabs li :hover {
+  color: white;
+  background-color: rgb(27, 117, 187);
+}
+
+.nav-tabs li a.active {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  color: white;
+  background-color: rgb(80, 133, 240);
+  border-bottom-color: rgb(80, 133, 240);
+}
+
+.nav-tabs li a :hover {
+  background-color: transparent;
+  color: white;
+}
 </style>

src/components/shared/contactUsSection.vue

@@ -7,74 +7,89 @@
           <alert :text="errorMessage" :type="errorOccurred" />
         </div>
       </div>
-      <div class="form-row">
+      <div class="row">
         <div class="form-group col-md-6">
-          <input
+          <float-label label="Name" style="width: 100%;">
+            <input
               type="text"
               id="name"
-              class="form-control"
+              class="form-control uniInput my-2"
               v-model="name"
-              v-bind:class="{'is-valid': name,
-                'is-invalid': !requiredField(name) && nameLoad}"
+              v-bind:class="{
+                'is-valid': name,
+                'is-invalid': !requiredField(name) && nameLoad,
+              }"
               v-on:keyup="nameLoad = true"
               v-on:blur="nameLoad = true"
               placeholder="Name"
             />
             <div class="invalid-feedback">Name is required!</div>
+          </float-label>
         </div>
         <div class="form-group col-md-6">
-          <input
+          <float-label label="Email" style="width: 100%;">
+            <input
               type="email"
-              id="email"
-              v-model="email"
-              class="form-control"
-              v-bind:class="{'is-valid': email,
-                'is-invalid': !validEmail(email) && emailLoad}"
-              v-on:keyup="emailLoad = true"
-              v-on:blur="emailLoad = true"
+              id="contactemail"
+              v-model="contactemail"
+              class="form-control uniInput my-2"
+              v-bind:class="{
+                'is-valid': contactemail,
+                'is-invalid': !validEmail(contactemail) && contactemailLoad,
+              }"
+              v-on:keyup="contactemailLoad = true"
+              v-on:blur="contactemailLoad = true"
               placeholder="Email"
             />
             <div class="invalid-feedback">Valid email address is required!</div>
+          </float-label>
         </div>
         <div class="form-group col-md-6">
-          <input
-            type="text"
-            id="phone"
-            v-model="phone"
-            class="form-control"
-            v-bind:class="{'is-valid': phone}"
-            placeholder="Phone Number"
-          />
+          <float-label label="Phone Number" style="width: 100%;">
+            <input
+              type="text"
+              id="phone"
+              v-model="phone"
+              class="form-control uniInput my-2"
+              v-bind:class="{ 'is-valid': phone }"
+              placeholder="Phone Number"
+            />
+          </float-label>
         </div>
         <div class="form-group col-md-6">
-          <input
-            type="text"
-            id="property"
-            v-model="property"
-            class="form-control"
-            v-bind:class="{'is-valid': property}"
-            placeholder="Property"
-          />
+          <float-label label="Property" style="width: 100%;">
+            <input
+              type="text"
+              id="property"
+              v-model="property"
+              class="form-control uniInput my-2"
+              v-bind:class="{ 'is-valid': property }"
+              placeholder="Property"
+            />
+          </float-label>
         </div>
       </div>
       <div class="form-group">
-
-        <textarea
-          type="text"
-          id="message"
-          rows="5"
-          class="form-control"
-          v-model="message"
-          v-bind:class="{'is-valid': message,
-            'is-invalid': !requiredField(message) && messageLoad}"
-          v-on:keyup="messageLoad = true"
-          v-on:blur="messageLoad = true"
-          placeholder="Message"
-        ></textarea>
-        <div class="invalid-feedback">Message is required!</div>
+        <float-label label="Message" style="width: 100%;">
+          <textarea
+            type="text"
+            id="message"
+            rows="5"
+            class="form-control uniInput my-2"
+            v-model="message"
+            v-bind:class="{
+              'is-valid': message,
+              'is-invalid': !requiredField(message) && messageLoad,
+            }"
+            v-on:keyup="messageLoad = true"
+            v-on:blur="messageLoad = true"
+            placeholder="Message"
+          ></textarea>
+          <div class="invalid-feedback">Message is required!</div>
+        </float-label>
       </div>
       <div class="text-center">
-        <button class="btn-solid-blue" @click="sendMail()">SEND</button>
+        <button class="btn-white-border" @click="sendMail()">Send</button>
       </div>
       <div v-if="boolSent">
         <alert :text="alertMsg" :type="'SUCCESS'" />
@@ -85,108 +100,113 @@
 
 <script>
 /* eslint-disable */
-import axios from "axios";
-import alert from "../shared/alert";
+import axios from 'axios'
+import alert from '../shared/alert'
 
 export default {
   components: {
-    alert
+    alert,
   },
   data() {
     return {
-      alertMsg: "Sent! You can expect a reply soon!",
+      alertMsg: 'Sent! You can expect a reply soon!',
       name: '',
-      email: '',
+      contactemail: '',
       phone: '',
       property: '',
       message: '',
       boolSent: false,
-      errorOccurred: "",
-      errorMessage: "",
+      errorOccurred: '',
+      errorMessage: '',
       boolValidationError: false,
       nameLoad: false,
-      emailLoad: false,
-      messageLoad: false
-    };
+      contactemailLoad: false,
+      messageLoad: false,
+    }
   },
   mounted() {
-    this.boolSent = false;
+    this.boolSent = false
+    console.log('Email')
+    console.log(this.contactemail)
   },
   methods: {
     async sendMail() {
       if (this.validatePage()) {
         var mailObj = {
           name: this.name,
-          email: this.email,
+          email: this.contactemail,
           phone: this.phone,
           property: this.property,
-          message: this.message
-        };
-
-      await axios
-        .post("/api/mail/0", mailObj)
-        .then((response) => {
-          //console.log('Response');
-          //console.log(response);
-            this.boolSent = true;
-        })
-        .catch((err) => {
-              this.boolValidationError = true;
-              this.errorOccurred = "ERROR";
-              this.errorMessage = "Server Error: CONNECTION_REFUSED";
-              if (err) {
-                //console.log('Error');
-                //console.log(err.response.status);
-                if (err.response.status) {
-                  this.boolSent = true;
-                  this.boolValidationError = false;
-                } else {
-                  this.boolSent = false;
-                }
+          message: this.message,
+        }
+        await axios
+          .post('/api/mail/0', mailObj)
+          .then((response) => {
+            //console.log('Response');
+            //console.log(response);
+            this.boolSent = true
+          })
+          .catch((err) => {
+            this.boolValidationError = true
+            this.errorOccurred = 'ERROR'
+            this.errorMessage = 'Server Error: CONNECTION_REFUSED'
+            if (err) {
+              //console.log('Error');
+              //console.log(err.response.status);
+              if (err.response.status) {
+                this.boolSent = true
+                this.boolValidationError = false
               } else {
-                console.log('no err')
-                boolSent = false;
+                this.boolSent = false
               }
-        })
+            } else {
+              console.log('no err')
+              boolSent = false
+            }
+          })
+        this.name = ''
+        this.contactemail = ''
+        this.phone = ''
+        this.property = ''
+        this.message = ''
+        this.nameLoad = false
+        this.contactemailLoad = false
+        this.messageLoad = false
       }
     },
     countDownChanged(dismissCountDown) {
-      this.dismissCountDown = dismissCountDown;
+      this.dismissCountDown = dismissCountDown
     },
-    validatePage : function(){
+    validatePage: function () {
       //console.log('validatePage')
-      if (this.name && this.email){
-        this.errorOccurred = '';
-        this.errorMessage = '';
-        this.boolValidationError = false;
-        return true;
+      if (this.name && this.contactemail) {
+        this.errorOccurred = ''
+        this.errorMessage = ''
+        this.boolValidationError = false
+        return true
       } else {
-        this.boolValidationError = true;
-        this.nameLoad = true;
-        this.emailLoad = true;
-        this.messageLoad = true;
-        this.errorOccurred = "ERROR";
-        this.errorMessage = "Please check form and correct all input fields!";
-        return false;
+        this.boolValidationError = true
+        this.nameLoad = true
+        this.contactemailLoad = true
+        this.messageLoad = true
+        this.errorOccurred = 'ERROR'
+        this.errorMessage = 'Please check form and correct all input fields!'
+        return false
       }
     },
-    requiredField : function(tfield) {
-      if(tfield){
-        return true;
+    requiredField: function (tfield) {
+      if (tfield) {
+        return true
       } else {
-        return false;
+        return false
       }
     },
-    validEmail : function(temail) {
-        var re = /(.+)@(.+){2,}\.(.+){2,}/;
-        return re.test(temail.toLowerCase());
-    }
-  }
-};
+    validEmail: function (temail) {
+      var re = /(.+)@(.+){2,}\.(.+){2,}/
+      return re.test(temail.toLowerCase())
+    },
+  },
+}
 </script>
 
-<style lang="scss" scoped>
-.form input{
-  text-transform: none;
-}
-</style>
+<style lang="scss" scoped></style>

src/components/timeshare/buy/carouselSection.vue

@@ -1,79 +1,89 @@
 <template>
   <section id="intro">
     <div class="container">
-      <div class="row">
-        <div align="left" class="col-sm-12 col-md-8">
-          <div class="intro-content box" style="margin-top:-5px">
-            <h2>Find your Timeshare</h2>
-            <p>
-              Please specify one or more details to view the available weeks and then select the
-              weeks that interest you on the resort page.
-            </p>
-            <div class="row">
-              <div class="form-group col-md-6">
-                <div class="input-group">
-                  <label v-if="!searchParams.region" class="uniSelectLabel" for="region"
-                    >REGION</label
-                  >
-                  <select
-                    class="form-control uniSelect"
-                    name="region"
-                    id="region"
-                    v-model="searchParams.region"
-                    @change="regionChange"
-                  >
-                    <option v-for="(region, r) in regions" :key="r">{{ region.regionName }}</option>
-                  </select>
+      <div class="form">
+        <div class="row">
+          <div align="left" class="col-sm-12 col-md-8">
+            <div class="intro-content box" style="margin-top: -5px;">
+              <h2>Find your Timeshare</h2>
+              <p>
+                Please specify one or more details to view the available weeks
+                and then select the weeks that interest you on the resort page.
+              </p>
+              <div class="row">
+                <div class="form-group col-md-6">
+                  <div class="input-group">
+                    <label
+                      v-if="!searchParams.region"
+                      class="uniSelectLabel"
+                      for="region"
+                    >
+                      Region
+                    </label>
+                    <select
+                      class="form-control uniSelect"
+                      name="region"
+                      id="region"
+                      v-model="searchParams.region"
+                      @change="regionChange"
+                    >
+                      <option v-for="(region, r) in regions" :key="r">
+                        {{ region.regionName }}
+                      </option>
+                    </select>
+                  </div>
+                  <br />
+                  <label>Date From</label>
+                  <input
+                    type="date"
+                    name="arrival-to"
+                    class="form-control my-1 uniSelect"
+                    id="arrival-to"
+                    placeholder="Date From"
+                    v-model="filter.date"
+                  />
                 </div>
-                <br />
-                <label>DATE FROM</label>
-                <input
-                  type="date"
-                  name="arrival-to"
-                  class="form-control my-1 uniSelect"
-                  id="arrival-to"
-                  placeholder="Date From"
-                  v-model="filter.date"
-                />
-              </div>
-              <div class="form-group col-md-6">
-                <div class="input-group">
-                  <label
-                    v-if="!searchParams.resort"
-                    class="uniSelectLabel"
-                    for="weekInfoResortSelect"
-                    >RESORT</label
-                  >
-                  <select
-                    id="weekInfoResortSelect"
-                    class="form-control uniSelect"
-                    v-model="searchParams.resort"
-                  >
-                    <option
-                      v-for="(resort, r) in filteredResort"
-                      :key="r"
-                      :value="resort"
-                      @change="resortChange"
+                <div class="form-group col-md-6">
+                  <div class="input-group">
+                    <label
+                      v-if="!searchParams.resort"
+                      class="uniSelectLabel"
+                      for="weekInfoResortSelect"
                     >
-                      {{ resort.resortName }}
-                    </option>
-                  </select>
+                      Resort
+                    </label>
+                    <select
+                      id="weekInfoResortSelect"
+                      class="form-control uniSelect"
+                      v-model="searchParams.resort"
+                    >
+                      <option
+                        v-for="(resort, r) in filteredResort"
+                        :key="r"
+                        :value="resort"
+                        @change="resortChange"
+                      >
+                        {{ resort.resortName }}
+                      </option>
+                    </select>
+                  </div>
+                  <br />
+                  <label>Date To</label>
+                  <input
+                    type="date"
+                    name="arrival-to"
+                    class="form-control my-1 uniSelect"
+                    id="arrival-to"
+                    placeholder="Date To"
+                    v-model="filter.ddate"
+                  />
                 </div>
-                <br />
-                <label>DATE TO</label>
-                <input
-                  type="date"
-                  name="arrival-to"
-                  class="form-control my-1 uniSelect"
-                  id="arrival-to"
-                  placeholder="Date To"
-                  v-model="filter.ddate"
-                />
               </div>
+              <button class="btn-white-border" @click="Search()">
+                <i class="fa fa-search"></i>
+                Search
+              </button>
             </div>
-            <button class="btn-solid-blue" @click="Search()">
-              <i class="fa fa-search"></i> SEARCH
-            </button>
           </div>
         </div>
       </div>
@@ -86,15 +96,48 @@
       :autoplay="true"
       :loop="true"
       id="intro-carousel"
-      style="margin-top:-50px"
-      :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
+      style="margin-top: -50px;"
+      :responsive="{
+        0: { items: 1, nav: false },
+        600: { items: 1, nav: false },
+      }"
     >
-      <img class="item" src="/img/intro-carousel/timeshare-1.jpg" style="object-fit: cover" alt />
-      <img class="item" src="/img/intro-carousel/timeshare-2.jpg" style="object-fit: cover" alt />
-      <img class="item" src="/img/intro-carousel/timeshare-3.jpg" style="object-fit: cover" alt />
-      <img class="item" src="/img/intro-carousel/timeshare-4.jpg" style="object-fit: cover" alt />
-      <img class="item" src="/img/intro-carousel/timeshare-5.jpg" style="object-fit: cover" alt />
-      <img class="item" src="/img/intro-carousel/timeshare-6.jpg" style="object-fit: cover" alt />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-1.jpg"
+        style="object-fit: cover;"
+        alt
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-2.jpg"
+        style="object-fit: cover;"
+        alt
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-3.jpg"
+        style="object-fit: cover;"
+        alt
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-4.jpg"
+        style="object-fit: cover;"
+        alt
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-5.jpg"
+        style="object-fit: cover;"
+        alt
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-6.jpg"
+        style="object-fit: cover;"
+        alt
+      />
     </carousel>
 
     <div id="intro-carousel" class="owl-carousel"></div>
@@ -104,77 +147,77 @@
 <script>
 /* eslint-disable */
 
-import carousel from "vue-owl-carousel";
-import { mapState, mapActions, mapGetters } from "vuex";
+import carousel from 'vue-owl-carousel'
+import { mapState, mapActions, mapGetters } from 'vuex'
 export default {
   components: {
-    carousel
+    carousel,
   },
   data() {
     return {
       regionObj: {},
       resortObj: {},
-      region: "",
-      resort: "",
+      region: '',
+      resort: '',
       priceMin: undefined,
-      priceMax: undefined
-    };
+      priceMax: undefined,
+    }
   },
   methods: {
-    ...mapActions("timeshare", ["initTimeshare", "onResortChange", "saveWeek"]),
-    ...mapActions("resort", ["getResortWithListings"]),
+    ...mapActions('timeshare', ['initTimeshare', 'onResortChange', 'saveWeek']),
+    ...mapActions('resort', ['getResortWithListings']),
     regionChange(item) {
-      let reg = this.regions.find(r => r.regionName === item.target.value);
-      this.regionObj = reg;
+      let reg = this.regions.find((r) => r.regionName === item.target.value)
+      this.regionObj = reg
     },
     resortChange(item) {
-      let res = this.resorts.find(r => r.resortName === item.target.value);
-      this.resortObj = res;
+      let res = this.resorts.find((r) => r.resortName === item.target.value)
+      this.resortObj = res
     },
     Search() {
       if (this.searchParams.price) {
-        this.filter.minPrice = this.searchParams.price;
+        this.filter.minPrice = this.searchParams.price
       }
       if (this.searchParams.week) {
-        this.filter.keyword = this.week;
+        this.filter.keyword = this.week
       }
 
       if (!this.searchParams.resort) {
-        this.searchParams.regionObj = this.regionObj;
-        this.$router.push("/timeshareToByResults");
+        this.searchParams.regionObj = this.regionObj
+        this.$router.push('/timeshareToByResults')
       } else {
-        this.$router.push(`/resort/${this.searchParams.resort.resortId}`);
+        this.$router.push(`/resort/${this.searchParams.resort.resortId}`)
       }
-    }
+    },
   },
   computed: {
-    ...mapState("timeshare", ["resorts", "regions", "detailedRegion"]),
-    ...mapState("weekList", ["searchParams", "filter"]),
-    ...mapState("resort", ["resortsWithListings"]),
+    ...mapState('timeshare', ['resorts', 'regions', 'detailedRegion']),
+    ...mapState('weekList', ['searchParams', 'filter']),
+    ...mapState('resort', ['resortsWithListings']),
     filteredResort() {
-      let list = [];
-      var itemList = [];
-      if (this.searchParams.region && this.searchParams.region !== "") {
-        this.resortsWithListings.forEach(resortListing => {
+      let list = []
+      var itemList = []
+      if (this.searchParams.region && this.searchParams.region !== '') {
+        this.resortsWithListings.forEach((resortListing) => {
           if (
             resortListing.resortRegion[0].code.toUpperCase() ===
             this.regionObj.regionCode.toUpperCase()
           ) {
-            itemList.push(resortListing);
+            itemList.push(resortListing)
           }
-        });
+        })
         if (itemList.length > 0) {
-          list = itemList;
+          list = itemList
         } else {
           list[0] = {
-            resortName: " - No Listings - "
-          };
+            resortName: ' - No Listings - ',
+          }
         }
       } else {
-        list = this.resortsWithListings;
+        list = this.resortsWithListings
       }
-      return _.sortBy(list, x => x.resortName);
-    }
+      return _.sortBy(list, (x) => x.resortName)
+    },
     // filteredResort() {
     //   let list = [];
     //   if (this.searchParams.region && this.searchParams.region !== "") {
@@ -191,16 +234,16 @@ export default {
     // }
   },
   created() {
-    this.initTimeshare(this.weekId);
-    this.getResortWithListings();
+    this.initTimeshare(this.weekId)
+    this.getResortWithListings()
   },
   mounted() {
-    this.searchParams.region = null;
-    this.searchParams.resort = null;
-    this.filter.date = null;
-    this.filter.ddate = null;
-  }
-};
+    this.searchParams.region = null
+    this.searchParams.resort = null
+    this.filter.date = null
+    this.filter.ddate = null
+  },
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/timeshare/searchTimeshare.vue

@@ -5,11 +5,13 @@
     <div class="input-group mt-2">
       <label v-if="!filter.season" class="uniSelectLabel" for="season">Season</label>
       <select class="form-control" name="season" id="season" v-model="filter.season">
-        <option v-for="season in seasons" :key="season.id" :value="season">{{ season.name }}</option>
+        <option v-for="season in seasons" :key="season.id"
+         :value="season">{{ season.name }}</option>
       </select>
     </div>
     <div class="input-group mt-2">
-      <label v-if="!filter.bedrooms" class="uniSelectLabel" for="weekInfoRegionSelect">Bedrooms</label>
+      <label v-if="!filter.bedrooms" class="uniSelectLabel"
+       for="weekInfoRegionSelect">Bedrooms</label>
       <select class="form-control" name="bedrooms" v-model="filter.bedrooms">
         <option v-for="(item, i) in resortBedrooms" :key="i">{{ item }}</option>
       </select>
@@ -108,13 +110,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.uniSelectLabel {
-  position: absolute;
-  z-index: 2;
-  margin-left: 15px;
-  margin-top: 7px;
-  font-family: "muli";
-  font-size: 15px;
-  color: rgb(118, 118, 118);
-}
+
 </style>

src/components/timeshare/sell/carouselSection.vue

@@ -6,10 +6,24 @@
           <div class="intro-content box">
             <h2>Sell your Timeshare</h2>
             <p>
-              A listing fee of R{{ getListingFee.amount }} including VAT is payable to list your
-              timeshare week/module on the Uni-Vate website.
+              A listing fee of R{{ getListingFee.amount }} including VAT is
+              payable to list your timeshare week/module on the Uni-Vate
+              website.
             </p>
-            <div></div>
+
+            <div v-if="!userLoggedIn">
+              <p>
+                You must be registered as a user in order to load your weeks for
+                sale. Please login and or register to complete.
+              </p>
+
+              <router-link class="btn-white-border" to="/user/register">
+                Register
+              </router-link>
+              <router-link class="btn-white-border" to="/user/login">
+                Login
+              </router-link>
+            </div>
           </div>
         </div>
       </div>
@@ -22,8 +36,11 @@
       :autoplay="true"
       :loop="true"
       id="intro-carousel"
-      style="margin-top:-50px"
-      :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
+      style="margin-top: -50px;"
+      :responsive="{
+        0: { items: 1, nav: false },
+        600: { items: 1, nav: false },
+      }"
     >
       <img class="item" src="/img/intro-carousel/timeshare-1.jpg" alt="" />
       <img class="item" src="/img/intro-carousel/timeshare-2.jpg" alt="" />
@@ -40,16 +57,31 @@
 <script>
 /* eslint-disable */
 
-import carousel from "vue-owl-carousel";
-import { mapGetters } from "vuex";
+import carousel from 'vue-owl-carousel'
+import { mapState, mapActions, mapGetters } from 'vuex'
+import Log from '../../../assets/Log'
+
 export default {
   components: {
-    carousel
+    carousel,
+  },
+  data() {
+    return {
+      userLoggedIn: Log.isLoggedIn(),
+    }
   },
   computed: {
-    ...mapGetters("fees", ["getListingFee"])
-  }
-};
+    ...mapGetters('fees', ['getListingFee']),
+    ...mapState('authentication', ['isLoggedIn']),
+    ...mapGetters({
+      user: 'authentication/getUser',
+      person: 'authentication/getPerson',
+    }),
+    isLoggedIn() {
+      return this.user && this.person
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/user/forgotPassword.vue

@@ -1,6 +1,6 @@
 <template>
-  <main id="main" style="padding-top:10px; padding-bottom:50px">
-    <div class="container">
+  <main id="main" style="padding-top: 10px; padding-bottom: 50px;">
+    <div class="form">
       <div class="row">
         <div class="col">
           <div class="section-header">
@@ -15,20 +15,22 @@
       </div>
       <div class="row">
         <div class="col-md-6">
-          <float-label>
+          <float-label label="Email" style="width: 100%;">
             <input
-            type="email"
-            id="email"
-            name="email"
-            placeholder="EMAIL"
-            class="form-control uniInput"
-            v-model="email"
-            v-bind:class="{'is-valid': email,
-             'is-invalid': !validEmail(email) && emailLoad}"
-            v-on:keyup="emailLoad = true"
-            v-on:blur="emailLoad = true"
-            required
-            icon
+              type="email"
+              id="email"
+              name="email"
+              placeholder="Email"
+              class="form-control uniInput"
+              v-model="email"
+              v-bind:class="{
+                'is-valid': email,
+                'is-invalid': !validEmail(email) && emailLoad,
+              }"
+              v-on:keyup="emailLoad = true"
+              v-on:blur="emailLoad = true"
+              required
+              icon
             />
             <div class="invalid-feedback">Valid Email is required!</div>
           </float-label>
@@ -44,57 +46,60 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex';
 /* eslint-disable */
-
-import alert from "../shared/alert";
+import { mapActions } from 'vuex'
+import alert from '../shared/alert'
 
 export default {
   components: {
-    alert
+    alert,
   },
   data() {
     return {
-      email: "",
+      email: '',
       emailLoad: false,
-      errorOccurred: "",
-      errorMessage: ""
-    };
+      errorOccurred: '',
+      errorMessage: '',
+    }
   },
   methods: {
-    ...mapActions("register", ["forgotPasswordCheck"]),
+    ...mapActions('register', ['forgotPasswordCheck']),
     checkMail() {
-      if (this.email){
-        console.log(this.email);
+      if (this.email) {
+        console.log(this.email)
         this.forgotPasswordCheck(this.email)
-        .then(() => {
-          this.errorMessage = "An email has been sent with instructions to reset your password.";
-          this.errorOccurred = "SUCCESS";
-        })
-        .catch(err => {
-          //console.log(err);
-          this.errorOccurred = "ERROR";
-          this.errorMessage = "Server Error: CONNECTION_REFUSED";
-          if (err.status) {
-            if (err.data.message) {
-              this.errorMessage = err.data.message;
-            } else {
-              this.errorMessage = "Email address not found!"
+          .then(() => {
+            this.errorMessage =
+              'An email has been sent with instructions to reset your password.'
+            this.errorOccurred = 'SUCCESS'
+          })
+          .catch((err) => {
+            //console.log(err);
+            this.errorOccurred = 'ERROR'
+            this.errorMessage = 'Server Error: CONNECTION_REFUSED'
+            if (err.status) {
+              if (err.data.message) {
+                this.errorMessage = err.data.message
+              } else {
+                this.errorMessage = 'Email address not found!'
+              }
             }
-          }
-        });
+          })
       } else {
-          this.errorMessage = "A valid email is required.";
-          this.errorOccurred = "ERROR";
+        this.errorMessage = 'A valid email is required.'
+        this.errorOccurred = 'ERROR'
       }
     },
-    validEmail : function(email) {
-        var re = /(.+)@(.+){2,}\.(.+){2,}/;
-        return re.test(email.toLowerCase());
-    }
-  }
-};
+    validEmail: function (email) {
+      var re = /(.+)@(.+){2,}\.(.+){2,}/
+      if (email) {
+        return re.test(email.toLowerCase())
+      } else {
+        return re.test(email)
+      }
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped></style>
-

src/components/user/loginPage.vue

@@ -1,7 +1,7 @@
 <template>
   <main id="main">
     <section id="intro">
-      <div class="container">
+      <div class="form">
         <div class="row justify-content-center">
           <div class="col-md-8">
             <div class="intro-content">
@@ -16,6 +16,7 @@
                       <alert :text="page.text" :type="'INFO'" />
                     </div>
                       <div class="form-label-group">
+                        <float-label label="Username" style="width: 100%">
                         <input
                         type="text"
                         id="inputUsername"
@@ -32,9 +33,11 @@
                         autofocus
                         />
                       <div class="invalid-feedback">Name is required!</div>
+                      </float-label>
                       </div>
 
                     <div class="form-label-group">
+                      <float-label label="Password" style="width: 100%">
                       <input
                         type="password"
                         id="inputPassword"
@@ -51,6 +54,7 @@
                         icon
                       />
                       <div class="invalid-feedback">Password is required!</div>
+                      </float-label>
                     </div>
 
                     <div class="custom-control custom-checkbox mb-3">
@@ -145,11 +149,11 @@ export default {
       } else this.troubleToggle = true;
     },
     Login() {
-      console.log(this.username + " " + this.password);
+      //console.log(this.username + " " + this.password);
       if (this.validate()){
       this.login({ username: this.username, password: this.password })
         .then(() => {
-          console.log(Log.getUser());
+          //console.log(Log.getUser());
           if (!this.page) {
             if (!Log.getUser().loginPasswordChange) {
               this.$router.push("/");

src/components/user/registerAgencySection.vue

@@ -1,6 +1,6 @@
 <template>
-  <main id="main" style="padding-top:10px; padding-bottom:50px">
-    <div class="container">
+  <main id="main" style="padding-top: 10px; padding-bottom: 50px;">
+    <div class="form">
       <div v-if="boolMessage" class="row">
         <div class="col">
           <alert :text="'Register Success!'" :type="'SUCCESS'" />
@@ -15,127 +15,177 @@
       <div class="row my-3">
         <div class="col-sm-12 col-md-6">
           <div class="form-group">
-            <input
-              type="text"
-              id="inputAgencyName"
-              v-model="registerAgency.name"
-              class="form-control uniInput"
-              v-bind:class="{'is-valid': registerAgency.name,
-                'is-invalid': !requiredField(registerAgency.name) && agencyNameLoad}"
-              v-on:keyup="agencyNameLoad = true"
-              v-on:blur="agencyNameLoad = true"
-              placeholder="Agency Name"
-            />
-            <div class="invalid-feedback">Agency Name is required!</div>
+            <float-label label="Agency Name" style="width: 100%;">
+              <input
+                type="text"
+                id="inputAgencyName"
+                v-model="registerAgency.name"
+                class="form-control uniInput"
+                v-bind:class="{
+                  'is-valid': registerAgency.name,
+                  'is-invalid':
+                    !requiredField(registerAgency.name) && agencyNameLoad,
+                }"
+                v-on:keyup="agencyNameLoad = true"
+                v-on:blur="agencyNameLoad = true"
+                placeholder="Agency Name"
+              />
+              <div class="invalid-feedback">Agency Name is required!</div>
+            </float-label>
           </div>
         </div>
         <div class="col-sm-12 col-md-6">
           <div class="form-group">
-            <input
-              type="text"
-              id="inputAgencyNumber"
-              v-model="registerAgency.eaabeffcNumber"
-              class="form-control uniInput"
-              v-bind:class="{'is-valid': registerAgency.eaabeffcNumber,
-                'is-invalid': !requiredField(registerAgency.eaabeffcNumber) && agencyNumberLoad}"
-              v-on:keyup="agencyNumberLoad = true"
-              v-on:blur="agencyNumberLoad = true"
-              placeholder="EAAB FFC Number"
-            />
-            <div class="invalid-feedback">Agency Number is required!</div>
+            <float-label label="EAAB FFC Number" style="width: 100%;">
+              <input
+                type="text"
+                id="inputAgencyNumber"
+                v-model="registerAgency.eaabeffcNumber"
+                class="form-control uniInput"
+                v-bind:class="{
+                  'is-valid': registerAgency.eaabeffcNumber,
+                  'is-invalid':
+                    !requiredField(registerAgency.eaabeffcNumber) &&
+                    agencyNumberLoad,
+                }"
+                v-on:keyup="agencyNumberLoad = true"
+                v-on:blur="agencyNumberLoad = true"
+                placeholder="EAAB FFC Number"
+              />
+              <div class="invalid-feedback">Agency Number is required!</div>
+            </float-label>
           </div>
         </div>
       </div>
       <div class="row my-3">
-       <div class="col-sm-12">
-         <div class="form-group">
-          <input
-            type="text"
-            id="inputAgencyCompanyRegistration"
-            v-model="registerAgency.companyRegNumber"
-            class="form-control uniInput"
-            v-bind:class="{'is-valid': registerAgency.companyRegNumber,
-             'is-invalid': !requiredField(registerAgency.companyRegNumber) && companyRegNumberLoad}"
-            v-on:keyup="companyRegNumberLoad = true"
-            v-on:blur="companyRegNumberLoad = true"
-            placeholder="Company Registration Number"
-          />
-         <div class="invalid-feedback">Company Registration Number is required!</div>
+        <div class="col-sm-12">
+          <div class="form-group">
+            <float-label
+              label="Company Registration Number"
+              style="width: 100%;"
+            >
+              <input
+                type="text"
+                id="inputAgencyCompanyRegistration"
+                v-model="registerAgency.companyRegNumber"
+                class="form-control uniInput"
+                v-bind:class="{
+                  'is-valid': registerAgency.companyRegNumber,
+                  'is-invalid':
+                    !requiredField(registerAgency.companyRegNumber) &&
+                    companyRegNumberLoad,
+                }"
+                v-on:keyup="companyRegNumberLoad = true"
+                v-on:blur="companyRegNumberLoad = true"
+                placeholder="Company Registration Number"
+              />
+              <div class="invalid-feedback">
+                Company Registration Number is required!
+              </div>
+            </float-label>
+          </div>
         </div>
-       </div>
       </div>
       <h3 class="card-title text-center">Agency Administrator</h3>
       <hr />
       <div class="row my-3">
         <div class="col-sm-12 col-md-6">
           <div class="form-group">
-            <input
-              type="text"
-              id="inputAgencyAdmin"
-              v-model="registerAgency.user.name"
-              class="form-control uniInput my-3"
-              v-bind:class="{'is-valid': registerAgency.user.name,
-                'is-invalid': !requiredField(registerAgency.user.name) && agencyAdminNameLoad}"
-              v-on:keyup="agencyAdminNameLoad = true"
-              v-on:blur="agencyAdminNameLoad = true"
-              placeholder="Name"
-            />
-            <div class="invalid-feedback">Administrator Name is required!</div>
+            <float-label label="Name" style="width: 100%;">
+              <input
+                type="text"
+                id="inputAgencyAdmin"
+                v-model="registerAgency.user.name"
+                class="form-control uniInput my-3"
+                v-bind:class="{
+                  'is-valid': registerAgency.user.name,
+                  'is-invalid':
+                    !requiredField(registerAgency.user.name) &&
+                    agencyAdminNameLoad,
+                }"
+                v-on:keyup="agencyAdminNameLoad = true"
+                v-on:blur="agencyAdminNameLoad = true"
+                placeholder="Name"
+              />
+              <div class="invalid-feedback">
+                Administrator Name is required!
+              </div>
+            </float-label>
           </div>
           <div class="form-group">
-            <input
-              type="text"
-              id="inputAgencySurname"
-              v-model="registerAgency.user.surname"
-              class="form-control uniInput my-3"
-              v-bind:class="{'is-valid': registerAgency.user.surname,
-                'is-invalid': !requiredField(registerAgency.user.surname) && agencySurnameLoad}"
-              v-on:keyup="agencySurnameLoad = true"
-              v-on:blur="agencySurnameLoad = true"
-              placeholder="Surname"
-            />
-            <div class="invalid-feedback">Administrator Surname is required!</div>
+            <float-label label="Surname" style="width: 100%;">
+              <input
+                type="text"
+                id="inputAgencySurname"
+                v-model="registerAgency.user.surname"
+                class="form-control uniInput my-3"
+                v-bind:class="{
+                  'is-valid': registerAgency.user.surname,
+                  'is-invalid':
+                    !requiredField(registerAgency.user.surname) &&
+                    agencySurnameLoad,
+                }"
+                v-on:keyup="agencySurnameLoad = true"
+                v-on:blur="agencySurnameLoad = true"
+                placeholder="Surname"
+              />
+              <div class="invalid-feedback">
+                Administrator Surname is required!
+              </div>
+            </float-label>
           </div>
           <div class="form-group">
-            <input
-              type="email"
-              id="inputAgencyEmail"
-              v-model="registerAgency.user.email"
-              v-bind:class="{'is-valid': registerAgency.user.email,
-                'is-invalid': !validEmail(registerAgency.user.email) && agencyEmailLoad}"
-              v-on:keyup="agencyEmailLoad = true"
-              v-on:blur="agencyEmailLoad = true"
-              class="form-control uniInput my-3"
-              placeholder="Email"
-            />
-            <div class="invalid-feedback">Valid email is required!</div>
+            <float-label label="Email" style="width: 100%;">
+              <input
+                type="email"
+                id="inputAgencyEmail"
+                v-model="registerAgency.user.email"
+                v-bind:class="{
+                  'is-valid': registerAgency.user.email,
+                  'is-invalid':
+                    !validEmail(registerAgency.user.email) && agencyEmailLoad,
+                }"
+                v-on:keyup="agencyEmailLoad = true"
+                v-on:blur="agencyEmailLoad = true"
+                class="form-control uniInput my-3"
+                placeholder="Email"
+              />
+              <div class="invalid-feedback">Valid email is required!</div>
+            </float-label>
           </div>
         </div>
         <div class="col-sm-12 col-md-6">
           <div class="form-group">
-            <input
-              type="text"
-              id="inputAgencyCellphone"
-              v-model="registerAgency.user.cellNumber"
-              class="form-control uniInput my-3"
-              v-bind:class="{'is-valid': registerAgency.user.cellNumber,
-                'is-invalid': !requiredField(registerAgency.user.cellNumber)
-                 && agencyCellNumberLoad}"
-              v-on:keyup="agencyCellNumberLoad = true"
-              v-on:blur="agencyCellNumberLoad = true"
-              placeholder="Cellphone Number"
-            />
-            <div class="invalid-feedback">Cell number is required!</div>
+            <float-label label="Cellphone Number" style="width: 100%;">
+              <input
+                type="text"
+                id="inputAgencyCellphone"
+                v-model="registerAgency.user.cellNumber"
+                class="form-control uniInput my-3"
+                v-bind:class="{
+                  'is-valid': registerAgency.user.cellNumber,
+                  'is-invalid':
+                    !requiredField(registerAgency.user.cellNumber) &&
+                    agencyCellNumberLoad,
+                }"
+                v-on:keyup="agencyCellNumberLoad = true"
+                v-on:blur="agencyCellNumberLoad = true"
+                placeholder="Cellphone Number"
+              />
+              <div class="invalid-feedback">Cell number is required!</div>
+            </float-label>
           </div>
           <div class="form-group">
-            <input
-              type="text"
-              id="inputAgencyLandLine"
-              v-model="registerAgency.user.telephone"
-              class="form-control uniInput"
-              v-bind:class="{'is-valid': registerAgency.user.telephone}"
-              placeholder="Landline Number"
-            />
+            <float-label label="Landline Number" style="width: 100%;">
+              <input
+                type="text"
+                id="inputAgencyLandLine"
+                v-model="registerAgency.user.telephone"
+                class="form-control uniInput"
+                v-bind:class="{ 'is-valid': registerAgency.user.telephone }"
+                placeholder="Landline Number"
+              />
+            </float-label>
           </div>
         </div>
       </div>
@@ -143,60 +193,82 @@
       <div class="row my-3">
         <div class="col-sm-12">
           <div class="form-group">
-            <input
-              type="text"
-              id="inputAgencyUsername"
-              v-model="registerAgency.user.username"
-              class="form-control uniInput"
-              v-bind:class="{'is-valid': registerAgency.user.username,
-                'is-invalid': !requiredField(registerAgency.user.username) && agencyusernameLoad}"
-              v-on:keyup="agencyusernameLoad = true"
-              v-on:blur="agencyusernameLoad = true"
-              placeholder="Username"
-            />
-            <div class="invalid-feedback">Username is required!</div>
+            <float-label label="Username" style="width: 100%;">
+              <input
+                type="text"
+                id="inputAgencyUsername"
+                v-model="registerAgency.user.username"
+                class="form-control uniInput"
+                v-bind:class="{
+                  'is-valid': registerAgency.user.username,
+                  'is-invalid':
+                    !requiredField(registerAgency.user.username) &&
+                    agencyusernameLoad,
+                }"
+                v-on:keyup="agencyusernameLoad = true"
+                v-on:blur="agencyusernameLoad = true"
+                placeholder="Username"
+              />
+              <div class="invalid-feedback">Username is required!</div>
+            </float-label>
           </div>
         </div>
       </div>
       <div class="row my-3">
         <div class="col-sm-12 col-md-6">
           <div class="form-group">
-            <input
-              type="password"
-              placeholder="Password"
-              v-model="registerAgency.user.password"
-              id="inputAgencyPassword uniInput"
-              class="form-control uniInput"
-              v-bind:class="{'is-valid': registerAgency.user.password,
-                'is-invalid': !requiredField(registerAgency.user.password) && agencypasswordLoad}"
-              v-on:keyup="agencypasswordLoad = true"
-              v-on:blur="agencypasswordLoad = true"
-            />
-            <div class="invalid-feedback">Password is required!</div>
+            <float-label label="Password" style="width: 100%;">
+              <input
+                type="password"
+                placeholder="Password"
+                v-model="registerAgency.user.password"
+                id="inputAgencyPassword uniInput"
+                class="form-control uniInput"
+                v-bind:class="{
+                  'is-valid': registerAgency.user.password,
+                  'is-invalid':
+                    !requiredField(registerAgency.user.password) &&
+                    agencypasswordLoad,
+                }"
+                v-on:keyup="agencypasswordLoad = true"
+                v-on:blur="agencypasswordLoad = true"
+              />
+              <div class="invalid-feedback">Password is required!</div>
+            </float-label>
           </div>
         </div>
         <div class="col">
           <div class="form-group">
-            <input
-              type="password"
-              placeholder="Confirm Password"
-              v-model="registerAgency.user.confirm"
-              id="inputAgencyPasswordConfirm"
-              class="form-control uniInput"
-              v-bind:class="{'is-valid': registerAgency.user.confirm,
-                'is-invalid': !validConfirm(registerAgency.user.confirm) && agencyconfirmLoad}"
-              v-on:keyup="agencyconfirmLoad = true"
-              v-on:blur="agencyconfirmLoad = true"
-            />
-            <div class="invalid-feedback">Password and Confirm password must be the same!</div>
+            <float-label label="Confirm Password" style="width: 100%;">
+              <input
+                type="password"
+                placeholder="Confirm Password"
+                v-model="registerAgency.user.confirm"
+                id="inputAgencyPasswordConfirm"
+                class="form-control uniInput"
+                v-bind:class="{
+                  'is-valid': registerAgency.user.confirm,
+                  'is-invalid':
+                    !validConfirm(registerAgency.user.confirm) &&
+                    agencyconfirmLoad,
+                }"
+                v-on:keyup="agencyconfirmLoad = true"
+                v-on:blur="agencyconfirmLoad = true"
+              />
+              <div class="invalid-feedback">
+                Password and Confirm password must be the same!
+              </div>
+            </float-label>
           </div>
         </div>
       </div>
       <div class="row">
         <div class="col">
-          <label for="agencytc"
-            ><router-link to="/termsConditionsView">Terms & Conditions</router-link></label
-          >
+          <label for="agencytc">
+            <router-link to="/termsConditionsView">
+              Terms & Conditions
+            </router-link>
+          </label>
           <input
             name="agencytc"
             type="checkbox"
@@ -211,42 +283,47 @@
         v-on:click="SubmitData()"
         type="submit"
       >
-      SUBMIT
+        SUBMIT
       </button>
       <button
-      :data-target="'#myModalAgency'"
-      data-toggle="modal"
-      @click="navigate()"
-      class="btn-white-border mb-5"
-      style="float:right"
-      type="submit"
+        :data-target="'#myModalAgency'"
+        data-toggle="modal"
+        @click="navigate()"
+        class="btn-white-border mb-5"
+        style="float: right;"
+        type="submit"
       >
-      Cancel
+        Cancel
       </button>
-      <button hidden :data-target="'#myModalAgency'" data-toggle="modal" ref="dataToggle"></button>
+      <button
+        hidden
+        :data-target="'#myModalAgency'"
+        data-toggle="modal"
+        ref="dataToggle"
+      ></button>
     </div>
   </main>
 </template>
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
-import carousel from "vue-owl-carousel";
-import alert from "../shared/alert";
-import Log from "../../assets/Log";
+import { mapState, mapActions } from 'vuex'
+import carousel from 'vue-owl-carousel'
+import alert from '../shared/alert'
+import Log from '../../assets/Log'
 export default {
   components: {
     carousel,
-    alert
+    alert,
   },
   props: {
-    RegisterHeader: { type: String, default: undefined }
+    RegisterHeader: { type: String, default: undefined },
   },
-  name: "Agency",
+  name: 'Agency',
   data() {
     return {
-      isPasswordShown: "password",
-      selectItems: [{ text: "password", value: 0 }],
+      isPasswordShown: 'password',
+      selectItems: [{ text: 'password', value: 0 }],
       boolMessage: false,
       boolValidationError: false,
       showPassword: false,
@@ -260,126 +337,145 @@ export default {
       agencyusernameLoad: false,
       agencypasswordLoad: false,
       agencyconfirmLoad: false,
-      errorOccurred: "",
-      errorMessage: ""
-    };
+      errorOccurred: '',
+      errorMessage: '',
+    }
   },
   computed: {
-    ...mapState("register", ["registerAgency"]),
+    ...mapState('register', ['registerAgency']),
     Header() {
-      return this.RegisterHeader ? "Agency Administrator Details" : "Private Individual";
-    }
+      return this.RegisterHeader
+        ? 'Agency Administrator Details'
+        : 'Private Individual'
+    },
   },
   methods: {
-    ...mapActions("register", ["getAgency", "saveAgency", "updateAgency", "clearAgency"]),
+    ...mapActions('register', [
+      'getAgency',
+      'saveAgency',
+      'updateAgency',
+      'clearAgency',
+    ]),
     navigate() {
-      if (Log.getUser().role !== "Super Admin") {
-        this.$router.push("/user/login");
+      if (Log.getUser().role !== 'Super Admin') {
+        this.$router.push('/user/login')
       }
     },
     togglePassword() {
-      this.showPassword = true;
-      this.isPasswordShown = "text";
+      this.showPassword = true
+      this.isPasswordShown = 'text'
     },
     passwordToggled() {
-      this.showPassword = false;
-      this.isPasswordShown = "password";
+      this.showPassword = false
+      this.isPasswordShown = 'password'
     },
     SubmitData() {
-      this.boolValidationError = false;
-      this.boolMessage = false;
-      if(this.validatePage()){
+      this.boolValidationError = false
+      this.boolMessage = false
+      if (this.validatePage()) {
         this.saveAgency(this.registerAgency)
-        .then(() => {
-          this.boolMessage = true;
-          console.log('registerAgency true');
-          console.log(Log.getUser().role);
-          setTimeout(() => {
-            if (Log.getUser().role !== "Super Admin") {
-              this.$router.push("/user/login");
-            } else {
-              this.$refs.dataToggle.click();
-              this.$router.go();
-            }
-          }, 500);
-        })
-        .catch(err => {
-          this.boolValidationError = true;
-          this.errorOccurred = "ERROR";
-          this.errorMessage = "Server Error: CONNECTION_REFUSED"; 
+          .then(() => {
+            this.boolMessage = true
+            console.log('registerAgency true')
+            console.log(Log.getUser().role)
+            setTimeout(() => {
+              if (Log.getUser().role !== 'Super Admin') {
+                this.$router.push('/user/login')
+              } else {
+                this.$refs.dataToggle.click()
+                this.$router.go()
+              }
+            }, 500)
+          })
+          .catch((err) => {
+            this.boolValidationError = true
+            this.errorOccurred = 'ERROR'
+            this.errorMessage = 'Server Error: CONNECTION_REFUSED'
 
-          if (err) {
-            if (err.data.message) {
-              this.errorMessage = err.data.message;
-            } else {
-              this.errorMessage = "Error."
+            if (err) {
+              if (err.data.message) {
+                this.errorMessage = err.data.message
+              } else {
+                this.errorMessage = 'Error.'
+              }
             }
-          }
-        });
+          })
       }
     },
     Close() {
-      this.$router.push("/user/login");
+      this.$router.push('/user/login')
     },
-    validatePage : function(){
-      console.log('validatePage');
-      if (this.registerAgency.name && this.registerAgency.eaabeffcNumber &&  this.registerAgency.companyRegNumber 
-         && this.registerAgency.user.name && this.registerAgency.user.surname && this.registerAgency.user.email 
-         && this.registerAgency.user.cellNumber && this.registerAgency.user.username && this.registerAgency.user.password
-         && this.registerAgency.user.password === this.registerAgency.user.confirm){
-        console.log('passed');
-        this.errorOccurred = '';
-        this.errorMessage = '';
-        this.boolValidationError = true;
-        return true;
+    validatePage: function () {
+      console.log('validatePage')
+      if (
+        this.registerAgency.name &&
+        this.registerAgency.eaabeffcNumber &&
+        this.registerAgency.companyRegNumber &&
+        this.registerAgency.user.name &&
+        this.registerAgency.user.surname &&
+        this.registerAgency.user.email &&
+        this.registerAgency.user.cellNumber &&
+        this.registerAgency.user.username &&
+        this.registerAgency.user.password &&
+        this.registerAgency.user.password === this.registerAgency.user.confirm
+      ) {
+        console.log('passed')
+        this.errorOccurred = ''
+        this.errorMessage = ''
+        this.boolValidationError = true
+        return true
       } else {
-        console.log('failed');
-        this.boolValidationError = true;
-        this.agencyNameLoad = true,
-        this.agencyNumberLoad = true,
-        this.companyRegNumberLoad = true,
-        this.agencyAdminNameLoad = true,
-        this.agencySurnameLoad = true,
-        this.agencyEmailLoad = true,
-        this.agencyCellNumberLoad= true,
-        this.agencyusernameLoad = true,
-        this.agencypasswordLoad = true,
-        this.agencyconfirmLoad = true,
-        this.errorOccurred = "ERROR";
-        this.errorMessage = "Please check form and correct all input fields!";
-        return false;
+        console.log('failed')
+        this.boolValidationError = true
+        ;(this.agencyNameLoad = true),
+          (this.agencyNumberLoad = true),
+          (this.companyRegNumberLoad = true),
+          (this.agencyAdminNameLoad = true),
+          (this.agencySurnameLoad = true),
+          (this.agencyEmailLoad = true),
+          (this.agencyCellNumberLoad = true),
+          (this.agencyusernameLoad = true),
+          (this.agencypasswordLoad = true),
+          (this.agencyconfirmLoad = true),
+          (this.errorOccurred = 'ERROR')
+        this.errorMessage = 'Please check form and correct all input fields!'
+        return false
       }
     },
-    requiredField : function(tfield) {
-      if(tfield){
-        return true;
+    requiredField: function (tfield) {
+      if (tfield) {
+        return true
       } else {
-        return false;
+        return false
       }
     },
-    validEmail : function(email) {
-        var re = /(.+)@(.+){2,}\.(.+){2,}/;
-        return re.test(email.toLowerCase());
+    validEmail: function (email) {
+      var re = /(.+)@(.+){2,}\.(.+){2,}/
+      if (email) {
+        return re.test(email.toLowerCase())
+      } else {
+        return re.test(email)
+      }
     },
-    validConfirm : function(tfield) {
+    validConfirm: function (tfield) {
       //console.log(tfield);
-      if (this.requiredField(tfield)){
-        if(tfield === this.registerAgency.user.password){
-          return true;
+      if (this.requiredField(tfield)) {
+        if (tfield === this.registerAgency.user.password) {
+          return true
         } else {
-          return false;
-        } 
+          return false
+        }
       } else {
-        return false;
+        return false
       }
-    }
-  }
-};
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>
 .btn-disabled {
-  font-family: "Muli";
+  font-family: 'Muli';
   font-size: 15px;
   letter-spacing: 1px;
   display: inline-block;

src/components/user/registerAgentSection.vue

@@ -0,0 +1,458 @@
+<template>
+  <main id="main" style="padding-top: 10px; padding-bottom: 50px;">
+    <div class="form">
+      <div v-if="boolMessage" class="row">
+        <div class="col">
+          <alert :text="'Register Success!'" :type="'SUCCESS'" />
+        </div>
+      </div>
+      <div v-if="boolValidationError" class="row">
+        <div class="col">
+          <alert :text="errorMessage" :type="errorOccurred" />
+        </div>
+      </div>
+      <h3 class="card-title text-center">Agent Details</h3>
+      <hr />
+      <div class="row my-3">
+        <div class="col-sm-12 col-md-6">
+          <div class="form-group">
+            <float-label label="Agent Name" style="width: 100%;">
+              <input
+                type="text"
+                id="inputAgentName"
+                v-model="registerAgency.user.name"
+                class="form-control uniInput my-3"
+                v-bind:class="{
+                  'is-valid': registerAgency.user.name,
+                  'is-invalid':
+                    !requiredField(registerAgency.user.name) &&
+                    agencyAdminNameLoad,
+                }"
+                v-on:keyup="agencyAdminNameLoad = true"
+                v-on:blur="agencyAdminNameLoad = true"
+                placeholder="Agent Name"
+              />
+              <div class="invalid-feedback">
+                Administrator Name is required!
+              </div>
+            </float-label>
+          </div>
+          <div class="form-group">
+            <float-label label="Surname" style="width: 100%;">
+              <input
+                type="text"
+                id="inputAgencySurname"
+                v-model="registerAgency.user.surname"
+                class="form-control uniInput my-3"
+                v-bind:class="{
+                  'is-valid': registerAgency.user.surname,
+                  'is-invalid':
+                    !requiredField(registerAgency.user.surname) &&
+                    agencySurnameLoad,
+                }"
+                v-on:keyup="agencySurnameLoad = true"
+                v-on:blur="agencySurnameLoad = true"
+                placeholder="Surname"
+              />
+              <div class="invalid-feedback">
+                Administrator Surname is required!
+              </div>
+            </float-label>
+          </div>
+          <div class="form-group">
+            <float-label label="Email" style="width: 100%;">
+              <input
+                type="email"
+                id="inputAgencyEmail"
+                v-model="registerAgency.user.email"
+                v-bind:class="{
+                  'is-valid': registerAgency.user.email,
+                  'is-invalid':
+                    !validEmail(registerAgency.user.email) && agencyEmailLoad,
+                }"
+                v-on:keyup="agencyEmailLoad = true"
+                v-on:blur="agencyEmailLoad = true"
+                class="form-control uniInput my-3"
+                placeholder="Email"
+              />
+              <div class="invalid-feedback">Valid email is required!</div>
+            </float-label>
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-6">
+          <div class="form-group">
+            <float-label label="Cellphone Number" style="width: 100%;">
+              <input
+                type="text"
+                id="inputAgencyCellphone"
+                v-model="registerAgency.user.cellNumber"
+                class="form-control uniInput my-3"
+                v-bind:class="{
+                  'is-valid': registerAgency.user.cellNumber,
+                  'is-invalid':
+                    !requiredField(registerAgency.user.cellNumber) &&
+                    agencyCellNumberLoad,
+                }"
+                v-on:keyup="agencyCellNumberLoad = true"
+                v-on:blur="agencyCellNumberLoad = true"
+                placeholder="Cellphone Number"
+              />
+              <div class="invalid-feedback">Cell number is required!</div>
+            </float-label>
+          </div>
+          <div class="form-group">
+            <float-label label="Landline Number" style="width: 100%;">
+              <input
+                type="text"
+                id="inputAgencyLandLine"
+                v-model="registerAgency.user.telephone"
+                class="form-control uniInput"
+                v-bind:class="{ 'is-valid': registerAgency.user.telephone }"
+                placeholder="Landline Number"
+              />
+            </float-label>
+          </div>
+
+          <div class="form-group">
+            <float-label fixed label="Agency">
+              <select
+                class="form-control uniSelect"
+                v-model="inputAgency"
+                @change="selectAgency()"
+                v-bind:class="{
+                  'is-valid': inputAgency,
+                  'is-invalid': !requiredField(inputAgency) && inputAgencyLoad,
+                }"
+                v-on:keyup="inputAgencyLoad = true"
+                v-on:blur="inputAgencyLoad = true"
+                placeholder="Agency"
+              >
+                <option v-for="(item, i) in agencies" :key="i" :value="item.id">
+                  {{ item.agencyName }}
+                </option>
+              </select>
+              <div class="invalid-feedback">Please select an agency!</div>
+            </float-label>
+          </div>
+        </div>
+      </div>
+      <hr />
+      <div class="row my-3">
+        <div class="col-sm-12">
+          <div class="form-group">
+            <float-label label="Username" style="width: 100%;">
+              <input
+                type="text"
+                id="inputAgencyUsername"
+                v-model="registerAgency.user.username"
+                class="form-control uniInput"
+                v-bind:class="{
+                  'is-valid': registerAgency.user.username,
+                  'is-invalid':
+                    !requiredField(registerAgency.user.username) &&
+                    agencyusernameLoad,
+                }"
+                v-on:keyup="agencyusernameLoad = true"
+                v-on:blur="agencyusernameLoad = true"
+                placeholder="Username"
+              />
+              <div class="invalid-feedback">Username is required!</div>
+            </float-label>
+          </div>
+        </div>
+      </div>
+      <div class="row my-3">
+        <div class="col-sm-12 col-md-6">
+          <div class="form-group">
+            <float-label label="Password" style="width: 100%;">
+              <input
+                type="password"
+                placeholder="Password"
+                v-model="registerAgency.user.password"
+                id="inputAgencyPassword uniInput"
+                class="form-control uniInput"
+                v-bind:class="{
+                  'is-valid': registerAgency.user.password,
+                  'is-invalid':
+                    !requiredField(registerAgency.user.password) &&
+                    agencypasswordLoad,
+                }"
+                v-on:keyup="agencypasswordLoad = true"
+                v-on:blur="agencypasswordLoad = true"
+              />
+              <div class="invalid-feedback">Password is required!</div>
+            </float-label>
+          </div>
+        </div>
+        <div class="col">
+          <div class="form-group">
+            <float-label label="Confirm Password" style="width: 100%;">
+              <input
+                type="password"
+                placeholder="Confirm Password"
+                v-model="registerAgency.user.confirm"
+                id="inputAgencyPasswordConfirm"
+                class="form-control uniInput"
+                v-bind:class="{
+                  'is-valid': registerAgency.user.confirm,
+                  'is-invalid':
+                    !validConfirm(registerAgency.user.confirm) &&
+                    agencyconfirmLoad,
+                }"
+                v-on:keyup="agencyconfirmLoad = true"
+                v-on:blur="agencyconfirmLoad = true"
+              />
+              <div class="invalid-feedback">
+                Password and Confirm password must be the same!
+              </div>
+            </float-label>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <label for="agentc">
+            <router-link to="/termsConditionsView">
+              Terms & Conditions
+            </router-link>
+          </label>
+          <input
+            name="agenttc"
+            type="checkbox"
+            class="ml-3 mt-2"
+            v-model="registerAgency.user.acceptedTerms"
+          />
+        </div>
+      </div>
+      <button
+        v-if="registerAgency.user.acceptedTerms"
+        class="btn-white-border"
+        v-on:click="SubmitData()"
+        type="submit"
+      >
+        SUBMIT
+      </button>
+      <button
+        :data-target="'#myModalAgent'"
+        data-toggle="modal"
+        @click="navigate()"
+        class="btn-white-border mb-5"
+        style="float: right;"
+        type="submit"
+      >
+        Cancel
+      </button>
+      <button
+        hidden
+        :data-target="'#myModalAgent'"
+        data-toggle="modal"
+        ref="dataToggle"
+      ></button>
+    </div>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapState, mapActions } from 'vuex'
+import carousel from 'vue-owl-carousel'
+import alert from '../shared/alert'
+import Log from '../../assets/Log'
+export default {
+  components: {
+    carousel,
+    alert,
+  },
+  props: {
+    RegisterHeader: { type: String, default: undefined },
+  },
+  name: 'Agent',
+  data() {
+    return {
+      inputAgency: '',
+      isPasswordShown: 'password',
+      selectItems: [{ text: 'password', value: 0 }],
+      boolMessage: false,
+      boolValidationError: false,
+      showPassword: false,
+      agencyNameLoad: false,
+      agencyNumberLoad: false,
+      companyRegNumberLoad: false,
+      agencyAdminNameLoad: false,
+      agencySurnameLoad: false,
+      agencyEmailLoad: false,
+      agencyCellNumberLoad: false,
+      agencyusernameLoad: false,
+      agencypasswordLoad: false,
+      agencyconfirmLoad: false,
+      inputAgencyLoad: false,
+      errorOccurred: '',
+      errorMessage: '',
+    }
+  },
+  computed: {
+    ...mapState('register', ['agencies', 'registerAgency']),
+  },
+  methods: {
+    ...mapActions('register', [
+      'getAgency',
+      'saveAgency',
+      'updateAgency',
+      'clearAgency',
+    ]),
+    navigate() {
+      if (Log.getUser().role !== 'Super Admin') {
+        this.$router.push('/user/login')
+      }
+    },
+    togglePassword() {
+      this.showPassword = true
+      this.isPasswordShown = 'text'
+    },
+    passwordToggled() {
+      this.showPassword = false
+      this.isPasswordShown = 'password'
+    },
+    SubmitData() {
+      this.boolValidationError = false
+      this.boolMessage = false
+
+      //this.getAgency(inputAgency);
+      //console.log(registerAgency.Name);
+      if (this.validatePage()) {
+        this.saveAgency(this.registerAgency)
+          .then(() => {
+            this.boolMessage = true
+            console.log('registerAgency true')
+            console.log(Log.getUser().role)
+            setTimeout(() => {
+              if (Log.getUser().role !== 'Super Admin') {
+                this.$router.push('/user/login')
+              } else {
+                this.$refs.dataToggle.click()
+                this.$router.go()
+              }
+            }, 500)
+          })
+          .catch((err) => {
+            this.boolValidationError = true
+            this.errorOccurred = 'ERROR'
+            this.errorMessage = 'Server Error: CONNECTION_REFUSED'
+
+            if (err) {
+              if (err.data.message) {
+                this.errorMessage = err.data.message
+              } else {
+                this.errorMessage = 'Error.'
+              }
+            }
+          })
+      }
+    },
+    selectAgency() {
+      this.registerAgency.name = this.agencies.find(
+        (p) => p.id === this.inputAgency,
+      ).agencyName
+      this.registerAgency.eaabeffcNumber = this.agencies.find(
+        (p) => p.id === this.inputAgency,
+      ).eaabeffcNumber
+      this.registerAgency.companyRegNumber = this.agencies.find(
+        (p) => p.id === this.inputAgency,
+      ).companyRegNumber
+    },
+    Close() {
+      this.$router.push('/user/login')
+    },
+    validatePage: function () {
+      console.log('validatePage')
+      if (
+        this.inputAgency &&
+        this.registerAgency.name &&
+        this.registerAgency.eaabeffcNumber &&
+        this.registerAgency.companyRegNumber &&
+        this.registerAgency.user.name &&
+        this.registerAgency.user.surname &&
+        this.registerAgency.user.email &&
+        this.registerAgency.user.cellNumber &&
+        this.registerAgency.user.username &&
+        this.registerAgency.user.password &&
+        this.registerAgency.user.password === this.registerAgency.user.confirm
+      ) {
+        console.log('passed')
+        this.errorOccurred = ''
+        this.errorMessage = ''
+        this.boolValidationError = true
+        return true
+      } else {
+        console.log('failed')
+        this.boolValidationError = true
+        this.inputAgencyLoad = true
+        this.agencyNameLoad = true
+        this.agencyNumberLoad = true
+        this.companyRegNumberLoad = true
+        this.agencyAdminNameLoad = true
+        this.agencySurnameLoad = true
+        this.agencyEmailLoad = true
+        this.agencyCellNumberLoad = true
+        this.agencyusernameLoad = true
+        this.agencypasswordLoad = true
+        this.agencyconfirmLoad = true
+        this.errorOccurred = 'ERROR'
+        this.errorMessage = 'Please check form and correct all input fields!'
+        return false
+      }
+    },
+    requiredField: function (tfield) {
+      if (tfield) {
+        return true
+      } else {
+        return false
+      }
+    },
+    validEmail: function (email) {
+      var re = /(.+)@(.+){2,}\.(.+){2,}/
+      if (email) {
+        return re.test(email.toLowerCase())
+      } else {
+        return re.test(email)
+      }
+    },
+    validConfirm: function (tfield) {
+      //console.log(tfield);
+      if (this.requiredField(tfield)) {
+        if (tfield === this.registerAgency.user.password) {
+          return true
+        } else {
+          return false
+        }
+      } else {
+        return false
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.btn-disabled {
+  font-family: 'Muli';
+  font-size: 15px;
+  letter-spacing: 1px;
+  display: inline-block;
+  padding: 10px 32px;
+  border-radius: 2px;
+  transition: 0.5s;
+  margin: 10px;
+  color: #fff;
+  background: grey;
+  border-color: black;
+  color: black;
+  cursor: not-allowed;
+}
+.btn-disabled :hover {
+  background: grey;
+  border-color: black;
+  color: black;
+  cursor: not-allowed;
+}
+</style>

src/components/user/registerIndividual.vue

@@ -1,9 +1,12 @@
 <template>
-  <main id="main" style="padding-top:10px; padding-bottom:50px">
-    <div class="container">
+  <main id="main" style="padding-top: 10px; padding-bottom: 50px;">
+    <div class="form">
       <div v-if="boolMessage" class="row">
         <div class="col">
-          <alert :text="'Register Success! You\'ll be redirected shortly.'" :type="'SUCCESS'" />
+          <alert
+            :text="'Register Success! You\'ll be redirected shortly.'"
+            :type="'SUCCESS'"
+          />
         </div>
       </div>
       <div v-if="boolValidationError" class="row">
@@ -13,134 +16,174 @@
       </div>
       <h3 class="card-title text-center">User Details</h3>
       <div class="row">
-        <div class="col-sm-12 col-md-6 ">
+        <div class="col-sm-12 col-md-6">
           <div class="form-group">
-            <b-form-input
-              type="text"
-              id="inputName"
-              class="form-control uniInput my-2"
-              v-model="indivUser.name"
-              v-bind:class="{'is-valid': indivUser.name,
-                'is-invalid': !requiredField(indivUser.name) && nameLoad}"
-              v-on:keyup="nameLoad = true"
-              v-on:blur="nameLoad = true"
-              placeholder="Name"
-            />
-            <div class="invalid-feedback">Name is required!</div>
+            <float-label label="Name" style="width: 100%;">
+              <input
+                type="text"
+                id="inputName"
+                class="form-control uniInput my-2"
+                v-model="indivUser.name"
+                v-bind:class="{
+                  'is-valid': indivUser.name,
+                  'is-invalid': !requiredField(indivUser.name) && nameLoad,
+                }"
+                v-on:keyup="nameLoad = true"
+                v-on:blur="nameLoad = true"
+                placeholder="Name"
+              />
+              <div class="invalid-feedback">Name is required!</div>
+            </float-label>
           </div>
           <div class="form-group">
-            <input
-              type="text"
-              id="inputSurname"
-              class="form-control uniInput my-2"
-              v-model="indivUser.surname"
-              v-bind:class="{'is-valid': indivUser.surname,
-                'is-invalid': !requiredField(indivUser.surname) && surnameLoad}"
-              v-on:keyup="surnameLoad = true"
-              v-on:blur="surnameLoad = true"
-              placeholder="Surname"
-            />
-            <div class="invalid-feedback">Surname is required!</div>
+            <float-label label="Surname" style="width: 100%;">
+              <input
+                type="text"
+                id="inputSurname"
+                class="form-control uniInput my-2"
+                v-model="indivUser.surname"
+                v-bind:class="{
+                  'is-valid': indivUser.surname,
+                  'is-invalid':
+                    !requiredField(indivUser.surname) && surnameLoad,
+                }"
+                v-on:keyup="surnameLoad = true"
+                v-on:blur="surnameLoad = true"
+                placeholder="Surname"
+              />
+              <div class="invalid-feedback">Surname is required!</div>
+            </float-label>
           </div>
           <div class="form-group">
-            <input
-              type="email"
-              id="inputEmail"
-              v-model="indivUser.email"
-              class="form-control uniInput my-2"
-              v-bind:class="{'is-valid': indivUser.email,
-                'is-invalid': !validEmail(indivUser.email) && emailLoad}"
-              v-on:keyup="emailLoad = true"
-              v-on:blur="emailLoad = true"
-              placeholder="Email"
-            />
-            <div class="invalid-feedback">Valid email address is required!</div>
+            <float-label label="Email" style="width: 100%;">
+              <input
+                type="email"
+                id="inputEmail"
+                v-model="indivUser.email"
+                class="form-control uniInput my-2"
+                v-bind:class="{
+                  'is-valid': indivUser.email,
+                  'is-invalid': !validEmail(indivUser.email) && emailLoad,
+                }"
+                v-on:keyup="emailLoad = true"
+                v-on:blur="emailLoad = true"
+                placeholder="Email"
+              />
+              <div class="invalid-feedback">
+                Valid email address is required!
+              </div>
+            </float-label>
           </div>
         </div>
 
         <div class="col-sm-12 col-md-6">
-          <input
-            type="text"
-            id="inputCellNumber"
-            name="inputCellNumber"
-            v-model="indivUser.cellNumber"
-            class="form-control uniInput my-2"
-            v-bind:class="{'is-valid': indivUser.cellNumber,
-                'is-invalid': !requiredField(indivUser.cellNumber) && cellNumberLoad}"
-            v-on:keyup="cellNumberLoad = true"
-            v-on:blur="cellNumberLoad = true"
-            placeholder="Cellphone Number"
-          />
-          <div class="invalid-feedback">Cellphone number is required!</div>
-
-          <input
-            type="text"
-            id="inputTelephone"
-            v-model="indivUser.telephone"
-            class="form-control uniInput my-2"
-            v-bind:class="{'is-valid': indivUser.telephone}"
-            placeholder="Landline Number"
-          />
+          <div class="form-group">
+            <float-label label="Cellphone Number" style="width: 100%;">
+              <input
+                type="text"
+                id="inputCellNumber"
+                name="inputCellNumber"
+                v-model="indivUser.cellNumber"
+                class="form-control uniInput my-2"
+                v-bind:class="{
+                  'is-valid': indivUser.cellNumber,
+                  'is-invalid':
+                    !requiredField(indivUser.cellNumber) && cellNumberLoad,
+                }"
+                v-on:keyup="cellNumberLoad = true"
+                v-on:blur="cellNumberLoad = true"
+                placeholder="Cellphone Number"
+              />
+              <div class="invalid-feedback">Cellphone number is required!</div>
+            </float-label>
+          </div>
+          <div class="form-group">
+            <float-label label="Landline Number" style="width: 100%;">
+              <input
+                type="text"
+                id="inputTelephone"
+                v-model="indivUser.telephone"
+                class="form-control uniInput my-2"
+                v-bind:class="{ 'is-valid': indivUser.telephone }"
+                placeholder="Landline Number"
+              />
+            </float-label>
+          </div>
         </div>
       </div>
       <hr />
       <div class="row">
         <div class="col-sm-12">
-          <input
-            type="text"
-            id="inputUsername"
-            v-model="indivUser.username"
-            class="form-control uniInput my-2"
-            v-bind:class="{'is-valid': indivUser.username,
-                'is-invalid': !requiredField(indivUser.username) && usernameLoad}"
-            v-on:keyup="usernameLoad = true"
-            v-on:blur="usernameLoad = true"
-            placeholder="Username"
-          />
-          <div class="invalid-feedback">Username is required!</div>
+          <float-label label="Username" style="width: 100%;">
+            <input
+              type="text"
+              id="inputUsername"
+              v-model="indivUser.username"
+              class="form-control uniInput my-2"
+              v-bind:class="{
+                'is-valid': indivUser.username,
+                'is-invalid':
+                  !requiredField(indivUser.username) && usernameLoad,
+              }"
+              v-on:keyup="usernameLoad = true"
+              v-on:blur="usernameLoad = true"
+              placeholder="Username"
+            />
+            <div class="invalid-feedback">Username is required!</div>
+          </float-label>
         </div>
       </div>
       <div class="row">
         <div class="col-sm-12 col-md-6">
-          <input
-            type="password"
-            placeholder="Password "
-            v-model="indivUser.password"
-            id="inputPassword"
-            class="form-control uniInput my-2"
-            v-bind:class="{'is-valid': indivUser.password,
-                'is-invalid': !requiredField(indivUser.password) && passwordLoad}"
-            v-on:keyup="passwordLoad = true"
-            v-on:blur="passwordLoad = true"
-          />
-          <div class="invalid-feedback">Password is required!</div>
+          <float-label label="Password" style="width: 100%;">
+            <input
+              type="password"
+              placeholder="Password "
+              v-model="indivUser.password"
+              id="inputPassword"
+              class="form-control uniInput my-2"
+              v-bind:class="{
+                'is-valid': indivUser.password,
+                'is-invalid':
+                  !requiredField(indivUser.password) && passwordLoad,
+              }"
+              v-on:keyup="passwordLoad = true"
+              v-on:blur="passwordLoad = true"
+            />
+            <div class="invalid-feedback">Password is required!</div>
+          </float-label>
         </div>
         <div class="col">
-          <input
-            type="password"
-            placeholder="Confirm Password"
-            v-model="indivUser.confirmPassword"
-            id="inputConfirmPassword"
-            class="form-control uniInput my-2"
-            v-bind:class="{'is-valid': indivUser.confirmPassword,
-                'is-invalid': !validConfirm(indivUser.confirmPassword) && confirmPasswordLoad}"
-            v-on:keyup="confirmPasswordLoad = true"
-            v-on:blur="confirmPasswordLoad = true"
-          />
-          <div class="invalid-feedback">Password and Confirm password must be the same!</div>
+          <float-label label="Confirm Password" style="width: 100%;">
+            <input
+              type="password"
+              placeholder="Confirm Password"
+              v-model="indivUser.confirmPassword"
+              id="inputConfirmPassword"
+              class="form-control uniInput my-2"
+              v-bind:class="{
+                'is-valid': indivUser.confirmPassword,
+                'is-invalid':
+                  !validConfirm(indivUser.confirmPassword) &&
+                  confirmPasswordLoad,
+              }"
+              v-on:keyup="confirmPasswordLoad = true"
+              v-on:blur="confirmPasswordLoad = true"
+            />
+            <div class="invalid-feedback">
+              Password and Confirm password must be the same!
+            </div>
+          </float-label>
         </div>
       </div>
       <div class="row">
         <div class="col">
-          <label for="tc"
-            ><router-link to="/termsConditionsView">Terms & Conditions</router-link></label
-          >
-          <input
-            name="tc"
-            type="checkbox"
-            class="ml-3 mt-2"
-            v-model="terms"
-            />
+          <label for="tc">
+            <router-link to="/termsConditionsView">
+              Terms & Conditions
+            </router-link>
+          </label>
+          <input name="tc" type="checkbox" class="ml-3 mt-2" v-model="terms" />
         </div>
       </div>
       <button
@@ -156,47 +199,52 @@
         data-toggle="modal"
         @click="navigate()"
         class="btn-white-border"
-        style="float:right"
+        style="float: right;"
         type="submit"
       >
         Cancel
       </button>
-      <button hidden :data-target="'#myModalAgency'" data-toggle="modal" ref="dataToggle"></button>
+      <button
+        hidden
+        :data-target="'#myModalAgency'"
+        data-toggle="modal"
+        ref="dataToggle"
+      ></button>
     </div>
   </main>
 </template>
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
-import carousel from "vue-owl-carousel";
-import alert from "../shared/alert";
-import Log from "../../assets/Log";
+import { mapState, mapActions } from 'vuex'
+import carousel from 'vue-owl-carousel'
+import alert from '../shared/alert'
+import Log from '../../assets/Log'
 export default {
   components: {
     carousel,
-    alert
+    alert,
   },
   props: {
-    RegisterHeader: { type: String, default: undefined }
+    RegisterHeader: { type: String, default: undefined },
   },
-  name: "PrivateIndividual",
+  name: 'PrivateIndividual',
   data() {
     return {
-      isPasswordShown: "password",
-      selectItems: [{ text: "password", value: 0 }],
+      isPasswordShown: 'password',
+      selectItems: [{ text: 'password', value: 0 }],
       showPassword: false,
       boolMessage: false,
       terms: false,
       indivUser: {
         name: '',
         surname: '',
-        email:'',
+        email: '',
         cellNumber: '',
         telephone: '',
         username: '',
         password: '',
-        confirmPassword: ''
+        confirmPassword: '',
       },
       boolValidationError: false,
       nameLoad: false,
@@ -207,122 +255,134 @@ export default {
       usernameLoad: false,
       passwordLoad: false,
       confirmPasswordLoad: false,
-      errorOccurred: "",
-      errorMessage: ""
-    };
+      errorOccurred: '',
+      errorMessage: '',
+    }
   },
   computed: {
-    ...mapState("register", ["registerIndividual"]),
+    ...mapState('register', ['registerIndividual']),
     Header() {
-      return this.RegisterHeader ? "Agency Administrator Details" : "Private Individual";
-    }
+      return this.RegisterHeader
+        ? 'Agency Administrator Details'
+        : 'Private Individual'
+    },
   },
   methods: {
-    ...mapActions("register", [
-      "getIndividual",
-      "saveIndividual",
-      "updateIndividual",
-      "clearIndividual"
+    ...mapActions('register', [
+      'getIndividual',
+      'saveIndividual',
+      'updateIndividual',
+      'clearIndividual',
     ]),
     navigate() {
-      if (Log.getUser().role !== "Super Admin") {
-        this.$router.push("/user/login");
+      if (Log.getUser().role !== 'Super Admin') {
+        this.$router.push('/user/login')
       }
     },
     togglePassword() {
-      this.showPassword = true;
-      this.isPasswordShown = "text";
+      this.showPassword = true
+      this.isPasswordShown = 'text'
     },
     passwordToggled() {
-      this.showPassword = false;
-      this.isPasswordShown = "password";
+      this.showPassword = false
+      this.isPasswordShown = 'password'
     },
     SubmitData() {
-      this.indivUser.acceptedTerms = this.terms;
+      this.indivUser.acceptedTerms = this.terms
       if (this.validatePage()) {
-          this.saveIndividual(this.indivUser)
-            .then(res => {
-              this.boolMessage = true;
-              setTimeout(() => {
-                if (Log.getUser().role !== "Super Admin") {
-                  this.$router.push("/user/login");
-                } else {
-                  this.$refs.dataToggle.click();
-                  this.$router.go();
-                }
-              }, 500);
-            })
-            .catch(err => {
-              console.log(err);
-              this.boolValidationError = true;
-              this.errorOccurred = "ERROR";
-              this.errorMessage = "Server Error: CONNECTION_REFUSED"; 
-              if (err) {
-                if (err.data.message) {
-                  this.errorMessage = err.data.message;
-                } else {
-                  this.errorMessage = "Error."
-                }
+        this.saveIndividual(this.indivUser)
+          .then((res) => {
+            this.boolMessage = true
+            setTimeout(() => {
+              if (Log.getUser().role !== 'Super Admin') {
+                this.$router.push('/user/login')
+              } else {
+                this.$refs.dataToggle.click()
+                this.$router.go()
               }
-            }); 
-      } 
+            }, 500)
+          })
+          .catch((err) => {
+            console.log(err)
+            this.boolValidationError = true
+            this.errorOccurred = 'ERROR'
+            this.errorMessage = 'Server Error: CONNECTION_REFUSED'
+            if (err) {
+              if (err.data.message) {
+                this.errorMessage = err.data.message
+              } else {
+                this.errorMessage = 'Error.'
+              }
+            }
+          })
+      }
     },
     Close() {
-      this.$router.push("/user/login");
+      this.$router.push('/user/login')
     },
-    validatePage : function(){
+    validatePage: function () {
       console.log('validatePage')
-      if (this.indivUser.name && this.indivUser.surname && this.indivUser.email 
-         && this.indivUser.cellNumber && this.indivUser.username && this.indivUser.password
-         && this.indivUser.password === this.indivUser.confirmPassword){
-        this.errorOccurred = '';
-        this.errorMessage = '';
-        this.boolValidationError = false;
-        return true;
+      if (
+        this.indivUser.name &&
+        this.indivUser.surname &&
+        this.indivUser.email &&
+        this.indivUser.cellNumber &&
+        this.indivUser.username &&
+        this.indivUser.password &&
+        this.indivUser.password === this.indivUser.confirmPassword
+      ) {
+        this.errorOccurred = ''
+        this.errorMessage = ''
+        this.boolValidationError = false
+        return true
       } else {
-        this.boolValidationError = true;
-        this.nameLoad = true,
-        this.surnameLoad = true,
-        this.emailLoad = true,
-        this.cellNumberLoad= true,
-        this.telephoneLoad = true,
-        this.usernameLoad = true,
-        this.passwordLoad = true,
-        this.confirmPasswordLoad = true,
-        this.errorOccurred = "ERROR";
-        this.errorMessage = "Please check form and correct all input fields!";
-        return false;
+        this.boolValidationError = true
+        ;(this.nameLoad = true),
+          (this.surnameLoad = true),
+          (this.emailLoad = true),
+          (this.cellNumberLoad = true),
+          (this.telephoneLoad = true),
+          (this.usernameLoad = true),
+          (this.passwordLoad = true),
+          (this.confirmPasswordLoad = true),
+          (this.errorOccurred = 'ERROR')
+        this.errorMessage = 'Please check form and correct all input fields!'
+        return false
       }
     },
-    requiredField : function(tfield) {
-      if(tfield){
-        return true;
+    requiredField: function (tfield) {
+      if (tfield) {
+        return true
       } else {
-        return false;
+        return false
       }
     },
-    validEmail : function(email) {
-        var re = /(.+)@(.+){2,}\.(.+){2,}/;
-        return re.test(email.toLowerCase());
+    validEmail: function (email) {
+      var re = /(.+)@(.+){2,}\.(.+){2,}/
+      if (email) {
+        return re.test(email.toLowerCase())
+      } else {
+        return re.test(email)
+      }
     },
-    validConfirm : function(tfield) {
-      if (this.requiredField(tfield)){
-        if(tfield === this.indivUser.password){
-          return true;
+    validConfirm: function (tfield) {
+      if (this.requiredField(tfield)) {
+        if (tfield === this.indivUser.password) {
+          return true
         } else {
-          return false;
-        } 
+          return false
+        }
       } else {
-        return false;
+        return false
       }
-    }
-  }
-};
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>
 .btn-disabled {
-  font-family: "Muli";
+  font-family: 'Muli';
   font-size: 15px;
   letter-spacing: 1px;
   display: inline-block;

src/router/index.js

@@ -53,7 +53,7 @@ import tenderWeekAdminPage from '../components/admin/status/tenderWeekAdminPage.
 import userManagementPage from '../components/admin/status/userManagementPage.vue'
 import changeLogPage from '../components/admin/status/changeLogPage.vue'
 import UnitConfiguration from '../components/admin/unitConfiguration/unitConfigurationPage.vue'
-import agentManagementPage from '../components/admin/status/agentsUserManagementPage.vue'
+import agentManagementPage from '../components/admin/status/agentUserManagementPage.vue'
 import agencyManagementPage from '../components/admin/status/agencyUserManagementPage.vue'
 import Fees from '../components/admin/fees/feesPage.vue'
 import PasswordOnLogin from '../components/user/firstLoginPasswordUpdate.vue'

src/store/modules/timeshare/timeshare.js

@@ -31,6 +31,7 @@ export default {
             resort: undefined,
             resortCode: undefined,
             resortName: undefined,
+            region: undefined,
             regionId: undefined,
             season: undefined,
             module: undefined,
@@ -39,6 +40,7 @@ export default {
             maxSleep: undefined,
             weekNumber: undefined,
             levyAmount: undefined,
+            weekType: undefined,
             currentYearBanked: false,
             bankedWith: undefined,
             leviesPaidInFull: false,
@@ -197,7 +199,7 @@ export default {
                 )
                 .then((result) => {
                     commit('addResort', result.data)
-                    console.log(result.data)
+                        //console.log(result.data)
                 })
                 .catch(console.error)
         },

src/store/modules/user/register.js

@@ -34,6 +34,7 @@ export default {
                 password: '',
                 confirm: '',
                 role: '',
+                acceptedTerms: false,
             },
         },
     },
@@ -102,6 +103,8 @@ export default {
                     username: '',
                     password: '',
                     confirm: '',
+                    role: '',
+                    acceptedTerms: false,
                 },
             }
         },
@@ -141,7 +144,11 @@ export default {
         getAgents({ commit }) {
             axios
                 .get('/api/agent')
-                .then((result) => commit('setAgents', result.data))
+                .then((result) => {
+                    //console.log('Agents')
+                    //console.log(result)
+                    commit('setAgents', result.data)
+                })
                 .catch(console.error)
         },
         async getAgentById({ commit }, userId) {
@@ -158,7 +165,11 @@ export default {
         getAgencies({ commit }) {
             axios
                 .get('/api/agency')
-                .then((result) => commit('setAgencies', result.data))
+                .then((result) => {
+                    //console.log('Agencies')
+                    //console.log(result)
+                    commit('setAgencies', result.data)
+                })
                 .catch(console.error)
         },
         getAgency({ commit }, id) {