117 lines
3.8 KiB
Vue
117 lines
3.8 KiB
Vue
<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>
|