Febbweiss/CloudBudget-AngularJS
1
0
Fork 0
mirror of https://github.com/Febbweiss/CloudBudget-AngularJS.git synced 2026-03-04 22:35:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

First commit

Browse Source
This commit is contained in:
febbweiss
2015-09-10 14:02:43 +00:00
commit ab624930df
25 changed files with 933 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
public/home/home.controller.js Normal file
View File

@@ -0,0 +1,30 @@
(function() {
'use strict';
angular
.module('cloudbudget')
.controller('HomeController', HomeController);
HomeController.$inject = ['$rootScope'];
function HomeController($rootScope) {
var vm = this;
vm.firstname = '';
vm.lastname = '';
vm.getFullname = getFullname;
vm.user = null;
(function initController() {
loadUser();
})();
function loadUser() {
vm.user = $rootScope.globals.user;
};
function getFullname() {
return vm.firstname + ' ' + vm.lastname;
};
}
})();

4
public/home/home.view.html Normal file
View File

@@ -0,0 +1,4 @@
<h1>Hi {{vm.user.username}}</h1>
<p>You're logged in</p>
<p>&nbsp;</p>
<p><a href="/login" class="btn btn-primary">Logout</a></p>

54
public/index.html Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html ng-app="cloudbudget">
<head>
<meta charset="UTF-8" />
<base href="/" />
<title>CloudBudget</title>
<link rel="stylesheet" href="/libs/bootstrap/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-brand" href="/">CloudBudget</a>
</div>
<ul class="nav navbar-nav">
<li><a href="/login">Login</a></li>
</ul>
</nav>
</div>
<div class="jumbotron">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<div ng-class="{ 'alert': flash, 'alert-success' : flash.type === 'success', 'alert-danger': flash.type === 'error'}" ng-if="flash" ng-bind="flash.message"></div>
<div ng-view></div>
</div>
</div>
</div>
<div class="credits text-center">
<p>
<a href="#">CloudBudget</a>
</p>
<p>
<a href="#">Febbweiss</a>
</p>
</div>
<script src="/libs/angular/angular.js" ></script>
<script src="/libs/angular-route/angular-route.min.js"></script>
<script src="/libs/angular-cookies/angular-cookies.min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/routes.js"></script>
<script src="/js/services/authentication.service.js"></script>
<script src="/js/services/flash.service.js"></script>
<script src="/js/services/user.service.js"></script>
<script src="/home/home.controller.js"></script>
<script src="/login/login.controller.js"></script>
<script src="/register/register.controller.js"></script>
</body>
</html>

33
public/js/app.js Normal file
View File

@@ -0,0 +1,33 @@
(function() {
'use strict';
var HOST = 'http://cloudbudget.pavnay.fr/api';
angular
.module('cloudbudget', ['ngRoute', 'routes', 'ngCookies'])
.constant('apiRoutes', {
'host': HOST,
'port': "80",
'login': HOST + '/users/login',
'register': HOST + '/users',
'unregister': HOST + '/users/'
})
.run(run);
run.$inject = ['$rootScope', '$location', '$cookieStore', '$http', '$filter'];
function run( $rootScope, $location, $cookieStore, $http, $filter) {
$rootScope.globals = $cookieStore.get('globals') || {};
if( $rootScope.globals.user && $rootScope.globals.user.token) {
$http.defaults.headers.common['Authorization'] = 'JWT ' + $rootScope.globals.user.token;
}
$rootScope.$on('$locationChangeStart', function(event, next, current) {
var restrictedPage = ['/login', '/register'].indexOf($location.path()) === -1;
var loggedIn = $rootScope.globals.user;
if( restrictedPage && !loggedIn ) {
$location.path('/login');
}
});
}
})();

34
public/js/routes.js Normal file
View File

@@ -0,0 +1,34 @@
(function() {
'use strict';
angular
.module('routes', [])
.config(config);
config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'home/home.view.html',
controllerAs: 'vm'
})
.when('/login', {
controller: 'LoginController',
templateUrl: 'login/login.view.html',
controllerAs: 'vm'
})
.when('/register', {
controller: 'RegisterController',
templateUrl: 'register/register.view.html',
controllerAs: 'vm'
})
.otherwise({redirectTo: '/login'});
$locationProvider.html5Mode(true);
};
})();

57
public/js/services/authentication.service.js Normal file
View File

@@ -0,0 +1,57 @@
(function() {
'use strict';
angular
.module('cloudbudget')
.factory('AuthenticationService', AuthenticationService);
AuthenticationService.$inject = ['$http', '$cookieStore', '$rootScope', 'apiRoutes'];
function AuthenticationService($http, $cookieStore, $rootScope, apiRoutes) {
var service = {};
service.login = login;
service.setCredentials = setCredentials;
service.clearCredentials = clearCredentials;
return service;
function login(username, password ) {
return $http.post( apiRoutes.login, {username: username, password: password})
.then(function(response, status) {
if( status === 200 ) {
return {
success: true,
user: response
};
} else {
return {
success: false,
message: response.message
};
}
}, function(response) {
return {
success: false,
message: 'An error occurs'
};
});
}
function setCredentials(user) {
$rootScope.globals = {
user: user,
token: user.token
}
$http.defaults.headers.common['Authorization'] = 'JWT ' + user.token;
$cookieStore.put('globals', $rootScope.globals);
console.log( $cookieStore.get('globals'));
}
function clearCredentials() {
$rootScope.globals = {};
$http.defaults.headers.common.Authorization = 'JWT ';
$cookieStore.remove('globals');
}
}
})();

