Eventbrite

Sign-In.js

//
// On https://www.eventbrite.com/
//
// First, adjust the `autocomplete` attributes on the email and password form fields:
document.querySelector('#login-email').setAttribute('autocomplete', 'username');
document.querySelector('#login-password').setAttribute('autocomplete', 'current-password');

// Then hook up an event listener to the form to catch typed/autofilled sign-ins:
//
// On the real site, they'd hook this up to the dispatcher that kicks off an XHR to login/:
document.querySelector('.responsive-form.l-mar-top-3').addEventListener('submit', e => {
  if (navigator.credentials) {
    e.preventDefault();
    var c = new PasswordCredential(e.target);
    fetch(e.target.action, { credentials: c, method: 'POST' })
      .then(r => {
        if (r.type == 'opaqueredirect') { // If we're redirected, success! (Ideally, this could be more explicit)
          navigator.credentials.store(c).then(_ => {
            window.location = "http://www.eventbrite.com/[exciting_landing_page_goes_here]";
          });
        } else {
          // Do something clever to handle the sign-in error.
        }
      });
  }
});

// And then try to grab credentials:
navigator.credentials.get({
    password: true,
    /*
    Adding `, unmediated: true` here would grab credentials automatically if
    they've allowed that access, and would just return `undefined` without
    asking the user if they haven't.
    */
  })
  .then(c => {
    if (c instanceof PasswordCredential) {
      c.additionalData = new FormData(document.querySelector('.responsive-form.l-mar-top-3'));
      c.idName = "email";
      fetch("/login", { credentials: c, method: 'POST' })
        .then(r => {
          if (r.type == 'opaqueredirect') { // If we're redirected, success!
            navigator.credentials.store(c).then(_ => {
              window.location = "http://www.eventbrite.com/[exciting_landing_page_goes_here]";
            });
          } else {
            // Do something clever to handle the sign-in error.
          }
        });
    }
  });