datchley/component-data.js

## component-data.js
// Simple Data Component to handle authorization calls
var Auth = flight.component(function() {
    this.defaultAttrs({
        user: 'default'
    });

    this.authenticate = function(ev, data) {
        console.log("[debug] calling authenticate");
        $.ajax({
            method: 'POST',
            url: 'user.json',
            dataType: 'json',
            context: this,
            data: {
                username: data.username,
                password: data.password
            },
            success: function(resp) {
                this.attr.user = resp.user;
                this.trigger('dataAuthenticated', { user: this.attr.user });
            }
        });
    };

    this.deauthenticate = function(ev, data) {
        this.attr.user = 'default';
        this.trigger('dataDeauthenticated', {});
    };

    this.after('initialize', function() {
       this.on('uiRequestAuthenticate', this.authenticate);
       this.on('uiRequestDeauthenticate', this.deauthenticate);
    });
});


## component-greeting.js
var Greeting = flight.component(function() {
    this.defaultAttrs({
        username: 'datchley',
        password: 'password',

        // selectors
        greetingSelector: 'div.greeting',
        loginDisplaySelector: 'div.login',
        loginButtonSelector: 'button.btn-login',
        logoutButtonSelector: 'button.btn-logout',

        // templates
        tmpIsLoggedIn: 'Logged in as <b>{user}</b> | <button type="button" class="btn-logout">Logout</button>',
        tmpIsLoggedOut: 'Not Logged in | <button type="button" class="btn-login">Login</button>'
    });

    // simple parameterized template rendering
    this.render = function(tmpl, data) {
        var template = this.attr[tmpl];
        return template.replace(/{([^}]+)}/g, function(m, key) {
            return data[key];
        });
    };

    this.writeGreeting = function(s) {
        this.select('greetingSelector').html('<p>' + s + ' ' + this.attr.name + '</p>');
    };

    this.showLogedIn = function(ev, data) {
       this.select('loginDisplaySelector').html(this.render('tmpIsLoggedIn', data));

       // Only show greeting after logging in
       this.writeGreeting("You logged in,");
       this.engage();
    };

    this.showLoggedOut = function(ev, data) {
        this.select('loginDisplaySelector').html(this.render('tmpIsLoggedOut',{}));
        this.writeGreeting('Goodbye,');
    };

    this.requestAuthentication = function(ev, data) {
       this.trigger('uiRequestAuthenticate', { username: this.username, password: this.password });
    };

    this.requestLogout = function(ev, data) {
       this.trigger('uiRequestDeauthenticate', { });
    };

    this.after('initialize', function() {
       this.select('loginDisplaySelector').html(this.render('tmpIsLoggedOut',{}));

       // listen for responses from the Auth data component
       this.on(document, 'dataAuthenticated', this.showLogedIn);
       this.on(document, 'dataDeauthenticated', this.showLoggedOut);

       // clicks on login/logout buttons
       this.on('click', {
            loginButtonSelector: this.requestAuthentication,
            logoutButtonSelector: this.requestLogout
       });
       window.greeting = this;
    });
},
Engage);


## index.html
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="flight.js"></script>
    <script src="mixin-engage.js"></script>
    <script src="component-data.js"></script>
    <script src="component-greeting.js"></script>
    <style type="text/css">
        body { font: 13px Helvetica, arial, freesans, clean, sans-serif; }
        #mycomponent {
            background-color: #f5f5f5;
        }
        #mycomponent div.greeting {
            padding: 10px;
        }
        #mycomponent div.login {
            margin-top: 0;
            padding: 2px;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="mycomponent">
        <div class="login"></div>
        <div class="greeting"></div>
    </div>
    <script>
    Auth.attachTo(document, {});
    $(document).ready(function() {
        Greeting.attachTo('#mycomponent', { name: "David" });
    });
    </script>
</body>
</html>


## mixin-engage.js
var Engage = function() {
   this.engage = function() {
        this.$node.append('<p>How are you?</p>');
   };
};

