Sync Services, Dont Disturb, Lock and new services

- Sync configuration using Firebase.
- Don't DIsturb mode.
- Lock Rambox mode.
- Added new services (Dasher, DingTalk, FlowDock, Mattermost, Voxer,
Yahoo! Messenger).
- Fixed some bugs.

TODO.md

@@ -2,9 +2,5 @@
 
 - Change theme.
 - Deeplink to add new service.
-- Auto Updater
 - Dock Menu (http://electron.atom.io/docs/tutorial/desktop-environment-integration/#custom-dock-menu-os-x)
-- Auth0
-- Group services (Personal, Work, etc)
 - Crush Reporter.
-- Add Voxer, Yahoo! Messenger and Dasher.

app.js

@@ -1,3 +1,18 @@
+// Initialize Firebase
+var firebase = require('firebase/app');
+require('firebase/database');
+require('firebase/auth');
+var config = {
+	apiKey: "AIzaSyAXedcpudidIUVhvn0jjrMHHWXv7YzWAR0",
+	authDomain: "rambox-d1326.firebaseapp.com",
+	databaseURL: "https://rambox-d1326.firebaseio.com",
+	storageBucket: "rambox-d1326.appspot.com"
+};
+var fireRef = firebase.initializeApp(config); // Firebase Ref
+var FirebaseTokenGenerator = require('firebase-token-generator');
+var auth0, lock; // Auth0 vars
+
+// Sencha App
 Ext.setGlyphFontFamily('FontAwesome');
 Ext.application({
 	 name: 'Rambox'
@@ -6,3 +21,17 @@ Ext.application({
 
 	,autoCreateViewport: 'Rambox.view.main.Main'
 });
+
+// Syncronize with Firebase
+function sync() {
+	// Is not logged, Skip
+	if ( !localStorage.getItem('id_token') ) return;
+
+	var services = [];
+	Ext.getStore('Services').each(function(service) {
+		services.push(service.data);
+	});
+	fireRef.database().ref('users/' + Ext.decode(localStorage.getItem('profile')).user_id).set({
+		services: services
+	});
+}

app/Application.js

@@ -14,6 +14,9 @@ Ext.define('Rambox.Application', {
 	}
 
 	,launch: function () {
+		lock = new Auth0Lock('y9am0DVawe2tvlA3ucD7OufpJHZZMjsO', 'rambox.auth0.com');
+		auth0 = new Auth0({ domain : 'rambox.auth0.com', clientID: 'y9am0DVawe2tvlA3ucD7OufpJHZZMjsO'})
+
 		// Add shortcuts to switch services using CTRL + Number
 		var map = new Ext.util.KeyMap({
 			 target: document

app/store/Services.js

@@ -53,5 +53,14 @@ Ext.define('Rambox.store.Services', {
 				Ext.cq1('app-main').add(servicesRight);
 			}
 		}
+		,add: function(store, records, index) {
+			sync();
+		}
+		,update: function(store, record, operation, data) {
+			if ( operation === 'edit' ) sync();
+		}
+		,remove: function(store, records, index, isMove) {
+			sync();
+		}
 	}
 });

app/store/ServicesList.js

@@ -10,7 +10,12 @@ Ext.define('Rambox.store.ServicesList', {
 
 	,proxy: {
 		 type: 'memory'
-    }
+	}
+
+	,sorters: [{
+		 property: 'name'
+		,direction: 'ASC'
+	}]
 
 	,autoLoad: true
 	,autoSync: true
@@ -215,6 +220,48 @@ Ext.define('Rambox.store.ServicesList', {
 			,name: 'BearyChat'
 			,url: 'https://___.bearychat.com/'
 			,type: 'messaging'
+		},
+		{
+			 id: 'yahoomessenger'
+			,logo: 'yahoomessenger.png'
+			,name: 'Yahoo! Messenger'
+			,url: 'https://messenger.yahoo.com/'
+			,type: 'messaging'
+		},
+		{
+			 id: 'voxer'
+			,logo: 'voxer.png'
+			,name: 'Voxer'
+			,url: 'https://web.voxer.com/'
+			,type: 'messaging'
+		},
+		{
+			 id: 'dasher'
+			,logo: 'dasher.png'
+			,name: 'Dasher'
+			,url: 'https://dasher.im/'
+			,type: 'messaging'
+		},
+		{
+			 id: 'flowdock'
+			,logo: 'flowdock.png'
+			,name: 'Flowdock'
+			,url: 'https://www.flowdock.com/login'
+			,type: 'messaging'
+		},
+		{
+			 id: 'mattermost'
+			,logo: 'mattermost.png'
+			,name: 'Mattermost'
+			,url: '___'
+			,type: 'messaging'
+		},
+		{
+			 id: 'dingtalk'
+			,logo: 'dingtalk.png'
+			,name: 'DingTalk'
+			,url: 'https://im.dingtalk.com/'
+			,type: 'messaging'
 		}
 	]
 });

app/ux/WebView.js

@@ -34,7 +34,7 @@ Ext.define('Rambox.ux.WebView',{
 					 tag: 'webview'
 					,src: me.src
 					,style: 'width:100%;height:100%;'
-					,partition: 'persist:' + me.type + '_' + me.id.replace('tab_', '')
+					,partition: 'persist:' + me.type + '_' + me.id.replace('tab_', '') + (localStorage.getItem('id_token') ? '_' + Ext.decode(localStorage.getItem('profile')).user_id : '')
 					,plugins: 'true'
 					,allowtransparency: 'on'
 					,autosize: 'on'
@@ -108,9 +108,10 @@ Ext.define('Rambox.ux.WebView',{
 		});
 
 		webview.addEventListener("page-title-updated", function(e) {
-			var count = e.title.match(/\(([^)]+)\)/);
-				count = count ? parseInt(count[1]) : 0;
-				count = Ext.isNaN(count) ? 0 : count; // Some services have special characters. Example: (•)
+			var count = e.title.match(/\(([^)]+)\)/); // Get text between (...)
+				count = count ? count[1] : '0';
+				count = count.match(/\d+/g); // Some services have special characters. Example: (•)
+				count = count ? parseInt(count[0]) : 0;
 
 			switch ( me.type ) {
 				case 'messenger':

app/view/main/Main.js

@@ -135,6 +135,14 @@ Ext.define('Rambox.view.main.Main', {
 					,margin: '0 0 0 5'
 					,flex: 1
 					,header: { height: 50 }
+					,tools: [
+						{
+							 xtype: 'button'
+							,glyph: 'xf1f8@FontAwesome'
+							,tooltip: 'Remove all Services'
+							,handler: 'removeAllServices'
+						}
+					]
 					,columns: [
 						{
 							 xtype: 'templatecolumn'
@@ -190,6 +198,73 @@ Ext.define('Rambox.view.main.Main', {
 					}
 				}
 			]
+			,tbar: {
+				 xtype: 'toolbar'
+				,height: 42
+				,ui: 'main'
+				,enableOverflow: true
+				,overflowHandler: 'menu'
+				,items: [
+					{
+						 glyph: 'xf1f7@FontAwesome'
+						,text: 'Don\'t Disturb: OFF'
+						,tooltip: 'Lock this app if you will be away for a period of time.'
+						,enableToggle: true
+						,handler: 'dontDisturb'
+						,reference: 'disturbBtn'
+					}
+					,{
+						 glyph: 'xf023@FontAwesome'
+						,text: 'Lock Rambox'
+						,tooltip: 'Lock this app if you will be away for a period of time.'
+						,handler: 'lockRambox'
+					}
+					,'->'
+					,{
+						 xtype: 'image'
+						,id: 'avatar'
+						,bind: {
+							 src: '{avatar}'
+							,hidden: '{!avatar}'
+						}
+						,width: 30
+						,height: 30
+						,style: 'border-radius: 50%;border:2px solid #d8d8d8;'
+					}
+					,{
+						 id: 'usernameBtn'
+						,bind: {
+							 text: '{username}'
+							,hidden: '{!username}'
+						}
+						,menu: [
+							{
+								 text: 'Logout'
+								,glyph: 'xf08b@FontAwesome'
+								,handler: 'logout'
+							}
+						]
+					}
+					,{
+						 xtype: 'label'
+						,id: 'explanationLabel'
+						,html: 'Login to save your configuration (no credentials stored) to sync with all your computers. <b>All current services will be removed.</b>'
+						,bind: {
+							hidden: '{username}'
+						}
+					}
+					,{
+						 text: 'Login'
+						,icon: 'resources/auth0.png'
+						,id: 'loginBtn'
+						,tooltip: 'Powered by Auth0 (http://auth0.com)'
+						,bind: {
+							hidden: '{username}'
+						}
+						,handler: 'login'
+					}
+				]
+			}
 			,bbar: [
 				'->'
 				,{

app/view/main/MainController.js

@@ -50,7 +50,7 @@ Ext.define('Rambox.view.main.MainController', {
 							,items: [
 								{
 									 xtype: 'checkbox'
-									,boxLabel: 'Separate'
+									,boxLabel: 'Align to Right'
 									,checked: edit ? (record.get('align') === 'right' ? true : false) : false
 									,name: 'align'
 									,uncheckedValue: 'left'
@@ -90,6 +90,8 @@ Ext.define('Rambox.view.main.MainController', {
 					 text: edit ? 'Save' : 'Add service'
 					,itemId: 'submit'
 					,handler: function() {
+						if ( !win.down('form').isValid() ) return false;
+
 						var formValues = win.down('form').getValues();
 
 						if ( edit ) {
@@ -184,6 +186,9 @@ Ext.define('Rambox.view.main.MainController', {
 								,fieldLabel: record.get('name') + ' team'
 								,name: 'url'
 								,allowBlank: false
+								,submitEmptyText: false
+								,emptyText: record.get('url') === '___' ? 'http://' : ''
+								,vtype: record.get('url') === '___' ? 'url' : ''
 								,listeners: {
 									specialkey: function(field, e) {
 										if(e.getKey() == e.ENTER && field.up('form').isValid()) {
@@ -204,7 +209,7 @@ Ext.define('Rambox.view.main.MainController', {
 							,items: [
 								{
 									 xtype: 'checkbox'
-									,boxLabel: 'Separate'
+									,boxLabel: 'Align to Right'
 									,checked: false
 									,name: 'align'
 									,uncheckedValue: 'left'
@@ -244,6 +249,8 @@ Ext.define('Rambox.view.main.MainController', {
 					 text: 'Add service'
 					,itemId: 'submit'
 					,handler: function() {
+						if ( !win.down('form').isValid() ) return false;
+
 						var formValues = win.down('form').getValues();
 
 						var service = Ext.create('Rambox.model.Service', {
@@ -299,22 +306,52 @@ Ext.define('Rambox.view.main.MainController', {
 		}
 	}
 
+	,removeServiceFn: function(serviceId) {
+		if ( !serviceId ) return false;
+
+		// Get Tab
+		var tab = Ext.getCmp('tab_'+serviceId);
+
+		// Clear all trash data
+		tab.down('component').el.dom.getWebContents().session.clearCache(Ext.emptyFn);
+		tab.down('component').el.dom.getWebContents().session.clearStorageData({}, Ext.emptyFn);
+
+		// Close tab
+		tab.close();
+
+		// Remove record from localStorage
+		Ext.getStore('Services').remove(Ext.getStore('Services').getById(serviceId));
+	}
+
 	,removeService: function( gridView, rowIndex, colIndex, col, e, rec, rowEl ) {
+		var me = this;
+
 		Ext.Msg.confirm('Please confirm...', 'Are you sure you want to remove <b>'+rec.get('name')+'</b>?', function(btnId) {
-			if ( btnId === 'yes' ) {
-				var tab = Ext.getCmp('tab_'+rec.get('id'));
+			if ( btnId === 'yes' ) me.removeServiceFn(rec.get('id'));
+		});
+	}
 
-				// Remove record from localStorage
-				gridView.getStore().remove(rec);
+	,removeAllServices: function(btn, callback) {
+		var me = this;
 
-				// Clear all trash data
-				tab.down('component').el.dom.getWebContents().session.clearCache(Ext.emptyFn);
-				tab.down('component').el.dom.getWebContents().session.clearStorageData({}, Ext.emptyFn);
+		// Clear counter for unread messaging
+		document.title = 'Rambox';
 
-				// Close tab
-				tab.close();
-			}
-		});
+		if ( btn ) {
+			Ext.Msg.confirm('Please confirm...', 'Are you sure you want to remove all services?', function(btnId) {
+				if ( btnId === 'yes' ) {
+					Ext.Array.each(Ext.getStore('Services').collect('id'), function(serviceId) {
+						me.removeServiceFn(serviceId);
+					});
+					if ( Ext.isFunction(callback) ) callback();
+				}
+			});
+		} else {
+			Ext.Array.each(Ext.getStore('Services').collect('id'), function(serviceId) {
+				me.removeServiceFn(serviceId);
+			});
+			if ( Ext.isFunction(callback) ) callback();
+		}
 	}
 
 	,configureService: function( gridView, rowIndex, colIndex, col, e, rec, rowEl ) {
@@ -385,7 +422,7 @@ Ext.define('Rambox.view.main.MainController', {
 							,items: [
 								{
 									 xtype: 'checkbox'
-									,boxLabel: 'Separate'
+									,boxLabel: 'Align to Right'
 									,checked: false
 									,name: 'align'
 									,uncheckedValue: 'left'
@@ -443,6 +480,8 @@ Ext.define('Rambox.view.main.MainController', {
 					 text: 'Add service'
 					,itemId: 'submit'
 					,handler: function() {
+						if ( !win.down('form').isValid() ) return false;
+
 						var formValues = win.down('form').getValues();
 
 						var service = Ext.create('Rambox.model.Service', {
@@ -547,4 +586,202 @@ Ext.define('Rambox.view.main.MainController', {
 		Ext.getStore('ServicesList').getFilters().removeAll();
 		me.doTypeFilter(cg);
 	}
+
+	,dontDisturb: function(btn) {
+		console.info('Dont Disturb:', btn.pressed ? 'Enabled' : 'Disabled');
+		Ext.Array.each(Ext.getStore('Services').collect('id'), function(serviceId) {
+			// Get Tab
+			var tab = Ext.getCmp('tab_'+serviceId);
+
+			// Mute sounds
+			tab.down('component').el.dom.getWebContents().setAudioMuted(btn.pressed);
+
+			// Prevent Notifications
+			if ( btn.pressed ) {
+				tab.down('component').el.dom.getWebContents().executeJavaScript('var originalNotification = Notification; (function() { Notification = function() { } })();');
+			} else {
+				tab.down('component').el.dom.getWebContents().executeJavaScript('(function() { Notification = originalNotification })();');
+			}
+		});
+
+		btn.setText('Don\'t Disturb: ' + ( btn.pressed ? 'ON' : 'OFF' ));
+	}
+
+	,lockRambox: function(btn) {
+		var me = this;
+
+		var msgbox = Ext.Msg.prompt('Lock Rambox', 'Enter a temporal password to unlock it later', function(btnId, text) {
+			if ( btnId === 'ok' ) {
+				me.lookupReference('disturbBtn').setPressed(true);
+				me.dontDisturb(me.lookupReference('disturbBtn'));
+				var winLock = Ext.create('Ext.window.Window', {
+					 width: '100%'
+					,height: '100%'
+					,closable: false
+					,minimizable: false
+					,maximizable: false
+					,draggable: false
+					,onEsc: Ext.emptyFn
+					,layout: 'center'
+					,bodyStyle: 'background-color:#2e658e;'
+					,items: [
+						{
+							 xtype: 'container'
+							,layout: 'vbox'
+							,items: [
+								{
+									 xtype: 'image'
+									,src: 'resources/Icon.png'
+									,width: 256
+									,height: 256
+								}
+								,{
+									 xtype: 'component'
+									,autoEl: {
+										 tag: 'h1'
+										,html: 'Rambox is locked'
+										,style: 'text-align:center;width:256px;'
+								   }
+								}
+								,{
+									 xtype: 'textfield'
+									,inputType: 'password'
+									,width: 256
+								}
+								,{
+									 xtype: 'button'
+									,text: 'UNLOCK'
+									,glyph: 'xf13e@FontAwesome'
+									,width: 256
+									,scale: 'large'
+									,handler: function() {
+										if ( text === winLock.down('textfield').getValue() ) {
+											winLock.close();
+											me.lookupReference('disturbBtn').setPressed(false);
+											me.dontDisturb(me.lookupReference('disturbBtn'));
+										} else {
+											winLock.down('textfield').markInvalid('Unlock password is invalid');
+										}
+									}
+								}
+							]
+						}
+					]
+				}).show();
+			}
+		});
+		msgbox.textField.inputEl.dom.type = 'password';
+	}
+
+	,login: function(btn) {
+		var me = this;
+
+		lock.show({
+			icon: 'resources/Icon.png'
+		}, function(err, profile, id_token) {
+			// There was an error logging the user in
+			if (err) return console.error(err);
+
+			// Display a spinner while waiting
+			Ext.Msg.wait('Please wait until we get your configuration.', 'Connecting...');
+
+			// Set the options to retreive a firebase delegation token
+			var options = {
+				id_token : id_token,
+				api : 'firebase',
+				scope : 'openid name email displayName',
+				target: 'y9am0DVawe2tvlA3ucD7OufpJHZZMjsO'
+			};
+
+			// Make a call to the Auth0 '/delegate'
+			auth0.getDelegationToken(options, function(err, result) {
+				if ( !err ) {
+					// Exchange the delegate token for a Firebase auth token
+					firebase.auth().signInWithCustomToken(result.id_token).then(function(snapshot) {
+						fireRef.database().ref('users/' + profile.user_id).once('value').then(function(snapshot) {
+							me.removeAllServices(false, function() {
+								if ( snapshot.val() === null || Ext.isEmpty(snapshot.val().services) ) return;
+
+								Ext.each(snapshot.val().services, function(s) {
+									var service = Ext.create('Rambox.model.Service', {
+										 id: s.id
+										,position: s.position
+										,type: s.type
+										,logo: s.logo
+										,name: s.name
+										,url: s.url
+										,align: s.align
+										,notifications: s.notifications
+										,muted: s.muted
+										,js_unread: s.js_unread
+									});
+									service.save();
+									Ext.getStore('Services').add(service);
+
+									var tabData = {
+										 xtype: 'webview'
+										,id: 'tab_'+service.get('id')
+										,title: service.get('name')
+										,icon: 'resources/icons/' + s.logo
+										,src: service.get('url')
+										,type: service.get('type')
+										,align: s.align
+										,notifications: s.notifications
+										,muted: s.muted
+										,record: service
+										,tabConfig: {
+											service: service
+										}
+									};
+
+									if ( s.align === 'left' ) {
+										var tbfill = Ext.cq1('app-main').getTabBar().down('tbfill');
+										Ext.cq1('app-main').insert(Ext.cq1('app-main').getTabBar().items.indexOf(tbfill), tabData);
+									} else {
+										Ext.cq1('app-main').add(tabData);
+									}
+								});
+
+								Ext.Msg.hide();
+							});
+						});
+					}).catch(function(error) {
+						console.error(error);
+					});
+				}
+			});
+
+			// User is logged in
+			// Save the profile and JWT.
+			localStorage.setItem('profile', JSON.stringify(profile));
+			localStorage.setItem('id_token', id_token);
+
+			Ext.cq1('app-main').getViewModel().set('username', profile.name);
+			Ext.cq1('app-main').getViewModel().set('avatar', profile.picture);
+		}, function() {
+			// Error callback
+		});
+	}
+
+	,logout: function(btn) {
+		var me = this;
+
+		Ext.Msg.confirm('Logout', 'Are you sure you want to logout?', function(btnId) {
+			if ( btnId === 'yes' ) {
+				localStorage.removeItem('profile');
+				localStorage.removeItem('id_token');
+
+				Ext.cq1('app-main').getViewModel().set('username', '');
+				Ext.cq1('app-main').getViewModel().set('avatar', '');
+
+				firebase.auth().signOut().then(function() {
+					Ext.Array.each(Ext.getStore('Services').collect('id'), function(serviceId) {
+						me.removeServiceFn(serviceId);
+					});
+				}, function(error) {
+					console.error(error);
+				});
+			}
+		})
+	}
 });

app/view/main/MainModel.js

@@ -5,6 +5,8 @@ Ext.define('Rambox.view.main.MainModel', {
 	,alias: 'viewmodel.main'
 
 	,data: {
-		name: 'Rambox'
+		 name: 'Rambox'
+		,username: localStorage.getItem('profile') ? JSON.parse(localStorage.getItem('profile')).name : ''
+		,avatar: localStorage.getItem('profile') ? JSON.parse(localStorage.getItem('profile')).picture : ''
 	}
 });

electron/main.js

@@ -14,6 +14,7 @@ const tray = require('./tray');
 // Require for autpUpdate file
 const autoupdater = require('./autoupdater');
 
+
 const MenuItem = electron.MenuItem;
 
 // this should be placed at top of main.js to handle setup events quickly
@@ -103,6 +104,8 @@ function createWindow () {
 		}
 	});
 
+	process.setMaxListeners(100);
+
 	// Start maximize
 	mainWindow.maximize();
 
@@ -118,7 +121,7 @@ function createWindow () {
 	mainWindow.on('page-title-updated', (e, title) => updateBadge(title));
 
 	mainWindow.webContents.on('will-navigate', function(event, url) {
-		event.preventDefault();
+		//event.preventDefault();
 	});
 
 	// Emitted when the window is closed.

electron/tray.js

@@ -39,9 +39,6 @@ exports.create = win => {
 	const contextMenu = electron.Menu.buildFromTemplate([
 		showMB,
 		hideMB,
-		{
-			label: 'Preferences'
-		},
 		{
 			type: 'separator'
 		},

index.html

@@ -9,11 +9,13 @@
 
     <!-- The line below must be kept intact for Sencha Cmd to build your application -->
     <script id="microloader" type="text/javascript" src="bootstrap.js"></script>
-
+	<!-- Latest major release -->
+	<script src="https://cdn.auth0.com/w2/auth0-6.7.js"></script>
+	<script src="https://cdn.auth0.com/js/lock-9.1.js"></script>
 </head>
 <body>
 	<div id="spinner">
-		<font>Rambox</font>
+		<img src="resources/Icon.png" />
 		<div class="sk-folding-cube">
 			<div class="sk-cube1 sk-cube"></div>
 			<div class="sk-cube2 sk-cube"></div>

package.json

@@ -1,104 +1,107 @@
 {
-    "private": true,
-    "scripts": {
-        "start": "electron electron/main.js",
-        "start:debug": "electron electron/main.js --enable-logging",
+	"private": true,
+	"scripts": {
+		"start": "electron electron/main.js",
+		"start:debug": "electron electron/main.js --enable-logging",
 		"test": "node electron/test.js",
-        "sencha:clean": "rm -rf ./build/production",
-        "sencha:compile": "sencha app build && cp app/package.json build/production/Rambox/",
-        "clean": "rm -rf ./dist",
-        "clean:osx": "rm -rf ./dist/Rambox-darwin-*",
-        "clean:win": "rm -rf ./dist/Rambox-win32-*",
-        "pack": "npm run pack:osx && npm run pack:win",
-        "pack:osx": "electron-packager \"./build/production/Rambox/\" \"Rambox\" --out=dist --platform=darwin --arch=x64 --version=1.2.4 --icon=resources/installer/Icon.icns --app-version=0.2.0 --build-version=64-bit --version-string.CompanyName=\"Rambox\" --version-string.ProductName=\"Rambox\" --asar --prune --overwrite",
-        "pack:win": "npm run pack:win32 && npm run pack:win64",
-        "pack:win32": "electron-packager \"./build/production/Rambox/\" \"Rambox\" --out=dist --platform=win32 --arch=ia32 --version=1.2.4 --icon=resources/installer/Icon.ico --app-version=0.2.0 --build-version=32-bit --version-string.CompanyName=\"Rambox\" --version-string.ProductName=\"Rambox\" --asar --prune --overwrite",
-        "pack:win64": "electron-packager \"./build/production/Rambox/\" \"Rambox\" --out=dist --platform=win32 --arch=x64 --version=1.2.4 --icon=resources/installer/Icon.ico --app-version=0.2.0 --build-version=64-bit --version-string.CompanyName=\"Rambox\" --version-string.ProductName=\"Rambox\" --asar --prune --overwrite",
-        "pack:linux": "npm run pack:linux32 && npm run pack:linux64",
-        "pack:linux32": "electron-packager \"./build/production/Rambox/\" \"Rambox\" --out=dist --platform=linux --arch=ia32 --version=1.2.4 --icon=resources/installer/Icon.ico --app-version=0.2.0 --build-version=64-bit --version-string.CompanyName=\"Rambox\" --version-string.ProductName=\"Rambox\" --asar --prune --overwrite",
-        "pack:linux64": "electron-packager \"./build/production/Rambox/\" \"Rambox\" --out=dist --platform=linux --arch=x64 --version=1.2.4 --icon=resources/installer/Icon.ico --app-version=0.2.0 --build-version=64-bit --version-string.CompanyName=\"Rambox\" --version-string.ProductName=\"Rambox\" --asar --prune --overwrite",
-        "build": "npm run build:osx && npm run build:win",
-        "build:osx": "build \"dist/Rambox-darwin-x64/Rambox.app\" --platform=osx",
-        "build:win": "node ./build/winstaller.js ia32 && node ./build/winstaller.js x64",
-        "build:win32": "node ./build/winstaller.js ia32",
-        "build:win64": "node ./build/winstaller.js x64",
-        "setup:osx": "npm run sencha:clean && npm run sencha:compile && npm run clean:osx && npm run pack:osx && npm run build:osx",
-        "setup:win": "npm run sencha:clean && npm run sencha:compile && npm run clean:win && npm run pack:win && npm run build:win",
-        "zip:win32": "bestzip \"dist/Rambox-win32-ia32-portable.zip\" \"dist/Rambox-win32-ia32/*\"",
-        "zip:win64": "bestzip \"dist/Rambox-win32-x64-portable.zip\" \"dist/Rambox-win32-x64/*\"",
-        "zip:linux32": "bestzip \"dist/Rambox-linux-ia32.zip\" \"dist/Rambox-linux-ia32/*\"",
-        "zip:linux64": "bestzip \"dist/Rambox-linux-x64.zip\" \"dist/Rambox-linux-x64/*\"",
-        "all:win": "npm run sencha:clean && npm run sencha:compile && npm run clean:win && npm run pack:win && npm run zip:win32 && npm run zip:win64 && npm run build:win",
-        "all:linux": "npm run sencha:clean && npm run sencha:compile && npm run pack:linux && npm run zip:linux32 && npm run zip:linux64"
-    },
-    "name": "Rambox",
-    "productName": "Rambox",
-    "authors": [
-        "Ramiro Saenz"
-    ],
-    "copyright": "",
-    "homepage": "http://www.rambox.pro",
-    "build": {
-        "productName": "Rambox",
-        "asar": true,
-        "osx": {
-            "title": "Rambox",
-            "icon-size": 128,
-            "contents": [
-                {
-                    "x": 355,
-                    "y": 125,
-                    "type": "link",
-                    "path": "/Applications"
-                },
-                {
-                    "x": 155,
-                    "y": 125,
-                    "type": "file"
-                }
-            ]
-        },
-        "win": {
-            "title": "Rambox",
-            "licenseUrl": "https://raw.githubusercontent.com/saenzramiro/rambox/master/LICENSE",
-            "msi": false
-        },
-        "linux": {
-            "target": [
-                "deb",
-                "zip",
-                "tar.gz",
-                "rpm"
-            ],
-            "maintainer": "Rambox",
-            "vendor": "Rambox"
-        }
-    },
-    "directories": {
-        "buildResources": "resources/installer/",
-        "output": "dist/",
-        "app": "build/production/Rambox/"
-    },
-    "devDependencies": {
-        "asar": "^0.11.0",
-        "bestzip": "^1.1.3",
-        "electron-builder": "3.25.0",
-        "electron-installer-windows": "^0.2.0",
-        "electron-packager": "7.0.1",
-        "electron-prebuilt": "1.2.4",
-        "electron-squirrel-startup": "^1.0.0",
-        "electron-winstaller": "^2.3.0",
-        "spectron": "^3.2.3"
-    },
-    "config": {
-        "pre-git": {
-            "commit-msg": "",
-            "pre-commit": [],
-            "post-commit": "",
-            "pre-push": [],
-            "post-checkout": "",
-            "post-merge": ""
-        }
-    },
-    "dependencies": {}
+		"sencha:clean": "rm -rf ./build/production",
+		"sencha:compile": "sencha app build && cp app/package.json build/production/Rambox/",
+		"clean": "rm -rf ./dist",
+		"clean:osx": "rm -rf ./dist/Rambox-darwin-*",
+		"clean:win": "rm -rf ./dist/Rambox-win32-*",
+		"pack": "npm run pack:osx && npm run pack:win",
+		"pack:osx": "electron-packager \"./build/production/Rambox/\" \"Rambox\" --out=dist --platform=darwin --arch=x64 --version=1.2.4 --icon=resources/installer/Icon.icns --app-version=0.2.0 --build-version=64-bit --version-string.CompanyName=\"Rambox\" --version-string.ProductName=\"Rambox\" --asar --prune --overwrite",
+		"pack:win": "npm run pack:win32 && npm run pack:win64",
+		"pack:win32": "electron-packager \"./build/production/Rambox/\" \"Rambox\" --out=dist --platform=win32 --arch=ia32 --version=1.2.4 --icon=resources/installer/Icon.ico --app-version=0.2.0 --build-version=32-bit --version-string.CompanyName=\"Rambox\" --version-string.ProductName=\"Rambox\" --asar --prune --overwrite",
+		"pack:win64": "electron-packager \"./build/production/Rambox/\" \"Rambox\" --out=dist --platform=win32 --arch=x64 --version=1.2.4 --icon=resources/installer/Icon.ico --app-version=0.2.0 --build-version=64-bit --version-string.CompanyName=\"Rambox\" --version-string.ProductName=\"Rambox\" --asar --prune --overwrite",
+		"pack:linux": "npm run pack:linux32 && npm run pack:linux64",
+		"pack:linux32": "electron-packager \"./build/production/Rambox/\" \"Rambox\" --out=dist --platform=linux --arch=ia32 --version=1.2.4 --icon=resources/installer/Icon.ico --app-version=0.2.0 --build-version=64-bit --version-string.CompanyName=\"Rambox\" --version-string.ProductName=\"Rambox\" --asar --prune --overwrite",
+		"pack:linux64": "electron-packager \"./build/production/Rambox/\" \"Rambox\" --out=dist --platform=linux --arch=x64 --version=1.2.4 --icon=resources/installer/Icon.ico --app-version=0.2.0 --build-version=64-bit --version-string.CompanyName=\"Rambox\" --version-string.ProductName=\"Rambox\" --asar --prune --overwrite",
+		"build": "npm run build:osx && npm run build:win",
+		"build:osx": "build \"dist/Rambox-darwin-x64/Rambox.app\" --platform=osx",
+		"build:win": "node ./build/winstaller.js ia32 && node ./build/winstaller.js x64",
+		"build:win32": "node ./build/winstaller.js ia32",
+		"build:win64": "node ./build/winstaller.js x64",
+		"setup:osx": "npm run sencha:clean && npm run sencha:compile && npm run clean:osx && npm run pack:osx && npm run build:osx",
+		"setup:win": "npm run sencha:clean && npm run sencha:compile && npm run clean:win && npm run pack:win && npm run build:win",
+		"zip:win32": "bestzip \"dist/Rambox-win32-ia32-portable.zip\" \"dist/Rambox-win32-ia32/*\"",
+		"zip:win64": "bestzip \"dist/Rambox-win32-x64-portable.zip\" \"dist/Rambox-win32-x64/*\"",
+		"zip:linux32": "bestzip \"dist/Rambox-linux-ia32.zip\" \"dist/Rambox-linux-ia32/*\"",
+		"zip:linux64": "bestzip \"dist/Rambox-linux-x64.zip\" \"dist/Rambox-linux-x64/*\"",
+		"all:win": "npm run sencha:clean && npm run sencha:compile && npm run clean:win && npm run pack:win && npm run zip:win32 && npm run zip:win64 && npm run build:win",
+		"all:linux": "npm run sencha:clean && npm run sencha:compile && npm run pack:linux && npm run zip:linux32 && npm run zip:linux64"
+	},
+	"name": "Rambox",
+	"productName": "Rambox",
+	"authors": [
+		"Ramiro Saenz"
+	],
+	"copyright": "",
+	"homepage": "http://www.rambox.pro",
+	"build": {
+		"productName": "Rambox",
+		"asar": true,
+		"osx": {
+			"title": "Rambox",
+			"icon-size": 128,
+			"contents": [
+				{
+					"x": 355,
+					"y": 125,
+					"type": "link",
+					"path": "/Applications"
+				},
+				{
+					"x": 155,
+					"y": 125,
+					"type": "file"
+				}
+			]
+		},
+		"win": {
+			"title": "Rambox",
+			"licenseUrl": "https://raw.githubusercontent.com/saenzramiro/rambox/master/LICENSE",
+			"msi": false
+		},
+		"linux": {
+			"target": [
+				"deb",
+				"zip",
+				"tar.gz",
+				"rpm"
+			],
+			"maintainer": "Rambox",
+			"vendor": "Rambox"
+		}
+	},
+	"directories": {
+		"buildResources": "resources/installer/",
+		"output": "dist/",
+		"app": "build/production/Rambox/"
+	},
+	"devDependencies": {
+		"asar": "^0.11.0",
+		"bestzip": "^1.1.3",
+		"electron-builder": "3.25.0",
+		"electron-installer-windows": "^0.2.0",
+		"electron-packager": "7.0.1",
+		"electron-prebuilt": "1.2.4",
+		"electron-squirrel-startup": "^1.0.0",
+		"electron-winstaller": "^2.3.0",
+		"spectron": "^3.2.3"
+	},
+	"config": {
+		"pre-git": {
+			"commit-msg": "",
+			"pre-commit": [],
+			"post-commit": "",
+			"pre-push": [],
+			"post-checkout": "",
+			"post-merge": ""
+		}
+	},
+	"dependencies": {
+		"firebase": "^3.0.5",
+		"firebase-token-generator": "^2.0.0"
+	}
 }

packages/local/rambox-default-theme/sass/etc/all.scss

@@ -16,6 +16,12 @@ body {
 	position: absolute;
 	background-color: $base-color;
 	cursor: wait;
+	img {
+		position: absolute;
+		left: 50%;
+		margin-left: -128px;
+		top: 100px;
+	}
 	font {
 		font-family: 'Josefin Sans', sans-serif;
 		font-size: 150px;

packages/local/rambox-default-theme/sass/src/toolbar/Toolbar.scss

@@ -0,0 +1,13 @@
+/*
+ * Aplica estilo a la barra de login
+ */
+@include extjs-toolbar-ui(
+	$ui: 'main',
+	$background-color: $base-color
+);
+
+.x-toolbar-main {
+	label {
+		color: #FFF;
+	}
+}