Преглед на файлове

Registration from Front End

master
LeneS преди 5 години
родител
ревизия
fafc9a39ca
променени са 5 файла, в които са добавени 291 реда и са изтрити 28 реда
  1. 8
    0
      src/components/user/loginPage.vue
  2. 67
    18
      src/components/user/registerAgencySection.vue
  3. 52
    10
      src/components/user/registerPage.vue
  4. 3
    0
      src/store/index.js
  5. 161
    0
      src/store/modules/user/register.js

+ 8
- 0
src/components/user/loginPage.vue Целия файл

108
       this.showPassword = false;
108
       this.showPassword = false;
109
       this.isPasswordShown = 'password';
109
       this.isPasswordShown = 'password';
110
     },
110
     },
111
+    // authHeader() {
112
+    //   const user = JSON.parse(localStorage.getItem('user'));
113
+
114
+    //   if (user && user.token) {
115
+    //     return { Authoriztion: `Bearer ${user.token}` };
116
+    //   }
117
+    //   return {};
118
+    // },
111
   },
119
   },
112
 };
120
 };
113
 </script>
121
 </script>

+ 67
- 18
src/components/user/registerAgencySection.vue Целия файл

7
           <h4>Agency Details</h4>
7
           <h4>Agency Details</h4>
8
           <div class="col-md-8" style="margin-bottom: 1em">
8
           <div class="col-md-8" style="margin-bottom: 1em">
9
             <eva-icon name="people" fill="#60CBEB"></eva-icon>
9
             <eva-icon name="people" fill="#60CBEB"></eva-icon>
10
-            <input class="form-control" type="text" name="agencyname" placeholder="Agency Name" />
10
+            <input
11
+              class="form-control"
12
+              type="text"
13
+              name="agencyname"
14
+              placeholder="Agency Name"
15
+              v-model="registerAgency.name"
16
+            />
11
           </div>
17
           </div>
12
           <div class="col-md-8" style="margin-bottom: 1em">
18
           <div class="col-md-8" style="margin-bottom: 1em">
13
             <eva-icon name="book" fill="#60CBEB"></eva-icon>
19
             <eva-icon name="book" fill="#60CBEB"></eva-icon>
16
               type="text"
22
               type="text"
17
               name="eaabffcnumber"
23
               name="eaabffcnumber"
18
               placeholder="EAAB FFC Number"
24
               placeholder="EAAB FFC Number"
25
+              v-model="registerAgency.eaabeffcNumber"
19
             />
26
             />
20
           </div>
27
           </div>
21
           <div class="col-md-8">
28
           <div class="col-md-8">
25
               type="text"
32
               type="text"
26
               name="companyregnumber"
33
               name="companyregnumber"
27
               placeholder="Company Registration Number"
34
               placeholder="Company Registration Number"
35
+              v-model="registerAgency.companyRegNumber"
28
             />
36
             />
29
           </div>
37
           </div>
30
           <hr />
38
           <hr />
33
             <div class="row" style="text-align:left">
41
             <div class="row" style="text-align:left">
34
               <div class="col-md-6" style="margin-bottom: 1em">
42
               <div class="col-md-6" style="margin-bottom: 1em">
35
                 <eva-icon name="person" fill="#60CBEB"></eva-icon>
43
                 <eva-icon name="person" fill="#60CBEB"></eva-icon>
36
-                <input class="form-control" type="text" name="name" placeholder="Name" />
44
+                <input
45
+                  class="form-control"
46
+                  type="text"
47
+                  name="name"
48
+                  placeholder="Name"
49
+                  v-model="registerAgency.user.name"
50
+                />
37
               </div>
51
               </div>
38
               <div class="col-md-6" style="margin-bottom: 1em">
52
               <div class="col-md-6" style="margin-bottom: 1em">
39
                 <eva-icon name="person" fill="#60CBEB"></eva-icon>
53
                 <eva-icon name="person" fill="#60CBEB"></eva-icon>
