adding signup page

GYMApp/GYMApp/app.js

@@ -5,11 +5,18 @@ var logger = require('morgan');
 var cookieParser = require('cookie-parser');
 var bodyParser = require('body-parser');  
 var expressHbs = require('express-handlebars');
+var session = require('express-session');
+var passport = require('passport');
+var flash = require('connect-flash');
+var validator = require('express-validator');
+
+
 
 var index = require('./routes/index');
 var userRoutes = require('./routes/user');
 
 var User = require('./models/user');
+var Profile = require('./models/profile');
 
 var app = express();
 var mongoose = require('mongoose');  
@@ -36,7 +43,11 @@ app.use(logger('dev'));
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: false }));
 app.use(cookieParser());
+app.use(session({secret: 'mysupersecret', resave: false, saveUninitialized: false}));
 app.use(express.static(path.join(__dirname, 'public')));
+app.use(flash());
+app.use(passport.initialize());
+app.use(passport.session());
 
 app.use('/user', userRoutes);
 app.use('/', index);

GYMApp/GYMApp/models/user.js

@@ -1,5 +1,6 @@
 var mongoose = require('mongoose');
 var Schema = mongoose.Schema;
+var bcrypt = require('bcrypt-nodejs');
 
 var nellyGymSchema = new Schema({
     machine: {type: String, required: true},
@@ -10,3 +11,4 @@ var nellyGymSchema = new Schema({
 });
 
 module.exports = mongoose.model('User', nellyGymSchema);
+

GYMApp/GYMApp/package.json

@@ -6,16 +6,22 @@
     "start": "node ./bin/www"
   },
   "dependencies": {
+    "bcrypt-nodejs": "0.0.3",
     "body-parser": "^1.17.1",
+    "connect-flash": "^0.1.1",
     "cookie-parser": "^1.4.3",
+    "csurf": "^1.9.0",
     "debug": "~2.6.0",
     "express": "^4.15.2",
     "express-handlebars": "^3.0.0",
+    "express-session": "^1.15.2",
+    "express-validator": "^3.2.0",
     "formidable": "^1.1.1",
     "handlebars": "^4.0.6",
     "hbs": "^4.0.1",
     "mongoose": "^4.8.4",
     "morgan": "^1.8.1",
+    "passport": "^0.3.2",
     "serve-favicon": "^2.4.2",
     "util": "^0.10.3"
   }

GYMApp/GYMApp/public/stylesheets/style.css

@@ -2,6 +2,7 @@
 body {
   padding: 50px;
   font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+    background:url('http://images.shape.mdpcdn.com/sites/shape.com/files/styles/slide/public/workout/african-america-woman-doing-pushup_0.jpg');
 }
 
 a {
@@ -104,3 +105,49 @@ a {
 .login-help{
   font-size: 12px;
 }
+
+#login-dp{
+    min-width: 250px;
+    padding: 14px 14px 0;
+    overflow:hidden;
+    background-color:rgba(255,255,255,.8);
+}
+#login-dp .help-block{
+    font-size:12px    
+}
+#login-dp .bottom{
+    background-color:rgba(255,255,255,.8);
+    border-top:1px solid #ddd;
+    clear:both;
+    padding:14px;
+}
+#login-dp .social-buttons{
+    margin:12px 0    
+}
+#login-dp .social-buttons a{
+    width: 49%;
+}
+#login-dp .form-group {
+    margin-bottom: 10px;
+}
+.btn-fb{
+    color: #fff;
+    background-color:#3b5998;
+}
+.btn-fb:hover{
+    color: #fff;
+    background-color:#496ebc 
+}
+.btn-tw{
+    color: #fff;
+    background-color:#55acee;
+}
+.btn-tw:hover{
+    color: #fff;
+    background-color:#59b5fa;
+}
+@media(max-width:768px){
+    #login-dp{
+        background-color: inherit;
+        color: #fff;
+    }

GYMApp/GYMApp/routes/index.js

@@ -3,12 +3,24 @@ var router = express.Router();
 var User = require('../models/user');
 var formidable = require("formidable");
 var util = require('util');
+var csrf = require('csurf');
+var passport = require('passport');
+
+var csrfProtection = csrf();
+router.use(csrfProtection);
 
 /* GET home page. */
 router.get('/', function(req, res, next) {
-  res.render('index', { title: 'Nelisa Kiboti GYM Tracking System' });
+  var messages = req.flash('error');
+  res.render('index', {csrfToken: req.csrfToken(), messages: messages, hasErrors: messages.length > 0});
 });
 
