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});
    }
  }];

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

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

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

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

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

  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");
    }
  });

  return {};

  function playersChanged() {
    var loggedIn = modules.session.loggedIn();
    setMode(loggedIn);
    refreshPlayers(loggedIn);
  }

  function refreshPlayers(loggedIn) {
    modules.dom.clear(players);
    if(loggedIn) {
      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;
    });
  }

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

  function setMode(loggedIn) {
    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();
    }
  }
}