arnaucube/openworktime
1
0
Fork 0
mirror of https://github.com/arnaucube/openworktime.git synced 2026-02-06 19:26:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

signup and login system added, making the webapp online

Browse Source
This commit is contained in:
nau
2016-09-07 19:23:48 +02:00
parent 244d032588
commit 4602ace2bc
9 changed files with 377 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config.js
View File

@@ -3,7 +3,7 @@ module.exports = {
/*'secret': process.env.SECRET,
'database': process.env.MONGO_DSN,*/
'secret': 'secretfortoken',
'database': 'mongodb://localhost/comunalcar',
'database': 'mongodb://localhost/openworktime',
"port" : process.env.PORT || 3000
};

10
controllers/userController.js
View File

@@ -71,10 +71,10 @@ exports.addUser = function(req, res) {
username: req.body.username,
password: req.body.password,
description: req.body.description,
avatar: req.body.avatar,
mail: req.body.mail,
phone: req.body.phone,
telegram: req.body.telegram
avatar: req.body.avatar,
github: req.body.github,
web: req.body.web
});
user.save(function(err, user) {
@@ -138,13 +138,13 @@ exports.login = function(req, res) {
//expiresInMinutes: 1440 // expires in 24 hours
expiresIn: '60m'
});
console.log(user);
//console.log(user);
// return the information including token as JSON
res.json({
success: true,
message: 'Enjoy your token!',
token: token,
avatar: user.avatar
user: user
});
}

7
models/userModel.js
View File

@@ -6,9 +6,10 @@ var userSchema = new Schema({
username: { type: String },
password: { type: String },
description: { type: String },
avatar: { type: String },
mail: { type: String },
phone: { type: String },
telegram: { type: String }
avatar: { type: String },
github: { type: String },
web: { type: String },
projects: { type: String }
})
module.exports = mongoose.model('userModel', userSchema);

45
server.js
View File

@@ -29,8 +29,8 @@ app.use(morgan('dev'));
var userMdl = require('./models/userModel')(app, mongoose);
var userCtrl = require('./controllers/userController');
var travelMdl = require('./models/travelModel')(app, mongoose);
var travelCtrl = require('./controllers/travelController');
/*var projectMdl = require('./models/projectModel')(app, mongoose);
var projectCtrl = require('./controllers/projectController');*/
/*// Example Route
var router = express.Router();
@@ -53,24 +53,10 @@ app.use(function(req, res, next) {
var apiRoutes = express.Router();
apiRoutes.route('/users')
.get(userCtrl.findAllUsers)
.post(userCtrl.addUser);
apiRoutes.route('/users/:id')
.get(userCtrl.findById);
apiRoutes.route('/users/byusername/:username')
.get(userCtrl.findUserByUsername);
apiRoutes.route('/travels/user/:username')
.get(travelCtrl.findAllTravelsFromUsername);
apiRoutes.route('/auth')
.post(userCtrl.login);
apiRoutes.route('/travels')
.get(travelCtrl.findAllTravels);
apiRoutes.route('/travels/:id')
.get(travelCtrl.findById)
// OJU AQUÏ TREC la verificació de token temporalment, per fer les proves des de l'app
// route middleware to verify a token
apiRoutes.use(function(req, res, next) {
@@ -104,18 +90,35 @@ apiRoutes.use(function(req, res, next) {
}
}); //fi verificació de token
apiRoutes.route('/users')
.get(userCtrl.findAllUsers);
apiRoutes.route('/users/:id')
.get(userCtrl.findById);
apiRoutes.route('/users/byusername/:username')
.get(userCtrl.findUserByUsername);
/*apiRoutes.route('/projects/user/:username')
.get(projectCtrl.findAllprojectsFromUsername);
apiRoutes.route('/projects')
.get(projectCtrl.findAllprojects);
apiRoutes.route('/projects/:id')
.get(projectCtrl.findById);
apiRoutes.route('/users/:id')
.put(userCtrl.updateUser)
.delete(userCtrl.deleteUser);
apiRoutes.route('/travels')
.post(travelCtrl.addTravel);
apiRoutes.route('/projects')
.post(projectCtrl.addproject);
apiRoutes.route('/travels/:id')
.put(travelCtrl.updateTravel)
.delete(travelCtrl.deleteTravel);
apiRoutes.route('/projects/:id')
.put(projectCtrl.updateproject)
.delete(projectCtrl.deleteproject);*/
app.use('/api', apiRoutes);
// end of API routes -------------------------------------

