Registration from Front End

src/components/user/loginPage.vue

       this.showPassword = false;
       this.isPasswordShown = 'password';
     },
+    // authHeader() {
+    //   const user = JSON.parse(localStorage.getItem('user'));
+
+    //   if (user && user.token) {
+    //     return { Authoriztion: `Bearer ${user.token}` };
+    //   }
+    //   return {};
+    // },
   },
 };
 </script>

src/components/user/registerAgencySection.vue

           <h4>Agency Details</h4>
           <div class="col-md-8" style="margin-bottom: 1em">
             <eva-icon name="people" fill="#60CBEB"></eva-icon>
-            <input class="form-control" type="text" name="agencyname" placeholder="Agency Name" />
+            <input
+              class="form-control"
+              type="text"
+              name="agencyname"
+              placeholder="Agency Name"
+              v-model="registerAgency.name"
+            />
           </div>
           <div class="col-md-8" style="margin-bottom: 1em">
             <eva-icon name="book" fill="#60CBEB"></eva-icon>
               type="text"
               name="eaabffcnumber"
               placeholder="EAAB FFC Number"
+              v-model="registerAgency.eaabeffcNumber"
             />
           </div>
           <div class="col-md-8">
               type="text"
               name="companyregnumber"
               placeholder="Company Registration Number"
+              v-model="registerAgency.companyRegNumber"
             />
           </div>
           <hr />
             <div class="row" style="text-align:left">
               <div class="col-md-6" style="margin-bottom: 1em">
                 <eva-icon name="person" fill="#60CBEB"></eva-icon>
-                <input class="form-control" type="text" name="name" placeholder="Name" />
+                <input
+                  class="form-control"
+                  type="text"
+                  name="name"
+                  placeholder="Name"
+                  v-model="registerAgency.user.name"
+                />
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <eva-icon name="person" fill="#60CBEB"></eva-icon>
-                <input class="form-control" type="text" name="surname" placeholder="Surname" />
+                <input
+                  class="form-control"
+                  type="text"
+                  name="surname"
+                  placeholder="Surname"
+                  v-model="registerAgency.user.surname"
+                />
               </div>
             </div>
 
             <div class="row" style="text-align:left">
               <div class="col-md-8">
                 <eva-icon name="email" fill="#60CBEB"></eva-icon>
-                <input class="form-control" type="text" name="email" placeholder="Email Address" />
+                <input
+                  class="form-control"
+                  type="text"
+                  name="email"
+                  placeholder="Email Address"
+                  v-model="registerAgency.user.email"
+                />
                 <div class="form-group row"></div>
               </div>
 
                   type="text"
                   name="cellnumber"
                   placeholder="Contact Number"
+                  v-model="registerAgency.user.cellNumber"
                 />
               </div>
             </div>
             <div class="row">
               <div class="col-md-7" style="margin-bottom: 1em">
                 <eva-icon name="person" fill="#60CBEB"></eva-icon>
-                <input class="form-control" type="text" name="username" placeholder="Username" />
+                <input
+                  class="form-control"
+                  type="text"
+                  name="username"
+                  placeholder="Username"
+                  v-model="registerAgency.user.username"
+                />
               </div>
               <div class="col-md-7" style="margin-bottom: 1em">
                 <eva-icon name="lock" fill="#60CBEB"></eva-icon>
                 <input
                   class="form-control"
                   :type="isPasswordShown"
-                  v-model="password"
+                  v-model="registerAgency.user.password"
                   id="password"
                   placeholder="Password"
                   name="password"
                 <input
                   class="form-control"
                   :type="isPasswordShown"
-                  v-model="password"
+                  v-model="registerAgency.user.password"
                   id="password"
                   placeholder="Confirm Password"
                   name="confirmpassword"
           <div class="form-group row"></div>
           <div class="row offset-md-1">
             <div class="col-md-2">
-              <button class="btn btn-b-n" type="submit">Submit</button>
+              <button @click="SubmitData()" class="btn btn-b-n" type="button">Submit</button>
             </div>
             <div class="col-md-2 offset-md-1">
-              <button class="btn btn-b-n" type="submit">Cancel</button>
+              <button @click="Cancel()" class="btn btn-b-n" type="button">Cancel</button>
             </div>
           </div>
         </div>
 </template>
 
 <script>
