Mercurial > gemma
view client/src/usermanagement/Passwordfield.vue @ 1123:d9e6a1f6f394 store-refactoring
moved all collapse flags for UI elements to store
UI elements can now be expanded/collapsed via the application store
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 06 Nov 2018 13:00:17 +0100 |
parents | ca628dce90dd |
children |
line wrap: on
line source
<template> <div> <label for="password">{{this.label}}</label> <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"><i :class="eyeIcon"></i></span> </div> <div v-show="passworderrors" class="text-danger"><small><i class="fa fa-warning"></i> {{ 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"; }, eyeIcon() { return { fa: true, "fa-eye": !this.readablePassword, "fa-eye-slash": this.readablePassword }; } } }; </script>