studio-variable/designtopack
4
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

front > account : add password toggle visibility

Browse source
This commit is contained in:
isUnknown 2025-05-05 17:41:43 +02:00
parent 921eab5e7e
commit 6c5737f456
1 changed files with 9 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/views/Account.vue
View file

@ -32,7 +32,7 @@
</li> </li>
<li :class="{ 'is-editing': isEditingEmail }"> <li :class="{ 'is-editing': isEditingEmail }">
<input <input
type="password" :type="isPasswordHidden ? 'password' : 'text'"
v-model="password" v-model="password"
id="password" id="password"
placeholder="Minimum 8 caractères" placeholder="Minimum 8 caractères"
@ -41,7 +41,7 @@
required required
/> />
<input <input
type="password" :type="isPasswordHidden ? 'password' : 'text'"
v-model="passwordConfirm" v-model="passwordConfirm"
id="password-confirm" id="password-confirm"
placeholder="Minimum 8 caractères" placeholder="Minimum 8 caractères"
@ -49,6 +49,12 @@
:class="{ invalid: !isPasswordConfirmed }" :class="{ invalid: !isPasswordConfirmed }"
required required
/> />
<button
class="btn | w-full"
@click="isPasswordHidden = !isPasswordHidden"
>
{{ isPasswordHidden ? 'afficher' : 'masquer' }}
</button>
<button <button
class="btn | w-full" class="btn | w-full"
:class="'btn--' + passwordBtn.status" :class="'btn--' + passwordBtn.status"
@ -118,6 +124,7 @@ const passwordBtn = ref({
status: 'ready', status: 'ready',
}); });
const passwordConfirm = ref(''); const passwordConfirm = ref('');
const isPasswordHidden = ref(true);
const isPasswordConfirmed = computed(() => { const isPasswordConfirmed = computed(() => {
return ( return (
passwordConfirm.value.length > 7 && passwordConfirm.value === password.value passwordConfirm.value.length > 7 && passwordConfirm.value === password.value