93 lines
1.4 KiB
Vue
93 lines
1.4 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const props = defineProps({
|
|
password: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: 'Password',
|
|
},
|
|
autocomplete: {
|
|
type: String,
|
|
default: 'current-password',
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['change', 'input']);
|
|
|
|
const currentPassword = ref(props.password);
|
|
const showPassword = ref(false);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="password-container">
|
|
<input
|
|
v-model="currentPassword"
|
|
:type="showPassword ? 'input' : 'password'"
|
|
:placeholder="placeholder"
|
|
:autocomplete="autocomplete"
|
|
minlength="3"
|
|
class="password input"
|
|
@change="emit('change', currentPassword)"
|
|
@input="emit('input', currentPassword)"
|
|
>
|
|
|
|
<div
|
|
class="password-show"
|
|
@click="showPassword = !showPassword"
|
|
>
|
|
<Icon
|
|
v-show="!showPassword"
|
|
icon="eye"
|
|
class="password-show"
|
|
/>
|
|
|
|
<Icon
|
|
v-show="showPassword"
|
|
icon="eye-blocked"
|
|
class="password-show"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.input {
|
|
background: var(--background);
|
|
padding-right: 2.5rem;
|
|
}
|
|
|
|
.password-container {
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
|
|
.password {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.password-show {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
right: 0;
|
|
padding: 0 1rem 0 .5rem;
|
|
|
|
.icon {
|
|
fill: var(--glass);
|
|
}
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
|
|
.icon {
|
|
fill: var(--primary);
|
|
}
|
|
}
|
|
}
|
|
</style>
|