Mercurial > gemma

annotate client/src/components/Userdetail.vue @ 551:89bc8111563a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: Layout adjustments
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 31 Aug 2018 14:12:00 +0200
parents b91791664554
children 09d8e5483851
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">
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 {
551
89bc8111563a refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents: 546
diff changeset
77 margin-top: $topbarheight;
89bc8111563a refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents: 546
diff changeset
78 min-width: 40vw;
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>