wbuezas
/
hedera-web-mindshore
forked from verdnatura/hedera-web
0
1
Fork 0
Code Pull Requests Activity

feat: add password visibility

This commit is contained in:
Javier Segarra 2024-07-26 22:18:17 +02:00
parent 4256f45373
commit 6bad41db20
1 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/ui/ChangePasswordForm.vue
View File

@ -16,6 +16,9 @@ const props = defineProps({
}); });
const emit = defineEmits(['onPasswordChanged']); const emit = defineEmits(['onPasswordChanged']);
const showOldPwd = ref(false);
const showNewPwd = ref(false);
const showCopyPwd = ref(false);
const { t } = useI18n(); const { t } = useI18n();
const api = inject('api'); const api = inject('api');
@ -107,20 +110,40 @@ onMounted(async () => {
v-if="!verificationToken" v-if="!verificationToken"
ref="oldPasswordRef" ref="oldPasswordRef"
v-model="formData.oldPassword" v-model="formData.oldPassword"
:type="!showOldPwd ? 'password' : 'text'"
:label="t('oldPassword')" :label="t('oldPassword')"
type="password" >
<template #append>
<QIcon
:name="showOldPwd ? 'visibility_off' : 'visibility'"
class="cursor-pointer"
@click="showOldPwd = !showOldPwd"
/> />
</template>
</VnInput>
<VnInput <VnInput
ref="newPasswordRef" ref="newPasswordRef"
v-model="formData.newPassword" v-model="formData.newPassword"
:type="!showNewPwd ? 'password' : 'text'"
:label="t('newPassword')" :label="t('newPassword')"
type="password" ><template #append>
<QIcon
:name="showNewPwd ? 'visibility_off' : 'visibility'"
class="cursor-pointer"
@click="showNewPwd = !showNewPwd"
/> />
</template></VnInput>
<VnInput <VnInput
v-model="repeatPassword" v-model="repeatPassword"
:type="!showCopyPwd ? 'password' : 'text'"
:label="t('repeatPassword')" :label="t('repeatPassword')"
type="password" ><template #append>
<QIcon
:name="showCopyPwd ? 'visibility_off' : 'visibility'"
class="cursor-pointer"
@click="showCopyPwd = !showCopyPwd"
/> />
</template></VnInput>
</template> </template>
<template #actions> <template #actions>
<QBtn <QBtn