raffi/List_ultimate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Raffi
2026-02-26 21:29:34 +01:00
commit d9d84634e8
72 changed files with 18491 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
app/components/passwordChecker.vue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<div>
<ul>{{ $t('passwordCheckerShallContain') }}
<div :class="[ passwordCheck.isNumberOfCaracteresValid() ? 'has-success' : 'has-error' ]">
<font-awesome-icon
icon="fa-regular fa-circle-check"
v-bind:class="{'hide': !passwordCheck.isNumberOfCaracteresValid() || passwordCheck.password == ''}"
/>
<font-awesome-icon
icon="fa-regular fa-circle-xmark"
v-bind:class="{ 'hide': passwordCheck.isNumberOfCaracteresValid() }"
/>
<li :class="[passwordCheck.isNumberOfCaracteresValid() ? 'has-success' : 'has-error']">
{{ $t('passwordChecker8-22') }}
</li>
</div>
<div :class="[passwordCheck.isCapitalizeCaractereValid() ? 'has-success' : 'has-error']">
<font-awesome-icon
icon="fa-regular fa-circle-check"
v-bind:class="{ 'hide': !passwordCheck.isCapitalizeCaractereValid() || passwordCheck.password == '' }"
style="color:green" />
<font-awesome-icon
icon="fa-regular fa-circle-xmark"
v-bind:class="{'hide': passwordCheck.isCapitalizeCaractereValid() }"
style="color:red" />
<li :class="[passwordCheck.isCapitalizeCaractereValid() ? 'has-success' : 'has-error']">
{{ $t('passwordCheckerUppercase') }}
</li>
</div>
<div :class ="[passwordCheck.isMinimizeCaractereValid() ? 'has-success' : 'has-error']">
<font-awesome-icon
icon="fa-regular fa-circle-check"
v-bind:class="{ 'hide': !passwordCheck.isMinimizeCaractereValid() || passwordCheck.password == '' }"
style="color:green" />
<font-awesome-icon
icon="fa-regular fa-circle-xmark"
v-bind:class="{ 'hide': passwordCheck.isMinimizeCaractereValid() }"
style="color:red" />
<li :class="[passwordCheck.isMinimizeCaractereValid() ? 'has-success' : 'has-error']">
{{ $t('passwordCheckerLowercase') }}
</li>
</div>
<div :class ="[passwordCheck.isNumberValid() ? 'has-success' : 'has-error']">
<font-awesome-icon
icon="fa-regular fa-circle-check"
v-bind:class="{ 'hide': !passwordCheck.isNumberValid() || passwordCheck.password == '' }"
style="color:green" />
<font-awesome-icon
icon="fa-regular fa-circle-xmark"
v-bind:class="{ 'hide': passwordCheck.isNumberValid() }"
style="color:red" />
<li :class="[passwordCheck.isNumberValid() ? 'has-success' : 'has-error']">
{{ $t('passwordCheckerNb') }}
</li>
</div>
<div :class="[passwordCheck.isSpecialCaractereValid() ? 'has-success' : 'has-error']">
<font-awesome-icon
icon="fa-regular fa-circle-check"
v-bind:class="{'hide': !passwordCheck.isSpecialCaractereValid()|| passwordCheck.password == '' }"
style="color:green" />
<font-awesome-icon
icon="fa-regular fa-circle-xmark"
v-bind:class="{ 'hide': passwordCheck.isSpecialCaractereValid()}"
style="color:red" />
<li :class="[passwordCheck.isSpecialCaractereValid() ? 'has-success' : 'has-error']">
{{ $t('passwordCheckerSpecialChar') }}
</li>
</div>
</ul>
</div>
</template>
<script setup lang="ts">
const passwordCheck = usePasswordToolBoxStore()
</script>
<style lang="scss" scoped>
.container{
margin-bottom:1.5em;
margin-left: 0;
}
ul{
list-style-type: none;
font-size: 0.9em;
color:rgb(0, 128, 0);
margin:0;
margin-bottom:1em;
&>div{
display: flex;
align-items: center;
&.has-error{
color:red;
transition: 0.5s;
transform: rotateX(0deg)
}
&.has-success{
color:green;
transition: 0.5s;
transform: rotateX(360deg)
}
}
}
li{
margin-left: 0.5em;
}
.hide{
display: none;
}
</style>