added a new fancy login form

app.js

@@ -12,7 +12,7 @@ var config = require('./config.json');
 var home = require('./controllers/home'),
     api = require('./controllers/api'),
     auth = require('./controllers/auth'),
-    users = require('./controllers/user');
+    user = require('./controllers/user');
 
 // Connect to database
 var db = mongoose.connect(config.db);
@@ -38,12 +38,19 @@ app.use(app.router);
 // Routes
 app.get('/', home.index);
 
-app.get('/account', auth.ensureAuthenticated, users.account);
-app.get('/logout', users.logout);
-app.post('/login', users.postlogin);
-app.get('/admin', auth.ensureAuthenticated, auth.ensureAdmin(), users.admin);
+app.get('/login', user.getLogin);
+app.get('/signup', user.getSignup);
+
+app.get('/logout', user.logout);
+
+app.post('/login', user.postlogin);
+app.post('/signup', user.postSignup);
+
+app.get('/account', auth.ensureAuthenticated, user.account);
+
+
+app.get('/admin', auth.ensureAuthenticated, auth.ensureAdmin(), user.admin);
 app.get('/api/name', api.name);
-app.get('/partials/login', users.getlogin);
 app.get('/partials/:name', home.partials);
 app.get('*', home.index);
 

controllers/user.js

@@ -8,8 +8,16 @@ exports.account = function(req, res) {
   res.render('account', { user: req.user });
 };
 
-exports.getlogin = function(req, res) {
-  res.render('partials/login', { user: req.user, message: req.session.messages });
+exports.getLogin = function(req, res) {
+  res.render('login', { user: req.user, message: req.session.messages });
+};
+
+exports.getSignup = function(req, res) {
+  res.render('signup', { user: req.user, message: req.session.messages });
+};
+
+exports.postSignup = function(req, res) {
+  console.log('posted signup');
 };
 
 exports.admin = function(req, res) {

package.json

@@ -9,7 +9,6 @@
     "passport": "latest",
     "passport-local": "latest",
     "underscore": "latest",
-    "forever": "latest",
-    "hbs": "latest"
+    "forever": "latest"
  }
-}
+}

public/css/app.css

@@ -23,4 +23,38 @@ body {
 
 .btn {
   margin-bottom: 10px;
+}
+
+.main {
+  max-width: 320px;
+  margin: 0 auto;
+}
+.login-or {
+  position: relative;
+  font-size: 18px;
+  color: #aaa;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.span-or {
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: -2px;
+  margin-left: -25px;
+  background-color: #fff;
+  width: 50px;
+  text-align: center;
+}
+.hr-or {
+  background-color: #cdcdcd;
+  height: 1px;
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+}
+h3 {
+  text-align: center;
+  line-height: 300%;
 }

views/layout.jade

@@ -27,7 +27,13 @@ html(lang='en')
               a(href='#about') About
             li
               a(href='#contact') Contact
-    .container
+          ul.nav.navbar-nav.navbar-right
+            li
+              a(href='/login') Login
+            li
+              a(href='/signup') Create Account
+
+  .container
       block content
 
     script(src='/js/lib/jquery.js')

views/login.jade

@@ -0,0 +1,33 @@
+extends layout
+
+block content
+  if message
+    p= message
+
+  .row
+    .main
+      h3
+        | Please Login, or 
+        a(href='/signup') Sign Up
+      .row
+        .col-xs-6.col-sm-6.col-md-6
+          a.btn.btn-lg.btn-primary.btn-block(href='#') Facebook
+        .col-xs-6.col-sm-6.col-md-6
+          a.btn.btn-lg.btn-info.btn-block(href='#') Google
+      .login-or
+        hr.hr-or
+        span.span-or or
+      form(role='form')
+        .form-group
+          label(for='inputUsernameEmail') Username or email
+          input#inputUsernameEmail.form-control(type='text')
+        .form-group
+          a.pull-right(href='#') Forgot password?
+          label(for='inputPassword') Password
+          input#inputPassword.form-control(type='password')
+        .checkbox.pull-right
+          label
+            input(type='checkbox')
+            | Remember me
+        button.btn.btn.btn-primary(type='submit')
+          | Log In

views/partials/login.jade

@@ -1,15 +0,0 @@
-if message
-  p= message
-
-form(action='/login', method='post')
-  div
-    label Username:
-    input(type='text', name='username')
-    br
-    div
-      label Password:
-      input(type='password', name='password')
-    div
-      input(type='submit', value='Submit')
-  p
-    small Hint - bob:secret

views/partials/signup.jade

@@ -1,14 +0,0 @@
-if message
-  p= message
-form(action='/login', method='post')
-  div
-    label Username:
-    input(type='text', name='username')
-    br
-    div
-      label Password:
-      input(type='password', name='password')
-    div
-      input(type='submit', value='Submit')
-  p
-    small Hint - bob:secret

views/signup.jade

@@ -0,0 +1,18 @@
+extends layout
+
+block content
+  if message
+    p= message
+
+  form(action='/login', method='post')
+    div
+      label Username:
+      input(type='text', name='username')
+      br
+      div
+        label Password:
+        input(type='password', name='password')
+      div
+        input(type='submit', value='Submit')
+    p
+      small Hint - bob:secret