Mercurial > gemma
changeset 487:91d0f23360e6
feat: Password field as custom component refactored
In order to provide a common UX of having an eye icon
near an password field, a separate comonent makes sense.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 24 Aug 2018 14:02:53 +0200 |
parents | 7a8644e9e50e |
children | 9a3b6dae0939 4b39e7f651ed |
files | client/src/components/Userdetail.vue |
diffstat | 1 files changed, 26 insertions(+), 6 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Userdetail.vue Fri Aug 24 12:14:56 2018 +0200 +++ b/client/src/components/Userdetail.vue Fri Aug 24 14:02:53 2018 +0200 @@ -37,14 +37,18 @@ <div v-show="errors.role" class="text-danger"><small><i class="fa fa-warning"></i> {{ errors.role }}</small></div> </div> <div class="form-group row"> - <label for="password">Password</label> - <input type="password" v-on:change="validatePassword" class="form-control form-control-sm" id="password" aria-describedby="passwordHelp" v-model="password"> - <div v-show="errors.password" class="text-danger"><small><i class="fa fa-warning"></i> {{ errors.password }}</small></div> + <PasswordField @fieldchange="passwordChanged" + :placeholder="passwordPlaceholder" + :label="passwordLabel" + :passworderrors="errors.password" + ></PasswordField> </div> <div class="form-group row"> - <label for="passwordre">Retype Password</label> - <input type="password" v-on:change="validatePassword" class="form-control form-control-sm" id="passwordre" aria-describedby="passwordreHelp" v-model="passwordre"> - <div v-show="errors.passwordre" class="text-danger"><small><i class="fa fa-warning"></i> {{ errors.passwordre }}</small></div> + <PasswordField @fieldchange="passwordReChanged" + :placeholder="passwordRePlaceholder" + :label="passwordReLabel" + :passworderrors="errors.passwordre" + ></PasswordField> </div> </div> <div> @@ -78,6 +82,7 @@ <script> import { displayError } from "../lib/errors.js"; import { mapGetters } from "vuex"; +import PasswordField from "../components/Passwordfield"; const emptyErrormessages = () => { return { @@ -113,8 +118,15 @@ export default { name: "userdetail", + components: { + PasswordField + }, data() { return { + passwordLabel: "Password", + passwordReLabel: "Repeat Password", + passwordPlaceholder: "password", + passwordRePlaceholder: "password again", password: "", passwordre: "", currentUser: {}, @@ -156,6 +168,14 @@ } }, methods: { + passwordChanged(value) { + this.password = value; + this.validatePassword(); + }, + passwordReChanged(value) { + this.passwordre = value; + this.validatePassword(); + }, clearErrors() { this.errors = emptyErrormessages(); },