signup and login system added, making the webapp online
nau idoctnef@openmailbox.org
Wed, 07 Sep 2016 19:23:48 +0200
9 files changed,
377 insertions(+),
178 deletions(-)
M
controllers/userController.js
→
controllers/userController.js
@@ -71,10 +71,10 @@ var user = new userModel({
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 @@ var token = jwt.sign(user, app.get('superSecret'), {
//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 }); }
M
models/userModel.js
→
models/userModel.js
@@ -6,9 +6,10 @@ var userSchema = new Schema({
username: { type: String }, password: { type: String }, description: { type: String }, + mail: { type: String }, avatar: { type: String }, - mail: { type: String }, - phone: { type: String }, - telegram: { type: String } + github: { type: String }, + web: { type: String }, + projects: { type: String } }) module.exports = mongoose.model('userModel', userSchema);
M
server.js
→
server.js
@@ -29,8 +29,8 @@ // Import Models and controllers
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 @@ // API routes ------------------------------------------------------
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 @@ });
} }); //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 -------------------------------------
M
webapp/controllers.js
→
webapp/controllers.js
@@ -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=[];@@ -124,6 +170,7 @@ ]
};*/ }) + .filter('secondsToDateTime', [function() { return function(seconds) {
A
webapp/dashboard.html
@@ -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>
M
webapp/index.html
→
webapp/index.html
@@ -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> - - - <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> + <ng-include src="currentInclude"></ng-include> - <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 @@
<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>
A
webapp/login.html
@@ -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>
A
webapp/signup.html
@@ -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>