2222 </td >
2323 <td >
2424 <a v-on:click =" editUserModal(props.row)" ><i class =" fa fa-edit" style =" color :whitesmoke ;" ></i ></a >
25- <a v-on:click =" deleteUser (props.row)" ><i class =" fa fa-trash" style =" color :whitesmoke ;" ></i ></a >
25+ <a v-on:click =" deleteUserModal (props.row)" ><i class =" fa fa-trash" style =" color :whitesmoke ;" ></i ></a >
2626 </td >
2727 </template >
2828 <div slot =" emptystate" class =" empty-table-text" >
3838
3939<!-- edit user modal-->
4040 <modal :visible =" showEditUserModal" class =" modal-z-index" @close =" close" >
41- <div class =" boxedit- user-modal" >
41+ <div class =" box user-modal" >
4242 <div class =" block edit-user-modal-content" >
4343 <collapse accordion is-fullwidth >
4444 <collapse-item title =" Change Password" selected >
4545 <div class =" edit-user-modal-content" >
46- <label class =" label" style =" text-align :left ;" >Change password for user {{editUser .display_name }}:</label >
46+ <label class =" label" style =" text-align :left ;" >Change password for user {{selectUser .display_name }}:</label >
4747 <p class =" control has-icons-left" style =" padding-bottom :5px ;" >
48- <input class =" input is-medium input-bar" v-focus type =" password" v-model =" editUser .oldpassword" placeholder =" Old Password" >
48+ <input class =" input is-medium input-bar" v-focus type =" password" v-model =" selectUser .oldpassword" placeholder =" Old Password" >
4949 <span class =" icon is-small is-left" >
5050 <i class =" fa fa-lock" ></i >
5151 </span >
5252 </p >
5353 <p class =" control has-icons-left" >
54- <input class =" input is-medium input-bar" type =" password" v-model =" editUser .newpassword" placeholder =" New Password" >
54+ <input class =" input is-medium input-bar" type =" password" v-model =" selectUser .newpassword" placeholder =" New Password" >
5555 <span class =" icon is-small is-left" >
5656 <i class =" fa fa-lock" ></i >
5757 </span >
5858 </p >
5959 <p class =" control has-icons-left" >
60- <input class =" input is-medium input-bar" type =" password" v-model =" editUser .newpasswordconf" placeholder =" New Password confirmation" >
60+ <input class =" input is-medium input-bar" type =" password" v-model =" selectUser .newpasswordconf" placeholder =" New Password confirmation" >
6161 <span class =" icon is-small is-left" >
6262 <i class =" fa fa-lock" ></i >
6363 </span >
7676 </div >
7777 </div >
7878 </modal >
79+
80+ <!-- delete user modal-->
81+ <modal :visible =" showDeleteUserModal" class =" modal-z-index" @close =" close" >
82+ <div class =" box user-modal" >
83+ <article class =" media" >
84+ <div class =" media-content" >
85+ <div class =" content" >
86+ <p >
87+ <span style =" color :whitesmoke ;" >Do you really want to delete the user {{ selectUser.display_name }}?</span >
88+ </p >
89+ </div >
90+ <div class =" modal-footer" >
91+ <div style =" float :left ;" >
92+ <button class =" button is-primary" v-on:click =" deleteUser" style =" width :150px ;" >Yes</button >
93+ </div >
94+ <div style =" float :right ;" >
95+ <button class =" button is-danger" v-on:click =" cancel" style =" width :130px ;" >No</button >
96+ </div >
97+ </div >
98+ </div >
99+ </article >
100+ </div >
101+ </modal >
79102 </div >
80103</template >
81104
@@ -132,8 +155,9 @@ export default {
132155 }
133156 ],
134157 userRows: [],
135- editUser: [],
136- showEditUserModal: false
158+ selectUser: [],
159+ showEditUserModal: false ,
160+ showDeleteUserModal: false
137161 }
138162 },
139163
@@ -164,31 +188,33 @@ export default {
164188 },
165189
166190editUserModal (user ) {
167- this .editUser = user
191+ this .selectUser = user
168192this .showEditUserModal = true
169193 },
170194
171- deleteUser (user ) {
172- console .log (' TODO' )
195+ deleteUserModal (user ) {
196+ this .selectUser = user
197+ this .showDeleteUserModal = true
173198 },
174199
175200close () {
176201this .showEditUserModal = false
202+ this .showDeleteUserModal = false
177203this .$emit (' close' )
178204 },
179205
180206cancel () {
181207// cancel means reset all stuff
182- this .editUser .oldpassword = ' '
183- this .editUser .newpassword = ' '
184- this .editUser .newpasswordconf = ' '
208+ this .selectUser .oldpassword = ' '
209+ this .selectUser .newpassword = ' '
210+ this .selectUser .newpasswordconf = ' '
185211
186212this .close ()
187213 },
188214
189215changePassword () {
190216// pre-validate
191- if (this .editUser .newpassword === ' ' || this .editUser .newpasswordconf === ' ' ) {
217+ if (this .selectUser .newpassword === ' ' || this .selectUser .newpasswordconf === ' ' ) {
192218openNotification ({
193219 title: ' Empty password' ,
194220 message: ' Empty password is not allowed.' ,
@@ -199,7 +225,7 @@ export default {
199225 }
200226
201227this .$http
202- .post (' /api/v1/user/password' ,this .editUser )
228+ .post (' /api/v1/user/password' ,this .selectUser )
203229 .then (response => {
204230openNotification ({
205231 title: ' Password changed!' ,
@@ -212,6 +238,22 @@ export default {
212238 })
213239this .close ()
214240 }
241+ },
242+
243+ deleteUser () {
244+ this .$http
245+ .delete (' /api/v1/user' ,this .selectUser )
246+ .then (response => {
247+ openNotification ({
248+ title: ' User deleted!' ,
249+ message: ' User' + this .selectUser .display_name + ' has been successfully deleted.' ,
250+ type: ' success'
251+ })
252+ })
253+ .catch ((error )=> {
254+ this .$onError (error)
255+ })
256+ this .close ()
215257 }
216258}
217259 </script >
@@ -232,7 +274,7 @@ export default {
232274border-bottom-color :#4da2fc !important ;
233275}
234276
235- .edit- user-modal {
277+ .user-modal {
236278text-align :center ;
237279background-color :#2a2735 ;
238280}
@@ -243,7 +285,7 @@ export default {
243285}
244286
245287.modal-footer {
246- height :35 px ;
288+ height :45 px ;
247289padding-top :15px ;
248290}
249291