initial commit

app/components/input/password.vue

@@ -0,0 +1,68 @@
+<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>