Sitebase/bbbx-login-stack.js

## bbbx-login-stack.js
/**
 * BuboBox form callback module
 *
 * @author Wim Mostmans (wim@bubobox.com)
 * @license BSD
 *
 * Copyright (c) 2014 BuboBox
 */

window.bbbx_modules = window.bbbx_modules || []; // Make modules array if not yet exists
window.bbbx_modules.push(function(sandbox, $) {

	var NAME = 'bbbx-login-stack';
	var settings = $(bbbx_login_stack_tag).data();
	var formId = 'bbbx-login-stack-form';

	/**
	 * Add a stack item to the recorder/player popup
	 * name can be pre/post or name of a stack item + pre/post
	 * For example "form.pre" or "terms.post"
	 */
	function addItem( e ) {

		// Check if intro text is configured
		var intro = '';
		if( settings.hasOwnProperty('intro') && settings.intro !== '' ) {
			intro = '<p>' + settings.intro + '</p><hr />';
		}

		e.stack.itemReady({
			name: 'pre',
			view: {
				title: 'Login',
				body: intro + '<form id="' + formId + '"><label for="username">Username</label><input type="text" name="username" id="bbbx-username" value=""><label for="password">Password</label><input type="password" name="password" id="bbbx-password" value=""></form>',
				footer: '<button class="bbbx-button" data-bbbx-trigger="bbbx-login-stack.login">Login</button>'
			}
		});
	}

	function verify( e ) {

		// Get credentials from the form
		var credentials = $('#' + formId).serialize();

		// Set button to grey to give the user a visual cue that something is happening
		e.origin.addClass('bbbx-button-grey');

		$.post(settings.endpoint, credentials).done(function( response ) {

			// Enable login button again
			e.origin.removeClass('bbbx-button-grey');

			if( response.status === 'error' ) {
				hasError( true );
				$('#' +  formId + ' #bbbx-username').focus(); // Set focus on the input field
			} else {
				hasError( false );

				// If response contains meta add it to the current user
				if( response.hasOwnProperty( 'meta' ) ) {
					for( key in response.meta ) {
						sandbox.setMeta( key, response.meta[ key ] );
					}
				}

				sandbox.publish('stack.next', {origin: $('#' + formId)});
			}

		});
	}

	function hasError( error ) {
		var inputs = $('#' + formId).find('input');
		if( error === true ) {
			inputs.addClass('bbbx-error');
		} else {
			inputs.removeClass('bbbx-error');
		}
	}

	var exports = {
		NAME: NAME,

		/**
		 * Module is registered inside the BuboBox widget
		 */
		init: function() {
			console.error('Custom module initialized');
		},

		/**
		 * All modules are loaded
		 */
		ready: function() {
			console.error('Custom module ready, all other modules are also loaded at this point');
		},

		/**
		 * Add listeners for certain actions that happen
		 * in the BuboBox widgets
		 */
		bind: function() {
			sandbox.subscribe('stack.add.pre', addItem);
			sandbox.subscribe('bbbx-login-stack.login', verify);
		},

		/**
		 * Remove listeners we create in the bind function
		 */
		unbind: function() {
			sandbox.unsubscribe(['stack.add.pre', addItem]);
			sandbox.unsubscribe(['bbbx-login-stack.login', verify]);
		},

		/**
		 * Clean up all stuff this module has created
		 * - DOM elements
		 * - Bindings
		 */
		destroy: function() {
			this.unbind();
			// remove some left over DOM elments
		}
	};

	return exports;

});

// Store the current script tag reference
var bbbx_login_stack_tag = document.currentScript;

## bbbx-login-stack.php
<?php

// This is just a very simple example but this can ofcourse be replaced with a call to
// your own API/Database to do the user validation

$username = isset( $_POST['username'] ) ? $_POST['username'] : null;
$password = isset( $_POST['password'] ) ? $_POST['password'] : null;

if( $username === 'admin' && $password === 'test' ) {
	$response = array('status' => 'ok', 'meta' => array('username' => $username, 'custommeta' => 'myvalue'));
} else {
	$response = array('status' => 'error');
}

header('Content-Type: application/json');
echo json_encode( $response );

## index.html
<html>
  <head>
    <script src="bbbx-login-stack.js" data-endpoint="bbbx-login-stack.php" data-intro="This is a super awesome login form. Use your BuboBox credentials to login."></script>
  </head>
  <body>
    <!-- your BuboBox widget snippet -->
  </body>
