Add button to toggle password visibility in FloatingLabel

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"