server/www/login.js

function Login(modules) {
  var root = document.getElementById('login');
  var playersMessage = root.getElementsByClassName('message')[0];
  var players = root.getElementsByClassName('list')[0];
  var join = document.getElementById("join");
  var invite = document.getElementById("invite");
  var submit = root.submitButton;
  var them = null;
  var invitationAnswers = [{
    label: 'accept',
    action: function() {
      modules.messaging.send({tag: "Answer", accept: true});
      modules.screen.select("game");
    }
  }, {
    label: 'decline',
    action: function() {
      modules.messaging.send({tag: "Answer", accept: false});
    }
  }];

  init();

  return {};

  function init() {
    initDOMEvents();
    initMessageHandlers();
    var name = modules.save.get('player.name');
    if(name != undefined && name.length > 0) {
      root.you.value = name;
      formDisable('join', false);
    }
  }

  function initDOMEvents() {
    root.addEventListener('submit', function(e) {
      e.preventDefault();
      if(modules.session.isLoggedIn()) {
        modules.messaging.send({tag: "Invitation", to: them});
      } else {
        modules.session.start(root.you.value);
      }
    });

    root.leave.addEventListener('click', function(e) {
      e.preventDefault();
      lib.send({tag: "LogOut"})
    });

    root.you.addEventListener("input", function() {refreshPlayers();});
    root.them.addEventListener("input", function() {refreshPlayers();});
  }

  function initMessageHandlers() {
    modules.messaging.addEventListener(["Welcome"], function() {
      refreshPlayers();
    });

    modules.messaging.addEventListener(["Update"], function(o) {
      refreshPlayers();
    });

    modules.messaging.addEventListener(["Relay", "LogIn"], function() {
      playersChanged();
    });

    modules.messaging.addEventListener(["Relay", "LogOut"], function() {
      playersChanged();
    });

    modules.messaging.addEventListener(["Relay", "Invitation"], function(o) {
      var name = modules.room.name(o.from);
      // invitations should come only from known players, in doubt say «no»
      if(name) {
        modules.statusHandler.set("🎴");
        modules.screen.dialog({
          text: modules.i18n.get('invited')(name),
          answers: invitationAnswers
        });
      } else {
        modules.messaging.send({tag: "Answer", accept: false});
      }
    });

    modules.messaging.addEventListener(["Relay", "Answer"], function(o) {
      if(o.message.accept) {
        modules.screen.select("game");
      }
    });

    modules.messaging.addEventListener('open', refreshPlayers);
    modules.messaging.addEventListener('close', refreshPlayers);
  }

  function playersChanged() {
    setMode();
    refreshPlayers();
  }

  function refreshPlayers() {
    modules.dom.clear(players);
    if(modules.session.isLoggedIn()) {
      refreshThem();
    } else {
      refreshYou();
    }
  }

  function refreshYou() {
    var nameTaken = false;
    var name = root.you.value;
    modules.room.filter(name).forEach(function(player) {
      players.appendChild(player.dom);
      nameTaken = nameTaken || name == player.name;
    });
    formDisable("join", name.length < 1 || nameTaken);
  }

  function refreshThem() {
    them = null;
    var name = root.them.value;
    var filtered = modules.room.filter(name);
    filtered.forEach(function(player) {
      players.appendChild(player.dom);
    });
    var exact = filtered.find(exactMatch(name));
    playersMessage.textContent = '';
    if(exact != undefined) {
      them = exact.key;
    } else if(filtered.length == 1) {
      them = filtered[0].key;
    } else if(filtered.length == 0) {
      playersMessage.textContent = modules.i18n.get(
        name.length > 0 ? "notFound" : "alone"
      );
    }
    formDisable("invite", them == undefined);
  }

  function formDisable(name, disabled) {
    [submit, root[name]].forEach(function(button) {
      button.disabled = disabled || !modules.messaging.isOn();
    });
  }

  function exactMatch(name) {
    return function(player) {
      return player.name === name;
    };
  }

  function setMode() {
    var loggedIn = modules.session.isLoggedIn()
    root.join.disabled = loggedIn;
    root.invite.disabled = !loggedIn;
    if(loggedIn) {
      join.className = "";
      invite.className = "on";
      root.them.focus();
    } else {
      join.className = "on";
      invite.className = "";
      root.you.focus();
    }
  }
}