Mercurial > gemma
view client/src/components/Passwordfield.vue @ 488:9a3b6dae0939
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 |
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> <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> <script> export default { name: "passwordfield", props: ["model", "placeholder", "label", "passworderrors"], 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>