53
public/js/services/flash.service.js Normal file
View File

@@ -0,0 +1,53 @@
(function() {
'use strict';
angular
.module('cloudbudget')
.factory('FlashService', FlashService);
FlashService.$inject = ['$rootScope'];
function FlashService($rootScope) {
var service = {};
service.success = success;
service.error = error;
initService();
return service;
function initService() {
$rootScope.$on('$locationChangeStart', function() {
clearFlashMessage();
});
function clearFlashMessage() {
var flash = $rootScope.flash;
if( flash ) {
if( !flash.keepAfterLocationChange ) {
delete $rootScope.flash;
} else {
flash.keepAfterLocationChange = false;
}
}
}
}
function success(message, keepAfterLocationChange) {
$rootScope.flash = {
message: message,
type: 'success',
keepAfterLocationChange: keepAfterLocationChange
};
}
function error(message, keepAfterLocationChange) {
$rootScope.flash = {
message: message,
type: 'error',
keepAfterLocationChange: keepAfterLocationChange
};
}
}
})();

38
public/js/services/user.service.js Normal file
View File

@@ -0,0 +1,38 @@
(function() {
'use strict';
angular
.module('cloudbudget')
.factory('UserService', UserService);
UserService.$inject = ['$http', 'apiRoutes'];
function UserService($http, apiRoutes) {
var service = {};
service.register = register;
service.unregister = unregister;
return service;
function register(user) {
return $http.post( apiRoutes.register, user)
.then(handleSuccess, handleError('Error creating user'));
}
function unregister(id) {
return $http.delete( apiRoutes.unregister + id)
.then(handleSuccess, handleError('Error deleting user'));
}
function handleSuccess(response) {
return {success: true, user: response.data};
}
function handleError(error) {
return function() {
return {success: false, message: error};
};
}
}
})();

32
public/login/login.controller.js Normal file
View File

@@ -0,0 +1,32 @@
(function() {
'use strict';
angular
.module('cloudbudget')
.controller('LoginController', LoginController);
LoginController.$inject = ['$location', 'AuthenticationService', 'FlashService'];
function LoginController($location, AuthenticationService, FlashService) {
var vm = this;
vm.login = login;
(function initController() {
AuthenticationService.clearCredentials();
})();
function login() {
vm.dataLoading = true;
AuthenticationService.login(vm.username, vm.password).then( function(response) {
if( response.success ) {
AuthenticationService.setCredentials(response.user);
$location.path('/');
} else {
FlashService.error(response.message);
vm.dataLoading = false;
}
});
}
}
})();

21
public/login/login.view.html Normal file
View File

@@ -0,0 +1,21 @@
<div class="col-md-6 col-md-offset-3">
<h2>Login</h2>
<div ng-show="vm.error" class="alert alert-danger">{{vm.error}}</div>
<form name="form" ng-submit="vm.login()" role="form">
<div class="form-group" ng-class="{'has-error': form.username.$dirty && form.username.$error.required}">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control" ng-model="vm.username" required />
<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
</div>
<div class="form-group" ng-class="{'has-error': form.password.$dirty && form.password.$error.required}">
<label for="username">Password</label>
<input type="password" name="password" id="password" class="form-control" ng-model="vm.password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
</div>
<div class="form-actions">
<button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Login</button>
<i ng-if="vm.dataLoading" class="fa fa-spinner fa-spin"></i>
<a href="/register" class="btn btn-link">Register</a>
</div>
</form>
</div>

31
public/register/register.controller.js Normal file
View File

@@ -0,0 +1,31 @@
(function(){
'use strict';
angular
.module('cloudbudget')
.controller('RegisterController', RegisterController);
RegisterController.$inject = ['UserService', '$location', '$rootScope', 'AuthenticationService', 'FlashService'];
function RegisterController(UserService, $location, $rootScope, AuthenticationService, FlashService) {
var vm = this;
vm.dataLoading = false;
vm.register = register;
function register() {
vm.dataLoading = true;
UserService.register(vm.user)
.then(function(response) {
if( response.success ) {
AuthenticationService.setCredentials(response.user);
FlashService.success('Registration successful', true);
$location.path('/');
} else {
FlashService.error(response.message);
vm.dataLoading = false;
}
});
}
}
})();

21
public/register/register.view.html Normal file
View File

@@ -0,0 +1,21 @@
<div class="col-md-6 col-md-offset-3">
<h2>Register</h2>
<div ng-show="vm.error" class="alert alert-danger">{{vm.error}}</div>
<form name="form" ng-submit="vm.register()" role="form">
<div class="form-group" ng-class="{'has-error': form.username.$dirty && form.username.$error.required}">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control" ng-model="vm.user.username" required />
<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
</div>
<div class="form-group" ng-class="{'has-error': form.password.$dirty && form.password.$error.required}">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" ng-model="vm.user.password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
</div>
<div class="form-actions">
<button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Register</button>
<img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
<a href="/login" class="btn btn-link">Cancel</a>
</div>
</form>
</div>