User auth example

How user auth could be done

by Francisco Presencia Fandos

HTML

<button class="login">Login</button>

<pre></pre>

<form class="identity">
  <header>
    <h2>Identity</h2>
  </header>
  <section>
    <label>
      <span class="label">First name:</span>
      <span class="field">
        <select name="firstname">
          <option>Francisco</option>
          <option>Paco</option>
          <option>+ add another</option>
        </select>
      </span>
    </label>
    <label>
      <span class="label">Last name:</span>
      <span class="field">
        <select name="lastname">
          <option>Presencia Fandos</option>
          <option>Presencia</option>
          <option>+ add another</option>
        </select>
      </span>
    </label>
    <label>
      <span class="label">Email:</span>
      <span class="field">
        <select name="email">
          <option>[email protected]</option>
          <option>[email protected]</option>
          <option>+ add another</option>
        </select>
      </span>
    </label>
  </section>
  <footer>
    <label class="field">
      <input type="checkbox" name="_remember">
      Remember me
    </label>
    <button class="enter">Login</button>
    <button class="cancel">Cancel</button>
  </footer>
</form>

CSS

.identity {
  position: absolute;
  top: 50%; left: 50%;
  transform: scale(0) translate(-50%, -50%);
  transform-origin: 0 0;
  
  width: 250px;
  padding: 20px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
  transition: all .3s ease;
}

.identity.show {
  transform: scale(1) translate(-50%, -50%);
  transition: all .3s ease;
}

.identity h2 {
  margin: 0 0 20px;
}

.identity select,
.identity input {
  width: 100%;
}

.identity input[type="checkbox"],
.identity input[type="radio"] {
  width: auto;
}

.identity label {
  display: block;
  margin: 10px 0;
}

.identity section label {
  margin-bottom: 20px;
}

.identity .label {
  display: block;
  margin-bottom: 5px;
}

.identity .cancel {
  float: right;
}

JavaScript

// Definition
let log = (...args) => {
	let message = args.map(arg => JSON.stringify(arg, false, 2)).join('\n');
  $('pre').html($('pre').html() + '\n' + message);
}

let identity = (...args) => new Promise((resolve, reject) => {
  $('.identity').addClass('show');

  $('.identity .cancel').on('click', e => {
    e.preventDefault();
    $('.identity').removeClass('show');
    reject(new Error('User canceled login'));
  });

  $('.identity').on('submit', e => {
    e.preventDefault();
    let objectify = (obj, el) => Object.assign({}, obj, { [el.name]: el.value });
    let user = {
    	fields: $(e.target).serializeArray().reduce(objectify, {}),
      token: [1, 2, 3, 4].map(n => Math.random().toString(36).slice(2)).join(''),
      logout: () => new Promise((resolve, reject) => {
      	log('Logged out');
        resolve();
      })
    };
    user.remember = !!user.fields._remember;
    delete user.fields._remember;
    resolve(user);
    $('.identity').removeClass('show');
  });
});

function IdentityField(type, name, all) {
  let field = Object.assign({}, all, { name });
  field.edit = () => new Promise((resolve, reject) => {
  	log('Updating ' + name);
  });
  field.update = () => {
  	log('Please edit this field: ' + name);
  }
  //field.update = function(){};
  return field;
}



// Implementation
(function init() {
  $('.login').html('Login').off('click').on('click', e => {
    if ($(e.target).hasClass('active')) return;
    $(e.target).html('Login in...').addClass('active');
    loginin = true;
    identity().then(user => {
      log(user);

      $('.login').html('Log out').removeClass('active').off('click')
      	.on('click', e => {
        user.logout().then(init);
      });
    }).catch(err => {
    	$('.login').html('Login').removeClass('active');
    	log("Error:", err)
    });
  });
})();


// Possible:
// Confirmation levels:
// 0: no security; default
// 1: the browser trusts the user (captcha)
// 2: auth through some social login/OAuth to the...