const html = require('choo/html'); module.exports = function(state, emit) { const file = state.storage.getFileById(state.params.id); const div = html` <div class="selectPassword"> <div id="addPasswordWrapper"> <input id="addPassword" type="checkbox" autocomplete="off" onchange=${togglePasswordInput}/> <label for="addPassword"> ${state.translate('requirePasswordCheckbox')} </label> </div> <form class="setPassword hidden" onsubmit=${setPassword} data-no-csrf> <input id="unlock-input" class="unlock-input input-no-btn" maxlength="32" autocomplete="off" placeholder="${state.translate('unlockInputPlaceholder')}" type="password" oninput=${inputChanged}/> <input type="submit" id="unlock-btn" class="btn btn-hidden" value="${state.translate('addPasswordButton')}"/> </form> </div>`; function inputChanged() { const input = document.getElementById('unlock-input'); const btn = document.getElementById('unlock-btn'); if (input.value.length > 0) { btn.classList.remove('btn-hidden'); input.classList.remove('input-no-btn'); } else { btn.classList.add('btn-hidden'); input.classList.add('input-no-btn'); } } function togglePasswordInput(e) { const unlockInput = document.getElementById('unlock-input'); const boxChecked = e.target.checked; document .querySelector('.setPassword') .classList.toggle('hidden', !boxChecked); if (boxChecked) { unlockInput.focus(); } else { unlockInput.value = ''; } inputChanged(); } function setPassword(event) { event.preventDefault(); const password = document.getElementById('unlock-input').value; if (password.length > 0) { document.getElementById('copy').classList.remove('wait-password'); document.getElementById('copy-btn').disabled = false; emit('password', { password, file }); } return false; } return div; };