Add Validation to forms

src/components/shared/contactUsSection.vue

@@ -2,72 +2,76 @@
   <div>
     <h4 align="left" class="contactHeader">Send us a message</h4>
     <div class="form">
-      <div id="sendmessage">Your message has been sent. Thank you!</div>
-      <div id="errormessage"></div>
+      <div v-if="boolValidationError" class="row">
+        <div class="col">
+          <alert :text="errorMessage" :type="errorOccurred" />
+        </div>
+      </div>
       <div class="form-row">
         <div class="form-group col-md-6">
           <input
-            type="text"
-            name="name"
-            class="form-control"
-            id="name"
-            placeholder="Name"
-            data-rule="minlen:4"
-            data-msg="Please enter your name"
-            v-model="name"
-          />
-          <div class="validation"></div>
+              type="text"
+              id="name"
+              class="form-control"
+              v-model="name"
+              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>
         </div>
         <div class="form-group col-md-6">
           <input
-            type="email"
-            class="form-control"
-            name="email"
-            id="email"
-            placeholder="Email"
-            data-rule="email"
-            data-msg="Please enter a valid email"
-            v-model="email"
-          />
-          <div class="validation"></div>
+              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"
+              placeholder="Email"
+            />
+            <div class="invalid-feedback">Valid email address is required!</div>
         </div>
         <div class="form-group col-md-6">
           <input
             type="text"
-            name="phone"
-            class="form-control"
             id="phone"
-            placeholder="Phone"
-            data-rule="minlen:10"
-            data-msg="Please enter at least 10 numbers"
             v-model="phone"
+            class="form-control"
+            v-bind:class="{'is-valid': phone}"
+            placeholder="Phone Number"
           />
-          <div class="validation"></div>
         </div>
         <div class="form-group col-md-6">
           <input
             type="text"
-            class="form-control"
-            name="property"
             id="property"
-            placeholder="Property"
-            data-msg="Please enter the property you are interested in"
             v-model="property"
+            class="form-control"
+            v-bind:class="{'is-valid': property}"
+            placeholder="Property"
           />
-          <div class="validation"></div>
         </div>
       </div>
       <div class="form-group">
+
         <textarea
-          class="form-control"
-          name="message"
+          type="text"
+          id="message"
           rows="5"
-          data-rule="required"
-          data-msg="Please write something for us"
-          placeholder="Message"
+          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="validation"></div>
+        <div class="invalid-feedback">Message is required!</div>
       </div>
       <div class="text-center">
         <button class="btn-solid-blue" @click="sendMail()">SEND</button>
@@ -96,7 +100,13 @@ export default {
       phone: null,
       property: null,
       message: null,
-      boolSent: false
+      boolSent: false,
+      errorOccurred: "",
+      errorMessage: "",
+      boolValidationError: false,
+      nameLoad: false,
+      emailLoad: false,
+      messageLoad: false
     };
   },
   mounted() {
@@ -104,29 +114,79 @@ export default {
   },
   methods: {
     async sendMail() {
-      var mailObj = {
-        //toAddress: "abigaildf@provision-sa.com",
-        //fromAddress: "jlouw365@gmail.com",
-        name: this.name,
-        email: this.email,
-        phone: this.phone,
-        property: this.property,
-        message: this.message
-      };
+      if (this.validatePage()) {
+        var mailObj = {
+          name: this.name,
+          email: this.email,
+          phone: this.phone,
+          property: this.property,
+          message: this.message
+        };
 
-      const response = await axios.post("/api/mail/0", mailObj);
-
-      if (response.status === 200) {
-        this.boolSent = true;
-      } else {
-        console.log("Error");
+      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;
+                }
+              } else {
+                console.log('no err')
+                boolSent = false;
+              }
+        })
       }
     },
     countDownChanged(dismissCountDown) {
       this.dismissCountDown = dismissCountDown;
+    },
+    validatePage : function(){
+      //console.log('validatePage')
+      if (this.name && this.email){
+        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;
+      }
+    },
+    requiredField : function(tfield) {
+      if(tfield){
+        return true;
+      } else {
+        return false;
+      }
+    },
+    validEmail : function(temail) {
+        var re = /(.+)@(.+){2,}\.(.+){2,}/;
+        return re.test(temail);
     }
   }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.form input{
+  text-transform: none;
+}
+</style>

src/components/user/loginPage.vue

