From edfaacbb5f07232eca182136e13d08838d12feba Mon Sep 17 00:00:00 2001
From: Ponkhy <xtheponkhx@gmail.com>
Date: Tue, 7 Sep 2021 02:24:02 +0200
Subject: [PATCH] Added component HiddenInput.vue

---
 src/components/HiddenInput.vue | 59 ++++++++++++++++++++++++++++++++++
 src/icon.js                    |  4 +--
 2 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 src/components/HiddenInput.vue

diff --git a/src/components/HiddenInput.vue b/src/components/HiddenInput.vue
new file mode 100644
index 000000000..5b2b77aec
--- /dev/null
+++ b/src/components/HiddenInput.vue
@@ -0,0 +1,59 @@
+<template>
+    <div class="input-group mb-3">
+        <input v-model="model" :type="visibility" class="form-control" :placeholder="placeholder" :maxlength="maxlength" :autocomplete="autocomplete" :required="required">
+        <a v-if="visibility == 'password'" class="btn btn-outline-primary" @click="showInput()">
+            <font-awesome-icon icon="eye" />
+        </a>
+        <a v-if="visibility == 'text'" class="btn btn-outline-primary" @click="hideInput()">
+            <font-awesome-icon icon="eye-slash" />
+        </a>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        modelValue: {
+            type: String,
+            default: ""
+        },
+        placeholder: {
+            type: String,
+            default: ""
+        },
+        maxlength: {
+            type: Number,
+            default: 255
+        },
+        autocomplete: {
+            type: Boolean,
+        },
+        required: {
+            type: Boolean
+        },
+    },
+    data() {
+        return {
+            visibility: "password"
+        }
+    },
+    computed: {
+        model: {
+            get() {
+                return this.modelValue
+            },
+            set(value) {
+                this.$emit('update:modelValue', value)
+            }
+        }
+    },
+    methods: {
+        showInput() {
+            this.visibility = "text";
+        },
+        hideInput() {
+            this.visibility = "password";
+        }
+    }
+}
+</script>
diff --git a/src/icon.js b/src/icon.js
index 960fa8c18..58583f0f8 100644
--- a/src/icon.js
+++ b/src/icon.js
@@ -1,10 +1,10 @@
 import { library } from "@fortawesome/fontawesome-svg-core"
-import { faCog, faEdit, faPlus, faPause, faPlay, faTachometerAlt, faTrash, faList, faArrowAltCircleUp } from "@fortawesome/free-solid-svg-icons"
+import { faCog, faEdit, faPlus, faPause, faPlay, faTachometerAlt, faTrash, faList, faArrowAltCircleUp, faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons"
 //import { fa } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
 
 // Add Free Font Awesome Icons here
 // https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
-library.add(faCog, faEdit, faPlus, faPause, faPlay, faTachometerAlt, faTrash, faList, faArrowAltCircleUp);
+library.add(faCog, faEdit, faPlus, faPause, faPlay, faTachometerAlt, faTrash, faList, faArrowAltCircleUp, faEye, faEyeSlash);
 
 export { FontAwesomeIcon }