a few tweaks to password input. fixes #703

This commit is contained in:
Danny Coates 2018-01-19 16:53:57 -08:00
parent f7dc86ab2b
commit 48b21de011
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
3 changed files with 46 additions and 44 deletions

View File

@ -6,43 +6,6 @@ const uploadPassword = require('./uploadPassword');
const selectbox = require('./selectbox'); const selectbox = require('./selectbox');
const { allowedCopy, delay, fadeOut } = require('../utils'); const { allowedCopy, delay, fadeOut } = require('../utils');
function passwordComplete(state, password) {
const el = html([
`<div class="selectPassword">${state.translate('passwordResult', {
password: '<pre></pre>'
})}
<button id="resetButton">${state.translate('changePasswordButton')}</button>
<form id='reset-form' class="setPassword hidden" data-no-csrf>
<input id="unlock-reset-input"
class="unlock-input input-no-btn"
maxlength="64"
autocomplete="off"
placeholder="${state.translate('unlockInputPlaceholder')}">
<input type="submit"
id="unlock-reset-btn"
class="btn btn-hidden"
value="${state.translate('changePasswordButton')}"/>
</form>
</div>`
]);
el.querySelector('#resetButton').onclick = toggleResetInput;
el.querySelector('#unlock-reset-input').oninput = inputChanged;
const passwordOriginal = document.createElement('div');
passwordOriginal.className = 'passwordOriginal';
passwordOriginal.innerText = password;
const passwordStar = document.createElement('div');
passwordStar.className = 'passwordStar';
passwordStar.innerText = password.replace(/./g, '●');
el.firstElementChild.appendChild(passwordOriginal);
el.firstElementChild.appendChild(passwordStar);
return el;
}
function inputChanged() { function inputChanged() {
const resetInput = document.getElementById('unlock-reset-input'); const resetInput = document.getElementById('unlock-reset-input');
const resetBtn = document.getElementById('unlock-reset-btn'); const resetBtn = document.getElementById('unlock-reset-btn');
@ -57,8 +20,10 @@ function inputChanged() {
function toggleResetInput(event) { function toggleResetInput(event) {
const form = event.target.parentElement.querySelector('form'); const form = event.target.parentElement.querySelector('form');
const input = document.getElementById('unlock-reset-input');
if (form.style.visibility === 'hidden' || form.style.visibility === '') { if (form.style.visibility === 'hidden' || form.style.visibility === '') {
form.style.visibility = 'visible'; form.style.visibility = 'visible';
input.focus();
} else { } else {
form.style.visibility = 'hidden'; form.style.visibility = 'hidden';
} }
@ -93,7 +58,7 @@ module.exports = function(state, emit) {
file.password = file.password || ''; file.password = file.password || '';
const passwordSection = file.password const passwordSection = file.password
? passwordComplete(state, file.password) ? passwordComplete(file.password)
: uploadPassword(state, emit); : uploadPassword(state, emit);
const div = html` const div = html`
<div id="share-link" class="fadeIn"> <div id="share-link" class="fadeIn">
@ -140,13 +105,49 @@ module.exports = function(state, emit) {
</div> </div>
`; `;
if (div.querySelector('#reset-form')) function passwordComplete(password) {
div.querySelector('#reset-form').onsubmit = resetPassword; const el = html`<div class="selectPassword">
<button
id="resetButton"
onclick=${toggleResetInput}
>${state.translate('changePasswordButton')}</button>
<form
id='reset-form'
class="setPassword hidden"
onsubmit=${resetPassword}
data-no-csrf>
<input id="unlock-reset-input"
class="unlock-input input-no-btn"
maxlength="32"
autocomplete="off"
type="password"
oninput=${inputChanged}
placeholder="${state.translate('unlockInputPlaceholder')}">
<input type="submit"
id="unlock-reset-btn"
class="btn btn-hidden"
value="${state.translate('changePasswordButton')}"/>
</form>
</div>`;
const passwordSpan = html([
`<span>${state.translate('passwordResult', {
password:
'<pre class="passwordOriginal"></pre><pre class="passwordStar"></pre>'
})}</span>`
]);
passwordSpan.querySelector('.passwordOriginal').textContent = password;
passwordSpan.querySelector('.passwordStar').textContent = password.replace(
/./g,
'●'
);
el.insertBefore(passwordSpan, el.firstElementChild);
return el;
}
function resetPassword(event) { function resetPassword(event) {
event.preventDefault(); event.preventDefault();
const existingPassword = document.querySelector('.passwordOriginal') const existingPassword = file.password;
.innerText;
const password = document.querySelector('#unlock-reset-input').value; const password = document.querySelector('#unlock-reset-input').value;
if (password.length > 0) { if (password.length > 0) {
document.getElementById('copy').classList.remove('wait-password'); document.getElementById('copy').classList.remove('wait-password');

View File

@ -12,7 +12,7 @@ module.exports = function(state, emit) {
<form class="setPassword hidden" onsubmit=${setPassword} data-no-csrf> <form class="setPassword hidden" onsubmit=${setPassword} data-no-csrf>
<input id="unlock-input" <input id="unlock-input"
class="unlock-input input-no-btn" class="unlock-input input-no-btn"
maxlength="64" maxlength="32"
autocomplete="off" autocomplete="off"
placeholder="${state.translate('unlockInputPlaceholder')}" placeholder="${state.translate('unlockInputPlaceholder')}"
type="password" type="password"

View File

@ -147,6 +147,7 @@ button {
pre { pre {
font-family: monospace; font-family: monospace;
font-size: 18px;
font-weight: 600; font-weight: 600;
display: inline-block; display: inline-block;
} }
@ -698,7 +699,7 @@ tbody {
} }
.selectPassword :hover .passwordOriginal { .selectPassword :hover .passwordOriginal {
display: block; display: inline;
} }
.selectPassword :hover .passwordStar { .selectPassword :hover .passwordStar {