From 79dc0b8a4eb22b672835e764ca55eafd5f216f54 Mon Sep 17 00:00:00 2001 From: Ramiro Saenz Date: Mon, 12 Sep 2016 18:43:15 -0300 Subject: [PATCH] Fixed Auth0 login --- app/Application.js | 6 +- app/ux/Auth0.js | 176 ++++++++++++++++++ app/view/main/MainController.js | 119 +----------- .../rambox-default-theme/sass/etc/all.scss | 5 + 4 files changed, 187 insertions(+), 119 deletions(-) create mode 100644 app/ux/Auth0.js diff --git a/app/Application.js b/app/Application.js index 6c978fc5..e3380485 100644 --- a/app/Application.js +++ b/app/Application.js @@ -5,6 +5,7 @@ Ext.define('Rambox.Application', { ,requires: [ 'Rambox.ux.Firebase' + ,'Rambox.ux.Auth0' ,'Rambox.util.MD5' ,'Ext.window.Toast' ] @@ -29,9 +30,8 @@ Ext.define('Rambox.Application', { ga_storage._setAccount('UA-80680424-1'); ga_storage._trackPageview('/index.html', 'main'); - // Auth0 Config - lock = new Auth0Lock(auth0Cfg.clientID, auth0Cfg.domain); - auth0 = new Auth0({ clientID: auth0Cfg.clientID, domain : auth0Cfg.domain }); + // Initialize Auth0 + Rambox.ux.Auth0.init(); // Add shortcuts to switch services using CTRL + Number var map = new Ext.util.KeyMap({ diff --git a/app/ux/Auth0.js b/app/ux/Auth0.js new file mode 100644 index 00000000..e7f40ce5 --- /dev/null +++ b/app/ux/Auth0.js @@ -0,0 +1,176 @@ +Ext.define('Rambox.ux.Auth0', { + singleton: true + + // private + ,lock: null + ,auth0: null + + ,init: function() { + var me = this; + + // Auth0 Config + me.lock = new Auth0Lock(auth0Cfg.clientID, auth0Cfg.domain, { + autoclose: true + ,autofocus: true + ,auth: { + redirect: false + } + ,theme: { + logo: 'resources/Icon.png' + ,primaryColor: '#0675A0' + } + ,languageDictionary: { + title: 'Rambox Account' + } + //,language: 'en' + }); + + me.auth0 = new Auth0({ clientID: auth0Cfg.clientID, domain : auth0Cfg.domain }); + + me.defineEvents(); + } + + ,defineEvents: function() { + var me = this; + + me.lock.on("authenticated", function(authResult) { + me.lock.getProfile(authResult.idToken, function(err, profile) { + if (err) { + // Handle error + Ext.Msg.hide(); + return; + } + + console.log('LOGIN', err, profile, authResult.idToken); + + // Display a spinner while waiting + Ext.Msg.wait('Please wait until we get your configuration.', 'Connecting...'); + + // Google Analytics Event + ga_storage._trackEvent('Users', 'loggedIn'); + + // Set the options to retreive a firebase delegation token + var options = { + id_token: authResult.idToken + ,api: 'firebase' + ,scope: 'openid name email displayName' + ,target: auth0Cfg.clientID + }; + + // Make a call to the Auth0 '/delegate' + me.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).child('services').orderByChild('position').once('value', function(snapshot2) { + Ext.Msg.hide(); + + // Import Services function + var importServices = function(snap) { + snap.forEach(function(data) { + var s = data.val(); + s.firebase_key = data.key; + var service = Ext.create('Rambox.model.Service', s); + service.save(); + Ext.getStore('Services').add(service); + }); + Ext.getStore('Services').resumeEvent('load'); + Ext.getStore('Services').load(); + + // User is logged in + // Save the profile and JWT. + localStorage.setItem('profile', JSON.stringify(profile)); + localStorage.setItem('id_token', authResult.idToken); + + // Define Events for Firebase + Rambox.ux.Firebase.createEvents(); + } + + // Firebase empty and Have Services + if ( !snapshot2.hasChildren() && Ext.getStore('Services').getCount() > 0 ) { + Ext.Msg.confirm('Import', 'You don\'t have any service saved. Do you want to import your current services?', function(btnId) { + if ( btnId === 'yes' ) { + var services = []; + Ext.getStore('Services').each(function(service, index) { + service.set('firebase_key', index); + // Prevent saving local ID into Firebase + var data = Ext.clone(service.data); + delete data.id; + + services.push(data); + }); + fireRef.database().ref('users/' + profile.user_id).set({ + services: services + }); + + // User is logged in + // Save the profile and JWT. + localStorage.setItem('profile', JSON.stringify(profile)); + localStorage.setItem('id_token', authResult.idToken); + + // Define Events for Firebase + Rambox.ux.Firebase.createEvents(); + } else { + Ext.Msg.confirm('Clear services', 'Do you want to remove all your current services to start over?

If NO, you will be logged out.', function(btnId) { + if ( btnId === 'yes' ) { + me.removeAllServices(false); + } else { + me.logout(); + } + }); + } + }); + // Firebase not empty and Have Services + } else if ( snapshot2.hasChildren() && Ext.getStore('Services').getCount() > 0 ) { + Ext.Msg.confirm('Confirm', 'To import your configuration, I need to remove all your current services. Do you want to continue?

If NO, you will be logged out.', function(btnId) { + if ( btnId === 'yes' ) { + me.removeAllServices(false, function() { + importServices(snapshot2); + }); + } else { + me.logout(); + } + }); + // Firebase not empty and Have no Services + } else if ( snapshot2.hasChildren() && Ext.getStore('Services').getCount() === 0 ) { + importServices(snapshot2); + } else { + // Save the profile and JWT. + localStorage.setItem('profile', JSON.stringify(profile)); + localStorage.setItem('id_token', authResult.idToken); + } + }); + }).catch(function(error) { + Ext.Msg.hide(); + Ext.Msg.show({ + title: 'Firebug Error' + ,message: error.message+'

Code: '+error.code+'

Sorry, try again later.' + ,icon: Ext.Msg.ERROR + ,buttons: Ext.Msg.OK + }); + me.logout(); + Ext.cq1('app-main').getViewModel().set('username', ''); + Ext.cq1('app-main').getViewModel().set('avatar', ''); + }); + } + }); + + Ext.cq1('app-main').getViewModel().set('username', profile.name); + Ext.cq1('app-main').getViewModel().set('avatar', profile.picture); + }); + }); + } + + ,login: function() { + var me = this; + + me.lock.show(); + } + + ,logout: function() { + var me = this; + + localStorage.removeItem('profile'); + localStorage.removeItem('id_token'); + } +}); diff --git a/app/view/main/MainController.js b/app/view/main/MainController.js index 62173877..27adee6c 100644 --- a/app/view/main/MainController.js +++ b/app/view/main/MainController.js @@ -946,120 +946,7 @@ Ext.define('Rambox.view.main.MainController', { ,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); - console.log('LOGIN', err, profile, id_token); - - // Display a spinner while waiting - Ext.Msg.wait('Please wait until we get your configuration.', 'Connecting...'); - - // Google Analytics Event - ga_storage._trackEvent('Users', 'loggedIn'); - - // Set the options to retreive a firebase delegation token - var options = { - id_token : id_token, - api : 'firebase', - scope : 'openid name email displayName', - target: auth0Cfg.clientID - }; - - // 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).child('services').orderByChild('position').once('value', function(snapshot2) { - Ext.Msg.hide(); - - // Import Services function - var importServices = function(snap) { - snap.forEach(function(data) { - var s = data.val(); - s.firebase_key = data.key; - var service = Ext.create('Rambox.model.Service', s); - service.save(); - Ext.getStore('Services').add(service); - }); - Ext.getStore('Services').resumeEvent('load'); - Ext.getStore('Services').load(); - - // User is logged in - // Save the profile and JWT. - localStorage.setItem('profile', JSON.stringify(profile)); - localStorage.setItem('id_token', id_token); - - // Define Events for Firebase - Rambox.ux.Firebase.createEvents(); - } - - // Firebase empty and Have Services - if ( !snapshot2.hasChildren() && Ext.getStore('Services').getCount() > 0 ) { - Ext.Msg.confirm('Import', 'You don\'t have any service saved. Do you want to import your current services?', function(btnId) { - if ( btnId === 'yes' ) { - var services = []; - Ext.getStore('Services').each(function(service, index) { - service.set('firebase_key', index); - // Prevent saving local ID into Firebase - var data = Ext.clone(service.data); - delete data.id; - - services.push(data); - }); - fireRef.database().ref('users/' + profile.user_id).set({ - services: services - }); - - // User is logged in - // Save the profile and JWT. - localStorage.setItem('profile', JSON.stringify(profile)); - localStorage.setItem('id_token', id_token); - - // Define Events for Firebase - Rambox.ux.Firebase.createEvents(); - } else { - Ext.Msg.confirm('Clear services', 'Do you want to remove all your current services to start over?

If NO, you will be logged out.', function(btnId) { - if ( btnId === 'yes' ) { - me.removeAllServices(false); - } else { - me.logout(); - } - }); - } - }); - // Firebase not empty and Have Services - } else if ( snapshot2.hasChildren() && Ext.getStore('Services').getCount() > 0 ) { - Ext.Msg.confirm('Confirm', 'To import your configuration, I need to remove all your current services. Do you want to continue?

If NO, you will be logged out.', function(btnId) { - if ( btnId === 'yes' ) { - me.removeAllServices(false, function() { - importServices(snapshot2); - }); - } else { - me.logout(); - } - }); - // Firebase not empty and Have no Services - } else if ( snapshot2.hasChildren() && Ext.getStore('Services').getCount() === 0 ) { - importServices(snapshot2); - } else { - // 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 - Ext.Msg.hide(); - }); + Rambox.ux.Auth0.login(); } ,logout: function(btn) { @@ -1075,8 +962,8 @@ Ext.define('Rambox.view.main.MainController', { // Remove Events for Firebase Rambox.ux.Firebase.removeEvents(); - localStorage.removeItem('profile'); - localStorage.removeItem('id_token'); + // Logout from Auth0 + Rambox.ux.Auth0.logout(); Ext.cq1('app-main').getViewModel().set('username', ''); Ext.cq1('app-main').getViewModel().set('avatar', ''); diff --git a/packages/local/rambox-default-theme/sass/etc/all.scss b/packages/local/rambox-default-theme/sass/etc/all.scss index a80159ad..851e7101 100644 --- a/packages/local/rambox-default-theme/sass/etc/all.scss +++ b/packages/local/rambox-default-theme/sass/etc/all.scss @@ -254,3 +254,8 @@ body { background-color: lighten($base-color, 55%); } } + +// Auth0 +.auth0-lock.auth0-lock .auth0-lock-header-logo { + height: 50px !important; +}