Source: Login.js

const util = require('util');
const EventEmitter = require('events');
/**
* View Login, implements the login widget 
* It has 3 states: 
* - "loginWait" - The widget was shown
* - "LoginDone" - The user filled fields and clicked login button
* - "authOk"    - User authenticated
* 
* The view emits  event with the same name of status when reached.
* It uses the mustache template login_template.mtjs
*
* @param {Telll} t the telll object
* @author Monsenhor filipo at kobkob.org
* @constructor
*/
function Login(t){
    this.t = t;
    this.state = "init";
    this._init();
}
util.inherits(Login, EventEmitter);

/**
 * Init widget
 */
Login.prototype._init = function () {
    this._showLoginWidget(this.t.credentials);
    EventEmitter.call(this);
    this.state = "loginWait";
    this.emit(this.state);
}

/**
* @param data {} 
* @return bool
*/
Login.prototype._showLoginWidget = function(data){
    var telll = this.t;
    var me = this;
    me.state = "opened";
    me.emit(me.state, me);
    // Create widget
    var tmpl = require('./templates/login_template.mtjs');
    var html = Mustache.render(tmpl.html, data);
    $('<style id="login-css">'+tmpl.css+'</style>').appendTo('head');
    $(html).appendTo('body');
    // As a popup    
    $('<div class="login-popup-overlay"></div>').appendTo('body');
    $('<div id="popup-login" class="popup"></div>').appendTo('body');
    $(".telll-login-widget").appendTo('#popup-login').fadeIn();
    //$('#popup-movies-list').css('z-index','999');
    $('html').addClass('overlay');
    this.centerPanel();
    $( window ).resize(function() { me.centerPanel(); });
    $(window).on('orientationchange', function() { me.centerPanel(); });
    // Behaviors
    $('input#email').on('focus',function(){$(this).val("")});
    $('input#password').on('focus',function(){$(this).val(""); $(this).attr('type', 'password')});
    // Sign up & Facebook login
    $('div#sign-up').on('click',function(){me.signUp()});
    $('div#face-login').on('click',function(){me.faceLogin()});
    // Login done
    this.on( "authOk", function( data ) {
	me.detach();
        //telll.setCookie('username',data.username,telll.conf.extime);
        //telll.setCookie('password',data.password,telll.conf.extime);
        telll.setCookie('auth_key',data.auth_key,telll.conf.extime);
        telll.setCookie('device',data.device,telll.conf.extime);
    });
    var authOk = function ( error, data ){ 
            if (error) return alert(error);
	    me.state = 'authOk';
            var d = telll.credentials;
            for (var a in data) { d[a] = data[a]; }
            data = d;
	    me.emit(me.state, data);
    }; 
    this.on( "loginDone", function( data ) {
        // Authenticate device via ws or rest
        via = window.WebSocket != undefined ? "ws" : "lp";
        if (via == 'ws') {
            //Websocket opened, initating login
            telll.wsAuth( data, authOk );
        }
	else {
            telll.auth(data, authOk);
        }
    });

    // Listen user action
    $( "#login-ok-button" ).click(function(e) {
        e.preventDefault();
	var dataAuth = {
	    username: $('#email').val(),
	    password: $('#password').val()
	};
	me.state = 'loginDone';
        me.emit( me.state, dataAuth );
    });
    return true;
};