+router.post('/signIn', passport.authenticate('local.signIn', {
+    successRedirect: '/user/profile',
+    failureRedirect: '/user/signIn',
+    failureFlash: true
+}));
+
 /*
 router.post('/user/track', function(req,res, next){
  var fields = [];

GYMApp/GYMApp/routes/user.js

@@ -1,11 +1,11 @@
 var express = require('express');
 var router = express.Router();
 var User = require('../models/user');
-//var csrf = require('csurf');
+var csrf = require('csurf');
-//var passport = require('passport');
+var passport = require('passport');
 
-//var csrfProtection = csrf();
+var csrfProtection = csrf();
-//router.use(csrfProtection);
+router.use(csrfProtection);
 
 router.get('/profile', function (req, res, next) {
     User.find(function(err,docs){
@@ -20,8 +20,15 @@ router.get('/track', function (req, res, next) {
         });
 
 router.get('/signUp', function (req, res, next) {
-            res.render('user/signUp');
+            var messages = req.flash('error');
+            res.render('user/signUp', {csrfToken: req.csrfToken(), messages: messages, hasErrors: messages.length > 0});
         });
+
+router.post('/signup', passport.authenticate('local.signup', {
+    successRedirect: '/user/profile',
+    failureRedirect: '/user/signup',
+    failureFlash: true
+}));
 //router.post('/user/track', function(req,res, next){
 // console.log("POSTING ....");
 //  }); 

GYMApp/GYMApp/views/index.hbs

@@ -1,14 +1,4 @@
-<a href="#" data-toggle="modal" data-target="#login-modal">Login</a>
+    <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
-<div class="media">
-  <div class="media-left">
-    <a href="#">
-      <img class="media-object" src="http://images.shape.mdpcdn.com/sites/shape.com/files/styles/slide/public/workout/african-america-woman-doing-pushup_0.jpg" alt="Work Out">
-    </a>
-  </div>
-    
-   
-
-<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
     	  <div class="modal-dialog">
 				<div class="loginmodal-container">
 					<h1>Login to Your Account</h1><br>
@@ -23,4 +13,21 @@
 				  </div>
 				</div>
 			</div>
-		  </div>
+    </div>
+
+    <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
+    	  <div class="modal-dialog">
+				<div class="loginmodal-container">
+					<h1>Login to Your Account</h1><br>
+				  <form>
+					<input type="text" name="user" placeholder="Username">
+					<input type="password" name="pass" placeholder="Password">
+					<input type="submit" name="login" class="login loginmodal-submit" value="Login">
+				  </form>
+					
+				  <div class="login-help">
+					<a href="/user/signUp">Register</a> - <a href="#">Forgot Password</a>
+				  </div>
+				</div>
+			</div>
+    </div>

GYMApp/GYMApp/views/partials/header.hbs

@@ -6,7 +6,49 @@
     <a class="navbar-brand" href="/user/track"><span class="glyphicon glyphicon glyphicon-pencil" aria-hidden="true"></span>Track</a>
     <a class="navbar-brand" href="/user/profile"><span class="glyphicon glyphicon glyphicon-user" aria-hidden="true"></span>Profile</a>
     </div>
-
+    <ul class="nav navbar-nav navbar-right">
-   
+        <li><p class="navbar-text">Already have an account?</p></li>
+        <li class="dropdown">
+          <a href="/user/signIn" class="dropdown-toggle" data-toggle="dropdown"><b>Login</b> <span class="caret"></span></a>
+			<ul id="login-dp" class="dropdown-menu">
+				<li>
+					 <div class="row">
+							<div class="col-md-12">
+								Login via
+								<div class="social-buttons">
+									<a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a>
+									<a href="#" class="btn btn-tw"><i class="fa fa-twitter"></i> Twitter</a>
+								</div>
+                                or
+								 <form class="form" role="form" method="post" action="/user/signIn" accept-charset="UTF-8" id="login-nav">
+										<div class="form-group">
+											 <label class="sr-only" for="exampleInputEmail2">Email address</label>
+											 <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
+										</div>
+										<div class="form-group">
+											 <label class="sr-only" for="exampleInputPassword2">Password</label>
+											 <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
+                                             <div class="help-block text-right"><a href="">Forget the password ?</a></div>
+										</div>
+										<div class="form-group">
+											 <button type="submit" class="btn btn-primary btn-block">Sign in</button>
+										</div>
+										<div class="checkbox">
+											 <label>
+											 <input type="checkbox"> keep me logged-in
+											 </label>
+										</div>
+								 </form>
+                                {{csrfToken}}
+                                <a>???????????</a>
+							</div>
+							<div class="bottom text-center">
+								New here ? <a href="/user/signUp"><b>Join Us</b></a>
+							</div>
+					 </div>
+				</li>
+			</ul>
+        </li>
+      </ul>
   </div><!-- /.container-fluid -->
 </nav>

GYMApp/GYMApp/views/user/signUp.hbs

@@ -80,6 +80,8 @@
 				            <a href="index.php">Login</a>
 				         </div>
 					</form>
+                    <a>Helllooo</a>
+                    {{csrfToken}}
 				</div>
 			</div>
 		</div>

GYMApp/GYMApp/views/user/test.html

@@ -1,9 +1,97 @@
 <!DOCTYPE html>
 <html>
+<head>
+<title>Facebook Login JavaScript Example</title>
+<meta charset="UTF-8">
+</head>
 <body>
+<script>
+  // This is called with the results from from FB.getLoginStatus().
+  function statusChangeCallback(response) {
+    console.log('statusChangeCallback');
+    console.log(response);
+    // The response object is returned with a status field that lets the
+    // app know the current login status of the person.
+    // Full docs on the response object can be found in the documentation
+    // for FB.getLoginStatus().
+    if (response.status === 'connected') {
+      // Logged into your app and Facebook.
+      testAPI();
+    } else {
+      // The person is not logged into your app or we are unable to tell.
+      document.getElementById('status').innerHTML = 'Please log ' +
+        'into this app.';
+    }
+  }
 
-<h1>My First Heading</h1>
+  // This function is called when someone finishes with the Login
-<p>My first paragraph.</p>
+  // Button.  See the onlogin handler attached to it in the sample
+  // code below.
+  function checkLoginState() {
+    FB.getLoginStatus(function(response) {
+      statusChangeCallback(response);
+    });
+  }
+
+  window.fbAsyncInit = function() {
+  FB.init({
+    appId      : '{your-app-id}',
+    cookie     : true,  // enable cookies to allow the server to access 
+                        // the session
+    xfbml      : true,  // parse social plugins on this page
+    version    : 'v2.8' // use graph api version 2.8
+  });
+
+  // Now that we've initialized the JavaScript SDK, we call 
+  // FB.getLoginStatus().  This function gets the state of the
+  // person visiting this page and can return one of three states to
+  // the callback you provide.  They can be:
+  //
+  // 1. Logged into your app ('connected')
+  // 2. Logged into Facebook, but not your app ('not_authorized')
+  // 3. Not logged into Facebook and can't tell if they are logged into
+  //    your app or not.
+  //
+  // These three cases are handled in the callback function.
+
+  FB.getLoginStatus(function(response) {
+    statusChangeCallback(response);
+  });
+
+  };
+
+  // Load the SDK asynchronously
+  (function(d, s, id) {
+    var js, fjs = d.getElementsByTagName(s)[0];
+    if (d.getElementById(id)) return;
+    js = d.createElement(s); js.id = id;
+    js.src = "//connect.facebook.net/en_US/sdk.js";
+    fjs.parentNode.insertBefore(js, fjs);
+  }(document, 'script', 'facebook-jssdk'));
+
+  // Here we run a very simple test of the Graph API after login is
+  // successful.  See statusChangeCallback() for when this call is made.
+  function testAPI() {
+    console.log('Welcome!  Fetching your information.... ');
+    FB.api('/me', function(response) {
+      console.log('Successful login for: ' + response.name);
+      document.getElementById('status').innerHTML =
+        'Thanks for logging in, ' + response.name + '!';
+    });
+  }
+</script>
+
+<!--
+  Below we include the Login Button social plugin. This button uses
+  the JavaScript SDK to present a graphical Login button that triggers
+  the FB.login() function when clicked.
+-->
+
+<a>XXX<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
+</fb:login-button></a>
+
+<div id="status">
+</div>
 
 </body>
 </html>