API User Auth

lecaoquochung · Jul 26, 2016 · c847d08 · c847d08
1 parent 8f734cd
commit c847d08
Show file tree

Hide file tree

Showing 10 changed files with 186 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -355,5 +355,6 @@ npm install sha1 --save
 
 
 ### User authentication with sessions
+- Update frontend user login (app.js, template)
 
 ### User profile
diff --git a/backend/API.js b/backend/API.js
@@ -39,37 +39,73 @@ var validEmail = function(value) {
 };
 
 // router api/user with add method
-Router.add('api/user', function(req, res) {
+Router
+.add('api/user/login', function(req, res) {
+  processPOSTRequest(req, function(data) {
+    if(!data.email || data.email === '' || !validEmail(data.email)) {
+      error('Invalid or missing email.', res);
+    } else if(!data.password || data.password === '') {
+      error('Please enter your password.', res);
+    } else {
+      getDatabaseConnection(function(db) {
+        var collection = db.collection('users');
+        collection.find({
+          email: data.email,
+          password: sha1(data.password)
+        }).toArray(function(err, result) {
+          if(result.length === 0) {
+            error('Wrong email or password', res);
+          } else {
+            var user = result[0];
+            delete user._id; // remove when return
+            delete user.password; // remote when return
+            req.session.user = user; // store to session
+            response({
+              success: 'OK',
+              user: user
+            }, res);
+          }
+        });
+      });
+    }
+  });
+})
+.add('api/user', function(req, res) {
   switch(req.method) {
     case 'GET':
-    // ...
+      // ...
+      if(req.session && req.session.user) {
+        response(req.session.user, res);
+      } else {
+        response({}, res);
+      }
     break;
     case 'PUT':
-    // ...
+      // ...
     break;
     case 'POST':
-    processPOSTRequest(req, function(data) {
-      if(!data.firstName || data.firstName === '') {
-        error('Please fill your first name.', res);
-      } else if(!data.lastName || data.lastName === '') {
-        error('Please fill your last name.', res);
-      } else if(!data.email || data.email === '' ||
-        !validEmail(data.email)) {
-          error('Invalid or missing email.', res);
-      } else if(!data.password || data.password === '') {
-        error('Please fill your password.', res);
-      } else {
-        getDatabaseConnection(function(db) {
-          var collection = db.collection('users');
-          data.password = sha1(data.password);
-          collection.insert(data, function(err, docs) {
-            response({
-              success: 'OK'
-            }, res);
+      processPOSTRequest(req, function(data) {
+        if(!data.firstName || data.firstName === '') {
+          error('Please fill your first name.', res);
+        } else if(!data.lastName || data.lastName === '') {
+          error('Please fill your last name.', res);
+        } else if(!data.email || data.email === '' ||
+          !validEmail(data.email)) {
+            error('Invalid or missing email.', res);
+        } else if(!data.password || data.password === '') {
+          error('Please fill your password.', res);
+        } else {
+          getDatabaseConnection(function(db) {
+            var collection = db.collection('users');
+            data.password = sha1(data.password);
+            collection.insert(data, function(err, docs) {
+              response({
+                success: 'OK'
+              }, res);
+            });
           });
-        });
-      }
-    });
+        }
+      });
     break;
     case 'DELETE':
     // ...

diff --git a/frontend/js/app.js b/frontend/js/app.js
@@ -16,6 +16,9 @@ var showPage = function(newPage) {
 
 window.onload = function() {
   userModel = new UserModel();
+  userModel.fetch(function(error, result) {
+    // ... router setting
+  });
   body = document.querySelector('body');
   Router
   .add('home', function() {
@@ -28,3 +31,9 @@ window.onload = function() {
   .listen()
   .check();
 }
+
+Router
+.add('login', function() {
+  var p = new Login();
+  showPage(p);
+})
diff --git a/frontend/js/controllers/Login.js b/frontend/js/controllers/Login.js
@@ -0,0 +1,23 @@
+module.exports = Ractive.extend({
+  template: require('../../tpl/login'),
+  components: {
+    navigation: require('../views/Navigation'),
+    appfooter: require('../views/Footer')
+  },
+  onrender: function() {
+    var self = this;
+    this.observe('email', userModel.setter('email'));
+    this.observe('password', userModel.setter('password'));
+    this.on('login', function() {
+      userModel.login(function(error, result) {
+        if(error) {
+          self.set('error', error.error);
+        } else {
+          self.set('error', false);
+          // redirecting the user to the home page
+          window.location.href = '/';
+        }
+      });
+    });
+  }
+});
diff --git a/frontend/js/models/User.js b/frontend/js/models/User.js
@@ -1,6 +1,32 @@
+var ajax = require('../lib/Ajax');
 var Base = require('./Base');
+
 module.exports = Base.extend({
   data: {
     url: '/api/user'
+  },
+  login: function(callback) {
+    var self = this;
+    ajax.request({
+      url: this.get('url') + '/login',
+      method: 'POST',
+      data: {
+        email: this.get('email'),
+        password: this.get('password')
+      },
+      json: true
+    })
+    .done(function(result) {
+      callback(null, result);
+    })
+    .fail(function(xhr) {
+      callback(JSON.parse(xhr.responseText));
+    });
   }
 });
+
+// isLogged method
+isLogged: function() {
+  return this.get('value.firstName') &&
+  this.get('value.lastName');
+}
diff --git a/frontend/js/views/navigation.js b/frontend/js/views/navigation.js
@@ -1,4 +1,7 @@
 // views/navigation.js
 module.exports = Ractive.extend({
- template: require('../../tpl/navigation')
+  template: require('../../tpl/navigation'),
+  onconstruct: function() {
+    this.data.isLogged = userModel.isLogged();
+  }
 });
diff --git a/frontend/tpl/login.html b/frontend/tpl/login.html
@@ -0,0 +1,21 @@
+<header>
+  <navigation></navigation>
+  <div class="hero">
+    <h1>Login</h1>
+  </div>
+</header>
+<form>
+  {{#if error && error != ''}}
+    <div class="error">{{error}}</div>
+  {{/if}}
+  {{#if success && success != ''}}
+    <div class="success">{{{success}}}</div>
+  {{else}}
+    <label for="email">Email</label>
+    <input type="text" id="email" value="{{email}}" />
+    <label for="password">Password</label>
+    <input type="password" id="password" value="{{password}}" />
+    <input type="button" value="login" on-click="login" />
+  {{/if}}
+</form>
+<appfooter />
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
+    "cookie-session": "^2.0.0-alpha.1",
     "grunt": "^1.0.1",
     "grunt-contrib-concat": "^1.0.1",
     "grunt-contrib-uglify": "^2.0.0",

diff --git a/server.js b/server.js
@@ -5,9 +5,23 @@ var http = require('http');
 // var file = require('./file.js');
 var Assets = require('./backend/Assets');
 
-// process
-http.createServer(function (req,res){
-  res.writeHead(200, {'Content-Type': 'text/plain'});
-  res.end('Hello World\n')
-}).listen(9000,'127.0.0.1');
-console.log('Server is running at http://127.0.0.1:9000');
+// router
+Router
+.add('static', Assets)
+.add('api', API)
+.add(Default);
+var session = require('cookie-session');
+var checkSession = function(req, res) {
+  session({
+    keys: ['nodejs-example']
+  })(req, res, function() {
+    process(req, res);
+  });
+}
+
+var process = function(req, res) {
+ Router.check(req.url, [req, res]);
+}
+
+var app = http.createServer(checkSession).listen(port,'127.0.0.1');
+console.log("Listening on 127.0.0.1:" + port);
diff --git a/tpl/login.html b/tpl/login.html
@@ -0,0 +1,21 @@
+<header>
+  <navigation></navigation>
+  <div class="hero">
+    <h1>Login</h1>
+  </div>
+</header>
+<form>
+  {{#if error && error != ''}}
+    <div class="error">{{error}}</div>
+  {{/if}}
+  {{#if success && success != ''}}
+    <div class="success">{{{success}}}</div>
+  {{else}}
+    <label for="email">Email</label>
+    <input type="text" id="email" value="{{email}}" />
+    <label for="password">Password</label>
+    <input type="password" id="password" value="{{password}}" />
+    <input type="button" value="login" on-click="login" />
+  {{/if}}
+</form>
+<appfooter />