40
-                <input class="form-control" type="text" name="surname" placeholder="Surname" />
54
+                <input
55
+                  class="form-control"
56
+                  type="text"
57
+                  name="surname"
58
+                  placeholder="Surname"
59
+                  v-model="registerAgency.user.surname"
60
+                />
41
               </div>
61
               </div>
42
             </div>
62
             </div>
43
 
63
 
44
             <div class="row" style="text-align:left">
64
             <div class="row" style="text-align:left">
45
               <div class="col-md-8">
65
               <div class="col-md-8">
46
                 <eva-icon name="email" fill="#60CBEB"></eva-icon>
66
                 <eva-icon name="email" fill="#60CBEB"></eva-icon>
47
-                <input class="form-control" type="text" name="email" placeholder="Email Address" />
67
+                <input
68
+                  class="form-control"
69
+                  type="text"
70
+                  name="email"
71
+                  placeholder="Email Address"
72
+                  v-model="registerAgency.user.email"
73
+                />
48
                 <div class="form-group row"></div>
74
                 <div class="form-group row"></div>
49
               </div>
75
               </div>
50
 
76
 
55
                   type="text"
81
                   type="text"
56
                   name="cellnumber"
82
                   name="cellnumber"
57
                   placeholder="Contact Number"
83
                   placeholder="Contact Number"
84
+                  v-model="registerAgency.user.cellNumber"
58
                 />
85
                 />
59
               </div>
86
               </div>
60
             </div>
87
             </div>
62
             <div class="row">
89
             <div class="row">
63
               <div class="col-md-7" style="margin-bottom: 1em">
90
               <div class="col-md-7" style="margin-bottom: 1em">
64
                 <eva-icon name="person" fill="#60CBEB"></eva-icon>
91
                 <eva-icon name="person" fill="#60CBEB"></eva-icon>
65
-                <input class="form-control" type="text" name="username" placeholder="Username" />
92
+                <input
93
+                  class="form-control"
94
+                  type="text"
95
+                  name="username"
96
+                  placeholder="Username"
97
+                  v-model="registerAgency.user.username"
98
+                />
66
               </div>
99
               </div>
67
               <div class="col-md-7" style="margin-bottom: 1em">
100
               <div class="col-md-7" style="margin-bottom: 1em">
68
                 <eva-icon name="lock" fill="#60CBEB"></eva-icon>
101
                 <eva-icon name="lock" fill="#60CBEB"></eva-icon>
69
                 <input
102
                 <input
70
                   class="form-control"
103
                   class="form-control"
71
                   :type="isPasswordShown"
104
                   :type="isPasswordShown"
72
-                  v-model="password"
105
+                  v-model="registerAgency.user.password"
73
                   id="password"
106
                   id="password"
74
                   placeholder="Password"
107
                   placeholder="Password"
75
                   name="password"
108
                   name="password"
81
                 <input
114
                 <input
82
                   class="form-control"
115
                   class="form-control"
83
                   :type="isPasswordShown"
116
                   :type="isPasswordShown"
84
-                  v-model="password"
117
+                  v-model="registerAgency.user.password"
85
                   id="password"
118
                   id="password"
86
                   placeholder="Confirm Password"
119
                   placeholder="Confirm Password"
87
                   name="confirmpassword"
120
                   name="confirmpassword"
102
           <div class="form-group row"></div>
135
           <div class="form-group row"></div>
103
           <div class="row offset-md-1">
136
           <div class="row offset-md-1">
104
             <div class="col-md-2">
137
             <div class="col-md-2">
105
-              <button class="btn btn-b-n" type="submit">Submit</button>
138
+              <button @click="SubmitData()" class="btn btn-b-n" type="button">Submit</button>
106
             </div>
139
             </div>
107
             <div class="col-md-2 offset-md-1">
140
             <div class="col-md-2 offset-md-1">
108
-              <button class="btn btn-b-n" type="submit">Cancel</button>
141
+              <button @click="Cancel()" class="btn btn-b-n" type="button">Cancel</button>
109
             </div>
142
             </div>
110
           </div>
143
           </div>
111
         </div>
144
         </div>
115
 </template>
148
 </template>
116
 
