toggle preview image src instead of havingtwo images
Co-authored-by: timvisee <tim@visee.me>
This commit is contained in:
parent
7797f485f2
commit
b5865f00e9
|
@ -48,12 +48,12 @@ function password(state) {
|
||||||
${state.translate('addPassword')}
|
${state.translate('addPassword')}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative inline-block">
|
<div class="relative inline-block my-1">
|
||||||
<input
|
<input
|
||||||
id="password-input"
|
id="password-input"
|
||||||
class="${state.archive.password
|
class="${state.archive.password
|
||||||
? ''
|
? ''
|
||||||
: 'invisible'} border rounded focus:border-blue-60 leading-normal my-1 py-1 px-2 h-8 dark:bg-grey-80"
|
: 'invisible'} border rounded focus:border-blue-60 leading-normal py-1 pl-2 pr-8 h-8 dark:bg-grey-80"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
maxlength="${MAX_LENGTH}"
|
maxlength="${MAX_LENGTH}"
|
||||||
type="password"
|
type="password"
|
||||||
|
@ -67,15 +67,14 @@ function password(state) {
|
||||||
type="button"
|
type="button"
|
||||||
class="${state.archive.password
|
class="${state.archive.password
|
||||||
? ''
|
? ''
|
||||||
: 'invisible'} absolute top-0 right-0 p-2"
|
: 'invisible'} absolute top-0 right-0 w-8 h-8"
|
||||||
onclick="${onPasswordPreviewButtonclicked}"
|
onclick="${onPasswordPreviewButtonclicked}"
|
||||||
>
|
>
|
||||||
<img src="assets/eye.svg" width="22" height="22" />
|
|
||||||
<img
|
<img
|
||||||
src="assets/eye-off.svg"
|
src="${assets.get('eye.svg')}"
|
||||||
width="22"
|
width="22"
|
||||||
height="22"
|
height="22"
|
||||||
class="${state.archive.password ? '' : 'hidden'}"
|
class="m-auto"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -89,19 +88,15 @@ function password(state) {
|
||||||
|
|
||||||
function onPasswordPreviewButtonclicked(event) {
|
function onPasswordPreviewButtonclicked(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const target = event.currentTarget;
|
|
||||||
const input = document.getElementById('password-input');
|
const input = document.getElementById('password-input');
|
||||||
const eyeOn = target.querySelector('img:first-child');
|
const eyeIcon = event.currentTarget.querySelector('img');
|
||||||
const eyeOff = target.querySelector('img:last-child');
|
|
||||||
|
|
||||||
if (input.type === 'password') {
|
if (input.type === 'password') {
|
||||||
input.type = 'text';
|
input.type = 'text';
|
||||||
eyeOn.classList.add('hidden');
|
eyeIcon.src = assets.get('eye-off.svg');
|
||||||
eyeOff.classList.remove('hidden');
|
|
||||||
} else {
|
} else {
|
||||||
input.type = 'password';
|
input.type = 'password';
|
||||||
eyeOn.classList.remove('hidden');
|
eyeIcon.src = assets.get('eye.svg');
|
||||||
eyeOff.classList.add('hidden');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input.focus();
|
input.focus();
|
||||||
|
|
Loading…
Reference in New Issue