From 5b8851b6c268d0e93c158908fbfae9f8473db5ff Mon Sep 17 00:00:00 2001
From: Orangerot <purple@orangerot.dev>
Date: Wed, 19 Jun 2024 00:14:49 +0200
Subject: Initial commit

---
 pse-dashboard/src/components/PasswordInput.vue | 45 ++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 pse-dashboard/src/components/PasswordInput.vue

(limited to 'pse-dashboard/src/components/PasswordInput.vue')

diff --git a/pse-dashboard/src/components/PasswordInput.vue b/pse-dashboard/src/components/PasswordInput.vue
new file mode 100644
index 0000000..599f438
--- /dev/null
+++ b/pse-dashboard/src/components/PasswordInput.vue
@@ -0,0 +1,45 @@
+<script setup>
+import { ref } from 'vue';
+import { FloatingLabelInput } from '@/components';
+
+defineProps({
+    modelValue: {
+        type: String,
+        default: ""
+    },
+    label: {
+        type: String,
+        default: "Password"
+    }
+});
+
+defineEmits(['update:modelValue'])
+const isPasswordVisible = ref(false);
+</script>
+<template>
+    <div class="input-group form-input">
+        <FloatingLabelInput
+            :type="isPasswordVisible ? 'text' : 'password'"
+            :label="label"
+            :model-value="modelValue"
+            @update:model-value="newValue =>
+                $emit('update:modelValue', newValue)"
+        />
+
+        <label class="btn btn-outline-secondary d-flex align-items-center password-visible">
+            <input
+                v-model="isPasswordVisible"
+                type="checkbox"
+                class="btn-check"
+                autocomplete="off"
+            >
+            <i
+                class="fa"
+                :class="isPasswordVisible ? 'fa-eye-slash' : 'fa-eye'"
+            />
+        </label>
+    </div>
+</template>
+<style scoped>
+</style>
+
-- 
cgit v1.2.3