149
 
117
 <script>
150
 <script>
118
-import RegisterPage from './registerPage.vue';
151
+import { mapState, mapActions } from 'vuex';
152
+// import RegisterPage from './registerPage.vue';
119
 
153
 
120
 export default {
154
 export default {
121
-  data() {
122
-    return {
123
-      RegisterHeader: 'Agency Administrator Details',
124
-    };
125
-  },
155
+  // data() {
156
+  //   return {
157
+  //     RegisterHeader: 'Agency Administrator Details',
158
+  //   };
159
+  // },
126
   name: 'Agency',
160
   name: 'Agency',
127
-  components: { RegisterPage },
161
+  // components: { RegisterPage },
128
   data() {
162
   data() {
129
     return {
163
     return {
130
-      username: '',
131
       user: null,
164
       user: null,
132
       isPasswordShown: 'password',
165
       isPasswordShown: 'password',
133
       selectItems: [{ text: 'password', value: 0 }],
166
       selectItems: [{ text: 'password', value: 0 }],
136
       textErrors: 'Some error with the field',
169
       textErrors: 'Some error with the field',
137
       text: '',
170
       text: '',
138
       showPassword: false,
171
       showPassword: false,
139
-      password: '',
140
     };
172
     };
141
   },
173
   },
174
+  computed: {
175
+    ...mapState('registerAgency', ['registerAgency']),
176
+  },
142
   methods: {
177
   methods: {
178
+    ...mapActions('registerAgency', [
179
+      'getAgency',
180
+      'saveAgency',
181
+      'updateAgency',
182
+      'clearAgency',
183
+    ]),
184
+
143
     togglePassword() {
185
     togglePassword() {
144
       this.showPassword = true;
186
       this.showPassword = true;
145
       this.isPasswordShown = 'text';
187
       this.isPasswordShown = 'text';
148
       this.showPassword = false;
190
       this.showPassword = false;
149
       this.isPasswordShown = 'password';
191
       this.isPasswordShown = 'password';
150
     },
192
     },
193
+    SubmitData() {
194
+      this.saveAgency(this.registerAgency);
195
+      this.$router.push('/registerAgency/');
196
+    },
197
+    Close() {
198
+      this.$router.push('/registerAgency/');
199
+    },
151
   },
200
   },
152
 };
201
 };
153
 </script>
202
 </script>

+ 52
- 10
src/components/user/registerPage.vue Целия файл

8
           <div class="row" style="text-align:left">
8
           <div class="row" style="text-align:left">
9
             <div class="col-md-6" style="margin-bottom: 1em">
9
             <div class="col-md-6" style="margin-bottom: 1em">
10
               <eva-icon name="person" fill="#60CBEB"></eva-icon>
10
               <eva-icon name="person" fill="#60CBEB"></eva-icon>
11
-              <input class="form-control" type="text" name="name" placeholder="Name" />
11
+              <input
12
+                class="form-control"
13
+                type="text"
14
+                name="name"
15
+                placeholder="Name"
16
+                v-model="registerIndividual.name"
17
+              />
12
             </div>
18
             </div>
13
             <div class="col-md-6" style="margin-bottom: 1em">
19
             <div class="col-md-6" style="margin-bottom: 1em">
14
               <eva-icon name="person" fill="#60CBEB"></eva-icon>
20
               <eva-icon name="person" fill="#60CBEB"></eva-icon>
15
-              <input class="form-control" type="text" name="surname" placeholder="Surname" />
21
+              <input
22
+                class="form-control"
23
+                type="text"
24
+                name="surname"
25
+                placeholder="Surname"
26
+                v-model="registerIndividual.surname"
27
+              />
16
             </div>
28
             </div>
17
           </div>
29
           </div>
18
 
30
 
19
           <div class="row" style="text-align:left">
31
           <div class="row" style="text-align:left">
20
             <div class="col-md-8">
32
             <div class="col-md-8">
21
               <eva-icon name="email" fill="#60CBEB"></eva-icon>
33
               <eva-icon name="email" fill="#60CBEB"></eva-icon>
