WIP: Added user, security service & login page

app/index.html

@@ -61,6 +61,7 @@
     <script src="bower_components/angular-cookies/angular-cookies.js"></script>
     <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
     <script src="bower_components/angular-route/angular-route.js"></script>
+    <script src="bower_components/ngstorage/ngStorage.js"></script>
     <!-- endbower -->
 
     <script src="bower_components/angular-apimock/dist/angular-apimock.min.js"></script>
@@ -69,7 +70,11 @@
 
         <!-- build:js({.tmp,app}) scripts/scripts.js -->
         <script src="scripts/app.js"></script>
+        <script src="scripts/services/user/user.js"></script>
+        <script src="scripts/services/user/auth.js"></script>
         <script src="scripts/controllers/main.js"></script>
+        <script src="scripts/controllers/login.js"></script>
+        <script src="scripts/controllers/dashboard.js"></script>
         <script src="scripts/services/backend-url.js"></script>
         <!-- endbuild -->
 </body>

app/mock_data/login.json

@@ -0,0 +1,3 @@
+{
+  "token" : "21232f297a57a5a743894a0e4a801fc3"
+}

app/scripts/app.js

@@ -6,14 +6,23 @@ angular
     'ngResource',
     'ngSanitize',
     'ngRoute',
-    'apiMock'
+    'apiMock',
+    'ngStorage'
   ])
   .config(function ($routeProvider, apiMockProvider) {
     $routeProvider
       .when('/', {
         templateUrl: 'views/main.html',
         controller: 'MainCtrl'
       })
+      .when('/login', {
+        templateUrl: 'views/login.html',
+        controller: 'LoginCtrl'
+      })
+      .when('/dashboard', {
+        templateUrl: 'views/dashboard.html',
+        controller: 'DashboardCtrl'
+      })
       .otherwise({
         redirectTo: '/'
       });

app/scripts/controllers/dashboard.js

@@ -0,0 +1,6 @@
+'use strict';
+
+angular.module('myApp')
+  .controller('DashboardCtrl', function ($scope) {
+
+  });

app/scripts/controllers/login.js

@@ -0,0 +1,39 @@
+'use strict';
+
+angular.module('myApp')
+  .controller('LoginCtrl', ['$scope', '$cookies', '$location', 'Auth', 'User', function($scope, $cookies, $location, Auth, User) {
+
+    Auth.status(function() {
+      if (User.getUserDetails().status == true) {
+        $location.url('/dashboard');
+      }
+      else {
+
+      }
+    },
+    function() {
+      User.clear();
+    });
+
+    $scope.user = {};
+    $scope.login_error = null;
+
+    $scope.login = function() {
+
+      Auth.login($scope.user)
+        .success(function(data) {
+          if (!data.error) {
+            User.setUserDetails(data);
+
+            $location.url('/dashboard');
+          }
+          else {
+            $scope.login_error = data.description;
+          }
+        })
+        .error(function(data, status, headers, config) {
+          $scope.login_error = 'Login failed.';
+        });
+    }
+
+  }]);

app/scripts/controllers/main.js

@@ -1,5 +1,5 @@
 'use strict';
 
 angular.module('myApp')
-  .controller('MainCtrl', function ($scope, Boxes) {
+  .controller('MainCtrl', function ($scope) {
   });

app/scripts/services/user/auth.js

@@ -0,0 +1,33 @@
+'use strict';
+
+angular.module('myApp').
+  service('Auth', ['$http', '$q', 'User', function($http, $q, User) {
+
+    this.status = function(success, error) {
+      $http.get('http://127.0.0.1/restful-login.php?status=1').success(function(res) {
+        if (res.status !== "undefined" && res.token) {
+          User.setDetails(res);
+          success();
+        }
+      }).error(error);
+    }
+
+    this.login = function(user) {
+      return $http.post('http://127.0.0.1/restful-login.php', user,
+        {
+          headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
+          transformRequest: function(data){
+            return $.param(data);
+          }
+        }
+      );
+    }
+
+    this.logout = function(success, error) {
+      $http.post('http://127.0.0.1/restful-login.php?logout=1').success(function(res) {
+        User.clear();
+        success();
+      }).error(error);
+    }
+
+  }]);

app/scripts/services/user/user.js

@@ -0,0 +1,19 @@
+'use strict';
+
+angular.module('myApp').
+  service('User', function($localStorage) {
+    this.storage = $localStorage;
+
+    this.setUserDetails = function(userDetails) {
+      this.storage.userDetails = userDetails;
+    }
+
+    this.getUserDetails = function() {
+      return this.storage.userDetails;
+    }
+
+    this.clear = function() {
+      delete this.storage.userDetails;
+    }
+
+  })

app/views/dashboard.html

@@ -0,0 +1,38 @@
+<div class="header">
+  <ul class="nav nav-pills pull-right">
+    <li class="active"><a ng-href="/">Home</a></li>
+    <li><a ng-href="#/{{'dashboard'}}">Dashboard</a></li>
+    <li><a ng-href="#/{{'login'}}">Login</a></li>
+    <li><a ng-href="#/{{'logout'}}">Login</a></li>
+    <li><a ng-href="#">Registration</a></li>
+  </ul>
+  <h3 class="text-muted">Restful client example</h3>
+</div>
+
+<div class="jumbotron">
+  <h1>Welcome to dashboard.</h1>
+  <p class="lead">
+    <img src="images/yeoman.png" alt="I'm Yeoman"><br>
+    Always a pleasure scaffolding your apps.
+  </p>
+  <p><a class="btn btn-lg btn-success" ng-href="#">Splendid!<span class="glyphicon glyphicon-ok"></span></a></p>
+</div>
+
+<div class="row marketing">
+  <h4>HTML5 Boilerplate</h4>
+  <p>
+    HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
+  </p>
+
+  <h4>Angular</h4>
+  <p>
+    AngularJS is a toolset for building the framework most suited to your application development.
+  </p>
+
+  <h4>Karma</h4>
+  <p>Spectacular Test Runner for JavaScript.</p>
+</div>
+
+<div class="footer">
+  <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
+</div>

app/views/login.html

@@ -0,0 +1,29 @@
+<div class="header">
+  <ul class="nav nav-pills pull-right">
+    <li class="active"><a ng-href="/">Home</a></li>
+    <li><a ng-href="#">Dashboard</a></li>
+    <li><a ng-href="#/{{'login'}}">Login</a></li>
+    <li><a ng-href="#">Registration</a></li>
+  </ul>
+  <h3 class="text-muted">Restful client example</h3>
+</div>
+
+
+<div class="jumbotron">
+  <h1>Login</h1>
+  <div class="alert alert-danger" ng-show="login_error">{{ login_error }}</div>
+  <p class="lead">
+    <label for="username">Username:</label>
+    <input type="text" id="username" ng-model="user.username" />
+  </p>
+  <p class="lead">
+    <label for="password">Password:</label>
+    <input type="text" id="password" ng-model="user.password" />
+  </p>
+  <p><a class="btn btn-lg btn-success" ng-click="login(user)" href="">Login</a></p>
+</div>
+
+<div class="footer">
+
+</div>
+

app/views/main.html

@@ -1 +1,38 @@
-Main view
+<div class="header">
+  <ul class="nav nav-pills pull-right">
+    <li class="active"><a ng-href="/">Home</a></li>
+    <li><a ng-href="#">Dashboard</a></li>
+    <li><a ng-href="#/{{'login'}}">Login</a></li>
+    <li><a ng-href="#">Registration</a></li>
+  </ul>
+  <h3 class="text-muted">Restful client example</h3>
+</div>
+
+
+<div class="jumbotron">
+  <h1>'Allo, 'Allo!</h1>
+  <p class="lead">
+    <img src="images/yeoman.png" alt="I'm Yeoman"><br>
+    Always a pleasure scaffolding your apps.
+  </p>
+  <p><a class="btn btn-lg btn-success" ng-href="#">Splendid!<span class="glyphicon glyphicon-ok"></span></a></p>
+</div>
+
+<div class="row marketing">
+  <h4>HTML5 Boilerplate</h4>
+  <p>
+    HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
+  </p>
+
+  <h4>Angular</h4>
+  <p>
+    AngularJS is a toolset for building the framework most suited to your application development.
+  </p>
+
+  <h4>Karma</h4>
+  <p>Spectacular Test Runner for JavaScript.</p>
+</div>
+
+<div class="footer">
+  <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
+</div>

bower.json

@@ -11,7 +11,8 @@
     "angular-cookies": "1.2.16",
     "angular-sanitize": "1.2.16",
     "angular-route": "1.2.16",
-    "angular-apimock": "*"
+    "angular-apimock": "*",
+    "ngstorage": "~0.3.0"
   },
   "devDependencies": {
     "angular-mocks": "1.2.16",