PeL/force-orange-2024
1
1
Fork 0
mirror of https://github.com/Paris-est-Ludique/ForceOrange.git synced 2025-09-11 14:36:29 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ Complete all user management with forms and DB

Browse Source
This commit is contained in:
ChatonDeAru
2024-09-15 01:48:41 +02:00
committed by ChatonDeAru (Romain)
parent 37b2238b84
commit 5fa1f24caf
22 changed files with 730 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
modules/app/components/PasswordStrength.vue
View File

@@ -20,22 +20,40 @@ const color = computed(() => {
</script>
<template>
<UMeter :value="strength.score" :max="4" :color="color">
<template #label>
<p class="text-sm font-thin">
<template v-if="strength.score === 1">
Le mot de passe est faible
<div>
<p class="text-sm">
force de ton mot de passe :
</p>
<div class="flex">
<UMeter :value="strength.score" :max="4" :color="color">
<template #label>
<p class="text-sm font-thin">
<template v-if="strength.score === 1">
Le mot de passe est faible
</template>
<template v-else-if="strength.score === 2">
Le mot de passe est moyen
</template>
<template v-else-if="strength.score === 3">
Le mot de passe est bon
</template>
<template v-else-if="strength.score === 4">
Le mot de passe est fort
</template>
</p>
</template>
<template v-else-if="strength.score === 2">
Le mot de passe est moyen
</UMeter>
<UPopover>
<UIcon name="i-mdi-info-circle" color="blue" class="w-5 h-5 m-2 hover:text-blue-300" />
<template #panel>
<p class="max-w-sm p-4 text-gray-400 font-thin">
Un mot bon mot de passe est souvent lié au nombres de charactères (une phrase est un bon mot de
passe) et à sa complexité à deviner (non, votre code postal et le nom de votre lapin n'est pas un bon motde
passe)
</p>
</template>
<template v-else-if="strength.score === 3">
Le mot de passe est bon
</template>
<template v-else-if="strength.score === 4">
Le mot de passe est fort
</template>
</p>
</template>
</UMeter>
</UPopover>
</div>
</div>
</template>