[#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>

.playground/pages/composant/inputPassword.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Simple</h2>
+      <MalioInputPassword />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec label</h2>
+      <MalioInputPassword
+        v-model="passwordValue"
+        label="Mot de passe"
+        name="password"
+        autocomplete="current-password"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Sans icône</h2>
+      <MalioInputPassword
+        label="Mot de passe"
+        :display-icon="false"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+      <MalioInputPassword
+        model-value="motdepasse123"
+        disabled
+        label="Mot de passe"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+      <MalioInputPassword
+        model-value="lectureseule"
+        readonly
+        label="Mot de passe"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+      <MalioInputPassword
+        label="Mot de passe"
+        hint="8 caractères minimum"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+      <MalioInputPassword
+        model-value="abc"
+        label="Mot de passe"
+        error="Le mot de passe est trop court"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Succès</h2>
+      <MalioInputPassword
+        model-value="motdepasse123"
+        label="Mot de passe"
+        success="Mot de passe valide"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Validation dynamique</h2>
+      <MalioInputPassword
+        v-model="dynamicPassword"
+        label="Mot de passe"
+        hint="8 caractères minimum, 1 majuscule, 1 chiffre"
+        :error="dynamicError"
+        :success="dynamicSuccess"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+const passwordValue = ref('')
+const dynamicPassword = ref('')
+
+const passwordRegex = /^(?=.*[A-Z])(?=.*\d).{8,}$/
+const isDynamicValid = computed(() => passwordRegex.test(dynamicPassword.value))
+const dynamicError = computed(() => {
+  if (!dynamicPassword.value) return ''
+  return isDynamicValid.value ? '' : 'Mot de passe invalide'
+})
+const dynamicSuccess = computed(() => {
+  if (!dynamicPassword.value) return ''
+  return isDynamicValid.value ? 'Mot de passe valide' : ''
+})
+</script>