# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1535112597 -7200
# Node ID 9a3b6dae09397efd715e00f22ecec9a585a97bf4
# Parent  91d0f23360e637383b431a03489d539b30ab8d43
fix: Added (now) styled component of Passwordfield

diff -r 91d0f23360e6 -r 9a3b6dae0939 client/src/components/Passwordfield.vue
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Passwordfield.vue	Fri Aug 24 14:09:57 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>
+      <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"],
+  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>