Use authentication from Firebase.

fruityfred · Sep 6, 2013 · b117ef7 · b117ef7
1 parent 5acfbc4
commit b117ef7
Show file tree

Hide file tree

Showing 10 changed files with 765 additions and 140 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -11,37 +11,37 @@
 }
 
 
-[ff-message] {
+[lg-message] {
 	padding: 5px 10px;
 	margin: 5px 0;
 	border-radius: 4px;
 	background: white;
 	border: 1px solid rgba(0,0,0,0.1);
 }
 
-[ff-message].me {
+[lg-message].me {
 	background: #eeeeee;
 }
 
-[ff-message] .content {
+[lg-message] .content {
 	font-weight: bold;
 }
 
-[ff-message] .sender {
+[lg-message] .sender {
 
 }
 
 
 /* Characters */
 
-[ff-character] {
+[lg-character] {
 	display: block;
 	margin: 10px 0;
 	transition: color ease 0.2s;
 	position: relative;
 }
 
-[ff-character] .count {
+[lg-character] .count {
 	position: absolute;
 	left: 106px;
 	top: 0px;
@@ -59,28 +59,28 @@
 }
 
 
-[ff-character].selected {
+[lg-character].selected {
 	color: #0088CC;
 }
 
-[ff-character].selected img {
+[lg-character].selected img {
 	border-color: #0088CC;
 }
 
-[ff-character] img {
+[lg-character] img {
 	border: 8px solid #444444;
 	border-radius: 4px 4px 4px 4px;
 	transition: border-color ease-in 0.2s;
 	float: left;
 	margin-right: 10px;
 }
 
-[ff-character] figcaption {
+[lg-character] figcaption {
 	font-size: 120%;
 	font-family: "Times New Roman";
 }
 
-[ff-character] figcaption h4 {
+[lg-character] figcaption h4 {
 	font-size: 140%;
 	font-family: "Times New Roman";
 	font-style: italic;

diff --git a/game/game.html b/game/game.html
@@ -3,7 +3,7 @@
 	<div class="col-md-3">
 		<ul class="nav nav-pills nav-stacked">
 			<li>
-				<a href="#/newgame">
+				<a href="#/new-game">
 					Nouvelle partie
 				</a>
 			</li>

diff --git a/game/game.js b/game/game.js
@@ -5,49 +5,48 @@
 
 	app.controller('GameController', function (LG, $scope, $rootScope) {
 		console.log("GameController");
-		if (LG.checkLogin()) {
-
-			// Bindings
-			$scope.game = {};
-			LG.bind($scope, 'game', 'game');
-			$scope.messages = LG.bindCollection('game/messages');
-			$scope.players = LG.bindCollection('game/players');
-
-			$scope.addMessage = function () {
-				$scope.messages.add({
-					sender: $rootScope.user.id,
-					body: $scope.msg,
-					date: new Date().getTime()
-				});
-				$scope.msg = "";
-			};
 
-			$scope.joinGame = function () {
-				var joinRef = $scope.players.add({
-					'user'   : $rootScope.user.id,
-					'status' : 'ALIVE'
-				});
-				console.log("Join id: ", joinRef.name());
-				$rootScope.userInfo.joinRef = joinRef.name();
-			};
-
-			$scope.quitGame = function () {
-				$scope.players.remove($rootScope.userInfo.joinRef);
-				delete $rootScope.userInfo.joinRef;
-			};
-
-			$scope.$watch('game.status', function (status, previous) {
-				if (previous === 'PREPARING' && status === 'WAITING') {
-					$scope.quitGame();
-				}
-				else if (status === 'RUNNING') {
-					console.log("game started");
-					console.log("joinRef=", $rootScope.user.joinRef);
-					var player = $scope.players.getByName($rootScope.user.joinRef);
-					$scope.me = LG.characterById(player.role);
-				}
-			}, true);
-		}
+		// Bindings
+		$scope.game = {};
+		LG.bind($scope, 'game', 'game');
+		$scope.messages = LG.bindCollection('game/messages');
+		$scope.players = LG.bindCollection('game/players');
+
+		$scope.addMessage = function () {
+			$scope.messages.add({
+				sender: $rootScope.user.id,
+				body: $scope.msg,
+				date: new Date().getTime()
+			});
+			$scope.msg = "";
+		};
+
+		$scope.joinGame = function () {
+			var joinRef = $scope.players.add({
+				'user'   : $rootScope.user.id,
+				'status' : 'ALIVE'
+			});
+			console.log("Join id: ", joinRef.name());
+			$rootScope.userInfo.joinRef = joinRef.name();
+		};
+
+		$scope.quitGame = function () {
+			$scope.players.remove($rootScope.userInfo.joinRef);
+			delete $rootScope.userInfo.joinRef;
+		};
+
+		$scope.$watch('game.status', function (status, previous) {
+			if (previous === 'PREPARING' && status === 'WAITING') {
+				$scope.quitGame();
+			}
+			else if (status === 'RUNNING') {
+				console.log("game started");
+				console.log("joinRef=", $rootScope.user.joinRef);
+				var player = $scope.players.getByName($rootScope.user.joinRef);
+				$scope.me = LG.characterById(player.role);
+			}
+		}, true);
+
 	});
 
 

diff --git a/game/newgame.html → game/new-game.html b/game/newgame.html → game/new-game.html
diff --git a/index.html b/index.html
@@ -24,7 +24,7 @@
 
 	<script src="https://cdn.firebase.com/v0/firebase.js"></script>
     <script src="https://cdn.firebase.com/v0/firebase-simple-login.js"></script>
-	<script src="https://cdn.firebase.com/libs/angularfire/0.3.0/angularfire.js"></script>
+	<script src="lib/angularfire/angularfire.js"></script>
 </head>
 
 <body>
@@ -33,12 +33,20 @@
 		<div class="navbar-header">
 			<a class="navbar-brand" href="#/game"><img src="images/logo.png"/> Loups-Garous</a>
 		</div>
-		<ul class="nav navbar-nav navbar-right">
-			<li><a href="#/profile"><img ng-src="images/avatars/{{ userInfo.avatar }}" style="width:32px; height:32px;"/>
+
+		<ul class="nav navbar-nav navbar-right" ng-if="user">
+			<li class="dropdown">
+				<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><img ng-src="images/avatars/{{ userInfo.avatar }}" style="width:32px; height:32px;"/>
 				<span ng-if="userInfo.name">{{ userInfo.name }}</span>
 				<span ng-if="! userInfo.name">{{ user.email }}</span>
-				</a></li>
+				<b class="caret"></b></a>
+				<ul class="dropdown-menu">
+					<li><a href="#/profile">Profil</a></li>
+					<li><a href="javascript:;" ng-click="logout()">Déconnexion</a></li>
+				</ul>
+			</li>
 		</ul>
+
 	</nav>
 
 	<div class="container ng-view"></div>

diff --git a/js/app.js b/js/app.js
@@ -1,83 +1,70 @@
-(function() {
+(function(Firebase) {
+
+	var app = angular.module("LoupsGarous", ["ngRoute", "firebase"]),
+		firebaseRef = new Firebase(LG_FIREBASE_URL);
 
-	var app = angular.module("LoupsGarous", ["ngRoute", "firebase"]);
 
 	app.config(function($routeProvider)
 	{
 		$routeProvider
 			.when('/login', { templateUrl: 'user/login.html' })
-			.when('/profile', { templateUrl: 'user/profile.html' })
-			.when('/game', { templateUrl: 'game/game.html' })
-			.when('/newgame', { templateUrl: 'game/newgame.html' })
+			.when('/profile', { templateUrl: 'user/profile.html', authRequired: true })
+			.when('/game', { templateUrl: 'game/game.html', authRequired: true })
+			.when('/new-game', { templateUrl: 'game/new-game.html', authRequired: true })
 			.otherwise({ redirectTo: '/game' });
 	});
 
 
+	app.run(function (angularFireAuth, $rootScope) {
+		angularFireAuth.initialize(firebaseRef, {
+			'scope' : $rootScope,
+			'path': '/login',
+			'name' : 'user'
+		});
+	});
 
-    app.service('LG', function (angularFire, angularFireCollection, $rootScope, $timeout, $location) {
-
-	    var firebase, auth, currentPath = $location.path();
 
-	    firebase = new Firebase(LG_FIREBASE_URL);
-	    auth = new FirebaseSimpleLogin(firebase, function(error, user) {
-		    $timeout(function () {
-			    if (error) {
-					console.log("Service: user error");
-					$rootScope.user = null;
-					$location.path('/login');
-				}
-				else if (user) {
-					console.log("Service: user logged in!");
-					$rootScope.user = user;
-					bindUser($rootScope, 'userInfo').then(function () {
-					    $location.path(currentPath);
-					});
-				}
-				else {
-					console.log("Service: user not logged in.");
-					$rootScope.user = null;
-					$location.path('/login');
-			    }
-		    });
-	    });
+	app.service('LG', function (angularFire, angularFireAuth, angularFireCollection, $rootScope, $location) {
 
 		$rootScope.$watch('userInfo', function (info) {
 			if (info && $rootScope) {
 				angular.extend($rootScope.user, info);
-		    }
+			}
 		}, true);
 
-	    bind($rootScope, 'users', 'users');
+		bind($rootScope, 'allUsers', 'users');
 
-	    function bind ($scope, name, path) {
-		    var ref = path ? firebase.child(path) : firebase;
-		    return angularFire(ref, $scope, name);
-	    }
+		function bind ($scope, name, path) {
+			var ref = path ? firebaseRef.child(path) : firebaseRef;
+			return angularFire(ref, $scope, name);
+		}
 
-	    function bindUser ($scope, name) {
-		    return bind($scope, name, 'users/' + $rootScope.user.id);
-	    }
+		function bindUser ($scope, name) {
+			return bind($scope, name, 'users/' + $rootScope.user.id);
+		}
 
-	    function bindCollection (path, callback) {
-		    return angularFireCollection(new Firebase(LG_FIREBASE_URL + path), callback);
-	    }
+		function bindCollection (path, callback) {
+			return angularFireCollection(new Firebase(LG_FIREBASE_URL + path), callback);
+		}
 
-	    function login (user, pass) {
-		    auth.login('password', {
-			    email : user,
-			    password : pass
-		    });
-	    }
+		function login (user, pass) {
+			return angularFireAuth.login('password', {
+				email : user,
+				password : pass
+			});
+		}
 
-	    function logout () {
-		    auth.logout();
-	    }
+		function logout () {
+			angularFireAuth.logout();
+			$location.path('/login');
+		}
 
-	    // Public API
+		//
+		// Public API
+		//
 
 		return {
 
-			firebase : firebase,
 			user : $rootScope.user,
 
 			bind : bind,
@@ -86,14 +73,6 @@
 
 			login : login,
 
-			checkLogin : function () {
-				if (! $rootScope.user) {
-					$location.path('/login');
-					return false;
-				}
-				return true;
-			},
-
 			characters : [
 				{
 					'id' : 'loup',
@@ -153,4 +132,4 @@
 	});
 
 
-})();
+})(Firebase);