22
-              <input class="form-control" type="text" name="email" placeholder="Email Address" />
34
+              <input
35
+                class="form-control"
36
+                type="text"
37
+                name="email"
38
+                placeholder="Email Address"
39
+                v-model="registerIndividual.email"
40
+              />
23
               <div class="form-group row"></div>
41
               <div class="form-group row"></div>
24
             </div>
42
             </div>
25
 
43
 
30
                 type="text"
48
                 type="text"
31
                 name="cellnumber"
49
                 name="cellnumber"
32
                 placeholder="Contact Number"
50
                 placeholder="Contact Number"
51
+                v-model="registerIndividual.cellNumber"
33
               />
52
               />
34
             </div>
53
             </div>
35
           </div>
54
           </div>
37
           <div class="row">
56
           <div class="row">
38
             <div class="col-md-7" style="margin-bottom: 1em">
57
             <div class="col-md-7" style="margin-bottom: 1em">
39
               <eva-icon name="person" fill="#60CBEB"></eva-icon>
58
               <eva-icon name="person" fill="#60CBEB"></eva-icon>
40
-              <input class="form-control" type="text" name="username" placeholder="Username" />
59
+              <input
60
+                class="form-control"
61
+                type="text"
62
+                name="username"
63
+                placeholder="Username"
64
+                v-model="registerIndividual.username"
65
+              />
41
             </div>
66
             </div>
42
             <div class="col-md-7" style="margin-bottom: 1em">
67
             <div class="col-md-7" style="margin-bottom: 1em">
43
               <eva-icon name="lock" fill="#60CBEB"></eva-icon>
68
               <eva-icon name="lock" fill="#60CBEB"></eva-icon>
44
               <input
69
               <input
45
                 class="form-control"
70
                 class="form-control"
46
                 :type="isPasswordShown"
71
                 :type="isPasswordShown"
47
-                v-model="password"
72
+                v-model="registerIndividual.password"
48
                 id="password"
73
                 id="password"
49
                 placeholder="Password"
74
                 placeholder="Password"
50
                 name="password"
75
                 name="password"
56
               <input
81
               <input
57
                 class="form-control"
82
                 class="form-control"
58
                 :type="isPasswordShown"
83
                 :type="isPasswordShown"
59
-                v-model="password"
84
+                v-model="registerIndividual.password"
60
                 id="password"
85
                 id="password"
61
                 placeholder="Confirm Password"
86
                 placeholder="Confirm Password"
62
                 name="confirmpassword"
87
                 name="confirmpassword"
77
         <div class="form-group row"></div>
102
         <div class="form-group row"></div>
78
         <div class="row offset-md-1">
103
         <div class="row offset-md-1">
79
           <div class="col-md-2">
104
           <div class="col-md-2">
80
-            <button class="btn btn-b-n" type="submit">Submit</button>
105
+            <button @click="SubmitData()" class="btn btn-b-n" type="submit">Submit</button>
81
           </div>
106
           </div>
82
           <div class="col-md-2 offset-md-1">
107
           <div class="col-md-2 offset-md-1">
83
-            <button class="btn btn-b-n" type="submit">Cancel</button>
108
+            <button @click="Cancel()" class="btn btn-b-n" type="submit">Cancel</button>
84
           </div>
109
           </div>
85
         </div>
110
         </div>
86
       </div>
111
       </div>
89
 </template>
114
 </template>
90
 
115
 
91
 <script>
116
 <script>
