2
\$\begingroup\$

I'm building an angular application using AngularJS and AngularFire. As this is the second part of this "series" it might be a good idea to also check out part 1 to gain an even better overview of the register/login process.

I have a few concerns here:

  • It feels like I shouldn't need to have a $scope.loggedIn variable in order to tell the site that a user is logged in. What's the proper way of doing this? I've seen the use of authData but I'm not quite sure how to use it.

  • The second case in the switch doesn't ever get run because if there is an invalid email format, an error gets thrown instead of showing the error message. If I remove the throw error a user will be logged in even if the information is incorrect because the .then function gets run. This is also connected to the previous issue with the $scope.loggedIn, this variable isn't connected to AngularFire in any way and therefore the authentication process is severely broken. What would be the proper way of going about this matter?

Let me know if there is anything else worth pointing out.

The login template:

<div id="login-form-wrapper" class="rounded-corners box-shadow">
    <h1>Existing user</h1>
    <form method="post" id="login" name="login" novalidate>
        <table>
            <tr>
                <td><label for="email">Email:</label></td>
                <td><input type="email" ng-model="authInfo.email" alt="Enter your email" placeholder="Email" 
                           id="email" class="input rounded-corners box-shadow"></td>
                <td><span>*</span></td>
            </tr>
            <tr>
                <td><label for="password">Password:</label></td>
                <td><input type="password" ng-model="authInfo.password" alt="Enter your password"
                           placeholder="Password" id="password" class="input rounded-corners box-shadow"></td>
                <td><span>*</span></td>
            </tr>
        </table>
    </form>
    <div class="error-wrapper">
        <h5 ng-repeat="error in errors" class="error" ng-bind="error"></h5>
        <h5 ng-show="isSuccessful" class="success" ng-bind="success"></h5>
    </div>
    <div id="form-btn-wrapper">
        <input type="button" form="login" name="login-submit" value="Login" 
               id="login-submit" class="btn" ng-click="authenticateUser()">
    </div>
</div>

Controller attached to the template:

pieShopApp.controller('loginCtrl', ['$scope', '$rootScope', '$firebase', '$firebaseAuth', '$location', '$timeout', function ($scope, $rootScope, $firebase, $firebaseAuth, $location, $timeout) {

    $rootScope.loggedIn = false;

    $scope.ref = new Firebase ('https://<dbnamegoeshere>.firebaseio.com');
    $scope.syncAuth = $firebaseAuth($scope.ref);

    $scope.errors = [];
    $scope.isSuccessful = false;

    //Needs to be initialized in order for the
    //authentication to run properly
    $scope.authInfo = {};
    $scope.authInfo.email = "";
    $scope.authInfo.password = "";

    $scope.authenticateUser = function() {

        $scope.errors = [];

        if ($scope.authInfo.email === '' || $scope.authInfo.password === '') {
            $scope.errors.push('You must fill in both email and password.');

            return false;
        }

        $scope.syncAuth.$authWithPassword({
            email: $scope.authInfo.email,
            password: $scope.authInfo.password
        }).catch(function(error) {

            switch (error.code) {

                case 'INVALID_USER': $scope.errors.push('The email you have entered is not a registered user.'); 
                                    break;

                case 'INVALID_EMAIL': $scope.errors.push('Invalid email format.'); 
                                    break;

                case 'INVALID_PASSWORD': $scope.errors.push('Invalid password.'); 
                                    break;
            }

            throw error;
        })
        .then(function(authData) {
            $scope.isSuccessful = true;
            $scope.success = 'You have successfully logged in - Redirecting...';
            $rootScope.loggedIn = true;
            $timeout($scope.redirectUser, 3000);
        });
    }
    $scope.redirectUser = function() {
        $location.path('/pies');
    }
}]);
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.