Mercurial > gemma

annotate client/src/components/Userdetail.vue @ 428:d7a06b9fffc9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
feat: Usability for usermanagement improved.
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 17 Aug 2018 09:23:42 +0200
parents 9869bc03155e
children 27502291e564
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">
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
5 {{ currentUser.user }}
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
6 <span @click="closeDetailview" class="pull-right"><i class="fa fa-close"></i></span>
375
112527683ee9 Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents: 374
diff changeset
7 </div>
362
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
8 <div class="card-body">
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
9 <form @submit.prevent="save">
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
10 <div class="formfields">
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
11 <div v-if="currentUser.isNew" class="form-group row">
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
12 <label for="user">Username</label>
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
13 <input type="user" class="form-control form-control-sm" id="user" aria-describedby="userHelp" v-model="currentUser.user">
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
14 <div v-show="errors.user" class="text-danger"><small><i class="fa fa-warning"></i> {{ errors.user }}</small></div>
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
15 </div>
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
16 <div class="form-group row">
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
17 <label for="country">Country</label>
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
18 <select class="form-control form-control-sm" v-on:change="validateCountry" v-model="currentUser.country">
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
19 <option disabled value="">Please select one</option>
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">
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
40 <label for="password">Password</label>
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
41 <input type="password" v-on:change="validatePassword" class="form-control form-control-sm" id="password" aria-describedby="passwordHelp" v-model="password">
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
42 <div v-show="errors.password" class="text-danger"><small><i class="fa fa-warning"></i> {{ errors.password }}</small></div>
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
43 </div>
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
44 <div class="form-group row">
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
45 <label for="passwordre">Retype Password</label>
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
46 <input type="password" v-on:change="validatePassword" class="form-control form-control-sm" id="passwordre" aria-describedby="passwordreHelp" v-model="passwordre">
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
47 <div v-show="errors.passwordre" class="text-danger"><small><i class="fa fa-warning"></i> {{ errors.passwordre }}</small></div>
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
48 </div>
375
112527683ee9 Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents: 374
diff changeset
49 </div>
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
50 <div>
422
9869bc03155e refactor: Brushed up UI and added comfort
Thomas Junk <thomas.junk@intevation.de>
parents: 413
diff changeset
51 <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
52 </div>
112527683ee9 Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents: 374
diff changeset
53 </form>
112527683ee9 Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents: 374
diff changeset
54 </div>
356
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
55 </div>
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
56 </div>
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
57 </template>
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
58
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
59 <style lang="scss">
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
60 @import "../assets/application.scss";
375
112527683ee9 Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents: 374
diff changeset
61
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
62 .formfields {
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
63 width: 10vw;
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
64 }
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
65
375
112527683ee9 Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents: 374
diff changeset
66 .userdetails {
379
0a9aaf21f69f feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents: 376
diff changeset
67 margin-top: $large-offset;
400
cb233a5a2ecd fix: Fixed country validation on submit
Thomas Junk <thomas.junk@intevation.de>
parents: 397
diff changeset
68 width: 48vw;
379
0a9aaf21f69f feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents: 376
diff changeset
69 margin-right: auto;
0a9aaf21f69f feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents: 376
diff changeset
70 height: 100%;
0a9aaf21f69f feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents: 376
diff changeset
71 }
0a9aaf21f69f feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents: 376
diff changeset
72
0a9aaf21f69f feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents: 376
diff changeset
73 form {
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
74 margin-left: $offset;
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
75 font-size: 0.9rem;
356
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
76 }
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
77 </style>
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
78 <script>
413
a9440a4826aa refactor: display errormessages refactored to own lib
Thomas Junk <thomas.junk@intevation.de>
parents: 411
diff changeset
79 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
80 import { mapGetters } from "vuex";
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
81
411
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
82 const emptyErrormessages = () => {
397
b5555bf6d45c fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents: 392
diff changeset
83 return {
b5555bf6d45c fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents: 392
diff changeset
84 email: "",
b5555bf6d45c fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents: 392
diff changeset
85 country: "",
b5555bf6d45c fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents: 392
diff changeset
86 role: "",
b5555bf6d45c fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents: 392
diff changeset
87 password: "",
b5555bf6d45c fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents: 392
diff changeset
88 passwordre: ""
b5555bf6d45c fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents: 392
diff changeset
89 };
b5555bf6d45c fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents: 392
diff changeset
90 };
b5555bf6d45c fix: Clear errors on user switch
Thomas Junk <thomas.junk@intevation.de>
parents: 392
diff changeset
91
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
92 const isEmailValid = email => {
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
93 /* cf. types.go */
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
94 // eslint-disable-next-line
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
95 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
96 email
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
97 );
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
98 };
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
99
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
100 const violatedPasswordRules = password => {
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
101 return (
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
102 // rules according to issue 70
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
103 password.length < 7 ||
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
104 /\W/.test(password) == false ||
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
105 /\d/.test(password) == false
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
106 );
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
356
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
109 export default {
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
110 name: "userdetail",
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
111 data() {
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
112 return {
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
113 password: "",
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
114 passwordre: "",
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
115 currentUser: {},
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
116 path: null,
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
117 submitted: false,
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
118 errors: {
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
119 email: "",
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
120 country: "",
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
121 role: "",
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
122 password: "",
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
123 passwordre: ""
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
124 }
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
125 };
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
126 },
379
0a9aaf21f69f feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents: 376
diff changeset
127 mounted() {
0a9aaf21f69f feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents: 376
diff changeset
128 this.currentUser = { ...this.user };
0a9aaf21f69f feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents: 376
diff changeset
129 this.path = this.user.name;
0a9aaf21f69f feat: usermanagement
Thomas Junk <thomas.junk@intevation.de>
parents: 376
diff changeset
130 },
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
131 watch: {
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
132 user() {
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
133 this.currentUser = { ...this.user };
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
134 this.path = this.user.name;
411
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
135 this.clearPassword();
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
136 this.clearErrors();
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
137 }
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
138 },
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
139 computed: {
422
9869bc03155e refactor: Brushed up UI and added comfort
Thomas Junk <thomas.junk@intevation.de>
parents: 413
diff changeset
140 ...mapGetters("application", ["countries"]),
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
141 user() {
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
142 return this.$store.getters["usermanagement/currentUser"];
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
143 },
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
144 isFormValid() {
411
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
145 return (
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
146 isEmailValid(this.currentUser.email) &&
400
cb233a5a2ecd fix: Fixed country validation on submit
Thomas Junk <thomas.junk@intevation.de>
parents: 397
diff changeset
147 this.currentUser.country &&
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
148 this.password === this.passwordre &&
411
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
149 (this.password === "" || !violatedPasswordRules(this.password))
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
150 );
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
151 }
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
152 },
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
153 methods: {
411
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
154 clearErrors() {
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
155 this.errors = emptyErrormessages();
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
156 },
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
157 clearPassword() {
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
158 this.password = "";
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
159 this.passwordre = "";
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
160 },
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
161 closeDetailview() {
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
162 this.$store.commit("usermanagement/clearCurrentUser");
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
163 this.$store.commit("usermanagement/setUserDetailsInvisible");
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
164 },
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
165 validateCountry() {
411
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
166 this.errors.country = this.currentUser.country
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
167 ? ""
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
168 : "Please choose a country";
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
169 },
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
170 validateRole() {
411
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
171 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
172 },
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
173 validatePassword() {
411
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
174 this.errors.passwordre =
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
175 this.password === this.passwordre ? "" : "Passwords do not match!";
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
176 this.errors.password =
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
177 this.password === "" || !violatedPasswordRules(this.password)
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
178 ? ""
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
179 : "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
180 },
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
181 validateEmailaddress() {
411
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
182 this.errors.email = isEmailValid(this.currentUser.email)
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
183 ? ""
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
184 : "invalid email";
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
185 },
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
186 validate() {
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
187 this.validateCountry();
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
188 this.validateRole();
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
189 this.validatePassword();
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
190 this.validateEmailaddress();
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
191 },
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
192 save() {
411
d428db60fad1 refactor: Refactoring validation
Thomas Junk <thomas.junk@intevation.de>
parents: 406
diff changeset
193 this.validate();
392
c57b952c60be feat: Improved user input validation
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
194 if (!this.isFormValid) return;
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
195 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
196 this.submitted = true;
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
197 this.$store
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
198 .dispatch("usermanagement/saveCurrentUser", {
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
199 path: this.user.user,
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
200 user: this.currentUser
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
201 })
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
202 .then(() => {
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
203 this.submitted = false;
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
204 this.$store.dispatch("usermanagement/loadUsers").catch(error => {
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
205 const { status, data } = error.response;
413
a9440a4826aa refactor: display errormessages refactored to own lib
Thomas Junk <thomas.junk@intevation.de>
parents: 411
diff changeset
206 displayError({
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
207 title: "Backend Error",
406
40e7ab3df32c feat: Basic CRUD for usermanagement etd
Thomas Junk <thomas.junk@intevation.de>
parents: 401
diff changeset
208 message: `${status}: ${data.message}`
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
209 });
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
210 });
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
211 })
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
212 .catch(error => {
389
e7d5383bc358 feat: Primitive validation and error messages
Thomas Junk <thomas.junk@intevation.de>
parents: 379
diff changeset
213 this.submitted = false;
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
214 const { status, data } = error.response;
413
a9440a4826aa refactor: display errormessages refactored to own lib
Thomas Junk <thomas.junk@intevation.de>
parents: 411
diff changeset
215 displayError({
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
216 title: "Error while saving user",
406
40e7ab3df32c feat: Basic CRUD for usermanagement etd
Thomas Junk <thomas.junk@intevation.de>
parents: 401
diff changeset
217 message: `${status}: ${data.message}`
376
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
218 });
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
219 });
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
220 }
e42f42eb9353 refactor: Userdetails refactored to card model
Thomas Junk <thomas.junk@intevation.de>
parents: 375
diff changeset
221 }
356
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
222 };
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
223 </script>