Forked from DinisCruz-Dev/1a. simple Angular with route - Firebase_Login.html
Created
June 4, 2018 20:54
-
-
Save patbi/5d01220e2582d7e793d9228ae6b70e17 to your computer and use it in GitHub Desktop.
Creating an AngularJS page with Firebase login
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html ng-app="project"> | |
<head> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js" ></script> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script> | |
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" > | |
<script src="app.js"></script> | |
</head> | |
<body> | |
<div class="container"> | |
<h2>Firebase with Login</h2> | |
<ol class="breadcrumb"> | |
<li><a href="#" >Chat view </a></li> | |
<li><a href="#/login">Login view</a></li> | |
</ol> | |
<div class="well"> | |
<div ng-view></div> | |
</div> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
angular.module ('project' , ['ngRoute']) | |
.config(function($routeProvider) | |
{ | |
$routeProvider.when ('/', { templateUrl :'chat.html' }) | |
.when ('/login', { templateUrl :'login.html' }) | |
.otherwise( { redirectTo :'/' }); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<b>this is the login view</b> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<b> this is the chat view</b> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
angular.module ('project' , ['ngRoute' , 'firebase']) | |
.value ('fbURL' , 'https://tm-admin-test.firebaseio.com/') | |
.factory('fbRef' , function($firebase, fbURL) | |
{ | |
return new Firebase(fbURL); | |
}) | |
.config(function($routeProvider) | |
{ | |
$routeProvider.when ('/chat', { templateUrl :'chat.html' }) | |
.when ('/login', { templateUrl :'login.html' , controller: 'LoginCtrl'}) | |
.otherwise( { redirectTo :'/login' }); | |
}) | |
.controller('LoginCtrl', function($scope, fbRef) | |
{ | |
auth = new FirebaseSimpleLogin(fbRef, function(error, user) | |
{ | |
if (error) // an error occurred while attempting login | |
{ | |
$scope.LoginStatus = "Firebase Error: " + error; | |
$scope.$apply(); | |
return; | |
} | |
else if (user) // user is authenticated with Firebase | |
{ | |
$scope.LoginStatus = 'User ID: ' + user.id + ', Provider: ' + user.provider; | |
$scope.$apply(); | |
return; | |
} | |
$scope.LoginStatus = "User not logged in"; | |
$scope.$apply(); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html ng-app="project"> | |
<head> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js" type='text/javascript'></script> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js" type='text/javascript'></script> | |
<script src="https://cdn.firebase.com/v0/firebase.js" type='text/javascript'></script> | |
<script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js" type='text/javascript'></script> | |
<script src='https://cdn.firebase.com/js/simple-login/1.2.5/firebase-simple-login.js' type='text/javascript'></script> | |
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel ="stylesheet" > | |
<script src="app.js"></script> | |
</head> | |
<body> | |
<div class="container"> | |
<h2>Firebase with Login</h2> | |
<ol class="breadcrumb"> | |
<li><a href="#/chat" >Chat view </a></li> | |
<li><a href="#/login">Login view</a></li> | |
</ol> | |
<div class="well"> | |
<div ng-view></div> | |
</div> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
angular.module ('project' , ['ngRoute' , 'firebase']) | |
.value ('fbURL' , 'https://tm-admin-test.firebaseio.com/') | |
.factory('fbRef' , function($firebase, fbURL) | |
{ | |
return new Firebase(fbURL); | |
}) | |
.config(function($routeProvider) | |
{ | |
$routeProvider.when ('/chat', { templateUrl :'chat.html' }) | |
.when ('/login', { templateUrl :'login.html' , controller: 'LoginCtrl'}) | |
.otherwise( { redirectTo :'/login' }); | |
}) | |
.controller('LoginCtrl', function($scope, fbRef) | |
{ | |
var auth = new FirebaseSimpleLogin(fbRef, function(error, user) | |
{ | |
if (error) // an error occurred while attempting login | |
{ | |
$scope.LoginStatus = "Firebase Error: " + error; | |
$scope.$apply(); | |
return; | |
} | |
else if (user) // user is authenticated with Firebase | |
{ | |
$scope.LoginStatus = 'User ID: ' + user.id + ', Provider: ' + user.provider; | |
$scope.$apply(); | |
return; | |
} | |
$scope.LoginStatus = "User not logged in"; | |
$scope.$apply(); | |
}); | |
//auth.logout(); | |
$scope.loginUser = function() | |
{ | |
auth.login("password", { | |
email : $scope.email, | |
password : $scope.password, | |
rememberMe: false | |
}); | |
}; | |
}); | |
/* | |
.controller('ChatCtrl', function($scope, Projects) | |
{ | |
$scope.projects = Projects; | |
}) | |
;*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h4> | |
Login view | |
</h4> | |
<p> | |
Login Status: {{LoginStatus}} | |
</p> | |
<form class="form center-block"> | |
<div class="form-group"> | |
<input class="form-control input-lg" type="text" ng-model="email" placeholder="Email" > | |
</div> | |
<div class="form-group"> | |
<input class="form-control input-lg" type="password" ng-model="password" placeholder="Password"> | |
</div> | |
<div class="form-group"> | |
<button class="btn btn-primary btn-lg btn-block" ng-click="loginUser()" > | |
Login | |
</button> | |
</div> | |
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
angular.module ('project' , ['ngRoute' , 'firebase']) | |
.value ('fbURL' , 'https://tm-admin-test.firebaseio.com/') | |
.factory('fbRef' , function($firebase, fbURL) | |
{ | |
return new Firebase(fbURL); | |
}) | |
.config(function($routeProvider) | |
{ | |
$routeProvider.when ('/chat', { templateUrl :'chat.html' }) | |
.when ('/login', { templateUrl :'login.html' , controller: 'LoginCtrl'}) | |
.otherwise( { redirectTo :'/chat' }); | |
}) | |
.controller('LoginCtrl', function($scope, $location , fbRef) | |
{ | |
var auth = new FirebaseSimpleLogin(fbRef, function(error, user) | |
{ | |
if (error) // an error occurred while attempting login | |
{ | |
$scope.LoginStatus = error.toString(); | |
$scope.$apply(); | |
return; | |
} | |
else if (user) // user is authenticated with Firebase | |
{ | |
$scope.LoginStatus = 'User ID: ' + user.id + ', Provider: ' + user.provider; | |
$location.path("/"); | |
$scope.$apply(); | |
return; | |
} | |
$scope.LoginStatus = "User not logged in"; | |
$location.path("/login"); | |
$scope.$apply(); | |
}); | |
auth.logout(); | |
$scope.loginUser = function() | |
{ | |
$scope.LoginStatus = "Logging in..."; | |
auth.login("password", { | |
email : $scope.email, | |
password : $scope.password, | |
rememberMe: false | |
}); | |
}; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h4> | |
Login view | |
</h4> | |
<form class="form center-block"> | |
<div class="form-group"> | |
<input class="form-control input-lg" type="text" ng-model="email" placeholder="Email" > | |
</div> | |
<div class="form-group"> | |
<input class="form-control input-lg" type="password" ng-model="password" placeholder="Password"> | |
</div> | |
<div class="form-group"> | |
<button class="btn btn-primary btn-lg btn-block" ng-click="loginUser()" > | |
Login | |
</button> | |
</div> | |
<div class="panel panel-warning"> | |
<div class="panel-heading"> | |
{{LoginStatus}} | |
</div> | |
</div> | |
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
angular.module ('project' , ['ngRoute' , 'firebase']) | |
.value ('fbURL' , 'https://tm-admin-test.firebaseio.com/') | |
.factory('fbRef' , function($firebase, fbURL) | |
{ | |
return new Firebase(fbURL); | |
}) | |
.factory('fbData' , function($firebase, fbURL) | |
{ | |
return $firebase(new Firebase(fbURL)); | |
}) | |
.config(function($routeProvider) | |
{ | |
$routeProvider.when ('/chat', { templateUrl :'chat.html' , controller: 'ChatCtrl' }) | |
.when ('/login', { templateUrl :'login.html' , controller: 'LoginCtrl'}) | |
.otherwise( { redirectTo :'/chat' }); | |
}) | |
.controller('LoginCtrl', function($scope, $location , fbRef) | |
{ | |
auth = new FirebaseSimpleLogin(fbRef, function(error, user) | |
{ | |
if (error) // an error occurred while attempting login | |
{ | |
$scope.LoginStatus = error.toString(); | |
$scope.$apply(); | |
return; | |
} | |
else if (user) // user is authenticated with Firebase | |
{ | |
$scope.LoginStatus = 'Current User: Id = ' + user.id + | |
' , Email= ' + user.email + | |
' , Provider = ' + user.provider; | |
//$location.path("/"); | |
$scope.$apply(); | |
return; | |
} | |
$scope.LoginStatus = "User not logged in"; | |
//$location.path("/login"); | |
$scope.$apply(); | |
}); | |
$scope.loginUser = function() | |
{ | |
$scope.LoginStatus = "Logging in..."; | |
auth.login("password", { | |
email : $scope.email, | |
password : $scope.password, | |
rememberMe: true | |
}); | |
}; | |
$scope.logout = function() | |
{ | |
auth.logout(); | |
}; | |
$scope.email = "dinis.cruz@owasp.org"; // | |
$scope.password = "pwd12345"; | |
}) | |
.controller('ChatCtrl', function($scope, fbData) | |
{ | |
$scope.messages = fbData; | |
console.log("with fbData"); | |
$scope.send = function() | |
{ | |
fbData.$add({user: $scope.user, message: $scope.message}); | |
}; | |
}); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h4>Chat view</h4> | |
<h5>Submit new message:</h5> | |
<div class="well"> | |
<form class="form-inline"> | |
<input type="text" class="input-sm" placeholder="user" ng-model = "user"> | |
<input type="text" class="input-sm" placeholder="message" ng-model = "message"> | |
<button type="button" class="btn btn-success btn-sm" ng-click = "send()">Send</button> | |
</form> | |
</div> | |
<h5>Current messages:</h5> | |
<table class="table table-striped"> | |
<thead> | |
<tr> | |
<th>user</th> | |
<th>message</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr ng-repeat="item in messages" > | |
<td>{{item.user}}</td> | |
<td>{{item.message}}</td> | |
</tr> | |
</tbody> | |
</table> | |
<hr/> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html ng-app="project"> | |
<head> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js" type='text/javascript'></script> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js" type='text/javascript'></script> | |
<script src="https://cdn.firebase.com/v0/firebase.js" type='text/javascript'></script> | |
<script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js" type='text/javascript'></script> | |
<script src='https://cdn.firebase.com/js/simple-login/1.2.5/firebase-simple-login.js' type='text/javascript'></script> | |
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel ="stylesheet" > | |
<script src="app.js"></script> | |
</head> | |
<body> | |
<div class="container"> | |
<h2>Firebase with Login</h2> | |
<ol class="breadcrumb"> | |
<li><a href="#/chat" >Chat view </a></li> | |
<li><a href="#/login">Login view</a></li> | |
</ol> | |
<div class="well_"> | |
<div ng-view></div> | |
</div> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h4> | |
Login view | |
</h4> | |
<form class="form center-block"> | |
<div class="form-group"> | |
<input class="form-control input-lg" type="text" ng-model="email" placeholder="Email" > | |
</div> | |
<div class="form-group"> | |
<input class="form-control input-lg" type="password" ng-model="password" placeholder="Password"> | |
</div> | |
<div class="form-group"> | |
<button class="btn btn-primary" ng-click="loginUser()" > | |
Login | |
</button> | |
<button class="btn btn-warning" ng-click="logout()">logout</button> | |
</div> | |
<div class="panel panel-warning"> | |
<div class="panel-heading"> | |
{{LoginStatus}} | |
</div> | |
</div> | |
</form> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment