Repository: mozilla/send
File: app/templates/share.js (JavaScript)

Code before:
/* global EXPIRE_SECONDS */
const html = require('choo/html');
const assets = require('../../common/assets');
const notFound = require('./notFound');
const uploadPassword = require('./uploadPassword');
const selectbox = require('./selectbox');
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">Reset</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="Reset Password"/>
    </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() {
  const resetInput = document.getElementById('unlock-reset-input');
  const resetBtn = document.getElementById('unlock-reset-btn');

Review comment (suggestion):
Does it work if you set `onclick=${toggleResetInput}` here instead of with the querySelector below? If so it's the preferred style. (also same with others)

Code after:
/* global EXPIRE_SECONDS */
const html = require('choo/html');
const assets = require('../../common/assets');
const notFound = require('./notFound');
const uploadPassword = require('./uploadPassword');
const selectbox = require('./selectbox');
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="Reset Password"/>
    </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() {
  const resetInput = document.getElementById('unlock-reset-input');
  const resetBtn = document.getElementById('unlock-reset-btn');