Added Forgot Password Feature

package-lock.json

         "randomfill": "^1.0.3"
       }
     },
+    "crypto-js": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.0.0.tgz",
+      "integrity": "sha512-bzHZN8Pn+gS7DQA6n+iUmBfl0hO5DJq++QP3U6uTucDtk/0iGpXd/Gg7CGR0p8tJhofJyaKoWBuJI4eAO00BBg=="
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
       "integrity": "sha512-TigfiZUs7SN3Z6uxKilqJUtYxte8vp0F4QxabCli6hkKPqU97JzAZc3P7AL6omkRAd2DMI26fOrIGjuALTvXww==",
       "dev": true
     },
+    "vue-cryptojs": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/vue-cryptojs/-/vue-cryptojs-2.1.5.tgz",
+      "integrity": "sha512-bllwNCd+jgQ6MOnhXuv+zMwisS7A+h7juFOJQjfrLlSo/Ld7/DTYlGS7OgYAW8bI3DZG3F6otE0iqKseVR2dlQ==",
+      "requires": {
+        "crypto-js": "^4.0.0"
+      }
+    },
     "vue-currency-input": {
       "version": "1.22.3",
       "resolved": "https://registry.npmjs.org/vue-currency-input/-/vue-currency-input-1.22.3.tgz",

package.json

     "v-file-upload": "^3.1.7",
     "vue": "^2.6.11",
     "vue-carousel": "^0.18.0",
+    "vue-cryptojs": "^2.1.5",
     "vue-currency-input": "^1.22.3",
     "vue-disable-autocomplete": "0.0.4",
     "vue-eva-icons": "^1.1.1",

src/components/shared/navBar.vue

                       <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/status/list">Status</router-link>
                       </li>-->
-                      <li v-if="ROLE === 'Super Admin'" class="menu-has-children">
+                      <li class="menu-has-children">
                         <div
                           @mouseover="submenu1Class = 'ts-display'"
                           @mouseleave="submenu1Class = 'no-display'"

src/components/timeshare/faqPage.vue

               <div id="collapse5" class="panel-collapse collapse">
                 <div class="panel-body">
                   You can complete the on-line details which you will find under the “To Sell” tab.
-                  There will be a listing fee payable of R380 including VAT. The details submitted
-                  will go through a verification process. Subject to there being no complications,
-                  the listing will be processed and published.<br /><br />
+                  There will be a listing fee payable of R{{ getListingFee.amount }} including VAT.
+                  The details submitted will go through a verification process. Subject to there
+                  being no complications, the listing will be processed and published.<br /><br />
                 </div>
               </div>
             </div>
               <div id="collapse7" class="panel-collapse collapse">
                 <div class="panel-body">
                   Through Uni-Vate Properties your week will be marketed extensively to all of their
-                  available channels. Uni-Vate will only charge a listing Fee of R380 including VAT
-                  which is due when listing.<br /><br />
+                  available channels. Uni-Vate will only charge a listing Fee of R{{
+                    getListingFee.amount
+                  }}
+                  including VAT which is due when listing.<br /><br />
                 </div>
               </div>
             </div>
 <script>
 import AOS from "aos";
 import "aos/dist/aos.css";
+import { mapGetters } from "vuex";
 export default {
   created() {
     AOS.init;
+  },
+  computed: {
+    ...mapGetters("fees", ["getListingFee"])
   }
 };
 </script>

src/components/user/forgotPassword.vue

+<template>
+  <main id="main" style="padding-top:10px; padding-bottom:50px">
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          <div class="section-header">
+            <h2>Forgot Password</h2>
+          </div>
+        </div>
+      </div>
+      <div class="row mb-4">
+        <div class="col">
+          <alert :text="message" :type="status" />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6">
+          <float-label>
+            <input v-model="email" type="text" placeholder="EMAIL" class="form-control uniInput" />
+          </float-label>
+        </div>
+      </div>
+      <div class="row mt-2">
+        <div class="col-md-6">
+          <button class="btn-solid-blue" @click="checkMail()">SEND</button>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+/* eslint-disable */
+
+import alert from "../shared/alert";
+
+export default {
+  components: {
+    alert
+  },
+  data() {
+    return {
+      email: "",
+      message: "",
+      status: ""
+    };
+  },
+  methods: {
+    ...mapActions("register", ["forgotPasswordCheck"]),
+    checkMail() {
+      this.forgotPasswordCheck(this.email)
+        .then(res => {
+          this.message = "An email has been sent with instructions to reset your password.";
+          this.status = "SUCCESS";
+        })
+        .catch(e => {
+          this.message = "The email was not found";
+          this.status = "ERROR";
+        });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/user/forgotPasswordReset.vue

+<template>
+  <main id="main" style="margin-top:200px; padding-bottom:50px">
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          <div class="section-header">
+            <h2>Reset Password</h2>
+          </div>
+        </div>
+      </div>
+      <div v-if="validLink">
+        <div v-if="invalidToken">
+          <div class="row mb-4">
+            <div class="col">
+              <alert
+                :text="
+                  'This link has been used previously to update your password, please request a new one'
+                "
+                :type="'ERROR'"
+              />
+            </div>
+          </div>
+        </div>
+        <div v-else>
+          <div class="row mb-4">
+            <div class="col">
+              <alert :text="message" :type="status" />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-6">
+              <input
+                v-model="password"
+                type="password"
+                class="form-control uniInput"
+                placeholder="PASSWORD"
+              />
+            </div>
+            <div class="col-md-6">
+              <input
+                v-model="confirmPass"
+                type="password"
+                class="form-control uniInput"
+                placeholder="CONFIRM PASSWORD"
+              />
+            </div>
+          </div>
+          <div class="row mt-4">
+            <div class="col">
+              <button @click="pushToApi" class="btn-solid-blue">
+                UPDATE PASSWORD
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <div class="row mb-4">
+          <div class="col">
+            <alert
+              :text="'This link is old. Please request a new link to update your password.'"
+              :type="'ERROR'"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import axios from "axios";
+import alert from "../shared/alert";
+
+export default {
+  components: {
+    alert
+  },
+  data() {
+    return {
+      timeDiff: 0,
+      validLink: false,
+      mail: "",
+      confirmPass: "",
+      password: "",
+      passwordType: "password",
+      passwordIcon: "eye-slash",
+      passwordConfirmType: "password",
+      passwordConfirmIcon: "eye-slash",
+      message: "",
+      status: "",
+      invalidToken: false
+    };
+  },
+  created() {
+    this.getTimeFromToken();
+  },
+  methods: {
+    pushToApi() {
+      if (this.password === this.confirmPass) {
+        var userObj = {
+          email: this.mail,
+          password: this.password
+        };
+        axios.put("api/register/passwordUpdate", userObj).then(() => {
+          this.message = "Password Updated, you can now Log in";
+          this.status = "SUCCESS";
+          setTimeout(() => {
+            this.$router.push("/user/login");
+          }, 2000);
+        });
+      } else {
+        this.message = "Passwords do not match";
+        this.status = "ERROR";
+        //console.log("Passwords do not match");
+      }
+    },
+    getTimeFromToken() {
+      var decryptedBase64 = this.decrypt();
+      var bytes = [];
+      for (let index = 0; index < atob(decryptedBase64).length; index++) {
+        var code = atob(decryptedBase64).charCodeAt(index);
+        bytes = bytes.concat([code & 0xff, (code / 256) >>> 0]);
+      }
+      var decryptedAll = bytes.join();
+      var timeArr = [];
+      var mailArr = [];
+      for (let i = 0; i < bytes.length; i++) {
+        if (bytes[i] === 0) {
+          bytes.splice(i, 1);
+        }
+      }
+
+      for (let index = 0; index < bytes.length; index++) {
+        if (index < 16) {
+          timeArr.push(bytes[index]);
+        }
+      }
+
+      for (let index = 32; index < bytes.length; index++) {
+        mailArr.push(bytes[index]);
+      }
+
+      this.byteArrayToMail().then(res => {
+        this.mail = res;
+      });
+
+      var Tokendate = new Date(this.byteArrayToLong(timeArr));
+      var d = new Date();
+      var date = new Date(d.getTime());
+      var upperDate = new Date(Tokendate.setHours(Tokendate.getHours() + 2));
+
+      if (date < upperDate) {
+        this.validLink = true;
+      } else {
+        console.log("Link is old");
+      }
+    },
+
+    async byteArrayToMail() {
+      var token = await this.setToken();
+      var fptokenObj = {
+        token: token
+      };
+
+      //getting email from API by searching using the forgot Password token; then decription
+      //of the string is not constant.
+      const result = await axios.post("api/register/fptoken", fptokenObj);
+      if (result.status === 200) {
+        var mail = result.data.email;
+        return mail;
+      } else {
+        this.invalidToken = true;
+      }
+
+      // for (var i = 0; i < byteArr.length; i++) {
+      //   result += String.fromCharCode(parseInt(byteArr[i]))
+      // }
+      //return result
+    },
+    async setToken() {
+      return this.$route.params.token;
+    },
+    byteArrayToLong(byteArray) {
+      var length = byteArray.length;
+
+      var result = "";
+      for (var i = 0; i < length; i++) {
+        result += String.fromCharCode(parseInt(byteArray[i]));
+      }
+      var finResult = result.replace(",", ".");
+
+      result = parseFloat(finResult);
+      return result;
+    },
+    decrypt() {
+      const searchRegExp = /!/g;
+      var actualEncryptStr = this.$route.params.token.replace(searchRegExp, "/");
+      var key = "EGV~A8pn;:9&zC]6";
+
+      //Creating the Vector Key
+      var iv = this.$CryptoJS.enc.Hex.parse("e84ad660c4721ae0e84ad660c4721ae0");
+
+      //Encoding the Password in from UTF8 to byte array
+      var Pass = this.$CryptoJS.enc.Utf8.parse(key);
+
+      //Encoding the Salt in from UTF8 to byte array
+      var Salt = this.$CryptoJS.enc.Utf8.parse("insight123resultxyz");
+
+      //Creating the key in PBKDF2 format to be used during the decryption
+      var key128Bits1000Iterations = this.$CryptoJS.PBKDF2(
+        Pass.toString(this.$CryptoJS.enc.Utf8),
+        Salt,
+        { keySize: 128 / 32, iterations: 1000 }
+      );
+
+      //Enclosing the test to be decrypted in a CipherParams object as supported by the CryptoJS libarary
+      var cipherParams = this.$CryptoJS.lib.CipherParams.create({
+        ciphertext: this.$CryptoJS.enc.Base64.parse(actualEncryptStr)
+      });
+
+      //Decrypting the string contained in cipherParams using the PBKDF2 key
+      var decrypted = this.$CryptoJS.AES.decrypt(cipherParams, key128Bits1000Iterations, {
+        mode: this.$CryptoJS.mode.CBC,
+        iv: iv,
+        padding: this.$CryptoJS.pad.Pkcs7
+      });
+
+      return decrypted.toString(this.$CryptoJS.enc.Utf8);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/user/loginPage.vue

                 <div class="card card-signin my-5">
                   <div class="card-body">
                     <h3 class="card-title text-center">Login</h3>
-
                     <div v-if="error">
                       <alert
                         :text="'User doesn\'t exist or Username and Password is incorrect'"
                         >Remember password?</label
                       >
                     </div>
+
                     <button v-on:click="Login()" class="btn-solid-blue" type="submit">
                       LOGIN
                     </button>
+                    <router-link style="float:right" to="/user/forgotPassword"
+                      >Forgot Password?</router-link
+                    >
                   </div>
                 </div>
               </div>

src/components/user/registerIndividual.vue

           <input
             type="text"
             id="inputName"
-            v-model="registerIndividual.name"
+            v-model="indivUser.name"
             class="form-control uniInput my-2"
             placeholder="Name"
             required
           <input
             type="text"
             id="inputSurname"
-            v-model="registerIndividual.surname"
+            v-model="indivUser.surname"
             class="form-control uniInput my-2"
             placeholder="Surname"
             required
           <input
             type="email"
             id="inputEmail"
-            v-model="registerIndividual.email"
+            v-model="indivUser.email"
             class="form-control uniInput my-2"
             placeholder="Email"
             required
           <input
             type="text"
             id="inputCellphone"
-            v-model="registerIndividual.cellNumber"
+            v-model="indivUser.cellNumber"
             class="form-control uniInput my-2"
             placeholder="Cellphone Number"
             required
           <input
             type="text"
             id="inputLandLine"
-            v-model="registerIndividual.telephone"
+            v-model="indivUser.telephone"
             class="form-control uniInput my-2"
             placeholder="Landline Number"
             required
           <input
             type="text"
             id="inputUsername"
-            v-model="registerIndividual.username"
+            v-model="indivUser.username"
             class="form-control uniInput my-2"
             placeholder="Username"
             required
           <input
             type="password"
             placeholder="Password "
-            v-model="registerIndividual.password"
+            v-model="indivUser.password"
             id="inputPassword"
             class="form-control uniInput my-2"
             required
           <input
             type="password"
             placeholder="Confirm Password"
-            v-model="registerIndividual.confirmpassword"
+            v-model="indivUser.confirmpassword"
             id="inputPasswordConfirm"
             class="form-control uniInput my-2"
             required
             ><router-link to="/termsConditionsView">Terms & Conditions</router-link></label
           >
 
-          <input
-            name="tc"
-            type="checkbox"
-            class="ml-3 mt-2"
-            v-model="registerIndividual.acceptedTerms"
-          />
+          <input name="tc" type="checkbox" class="ml-3 mt-2" v-model="terms" />
         </div>
       </div>
-
       <button
-        v-if="registerIndividual.acceptedTerms"
+        :disabled="isDisabled"
         v-on:click="SubmitData()"
-        class="btn-solid-blue"
+        :class="isDisabled ? 'btn-disabled' : 'btn-solid-blue'"
         type="submit"
       >
         SUBMIT
       textErrors: "Some error with the field",
       text: "",
       showPassword: false,
-      boolMessage: false
+      boolMessage: false,
+      terms: false,
+      indivUser: {}
     };
   },
   computed: {
     ...mapState("register", ["registerIndividual"]),
     Header() {
       return this.RegisterHeader ? "Agency Administrator Details" : "Private Individual";
+    },
+    isDisabled: function() {
+      return !this.terms;
     }
   },
   methods: {
       this.isPasswordShown = "password";
     },
     SubmitData() {
-      this.saveIndividual(this.registerIndividual)
+      this.indivUser.acceptedTerms = this.terms;
+      this.saveIndividual(this.indivUser)
         .then(res => {
           this.boolMessage = true;
           setTimeout(() => {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<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/updateProfileInfo.vue

               placeholder="CELL NUMBER"
               data-rule="minlen:4"
               data-msg="Please enter your cell number"
-              v-model="individual.cellNumner"
+              v-model="individual.cellNumber"
             />
           </float-label>
 

src/main.js

 import VueSocialSharing from "vue-social-sharing";
 import VueCurrencyInput from "vue-currency-input";
 import VueFloatLabel from "vue-float-label";
+import VueCryptojs from "vue-cryptojs"
 
 Vue.use(VueSocialSharing);
 Vue.use(EvaIcons);
 Vue.use(Vuetify);
 Vue.use(VueFloatLabel);
+Vue.use(VueCryptojs)
 
 Vue.use(VueGoogleMaps, {
   load: {

src/router/index.js

 import PrivateIndividual from "../components/user/registerPage.vue";
 import Agency from "../components/user/registerAgencySection.vue";
 import UpdateInfo from "../components/user/updateProfileInfo.vue";
+import ForgotPassword from '../components/user/forgotPassword.vue';
+import ForgotPasswordReset from '../components/user/forgotPasswordReset.vue'
 
 import PropertySearch from "../components/property/propertySearchPage.vue";
 import PropertyPage from "../components/property/propertyPage.vue";
         ...route.params
       }),
       component: MyWeeksEdit
-    }
+    },
+    {
+      path: "/user/forgotPassword",
+      name: "forgotPassword",
+      component: ForgotPassword
+    },
+    {
+      path: "/forgotPasswordReset/:token",
+      name: "ForgotPasswordReset",
+      component: ForgotPasswordReset,
+    },
   ]
 });

src/store/modules/user/register.js

 /* eslint-disable */
 import axios from "axios";
+import promise from "core-js/fn/promise";
 
 export default {
   namespaced: true,
         email: "",
         cellNumber: "",
         username: "",
-        password: ""
+        password: "",
+        acceptedTerms: false
       };
     },
     clearAgency(state) {
   },
   getters: {},
   actions: {
+    async forgotPasswordCheck({commit}, mail){
+      const response = await axios.post('api/register/forgotPassword/'+ mail)
+      if(response.status === 200){
+        return Promise.resolve()
+      }else{
+        return Promise.reject()
+      }
+    },
     getIndividuals({ commit }) {
       axios
         .get("/api/individual")