[#MUI-8] Ajout composant mot de passe (#13)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Reviewed-on: #13
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

app/components/malio/Input.test.ts

@@ -265,7 +265,7 @@ describe('MalioInputText', () => {
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('pointer-events-none')
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('absolute')
-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-2')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-[10px]')
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('top-1/2')
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('-translate-y-1/2')
   })
@@ -277,7 +277,7 @@ describe('MalioInputText', () => {
       label: 'Password',
     })
 
-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-2')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-[10px]')
     expect(wrapper.get('input').classes()).toContain('!pl-11')
     expect(wrapper.get('label').classes()).toContain('left-8')
   })

app/components/malio/InputAmount.test.ts

@@ -53,7 +53,7 @@ describe('MalioInputAmount', () => {
 
     expect(wrapper.get('[data-test="icon"]').exists()).toBe(true)
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-2')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-[10px]')
   })
 
   it('generates an amount-specific id', () => {
@@ -156,7 +156,7 @@ describe('MalioInputAmount', () => {
       iconPosition: 'left',
     })
 
-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-2')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-[10px]')
     expect(wrapper.get('input').classes()).toContain('!pl-11')
     expect(wrapper.get('label').classes()).toContain('left-8')
   })

app/components/malio/InputAmount.vue

@@ -230,7 +230,7 @@ const focusPaddingClass = computed(() => {
 })
 
 const iconPositionClass = computed(() => {
-  const sideClass = props.iconPosition === 'left' ? 'left-2' : 'right-2'
+  const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
   return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
 })
 </script>

app/components/malio/InputPassword.test.ts

@@ -0,0 +1,174 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
+import InputPassword from './InputPassword.vue'
+
+type InputPasswordProps = {
+  id?: string
+  label?: string
+  name?: string
+  autocomplete?: string
+  modelValue?: string | null
+  inputClass?: string
+  labelClass?: string
+  groupClass?: string
+  required?: boolean
+  maxLength?: number | string
+  minLength?: number | string
+  disabled?: boolean
+  readonly?: boolean
+  hint?: string
+  error?: string
+  success?: string
+  displayIcon?: boolean
+}
+
+const InputPasswordForTest = InputPassword as DefineComponent<InputPasswordProps>
+
+const mountComponent = (props: InputPasswordProps = {}) =>
+  mount(InputPasswordForTest, {
+    props,
+    global: {
+      stubs: {
+        IconifyIcon: {
+          template: '<span data-test="icon" v-bind="$attrs" />',
+        },
+      },
+    },
+  })
+
+describe('MalioInputPassword', () => {
+  it('renders the initial input value', () => {
+    const wrapper = mountComponent({modelValue: 'secret123'})
+
+    expect(wrapper.get('input').element.value).toBe('secret123')
+  })
+
+  it('renders the label text', () => {
+    const wrapper = mountComponent({label: 'Mot de passe'})
+
+    expect(wrapper.get('label').text()).toBe('Mot de passe')
+  })
+
+  it('has type password by default', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('input').attributes('type')).toBe('password')
+  })
+
+  it('toggles to type text when icon is clicked', async () => {
+    const wrapper = mountComponent()
+
+    await wrapper.get('[data-test="icon"]').trigger('click')
+
+    expect(wrapper.get('input').attributes('type')).toBe('text')
+  })
+
+  it('toggles back to password on second click', async () => {
+    const wrapper = mountComponent()
+
+    await wrapper.get('[data-test="icon"]').trigger('click')
+    await wrapper.get('[data-test="icon"]').trigger('click')
+
+    expect(wrapper.get('input').attributes('type')).toBe('password')
+  })
+
+  it('does not render icon when displayIcon is false', () => {
+    const wrapper = mountComponent({displayIcon: false})
+
+    expect(wrapper.find('[data-test="icon"]').exists()).toBe(false)
+  })
+
+  it('renders icon by default', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.find('[data-test="icon"]').exists()).toBe(true)
+  })
+
+  it('shows eye-off-outline icon when password is hidden', () => {
+    const wrapper = mountComponent()
+
+    const iconComponent = wrapper.findComponent(IconifyIcon)
+    expect(iconComponent.props('icon')).toBe('mdi:eye-off-outline')
+  })
+
+  it('shows eye-outline icon when password is visible', async () => {
+    const wrapper = mountComponent()
+
+    await wrapper.get('[data-test="icon"]').trigger('click')
+
+    const iconComponent = wrapper.findComponent(IconifyIcon)
+    expect(iconComponent.props('icon')).toBe('mdi:eye-outline')
+  })
+
+  it('emits update:modelValue on input change', async () => {
+    const wrapper = mountComponent({modelValue: ''})
+
+    await wrapper.get('input').setValue('new password')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new password'])
+  })
+
+  it('sets disabled styles when true', () => {
+    const wrapper = mountComponent({disabled: true})
+
+    expect(wrapper.get('input').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('input').classes()).toContain('cursor-not-allowed')
+  })
+
+  it('sets readonly when true', () => {
+    const wrapper = mountComponent({readonly: true})
+
+    expect(wrapper.get('input').attributes('readonly')).toBeDefined()
+  })
+
+  it('shows error message and styles', () => {
+    const wrapper = mountComponent({error: 'Mot de passe requis'})
+
+    expect(wrapper.get('p.text-m-error').text()).toBe('Mot de passe requis')
+    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
+  })
+
+  it('shows error style on icon', () => {
+    const wrapper = mountComponent({error: 'Error'})
+
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
+  })
+
+  it('shows success message and styles', () => {
+    const wrapper = mountComponent({success: 'Mot de passe valide'})
+
+    expect(wrapper.get('p.text-m-success').text()).toBe('Mot de passe valide')
+    expect(wrapper.get('input').classes()).toContain('border-m-success')
+  })
+
+  it('shows success style on icon', () => {
+    const wrapper = mountComponent({success: 'Success'})
+
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
+  })
+
+  it('links label to input via for/id', () => {
+    const wrapper = mountComponent({id: 'pwd', label: 'Password'})
+
+    expect(wrapper.get('input').attributes('id')).toBe('pwd')
+    expect(wrapper.get('label').attributes('for')).toBe('pwd')
+  })
+
+  it('generates an id when missing and reuses it on label', () => {
+    const wrapper = mountComponent({label: 'Password'})
+
+    const inputId = wrapper.get('input').attributes('id')
+
+    expect(inputId?.startsWith('malio-input-password-')).toBe(true)
+    expect(wrapper.get('label').attributes('for')).toBe(inputId)
+  })
+
+  it('aria-invalid is false when no error', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('input').attributes('aria-invalid')).toBe('false')
+  })
+})