117
+import { mapState, mapActions } from 'vuex';
118
+
92
 export default {
119
 export default {
93
   props: {
120
   props: {
94
     RegisterHeader: { type: String, default: undefined },
121
     RegisterHeader: { type: String, default: undefined },
96
   name: 'PrivateIndividual',
123
   name: 'PrivateIndividual',
97
   data() {
124
   data() {
98
     return {
125
     return {
99
-      username: '',
100
       user: null,
126
       user: null,
101
       isPasswordShown: 'password',
127
       isPasswordShown: 'password',
102
       selectItems: [{ text: 'password', value: 0 }],
128
       selectItems: [{ text: 'password', value: 0 }],
105
       textErrors: 'Some error with the field',
131
       textErrors: 'Some error with the field',
106
       text: '',
132
       text: '',
107
       showPassword: false,
133
       showPassword: false,
108
-      password: '',
109
     };
134
     };
110
   },
135
   },
111
   computed: {
136
   computed: {
137
+    ...mapState('registerIndividual', ['registerIndividual']),
138
+
112
     Header() {
139
     Header() {
113
       return this.RegisterHeader
140
       return this.RegisterHeader
114
         ? 'Agency Administrator Details'
141
         ? 'Agency Administrator Details'
116
     },
143
     },
117
   },
144
   },
118
   methods: {
145
   methods: {
146
+    ...mapActions('registerIndividual', [
147
+      'getIndividual',
148
+      'saveIndividual',
149
+      'updateIndividual',
150
+      'clearIndividual',
151
+    ]),
152
+
119
     togglePassword() {
153
     togglePassword() {
120
       this.showPassword = true;
154
       this.showPassword = true;
121
       this.isPasswordShown = 'text';
155
       this.isPasswordShown = 'text';
124
       this.showPassword = false;
158
       this.showPassword = false;
125
       this.isPasswordShown = 'password';
159
       this.isPasswordShown = 'password';
126
     },
160
     },
161
+    SubmitData() {
162
+      this.saveIndividual(this.registerIndividual);
163
+
164
+      this.$router.push('/registerIndividual/');
165
+    },
166
+    Close() {
167
+      this.$router.push('/registerIndividual/');
168
+    },
127
   },
169
   },
128
 };
170
 };
129
 </script>
171
 </script>

+ 3
- 0
src/store/index.js Целия файл

13
 import PropertyAdminModule from './modules/property/propertyAdmin';
13
 import PropertyAdminModule from './modules/property/propertyAdmin';
14
 import PropertyList from './modules/property/propertyLists';
14
 import PropertyList from './modules/property/propertyLists';
15
 import PropertyTypes from './modules/property/propertyTypes';
15
 import PropertyTypes from './modules/property/propertyTypes';
16
+import Register from './modules/user/register';
16
 
17
 
17
 Vue.use(Vuex);
18
 Vue.use(Vuex);
18
 /* eslint no-param-reassign: ["error", { "props": false }] */
19
 /* eslint no-param-reassign: ["error", { "props": false }] */
30
     propertyAdmin: PropertyAdminModule,
31
     propertyAdmin: PropertyAdminModule,
31
     propertyList: PropertyList,
32
     propertyList: PropertyList,
32
     propertyTypes: PropertyTypes,
33
     propertyTypes: PropertyTypes,
34
+    registerIndividual: Register,
35
+    registerAgency: Register,
33
   },
36
   },
34
 });
37
 });

+ 161
- 0
src/store/modules/user/register.js Целия файл

