Mercurial > gemma

annotate client/src/components/Userdetail.vue @ 492:5a9dde6951ae

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fix: N.N as Username is now a placeholder See Issue104
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 24 Aug 2018 14:21:46 +0200
parents 91d0f23360e6
children b91791664554
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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">
492
5a9dde6951ae fix: N.N as Username is now a placeholder
Thomas Junk <thomas.junk@intevation.de>
parents: 487
diff changeset
5 {{ this.cardHeader }}
389
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>
492
5a9dde6951ae fix: N.N as Username is now a placeholder
Thomas Junk <thomas.junk@intevation.de>
parents: 487
diff changeset
13 <input type="user" :placeholder="userNamePlaceholder" 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>
422
9869bc03155e refactor: Brushed up UI and added comfort
Thomas Junk <thomas.junk@intevation.de>
parents: 413
diff changeset
20 <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
21 </select>
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
22 <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
23 </div>
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
24 <div class="form-group row">
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
25 <label for="email">Email address</label>
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
26 <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
27 <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
28 </div>
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
29 <div class="form-group row">
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
30 <label for="role">Role</label>
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
31 <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
32 <option disabled value="">Please select one</option>
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
33 <option value="sys_admin">Sysadmin</option>
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
34 <option value="waterway_admin">Waterway Admin</option>
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
35 <option value="waterway_user">Waterway User</option>
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
36 </select>
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
37 <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
38 </div>
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
39 <div class="form-group row">
487
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
40 <PasswordField @fieldchange="passwordChanged"
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
41 :placeholder="passwordPlaceholder"
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
42 :label="passwordLabel"
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
43 :passworderrors="errors.password"
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
44 ></PasswordField>
389
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">
487
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
47 <PasswordField @fieldchange="passwordReChanged"
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
48 :placeholder="passwordRePlaceholder"
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
49 :label="passwordReLabel"
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
50 :passworderrors="errors.passwordre"
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
51 ></PasswordField>
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
52 </div>
375
112527683ee9 Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents: 374
diff changeset
53 </div>
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
54 <div>
422
9869bc03155e refactor: Brushed up UI and added comfort
Thomas Junk <thomas.junk@intevation.de>
parents: 413
diff changeset
55 <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
56 </div>
112527683ee9 Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents: 374
diff changeset
57 </form>
112527683ee9 Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents: 374
diff changeset
58 </div>
356
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
59 </div>
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
60 </div>
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
61 </template>
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
62
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
63 <style lang="scss">
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
64 @import "../assets/application.scss";
375
112527683ee9 Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents: 374
diff changeset
65
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
66 .formfields {
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
67 width: 10vw;
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
68 }
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
69
375
112527683ee9 Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents: 374
diff changeset
70 .userdetails {
379
0a9aaf21f69f feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents: 376
diff changeset
71 margin-top: $large-offset;
400
cb233a5a2ecd fix: Fixed country validation on submit
Thomas Junk <thomas.junk@intevation.de>
parents: 397
diff changeset
72 width: 48vw;
379
0a9aaf21f69f feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents: 376
diff changeset
73 margin-right: auto;
0a9aaf21f69f feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents: 376
diff changeset
74 height: 100%;
0a9aaf21f69f feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents: 376
diff changeset
75 }
0a9aaf21f69f feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents: 376
diff changeset
76
0a9aaf21f69f feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents: 376
diff changeset
77 form {
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
78 margin-left: $offset;
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
79 font-size: 0.9rem;
356
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
80 }
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
81 </style>
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
82 <script>
413
a9440a4826aa refactor: display errormessages refactored to own lib
Thomas Junk <thomas.junk@intevation.de>
parents: 411
diff changeset
83 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
84 import { mapGetters } from "vuex";
487
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
85 import PasswordField from "../components/Passwordfield";
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
86
411
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
87 const emptyErrormessages = () => {
397
b5555bf6d45c fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents: 392
diff changeset
88 return {
b5555bf6d45c fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents: 392
diff changeset
89 email: "",
b5555bf6d45c fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents: 392
diff changeset
90 country: "",
b5555bf6d45c fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents: 392
diff changeset
91 role: "",
b5555bf6d45c fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents: 392
diff changeset
92 password: "",
b5555bf6d45c fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents: 392
diff changeset
93 passwordre: ""
b5555bf6d45c fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents: 392
diff changeset
94 };
b5555bf6d45c fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents: 392
diff changeset
95 };
b5555bf6d45c fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents: 392
diff changeset
96
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
97 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
98 /**
27502291e564 docs: Added comments on non trivial parts of the code
Thomas Junk <thomas.junk@intevation.de>
parents: 428
diff changeset
99 *
27502291e564 docs: Added comments on non trivial parts of the code
Thomas Junk <thomas.junk@intevation.de>
parents: 428
diff changeset
100 * 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
101 * cf. types.go
27502291e564 docs: Added comments on non trivial parts of the code
Thomas Junk <thomas.junk@intevation.de>
parents: 428
diff changeset
102 *
27502291e564 docs: Added comments on non trivial parts of the code
Thomas Junk <thomas.junk@intevation.de>
parents: 428
diff changeset
103 */
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
104 // eslint-disable-next-line
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
105 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
106 email
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
107 );
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
108 };
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
109
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
110 const violatedPasswordRules = password => {
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
111 return (
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
112 // rules according to issue 70
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
113 password.length < 7 ||
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
114 /\W/.test(password) == false ||
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
115 /\d/.test(password) == false
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
116 );
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
117 };
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
118
356
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
119 export default {
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
120 name: "userdetail",
487
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
121 components: {
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
122 PasswordField
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
123 },
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
124 data() {
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
125 return {
487
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
126 passwordLabel: "Password",
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
127 passwordReLabel: "Repeat Password",
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
128 passwordPlaceholder: "password",
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
129 passwordRePlaceholder: "password again",
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
130 password: "",
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
131 passwordre: "",
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
132 currentUser: {},
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
133 path: null,
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
134 submitted: false,
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
135 errors: {
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
136 email: "",
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
137 country: "",
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
138 role: "",
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
139 password: "",
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
140 passwordre: ""
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
141 }
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
142 };
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
143 },
379
0a9aaf21f69f feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents: 376
diff changeset
144 mounted() {
0a9aaf21f69f feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents: 376
diff changeset
145 this.currentUser = { ...this.user };
0a9aaf21f69f feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents: 376
diff changeset
146 this.path = this.user.name;
0a9aaf21f69f feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents: 376
diff changeset
147 },
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
148 watch: {
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
149 user() {
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
150 this.currentUser = { ...this.user };
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
151 this.path = this.user.name;
411
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
152 this.clearPassword();
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
153 this.clearErrors();
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
154 }
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
155 },
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
156 computed: {
492
5a9dde6951ae fix: N.N as Username is now a placeholder
Thomas Junk <thomas.junk@intevation.de>
parents: 487
diff changeset
157 cardHeader() {
5a9dde6951ae fix: N.N as Username is now a placeholder
Thomas Junk <thomas.junk@intevation.de>
parents: 487
diff changeset
158 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
159 return this.currentUser.user;
5a9dde6951ae fix: N.N as Username is now a placeholder
Thomas Junk <thomas.junk@intevation.de>
parents: 487
diff changeset
160 },
5a9dde6951ae fix: N.N as Username is now a placeholder
Thomas Junk <thomas.junk@intevation.de>
parents: 487
diff changeset
161 userNamePlaceholder() {
5a9dde6951ae fix: N.N as Username is now a placeholder
Thomas Junk <thomas.junk@intevation.de>
parents: 487
diff changeset
162 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
163 return "";
5a9dde6951ae fix: N.N as Username is now a placeholder
Thomas Junk <thomas.junk@intevation.de>
parents: 487
diff changeset
164 },
422
9869bc03155e refactor: Brushed up UI and added comfort
Thomas Junk <thomas.junk@intevation.de>
parents: 413
diff changeset
165 ...mapGetters("application", ["countries"]),
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
166 user() {
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
167 return this.$store.getters["usermanagement/currentUser"];
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
168 },
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
169 isFormValid() {
411
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
170 return (
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
171 isEmailValid(this.currentUser.email) &&
400
cb233a5a2ecd fix: Fixed country validation on submit
Thomas Junk <thomas.junk@intevation.de>
parents: 397
diff changeset
172 this.currentUser.country &&
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
173 this.password === this.passwordre &&
411
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
174 (this.password === "" || !violatedPasswordRules(this.password))
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
175 );
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
176 }
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
177 },
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
178 methods: {
487
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
179 passwordChanged(value) {
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
180 this.password = value;
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
181 this.validatePassword();
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
182 },
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
183 passwordReChanged(value) {
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
184 this.passwordre = value;
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
185 this.validatePassword();
91d0f23360e6 feat: Password field as custom component refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 483
diff changeset
186 },
411
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
187 clearErrors() {
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
188 this.errors = emptyErrormessages();
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
189 },
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
190 clearPassword() {
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
191 this.password = "";
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
192 this.passwordre = "";
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
193 },
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
194 closeDetailview() {
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
195 this.$store.commit("usermanagement/clearCurrentUser");
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
196 this.$store.commit("usermanagement/setUserDetailsInvisible");
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
197 },
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
198 validateCountry() {
411
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
199 this.errors.country = this.currentUser.country
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
200 ? ""
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
201 : "Please choose a country";
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
202 },
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
203 validateRole() {
411
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
204 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
205 },
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
206 validatePassword() {
411
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
207 this.errors.passwordre =
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
208 this.password === this.passwordre ? "" : "Passwords do not match!";
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
209 this.errors.password =
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
210 this.password === "" || !violatedPasswordRules(this.password)
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
211 ? ""
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
212 : "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
213 },
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
214 validateEmailaddress() {
411
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
215 this.errors.email = isEmailValid(this.currentUser.email)
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
216 ? ""
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
217 : "invalid email";
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
218 },
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
219 validate() {
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
220 this.validateCountry();
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
221 this.validateRole();
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
222 this.validatePassword();
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
223 this.validateEmailaddress();
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
224 },
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
225 save() {
411
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
226 this.validate();
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
227 if (!this.isFormValid) return;
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
228 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
229 this.submitted = true;
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
230 this.$store
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
231 .dispatch("usermanagement/saveCurrentUser", {
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
232 path: this.user.user,
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
233 user: this.currentUser
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
234 })
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
235 .then(() => {
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
236 this.submitted = false;
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
237 this.$store.dispatch("usermanagement/loadUsers").catch(error => {
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
238 const { status, data } = error.response;
413
a9440a4826aa refactor: display errormessages refactored to own lib
Thomas Junk <thomas.junk@intevation.de>
parents: 411
diff changeset
239 displayError({
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
240 title: "Backend Error",
406
40e7ab3df32c feat: Basic CRUD for usermanagement etd
Thomas Junk <thomas.junk@intevation.de>
parents: 401
diff changeset
241 message: `${status}: ${data.message}`
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
242 });
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
243 });
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
244 })
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
245 .catch(error => {
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
246 this.submitted = false;
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
247 const { status, data } = error.response;
413
a9440a4826aa refactor: display errormessages refactored to own lib
Thomas Junk <thomas.junk@intevation.de>
parents: 411
diff changeset
248 displayError({
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
249 title: "Error while saving user",
406
40e7ab3df32c feat: Basic CRUD for usermanagement etd
Thomas Junk <thomas.junk@intevation.de>
parents: 401
diff changeset
250 message: `${status}: ${data.message}`
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
251 });
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
252 });
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
253 }
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
254 }
356
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
255 };
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
256 </script>