joe/gymtrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding signup page

Browse Source
This commit is contained in:
Nelisa
2017-05-04 16:07:38 -05:00
parent cdad8e2647
commit 3121f25e4b
10 changed files with 247 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
GYMApp/GYMApp/app.js
View File

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

2
GYMApp/GYMApp/models/user.js
View File

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

6
GYMApp/GYMApp/package.json
View File

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

47
GYMApp/GYMApp/public/stylesheets/style.css
View File

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

14
GYMApp/GYMApp/routes/index.js
View File

@@ -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 = [];

17
GYMApp/GYMApp/routes/user.js
View File

@@ -1,11 +1,11 @@
var express = require('express');
var router = express.Router();
var User = require('../models/user');
//var csrf = require('csurf');
//var passport = require('passport');
var csrf = require('csurf');
var passport = require('passport');
//var csrfProtection = csrf();
//router.use(csrfProtection);
var csrfProtection = csrf();
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 ....");
// });

23
GYMApp/GYMApp/views/index.hbs
View File

@@ -1,12 +1,19 @@
<a href="#" data-toggle="modal" data-target="#login-modal">Login</a>
<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 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>
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">

46
GYMApp/GYMApp/views/partials/header.hbs
View File

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

2
GYMApp/GYMApp/views/user/signUp.hbs
View File

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

92
GYMApp/GYMApp/views/user/test.html
View File

@@ -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>
<p>My first paragraph.</p>
// This function is called when someone finishes with the Login
// 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>