Mercurial > gemma

changeset 487:91d0f23360e6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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();
     },