</html>
	/**
	* BuboBox form callback module
	*
	* @author Wim Mostmans (wim@bubobox.com)
	* @license BSD
	*
	* Copyright (c) 2014 BuboBox
	*/

	window.bbbx_modules = window.bbbx_modules \|\| []; // Make modules array if not yet exists
	window.bbbx_modules.push(function(sandbox, $) {

	var NAME = 'bbbx-login-stack';
	var settings = $(bbbx_login_stack_tag).data();
	var formId = 'bbbx-login-stack-form';

	/**
	* Add a stack item to the recorder/player popup
	* name can be pre/post or name of a stack item + pre/post
	* For example "form.pre" or "terms.post"
	*/
	function addItem( e ) {

	// Check if intro text is configured
	var intro = '';
	if( settings.hasOwnProperty('intro') && settings.intro !== '' ) {
	intro = '<p>' + settings.intro + '</p><hr />';
	}

	e.stack.itemReady({
	name: 'pre',
	view: {
	title: 'Login',
	body: intro + '<form id="' + formId + '"><label for="username">Username</label><input type="text" name="username" id="bbbx-username" value=""><label for="password">Password</label><input type="password" name="password" id="bbbx-password" value=""></form>',
	footer: '<button class="bbbx-button" data-bbbx-trigger="bbbx-login-stack.login">Login</button>'
	}
	});
	}

	function verify( e ) {

	// Get credentials from the form
	var credentials = $('#' + formId).serialize();

	// Set button to grey to give the user a visual cue that something is happening
	e.origin.addClass('bbbx-button-grey');

	$.post(settings.endpoint, credentials).done(function( response ) {

	// Enable login button again
	e.origin.removeClass('bbbx-button-grey');

	if( response.status === 'error' ) {
	hasError( true );
	$('#' + formId + ' #bbbx-username').focus(); // Set focus on the input field
	} else {
	hasError( false );

	// If response contains meta add it to the current user
	if( response.hasOwnProperty( 'meta' ) ) {
	for( key in response.meta ) {
	sandbox.setMeta( key, response.meta[ key ] );
	}
	}

	sandbox.publish('stack.next', {origin: $('#' + formId)});
	}

	});
	}

	function hasError( error ) {
	var inputs = $('#' + formId).find('input');
	if( error === true ) {
	inputs.addClass('bbbx-error');
	} else {
	inputs.removeClass('bbbx-error');
	}
	}

	var exports = {
	NAME: NAME,

	/**
	* Module is registered inside the BuboBox widget
	*/
	init: function() {
	console.error('Custom module initialized');
	},

	/**
	* All modules are loaded
	*/
	ready: function() {
	console.error('Custom module ready, all other modules are also loaded at this point');
	},

	/**
	* Add listeners for certain actions that happen
	* in the BuboBox widgets
	*/
	bind: function() {
	sandbox.subscribe('stack.add.pre', addItem);
	sandbox.subscribe('bbbx-login-stack.login', verify);
	},

	/**
	* Remove listeners we create in the bind function
	*/
	unbind: function() {
	sandbox.unsubscribe(['stack.add.pre', addItem]);
	sandbox.unsubscribe(['bbbx-login-stack.login', verify]);
	},

	/**
	* Clean up all stuff this module has created
	* - DOM elements
	* - Bindings
	*/
	destroy: function() {
	this.unbind();
	// remove some left over DOM elments
	}
	};

	return exports;

	});

	// Store the current script tag reference
	var bbbx_login_stack_tag = document.currentScript;
	<?php

	// This is just a very simple example but this can ofcourse be replaced with a call to
	// your own API/Database to do the user validation

	$username = isset( $_POST['username'] ) ? $_POST['username'] : null;
	$password = isset( $_POST['password'] ) ? $_POST['password'] : null;

	if( $username === 'admin' && $password === 'test' ) {
	$response = array('status' => 'ok', 'meta' => array('username' => $username, 'custommeta' => 'myvalue'));
	} else {
	$response = array('status' => 'error');
	}

	header('Content-Type: application/json');
	echo json_encode( $response );
	<html>
	<head>
	<script src="bbbx-login-stack.js" data-endpoint="bbbx-login-stack.php" data-intro="This is a super awesome login form. Use your BuboBox credentials to login."></script>
	</head>
	<body>
	<!-- your BuboBox widget snippet -->
	</body>
	</html>