@@ -161,8 +161,8 @@ export default {
           }
         })
         .catch(err => {
-          console.log("Catch here");
-          console.log(this.status);
+          //console.log("Catch here");
+          //console.log(this.status);
           this.errorOccurred = "ERROR";
           this.errorMessage = "Server Error: CONNECTION_REFUSED"; 
           console.log(err.status);

src/components/user/registerAgencySection.vue

@@ -1,179 +1,243 @@
 <template>
-  <div class="col-10 mx-auto">
-    <h3 class="card-title text-center">Agency Details</h3>
-    <div class="row my-3">
-      <div class="col-sm-12 col-md-6">
-        <input
-          type="text"
-          id="inputAgencyName"
-          v-model="registerAgency.name"
-          class="form-control uniInput"
-          placeholder="Agency Name"
-          required
-          autofocus
-        />
+  <main id="main" style="padding-top:10px; padding-bottom:50px">
+    <div class="container">
+      <div v-if="boolMessage" class="row">
+        <div class="col">
+          <alert :text="'Register Success!'" :type="'SUCCESS'" />
+        </div>
       </div>
-      <div class="col-sm-12 col-md-6">
-        <input
-          type="text"
-          id="inputAgencyNumber"
-          v-model="registerAgency.eaabeffcNumber"
-          class="form-control uniInput"
-          placeholder="EAAB FFC Number"
-          required
-          autofocus
-        />
+      <div v-if="boolValidationError" class="row">
+        <div class="col">
+          <alert :text="errorMessage" :type="errorOccurred" />
+        </div>
       </div>
-    </div>
-    <div class="row my-3">
-      <div class="col-sm-12">
-        <input
-          type="text"
-          id="inputAgencyCompanyRegistration"
-          v-model="registerAgency.companyRegNumber"
-          class="form-control uniInput"
-          placeholder="Company Registration Number"
-          required
-          autofocus
-        />
-      </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">
-        <input
-          type="text"
-          id="inputAgencyAdmin"
-          v-model="registerAgency.user.name"
-          class="form-control uniInput my-3"
-          placeholder="Name"
-          required
-          autofocus
-        />
-
-        <input
-          type="text"
-          id="inputAgencySurname"
-          v-model="registerAgency.user.surname"
-          class="form-control uniInput my-3"
-          placeholder="Surname"
-          required
-          autofocus
-        />
-
-        <input
-          type="email"
-          id="inputAgencyEmail"
-          v-model="registerAgency.user.email"
-          class="form-control uniInput my-3"
-          placeholder="Email"
-          required
-          autofocus
-        />
+      <h3 class="card-title text-center">Agency Details</h3>
+      <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>
+          </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>
+          </div>
+        </div>
       </div>
-      <div class="col-sm-12 col-md-6">
-        <input
-          type="text"
-          id="inputAgencyCellphone"
-          v-model="registerAgency.user.cellNumber"
-          class="form-control uniInput my-3"
-          placeholder="Cellphone Number"
-          required
-          autofocus
-        />
-
-        <input
-          type="text"
-          id="inputAgencyLandLine"
-          v-model="registerAgency.user.telephone"
-          class="form-control uniInput"
-          placeholder="Landline Number"
-          required
-          autofocus
-        />
+      <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>
+       </div>
       </div>
-    </div>
-    <hr />
-    <div class="row my-3">
-      <div class="col-sm-12">
-        <input
-          type="text"
-          id="inputAgencyUsername"
-          v-model="registerAgency.user.username"
-          class="form-control uniInput"
-          placeholder="Username"
-          required
-          autofocus
-        />
+      <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>
+          </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>
+          </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>
+          </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>
+          </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"
+            />
+          </div>
+        </div>
       </div>
-    </div>
-    <div class="row my-3">
-      <div class="col-sm-12 col-md-6">
-        <input
-          type="password"
-          placeholder="Password"
-          v-model="registerAgency.user.password"
-          id="inputAgencyPassword uniInput"
-          class="form-control uniInput"
-          required
-        />
+      <hr />
+      <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>
+          </div>
+        </div>
       </div>
-      <div class="col">
-        <input
-          type="password"
-          placeholder="Confirm Password"
-          v-model="registerAgency.user.password"
-          id="inputAgencyPasswordConfirm"
-          class="form-control uniInput"
-          required
-        />
+      <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>
+          </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>
+          </div>
+        </div>
       </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="registerAgency.user.acceptedTerms"
-        />
+      <div class="row">
+        <div class="col">
+          <label for="agencytc"
+            ><router-link to="/termsConditionsView">Terms & Conditions</router-link></label
+          >
+          <input
+            name="agencytc"
+            type="checkbox"
+            class="ml-3 mt-2"
+            v-model="registerAgency.user.acceptedTerms"
+          />
+        </div>
       </div>
-    </div>
-    <button
+      <button
         v-if="registerAgency.user.acceptedTerms"
-        :disabled="isDisabled"
+        class="btn-white-border"
         v-on:click="SubmitData()"
-        :class="isDisabled ? 'btn-disabled' : 'btn-solid-blue'"
         type="submit"
-    >
+      >
       SUBMIT
-    </button>
-    <button
+      </button>
+      <button
       :data-target="'#myModalAgency'"
       data-toggle="modal"
       @click="navigate()"
       class="btn-white-border mb-5"
       style="float:right"
       type="submit"
-    >
+      >
       Cancel
-    </button>
-    <button hidden :data-target="'#myModalAgency'" data-toggle="modal" ref="dataToggle"></button>
-  </div>
+      </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";
 export default {
   components: {
-    carousel
+    carousel,
+    alert
   },
   props: {
     RegisterHeader: { type: String, default: undefined }
@@ -181,18 +245,30 @@ export default {
   name: "Agency",
   data() {
     return {
-      user: null,
       isPasswordShown: "password",
       selectItems: [{ text: "password", value: 0 }],
-      selectErrors: "Some error with the field",
-      select: null,
-      textErrors: "Some error with the field",
-      text: "",
-      showPassword: false
+      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,
+      errorOccurred: "",
+      errorMessage: ""
     };
   },
   computed: {
-    ...mapState("register", ["registerAgency"])
+    ...mapState("register", ["registerAgency"]),
+    Header() {
+      return this.RegisterHeader ? "Agency Administrator Details" : "Private Individual";
+    }
   },
   methods: {
     ...mapActions("register", ["getAgency", "saveAgency", "updateAgency", "clearAgency"]),
@@ -201,10 +277,6 @@ export default {
         this.$router.push("/user/login");
       }
     },
-    routerGoTo(goTo) {
-      this.$emit("routerGoTo", goTo);
-    },
-
     togglePassword() {
       this.showPassword = true;
       this.isPasswordShown = "text";
@@ -214,21 +286,92 @@ export default {
       this.isPasswordShown = "password";
     },
     SubmitData() {
-      this.saveAgency(this.registerAgency).then(() => {
-        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();
+      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"; 
+
+          if (err) {
+            if (err.data.message) {
+              this.errorMessage = err.data.message;
+            } else {
+              this.errorMessage = "Error."
+            }
           }
-        }, 500);
-      });
-      //this.$router.push("/user/login");
+        });
+      }
     },
     Close() {
       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;
+      } 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;
+      }
+    },
+    requiredField : function(tfield) {
+      if(tfield){
+        return true;
+      } else {
+        return false;
+      }
+    },
+    validEmail : function(email) {
+        var re = /(.+)@(.+){2,}\.(.+){2,}/;
+        return re.test(email.toLowerCase());
+    },
+    validConfirm : function(tfield) {
+      //console.log(tfield);
+      if (this.requiredField(tfield)){
+        if(tfield === this.registerAgency.user.password){
+          return true;
+        } else {
+          return false;
+        } 
+      } else {
+        return false;
+      }
     }
   }
 };

