Mercurial > gemma
view client/src/usermanagement/Passwordfield.vue @ 691:d643ff60f607
Client: improve style of waterway axis.
* Add label and circle style to waterway axis via WFS.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Thu, 20 Sep 2018 14:33:34 +0200 |
parents | 51dc26b0f066 |
children | ca628dce90dd |
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> 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>