-import RegisterPage from './registerPage.vue';
+import { mapState, mapActions } from 'vuex';
+// import RegisterPage from './registerPage.vue';
 
 export default {
-  data() {
-    return {
-      RegisterHeader: 'Agency Administrator Details',
-    };
-  },
+  // data() {
+  //   return {
+  //     RegisterHeader: 'Agency Administrator Details',
+  //   };
+  // },
   name: 'Agency',
-  components: { RegisterPage },
+  // components: { RegisterPage },
   data() {
     return {
-      username: '',
       user: null,
       isPasswordShown: 'password',
       selectItems: [{ text: 'password', value: 0 }],
       textErrors: 'Some error with the field',
       text: '',
       showPassword: false,
-      password: '',
     };
   },
+  computed: {
+    ...mapState('registerAgency', ['registerAgency']),
+  },
   methods: {
+    ...mapActions('registerAgency', [
+      'getAgency',
+      'saveAgency',
+      'updateAgency',
+      'clearAgency',
+    ]),
+
     togglePassword() {
       this.showPassword = true;
       this.isPasswordShown = 'text';
       this.showPassword = false;
       this.isPasswordShown = 'password';
     },
+    SubmitData() {
+      this.saveAgency(this.registerAgency);
+      this.$router.push('/registerAgency/');
+    },
+    Close() {
+      this.$router.push('/registerAgency/');
+    },
   },
 };
 </script>

src/components/user/registerPage.vue

           <div class="row" style="text-align:left">
             <div class="col-md-6" style="margin-bottom: 1em">
               <eva-icon name="person" fill="#60CBEB"></eva-icon>
-              <input class="form-control" type="text" name="name" placeholder="Name" />
+              <input
+                class="form-control"
+                type="text"
+                name="name"
+                placeholder="Name"
+                v-model="registerIndividual.name"
+              />
             </div>
             <div class="col-md-6" style="margin-bottom: 1em">
               <eva-icon name="person" fill="#60CBEB"></eva-icon>
-              <input class="form-control" type="text" name="surname" placeholder="Surname" />
+              <input
+                class="form-control"
+                type="text"
+                name="surname"
+                placeholder="Surname"
+                v-model="registerIndividual.surname"
+              />
             </div>
           </div>
 
           <div class="row" style="text-align:left">
             <div class="col-md-8">
               <eva-icon name="email" fill="#60CBEB"></eva-icon>
-              <input class="form-control" type="text" name="email" placeholder="Email Address" />
+              <input
+                class="form-control"
+                type="text"
+                name="email"
+                placeholder="Email Address"
+                v-model="registerIndividual.email"
+              />
               <div class="form-group row"></div>
             </div>
 
                 type="text"
                 name="cellnumber"
                 placeholder="Contact Number"
+                v-model="registerIndividual.cellNumber"
               />
             </div>
           </div>
           <div class="row">
             <div class="col-md-7" style="margin-bottom: 1em">
               <eva-icon name="person" fill="#60CBEB"></eva-icon>
-              <input class="form-control" type="text" name="username" placeholder="Username" />
+              <input
+                class="form-control"
+                type="text"
+                name="username"
+                placeholder="Username"
+                v-model="registerIndividual.username"
+              />
             </div>
             <div class="col-md-7" style="margin-bottom: 1em">
               <eva-icon name="lock" fill="#60CBEB"></eva-icon>
               <input
                 class="form-control"
                 :type="isPasswordShown"
-                v-model="password"
+                v-model="registerIndividual.password"
                 id="password"
                 placeholder="Password"
                 name="password"
               <input
                 class="form-control"
                 :type="isPasswordShown"
-                v-model="password"
+                v-model="registerIndividual.password"
                 id="password"
                 placeholder="Confirm Password"
                 name="confirmpassword"
         <div class="form-group row"></div>
         <div class="row offset-md-1">
           <div class="col-md-2">
-            <button class="btn btn-b-n" type="submit">Submit</button>
+            <button @click="SubmitData()" class="btn btn-b-n" type="submit">Submit</button>
           </div>
           <div class="col-md-2 offset-md-1">
-            <button class="btn btn-b-n" type="submit">Cancel</button>
+            <button @click="Cancel()" class="btn btn-b-n" type="submit">Cancel</button>
           </div>
         </div>
       </div>
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex';
+
 export default {
   props: {
     RegisterHeader: { type: String, default: undefined },
   name: 'PrivateIndividual',
   data() {
     return {
-      username: '',
       user: null,
       isPasswordShown: 'password',
       selectItems: [{ text: 'password', value: 0 }],
       textErrors: 'Some error with the field',
       text: '',
       showPassword: false,
-      password: '',
     };
   },
   computed: {
+    ...mapState('registerIndividual', ['registerIndividual']),
+
     Header() {
       return this.RegisterHeader
         ? 'Agency Administrator Details'
     },
   },
   methods: {
+    ...mapActions('registerIndividual', [
+      'getIndividual',
+      'saveIndividual',
+      'updateIndividual',
+      'clearIndividual',
+    ]),
+
     togglePassword() {
       this.showPassword = true;
       this.isPasswordShown = 'text';
       this.showPassword = false;
       this.isPasswordShown = 'password';
     },
+    SubmitData() {
+      this.saveIndividual(this.registerIndividual);
+
+      this.$router.push('/registerIndividual/');
+    },
+    Close() {
+      this.$router.push('/registerIndividual/');
+    },
   },
 };
 </script>

src/store/index.js

 import PropertyAdminModule from './modules/property/propertyAdmin';
 import PropertyList from './modules/property/propertyLists';
 import PropertyTypes from './modules/property/propertyTypes';
+import Register from './modules/user/register';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
     propertyAdmin: PropertyAdminModule,
     propertyList: PropertyList,
     propertyTypes: PropertyTypes,
+    registerIndividual: Register,
+    registerAgency: Register,
   },
 });