1
+import axios from 'axios';
2
+
3
+export default {
4
+  namespaced: true,
5
+  state: {
6
+    registerIndividual: {
7
+      name: '',
8
+      surname: '',
9
+      email: '',
10
+      cellNumber: '',
11
+      username: '',
12
+      password: '',
13
+    },
14
+    registerAgency: {
15
+      name: '',
16
+      eaabeffcNumber: '',
17
+      companyRegNumber: '',
18
+      user: {
19
+        name: '',
20
+        surname: '',
21
+        email: '',
22
+        cellNumber: '',
23
+        username: '',
24
+        password: '',
25
+      },
26
+    },
27
+  },
28
+  mutations: {
29
+    setIndividual(state, type) {
30
+      state.registerIndividual = type;
31
+    },
32
+    setAgency(state, type) {
33
+      state.registerAgency = type;
34
+    },
35
+    addIndividual(state, type) {
36
+      state.registerIndividual = type;
37
+    },
38
+    addAgency(state, type) {
39
+      state.registerAgency = type;
40
+    },
41
+    updateIndividual(state, type) {
42
+      state.registerIndividual.find(item => item.id === type.id).username = type.username;
43
+      state.registerIndividual.find(item => item.id === type.id).password = type.password;
44
+    },
45
+    updateAgency(state, type) {
46
+      state.registerAgency.find(item => item.id === type.id).eaabeffcNumber = type
47
+        .eaabeffcNumber;
48
+      state.registerAgency.find(item => item.id === type.id).companyRegNumber = type
49
+        .companyRegNumber;
50
+    },
51
+    clearIndividual(state) {
52
+      state.registerIndividual = {
53
+        name: '',
54
+        surname: '',
55
+        email: '',
56
+        cellNumber: '',
57
+        username: '',
58
+        password: '',
59
+      };
60
+    },
61
+    clearAgency(state) {
62
+      state.registerAgency = {
63
+        name: '',
64
+        eaabeffcNumber: '',
65
+        companyRegNumber: '',
66
+        user: {
67
+          name: '',
68
+          surname: '',
69
+          email: '',
70
+          cellNumber: '',
71
+          username: '',
72
+          password: '',
73
+        },
74
+      };
75
+    },
76
+    removeIndividual(state, id) {
77
+      state.registerIndividual.pop(state.registerIndividual.find(p => p.id === id));
78
+    },
79
+    removeAgency(state, id) {
80
+      state.registerAgency.pop(state.registerAgency.find(a => a.id === id));
81
+    },
82
+  },
83
+  getters: {},
84
+  actions: {
85
+    // getIndividual({
86
+    //   commit,
87
+    // }, id) {
88
+    //   axios
89
+    //     .get(`http://localhost:57260/api/user/${id}`)
90
+    //     .then(result => commit('setIndividual', result.data))
91
+    //     .catch(console.error);
92
+    // },
93
+    // getAgency({
94
+    //   commit,
95
+    // }, id) {
96
+    //   axios
97
+    //     .get(`http://localhost:57260/api/agency/${id}`)
98
+    //     .then(result => commit('setAgency', result.data))
99
+    //     .catch(console.error);
100
+    // },
101
+
102
+    saveIndividual({
103
+      commit,
104
+    }, item) {
105
+      axios
106
+        .post('http://localhost:57260/api/register/register', item)
107
+        .then(result => commit('addIndividual', result.data))
108
+        .catch(console.error);
109
+    },
110
+    saveAgency({
111
+      commit,
112
+    }, item) {
113
+      axios
114
+        .post('http://localhost:57260/api/register/registeragency', item)
115
+        .then(result => commit('addAgency', result.data))
116
+        .catch(console.error);
117
+    },
118
+    // updateIndividual({
119
+    //   commit,
120
+    // }, item) {
121
+    //   axios
122
+    //     .put('http://localhost:57260/api/individual', item)
123
+    //     .then(result => commit('updateIndividual', item))
124
+    //     .catch(console.error);
125
+    // },
126
+    // updateAgency({
127
+    //   commit,
128
+    // }, item) {
129
+    //   axios
130
+    //     .put('http://localhost:57260/api/agency', item)
131
+    //     .then(result => commit('updateAgency', item))
132
+    //     .catch(console.error);
133
+    // },
134
+    // clearIndividual({
135
+    //   commit,
136
+    // }) {
137
+    //   commit('clearIndividual');
138
+    // },
139
+    // clearAgency({
140
+    //   commit,
141
+    // }) {
142
+    //   commit('clearAgency');
143
+    // },
144
+    // deleteIndividual({
145
+    //   commit,
146
+    // }, id) {
147
+    //   axios
148
+    //     .delete(`http://localhost:57260/api/individual/${id}`)
149
+    //     .then(result => commit('removeIndividual', id))
150
+    //     .catch(console.error);
151
+    // },
152
+    // deleteAgency({
153
+    //   commit,
154
+    // }, id) {
155
+    //   axios
156
+    //     .delete(`http://localhost:57260/api/agency/${id}`)
157
+    //     .then(result => commit('removeAgency', id))
158
+    //     .catch(console.error);
159
+    // },
160
+  },
161
+};

Loading…
Отказ
Запис