Merge pull request #35 from karudedios/features/restrict-unauthorized

Features/restrict unauthorized

features/auth/router/auth.js

@@ -1,3 +1,4 @@
+'use strict';
 const Router            = require('express').Router;
 
 module.exports = (User, strategy) =>

features/todo/model/todo.js

@@ -1,5 +1,4 @@
 'use strict';
-
 const mongoose  = require('mongoose');
 const Schema    = mongoose.Schema;
 

public/app.js

@@ -1,7 +1,18 @@
-
 angular.module('todoApp',
     [
         'ui.router',
         'ngResource',
         'ui.materialize'
-    ]);
+    ]).run(['$rootScope', 'Auth', '$state', AppRun]);
+
+function AppRun($rootScope, Auth, $state) {
+    $rootScope.$on('$stateChangeStart', function (event, toState, toStateParams) {
+        Auth.me(function (doc) {
+            if(toState.name == 'login'){
+                $state.go('app.home')
+            }
+        }, function (err) {
+            $state.go('login')
+        })
+    })
+}

public/app.state.js

@@ -8,7 +8,7 @@ function AppStateConfig($stateProvider, $urlRouterProvider){
         views : {
             'header' : {
                 templateUrl : 'layout/header.html',
-                controller : 'HeaderController'
+                controller : 'HeaderController as ctrl'
             },
             'content' : {
                 template : '<div class="container" ui-view></div>'
@@ -18,7 +18,8 @@ function AppStateConfig($stateProvider, $urlRouterProvider){
 
     $urlRouterProvider.otherwise(function ($injector, $location) {
         var $state = $injector.get('$state');
-
         $state.go('app.home');
     });
+
+
 }

public/factory/auth.factory.js

@@ -0,0 +1,24 @@
+angular.module('todoApp')
+    .factory('Auth', ['$resource', AuthFactory]);
+
+function AuthFactory($resource) {
+    return $resource('/auth', {},
+        {
+            signup: {
+                method : 'POST',
+                url : '/auth/signup'
+            },
+            me : {
+                method: 'GET',
+                url : '/auth/me'
+            },
+            signin : {
+                method: 'POST',
+                url : '/auth/signin',
+            },
+            signout: {
+                method: 'POST',
+                url: '/auth/signout'
+            }
+        });
+}

public/factory/user.factory.js

@@ -0,0 +1,6 @@
+angular.module('todoApp')
+    .factory('User', ['$resource', User]);
+
+function User($resource){
+    return $resource('/api/user/:id');
+}

public/index.html

@@ -27,16 +27,6 @@
 <script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
 <script src="../bower_components/angular-resource/angular-resource.min.js"></script>
 
-<script src="../bower_components/jquery-ui/jquery-ui.js"></script>
-<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css">
-<script src="https://google-code-prettify.googlecode.com/svn/loader/prettify.js"></script>
-
-<script src="../bower_components/jquery-ui/ui/core.js.js"></script>
-<script src="../bower_components/jquery-ui/ui/widget.js"></script>
-<script src="../bower_components/jquery-ui/ui/position.js"></script>
-<script src="../bower_components/jquery-ui/ui/draggable.js"></script>
-<script src="../bower_components/jquery-ui/ui/resizable.js"></script>
-<script src="../bower_components/jquery-ui/ui/mouse.js"></script>
 <script src="../bower_components/materialize-colorpicker/dist/js/materialize-colorpicker.min.js"></script>
 <script src="../bower_components/prism/prism.js"></script>
 
@@ -45,13 +35,22 @@
 <script src="app.js"></script>
 <script src="app.state.js"></script>
 
+<script src="login/login.state.js"></script>
+<script src="login/login.controller.js"></script>
+<script src="login/directives/signup/login.signup.modal.directive.js"></script>
+<script src="login/directives/password/login.password.confirmation.directive.js"></script>
+
 <script src="layout/header.controller.js"></script>
 <script src="sections/home/home.state.js"></script>
 <script src="sections/todo/todo.state.js"></script>
 <script src="sections/todo/todo.controller.js"></script>
+
 <script src="sections/todo/directives/create/todo.create.modal.directive.js"></script>
 <script src="sections/todo/directives/editcolor/todo.editcolor.modal.directive.js"></script>
 <script src="sections/todo/directives/detail/todo.detail.modal.directive.js"></script>
 <script src="factory/todo.factory.js"></script>
+<script src="factory/user.factory.js"></script>
+<script src="factory/auth.factory.js"></script>
+
 </body>
 </html>

public/layout/header.controller.js

@@ -1,12 +1,21 @@
 angular.module('todoApp')
-.controller('HeaderController', ['$scope', HeaderController]);
+.controller('HeaderController', ['$scope', 'Auth', '$state', HeaderController]);
 
-function HeaderController($scope){
+function HeaderController($scope, Auth, $state){
     var self = this;
     self.showSideNav = showSideNav;
-
-    $(".button-collapse").sideNav();
+    self.logout = logout;
+
+    showSideNav();
+
+    function logout() {
+        Auth.signout({}, function(doc){
+        }, function(){
+            $state.go('login');
+        })
+    }
 
     function showSideNav(){
+        $(".button-collapse").sideNav();
     }
 }

public/layout/header.html

@@ -6,6 +6,9 @@
             <li><a href="#/">Home</a></li>
             <li><a href="#/todo">Tasks to Do</a></li>
         </ul>
+        <ul class="right hide-on-med-and-down">
+            <li><a href="#/" ng-click="ctrl.logout()">Logout</a></li>
+        </ul>
 
         <ul class="side-nav" id="mobile-demo">
             <li><a href="#/">Home</a></li>

public/login/directives/password/login.password.confirmation.directive.js

@@ -0,0 +1,23 @@
+angular.module('todoApp')
+    .directive('passwordVerify', passwordVerify);
+
+function passwordVerify() {
+    return {
+        require: "ngModel",
+        scope: {
+            passwordVerify: '='
+        },
+        link: function (scope, element, attrs, ctrl) {
+            ctrl.$parsers.unshift(function (viewValue) {
+                var origin = scope.passwordVerify;
+                if (origin != viewValue) {
+                    ctrl.$setValidity("passwordVerify", false);
+                    return undefined;
+                } else {
+                    ctrl.$setValidity("passwordVerify", true);
+                    return viewValue;
+                }
+            });
+        }
+    };
+}

public/login/directives/signup/login.signup.modal.directive.js

@@ -0,0 +1,45 @@
+angular.module('todoApp')
+    .directive('myLoginSignupModal', myLoginSignupModal);
+
+function myLoginSignupModal() {
+    return {
+        scope :{
+
+        },
+        templateUrl : 'login/directives/signup/login.signup.modal.html',
+        controller: ['$scope', '$state', 'Auth', myLoginSignupModalController]
+    }
+}
+
+function myLoginSignupModalController($scope, $state, Auth) {
+    $scope.openModal = openModal;
+    $scope.signUpUser = signUpUser;
+
+    initNewUser();
+
+    function signUpUser() {
+        Auth.signup({username : $scope.user.username, password : $scope.user.password}, function(doc){
+            if(doc.username){
+                $state.go('app.home');
+            }
+        }, function(err){
+            if(err.data){
+                Materialize.toast(err.data, 4000);
+            }
+        });
+
+        initNewUser();
+    }
+
+    function openModal() {
+        $('#signUpModal').openModal();
+    }
+
+    function initNewUser(){
+        $scope.user = {
+            username: '',
+            password: '',
+            confirmation: ''
+        };
+    }
+}

public/login/directives/signup/login.signup.modal.html

@@ -0,0 +1,45 @@
+<!-- Modal Trigger -->
+<a class="waves-effect waves-light modal-trigger" ng-click="openModal()" href="javascript:void(0);">Sign Up</a>
+
+<!-- Modal Structure -->
+<div id="signUpModal" class="modal ">
+    <form class="col s12" name="signUpForm" ng-submit="signUpUser()">
+
+        <div class="modal-content container">
+            <h4 class="center-align"><b>Sign Up</b></h4>
+            <div class="row">
+
+                <div class="row">
+                    <div class="input-field col s12">
+                        <input id="username" type="text" class="validate" ng-model="user.username" required>
+                        <label for="username">Username</label>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="input-field col s12">
+                        <input id="password" type="password" name="password" class="validate" ng-model="user.password">
+                        <label for="password">Password</label>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="input-field col s12">
+                        <input id="confirmation" type="password" class="validate"
+                               ng-model="user.confirmation" password-verify="user.password" name="confirm_password" required>
+                        <label for="confirmation">Confirm Password</label>
+                    </div>
+                </div>
+
+            </div>
+
+            <div class="modal-footer">
+                <button href="#!" ng-show="!signUpForm.confirm_password.$error.passwordVerify && !signUpForm.$invalid"
+                        type="submit" class=" modal-action modal-close waves-effect waves-green btn">
+                    Save
+                </button>
+            </div>
+
+        </div>
+    </form>
+
+
+</div>

public/login/login.controller.js

@@ -0,0 +1,22 @@
+angular.module('todoApp')
+    .controller('LoginController', ['$scope', 'Auth', '$state', LoginController]);
+
+function LoginController($scope, Auth, $state) {
+    var self = this;
+
+    self.signin = signin;
+    self.user = {
+        username: '',
+        password: ''
+    }
+
+    function signin() {
+        Auth.signin(self.user, function(doc){
+            $state.go('app.home');
+        }, function(err){
+            if(err.data){
+                Materialize.toast('Username or Password are incorrect', 4000);
+            }
+        })
+    }
+}

public/login/login.html

@@ -0,0 +1,42 @@
+<div id="login-page" class="row container" >
+    <div class="col s12 z-depth-6 card-panel">
+        <form class="login-form" ng-submit="ctrl.signin()">
+            <div class="row">
+                <div class="input-field col s12 center">
+                    <h3 class="center login-form-text"><b>Login</b></h3>
+                </div>
+            </div>
+            <div class="row margin">
+                <div class="input-field col s12">
+                    <i class=" mdi-social-person-outline prefix material-icons">person_pin</i>
+
+                    <input class="validate" id="username" type="text" ng-model="ctrl.user.username">
+                    <label for="username" data-error="wrong" data-success="right">Username</label>
+                </div>
+            </div>
+            <div class="row margin">
+                <div class="input-field col s12">
+                    <i class=" mdi-social-person-outline prefix material-icons">lock_outline</i>
+
+                    <input id="password" type="password" ng-model="ctrl.user.password">
+                    <label for="password">Password</label>
+                </div>
+            </div>
+            <div class="row">
+                <div class="input-field col s12">
+                    <button type="submit" class="btn waves-effect waves-light col s12">Login</button>
+                </div>
+            </div>
+
+        </form>
+        <div class="row">
+            <div class="input-field col s6 m6 l6">
+                <span>Don't you have an Account?</span>
+                <p class="margin medium-small">
+                    <my-login-signup-modal></my-login-signup-modal>
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+

public/login/login.state.js

@@ -0,0 +1,15 @@
+angular.module('todoApp')
+    .config(['$stateProvider', LoginStateConfig]);
+
+function LoginStateConfig($stateProvider) {
+    $stateProvider.state('login', {
+        url: '/login',
+        views: {
+            'content': {
+                templateUrl: 'login/login.html',
+                controller: 'LoginController as ctrl'
+            }
+        },
+    });
+}
+

public/sections/todo/directives/editcolor/todo.editcolor.modal.directive.js

@@ -20,8 +20,8 @@ function myTodoEditColorModaController($scope, Todo){
 
     $scope.editColor = editColor;
 
-    function editColor(color){
-        Todo.update({_id : $scope.myTodo._id, color : color.colorCode}, function(doc){
+    function editColor(){
+        Todo.update({_id : $scope.myTodo._id, color : $scope.myTodo.color}, function(doc){
             if($scope.onSuccess){
                 $scope.onSuccess(doc);
             }