Merge pull request #44 from inshopgroup/user-form-password

add form password

src/components/form/FormPassword.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-text-field
+    :value="item[property]"
+    :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
+    :type="show ? 'text' : 'password'"
+    :error-messages="$t(error)"
+    :placeholder="placeholder"
+    dense
+    :label="$t(label)"
+    outlined
+    autocomplete="new-password"
+    @click:append="show = !show"
+    @input="$emit('formUpdated', property, $event)"
+  >
+  </v-text-field>
+</template>
+
+<script>
+export default {
+  name: 'FormPassword',
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+    property: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      default: null,
+    },
+    placeholder: {
+      type: String,
+      default: null,
+    },
+    errors: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      show: false,
+    }
+  },
+  computed: {
+    error() {
+      return Object.keys(this.errors).length > 0
+        ? this.errors[this.property]
+        : ''
+    },
+  },
+}
+</script>

src/pages/user/Form.vue

@@ -60,37 +60,39 @@
 import { mapActions, mapGetters } from 'vuex'
 import ItemEditActions from '../../components/layout/ItemEditActions'
 import ItemErrors from '../../components/layout/errors/ItemErrors'
+import FormPassword from '../../components/form/FormPassword'
 
 export default {
   components: {
     ItemErrors,
-    ItemEditActions
+    ItemEditActions,
+    FormPassword,
   },
   props: {
     handleSubmit: {
       type: Function,
-      required: true
+      required: true,
     },
     item: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   computed: {
     ...mapGetters({
-      errors: 'user/errors'
-    })
+      errors: 'user/errors',
+    }),
   },
   beforeDestroy() {
     this.reset()
   },
   methods: {
     ...mapActions({
-      reset: 'user/reset'
+      reset: 'user/reset',
     }),
     updateValue(property, value) {
       this.$store.commit('user/USER_UPDATE_ITEM', { [property]: value })
-    }
-  }
+    },
+  },
 }
 </script>