/**
* @return null
*/
Login.prototype.signUp = function(){
	me = this;
    var $signupWidget = $("<div id='signup-widget'></div>");
    var $signupFrame = $("<div id='signup-frame'></div>");
 /*   var $usernameField = $("<input id='username-field'/>");
    var $emailField = $("<input id='email-field'/>").on('change', function(){ 
        me.verifyEmail( $(this).val() );
    });
    var $passwordField 
	    = $("<input type='password' id='password-field'/>").on('change', function(){ 
        me.verifyPassword( $(this).val() );
    });
    var $submitButton 
	    = $("<button id='submit-button'>Create account</button>").on('click', 
    function(){
        me.createUser( {
	    username: $usernameField.val(),
	    password: $passwordField.val(),
	    email: $emailField.val()
	} );
    });
    $signupFrame.append([
        $("<div class='notes'>Fill with your personal data to create a new account:</div>"),
	$('<div class="tr"></div>').append([
	    $("<label for='username-field'>Username:</label>"), $usernameField
	]),
	$('<div class="tr"></div>').append([
	    $("<label for='email-field'>Email:</label>"), $emailField
	]),
	$('<div class="tr"></div>').append([
	    $("<label for='password-field'>Password:</label>"), $passwordField
	]),
	$submitButton
    ]);
    telllPopup($signupWidget.append($signupFrame),"Create account");
    */
    telllPopup($signupWidget.append($signupFrame.load("/signup")),"Create account");
};

/**
* @return null
* @param email {String} email string to test
*/
Login.prototype.verifyEmail = function(email){
     var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
     if (! re.test(email) ) {
	     telllDialog("This email is not valid, please verify it.", 2000);
     }
}; 

/**
* @return null
*/
Login.prototype.verifyPassword = function(pass){
    var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/;  
    if (! re.test(pass) ) {
	     telllDialog("Your password must have 6 to 20 characters which contain at least one numeric digit, one uppercase and one lowercase letter, please verify it.", 3000);
     }

} ;

/**
 * @param userData {Object} the user personal data
* @return null
*/
Login.prototype.createUser = function(userData){
    var me = this;
//    me.t.createUser(userData, function(result){
//        telllDialog(result.msg, 2000);
//    });
    // send email to new user and to administrator with data
    var urlLead = 'https://crm.zoho.com/crm/WebToLeadForm'; 
    userData = merge (userData, { 
	    formName:'WebToLeads1655497000000097006', 
            xnQsjsdp: '80a6c4b3a3900c8666c28eb867a340173328af9ed88794bd6f2ce0e359810586',
	    zc_gad : '',
	    xmIwtLD: '60a5f25b7df4ec876b16b5df740648626b60c088fb23bbb62801c33fcdb203f3',
	    actionType: 'TGVhZHM=',
            returnURL: 'http&#x3a;&#x2f;&#x2f;webapp.telll.me'
    });
    //$.post(me.t.conf.newAccount, userData, function(data){
    console.log("Sending: ", userData);
    $.post(urlLead, userData, function(data){
          //telllDialog(data.msg, 2000);
          console.log(data);
    }).done(function() {
	        console.log( "second success" );
		  })
      .fail(function(e) {
	           console.log( "fail",e.statusText );
		    })
      .error(function(e) {
	           console.log( "error",e );
		    })
      .always(function() {
		     console.log( "finished" );
      });

    function merge () {
	var o = {};
        var i = 0,
            il = arguments.length,
            key;
        for (; i < il; i++) {
            for (key in arguments[i]) {
                if (arguments[i].hasOwnProperty(key)) {
                    o[key] = arguments[i][key];
                }
            }
        }
        return o;
    };  


} ;

/**
* @return null
*/
Login.prototype.faceLogin = function(){
	try {
          FB.login(function(response){
		  console.log(response);
          });
	} catch (e) {
		telllDialog('Error: '+e,2000);
	}
} ;


/**
* @return null
*/
Login.prototype.centerPanel = function(){
  var height = $(window).height();
  var panelSize = {
    width:  $("div.telll-login-widget").width(),
    height: $("div.telll-login-widget").height()
  };
  var marginTop = (height - panelSize.height) / 2 ;
  if (marginTop < 0) marginTop = 0;
  $("div.telll-login-widget").css("margin-top",marginTop+"px");
};


/**
* @return null
*/
Login.prototype.detach = function(){
    $('.telll-login-widget').detach();
    $('div.login-popup-overlay').detach();
    $('div#popup-login').detach();

};

module.exports = {Login:Login};