src/components/user/registerIndividual.vue

@@ -6,17 +6,13 @@
           <alert :text="'Register Success! You\'ll be redirected shortly.'" :type="'SUCCESS'" />
         </div>
       </div>
-      <div v-if="boolUserExists" class="row">
-        <div class="col">
-          <alert :text="'This username is already in use'" :type="'ERROR'" />
-        </div>
-      </div>
       <div v-if="boolValidationError" class="row">
         <div class="col">
           <alert :text="errorMessage" :type="errorOccurred" />
         </div>
       </div>
-      <div class="row needs-validation">
+      <h3 class="card-title text-center">User Details</h3>
+      <div class="row">
         <div class="col-sm-12 col-md-6 ">
           <div class="form-group">
             <b-form-input
@@ -33,7 +29,7 @@
             <div class="invalid-feedback">Name is required!</div>
           </div>
           <div class="form-group">
-            <b-form-input
+            <input
               type="text"
               id="inputSurname"
               class="form-control uniInput my-2"
@@ -82,9 +78,9 @@
             id="inputTelephone"
             v-model="indivUser.telephone"
             class="form-control uniInput my-2"
+            v-bind:class="{'is-valid': indivUser.telephone}"
             placeholder="Landline Number"
           />
-          <div class="invalid-feedback">Landline number is required!</div>
         </div>
       </div>
       <hr />
@@ -139,8 +135,12 @@
           <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" />
