Mercurial > gemma
view client/src/components/Passwordfield.vue @ 515:ef7f56d326ae
fix: gemma configuration added to .hgignore
In order to prevent accidentally committing gemma.toml
it was added to .hgignore
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 27 Aug 2018 11:56:43 +0200 |
parents | 6fbd5b83ae04 |
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> <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>