Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I'm brand new to AngularJS. I would like advice as to whether I'm approaching the design of a simple login section of an app built with Angular correctly.

The app consists of two view partials: login.html and user-admin.html. Of what I have so far, the user types their username into the login page. A controller checks if that username is listed in users.json file, if so then login is successful and the user-admin.html partial replaces login.html.

I feel that the controller which checks the typed username against the usernames in users.json could be written better. Is there a more efficient way than using the 'for' statement?

To develop this further I will want to add some way of preventing a logged in user seeing the login page and a non-logged in user seeing the admin page. My initial thought is to use cookies. But would the 'Angular' way be to create a service that perpetuates the logged in status between views? If that is the best way to implement it, what would that service look like?

app.js

angular.module('userApp', ["ngResource"]).

config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/login', {templateUrl: 'partials/login.html',   controller: LoginCtrl}).
        when('/loggedin', {templateUrl: 'partials/user-admin.html', controller: UserCtrl}).
        otherwise({redirectTo: '/login'});
}],[ '$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode = true;
}]).

factory("User", function($resource) {
    return $resource("users/:userId.json", {}, {
        query: {method: "GET", params: {userId: "users"}, isArray: true}
    });
});

controllers.js

function LoginCtrl($scope, $route, $routeParams, $location, User) {
    $scope.users = User.query();
    $scope.loginUser = function() {
        var loggedin = false;
        var totalUsers = $scope.users.length;
        var usernameTyped = $scope.userUsername;

        for( i=0; i < totalUsers; i++ ) {
            if( $scope.users[i].name === usernameTyped ) {
                loggedin = true;
                break;
            }
        }

        if( loggedin === true ) {
            alert("login successful");
            $location.path("/loggedin");
        } else {
            alert("username does not exist")
        }
    }
}

function UserCtrl($scope, $route, $routeParams, $location) {
    $scope.logoutUser = function() {
        $location.path("/login");
    }
}

users.json

[
    {
        "userId": 1,
        "name": "Tommy",
        "password": "123456",
        "log": {
            "registration": "2012.12.14",
            "lastLog": "2013.01.15"
        }
    },
    {
        "userId": 2,
        "name": "Anne",
        "password": "123456",
        "log": {
            "registration": "2012.12.24",
            "lastLog": "2012.12.29"
        }

    },
    {
        "userId": 3,
        "name": "Miles",
        "password": "abc",
        "log": {
            "registration": "2013.02.01",
            "lastLog": "2013.02.01"
        }
    }
]

login.html

<h1>Login</h1>
<section>
    <form ng-submit="loginUser();">
        <label for"userUsername">Username</label><input type="text" id="userUsername" ng-model="userUsername">
        <input type="submit" value="Login">
    </form>
</section>
share|improve this question
1  
do you have a working example fo this? –  user26709 Jun 28 '13 at 13:19
    
No unfortunately I don't. I didn't get much further with this project and hasn't been worked on for a while. –  tommyf Jun 28 '13 at 17:43
    
change line: for( i=0; i < totalUsers; i++ ) TO for(var i=0; i < totalUsers; i++ ) –  harsh4u May 9 at 6:52

2 Answers 2

There is much wrong with your code..

  • You are iterating over every record to find a username, what happens if you have lots of users ?
  • You are not verifying the password !?
  • It seems like you are exposing the REST services with all the user id's and passwords !?
  • It seems that if the user knows the /loggedin URL, then the user can skip logging in since you do not validate loggedIn anywhere. Even worse, loggedIn is a variable local to LoginCtrl.

It is good to try and write everything yourself, it brings valuable experience. But please, use this only for throwaway websites.

share|improve this answer

You could also create an HTTP call to a PHP $http.post(); to make your call in a secure php file and getting a query to spit back a json_encoded(); response. I liked the example above. I will be using it along with some ngCookies to keep the session open that way.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.