initial commit

app/components/input/base.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="base-input">
+    <label>
+      {{ label }}
+      <div class="input-wrapper">
+        <input
+          v-bind="$attrs"
+          :name="name"
+          :type="type"
+          v-model="model"
+          :placeholder="placeholder"
+          autocomplete="off"
+          class="base-input-field"
+        />
+        <slot name="icon" />
+      </div>
+      <slot name="pwdReset"/>
+      <div class="message">
+        <slot name="message"></slot>
+      </div>
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+const model = defineModel<string>()
+
+defineOptions({
+  inheritAttrs: false
+})
+
+defineProps<{
+  label: string
+  name: string
+  type?: string
+  placeholder?: string
+  displayPwdReset?:boolean
+}>()
+</script>
+
+<style scoped lang="scss">
+.input-wrapper {
+  position: relative;
+}
+
+.base-input {
+  --input-bg: #ffffff;
+  --input-border: #00aeff;
+  --input-hover-bg: #e0e0e0;
+  --input-text: #003e7c;
+}
+
+.base-input label {
+  margin-bottom: 1em;
+  display: block;
+  color: #003e7c;
+  font-family: 'Quicksand', Arial, Helvetica, sans-serif;
+}
+
+.base-input-field {
+  display: block;
+  margin: 5px 0;
+  width: 100%;
+  padding: 0.75em 1.5em;
+  background: var(--input-bg);
+  border: none;
+  border-bottom: 2px solid var(--input-border);
+  border-left: 2px solid var(--input-border);
+  box-sizing: border-box;
+  color: var(--input-text);
+}
+
+.base-input-field:hover,
+.base-input-field:focus {
+  background: var(--input-hover-bg);
+}
+
+.message {
+  min-height: 1.4em;
+}
+
+.message :deep(.error) {
+  color: #ca0d00;
+  font-size: 0.9em;
+  font-weight: 600;
+  margin-left: 1em;
+}
+
+.message :deep(.success) {
+  color: #00ca22;
+  font-size: 0.9em;
+  font-weight: 600;
+  margin-left: 1em;
+}
+
+/* Styles spécifiques à l’email */
+:deep(.mail-is-valid) {
+  --input-border: #00ca22;
+}
+
+:deep(.mail-is-invalid) {
+  --input-border: #ca0d00;
+}
+</style>

app/components/input/email.vue

@@ -0,0 +1,25 @@
+<template>
+  <InputBase
+    v-model="model"
+    v-bind="$attrs"
+    :label="label"
+    :name="name"
+    :placeholder="placeholder"
+    type="email"
+  >
+    <template #message>
+      <slot name="message"></slot>
+    </template>
+  </InputBase>
+</template>
+
+<script setup lang="ts">
+const model = defineModel<string>()
+
+defineProps<{
+  label: string
+  name: string
+  placeholder?: string
+}>()
+</script>
+

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>

app/components/input/text.vue

@@ -0,0 +1,24 @@
+<template>
+  <InputBase
+    v-model="model"
+    v-bind="$attrs"
+    :label="label"
+    :name="name"
+    :placeholder="placeholder"
+    type="text"
+  >
+    <template #message>
+      <slot name="message"></slot>
+    </template>
+  </InputBase>
+</template>
+
+<script setup lang="ts">
+const model = defineModel<string>()
+
+defineProps<{
+  label: string
+  name: string
+  placeholder?: string
+}>()
+</script>