Browse Source

users system more implemented

master
nau 7 years ago
parent
commit
4255875f84
6 changed files with 289 additions and 248 deletions
  1. +37
    -1
      controllers/userController.js
  2. +2
    -1
      models/userModel.js
  3. +4
    -0
      server.js
  4. +59
    -10
      webapp/controllers.js
  5. +130
    -126
      webapp/dashboard.html
  6. +57
    -110
      webapp/signup.html

+ 37
- 1
controllers/userController.js

@ -74,7 +74,9 @@ exports.addUser = function(req, res) {
mail: req.body.mail,
avatar: req.body.avatar,
github: req.body.github,
web: req.body.web
web: req.body.web,
projects: req.body.projects,
connected: req.body.connected
});
user.save(function(err, user) {
@ -139,6 +141,12 @@ exports.login = function(req, res) {
expiresIn: '60m'
});
//console.log(user);
//update connected=true
user.connected= true;
user.save(function(err) {
if(err) return res.send(500, err.message);
});
// return the information including token as JSON
res.json({
success: true,
@ -152,3 +160,31 @@ exports.login = function(req, res) {
});
};
exports.logout = function(req, res) {
// find the user
userModel.findOne({
username: req.body.username
}, function(err, user) {
if (err) throw err;
if (!user) {
res.json({ success: false, message: 'Authentication failed. User not found.' });
} else if (user) {
//update connected=true
user.connected= false;
user.save(function(err) {
if(err) return res.send(500, err.message);
});
// return the information including token as JSON
res.json({
success: true,
message: 'logged out'
});
}
});
};

+ 2
- 1
models/userModel.js

@ -10,6 +10,7 @@ var userSchema = new Schema({
avatar: { type: String },
github: { type: String },
web: { type: String },
projects: { type: String }
projects: { type: String },
connected: { type: Boolean }
})
module.exports = mongoose.model('userModel', userSchema);

+ 4
- 0
server.js

@ -90,6 +90,10 @@ apiRoutes.use(function(req, res, next) {
}
}); //fi verificació de token
apiRoutes.route('/logout')
.post(userCtrl.logout);
apiRoutes.route('/users')
.get(userCtrl.findAllUsers);

+ 59
- 10
webapp/controllers.js

@ -6,17 +6,48 @@ angular.module('workApp', ['chart.js'])
$interval,
$http
) {
$scope.currentInclude='login.html';
/* DASHBOARD initialization */
$scope.dashboardInit = function(){
if(localStorage.getItem('owt_token')){// adding token to the headers
$http.defaults.headers.post['X-Access-Token'] = localStorage.getItem('owt_token');
$http.defaults.headers.common['X-Access-Token'] = localStorage.getItem('owt_token');
}
//getting users
$http.get(urlapi + 'users')
.success(function(data, status, headers,config){
console.log(data);
$scope.users=data;
})
.error(function(data, status, headers,config){
console.log('data error');
$scope.$broadcast('scroll.refreshComplete');//refresher stop
})
.then(function(result){
users = result.data;
});
};
/* </DASHBOARD initialization */
$scope.user={};
if(localStorage.getItem("owt_user")){
$scope.user=JSON.parse(localStorage.getItem("owt_user"));
$scope.currentInclude="dashboard.html";
$scope.dashboardInit();
}else{
//window.location="index.html";
$scope.currentInclude="login.html";
}
/* LOGIN SIGNUP */
$scope.showSignup = function(){
$scope.currentInclude="signup.html";
};
$scope.hideSignup = function(){
$scope.currentInclude="login.html";
};
$scope.onBtnSignup = function(){
$scope.user.projects=[];
@ -25,10 +56,11 @@ angular.module('workApp', ['chart.js'])
method: "POST",
data: $scope.user
}).then(function(response) {
window.location="index.html";
$scope.currentInclude="login.html";
},
function(response) {// failed
});
};
$scope.onBtnLogin = function(){
@ -37,26 +69,43 @@ angular.module('workApp', ['chart.js'])
method: "POST",
data: $scope.user
}).then(function(response) {
console.log(response);
if(response.data.success)
{
localStorage.setItem("owt_token", angular.toJson(response.data.token));
localStorage.setItem("owt_token", response.data.token);
localStorage.setItem("owt_user", angular.toJson(response.data.user));
window.location="dashboard.html";
$scope.user=JSON.parse(localStorage.getItem("owt_user"));
$scope.currentInclude="dashboard.html";
$scope.dashboardInit();
var intervalGetData;
intervalGetData = $interval(function(){
$scope.dashboardInit();
}, 10000);
}else{
toastr.error("login error", response.data.message);
toastr.error(response.data.message);
}
},
function(response) {// failed
});
};
$scope.onBtnLogout = function(){
localStorage.removeItem("owt_token");
localStorage.removeItem("owt_user");
//window.location.reload();
$http({
url: urlapi + 'logout',
method: "POST",
data: $scope.user
}).then(function(response) {
localStorage.removeItem("owt_token");
localStorage.removeItem("owt_user");
$scope.currentInclude="login.html";
},
function(response) {// failed
});
};
/* </ LOGIN SIGNUP */
//localStorage.clear();
$scope.working=false;
$scope.projects=[];

