Mercurial > gemma
view client/src/components/usermanagement/Passwordfield.vue @ 4145:6095e95db454
optical adjustments to nowline and now line label
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 02 Aug 2019 11:11:32 +0200 |
parents | 6c5364ff0abb |
children |
line wrap: on
line source
<template> <div class="w-100"> <div class="d-flex flex-row"> <label for="password">{{ this.label }}</label> </div> <div class="d-flex d-row"> <input :type="isPasswordVisible" @change="fieldChanged" class="form-control" :placeholder="placeholder" :required="required" /> <span class="input-group-text" @click="showPassword"> <font-awesome-icon :icon="readablePassword ? 'eye-slash' : 'eye'" /> </span> </div> <div v-show="passworderrors" class="text-danger"> <small> <font-awesome-icon icon="exclamation-triangle" /> {{ this.passworderrors }} </small> </div> </div> </template> <style> /* FIXME does not work here, unclear why, so added to Login.vue input[type="password"]::-ms-reveal { display: none; } */ </style> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Thomas Junk <thomas.junk@intevation.de> */ export default { name: "passwordfield", props: ["model", "placeholder", "label", "passworderrors", "required"], data() { return { password: "", readablePassword: false }; }, methods: { showPassword() { this.readablePassword = !this.readablePassword; }, fieldChanged(e) { this.$emit("fieldchange", e.target.value); } }, computed: { isPasswordVisible() { return this.readablePassword ? "text" : "password"; } } }; </script>