Mercurial > gemma
view client/src/usermanagement/Passwordfield.vue @ 615:4ffdb922db44
Document adding of external OGC services.
author | Tom Gottfried <tom@intevation.de> |
---|---|
date | Mon, 10 Sep 2018 19:12:24 +0200 |
parents | ef307bd6b5d8 |
children | 51dc26b0f066 |
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>