Chapril/drop.chapril.org-firefoxsend
Chapril
/
drop.chapril.org-firefoxsend
24
1
Fork 0
Code Issues Releases Activity

toggle preview image src instead of havingtwo images 

Co-authored-by: timvisee <tim@visee.me>
This commit is contained in:
George Raptis 2019-09-18 10:34:24 +03:00 committed by timvisee
parent 7797f485f2
commit b5865f00e9
No known key found for this signature in database
GPG Key ID: B8DB720BC383E172
1 changed files with 8 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/ui/archiveTile.js
View File

@ -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();