61
webapp/controllers.js
View File

@@ -1,16 +1,62 @@
var urlapi = "http://localhost:3000/api/";
angular.module('workApp', ['chart.js'])
.controller('workController', function(
$scope,
$interval
$interval,
$http
) {
$scope.user={
username: "idoctnef",
avatar: "toucan",
github: ["github.com/idoctnef", "https://github.com/idoctnef"],
taiga: ["project page", "https://projects.primustech.io"],
totalWorkedTime: 4520
$scope.currentInclude='login.html';
if(localStorage.getItem("owt_user")){
$scope.user=JSON.parse(localStorage.getItem("owt_user"));
$scope.currentInclude="dashboard.html";
}else{
//window.location="index.html";
}
/* LOGIN SIGNUP */
$scope.showSignup = function(){
};
$scope.onBtnSignup = function(){
$scope.user.projects=[];
$http({
url: urlapi + 'users',
method: "POST",
data: $scope.user
}).then(function(response) {
window.location="index.html";
},
function(response) {// failed
});
};
$scope.onBtnLogin = function(){
$http({
url: urlapi + 'auth',
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_user", angular.toJson(response.data.user));
window.location="dashboard.html";
}else{
toastr.error("login error", response.data.message);
}
},
function(response) {// failed
});
};
$scope.onBtnLogout = function(){
localStorage.removeItem("owt_token");
localStorage.removeItem("owt_user");
//window.location.reload();
};
/* </ LOGIN SIGNUP */
//localStorage.clear();
$scope.working=false;
$scope.projects=[];
@@ -125,6 +171,7 @@ angular.module('workApp', ['chart.js'])
})
.filter('secondsToDateTime', [function() {
return function(seconds) {
return new Date(2016, 0, 1).setSeconds(seconds);

142
webapp/dashboard.html Normal file
View File

@@ -0,0 +1,142 @@
<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 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>
<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>
<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>
<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>
</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>

142
webapp/index.html
View File

@@ -21,147 +21,10 @@
<body ng-controller="workController as work" class="grey lighten-2">
<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="saveStorage()" title="Save all to storage">
<i class="large material-icons">perm_identity</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 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>
<a ng-href="{{user.github[1]}}" target="_blank">{{user.github[0]}}</a>
</p>
<p>
<a ng-href="{{user.taiga[1]}}" target="_blank">{{user.taiga[0]}}</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>
<ng-include src="currentInclude"></ng-include>
<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>
<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>
<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>
</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>
<!-- ELECTRON
Insert this line above script imports
Works for both browser and electron with the same code -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<!-- ANGULAR -->
<script src="libraries/angular.min.js"></script>
@@ -180,9 +43,6 @@ Works for both browser and electron with the same code -->
<script src="libraries/toastr.js"></script>
<link type="text/css" rel="stylesheet" href="libraries/toastr.css"/>
<!-- ELECTRON
Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>
</body>

31
webapp/login.html Normal file
View File

@@ -0,0 +1,31 @@
<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">Login</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 s12">
<input ng-model="user.password" id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
</div>
<div class="card-action">
<a ng-click="showSignup()" class="waves-effect waves-light btn green lighten-2">
<i class="material-icons left">perm_identity</i>Signup
</a>
<a ng-click="onBtnLogin()" class="waves-effect waves-light btn blue lighten-2 right">
<i class="material-icons left">input</i>Login
</a>
</div>
</div>
</div>
</div>

115
webapp/signup.html Normal file
View File

@@ -0,0 +1,115 @@
<!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>
<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>
</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>