Mercurial > gemma
diff client/src/usermanagement/Passwordfield.vue @ 585:ef307bd6b5d8
refac: restructured client application
To make the application more accessible for developers, the structure was reorganized.
Instead of sticking to technical terminology, the application terminology is according to the domain:
I.e. "map" contains everything regarding map (including store).
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 07 Sep 2018 11:13:56 +0200 |
parents | |
children | 51dc26b0f066 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/usermanagement/Passwordfield.vue Fri Sep 07 11:13:56 2018 +0200 @@ -0,0 +1,43 @@ +<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>