Mercurial > gemma
annotate client/src/components/Userdetail.vue @ 546:b91791664554
refac: Errorhandling and formatting
Some code was made Prettier.
Error messages does fallback to data in case data.message is ot present
When a login error occurs, a toast is presenterefac: Errorhandling and formatting
Some code was made Prettier.
Error messages does fallback to data in case data.message is ot present
When a login error occurs, a toast is presented
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 31 Aug 2018 11:12:09 +0200 |
parents | 5a9dde6951ae |
children | 89bc8111563a |
rev | line source |
---|---|
356
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
1 <template> |
428
d7a06b9fffc9
feat: Usability for usermanagement improved.
Thomas Junk <thomas.junk@intevation.de>
parents:
422
diff
changeset
|
2 <div class="userdetails shadown fadeIn animated"> |
379
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
3 <div class="card"> |
422
9869bc03155e
refactor: Brushed up UI and added comfort
Thomas Junk <thomas.junk@intevation.de>
parents:
413
diff
changeset
|
4 <div class="card-header shadow-sm text-white bg-info mb-3"> |
546
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
5 {{ this.cardHeader }} |
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
6 <span @click="closeDetailview" class="pull-right"> |
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
7 <i class="fa fa-close"></i> |
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
8 </span> |
375
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
374
diff
changeset
|
9 </div> |
362
2c58906649be
refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents:
356
diff
changeset
|
10 <div class="card-body"> |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
11 <form @submit.prevent="save"> |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
12 <div class="formfields"> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
13 <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
|
14 <label for="user">Username</label> |
492
5a9dde6951ae
fix: N.N as Username is now a placeholder
Thomas Junk <thomas.junk@intevation.de>
parents:
487
diff
changeset
|
15 <input type="user" :placeholder="userNamePlaceholder" class="form-control form-control-sm" id="user" aria-describedby="userHelp" v-model="currentUser.user"> |
546
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
16 <div v-show="errors.user" class="text-danger"> |
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
17 <small> |
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
18 <i class="fa fa-warning"></i> {{ errors.user }}</small> |
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
19 </div> |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
20 </div> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
21 <div class="form-group row"> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
22 <label for="country">Country</label> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
23 <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
|
24 <option disabled value="">Please select one</option> |
422
9869bc03155e
refactor: Brushed up UI and added comfort
Thomas Junk <thomas.junk@intevation.de>
parents:
413
diff
changeset
|
25 <option v-for="country in countries" v-bind:value="country" v-bind:key="country">{{country}}</option> |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
26 </select> |
546
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
27 <div v-show="errors.country" class="text-danger"> |
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
28 <small> |
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
29 <i class="fa fa-warning"></i> {{ errors.country }}</small> |
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
30 </div> |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
31 </div> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
32 <div class="form-group row"> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
33 <label for="email">Email address</label> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
34 <input type="email" v-on:change="validateEmailaddress" class="form-control form-control-sm" id="email" aria-describedby="emailHelp" v-model="currentUser.email"> |
546
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
35 <div v-show="errors.email" class="text-danger"> |
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
36 <small> |
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
37 <i class="fa fa-warning"></i> {{ errors.email }}</small> |
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
38 </div> |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
39 </div> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
40 <div class="form-group row"> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
41 <label for="role">Role</label> |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
42 <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
|
43 <option disabled value="">Please select one</option> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
44 <option value="sys_admin">Sysadmin</option> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
45 <option value="waterway_admin">Waterway Admin</option> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
46 <option value="waterway_user">Waterway User</option> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
47 </select> |
546
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
48 <div v-show="errors.role" class="text-danger"> |
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
49 <small> |
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
50 <i class="fa fa-warning"></i> {{ errors.role }}</small> |
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
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 <div class="form-group row"> |
546
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
54 <PasswordField @fieldchange="passwordChanged" :placeholder="passwordPlaceholder" :label="passwordLabel" :passworderrors="errors.password"></PasswordField> |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
55 </div> |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
56 <div class="form-group row"> |
546
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
57 <PasswordField @fieldchange="passwordReChanged" :placeholder="passwordRePlaceholder" :label="passwordReLabel" :passworderrors="errors.passwordre"></PasswordField> |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
58 </div> |
375
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
374
diff
changeset
|
59 </div> |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
60 <div> |
422
9869bc03155e
refactor: Brushed up UI and added comfort
Thomas Junk <thomas.junk@intevation.de>
parents:
413
diff
changeset
|
61 <button type="submit" :disabled="submitted" class="shadow-sm btn btn-info pull-right">Submit</button> |
375
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
374
diff
changeset
|
62 </div> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
374
diff
changeset
|
63 </form> |
546
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
64 </div> |
356
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
65 </div> |
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
66 </div> |
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
67 </template> |
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
68 |
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
69 <style lang="scss"> |
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
70 @import "../assets/application.scss"; |
375
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
374
diff
changeset
|
71 |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
72 .formfields { |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
73 width: 10vw; |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
74 } |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
75 |
375
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
374
diff
changeset
|
76 .userdetails { |
379
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
77 margin-top: $large-offset; |
400
cb233a5a2ecd
fix: Fixed country validation on submit
Thomas Junk <thomas.junk@intevation.de>
parents:
397
diff
changeset
|
78 width: 48vw; |
379
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
79 margin-right: auto; |
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
80 height: 100%; |
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
81 } |
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
82 |
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
83 form { |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
84 margin-left: $offset; |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
85 font-size: 0.9rem; |
356
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
86 } |
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
87 </style> |
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
88 <script> |
413
a9440a4826aa
refactor: display errormessages refactored to own lib
Thomas Junk <thomas.junk@intevation.de>
parents:
411
diff
changeset
|
89 import { displayError } from "../lib/errors.js"; |
422
9869bc03155e
refactor: Brushed up UI and added comfort
Thomas Junk <thomas.junk@intevation.de>
parents:
413
diff
changeset
|
90 import { mapGetters } from "vuex"; |
487
91d0f23360e6
feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
483
diff
changeset
|
91 import PasswordField from "../components/Passwordfield"; |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
92 |
411
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
93 const emptyErrormessages = () => { |
397
b5555bf6d45c
fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents:
392
diff
changeset
|
94 return { |
b5555bf6d45c
fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents:
392
diff
changeset
|
95 email: "", |
b5555bf6d45c
fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents:
392
diff
changeset
|
96 country: "", |
b5555bf6d45c
fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents:
392
diff
changeset
|
97 role: "", |
b5555bf6d45c
fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents:
392
diff
changeset
|
98 password: "", |
b5555bf6d45c
fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents:
392
diff
changeset
|
99 passwordre: "" |
b5555bf6d45c
fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents:
392
diff
changeset
|
100 }; |
b5555bf6d45c
fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents:
392
diff
changeset
|
101 }; |
b5555bf6d45c
fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents:
392
diff
changeset
|
102 |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
103 const isEmailValid = email => { |
483
27502291e564
docs: Added comments on non trivial parts of the code
Thomas Junk <thomas.junk@intevation.de>
parents:
428
diff
changeset
|
104 /** |
27502291e564
docs: Added comments on non trivial parts of the code
Thomas Junk <thomas.junk@intevation.de>
parents:
428
diff
changeset
|
105 * |
27502291e564
docs: Added comments on non trivial parts of the code
Thomas Junk <thomas.junk@intevation.de>
parents:
428
diff
changeset
|
106 * For convenience purposes the same regex used as in the go code |
27502291e564
docs: Added comments on non trivial parts of the code
Thomas Junk <thomas.junk@intevation.de>
parents:
428
diff
changeset
|
107 * cf. types.go |
27502291e564
docs: Added comments on non trivial parts of the code
Thomas Junk <thomas.junk@intevation.de>
parents:
428
diff
changeset
|
108 * |
27502291e564
docs: Added comments on non trivial parts of the code
Thomas Junk <thomas.junk@intevation.de>
parents:
428
diff
changeset
|
109 */ |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
110 // eslint-disable-next-line |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
111 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
|
112 email |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
113 ); |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
114 }; |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
115 |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
116 const violatedPasswordRules = password => { |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
117 return ( |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
118 // rules according to issue 70 |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
119 password.length < 7 || |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
120 /\W/.test(password) == false || |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
121 /\d/.test(password) == false |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
122 ); |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
123 }; |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
124 |
356
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
125 export default { |
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
126 name: "userdetail", |
487
91d0f23360e6
feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
483
diff
changeset
|
127 components: { |
91d0f23360e6
feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
483
diff
changeset
|
128 PasswordField |
91d0f23360e6
feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
483
diff
changeset
|
129 }, |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
130 data() { |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
131 return { |
487
91d0f23360e6
feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
483
diff
changeset
|
132 passwordLabel: "Password", |
91d0f23360e6
feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
483
diff
changeset
|
133 passwordReLabel: "Repeat Password", |
91d0f23360e6
feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
483
diff
changeset
|
134 passwordPlaceholder: "password", |
91d0f23360e6
feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
483
diff
changeset
|
135 passwordRePlaceholder: "password again", |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
136 password: "", |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
137 passwordre: "", |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
138 currentUser: {}, |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
139 path: null, |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
140 submitted: false, |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
141 errors: { |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
142 email: "", |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
143 country: "", |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
144 role: "", |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
145 password: "", |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
146 passwordre: "" |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
147 } |
376
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 }, |
379
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
150 mounted() { |
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
151 this.currentUser = { ...this.user }; |
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
152 this.path = this.user.name; |
0a9aaf21f69f
feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents:
376
diff
changeset
|
153 }, |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
154 watch: { |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
155 user() { |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
156 this.currentUser = { ...this.user }; |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
157 this.path = this.user.name; |
411
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
158 this.clearPassword(); |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
159 this.clearErrors(); |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
160 } |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
161 }, |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
162 computed: { |
492
5a9dde6951ae
fix: N.N as Username is now a placeholder
Thomas Junk <thomas.junk@intevation.de>
parents:
487
diff
changeset
|
163 cardHeader() { |
5a9dde6951ae
fix: N.N as Username is now a placeholder
Thomas Junk <thomas.junk@intevation.de>
parents:
487
diff
changeset
|
164 if (this.currentUser.isNew) return "N.N"; |
5a9dde6951ae
fix: N.N as Username is now a placeholder
Thomas Junk <thomas.junk@intevation.de>
parents:
487
diff
changeset
|
165 return this.currentUser.user; |
5a9dde6951ae
fix: N.N as Username is now a placeholder
Thomas Junk <thomas.junk@intevation.de>
parents:
487
diff
changeset
|
166 }, |
5a9dde6951ae
fix: N.N as Username is now a placeholder
Thomas Junk <thomas.junk@intevation.de>
parents:
487
diff
changeset
|
167 userNamePlaceholder() { |
5a9dde6951ae
fix: N.N as Username is now a placeholder
Thomas Junk <thomas.junk@intevation.de>
parents:
487
diff
changeset
|
168 if (this.currentUser.isNew) return "N.N"; |
5a9dde6951ae
fix: N.N as Username is now a placeholder
Thomas Junk <thomas.junk@intevation.de>
parents:
487
diff
changeset
|
169 return ""; |
5a9dde6951ae
fix: N.N as Username is now a placeholder
Thomas Junk <thomas.junk@intevation.de>
parents:
487
diff
changeset
|
170 }, |
422
9869bc03155e
refactor: Brushed up UI and added comfort
Thomas Junk <thomas.junk@intevation.de>
parents:
413
diff
changeset
|
171 ...mapGetters("application", ["countries"]), |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
172 user() { |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
173 return this.$store.getters["usermanagement/currentUser"]; |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
174 }, |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
175 isFormValid() { |
411
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
176 return ( |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
177 isEmailValid(this.currentUser.email) && |
400
cb233a5a2ecd
fix: Fixed country validation on submit
Thomas Junk <thomas.junk@intevation.de>
parents:
397
diff
changeset
|
178 this.currentUser.country && |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
179 this.password === this.passwordre && |
411
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
180 (this.password === "" || !violatedPasswordRules(this.password)) |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
181 ); |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
182 } |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
183 }, |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
184 methods: { |
487
91d0f23360e6
feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
483
diff
changeset
|
185 passwordChanged(value) { |
91d0f23360e6
feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
483
diff
changeset
|
186 this.password = value; |
91d0f23360e6
feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
483
diff
changeset
|
187 this.validatePassword(); |
91d0f23360e6
feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
483
diff
changeset
|
188 }, |
91d0f23360e6
feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
483
diff
changeset
|
189 passwordReChanged(value) { |
91d0f23360e6
feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
483
diff
changeset
|
190 this.passwordre = value; |
91d0f23360e6
feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
483
diff
changeset
|
191 this.validatePassword(); |
91d0f23360e6
feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
483
diff
changeset
|
192 }, |
411
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
193 clearErrors() { |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
194 this.errors = emptyErrormessages(); |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
195 }, |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
196 clearPassword() { |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
197 this.password = ""; |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
198 this.passwordre = ""; |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
199 }, |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
200 closeDetailview() { |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
201 this.$store.commit("usermanagement/clearCurrentUser"); |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
202 this.$store.commit("usermanagement/setUserDetailsInvisible"); |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
203 }, |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
204 validateCountry() { |
411
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
205 this.errors.country = this.currentUser.country |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
206 ? "" |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
207 : "Please choose a country"; |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
208 }, |
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
209 validateRole() { |
411
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
210 this.errors.role = this.currentUser.role ? "" : "Please choose a role"; |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
211 }, |
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
212 validatePassword() { |
411
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
213 this.errors.passwordre = |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
214 this.password === this.passwordre ? "" : "Passwords do not match!"; |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
215 this.errors.password = |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
216 this.password === "" || !violatedPasswordRules(this.password) |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
217 ? "" |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
218 : "Password should at least be 8 char long including 1 digit and 1 special char like $"; |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
219 }, |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
220 validateEmailaddress() { |
411
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
221 this.errors.email = isEmailValid(this.currentUser.email) |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
222 ? "" |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
223 : "invalid email"; |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
224 }, |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
225 validate() { |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
226 this.validateCountry(); |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
227 this.validateRole(); |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
228 this.validatePassword(); |
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
229 this.validateEmailaddress(); |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
230 }, |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
231 save() { |
411
d428db60fad1
refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents:
406
diff
changeset
|
232 this.validate(); |
392
c57b952c60be
feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents:
389
diff
changeset
|
233 if (!this.isFormValid) return; |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
234 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
|
235 this.submitted = true; |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
236 this.$store |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
237 .dispatch("usermanagement/saveCurrentUser", { |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
238 path: this.user.user, |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
239 user: this.currentUser |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
240 }) |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
241 .then(() => { |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
242 this.submitted = false; |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
243 this.$store.dispatch("usermanagement/loadUsers").catch(error => { |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
244 const { status, data } = error.response; |
413
a9440a4826aa
refactor: display errormessages refactored to own lib
Thomas Junk <thomas.junk@intevation.de>
parents:
411
diff
changeset
|
245 displayError({ |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
246 title: "Backend Error", |
546
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
247 message: `${status}: ${data.message || data}` |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
248 }); |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
249 }); |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
250 }) |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
251 .catch(error => { |
389
e7d5383bc358
feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents:
379
diff
changeset
|
252 this.submitted = false; |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
253 const { status, data } = error.response; |
413
a9440a4826aa
refactor: display errormessages refactored to own lib
Thomas Junk <thomas.junk@intevation.de>
parents:
411
diff
changeset
|
254 displayError({ |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
255 title: "Error while saving user", |
546
b91791664554
refac: Errorhandling and formatting
Thomas Junk <thomas.junk@intevation.de>
parents:
492
diff
changeset
|
256 message: `${status}: ${data.message || data}` |
376
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
257 }); |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
258 }); |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
259 } |
e42f42eb9353
refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents:
375
diff
changeset
|
260 } |
356
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
261 }; |
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
262 </script> |