[Firebase] 3. Firebase Simple Login Form

Using $firebaseSimpleLogin service.

Here we use three methods for login, logout, register and getCurrentUser.

Be sure to open the Email and Password configuration on Forge:

login.tmpl.html

<div class="container" ng-controller="LoginCtrl">
    <h2>Login From</h2>
    <form class="form-signin">
        <h3 class="for-signin-heading" ng-if="currentUser">{{currentUser.email}}</h3>
        <input ng-model="newUser.email" type="email" class="form-control" placeholder="Email address"/>
        <input type="password" placeholder="Password" ng-model="newUser.password" class="form-control" />
        <button class="btn btn-lg btn-primary btn-block" ng-click="login(newUser.email, newUser.password)">Login</button>
        <button class="btn btn-lg btn-success btn-block" ng-click="register(newUser.email, newUser.password)">Register</button>
        <button class="btn btn-lg btn-danger btn-block" ng-click="logout()">Logout</button>
    </form>
</div>

login.js

/**
 * Created by Answer1215 on 11/10/2014.
 */
var login = angular.module('login', ['firebase']);
app.constant('FIREBASE_URI', 'https://zhentiw-angular-fire.firebaseio.com/');

login.controller('LoginCtrl',  ['$scope', '$firebaseSimpleLogin', 'FIREBASE_URI', function($scope, $firebaseSimpleLogin, FIREBASE_URI){

    $scope.loginService = $firebaseSimpleLogin(new Firebase(FIREBASE_URI));
    $scope.newUser = {email: '', password: ''};
    $scope.currentUser = null;

    $scope.autoLogin = function(){

        $scope.loginService.$getCurrentUser()
            .then(function(user){
                $scope.currentUser = user;
            });
    };

    $scope.autoLogin();

    $scope.login = function(email, password){

        $scope.loginService.$login('password', {email: email, password: password})
            .then(function(user){
                $scope.currentUser = user;
                $scope.resetForm();
            })
    };

    $scope.register = function(email, password){

        $scope.loginService.$createUser(email, password)
            .then(function(user){
                $scope.currentUser = user;
                $scope.resetForm();
            });
    };

    $scope.logout = function(){
        $scope.loginService.$logout();
        $scope.currentUser = null;
    }

    $scope.resetForm = function(){

        $scope.newUser = {email: '', password: ''};
    }
}]);

app.js

/**
 * Created by Answer1215 on 11/9/2014.
 */

var app = angular.module('app', ['ui.router','firebase', 'oc.lazyLoad']);

app.constant('FIREBASE_URI', 'https://zhentiw-angular-fire.firebaseio.com/');

app.config(function($stateProvider){
    $stateProvider
        .state('login', {
            url: '/login',
            templateUrl: 'public/login.tmpl.html',
            controller: 'LoginCtrl',
            resolve: {
                'login@': function($ocLazyLoad){
                    return $ocLazyLoad.load(
                        {
                            name: "login",  //module name is "store"
                            files: ["public/js/login.js",
                            'bower_components/firebase-simple-login/firebase-simple-login.js']
                        }
                    )
                }
        }});
});

app.controller('LoginCtrl', function(){

});

app.controller('MainCtrl', ['$scope', 'ItemsService', function ($scope, ItemsService) {
    $scope.newItem = { name: '', description: '', count: 0 };
    $scope.currentItem = null;
    $scope.isUpdated = false;

    $scope.items = ItemsService.getItems();

    $scope.items.$on('change', function(){
        if(!$scope.isUpdated){return;}
        console.log("ITEMS CHANGE");
    });

    $scope.items.$on('loaded', function(){
        console.log("ITEMS LOADED");
    });

    //Deattach the change event from the items
    //$scope.items.$off('change');

    $scope.addItem = function () {
        ItemsService.addItem(angular.copy($scope.newItem));
        $scope.newItem = { name: '', description: '', count: 0 };
    };

    $scope.updateItem = function (id){
        $scope.isUpdated = true;
        ItemsService.updateItem(id);
    };

    $scope.removeItem = function (id) {
        ItemsService.removeItem(id);
    };
}]);

app.factory('ItemsService', ['$firebase', 'FIREBASE_URI', function ($firebase, FIREBASE_URI) {
    var ref = new Firebase(FIREBASE_URI);
    var items = $firebase(ref);

    var getItems = function () {
        return items;
    };

    var addItem = function (item) {
        items.$add(item);
    };

    var updateItem = function (id) {
        items.$save(id);
    };

    var removeItem = function (id) {
        items.$remove(id);
    };

    return {
        getItems: getItems,
        addItem: addItem,
        updateItem: updateItem,
        removeItem: removeItem
    }
}]);

index.html

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <title>Angular Firebase</title>
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="bower_components/angular-material/angular-material.min.css" rel="stylesheet" />
</head>
<body ng-controller="MainCtrl">
<ui-view>
    <div class="alert-info well">{{items | json}}</div>
    <button class="btn-info" ui-sref="login()">Login</button>

    <table class="table edit">
        <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Count</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="(id, item) in items">
            <td><input type="text" ng-model="item.name" ng-blur="updateItem(id)"/></td>
            <td><input type="text" ng-model="item.description" ng-blur="updateItem(id)"/></td>
            <td><input type="text" ng-model="item.count" ng-blur="updateItem(id)"/></td>
            <td>
                <a href="#" ng-click="removeItem(id)" class="navbar-link">Remove</a>
            </td>
        </tr>
        </tbody>
    </table>

    <div class="well">
        <h4>Add Item</h4>

        <form class="form-inline" role="form" novalidate ng-submit="addItem()">
            <div class="form-group">
                <input type="text" class="form-control" ng-model="newItem.name" placeholder="Name">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" ng-model="newItem.description" placeholder="Description">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" ng-model="newItem.count" placeholder="Count">
            </div>
            <button type="submit" class="btn btn-default">Add</button>
        </form>
    </div>

</ui-view>

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.6.0/angularfire.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/oclazyload/dist/ocLazyLoad.min.js"></script>
<script src="public/js/app.js"></script>
</body>
</html>