+          <input
+            name="tc"
+            type="checkbox"
+            class="ml-3 mt-2"
+            v-model="terms"
+            />
         </div>
       </div>
       <button
@@ -185,10 +185,6 @@ export default {
     return {
       isPasswordShown: "password",
       selectItems: [{ text: "password", value: 0 }],
-      selectErrors: "Some error with the field",
-      select: undefined,
-      textErrors: "Some error with the field",
-      text: "",
       showPassword: false,
       boolMessage: false,
       terms: false,
@@ -202,7 +198,6 @@ export default {
         password: '',
         confirmPassword: ''
       },
-      boolUserExists: false,
       boolValidationError: false,
       nameLoad: false,
       surnameLoad: false,
@@ -213,17 +208,13 @@ export default {
       passwordLoad: false,
       confirmPasswordLoad: false,
       errorOccurred: "",
-      errorMessage: "",
-      valid: false
+      errorMessage: ""
     };
   },
   computed: {
     ...mapState("register", ["registerIndividual"]),
     Header() {
       return this.RegisterHeader ? "Agency Administrator Details" : "Private Individual";
-    },
-    isDisabled: function() {
-      return !this.terms;
     }
   },
   methods: {
@@ -248,10 +239,7 @@ export default {
     },
     SubmitData() {
       this.indivUser.acceptedTerms = this.terms;
-      console.log(this.indivUser.email);
       if (this.validatePage()) {
-        console.log(this.indivUser.username);
-        if (this.indivUser.username) {
           this.saveIndividual(this.indivUser)
             .then(res => {
               this.boolMessage = true;
@@ -265,17 +253,19 @@ export default {
               }, 500);
             })
             .catch(err => {
-              console.log(err.message);
-              this.boolUserExists = true;
-            });
-        } else {
-          this.validationErrorMessage = "Username Required";
-          this.boolValidationError = true;
-        }
-      } else {
-        this.validationErrorMessage = "Email Required";
-        this.boolValidationError = true;
-      }
+              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");
@@ -283,14 +273,14 @@ export default {
     validatePage : function(){
       console.log('validatePage')
       if (this.indivUser.name && this.indivUser.surname && this.indivUser.email 
-         && this.indivUser.cellNumber && this.indivUser.telephone && this.indivUser.username && this.indivUser.password
+         && this.indivUser.cellNumber && this.indivUser.username && this.indivUser.password
          && this.indivUser.password === this.indivUser.confirmPassword){
         this.errorOccurred = '';
         this.errorMessage = '';
-        this.valid = true;
+        this.boolValidationError = false;
         return true;
       } else {
-        this.valid = false;
+        this.boolValidationError = true;
         this.nameLoad = true,
         this.surnameLoad = true,
         this.emailLoad = true,
@@ -316,10 +306,7 @@ export default {
         return re.test(email.toLowerCase());
     },
     validConfirm : function(tfield) {
-      console.log(tfield);
       if (this.requiredField(tfield)){
-        console.log(tfield);
-        console.log(this.indivUser.password);
         if(tfield === this.indivUser.password){
           return true;
         } else {

src/components/user/registerPage.vue

@@ -74,16 +74,12 @@ export default {
   props: {
     RegisterHeader: { type: String, default: undefined }
   },
-  name: "PrivateIndividual",
+  name: "RegisterPage",
   data() {
     return {
       user: undefined,
       isPasswordShown: "password",
       selectItems: [{ text: "password", value: 0 }],
-      selectErrors: "Some error with the field",
-      select: undefined,
-      textErrors: "Some error with the field",
-      text: "",
       showPassword: false
     };
   },
@@ -95,12 +91,6 @@ export default {
     }
   },
   methods: {
-    ...mapActions("register", [
-      "getIndividual",
-      "saveIndividual",
-      "updateIndividual",
-      "clearIndividual"
-    ]),
     togglePassword() {
       this.showPassword = true;
       this.isPasswordShown = "text";
@@ -109,15 +99,6 @@ export default {
       this.showPassword = false;
       this.isPasswordShown = "password";
     },
-    SubmitData() {
-      this.saveIndividual(this.registerIndividual)
-        .then(() => {
-          this.$router.push("/user/login");
-        })
-        .catch(ex => {
-          //console.log(ex);
-        });
-    },
     Close() {
       if (Log.getUser().role !== "Super Admin") {
         this.$router.push("/user/login");

src/main.js

@@ -39,7 +39,7 @@ Vue.use(IconsPlugin)
 
 Vue.use(VueGoogleMaps, {
         load: {
-            key: 'AIzaSyD8k_Kwml_C8IDfs-gX8JFV8acli3L9cAE',
+            key: 'AIzaSyBpubKVyM2HwrJreGsENtKbWd38AhNTC0w',
             libraries: 'places,directions', // This is required if you use the Autocomplete plugin
             // OR: libraries: 'places,drawing'
             // OR: libraries: 'places,drawing,visualization'
@@ -58,8 +58,7 @@ Vue.use(VueAnalytics, {
 Vue.config.productionTip = false
 axios.defaults.baseURL = 'http://localhost:57260'
     //axios.defaults.baseURL = "https://www.pvsl.co.za:86/";
-    //axios.defaults.baseURL = "http://training.provision-sa.com:120/";
-    //axios.defaults.baseURL = "http://localhost:8080/"
+    //axios.defaults.baseURL = "http://training.provision-sa.com:120/"
 
 Vue.prototype.$axios = axios
 const pluginOptions = {

src/store/modules/timeshare/timeshare.js

@@ -1,273 +1,280 @@
 /* eslint-disable guard-for-in */
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable */
-import axios from "axios";
-import _ from "lodash";
-import MyData from "../../../assets/myData";
-import MaritalStatus from "../../../assets/staticData/maritalStatus";
+import axios from 'axios'
+import _ from 'lodash'
+import MyData from '../../../assets/myData'
+import MaritalStatus from '../../../assets/staticData/maritalStatus'
 
 export default {
-  namespaced: true,
-  state: {
-    resorts: [],
-    regions: [],
-    detailedRegion: [],
-    seasons: [],
-    resortBedrooms: [],
-    maxSleep: [],
-    bankedEntities: [],
-    agencies: [],
-    agents: [],
-    timeshareFilter: "",
-    maritalStatus: MaritalStatus,
-    result: undefined,
-    latestWeeks: [],
-    sellItem: {
-      referedByAgent: false,
-      agentId: undefined,
-      agencyId: undefined,
-      otherResort: false,
-      otherResortName: undefined,
-      resort: undefined,
-      resortCode: undefined,
-      resortName: undefined,
-      regionId: undefined,
-      season: undefined,
-      module: undefined,
-      unitNumber: undefined,
-      bedrooms: undefined,
-      maxSleep: undefined,
-      weekNumber: undefined,
-      levyAmount: undefined,
-      currentYearBanked: false,
-      bankedWith: undefined,
-      leviesPaidInFull: false,
-      weekPlacedForRental: false,
-      originalPurchasePrice: undefined,
-      originalPurchaseDate: undefined,
-      arrivalDate: undefined,
-      departureDate: undefined,
-      sellPrice: undefined,
-      agentCommission: undefined,
-      mandate: undefined,
-      status: undefined,
-      owner: {
-        address: {},
-        bankingDetails: {}
-      }
-    }
-  },
-  mutations: {
-    setUnitConfigurationList(state, list) {
-      state.unitConfigurationList = list;
+    namespaced: true,
+    state: {
+        resorts: [],
+        regions: [],
+        detailedRegion: [],
+        seasons: [],
+        resortBedrooms: [],
+        maxSleep: [],
+        bankedEntities: [],
+        agencies: [],
+        agents: [],
+        timeshareFilter: '',
+        maritalStatus: MaritalStatus,
+        result: undefined,
+        latestWeeks: [],
+        sellItem: {
+            referedByAgent: false,
+            agentId: undefined,
+            agencyId: undefined,
+            otherResort: false,
+            otherResortName: undefined,
+            resort: undefined,
+            resortCode: undefined,
+            resortName: undefined,
+            regionId: undefined,
+            season: undefined,
+            module: undefined,
+            unitNumber: undefined,
+            bedrooms: undefined,
+            maxSleep: undefined,
+            weekNumber: undefined,
+            levyAmount: undefined,
+            currentYearBanked: false,
+            bankedWith: undefined,
+            leviesPaidInFull: false,
+            weekPlacedForRental: false,
+            originalPurchasePrice: undefined,
+            originalPurchaseDate: undefined,
+            arrivalDate: undefined,
+            departureDate: undefined,
+            sellPrice: undefined,
+            agentCommission: undefined,
+            mandate: undefined,
+            status: undefined,
+            owner: {
+                address: {},
+                bankingDetails: {},
+            },
+        },
     },
-    filterStore(state, input){
-      state.timeshareFilter = input
-    },
-    setAgency(state, agencies) {
-      state.agencies = agencies;
-    },
-    setAgent(state, agents) {
-      state.agents = agents;
-    },
-    setSeason(state, seasons) {
-      state.seasons = seasons;
-    },
-    setResortBedrooms(state, resortBedrooms) {
-      state.resortBedrooms = resortBedrooms;
-    },
-    setMaxSleep(state, maxSleep) {
-      state.maxSleep = maxSleep;
-    },
-    setBankedEntities(state, bankedEntities) {
-      state.bankedEntities = bankedEntities;
-    },
-    addResort(state, resorts) {
-      state.resorts = resorts;
-    },
-    addRegion(state, regions) {
-      state.regions = regions;
-    },
-    addDetailedRegion(state, detailedRegion) {
-      state.detailedRegion.push(detailedRegion);
-    },
-    changeResort(state, resort) {
-      for (const reg in state.detailedRegion) {
-        const region = state.detailedRegion[reg];
-        if (_.find(region.children, x => x.resortCode === resort.resortCode)) {
-          state.regionId = reg;
-          break;
-        }
-      }
-      state.sellItem.resortCode = resort.resortCode;
-      state.sellItem.resortName = resort.resortName;
-    },
-    displayResult(state) {
-      state.result = "Week has been added ^-^";
-    },
-    setWeekDetail(state, week) {
-      state.sellItem = week;
-    },
-    agentUpdate(state, agent) {
-      var index
-      var count = 0
-      state.agents.forEach((item) => {
-        if (item.id === agent.id) {
-          index = count
-        }
-        count++
-      })
-      Object.assign(state.agents[index], agent)
-    },
-    getLatestWeeks(state, data){
-      state.latestWeeks = data
-    }
-  },
-  getters: {
-    getRegionCode(state) {
-      return value => {
-        const reg = state.detailedRegion.find(region =>
-          region.children.some(resort => resort.resortCode === value)
-        );
-        if (reg && reg.region) {
-          return reg.region.regionCode;
-        }
-        return "";
-      };
-    },
-    getResortName(state) {
-      return value => {
-        const res = state.resorts.find(resort => resort.resortCode === value);
-        if (res) {
-          return res.resortName;
-        }
-      };
-    },
-    getLatestWeeks: (state) => state.latestWeeks
-  },
-  actions: {
-    initTimeshare({ commit, dispatch }, timeshareId) {
-      commit("setResortBedrooms", MyData.resortBedrooms);
-      commit("setMaxSleep", MyData.maxBedrooms);
-      commit("setBankedEntities", MyData.bankedEntities);
-      dispatch("getSeasons");
-      dispatch("getAgents");
-      dispatch("getAgencies");
-      dispatch("getResorts");
-      dispatch("getRegions");
-      if (timeshareId && timeshareId !== 0) {
-        dispatch("getWeekDetail", timeshareId);
-      }
-    },
-    updateFilter({commit}, input){
-      commit('filterStore', input)
-    },
-    getWeekDetail({ commit }, timeshareId) {
-      axios
-        .get(`api/timeshareweek/${timeshareId}`)
-        .then(result => {
-          commit("setWeekDetail", result.data);
-        })
-        .catch(console.error);
-    },
-    getSeasons({ commit }) {
-      axios
-        .get("/api/season")
-        .then(result => commit("setSeason", result.data))
-        .catch(console.error);
-    },
-    getAgencies({ commit }) {
-      axios
-        .get("/api/agency")
-        .then(result => commit("setAgency", result.data))
-        .catch(console.error);
-    },
-    getAgents({ commit }) {
-      axios
-        .get("/api/agent")
-        .then(result => commit("setAgent", result.data))
-        .catch(console.error);
-    },
-    getResorts({ commit }) {
-      axios
-        .get("https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/resorts/list/")
-        .then(result => {commit("addResort", result.data)
-        console.log(result.data);
-      })
-        .catch(console.error);
+    mutations: {
+        setUnitConfigurationList(state, list) {
+            state.unitConfigurationList = list
+        },
+        filterStore(state, input) {
+            state.timeshareFilter = input
+        },
+        setAgency(state, agencies) {
+            state.agencies = agencies
+        },
+        setAgent(state, agents) {
+            state.agents = agents
+        },
+        setSeason(state, seasons) {
+            state.seasons = seasons
+        },
+        setResortBedrooms(state, resortBedrooms) {
+            state.resortBedrooms = resortBedrooms
+        },
+        setMaxSleep(state, maxSleep) {
+            state.maxSleep = maxSleep
+        },
+        setBankedEntities(state, bankedEntities) {
+            state.bankedEntities = bankedEntities
+        },
+        addResort(state, resorts) {
+            state.resorts = resorts
+        },
+        addRegion(state, regions) {
+            state.regions = regions
+        },
+        addDetailedRegion(state, detailedRegion) {
+            state.detailedRegion.push(detailedRegion)
+        },
+        changeResort(state, resort) {
+            for (const reg in state.detailedRegion) {
+                const region = state.detailedRegion[reg]
+                if (
+                    _.find(region.children, (x) => x.resortCode === resort.resortCode)
+                ) {
+                    state.regionId = reg
+                    break
+                }
+            }
+            state.sellItem.resortCode = resort.resortCode
+            state.sellItem.resortName = resort.resortName
+        },
+        displayResult(state) {
+            state.result = 'Week has been added ^-^'
+        },
+        setWeekDetail(state, week) {
+            state.sellItem = week
+        },
+        agentUpdate(state, agent) {
+            var index
+            var count = 0
+            state.agents.forEach((item) => {
+                if (item.id === agent.id) {
+                    index = count
+                }
+                count++
+            })
+            Object.assign(state.agents[index], agent)
+        },
+        getLatestWeeks(state, data) {
+            state.latestWeeks = data
+        },
     },
-    getRegions({ dispatch, commit }) {
-      axios
-        .get("https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/regions/list/ZA")
-        .then(result => {
-          commit("addRegion", result.data);
-          dispatch("getDetailedRegion", result.data);
-        })
-        .catch(console.error);
+    getters: {
+        getRegionCode(state) {
+            return (value) => {
+                const reg = state.detailedRegion.find((region) =>
+                    region.children.some((resort) => resort.resortCode === value),
+                )
+                if (reg && reg.region) {
+                    return reg.region.regionCode
+                }
+                return ''
+            }
+        },
+        getResortName(state) {
+            return (value) => {
+                const res = state.resorts.find((resort) => resort.resortCode === value)
+                if (res) {
+                    return res.resortName
+                }
+            }
+        },
+        getLatestWeeks: (state) => state.latestWeeks,
     },
-    getDetailedRegion({ commit }, data) {
-      if (data) {
-        for (const r in Object.keys(data)) {
-          const region = data[r];
-          if (region !== undefined) {
+    actions: {
+        initTimeshare({ commit, dispatch }, timeshareId) {
+            commit('setResortBedrooms', MyData.resortBedrooms)
+            commit('setMaxSleep', MyData.maxBedrooms)
+            commit('setBankedEntities', MyData.bankedEntities)
+            dispatch('getSeasons')
+            dispatch('getAgents')
+            dispatch('getAgencies')
+            dispatch('getResorts')
+            dispatch('getRegions')
+            if (timeshareId && timeshareId !== 0) {
+                dispatch('getWeekDetail', timeshareId)
+            }
+        },
+        updateFilter({ commit }, input) {
+            commit('filterStore', input)
+        },
+        getWeekDetail({ commit }, timeshareId) {
             axios
-              .get(
-                `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/resorts/${region.regionCode}/`
-              )
-              .then(result =>
-                commit("addDetailedRegion", {
-                  region,
-                  children: result.data
+                .get(`api/timeshareweek/${timeshareId}`)
+                .then((result) => {
+                    commit('setWeekDetail', result.data)
                 })
-              )
-              .catch(console.error);
-          }
-        }
-      }
-    },
-    async retrieveLatestWeeks({commit}){
-      await axios.get('/api/timeshareWeek/GetLatest')
-      .then((result) => {
-        commit('getLatestWeeks', result.data)
-      })
-    },
-    onResortChange({ commit }, resort) {
-      commit("changeResort", resort);
-    },
-    async saveWeek({ commit }, week) {
-      return await new Promise((resolve, reject) => {
-        axios
-          .post("/api/timeshareweek", week)
-          .then(result => {
-            commit("setWeekDetail", result.data);
-            resolve(result.data);
-          })
-          .catch(error => {
-            if(error.response){
-              reject(error.response)
+                .catch(console.error)
+        },
+        getSeasons({ commit }) {
+            axios
+                .get('/api/season')
+                .then((result) => commit('setSeason', result.data))
+                .catch(console.error)
+        },
+        getAgencies({ commit }) {
+            axios
+                .get('/api/agency')
+                .then((result) => commit('setAgency', result.data))
+                .catch(console.error)
+        },
+        getAgents({ commit }) {
+            axios
+                .get('/api/agent')
+                .then((result) => commit('setAgent', result.data))
+                .catch(console.error)
+        },
+        getResorts({ commit }) {
+            axios
+                .get(
+                    'https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/resorts/list/',
+                )
+                .then((result) => {
+                    commit('addResort', result.data)
+                    console.log(result.data)
+                })
+                .catch(console.error)
+        },
+        getRegions({ dispatch, commit }) {
+            axios
+                .get(
+                    'https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/regions/list/ZA',
+                )
+                .then((result) => {
+                    commit('addRegion', result.data)
+                    dispatch('getDetailedRegion', result.data)
+                })
+                .catch(console.error)
+        },
+        getDetailedRegion({ commit }, data) {
+            if (data) {
+                for (const r in Object.keys(data)) {
+                    const region = data[r]
+                    if (region !== undefined) {
+                        axios
+                            .get(
+                                `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/resorts/${region.regionCode}?disabled=true`,
+                            )
+                            .then((result) =>
+                                commit('addDetailedRegion', {
+                                    region,
+                                    children: result.data,
+                                }),
+                            )
+                            .catch(console.error)
+                    }
+                }
             }
-          });
-      });
+        },
+        async retrieveLatestWeeks({ commit }) {
+            await axios.get('/api/timeshareWeek/GetLatest').then((result) => {
+                commit('getLatestWeeks', result.data)
+            })
+        },
+        onResortChange({ commit }, resort) {
+            commit('changeResort', resort)
+        },
+        async saveWeek({ commit }, week) {
+            return await new Promise((resolve, reject) => {
+                axios
+                    .post('/api/timeshareweek', week)
+                    .then((result) => {
+                        commit('setWeekDetail', result.data)
+                        resolve(result.data)
+                    })
+                    .catch((error) => {
+                        if (error.response) {
+                            reject(error.response)
+                        }
+                    })
+            })
 
-      // axios
-      //   .post('/api/timeshareweek', week)
-      //   .then(result => commit('displayResult'))
-      //   .catch(console.error);
-    },
-    getBlankWeek({ commit }) {
-      axios
-        .get("/api/timeshareweek/gettemplate")
-        .then(result => commit("setWeekDetail", result.data))
-        .catch(console.error);
+            // axios
+            //   .post('/api/timeshareweek', week)
+            //   .then(result => commit('displayResult'))
+            //   .catch(console.error);
+        },
+        getBlankWeek({ commit }) {
+            axios
+                .get('/api/timeshareweek/gettemplate')
+                .then((result) => commit('setWeekDetail', result.data))
+                .catch(console.error)
+        },
+        async updateAgent({ commit }, agent) {
+            await axios
+                .put('/api/agent', agent)
+                .then((result) => {
+                    commit('agentUpdate', result.data)
+                })
+                .catch((ex) => {
+                    console.log(ex)
+                })
+        },
     },
-    async updateAgent({commit}, agent){
-      await axios.put("/api/agent", agent)
-      .then((result) => {
-        commit("agentUpdate", result.data)
-      })
-      .catch((ex) => {
-        console.log(ex);
-      })
-    }
-  }
-};
+}

src/store/modules/user/register.js

@@ -30,6 +30,7 @@ export default {
                 telephone: '',
                 username: '',
                 password: '',
+                confirm: '',
                 role: '',
             },
         },
@@ -95,6 +96,7 @@ export default {
                     cellNumber: '',
                     username: '',
                     password: '',
+                    confirm: '',
                 },
             }
         },
@@ -122,12 +124,6 @@ export default {
                     console.log(ex.response)
                     return Promise.reject(ex.response)
                 })
-                // if(response.status === 200){
-                //   return Promise.resolve()
-                // }else{
-                //   console.log(response.response);
-                //   return Promise.reject()
-                // }
         },
         getIndividuals({ commit }) {
             axios
@@ -167,16 +163,25 @@ export default {
                     return promise.resolve()
                 })
                 .catch((ex) => {
-                    console.log(ex.response)
+                    //console.log(ex.response)
                     return promise.reject(ex.response)
                         //console.error;
                 })
         },
-        saveAgency({ commit }, item) {
-            axios
+        async saveAgency({ commit }, item) {
+            await axios
                 .post('/api/register/registeragency', item)
-                .then((result) => commit('addAgency', result.data))
-                .catch((ex) => console.log(ex.response))
+                .then((res) => {
+                    commit('addAgency', res.data)
+                    console.log(promise.resolve())
+                    console.log('Agency Added')
+                    return promise.resolve()
+                })
+                .catch((ex) => {
+                    console.log('regAgency API failed')
+                        //console.log(ex.response)
+                    return promise.reject(ex.response)
+                })
         },
         async saveAgent({ commit }, item) {
             await axios