Mercurial > gemma

comparison client/src/components/Passwordfield.vue @ 488:9a3b6dae0939

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fix: Added (now) styled component of Passwordfield
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 24 Aug 2018 14:09:57 +0200
parents
children 6fbd5b83ae04
comparison
equal deleted inserted replaced
487:91d0f23360e6 488:9a3b6dae0939
1 <template>
2 <div>
3 <label for="password">{{this.label}}</label>
4 <div class="d-flex d-row">
5 <input :type="isPasswordVisible" @change="fieldChanged" class="form-control" :placeholder='placeholder' required>
6 <span class="input-group-text" @click="showPassword"><i :class="eyeIcon"></i></span>
7 </div>
8 <div v-show="passworderrors" class="text-danger"><small><i class="fa fa-warning"></i> {{ this.passworderrors}}</small></div>
9 </div>
10 </template>
11
12 <script>
13 export default {
14 name: "passwordfield",
15 props: ["model", "placeholder", "label", "passworderrors"],
16 data() {
17 return {
18 password: "",
19 readablePassword: false
20 };
21 },
22 methods: {
23 showPassword() {
24 this.readablePassword = !this.readablePassword;
25 },
26 fieldChanged(e) {
27 this.$emit("fieldchange", e.target.value);
28 }
29 },
30 computed: {
31 isPasswordVisible() {
32 return this.readablePassword ? "text" : "password";
33 },
34 eyeIcon() {
35 return {
36 fa: true,
37 "fa-eye": !this.readablePassword,
38 "fa-eye-slash": this.readablePassword
39 };
40 }
41 }
42 };
43 </script>