dylan.derr/Send
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'password-preview' into 'master'

Browse source 
Add password preview

See merge request timvisee/send!6
This commit is contained in:
Tim Visée 2020-10-18 13:50:17 +00:00
commit 981f86946b
3 changed files with 53 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

64
app/ui/archiveTile.js
View file

@ -48,19 +48,36 @@ function password(state) {
${state.translate('addPassword')}
</label>
</div>
<input
id="password-input"
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"
autocomplete="off"
maxlength="${MAX_LENGTH}"
type="password"
oninput="${inputChanged}"
onfocus="${focused}"
placeholder="${state.translate('unlockInputPlaceholder')}"
value="${state.archive.password || ''}"
/>
<div class="relative inline-block my-1">
<input
id="password-input"
class="${state.archive.password
? ''
: 'invisible'} border rounded focus:border-blue-60 leading-normal py-1 pl-2 pr-8 h-8 dark:bg-grey-80"
autocomplete="off"
maxlength="${MAX_LENGTH}"
type="password"
oninput="${inputChanged}"
onfocus="${focused}"
placeholder="${state.translate('unlockInputPlaceholder')}"
value="${state.archive.password || ''}"
/>
<button
id="password-preview-button"
type="button"
class="${state.archive.password
? ''
: 'invisible'} absolute top-0 right-0 w-8 h-8"
onclick="${onPasswordPreviewButtonclicked}"
>
<img
src="${assets.get('eye.svg')}"
width="22"
height="22"
class="m-auto"
/>
</button>
</div>
<label
id="password-msg"
for="password-input"
@ -69,15 +86,36 @@ function password(state) {
</div>
`;
function onPasswordPreviewButtonclicked(event) {
event.preventDefault();
const input = document.getElementById('password-input');
const eyeIcon = event.currentTarget.querySelector('img');
if (input.type === 'password') {
input.type = 'text';
eyeIcon.src = assets.get('eye-off.svg');
} else {
input.type = 'password';
eyeIcon.src = assets.get('eye.svg');
}
input.focus();
}
function togglePasswordInput(event) {
event.stopPropagation();
const checked = event.target.checked;
const input = document.getElementById('password-input');
const passwordPreviewButton = document.getElementById(
'password-preview-button'
);
if (checked) {
input.classList.remove('invisible');
passwordPreviewButton.classList.remove('invisible');
input.focus();
} else {
input.classList.add('invisible');
passwordPreviewButton.classList.add('invisible');
input.value = '';
document.getElementById('password-msg').textContent = '';
state.archive.password = null;