+ 130
- 126
webapp/dashboard.html

@ -1,142 +1,146 @@
<nav>
<div class="nav-wrapper blue-grey darken-4">
<a href="#" class="brand-logo">Open Work Time <small>- v0.1</small></a>
<ul id="nav-mobile" class="right">
<li>
<a ng-click="openCode()" target="_blank">
<i class="large material-icons" title="Visit code">code</i>
</a>
</li>
<li>
<a ng-click="deleteStorage()">
<i class="large material-icons" title="Delete storage">info_outline</i>
</a>
</li>
<li>
<a ng-click="onBtnLogout()" title="Logout">
<i class="large material-icons">power_settings_new</i>
</a>
</li>
</ul>
</div>
</nav>
<nav>
<div class="nav-wrapper blue-grey darken-4">
<a href="#" class="brand-logo">Open Work Time <small>- v0.1</small></a>
<ul id="nav-mobile" class="right">
<li>
<a ng-click="openCode()" target="_blank">
<i class="large material-icons" title="Visit code">code</i>
</a>
</li>
<li>
<a ng-click="deleteStorage()">
<i class="large material-icons" title="Delete storage">info_outline</i>
</a>
</li>
<li>
<a ng-click="onBtnLogout()" title="Logout">
<i class="large material-icons">power_settings_new</i>
</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col s12 m4 l2 blue-grey darken-3 white-text">
<!-- Grey navigation panel -->
<br>
<div class="row">
<div class="col s12 m4 l2 blue-grey darken-3 white-text">
<!-- Grey navigation panel -->
<br>
<div class="row">
<div class="col s4">
<img ng-src="img/avatars/{{user.avatar}}.png" alt="" class="circle responsive-img blue-grey lighten-5">
</div>
<div class="col s8">
<h5>{{user.username}}</h5>
</div>
</div>
<p>
{{user.description}}
</p>
<p>
<a ng-href="http://{{user.github}}" target="_blank">{{user.github}}</a>
</p>
<p>
<a ng-href="http://{{user.web}}" target="_blank">{{user.web}}</a>
</p>
<p>
Total worked time: {{user.totalWorkedTime | secondsToDateTime | date:'HH:mm'}}h
</p>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<div class="col s4">
<img ng-src="img/avatars/{{user.avatar}}.png" alt="" class="circle responsive-img blue-grey lighten-5">
</div>
<div class="col s8">
<h5>{{user.username}}</h5>
</div>
</div>
<p>
{{user.description}}
</p>
<p>
<a ng-href="http://{{user.github}}" target="_blank">{{user.github}}</a>
</p>
<p>
<a ng-href="http://{{user.web}}" target="_blank">{{user.web}}</a>
</p>
<!--<p>
Total worked time: {{user.totalWorkedTime | secondsToDateTime | date:'HH:mm'}}h
</p>-->
<ul class="collection">
<li ng-repeat="user in users" class="collection-item avatar blue-grey darken-3">
<img ng-src="img/avatars/{{user.avatar}}.png" class="circle">
<span class="title">{{user.username}}</span>
<span ng-show="user.connected" class="new badge" data-badge-caption="online"></span>
<p>{{user.description}}</p>
</li>
</ul>
</div>
<div class="col s12 m8 l10">
<div class="row">
<div class="card white col s12 m12 l5">
<div class="card-content">
<span class="card-title">Projects</span>
<div class="collection">
<a href="#!" ng-click="projectSelect($index)" ng-repeat="project in projects" class="collection-item avatar white">
<div class="right">
<div class="waves-effect waves-light btn-floating indigo lighten-2" ng-click="editProject($index)">
<i class="material-icons"><img src="img/edit.png" class="o_trash_icon" /></i>
</div>
<div class="waves-effect waves-light btn-floating deep-orange lighten-2" ng-click="removeProject($index)">
<i class="material-icons"><img src="img/trash.png" class="o_trash_icon" /></i>
</div>
</div>
<img ng-src="img/{{project.icon}}.png" class="circle"/>
<span class="title">{{project.title}}</span>
<p class="grey-text">{{project.totaltime | secondsToDateTime | date:'HH:mm:ss'}}</p>
</a>
</div>
</div>
<div class="card-action" ng-show="!editingProject">
<div class="input-field col s6">
<input ng-model="newproject.title" id="newprojectname" type="text" class="validate">
<label for="newprojectname">New project name</label>
</div>
<div class="input-field col s6">
<input ng-model="newproject.icon" id="icon" type="text" class="validate">
<label for="icon">icon</label>
</div>
<a ng-click="addNewProject()" class="waves-effect waves-light btn blue-grey lighten-1 right">Add new project</a>
</div>
<div class="card-action" ng-show="editingProject">
<div class="input-field col s6">
<input ng-model="editingProject.title" id="newprojectname" value=" " type="text" class="validate">
<label for="newprojectname">New project name</label>
</div>
<div class="input-field col s6">
<input ng-model="editingProject.icon" id="icon" value=" " type="text" class="validate">
<label for="icon">icon</label>
<div class="col s12 m8 l10">
<div class="row">
<div class="card white col s12 m12 l5">
<div class="card-content">
<span class="card-title">Projects</span>
<div class="collection">
<a href="#!" ng-click="projectSelect($index)" ng-repeat="project in projects" class="collection-item avatar white">
<div class="right">
<div class="waves-effect waves-light btn-floating indigo lighten-2" ng-click="editProject($index)">
<i class="material-icons"><img src="img/edit.png" class="o_trash_icon" /></i>
</div>
<div class="waves-effect waves-light btn-floating deep-orange lighten-2" ng-click="removeProject($index)">
<i class="material-icons"><img src="img/trash.png" class="o_trash_icon" /></i>
</div>
</div>
<a ng-click="cancelEditProject()" class="waves-effect waves-light btn red lighten-2">Cancel</a>
<a ng-click="updateProject()" class="waves-effect waves-light btn blue lighten-2 right">Update project</a>
</div>
<img ng-src="img/{{project.icon}}.png" class="circle"/>
<span class="title">{{project.title}}</span>
<p class="grey-text">{{project.totaltime | secondsToDateTime | date:'HH:mm:ss'}}</p>
</a>
</div>
</div>
<div class="card-action" ng-show="!editingProject">
<div class="input-field col s6">
<input ng-model="newproject.title" id="newprojectname" type="text" class="validate">
<label for="newprojectname">New project name</label>
</div>
<div class="input-field col s6">
<input ng-model="newproject.icon" id="icon" type="text" class="validate">
<label for="icon">icon</label>
</div>
<a ng-click="addNewProject()" class="waves-effect waves-light btn blue-grey lighten-1 right">Add new project</a>
</div>
<div class="card-action" ng-show="editingProject">
<div class="input-field col s6">
<input ng-model="editingProject.title" id="newprojectname" value=" " type="text" class="validate">
<label for="newprojectname">New project name</label>
</div>
<div class="input-field col s6">
<input ng-model="editingProject.icon" id="icon" value=" " type="text" class="validate">
<label for="icon">icon</label>
</div>
<a ng-click="cancelEditProject()" class="waves-effect waves-light btn red lighten-2">Cancel</a>
<a ng-click="updateProject()" class="waves-effect waves-light btn blue lighten-2 right">Update project</a>
</div>
</div>
<div ng-show="currentproject.title" class="card white col s12 m12 l7">
<div class="card-content">
<span class="card-title">
<img ng-src="img/{{currentproject.icon}}.png" class="o_project_title_img"/>
{{currentproject.title}}
</span>
<p>
Total time: {{currentproject.totaltime | secondsToDateTime | date:'HH:mm:ss'}}
</p>
<p>
Current strike time: <b>{{currentStrike | secondsToDateTime | date:'HH:mm:ss'}}</b>
</p>
<div ng-show="currentproject.title" class="card white col s12 m12 l7">
<div class="card-content">
<span class="card-title">
<img ng-src="img/{{currentproject.icon}}.png" class="o_project_title_img"/>
{{currentproject.title}}
</span>
<p>
Total time: {{currentproject.totaltime | secondsToDateTime | date:'HH:mm:ss'}}
</p>
<p>
Current strike time: <b>{{currentStrike | secondsToDateTime | date:'HH:mm:ss'}}</b>
</p>
</div>
<div class="card-action">
<a ng-click="btnWork()" ng-show="!working" class="waves-effect waves-light btn green lighten-2">Work!</a>
<a ng-click="btnStop()" ng-show="working" class="waves-effect waves-light btn red lighten-2">Stop!</a>
</div>
<div class="card-action">
<a ng-click="btnWork()" ng-show="!working" class="waves-effect waves-light btn green lighten-2">Work!</a>
<a ng-click="btnStop()" ng-show="working" class="waves-effect waves-light btn red lighten-2">Stop!</a>
<!--<a class="waves-effect waves-light btn deep-orange lighten-2">Stop working!</a>-->
</div>
<div class="divider"></div>
<div class="card-content">
<!-- here the charts -->
<canvas id="bar" class="chart chart-bar"
chart-data="currentproject.chart.data" chart-labels="currentproject.chart.labels" chart-series="currentproject.chart.series">
</canvas>
<!--<a class="waves-effect waves-light btn deep-orange lighten-2">Stop working!</a>-->
</div>
<div class="divider"></div>
<div class="card-content">
<!-- here the charts -->
<canvas id="bar" class="chart chart-bar"
chart-data="currentproject.chart.data" chart-labels="currentproject.chart.labels" chart-series="currentproject.chart.series">
</canvas>
</div>
</div>
<div ng-show="!currentproject.title" class="card white col s12 m12 l7" style="height: 200px;">
<span class="card-title">
Select a project
</span>
</div>
</div>
</div>
<div ng-show="!currentproject.title" class="card white col s12 m12 l7" style="height: 200px;">
<span class="card-title">
Select a project
</span>
</div>
</div><!-- </row -->
</div>
</div>
</div><!-- </row -->
</div>
</div>

