From e425e76b3995cd94afa970082dae538940eda96d Mon Sep 17 00:00:00 2001
From: HenestrosaDev <henestrosadev@gmail.com>
Date: Mon, 17 Jun 2024 04:03:27 +0200
Subject: [PATCH] Add button to toggle password visibility in `FloatingLabel`

---
 public/images/icons/eye-off.svg               | 15 +++++++++
 public/images/icons/eye.svg                   | 17 ++++++++++
 .../js/Components/Forms/FloatingLabel.vue     | 31 +++++++++++++++++--
 3 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 public/images/icons/eye-off.svg
 create mode 100644 public/images/icons/eye.svg

diff --git a/public/images/icons/eye-off.svg b/public/images/icons/eye-off.svg
new file mode 100644
index 0000000..832c41e
--- /dev/null
+++ b/public/images/icons/eye-off.svg
@@ -0,0 +1,15 @@
+<svg 
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24" 
+	fill="none" 
+	stroke="currentColor"
+	stroke-width="2" 
+	stroke-linecap="round" 
+	stroke-linejoin="round"
+>
+	<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+	<path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
+	<path
+		d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" />
+	<path d="M3 3l18 18" />
+</svg>
\ No newline at end of file
diff --git a/public/images/icons/eye.svg b/public/images/icons/eye.svg
new file mode 100644
index 0000000..5ccc0e4
--- /dev/null
+++ b/public/images/icons/eye.svg
@@ -0,0 +1,17 @@
+<svg 
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24" 
+	fill="none" 
+	stroke="currentColor"
+	stroke-width="2" 
+	stroke-linecap="round" 
+	stroke-linejoin="round"
+>
+	<path 
+		stroke="none" 
+		d="M0 0h24v24H0z" 
+		fill="none" 
+	/>
+	<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+	<path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
+</svg>
\ No newline at end of file
diff --git a/resources/js/Components/Forms/FloatingLabel.vue b/resources/js/Components/Forms/FloatingLabel.vue
index 7c016db..7f4f195 100644
--- a/resources/js/Components/Forms/FloatingLabel.vue
+++ b/resources/js/Components/Forms/FloatingLabel.vue
@@ -1,10 +1,13 @@
 <script setup>
 // https://preline.co/docs/input.html#floating-label
 import { trans } from "laravel-vue-i18n";
+import { ref } from "vue";
+import IconEye from "@icons/eye.svg?component";
+import IconEyeOff from "@icons/eye-off.svg?component";
 
 const value = defineModel("value"); // eslint-disable-line
 
-defineProps({
+const props = defineProps({
 	inputId: {
 		type: String,
 		required: true,
@@ -63,6 +66,13 @@ defineProps({
 		default: null,
 	},
 });
+
+const mutableInputType = ref(props.inputType);
+
+const togglePasswordVisibility = () => {
+	mutableInputType.value =
+		mutableInputType.value === "password" ? "text" : "password";
+};
 </script>
 
 <template>
@@ -71,7 +81,7 @@ defineProps({
 			<input
 				:id="inputId"
 				v-model="value"
-				:type="inputType"
+				:type="mutableInputType"
 				:autocomplete="inputAutocomplete"
 				:inputmode="inputMode"
 				:placeholder="inputPlaceholder"
@@ -91,6 +101,23 @@ defineProps({
 				:aria-invalid="errorMessage ? true : false"
 				:aria-describedby="`${inputId}-annotation`"
 			/>
+
+			<button
+				v-if="inputType === 'password'"
+				type="button"
+				class="absolute end-0 top-0 mt-2 px-4 py-2"
+				@click="togglePasswordVisibility"
+			>
+				<IconEye
+					v-if="mutableInputType === 'password'"
+					class="h-6 w-6"
+				/>
+				<IconEyeOff
+					v-else-if="mutableInputType === 'text'"
+					class="h-6 w-6"
+				/>
+			</button>
+
 			<label
 				:for="inputId"
 				class="pointer-events-none absolute start-0 top-0 h-full truncate border border-transparent p-4 text-sm transition duration-100 ease-in-out peer-focus:-translate-y-1.5 peer-focus:text-xs peer-focus:text-skin-muted peer-disabled:pointer-events-none peer-disabled:opacity-50 peer-[:not(:placeholder-shown)]:-translate-y-1.5 peer-[:not(:placeholder-shown)]:text-xs peer-[:not(:placeholder-shown)]:text-skin-muted"