Mercurial > gemma
annotate client/src/components/Userdetail.vue @ 392:c57b952c60be
feat: Improved user input validation
More validation added and refactored.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 13 Aug 2018 17:35:56 +0200 |
parents | e7d5383bc358 |
children | b5555bf6d45c |
rev | line source |
---|---|
356
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
1 <template> |
379
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
2 <div class="userdetails shadow"> |
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
3 <div class="card"> |
375
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
374
diff
changeset
|
4 <div class="card-header text-white bg-info mb-3"> |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
5 {{ currentUser.user }} |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
6 <span @click="closeDetailview" class="pull-right"><i class="fa fa-close"></i></span> |
375
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
374
diff
changeset
|
7 </div> |
362
2c58906649be
refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents:
356
diff
changeset
|
8 <div class="card-body"> |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
9 <form @submit.prevent="save"> |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
10 <div class="formfields"> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
11 <div v-if="currentUser.isNew" class="form-group row"> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
12 <label for="user">Username</label> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
13 <input type="user" class="form-control form-control-sm" id="user" aria-describedby="userHelp" v-model="currentUser.user"> |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
14 <div v-show="errors.user" class="text-danger"><small><i class="fa fa-warning"></i> {{ errors.user }}</small></div> |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
15 </div> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
16 <div class="form-group row"> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
17 <label for="country">Country</label> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
18 <select class="form-control form-control-sm" v-on:change="validateCountry" v-model="currentUser.country"> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
19 <option disabled value="">Please select one</option> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
20 <option>AT</option> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
21 <option>RO</option> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
22 <option>BG</option> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
23 </select> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
24 <div v-show="errors.country" class="text-danger"><small><i class="fa fa-warning"></i> {{ errors.country }}</small></div> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
25 </div> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
26 <div class="form-group row"> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
27 <label for="email">Email address</label> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
28 <input type="email" v-on:change="validateEmailaddress" class="form-control form-control-sm" id="email" aria-describedby="emailHelp" v-model="currentUser.email"> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
29 <div v-show="errors.email" class="text-danger"><small><i class="fa fa-warning"></i> {{ errors.email }}</small></div> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
30 </div> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
31 <div class="form-group row"> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
32 <label for="role">Role</label> |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
33 <select class="form-control form-control-sm" v-on:change="validateRole" v-model="currentUser.role"> |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
34 <option disabled value="">Please select one</option> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
35 <option value="sys_admin">Sysadmin</option> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
36 <option value="waterway_admin">Waterway Admin</option> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
37 <option value="waterway_user">Waterway User</option> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
38 </select> |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
39 <div v-show="errors.role" class="text-danger"><small><i class="fa fa-warning"></i> {{ errors.role }}</small></div> |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
40 </div> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
41 <div class="form-group row"> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
42 <label for="password">Password</label> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
43 <input type="password" v-on:change="validatePassword" class="form-control form-control-sm" id="password" aria-describedby="passwordHelp" v-model="password"> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
44 <div v-show="errors.password" class="text-danger"><small><i class="fa fa-warning"></i> {{ errors.password }}</small></div> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
45 </div> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
46 <div class="form-group row"> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
47 <label for="passwordre">Retype Password</label> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
48 <input type="password" v-on:change="validatePassword" class="form-control form-control-sm" id="passwordre" aria-describedby="passwordreHelp" v-model="passwordre"> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
49 <div v-show="errors.passwordre" class="text-danger"><small><i class="fa fa-warning"></i> {{ errors.passwordre }}</small></div> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
50 </div> |
375
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
374
diff
changeset
|
51 </div> |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
52 <div> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
53 <button type="submit" :disabled="submitted" class="btn btn-info pull-right">Submit</button> |
375
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
374
diff
changeset
|
54 </div> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
374
diff
changeset
|
55 </form> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
374
diff
changeset
|
56 </div> |
356
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
57 </div> |
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
58 </div> |
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
59 </template> |
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
60 |
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
61 <style lang="scss"> |
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
62 @import "../assets/application.scss"; |
375
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
374
diff
changeset
|
63 |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
64 .formfields { |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
65 width: 10vw; |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
66 } |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
67 |
375
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
374
diff
changeset
|
68 .userdetails { |
379
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
69 margin-top: $large-offset; |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
70 width: 53vw; |
379
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
71 margin-right: auto; |
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
72 height: 100%; |
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
73 } |
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
74 |
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
75 form { |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
76 margin-left: $offset; |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
77 font-size: 0.9rem; |
356
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
78 } |
375
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
374
diff
changeset
|
79 |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
374
diff
changeset
|
80 .shadow { |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
374
diff
changeset
|
81 box-shadow: $basic-shadow-light !important; |
356
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
82 } |
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
83 </style> |
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
84 <script> |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
85 import app from "../main"; |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
86 |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
87 const isEmailValid = email => { |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
88 /* cf. types.go */ |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
89 // eslint-disable-next-line |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
90 return /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test( |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
91 email |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
92 ); |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
93 }; |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
94 |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
95 const violatedPasswordRules = password => { |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
96 return ( |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
97 // rules according to issue 70 |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
98 password.length < 7 || |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
99 /\W/.test(password) == false || |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
100 /\d/.test(password) == false |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
101 ); |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
102 }; |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
103 |
356
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
104 export default { |
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
105 name: "userdetail", |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
106 data() { |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
107 return { |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
108 password: "", |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
109 passwordre: "", |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
110 currentUser: {}, |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
111 path: null, |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
112 submitted: false, |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
113 errors: { |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
114 email: "", |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
115 country: "", |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
116 role: "", |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
117 password: "", |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
118 passwordre: "" |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
119 } |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
120 }; |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
121 }, |
379
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
122 mounted() { |
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
123 this.currentUser = { ...this.user }; |
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
124 this.path = this.user.name; |
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
125 }, |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
126 watch: { |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
127 user() { |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
128 this.currentUser = { ...this.user }; |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
129 this.path = this.user.name; |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
130 } |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
131 }, |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
132 computed: { |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
133 user() { |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
134 return this.$store.getters["usermanagement/currentUser"]; |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
135 }, |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
136 isFormValid() { |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
137 this.validateCountry(); |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
138 this.validateRole(); |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
139 this.validatePassword(); |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
140 this.validateEmailaddress(); |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
141 const valid = |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
142 isEmailValid(this.currentUser.email) && |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
143 !this.currentUser.country && |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
144 this.password === this.passwordre && |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
145 (this.password === "" || violatedPasswordRules(this.password)); |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
146 return valid; |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
147 } |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
148 }, |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
149 methods: { |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
150 closeDetailview() { |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
151 this.$store.commit("usermanagement/clearCurrentUser"); |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
152 this.$store.commit("usermanagement/setUserDetailsInvisible"); |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
153 }, |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
154 validateCountry() { |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
155 if (this.currentUser.country) { |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
156 this.errors.country = ""; |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
157 } else { |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
158 this.errors.country = "Please choose a country"; |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
159 } |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
160 }, |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
161 validateRole() { |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
162 if (this.currentUser.role) { |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
163 this.errors.role = ""; |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
164 } else { |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
165 this.errors.role = "Please choose a role"; |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
166 } |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
167 }, |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
168 validatePassword() { |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
169 if (this.password !== this.passwordre) { |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
170 this.errors.passwordre = "Passwords do not match!"; |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
171 } else { |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
172 this.errors.passwordre = ""; |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
173 } |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
174 if (this.password !== "" && violatedPasswordRules(this.password)) { |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
175 this.errors.password = |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
176 "Password should at least be 8 char long including 1 digit and 1 special char like $"; |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
177 } else { |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
178 this.errors.password = ""; |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
179 } |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
180 }, |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
181 validateEmailaddress() { |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
182 if (isEmailValid(this.currentUser.email)) { |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
183 this.errors.email = ""; |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
184 } else { |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
185 this.errors.email = "invalid email"; |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
186 } |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
187 }, |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
188 save() { |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
189 if (!this.isFormValid) return; |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
190 if (this.password) this.currentUser.password = this.password; |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
191 this.submitted = true; |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
192 this.$store |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
193 .dispatch("usermanagement/saveCurrentUser", { |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
194 path: this.user.user, |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
195 user: this.currentUser |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
196 }) |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
197 .then(() => { |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
198 this.submitted = false; |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
199 this.$store.dispatch("usermanagement/loadUsers").catch(error => { |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
200 const { status, data } = error.response; |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
201 app.$toast.error({ |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
202 title: "Backend Error", |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
203 message: `${status}: ${data}` |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
204 }); |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
205 }); |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
206 }) |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
207 .catch(error => { |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
208 this.submitted = false; |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
209 const { status, data } = error.response; |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
210 app.$toast.error({ |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
211 title: "Error while saving user", |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
212 message: `${status}: ${data}` |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
213 }); |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
214 }); |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
215 } |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
216 } |
356
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
217 }; |
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
218 </script> |