+ 57
- 110
webapp/signup.html

@ -1,115 +1,62 @@
<!DOCTYPE html>
<html ng-app="workApp">
<head>
<!--Import Google Icon Font-->
<link href="fonts/icons.css" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="own.css"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Open Work Time - online version</title>
<style>
body{
background: #ffffff; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #ffffff , #37474f); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #ffffff , #37474f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
</style>
</head>
<body ng-controller="loginController as login" class="grey lighten-2">
<div class="row">
<div class="col s0 m2 l3">
<div class="row">
<div class="col s0 m2 l3">
</div>
<div class="col s12 m8 l6">
<div class="card white">
<div class="card-content">
<span class="card-title">Signup</span>
<div class="row">
<div class="input-field col s12">
<input ng-model="user.username" id="username" type="text" class="validate">
<label for="username">Username</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input ng-model="user.password" id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
<div class="input-field col s6">
<input ng-model="user.repassword" id="repassword" type="password" class="validate">
<label for="repassword">Confirm password</label>
</div>
</div>
<div class="col s12 m8 l6">
<div class="card white">
<div class="card-content">
<span class="card-title">Signup</span>
<div class="row">
<div class="input-field col s12">
<input ng-model="user.username" id="username" type="text" class="validate">
<label for="username">Username</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input ng-model="user.password" id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
<div class="input-field col s6">
<input ng-model="user.repassword" id="repassword" type="password" class="validate">
<label for="repassword">Confirm password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input ng-model="user.description" id="description" type="text" class="validate">
<label for="description">Description</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input ng-model="user.mail" id="mail" type="email" class="validate">
<label for="mail">Mail</label>
</div>
<div class="input-field col s6">
<input ng-model="user.avatar" id="avatar" type="text" class="validate">
<label for="avatar">Avatar</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input ng-model="user.github" id="github" type="text" class="validate">
<label for="github">Github</label>
</div>
<div class="input-field col s6">
<input ng-model="user.web" id="web" type="text" class="validate">
<label for="web">Web</label>
</div>
</div>
</div>
<div class="card-action">
<a href="index.html" class="waves-effect waves-light btn red lighten-2">
<i class="material-icons left">not_interested</i>Cancel
</a>
<a ng-click="onBtnSignup()" class="waves-effect waves-light btn green lighten-2 right">
<i class="material-icons left">done</i>Signup
</a>
</div>
<div class="row">
<div class="input-field col s12">
<input ng-model="user.description" id="description" type="text" class="validate">
<label for="description">Description</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input ng-model="user.mail" id="mail" type="email" class="validate">
<label for="mail">Mail</label>
</div>
<div class="input-field col s6">
<input ng-model="user.avatar" id="avatar" type="text" class="validate">
<label for="avatar">Avatar</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input ng-model="user.github" id="github" type="text" class="validate">
<label for="github">Github</label>
</div>
<div class="input-field col s6">
<input ng-model="user.web" id="web" type="text" class="validate">
<label for="web">Web</label>
</div>
</div>
</div>
<!-- ANGULAR -->
<script src="libraries/angular.min.js"></script>
<!-- ANGULAR CHART JS -->
<script src="node_modules/chart.js/dist/Chart.min.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="controllers.js"></script>
<script src="libraries/toastr.js"></script>
<link type="text/css" rel="stylesheet" href="libraries/toastr.css"/>
</body>
</html>
<div class="card-action">
<a ng-click="hideSignup()" class="waves-effect waves-light btn red lighten-2">
<i class="material-icons left">not_interested</i>Cancel
</a>
<a ng-click="onBtnSignup()" class="waves-effect waves-light btn green lighten-2 right">
<i class="material-icons left">done</i>Signup
</a>
</div>
</div>
</div>
</div>

Loading…
Cancel
Save