Mercurial > gemma

comparison client/src/components/usermanagement/Passwordfield.vue @ 1558:0ded4c56978e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: component filestructure. remove admin/map hierarchy
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 12 Dec 2018 09:22:20 +0100
parents client/src/components/admin/usermanagement/Passwordfield.vue@a679f765d7b0
children 6c5364ff0abb
comparison
equal deleted inserted replaced
1557:62171cd9a42b 1558:0ded4c56978e
1 <template>
2 <div class="w-100">
3 <div class="d-flex flex-row">
4 <label for="password">{{ this.label }}</label>
5 </div>
6 <div class="d-flex d-row">
7 <input
8 :type="isPasswordVisible"
9 @change="fieldChanged"
10 class="form-control"
11 :placeholder="placeholder"
12 :required="required"
13 />
14 <span class="input-group-text" @click="showPassword">
15 <font-awesome-icon
16 :icon="readablePassword ? 'eye-slash' : 'eye'"
17 ></font-awesome-icon>
18 </span>
19 </div>
20 <div v-show="passworderrors" class="text-danger">
21 <small>
22 <font-awesome-icon icon="exclamation-triangle"></font-awesome-icon>
23 {{ this.passworderrors }}
24 </small>
25 </div>
26 </div>
27 </template>
28
29 <style>
30 /* FIXME does not work here, unclear why, so added to Login.vue
31 input[type="password"]::-ms-reveal {
32 display: none;
33 } */
34 </style>
35
36 <script>
37 /* This is Free Software under GNU Affero General Public License v >= 3.0
38 * without warranty, see README.md and license for details.
39 *
40 * SPDX-License-Identifier: AGPL-3.0-or-later
41 * License-Filename: LICENSES/AGPL-3.0.txt
42 *
43 * Copyright (C) 2018 by via donau
44 * – Österreichische Wasserstraßen-Gesellschaft mbH
45 * Software engineering by Intevation GmbH
46 *
47 * Author(s):
48 * Thomas Junk <thomas.junk@intevation.de>
49 */
50 export default {
51 name: "passwordfield",
52 props: ["model", "placeholder", "label", "passworderrors", "required"],
53 data() {
54 return {
55 password: "",
56 readablePassword: false
57 };
58 },
59 methods: {
60 showPassword() {
61 this.readablePassword = !this.readablePassword;
62 },
63 fieldChanged(e) {
64 this.$emit("fieldchange", e.target.value);
65 }
66 },
67 computed: {
68 isPasswordVisible() {
69 return this.readablePassword ? "text" : "password";
70 }
71 }
72 };
73 </script>