import "./styles.css"; import emitonoff from "emitonoff"; import html from "nanohtml"; import { CLICKED_SUBMIT, TYPED_CHAR, INIT_SCREEN, GREEN_INPUT, RED_INPUT, SUBMITTED_PASSWORD, RENDER, START } from "./properties"; import { pwdFsm } from "./fsm"; const eventEmitter = emitonoff(); function buttonEventHandler(ev) { eventEmitter.emit(CLICKED_SUBMIT, void 0); } function inputEventHandler(ev) { if (ev.isComposing || ev.keyCode === 229) { return; } eventEmitter.emit(TYPED_CHAR, ev.target.value); } const appEl = document.getElementById("app"); const initScreenEl = html`

Enter password

`; const submittedEl = password => html`

That's all folks! Submitted password is ${password}

`; // Shell const commandHandlers = { [RENDER]: params => { const { screen, props } = params; if (screen === INIT_SCREEN) { // Build the DOM anew appEl.appendChild(initScreenEl); } else if (screen === GREEN_INPUT) { // update the existing DOM document.getElementById("password-strength-meter").value = 4; } else if (screen === RED_INPUT) { // update the existing DOM document.getElementById("password-strength-meter").value = 1; } else if (screen === SUBMITTED_PASSWORD) { // update the existing DOM const password = props; appEl.parentNode.replaceChild(submittedEl(password), appEl); } } }; [CLICKED_SUBMIT, TYPED_CHAR, START].forEach(event => { eventEmitter.on(event, arg => { const commands = pwdFsm({ [event]: arg }); commands && commands .filter(x => x !== null) .forEach(({ command, params }) => { commandHandlers[command] && commandHandlers[command](params); }); }); }); eventEmitter.emit(START, void 0);

password-meter-vanilla