## user.json
{ "user": "datchley" }
	// Simple Data Component to handle authorization calls
	var Auth = flight.component(function() {
	this.defaultAttrs({
	user: 'default'
	});

	this.authenticate = function(ev, data) {
	console.log("[debug] calling authenticate");
	$.ajax({
	method: 'POST',
	url: 'user.json',
	dataType: 'json',
	context: this,
	data: {
	username: data.username,
	password: data.password
	},
	success: function(resp) {
	this.attr.user = resp.user;
	this.trigger('dataAuthenticated', { user: this.attr.user });
	}
	});
	};

	this.deauthenticate = function(ev, data) {
	this.attr.user = 'default';
	this.trigger('dataDeauthenticated', {});
	};

	this.after('initialize', function() {
	this.on('uiRequestAuthenticate', this.authenticate);
	this.on('uiRequestDeauthenticate', this.deauthenticate);
	});
	});
	var Greeting = flight.component(function() {
	this.defaultAttrs({
	username: 'datchley',
	password: 'password',

	// selectors
	greetingSelector: 'div.greeting',
	loginDisplaySelector: 'div.login',
	loginButtonSelector: 'button.btn-login',
	logoutButtonSelector: 'button.btn-logout',

	// templates
	tmpIsLoggedIn: 'Logged in as <b>{user}</b> \| <button type="button" class="btn-logout">Logout</button>',
	tmpIsLoggedOut: 'Not Logged in \| <button type="button" class="btn-login">Login</button>'
	});

	// simple parameterized template rendering
	this.render = function(tmpl, data) {
	var template = this.attr[tmpl];
	return template.replace(/{([^}]+)}/g, function(m, key) {
	return data[key];
	});
	};

	this.writeGreeting = function(s) {
	this.select('greetingSelector').html('<p>' + s + ' ' + this.attr.name + '</p>');
	};

	this.showLogedIn = function(ev, data) {
	this.select('loginDisplaySelector').html(this.render('tmpIsLoggedIn', data));

	// Only show greeting after logging in
	this.writeGreeting("You logged in,");
	this.engage();
	};

	this.showLoggedOut = function(ev, data) {
	this.select('loginDisplaySelector').html(this.render('tmpIsLoggedOut',{}));
	this.writeGreeting('Goodbye,');
	};

	this.requestAuthentication = function(ev, data) {
	this.trigger('uiRequestAuthenticate', { username: this.username, password: this.password });
	};

	this.requestLogout = function(ev, data) {
	this.trigger('uiRequestDeauthenticate', { });
	};

	this.after('initialize', function() {
	this.select('loginDisplaySelector').html(this.render('tmpIsLoggedOut',{}));

	// listen for responses from the Auth data component
	this.on(document, 'dataAuthenticated', this.showLogedIn);
	this.on(document, 'dataDeauthenticated', this.showLoggedOut);

	// clicks on login/logout buttons
	this.on('click', {
	loginButtonSelector: this.requestAuthentication,
	logoutButtonSelector: this.requestLogout
	});
	window.greeting = this;
	});
	},
	Engage);
	<html>
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="flight.js"></script>
	<script src="mixin-engage.js"></script>
	<script src="component-data.js"></script>
	<script src="component-greeting.js"></script>
	<style type="text/css">
	body { font: 13px Helvetica, arial, freesans, clean, sans-serif; }
	#mycomponent {
	background-color: #f5f5f5;
	}
	#mycomponent div.greeting {
	padding: 10px;
	}
	#mycomponent div.login {
	margin-top: 0;
	padding: 2px;
	border-bottom: 1px solid #ccc;
	}
	</style>
	</head>
	<body>
	<div id="mycomponent">
	<div class="login"></div>
	<div class="greeting"></div>
	</div>
	<script>
	Auth.attachTo(document, {});
	$(document).ready(function() {
	Greeting.attachTo('#mycomponent', { name: "David" });
	});
	</script>
	</body>
	</html>
	var Engage = function() {
	this.engage = function() {
	this.$node.append('<p>How are you?</p>');
	};
	};