login

public/app/app.js

@@ -33,6 +33,24 @@ angular.module('app', [
                 controller:'HomeController'
             });
 
+            $stateProvider.state('login', {
+                url:'/login',
+                parent: 'root',
+                title: "Login",
+                reloadOnSearch: false,
+                templateUrl:'views/login.html',
+                controller:'LoginController'
+            });
+
+            $stateProvider.state('signUp', {
+                url:'/signUp',
+                parent: 'root',
+                title: "Sign Up",
+                reloadOnSearch: false,
+                templateUrl:'views/signup.html',
+                controller:'SignUpController'
+            });
+
             $urlRouterProvider.otherwise('/');
     }])
     .directive('dateNow', ['$filter', function($filter) {

public/app/controllers/login.controller.js

@@ -0,0 +1,27 @@
+angular.module('app')
+    .controller('LoginController', ['$scope', '$state', '$mdDialog', 'luticateAuthUsers',
+        function($scope, $state, $mdDialog, luticateAuthUsers) {
+            
+            $scope.user = {
+                Username: "",
+                Password: ""
+            };
+
+            $scope.error = null;
+            
+            $scope.login = function()
+            {
+                if ($scope.user.Username == "" || $scope.user.Password == "") {
+                    return;
+                }
+                luticateAuthUsers.login({
+                    username: $scope.user.Username,
+                    password: $scope.user.Password
+                }).then(function(data)
+                {
+                    $state.go("home");
+                }, function (error) {
+                    $scope.error = error;
+                });
+            };
+    }]);

public/app/controllers/signup.controller.js

@@ -0,0 +1,4 @@
+angular.module('app')
+    .controller('SignUpController', ['$scope', '$state', '$mdDialog',
+        function($scope, $state, $mdDialog) {
+    }]);

public/app/controllers/toolbar.controller.js

@@ -3,11 +3,19 @@
  */
 
 angular.module('app')
-    .controller('ToolBarController', ['$scope', '$state', '$mdSidenav',
-        function($scope, $state, $mdSidenav) {
+    .controller('ToolBarController', ['$scope', '$state', '$mdSidenav', 'luticateAuthCache',
+        function($scope, $state, $mdSidenav, luticateAuthCache) {
 
                 $scope.toggleSideBar = function()
                 {
                     $mdSidenav('left').toggle();
                 };
+                
+                $scope.getCurrentUser = function () {
+                        return luticateAuthCache.getUser();
+                };
+
+                $scope.isLogged = function () {
+                        return $scope.getCurrentUser() != null;
+                };
         }]);

public/app/index.html

@@ -50,6 +50,8 @@
     <script src="controllers/sidebar.controller.js"></script>
     <script src="controllers/toolbar.controller.js"></script>
     <script src="controllers/home.controller.js"></script>
+    <script src="controllers/login.controller.js"></script>
+    <script src="controllers/signup.controller.js"></script>
 
     <!-- Modal Controller -->
 

public/app/less/app.less

@@ -31,3 +31,8 @@
 /**
 ========================================================
 **/
+
+.error-message {
+  color: red;
+  font-weight: bold;
+}

public/app/views/login.html

@@ -0,0 +1,26 @@
+<div layout="column" layout-fill layout-align="top center">
+    <h1>Login</h1>
+    <div class="col-xs-4">
+        <form ng-submit="login()">
+            <div>
+                <md-input-container class="col-xs-12">
+                    <label for="username">Username</label>
+                    <input name="username" id="username" type="text" ng-model="user.Username" required>
+                </md-input-container>
+            </div>
+            <div>
+                <md-input-container class="col-xs-12">
+                    <label for="password">Password</label>
+                    <input name="password" id="password" type="password" ng-model="user.Password" required>
+                </md-input-container>
+            </div>
+            <div class="col-xs-10 col-xs-offset-1">
+                <md-button class="col-xs-12" type="submit">Login</md-button>
+            </div>
+        </form>
+        <div class="clearfix"></div>
+        <div ng-hide="error == null" class="error-message text-center">
+            {{ error.Data }}
+        </div>
+    </div>
+</div>

public/app/views/signup.html

@@ -0,0 +1,5 @@
+<div layout="column" layout-fill layout-align="top center">
+    <p>
+        Welcome home
+    </p>
+</div>

public/app/views/toolbar.html

@@ -5,5 +5,7 @@
         </md-button>
         <h2>Toolbar</h2>
         <span flex></span>
+        <span ng-hide="isLogged()"><a ui-sref="login">Login</a></span>
+        <span ng-show="isLogged()"><a ui-sref="login">{{ getCurrentUser().Firstname }} {{ getCurrentUser().Lastname }}</a></span>
     </div>
 </md-toolbar>