app/components/malio/InputPassword.vue

@@ -0,0 +1,209 @@
+<template>
+  <div
+    :class="mergedGroupClass"
+  >
+    <input
+      :id="inputId"
+      :name="name"
+      :autocomplete="autocomplete"
+      :class="mergedInputClass"
+      :required="required"
+      :maxlength="maxLength"
+      :minlength="minLength"
+      :disabled="disabled"
+      :value="currentValue"
+      :readonly="readonly"
+      :aria-invalid="!!error"
+      :aria-describedby="describedBy"
+      v-bind="attrs"
+      placeholder="_"
+      :type="isPasswordVisible ? 'text' : 'password'"
+      @input="onInput"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
+    >
+
+    <label
+      v-if="label"
+      :for="inputId"
+      :class="mergedLabelClass"
+    >
+      {{ label }}
+    </label>
+
+    <IconifyIcon
+      v-if="displayIcon"
+      :icon="isPasswordVisible ? 'mdi:eye-outline' : 'mdi:eye-off-outline'"
+      :width="24"
+      :height="24"
+      data-test="icon"
+      :class="[
+      hasError
+        ? 'text-m-error'
+        : hasSuccess
+          ? 'text-m-success' : 'text-m-muted',
+      'cursor-pointer absolute right-[10px] top-1/2 -translate-y-1/2',
+    ]"
+      @click="toggleVisibility"
+    />
+
+  </div>
+  <p
+    v-if="hint || hasError || hasSuccess"
+    :id="`${inputId}-describedby`"
+    :class="[
+        hasError
+          ? 'text-m-error'
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
+        'mt-1 text-xs ml-[2px] ',
+      ]"
+  >
+    {{ hint || error || success }}
+  </p>
+</template>
+
+<script setup lang="ts">
+
+import {computed, ref, useAttrs, useId} from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
+
+defineOptions({name: 'MalioInputPassword', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    name?: string
+    autocomplete?: string
+    modelValue?: string | null | undefined
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+    required?: boolean
+    maxLength?: number | string
+    minLength?: number | string
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+    displayIcon?: boolean
+  }>(),
+  {
+    id: '',
+    name: '',
+    autocomplete: 'off',
+    modelValue: undefined,
+    label: '',
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+    required: false,
+    maxLength: undefined,
+    minLength: undefined,
+    readonly: false,
+    disabled: false,
+    hint: '',
+    error: '',
+    success: '',
+    displayIcon: true,
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+const localValue = ref('')
+const isFocused = ref(false)
+const isPasswordVisible = ref(false)
+
+const toggleVisibility = () => {
+  isPasswordVisible.value = !isPasswordVisible.value
+}
+
+const inputId = computed(() => props.id?.toString() || `malio-input-password-${generatedId}`)
+const isControlled = computed(() => props.modelValue !== undefined)
+const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
+const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success)
+const isFilled = computed(() => currentValue.value.trim().length > 0)
+const mergedGroupClass = computed(() =>
+  twMerge(
+    'relative mt-4 flex h-12 w-full items-center',
+    props.groupClass,
+  ),
+)
+const mergedInputClass = computed(() =>
+  twMerge(
+    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 text-lg rounded-md',
+    isFilled.value ? 'border-black' : 'border-m-muted',
+    disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
+    hasError.value
+      ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
+      : hasSuccess.value
+        ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
+        : 'focus:border-m-primary',
+    props.displayIcon ? '!pr-10' : '',
+    'focus:pl-[11px]',
+    props.inputClass,
+  ),
+)
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
+    'left-3',
+    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
+    disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
+    hasError.value
+      ? 'text-m-error'
+      : hasSuccess.value
+        ? 'text-m-success'
+        : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
+    props.labelClass,
+  ),
+)
+
+const describedBy = computed(() => {
+  const ids: string[] = []
+  if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
+  if (hasError.value) ids.push(`${inputId.value}-error`)
+  if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
+  return ids.length ? ids.join(' ') : undefined
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+}>()
+
+const onInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (!isControlled.value) {
+    localValue.value = target.value
+  }
+  emit('update:modelValue', target.value)
+}
+
+const disabled = computed(() => props.disabled)
+</script>
+
+<style scoped>
+.floating-label {
+  background: white;
+  padding: 0 0.25rem;
+}
+
+.grow-height {
+  transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
+}
+
+.grow-height:focus {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+@media (prefers-reduced-motion: reduce) {
+  .grow-height { transition: none; }
+}
+</style>

app/components/malio/InputText.vue

@@ -210,7 +210,7 @@ const focusPaddingClass = computed(() => {
 })
 
 const iconPositionClass = computed(() => {
-  const sideClass = props.iconPosition === 'left' ? 'left-2' : 'right-2'
+  const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
   return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
 })
 </script>