68 lines
1.3 KiB
Vue
68 lines
1.3 KiB
Vue
<template>
|
|
<InputBase
|
|
v-model="model"
|
|
v-bind="$props"
|
|
:type="seePwd ? 'text' : 'password'"
|
|
@blur="seePwd = false"
|
|
>
|
|
<template #icon>
|
|
<font-awesome-icon
|
|
class="eye"
|
|
icon="fa-solid fa-eye"
|
|
@click="seePwd = true"
|
|
:class="{ hide: seePwd }"
|
|
/>
|
|
<font-awesome-icon
|
|
class="eye"
|
|
icon="fa-solid fa-eye-slash"
|
|
@click="seePwd = false"
|
|
:class="{ hide: !seePwd }"
|
|
/>
|
|
</template>
|
|
<template #pwdReset>
|
|
<div v-if="displayPwdReset" class="pwd-reset-container">
|
|
<NuxtLink :to="localePath('passwordResetRequest')">
|
|
{{ $t('loginPage.passwordResetRequest') }}
|
|
</NuxtLink>
|
|
</div>
|
|
</template>
|
|
<template #message>
|
|
<slot name="message"></slot>
|
|
</template>
|
|
</InputBase>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const localePath = useLocalePath()
|
|
const model = defineModel<string>()
|
|
const seePwd = ref(false)
|
|
|
|
withDefaults(defineProps<{
|
|
label: string
|
|
name: string
|
|
placeholder?: string
|
|
displayPwdReset?:boolean
|
|
}>(), {
|
|
// Valeurs par défault
|
|
displayPwdReset: false,
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
.eye {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #003e7c;
|
|
font-size: 1.1em;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.eye.hide {
|
|
display: none;
|
|
}
|
|
|
|
</style> |