src/store/modules/user/register.js

+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    registerIndividual: {
+      name: '',
+      surname: '',
+      email: '',
+      cellNumber: '',
+      username: '',
+      password: '',
+    },
+    registerAgency: {
+      name: '',
+      eaabeffcNumber: '',
+      companyRegNumber: '',
+      user: {
+        name: '',
+        surname: '',
+        email: '',
+        cellNumber: '',
+        username: '',
+        password: '',
+      },
+    },
+  },
+  mutations: {
+    setIndividual(state, type) {
+      state.registerIndividual = type;
+    },
+    setAgency(state, type) {
+      state.registerAgency = type;
+    },
+    addIndividual(state, type) {
+      state.registerIndividual = type;
+    },
+    addAgency(state, type) {
+      state.registerAgency = type;
+    },
+    updateIndividual(state, type) {
+      state.registerIndividual.find(item => item.id === type.id).username = type.username;
+      state.registerIndividual.find(item => item.id === type.id).password = type.password;
+    },
+    updateAgency(state, type) {
+      state.registerAgency.find(item => item.id === type.id).eaabeffcNumber = type
+        .eaabeffcNumber;
+      state.registerAgency.find(item => item.id === type.id).companyRegNumber = type
+        .companyRegNumber;
+    },
+    clearIndividual(state) {
+      state.registerIndividual = {
+        name: '',
+        surname: '',
+        email: '',
+        cellNumber: '',
+        username: '',
+        password: '',
+      };
+    },
+    clearAgency(state) {
+      state.registerAgency = {
+        name: '',
+        eaabeffcNumber: '',
+        companyRegNumber: '',
+        user: {
+          name: '',
+          surname: '',
+          email: '',
+          cellNumber: '',
+          username: '',
+          password: '',
+        },
+      };
+    },
+    removeIndividual(state, id) {
+      state.registerIndividual.pop(state.registerIndividual.find(p => p.id === id));
+    },
+    removeAgency(state, id) {
+      state.registerAgency.pop(state.registerAgency.find(a => a.id === id));
+    },
+  },
+  getters: {},
+  actions: {
+    // getIndividual({
+    //   commit,
+    // }, id) {
+    //   axios
+    //     .get(`http://localhost:57260/api/user/${id}`)
+    //     .then(result => commit('setIndividual', result.data))
+    //     .catch(console.error);
+    // },
+    // getAgency({
+    //   commit,
+    // }, id) {
+    //   axios
+    //     .get(`http://localhost:57260/api/agency/${id}`)
+    //     .then(result => commit('setAgency', result.data))
+    //     .catch(console.error);
+    // },
+
+    saveIndividual({
+      commit,
+    }, item) {
+      axios
+        .post('http://localhost:57260/api/register/register', item)
+        .then(result => commit('addIndividual', result.data))
+        .catch(console.error);
+    },
+    saveAgency({
+      commit,
+    }, item) {
+      axios
+        .post('http://localhost:57260/api/register/registeragency', item)
+        .then(result => commit('addAgency', result.data))
+        .catch(console.error);
+    },
+    // updateIndividual({
+    //   commit,
+    // }, item) {
+    //   axios
+    //     .put('http://localhost:57260/api/individual', item)
+    //     .then(result => commit('updateIndividual', item))
+    //     .catch(console.error);
+    // },
+    // updateAgency({
+    //   commit,
+    // }, item) {
+    //   axios
+    //     .put('http://localhost:57260/api/agency', item)
+    //     .then(result => commit('updateAgency', item))
+    //     .catch(console.error);
+    // },
+    // clearIndividual({
+    //   commit,
+    // }) {
+    //   commit('clearIndividual');
+    // },
+    // clearAgency({
+    //   commit,
+    // }) {
+    //   commit('clearAgency');
+    // },
+    // deleteIndividual({
+    //   commit,
+    // }, id) {
+    //   axios
+    //     .delete(`http://localhost:57260/api/individual/${id}`)
+    //     .then(result => commit('removeIndividual', id))
+    //     .catch(console.error);
+    // },
+    // deleteAgency({
+    //   commit,
+    // }, id) {
+    //   axios
+    //     .delete(`http://localhost:57260/api/agency/${id}`)
+    //     .then(result => commit('removeAgency', id))
+    //     .catch(console.error);
+    // },
+  },
+};