From 1a3efd65a22ea9101aa6e224feed7a358bb09345 Mon Sep 17 00:00:00 2001 From: katowulf Date: Thu, 14 Aug 2014 18:27:30 -0700 Subject: [PATCH] Initial build structure and config are functional. Still to complete: login page, account page, chat example, and test units --- .gitignore | 1 + angularfire-config.json | 16 ++ app/index.js | 151 +++++++++++- common/index.js | 1 + package.json | 13 +- route/index.js | 13 +- templates/common/app/index.html | 22 +- .../common/app/scripts/angularfire/config.js | 8 + .../app/scripts/angularfire/firebase.utils.js | 87 +++++++ .../app/scripts/angularfire/simpleLogin.js | 227 ++++++++++++++++++ .../app/scripts/directives/ngHideAuth.js | 35 +++ .../app/scripts/directives/ngShowAuth.js | 34 +++ templates/common/app/views/chat.html | 5 + templates/common/app/views/login.html | 24 ++ templates/common/root/.jshintrc | 5 +- templates/common/root/_bower.json | 8 +- templates/javascript/app.js | 13 +- templates/javascript/controllers/chat.js | 15 ++ templates/javascript/controllers/login.js | 20 ++ templates/javascript/routes.with.login.js | 110 +++++++++ templates/javascript/routes.without.login.js | 22 ++ util/colors.js | 46 ++++ 22 files changed, 838 insertions(+), 38 deletions(-) create mode 100644 angularfire-config.json create mode 100644 templates/common/app/scripts/angularfire/config.js create mode 100644 templates/common/app/scripts/angularfire/firebase.utils.js create mode 100644 templates/common/app/scripts/angularfire/simpleLogin.js create mode 100644 templates/common/app/scripts/directives/ngHideAuth.js create mode 100644 templates/common/app/scripts/directives/ngShowAuth.js create mode 100644 templates/common/app/views/chat.html create mode 100644 templates/common/app/views/login.html create mode 100644 templates/javascript/controllers/chat.js create mode 100644 templates/javascript/controllers/login.js create mode 100644 templates/javascript/routes.with.login.js create mode 100644 templates/javascript/routes.without.login.js create mode 100644 util/colors.js diff --git a/.gitignore b/.gitignore index 547373185..0ff4ce9c4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .DS_Store node_modules test/tmp +.idea diff --git a/angularfire-config.json b/angularfire-config.json new file mode 100644 index 000000000..511c790d3 --- /dev/null +++ b/angularfire-config.json @@ -0,0 +1,16 @@ +{ + "bower": { + "firebase": "1.0.x", + "angularfire": "0.8.x", + "mockfirebase": "0.3.x", + "simplelogin": "1.6.x" + }, + + "simpleLoginProviders": [ + { "name": "Email/Password", "value": "password", "checked": true }, + { "name": "Anonymous", "value": "anonymous" }, + { "name": "Facebook", "value": "facebook" }, + { "name": "Google", "value": "google" }, + { "name": "Twitter", "value": "twitter" } + ] +} \ No newline at end of file diff --git a/app/index.js b/app/index.js index 1920e7559..4e4e7a98d 100644 --- a/app/index.js +++ b/app/index.js @@ -8,12 +8,51 @@ var yosay = require('yosay'); var wiredep = require('wiredep'); var chalk = require('chalk'); +//angularfire +var afconfig = require('../angularfire-config.json'); +var colors = require('../util/colors.js'); +var FIREBASE_PROMPTS = [ + { + name: 'firebaseName', + message: colors('Name of your Firebase instance ' + + '(https//%yellow%/yellow.firebaseio.com)'), + required: true, + validate: function (input) { + if (!input || !input.match(/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/)) { + return chalk.red('Your Firebase name may only contain [a-z], [0-9], and hyphen (-). ' + + 'It may not start or end with a hyphen.'); + } + return true; + } + }, { + name: 'loginModule', + message: 'Would you like to use FirebaseSimpleLogin for authentication?', + type: 'confirm' + }, { + type: 'checkbox', + name: 'simpleLoginProviders', + message: 'Which providers shall I install?', + choices: afconfig.simpleLoginProviders, + when: function(answers) { + return answers.loginModule; + }, + validate: function(picks) { + return picks.length > 0? true : 'Must pick at least one provider'; + }, + default: ['password'] + } +]; + var Generator = module.exports = function Generator(args, options) { yeoman.generators.Base.apply(this, arguments); this.argument('appname', { type: String, required: false }); this.appname = this.appname || path.basename(process.cwd()); this.appname = this._.camelize(this._.slugify(this._.humanize(this.appname))); + //angularfire + this.afconfig = afconfig; + this.angularFireSourceFiles = []; + this.option('app-suffix', { desc: 'Allow a custom suffix to be added to the module name', type: String, @@ -57,15 +96,15 @@ var Generator = module.exports = function Generator(args, options) { this.env.options.coffee = this.options.coffee; } - this.hookFor('angular:common', { + this.hookFor('angularfire:common', { args: args }); - this.hookFor('angular:main', { + this.hookFor('angularfire:main', { args: args }); - this.hookFor('angular:controller', { + this.hookFor('angularfire:controller', { args: args }); @@ -96,9 +135,17 @@ var Generator = module.exports = function Generator(args, options) { enabledComponents.push('angular-touch/angular-touch.js'); } + //angularfire + if (this.loginModule) { + enabledComponents.push('firebase-simple-login/firebase-simple-login.js'); + } + enabledComponents = [ 'angular/angular.js', - 'angular-mocks/angular-mocks.js' + 'angular-mocks/angular-mocks.js', + //angularfire + 'firebase/firebase.js', + 'angularfire/dist/angularfire.js' ].concat(enabledComponents).join(','); var jsExt = this.options.coffee ? 'coffee' : 'js'; @@ -126,10 +173,28 @@ var Generator = module.exports = function Generator(args, options) { }); if (this.env.options.ngRoute) { - this.invoke('angular:route', { - args: ['about'] + this.invoke('angularfire:route', { + //angularfire + args: ['chat'] }); } + + //angularfire + if(this.env.options.loginModule) { + if( this.env.options.ngRoute ) { + this.invoke('angularfire:route', { + args: ['login', true] + }); + } + else { + this.invoke('angularfire:controller', { + args: ['login', true] + }); + this.invoke('angularfire.view', { + args: ['login', true] + }); + } + } }); this.pkg = require('../package.json'); @@ -158,9 +223,26 @@ Generator.prototype.welcome = function welcome() { } }; +//angularfire +Generator.prototype.askFirebaseQuestions = function askForCompass() { + this.firebaseName = null; + this.loginModule = false; + this.simpleLoginProviders = []; + + var cb = this.async(); + this.prompt(FIREBASE_PROMPTS, function (props) { + FIREBASE_PROMPTS.forEach(function(prompt) { + this[prompt.name] = props[prompt.name]; + }, this); + cb(); + }.bind(this)); +}; + Generator.prototype.askForCompass = function askForCompass() { var cb = this.async(); + console.log('stuff', this.firebaseName, this.loginModule, this.simpleLoginProviders); + this.prompt([{ type: 'confirm', name: 'compass', @@ -270,6 +352,14 @@ Generator.prototype.askForModules = function askForModules() { angMods.push("'ngTouch'"); } + //angularfire + angMods.push("'firebase'"); + angMods.push("'firebase.utils'"); + if( this.loginModule ) { + this.env.options.simpleLogin = true; + angMods.push("'simpleLogin'"); + } + if (angMods.length) { this.env.options.angularDeps = '\n ' + angMods.join(',\n ') + '\n '; } @@ -291,12 +381,32 @@ Generator.prototype.bootstrapFiles = function bootstrapFiles() { ); }; +//todo make this its own subgenerator separate from Angular.js gen +//angularfire +Generator.prototype.copyAngularFireFiles = function() { + this._common('scripts/angularfire/config.js'); + this._common('scripts/angularfire/firebase.utils.js'); + + if( this.loginModule ) { + this._common('scripts/angularfire/simpleLogin.js'); + this._tpl('controllers/login'); + this._htmlTpl('views/login.html'); + } + + if( this.routeModule ) { + var withOrWithout = this.loginModule? 'with' : 'without'; + this._tpl('routes.' + withOrWithout + '.login', 'routes'); + } +}; + Generator.prototype.appJs = function appJs() { this.indexFile = this.appendFiles({ html: this.indexFile, fileType: 'js', optimizedPath: 'scripts/scripts.js', - sourceFileList: ['scripts/app.js', 'scripts/controllers/main.js'], + sourceFileList: ['scripts/app.js', 'scripts/controllers/main.js'] + //angularfire + .concat(this.angularFireSourceFiles), searchPath: ['.tmp', this.appPath] }); }; @@ -338,3 +448,30 @@ Generator.prototype._injectDependencies = function _injectDependencies() { }); } }; + +//angularfire +Generator.prototype._common = function(dest) { + this.angularFireSourceFiles.push(dest); + var appPath = this.options.appPath; + this.template(path.join('app', dest), path.join(appPath, dest)); +}; + +//angularfire +Generator.prototype._htmlTpl = function(dest) { + var join = path.join; + var appPath = this.options.appPath; + this.copy(join('app', dest), join(appPath, dest)); +}; + +//angularfire +Generator.prototype._tpl = function(src, dest) { + if( !dest ) { dest = src; } + var suff = this.options.coffee? '.coffee' : '.js'; + var destFileName = path.join('scripts', dest+suff); + this.angularFireSourceFiles.push(destFileName); + this.template( + // haaaaaack + path.join('..', this.options.coffee? 'coffee' : 'javascript', src+suff), + path.join(this.appPath, destFileName) + ); +}; diff --git a/common/index.js b/common/index.js index 526c45c2c..37bbc373f 100644 --- a/common/index.js +++ b/common/index.js @@ -32,5 +32,6 @@ Generator.prototype.setupEnv = function setupEnv() { copy('favicon.ico'); copy('robots.txt'); copy('views/main.html'); + this.directory(join('app', 'images'), join(appPath, 'images')); }; diff --git a/package.json b/package.json index 25d39f7e1..4993bd5e8 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "generator-angular", - "version": "0.9.5", - "description": "Yeoman generator for AngularJS", + "name": "generator-angularfire", + "version": "0.8.1", + "description": "Yeoman generator for Angular+Firebase", "keywords": [ "yeoman-generator", "scaffold", @@ -9,9 +9,10 @@ "component", "front-end", "app", - "angular" + "angular", + "firebase" ], - "author": "The Yeoman Team", + "author": "Kato (with thanks to Yeoman team)", "main": "app/index.js", "files": [ "app", @@ -32,7 +33,7 @@ "script-base.js", "util.js" ], - "repository": "yeoman/generator-angular", + "repository": "yeoman/generator-angularfire", "scripts": { "test": "mocha" }, diff --git a/route/index.js b/route/index.js index 4ef2d3e64..758e61f98 100644 --- a/route/index.js +++ b/route/index.js @@ -12,7 +12,7 @@ var Generator = module.exports = function Generator() { var bower = require(path.join(process.cwd(), 'bower.json')); var match = require('fs').readFileSync(path.join( this.env.options.appPath, - 'scripts/app.' + (this.env.options.coffee ? 'coffee' : 'js') + 'scripts/routes.' + (this.env.options.coffee ? 'coffee' : 'js') ), 'utf-8').match(/\.when/); if ( @@ -29,6 +29,7 @@ var Generator = module.exports = function Generator() { util.inherits(Generator, ScriptBase); +//angularFire Generator.prototype.rewriteAppJs = function () { var coffee = this.env.options.coffee; @@ -36,7 +37,7 @@ Generator.prototype.rewriteAppJs = function () { this.on('end', function () { this.log(chalk.yellow( '\nangular-route is not installed. Skipping adding the route to ' + - 'scripts/app.' + (coffee ? 'coffee' : 'js') + 'scripts/routes.' + (coffee ? 'coffee' : 'js') )); }); return; @@ -50,7 +51,7 @@ Generator.prototype.rewriteAppJs = function () { var config = { file: path.join( this.env.options.appPath, - 'scripts/app.' + (coffee ? 'coffee' : 'js') + 'scripts/routes.' + (coffee ? 'coffee' : 'js') ), needle: '.otherwise', splicable: [ @@ -59,11 +60,13 @@ Generator.prototype.rewriteAppJs = function () { ] }; + var whenMethod = this.env.options.authRequired? 'whenAuthenticated' : 'when'; + if (coffee) { - config.splicable.unshift(".when '/" + this.uri + "',"); + config.splicable.unshift("." + whenMethod + " '/" + this.uri + "',"); } else { - config.splicable.unshift(".when('/" + this.uri + "', {"); + config.splicable.unshift("." + whenMethod + "('/" + this.uri + "', {"); config.splicable.push("})"); } diff --git a/templates/common/app/index.html b/templates/common/app/index.html index 5faeb7acc..d6df50472 100644 --- a/templates/common/app/index.html +++ b/templates/common/app/index.html @@ -24,16 +24,30 @@
+ + <% + if (ngRoute) { + %>
  • chat
    • + <% + if (loginModule) { + %>
  • + log in + account +
    • + <% + } + } else { + %>
  • link
    • + <% } + %>

    <%= appname %>

    <% if (ngRoute) { %>
    <% } else { - %>
    <% + + %>
    <% } %>
    diff --git a/templates/common/app/scripts/angularfire/config.js b/templates/common/app/scripts/angularfire/config.js new file mode 100644 index 000000000..cb3ddf219 --- /dev/null +++ b/templates/common/app/scripts/angularfire/config.js @@ -0,0 +1,8 @@ +angular.module('firebase.config', []) + .constant('FBURL', 'https://<%= firebaseName %>.firebaseio.com')<% + if( loginModule ) { + %> + .constant('SIMPLE_LOGIN_PROVIDERS', ['<%= simpleLoginProviders.join("','") %>']) + + .constant('loginRedirectPath', '/login')<% } + %>; \ No newline at end of file diff --git a/templates/common/app/scripts/angularfire/firebase.utils.js b/templates/common/app/scripts/angularfire/firebase.utils.js new file mode 100644 index 000000000..3fd47255d --- /dev/null +++ b/templates/common/app/scripts/angularfire/firebase.utils.js @@ -0,0 +1,87 @@ + +// a simple wrapper on Firebase and AngularFire to simplify deps and keep things DRY +angular.module('firebase.utils', ['firebase', 'firebase.config']) + .factory('fbutil', ['$window', 'FBURL', '$firebase', function($window, FBURL, $firebase) { + 'use strict'; + + return { + syncObject: function(path, factoryConfig) { // jshint ignore:line + return syncData.apply(null, arguments).$asObject(); + }, + + syncArray: function(path, factoryConfig) { // jshint ignore:line + return syncData.apply(null, arguments).$asArray(); + }, + + ref: firebaseRef + }; + + function pathRef(args) { + for (var i = 0; i < args.length; i++) { + if (angular.isArray(args[i])) { + args[i] = pathRef(args[i]); + } + else if( typeof args[i] !== 'string' ) { + throw new Error('Argument '+i+' to firebaseRef is not a string: '+args[i]); + } + } + return args.join('/'); + } + + /** + * Example: + * + * function(firebaseRef) { + * var ref = firebaseRef('path/to/data'); + * } + * + * + * @function + * @name firebaseRef + * @param {String|Array...} path relative path to the root folder in Firebase instance + * @return a Firebase instance + */ + function firebaseRef(path) { // jshint ignore:line + var ref = new $window.Firebase(FBURL); + var args = Array.prototype.slice.call(arguments); + if( args.length ) { + ref = ref.child(pathRef(args)); + } + return ref; + } + + /** + * Create a $firebase reference with just a relative path. For example: + * + * + * function(syncData) { + * // a regular $firebase ref + * $scope.widget = syncData('widgets/alpha'); + * + * // or automatic 3-way binding + * syncData('widgets/alpha').$bind($scope, 'widget'); + * } + * + * + * Props is the second param passed into $firebase. It can also contain limit, startAt, endAt, + * and they will be applied to the ref before passing into $firebase + * + * @function + * @name syncData + * @param {String|Array...} path relative path to the root folder in Firebase instance + * @param {object} [props] + * @return a Firebase instance + */ + function syncData(path, props) { + var ref = firebaseRef(path); + props = angular.extend({}, props); + angular.forEach(['limit', 'startAt', 'endAt'], function(k) { + if( props.hasOwnProperty(k) ) { + var v = props[k]; + ref = ref[k].apply(ref, angular.isArray(v)? v : [v]); + delete props[k]; + } + }); + return $firebase(ref, props); + } + }]); \ No newline at end of file diff --git a/templates/common/app/scripts/angularfire/simpleLogin.js b/templates/common/app/scripts/angularfire/simpleLogin.js new file mode 100644 index 000000000..76a60214a --- /dev/null +++ b/templates/common/app/scripts/angularfire/simpleLogin.js @@ -0,0 +1,227 @@ +(function() { + 'use strict'; + angular.module('simpleLogin', ['firebase', 'firebase.utils', 'firebase.config']) + + // a simple wrapper on simpleLogin.getUser() that rejects the promise + // if the user does not exists (i.e. makes user required), useful for + // setting up secure routes that require authentication + .factory('authRequired', ['simpleLogin', '$q', function(simpleLogin, $q) { + return function() { + return simpleLogin.getUser().then(function (user) { + return user ? user : $q.reject({ authRequired: true }); + }); + }; + }]) + + .factory('simpleLogin', ['$firebaseSimpleLogin', 'fbutil', 'createProfile', 'changeEmail', '$q', '$rootScope', + function($firebaseSimpleLogin, fbutil, createProfile, changeEmail, $q, $rootScope) { + var auth = $firebaseSimpleLogin(fbutil.ref()); + var listeners = []; + + function statusChange() { + fns.getUser().then(function(user) { + fns.user = user || null; + angular.forEach(listeners, function(fn) { + fn(user||null); + }); + }); + } + + var fns = { + user: null, + + getUser: function() { + return auth.$getCurrentUser(); + }, + + /** + * @param {string} email + * @param {string} pass + * @returns {*} + */ + login: function(email, pass) { + return auth.$login('password', { + email: email, + password: pass, + rememberMe: true + }); + }, + + logout: function() { + auth.$logout(); + }, + + createAccount: function(email, pass, name) { + return auth.$createUser(email, pass) + .then(function() { + // authenticate so we have permission to write to Firebase + return fns.login(email, pass); + }) + .then(function(user) { + // store user data in Firebase after creating account + return createProfile(user.uid, email, name).then(function() { + return user; + }); + }); + }, + + changePassword: function(email, oldpass, newpass) { + return auth.$changePassword(email, oldpass, newpass); + }, + + changeEmail: function(password, newEmail) { + return changeEmail(password, fns.user.email, newEmail, this); + }, + + removeUser: function(email, pass) { + return auth.$removeUser(email, pass); + }, + + watch: function(cb, $scope) { + fns.getUser().then(function(user) { + cb(user); + }); + listeners.push(cb); + var unbind = function() { + var i = listeners.indexOf(cb); + if( i > -1 ) { listeners.splice(i, 1); } + }; + if( $scope ) { + $scope.$on('$destroy', unbind); + } + return unbind; + } + }; + + $rootScope.$on('$firebaseSimpleLogin:login', statusChange); + $rootScope.$on('$firebaseSimpleLogin:logout', statusChange); + $rootScope.$on('$firebaseSimpleLogin:error', statusChange); + statusChange(); + + return fns; + }]) + + .factory('createProfile', ['fbutil', '$q', '$timeout', function(fbutil, $q, $timeout) { + return function(id, email, name) { + var ref = fbutil.ref('users', id), def = $q.defer(); + ref.set({email: email, name: name||firstPartOfEmail(email)}, function(err) { + $timeout(function() { + if( err ) { + def.reject(err); + } + else { + def.resolve(ref); + } + }); + }); + + function firstPartOfEmail(email) { + return ucfirst(email.substr(0, email.indexOf('@'))||''); + } + + function ucfirst (str) { + // credits: http://kevin.vanzonneveld.net + str += ''; + var f = str.charAt(0).toUpperCase(); + return f + str.substr(1); + } + + return def.promise; + }; + }]) + + .factory('changeEmail', ['fbutil', '$q', function(fbutil, $q) { + return function(password, oldEmail, newEmail, simpleLogin) { + var ctx = { old: { email: oldEmail }, curr: { email: newEmail } }; + + // execute activities in order; first we authenticate the user + return authOldAccount() + // then we fetch old account details + .then( loadOldProfile ) + // then we create a new account + .then( createNewAccount ) + // then we copy old account info + .then( copyProfile ) + // and once they safely exist, then we can delete the old ones + // we have to authenticate as the old user again + .then( authOldAccount ) + .then( removeOldProfile ) + .then( removeOldLogin ) + // and now authenticate as the new user + .then( authNewAccount ) + .catch(function(err) { console.error(err); return $q.reject(err); }); + + function authOldAccount() { + return simpleLogin.login(ctx.old.email, password).then(function(user) { + ctx.old.uid = user.uid; + }); + } + + function loadOldProfile() { + var def = $q.defer(); + ctx.old.ref = fbutil.ref('users', ctx.old.uid); + ctx.old.ref.once('value', + function(snap){ + var dat = snap.val(); + if( dat === null ) { + def.reject(oldEmail + ' not found'); + } + else { + ctx.old.name = dat.name; + def.resolve(); + } + }, + function(err){ + def.reject(err); + }); + return def.promise; + } + + function createNewAccount() { + return simpleLogin.createAccount(ctx.curr.email, password, ctx.old.name).then(function(user) { + ctx.curr.uid = user.uid; + }); + } + + function copyProfile() { + var d = $q.defer(); + ctx.curr.ref = fbutil.ref('users', ctx.curr.uid); + var profile = {email: ctx.curr.email, name: ctx.old.name||''}; + ctx.curr.ref.set(profile, function(err) { + if (err) { + d.reject(err); + } else { + d.resolve(); + } + }); + return d.promise; + } + + function removeOldProfile() { + var d = $q.defer(); + ctx.old.ref.remove(function(err) { + if (err) { + d.reject(err); + } else { + d.resolve(); + } + }); + return d.promise; + } + + function removeOldLogin() { + var def = $q.defer(); + simpleLogin.removeUser(ctx.old.email, password).then(function() { + def.resolve(); + }, function(err) { + def.reject(err); + }); + return def.promise; + } + + function authNewAccount() { + return simpleLogin.login(ctx.curr.email, password); + } + }; + }]); +})(); \ No newline at end of file diff --git a/templates/common/app/scripts/directives/ngHideAuth.js b/templates/common/app/scripts/directives/ngHideAuth.js new file mode 100644 index 000000000..c4f079200 --- /dev/null +++ b/templates/common/app/scripts/directives/ngHideAuth.js @@ -0,0 +1,35 @@ + +/** + * @ngdoc function + * @name <%= scriptAppName %>.directive:ngHideAuth + * @description + * # ngHideAuthDirective + * A directive that shows elements only when user is logged out. It also waits for simpleLogin + * to be initialized so there is no initial flashing of incorrect state. + */ +angular.module('<%= scriptAppName %>') + .directive('ngHideAuth', ['simpleLogin', '$timeout', function (simpleLogin, $timeout) { + 'use strict'; + var isLoggedIn; + simpleLogin.watch(function(user) { + isLoggedIn = !!user; + }); + + return { + restrict: 'A', + link: function(scope, el) { + function update() { + el.addClass('ng-cloak'); // hide until we process it + + // sometimes if ngCloak exists on same element, they argue, so make sure that + // this one always runs last for reliability + $timeout(function () { + el.toggleClass('ng-cloak', isLoggedIn !== false); + }, 0); + } + + update(); + simpleLogin.watch(update, scope); + } + }; + }]); diff --git a/templates/common/app/scripts/directives/ngShowAuth.js b/templates/common/app/scripts/directives/ngShowAuth.js new file mode 100644 index 000000000..8b90a8bcf --- /dev/null +++ b/templates/common/app/scripts/directives/ngShowAuth.js @@ -0,0 +1,34 @@ +/** + * @ngdoc function + * @name <%= scriptAppName %>.directive:ngShowAuth + * @description + * # ngShowAuthDirective + * A directive that shows elements only when user is logged in. It also waits for simpleLogin + * to be initialized so there is no initial flashing of incorrect state. + */ +angular.module('<%= scriptAppName %>') + .directive('ngShowAuth', ['simpleLogin', '$timeout', function (simpleLogin, $timeout) { + 'use strict'; + var isLoggedIn; + simpleLogin.watch(function(user) { + isLoggedIn = !!user; + }); + + return { + restrict: 'A', + link: function(scope, el) { + el.addClass('ng-cloak'); // hide until we process it + + function update() { + // sometimes if ngCloak exists on same element, they argue, so make sure that + // this one always runs last for reliability + $timeout(function () { + el.toggleClass('ng-cloak', !isLoggedIn); + }, 0); + } + + update(); + simpleLogin.watch(update, scope); + } + }; + }]); diff --git a/templates/common/app/views/chat.html b/templates/common/app/views/chat.html new file mode 100644 index 000000000..d606b76ff --- /dev/null +++ b/templates/common/app/views/chat.html @@ -0,0 +1,5 @@ + +
    +

    Chat Page

    +

    This is the chat page.

    +
    diff --git a/templates/common/app/views/login.html b/templates/common/app/views/login.html new file mode 100644 index 000000000..835096048 --- /dev/null +++ b/templates/common/app/views/login.html @@ -0,0 +1,24 @@ + +

    Login Page

    + +
    + + + + + + + + +

    {{err}}

    +
    + diff --git a/templates/common/root/.jshintrc b/templates/common/root/.jshintrc index 40377ba25..05a0e48f4 100644 --- a/templates/common/root/.jshintrc +++ b/templates/common/root/.jshintrc @@ -8,7 +8,7 @@ "eqeqeq": true, "immed": true, "indent": 2, - "latedef": true, + "latedef": "nofunc", "newcap": true, "noarg": true, "quotmark": "single", @@ -19,6 +19,7 @@ "trailing": true, "smarttabs": true, "globals": { - "angular": false + "angular": false, + "firebase": false } } diff --git a/templates/common/root/_bower.json b/templates/common/root/_bower.json index 0ad442efd..bf2dd2989 100644 --- a/templates/common/root/_bower.json +++ b/templates/common/root/_bower.json @@ -12,11 +12,15 @@ "angular-sanitize": "<%= ngVer %>"<% } %><% if (animateModule) { %>, "angular-animate": "<%= ngVer %>"<% } %><% if (touchModule) { %>, "angular-touch": "<%= ngVer %>"<% } %><% if (routeModule) { %>, - "angular-route": "<%= ngVer %>"<% } %> + "angular-route": "<%= ngVer %>", + "firebase": "<%= afconfig.bower.firebase %>",<% } %><% if (loginModule) { %> + "firebase-simple-login": "<%= afconfig.bower.simpleLogin %>",<% } %> + "angularfire": "<%= afconfig.bower.angularfire %>" }, "devDependencies": { "angular-mocks": "<%= ngVer %>", - "angular-scenario": "<%= ngVer %>" + "angular-scenario": "<%= ngVer %>", + "mockfirebase": "<%= afconfig.bower.mockfirebase %>" }<% if (appPath) { %>, "appPath": "<%= appPath %>"<% } %> } diff --git a/templates/javascript/app.js b/templates/javascript/app.js index 4dfe31455..0854dffc8 100644 --- a/templates/javascript/app.js +++ b/templates/javascript/app.js @@ -8,15 +8,4 @@ * * Main module of the application. */ -angular - .module('<%= scriptAppName %>', [<%= angularModules %>])<% if (ngRoute) { %> - .config(function ($routeProvider) { - $routeProvider - .when('/', { - templateUrl: 'views/main.html', - controller: 'MainCtrl' - }) - .otherwise({ - redirectTo: '/' - }); - })<% } %>; +angular.module('<%= scriptAppName %>', [<%= angularModules %>]); diff --git a/templates/javascript/controllers/chat.js b/templates/javascript/controllers/chat.js new file mode 100644 index 000000000..87eb27187 --- /dev/null +++ b/templates/javascript/controllers/chat.js @@ -0,0 +1,15 @@ +'use strict'; +/** + * @ngdoc function + * @name <%= scriptAppName %>.controller:ChatCtrl + * @description + * # ChatCtrl + * A demo of using AngularFire to manage a synchronized list. + */ +angular.module('<%= scriptAppName %>') + .controller('ChatCtrl', function ($scope, fbutil) { + $scope.messages = fbutil.syncArray('messages'); + $scope.messages.$loaded().catch(function(err) { + $scope.err = err; + }); + }); \ No newline at end of file diff --git a/templates/javascript/controllers/login.js b/templates/javascript/controllers/login.js new file mode 100644 index 000000000..b0c4a801a --- /dev/null +++ b/templates/javascript/controllers/login.js @@ -0,0 +1,20 @@ +'use strict'; +/** + * @ngdoc function + * @name <%= scriptAppName %>.controller:LoginCtrl + * @description + * # LoginCtrl + * Manages authentication to any active providers. + */ +angular.module('<%= scriptAppName %>') + .controller('LoginCtrl', function ($scope, simpleLogin) { + //todo + //todo + //todo + //todo + //todo + //todo + $scope.login = function(provider) { + simpleLogin.login(provider); + }; + }); \ No newline at end of file diff --git a/templates/javascript/routes.with.login.js b/templates/javascript/routes.with.login.js new file mode 100644 index 000000000..644c13fd2 --- /dev/null +++ b/templates/javascript/routes.with.login.js @@ -0,0 +1,110 @@ +'use strict'; +/** + * @ngdoc overview + * @name <%= scriptAppName %>:routes + * @description + * # routes.js + * + * Configure routes for use with Angular, and apply authentication security + * Add new routes to the ROUTES constant or use yo angularfire:route to create them + * + * Any controller can be secured so that it will only load if user is logged in by + * using `whenAuthenticated()` in place of `when()`. This requires the user to + * be logged in to view this route, and adds the current user into the dependencies + * which can be injected into the controller. If user is not logged in, the promise is + * rejected, which is handled below by $routeChangeError + * + * Any controller can be forced to wait for authentication to resolve, without necessarily + * requiring the user to be logged in, by adding a `resolve` block similar to the one below. + * It would then inject `user` as a dependency. This could also be done in the controller, + * but abstracting it makes things cleaner (controllers don't need to worry about auth state + * or timing of displaying its UI components; it can assume it is taken care of when it runs) + * + * resolve: { + * user: ['simpleLogin', function(simpleLogin) { + * return simpleLogin.getUser(); + * }] + * } + * + */ +angular.module('<%= scriptAppName %>') + +/** + * Adds a special `whenAuthenticated` method onto $routeProvider. This special method, + * when called, invokes the authRequired() service (see simpleLogin.js). + * + * The promise either resolves to the authenticated user object and makes it available to + * dependency injection (see AccountCtrl), or rejects the promise if user is not logged in, + * forcing a redirect to the /login page + */ + .config(['$routeProvider', 'SECURED_ROUTES', function($routeProvider, SECURED_ROUTES) { + // credits for this idea: https://groups.google.com/forum/#!msg/angular/dPr9BpIZID0/MgWVluo_Tg8J + // unfortunately, a decorator cannot be use here because they are not applied until after + // the .config calls resolve, so they can't be used during route configuration, so we have + // to hack it directly onto the $routeProvider object + $routeProvider.whenAuthenticated = function(path, route) { + route.resolve = route.resolve || {}; + route.resolve.user = ['authRequired', function(authRequired) { + return authRequired(); + }]; + $routeProvider.when(path, route); + SECURED_ROUTES[path] = true; + return $routeProvider; + }; + }]) + + // configure views; the authRequired parameter is used for specifying pages + // which should only be available while logged in + .config(['$routeProvider', function($routeProvider) { + $routeProvider + .when('/', { + templateUrl: 'views/main.html', + controller: 'MainCtrl' + }) + + .when('/login', { + templateUrl: 'views/login.html', + controller: 'LoginCtrl' + }) + + .whenAuthenticated('/account', { + templateUrl: 'views/account.html', + controller: 'AccountCtrl' + }) + + .otherwise({redirectTo: '/'}); + }]) + + /** + * Apply some route security. Any route's resolve method can reject the promise with + * { authRequired: true } to force a redirect. This method enforces that and also watches + * for changes in auth status which might require us to navigate away from a path + * that we can no longer view. + */ + .run(['$rootScope', '$location', 'simpleLogin', 'SECURED_ROUTES', 'loginRedirectPath', + function($rootScope, $location, simpleLogin, SECURED_ROUTES, loginRedirectPath) { + // watch for login status changes and redirect if appropriate + simpleLogin.watch(check, $rootScope); + + // some of our routes may reject resolve promises with the special {authRequired: true} error + // this redirects to the login page whenever that is encountered + $rootScope.$on('$routeChangeError', function(e, next, prev, err) { + if( angular.isObject(err) && err.authRequired ) { + $location.path(loginRedirectPath); + } + }); + + function check(user) { + if( !user && authRequired($location.path()) ) { + $location.path(loginRedirectPath); + } + } + + function authRequired(path) { + return SECURED_ROUTES.hasOwnProperty(path); + } + } + ]) + + // used by route security + .constant('SECURED_ROUTES', {}); diff --git a/templates/javascript/routes.without.login.js b/templates/javascript/routes.without.login.js new file mode 100644 index 000000000..6dba7c2a9 --- /dev/null +++ b/templates/javascript/routes.without.login.js @@ -0,0 +1,22 @@ +'use strict'; +/** + * @ngdoc overview + * @name <%= scriptAppName %>:routes + * @description + * # routes.js + * + * Configure routes for use with Angular, and apply authentication security + */ +angular.module('<%= scriptAppName %>') + + // configure views; the authRequired parameter is used for specifying pages + // which should only be available while logged in + .config(['$routeProvider', function($routeProvider) { + $routeProvider + .when('/', { + templateUrl: 'views/main.html', + controller: 'MainCtrl' + }) + + .otherwise({redirectTo: '/'}); + }]); \ No newline at end of file diff --git a/util/colors.js b/util/colors.js new file mode 100644 index 000000000..13de56b44 --- /dev/null +++ b/util/colors.js @@ -0,0 +1,46 @@ +var chalk = require('chalk'); +var util = require('util'); + +var CHALK_LIST = ['bold' ,'italic', 'underline', 'inverse', 'strikethrough', 'black', 'red', 'green', 'yellow', + 'blue', 'magenta', 'cyan', 'white', 'gray', 'bgBlack', 'bgRed', 'bgGreen', 'bgYellow', 'bgBlue', 'bgMagent', 'bgCyan', 'bgWhite']; + +var _LIST = '(?:'+CHALK_LIST.join('|')+')'; +var EXP_FIND = new RegExp('%('+_LIST+'(?:[:]'+_LIST+')*)(.+?)(%\\/\\1)', 'g'); +var EXP_END = new RegExp('%('+_LIST+'(?:[:]'+_LIST+')*)(.+?)$'); +var EXP_COL = new RegExp(_LIST+'(?:[:]'+_LIST+')*'); + +function colors(args) { + var out = []; + if( !Array.isArray(args) ) { + args = Array.prototype.slice.call(arguments,0); + } + args.forEach(function(txt) { + if( typeof(txt) === 'string' ) { + txt = txt.replace(EXP_FIND, chalkIt.bind(null)); + txt = txt.replace(EXP_END, chalkIt.bind(null)); + } + out.push(txt); + }); + return util.format.apply(util, out); +} + +function chalkIt(match, color, str) { + var picks = color.split(':'); + var ref = chalk; + picks.forEach(function(c) { + ref = ref[c]; + }); + var out = '', parts = str.split(EXP_FIND); + for(var i= 0, len = parts.length; i < len; i++) { + if( EXP_COL.test(parts[i]) ) { + out += colors('%'+parts.slice(i, i+3).join('')); + i += 2; + } + else { + out += ref(parts[i]); + } + } + return out; +} + +module.exports = colors; \ No newline at end of file