login and logout work

src/js/app-router.js

@@ -15,20 +15,14 @@
 		initialize: function() {},
 
 		login: function() {
-			// init email dao and dependencies
-			this.emailDao = null;
-
-			var loginView = new app.view.LoginView({
-				dao: this.emailDao
-			});
+			var loginView = new app.view.LoginView();
 			this.changePage(loginView);
 		},
 
 		compose: function(userId, folder, messageId) {
 			var composeView = new app.view.ComposeView({
 				folder: folder,
-				messageId: decodeURIComponent(messageId),
-				dao: this.emailDao
+				messageId: decodeURIComponent(messageId)
 			});
 			this.changePage(composeView);
 		},
@@ -44,8 +38,7 @@
 			var self = this;
 			var messageListView = new app.view.MessageListView({
 				account: userId,
-				folder: folder,
-				dao: this.emailDao
+				folder: folder
 			});
 			self.changePage(messageListView);
 			messageListView.loadItems();
@@ -54,8 +47,7 @@
 		read: function(userId, folder, messageId) {
 			var readView = new app.view.ReadView({
 				folder: folder,
-				messageId: decodeURIComponent(messageId),
-				dao: this.emailDao
+				messageId: decodeURIComponent(messageId)
 			});
 			this.changePage(readView);
 			readView.renderBody(true);

src/js/sandbox-loader.js

@@ -22,15 +22,18 @@
 	$(document).ready(function() {
 		console.log('sandbox loaded');
 
+		// set listener for event from main window
 		window.onmessage = function(e) {
-			app.util.tpl.templates = e.data;
+			if (e.data.cmd === 'init') {
+				app.util.tpl.templates = e.data.args;
 
-			// remember references to main window
-			window.mainWindow = e.source;
-			window.mainWindowOrigin = e.origin;
+				// remember references to main window
+				window.mainWindow = e.source;
+				window.mainWindowOrigin = e.origin;
 
-			var router = new app.Router();
-			Backbone.history.start();
+				var router = new app.Router();
+				Backbone.history.start();
+			}
 		};
 	});
 

src/js/view/login-view.js

@@ -3,12 +3,11 @@
 
 	app.view.LoginView = Backbone.View.extend({
 
-		initialize: function(args) {
+		initialize: function() {
 			this.template = _.template(app.util.tpl.get('login'));
-			this.dao = args.dao;
 		},
 
-		render: function(eventName) {
+		render: function() {
 			var self = this,
 				page = $(this.el);
 
@@ -27,13 +26,6 @@
 				userId = page.find('#userId').val(),
 				password = page.find('#password').val();
 
-			var account = new app.model.Account({
-				emailAddress: userId,
-				symKeySize: app.config.symKeySize,
-				symIvSize: app.config.symIvSize,
-				asymKeySize: app.config.asymKeySize
-			});
-
 			// show loading msg during init
 			$.mobile.loading('show', {
 				text: 'Unlocking...',
@@ -41,20 +33,29 @@
 				theme: 'c'
 			});
 
-			window.location = '#accounts/test@example.com/folders';
+			// set listener for event from main window
+			window.onmessage = function(e) {
+				if (e.data.cmd === 'login') {
+					var err = e.data.args.err;
+
+					$.mobile.loading('hide');
+					if (err) {
+						window.alert(err.errMsg);
+						return;
+					}
+
+					window.location = '#accounts/' + userId + '/folders';
+				}
+			};
+
+			// send message to main window
 			window.mainWindow.postMessage({
-				cmd: 'hello back from sandbox'
+				cmd: 'login',
+				args: {
+					userId: userId,
+					password: password
+				}
 			}, window.mainWindowOrigin);
-
-			// this.dao.init(account, password, function(err) {
-			// 	$.mobile.loading('hide');
-			// 	if (err) {
-			// 		window.alert(err.errMsg);
-			// 		return;
-			// 	}
-
-			// 	window.location = '#accounts/' + account.get('emailAddress') + '/folders';
-			// });
 		}
 	});
 

src/js/window-loader.js

@@ -1,6 +1,8 @@
 (function() {
 	'use strict';
 
+	var emailDao; // local variable for main DAO
+
 	/**
 	 * The Template Loader. Used to asynchronously load templates located in separate .html files
 	 */
@@ -62,16 +64,61 @@
 					'messagelist',
 					'messagelistitem',
 					'read'
-			], function() {
-				// set listener for events from sandbox
-				window.onmessage = function(e) {
-					console.log(e.data);
-				};
-				// init sandbox ui
-				var sandbox = document.getElementById('sandboxFrame').contentWindow;
-				sandbox.postMessage(app.util.tpl.templates, '*');
-			});
+			], startApp);
 		}
 	});
 
+	function startApp() {
+		// init email dao and dependencies
+		initDAO();
+
+		// sandboxed ui in iframe
+		var sandbox = document.getElementById('sandboxFrame').contentWindow;
+
+		// set listener for events from sandbox
+		window.onmessage = function(e) {
+			var cmd = e.data.cmd;
+			var args = e.data.args;
+
+			if (cmd === 'login') {
+				// login user
+				login(args.userId, args.password, function(err) {
+					sandbox.postMessage({
+						cmd: 'login',
+						args: {
+							err: err
+						}
+					}, '*');
+				});
+			}
+		};
+
+		// init sandbox ui
+		sandbox.postMessage({
+			cmd: 'init',
+			args: app.util.tpl.templates
+		}, '*');
+	}
+
+	function initDAO() {
+		var util = new cryptoLib.Util(window, uuid);
+		var crypto = new app.crypto.Crypto(window, util);
+		var cloudstorage = new app.dao.CloudStorage(window, $);
+		var jsonDao = new app.dao.LawnchairDAO(Lawnchair);
+		var devicestorage = new app.dao.DeviceStorage(util, crypto, jsonDao, null);
+		var keychain = new app.dao.KeychainDAO(jsonDao, cloudstorage);
+		emailDao = new app.dao.EmailDAO(jsonDao, crypto, devicestorage, cloudstorage, util, keychain);
+	}
+
+	function login(userId, password, callback) {
+		var account = new app.model.Account({
+			emailAddress: userId,
+			symKeySize: app.config.symKeySize,
+			symIvSize: app.config.symIvSize,
+			asymKeySize: app.config.asymKeySize
+		});
+
+		emailDao.init(account, password, callback);
+	}
+
 }());

src/tpl/folderlist.html

@@ -1,5 +1,5 @@
-<div data-role="header" data-position="fixed">  
-  <input type="button" id="backBtn" data-icon="arrow-l" value="Logout" class="ui-btn-left">
+<div data-role="header" data-position="fixed">
+  <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">Logout</a>
   <h1><%- account %></h1>
 </div><!-- /header -->
 

src/tpl/read.html

@@ -8,7 +8,7 @@
   <ul data-role="listview" data-theme="d" data-divider-theme="d" id="idEmailList" data-mini="true">
     
     <li style="border: 0px">
-			<h3>from: <%- from[0].name %> &lt;<%- from[0].address %>&gt;</h3>
+		  <h3>from: <%- from[0].name %> &lt;<%- from[0].address %>&gt;</h3>
 			<p>to:
 				<% _.each(to, function(o) { %>
 					<%- o.name %> &lt;<%- o.address %>&gt;
@@ -25,7 +25,7 @@
 		  <div style="font-size: 8pt; font-weight: normal">
         <iframe id="idMailContent" sandbox="allow-same-origin" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
       </div>
-		</li>
+    </li>
 		
 	</ul>  
 </div><!-- /content -->