47 lines
1.1 KiB
Vue
47 lines
1.1 KiB
Vue
<template>
|
|
<div class="relative">
|
|
<input
|
|
:type="showPassword ? 'text' : 'password'"
|
|
:value="modelValue"
|
|
:placeholder="placeholder"
|
|
@input="$emit('update:modelValue', $event.target.value)"
|
|
class="mt-1 block w-full rounded-md shadow-sm sm:text-sm
|
|
bg-A text-D border-B focus:border-C
|
|
focus:ring focus:ring-D focus:ring-opacity-50 p-2 pr-10"
|
|
/>
|
|
|
|
<!-- Tombol show/hide password -->
|
|
<button
|
|
type="button"
|
|
@click="togglePassword"
|
|
class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-gray-700 focus:outline-none"
|
|
>
|
|
<font-awesome-icon v-if="showPassword" :icon="['fas', 'eye']" />
|
|
<font-awesome-icon v-else :icon="['fas', 'eye-slash']" />
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: "Password",
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["update:modelValue"]);
|
|
|
|
const showPassword = ref(false);
|
|
|
|
const togglePassword = () => {
|
|
showPassword.value = !showPassword.value;
|
|
};
|
|
</script>
|