signup and login system added, making the webapp online

config.js

@@ -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
 
 };

controllers/userController.js

@@ -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
         });
       }
 

models/userModel.js

@@ -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);

server.js

@@ -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 -------------------------------------

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=[];
@@ -125,6 +171,7 @@ angular.module('workApp', ['chart.js'])
 
   })
 
+
   .filter('secondsToDateTime', [function() {
     return function(seconds) {
         return new Date(2016, 0, 1).setSeconds(seconds);

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>

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>
-
-                    <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>
+        <ng-include src="currentInclude"></ng-include>
+
+
+
 
     <!-- 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>

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>

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>