Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - make "show password" keyboard-navigable

Browse Source
This commit is contained in:
Sam 2023-07-12 20:16:53 +02:00
parent a831f5732b
commit 5c26f41e0b
2 changed files with 20 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
fittrackee_client/src/components/Common/PasswordInput.vue
View File

@ -11,13 +11,15 @@
@input="updatePassword" @input="updatePassword"
@invalid="invalidPassword" @invalid="invalidPassword"
/> />
<div class="show-password" @click="togglePassword"> <div class="show-password">
{{ $t(`user.${showPassword ? 'HIDE' : 'SHOW'}_PASSWORD`) }} <button class="transparent" @click.prevent="togglePassword" type="button">
<i {{ $t(`user.${showPassword ? 'HIDE' : 'SHOW'}_PASSWORD`) }}
class="fa" <i
:class="`fa-eye${showPassword ? '-slash' : ''}`" class="fa"
aria-hidden="true" :class="`fa-eye${showPassword ? '-slash' : ''}`"
/> aria-hidden="true"
/>
</button>
</div> </div>
<div v-if="checkStrength" class="form-info"> <div v-if="checkStrength" class="form-info">
<i class="fa fa-info-circle" aria-hidden="true" /> <i class="fa fa-info-circle" aria-hidden="true" />
@ -71,6 +73,7 @@
(newPassword) => { (newPassword) => {
if (newPassword === '') { if (newPassword === '') {
passwordValue.value = '' passwordValue.value = ''
showPassword.value = false
} }
} }
) )
@ -84,12 +87,15 @@
flex-direction: column; flex-direction: column;
.show-password { .show-password {
font-style: italic; margin-top: -0.5 * $default-margin;
font-size: 0.85em; display: flex;
text-align: right; justify-content: right;
margin-top: -0.75 * $default-margin; button {
padding-right: $default-padding; font-style: italic;
cursor: pointer; font-size: 0.85em;
padding: $default-padding * 0.5 $default-padding;
cursor: pointer;
}
} }
} }
</style> </style>

1
fittrackee_client/src/components/Common/PasswordStength.vue
View File

@ -9,6 +9,7 @@
min="0" min="0"
max="4" max="4"
step="1" step="1"
:tabindex="-1"
/> />
<div v-if="passwordStrength" class="password-strength-details"> <div v-if="passwordStrength" class="password-strength-details">
<span class="password-strength-value"> <span class="password-strength-value">