pnid integrated navbar, some UX stuff and start on pnid dashboard.

assets/css/pretendo-common.css

@@ -11,7 +11,7 @@ body {
 	margin: 0;
 	font-family: 'Roboto', Arial, Helvetica, sans-serif;
 	font-weight: 400;
-	background: #eeeeef;
+	background: #efefef;
 	overflow-x: hidden;
 }
 body.flex {
@@ -35,27 +35,70 @@ nav.navWrapper {
 	left: 0;
 	width: 100%;
 	z-index: 10;
+	justify-content: center;
 }
 nav.navWrapper .navItem {
 	flex: 0;
-	padding: 20px;
+	padding: 15px 20px;
 	color: rgba(255, 255, 255, 0.8);
 	text-decoration: none;
 	font-size: 1em;
 	cursor: pointer;
+	align-self: stretch;
 }
-nav.navWrapper .navItem:hover {
+nav.navWrapper .navItem:hover, nav.navWrapper .navItem.active {
 	color: white;
 	text-decoration: none;
 	background: rgba(0, 0, 0, 0.07);
 }
-
 nav.navWrapper .navItem.brand {
 	font-weight: 600;
 	background: #5231a7;
-	padding: 20px 40px;
+	padding: 15px 40px;
 	color: white;
 }
+nav.navWrapper .navBtn, nav.navWrapper .navBtnAlt {
+	flex: 0;
+	align-self: center;
+	padding: 5px 30px;
+	color: white;
+	text-decoration: none;
+	font-size: 1em;
+	cursor: pointer;
+	background-color: #512da8;
+	border-radius: 5px;
+	margin: 0 10px;
+	box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.07);
+}
+nav.navWrapper .navBtnAlt {
+	color: #3d1c8a;
+	background-color: white;
+}
+nav.navWrapper .navBtn:hover {
+	background-color: #52339b;
+}
+nav.navWrapper .navBtnAlt:hover {
+	background-color: rgba(255, 255, 255, 0.745);
+	color: #54359b;
+}
+nav.navWrapper .navItem:nth-last-child(2) {
+	margin-right: 20px;
+}
+nav.navWrapper .navProfile {
+	align-self: stretch;
+	display: flex;
+	align-items: center;
+	padding: 0 20px;
+}
+nav.navWrapper .navProfile img {
+	border-radius: 50%;
+	width: 2em; height: 2em;
+	background-color: white;
+	border: 1px solid rgba(0, 0, 0, 0.5);
+}
+nav.navWrapper .navProfile p {
+	padding: 0 0 0 10px;
+}
 nav.navWrapper .navSpread {
 	flex: 1;
 }
@@ -86,7 +129,7 @@ nav.navWrapper .navItem.hamburger {
 	width: 100%;
 }
 nav.navWrapper ~ .contentWrapper:nth-child(2) {
-	margin-top: 3.7rem;
+	margin-top: 3rem;
 }
 .contentWrapper .bgExtrude {
 	position: absolute;
@@ -237,7 +280,7 @@ button, .btn, .btn-alt {
     margin-bottom: 10px;
     display: flex;
 }
-.profile .profileIcon {
+.profileIcon {
     margin-right: 10px;
     width: 80px; height: 80px;
 	border-radius: 50%;

assets/css/pretendo-pnid.css

@@ -0,0 +1,12 @@
+.contentWrapper.userPage {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+body footer {
+    padding: 0;
+    box-shadow: 0 -3px 10px 0px rgba(0, 0, 0, 0.07);
+}
+body footer .content {
+    border-radius: 0;
+}

middleware/authentication.js

@@ -17,12 +17,21 @@ function adminAuthNeeded(req, res, next) {
 	}
 }
 
+// middleware to use if pnid auth authentication is required
+function pnidApiAuthNeeded(req, res, next) {
+	if (req.isAuthenticated() && !req.user.role) { // having no role means its a normal account. only admin accounts have roles
+		return next();
+	} else {
+		apiHelper.sendApiAuthError(res);
+	}
+}
+
 // middleware to use if pnid authentication is required
 function pnidAuthNeeded(req, res, next) {
 	if (req.isAuthenticated() && !req.user.role) { // having no role means its a normal account. only admin accounts have roles
 		return next();
 	} else {
-		apiHelper.sendApiAuthError(res);
+		res.redirect('/pnid/login');
 	}
 }
 
@@ -34,5 +43,6 @@ function authOptional(req, res, next) {
 module.exports = {
 	adminAuthNeeded,
 	pnidAuthNeeded,
+	pnidApiAuthNeeded,
 	authOptional
 };

routes/blog.js

@@ -29,7 +29,8 @@ router.get('/news/:date/:title', (req, res) => {
 			post.postTemplate((err, postTemplate) => {
 				if (err) return utilHelper.send404(res);
 				res.render('post', {
-					post: postTemplate
+					post: postTemplate,
+					user: utilHelper.templateReadyUser(req)
 				});
 			});
 		});
@@ -54,7 +55,9 @@ router.get('/news', (req, res) => {
 		}
 
 		res.render('post-collection', {
-			posts: postCollection
+			posts: postCollection,
+			user: utilHelper.templateReadyUser(req),
+			page: 'news'
 		});
 	});
 });

routes/contact.js

@@ -8,12 +8,16 @@ file for handling routes regarding contact
 // imports
 const router = require('express').Router();
 const apiHelper = require('../helpers/api');
+const utilHelper = require('../helpers/util');
 const config = require('../config.json');
 const https = require('https');
 
 // display contact page
 router.get('/contact', (req, res) => {
-	res.render('contact');
+	res.render('contact', {
+		user: utilHelper.templateReadyUser(req),
+		page: 'contact'
+	});
 });
 
 /* 

routes/home.js

@@ -8,10 +8,14 @@ for routes on the root path
 
 // imports
 const router = require('express').Router();
+const utilHelper = require('../helpers/util');
 
 // display home page
 router.get('/', (req, res) => {
-	res.render('home');
+	res.render('home', {
+		user: utilHelper.templateReadyUser(req),
+		page: 'home'
+	});
 });
 
 // export the router

routes/pnid.js

@@ -10,6 +10,7 @@ const router = require('express').Router();
 const passport = require('passport');
 const userMiddleware = require('../middleware/authentication');
 const apiHelper = require('../helpers/api');
+const utilHelper = require('../helpers/util');
 const config = require('../config.json');
 const Recaptcha = require('express-recaptcha').Recaptcha;
 const recaptcha = new Recaptcha(config.recaptcha.siteKey, config.recaptcha.secretKey);
@@ -27,7 +28,9 @@ router.get('/pnid/login', (req, res) => {
 });
 // renders pnid dashboard
 router.get('/pnid/dashboard', userMiddleware.pnidAuthNeeded, (req, res) => {
-	res.render('dashboard');
+	res.render('dashboard', {
+		user: utilHelper.templateReadyUser(req)
+	});
 });
 
 /* 

routes/progress.js

@@ -24,7 +24,8 @@ router.get('/progress', (req, res) => {
 		res.render('progress', {
 			games,
 			backends,
-			user: utilHelper.templateReadyUser(req)
+			user: utilHelper.templateReadyUser(req),
+			page: 'progress'
 		});
 	});
 });

server.js

@@ -50,11 +50,26 @@ app.use(session({
 passportconfig(app);
 
 // handlebars templating setup
-app.engine('.hbs', handlebars({
+const hbsEngine = handlebars({
 	extname: '.hbs',
 	layoutsDir: 'views',
-	partialsDir: 'views/partials'
-}));
+	partialsDir: 'views/partials',
+	helpers: {
+		'if_eq': function(a, b, opts) {
+			if(a == b) // Or === depending on your needs
+				return opts.fn(this);
+			else
+				return opts.inverse(this);
+		},
+		'if_neq': function(a, b, opts) {
+			if(a != b) // Or === depending on your needs
+				return opts.fn(this);
+			else
+				return opts.inverse(this);
+		}
+	}
+});
+app.engine('.hbs', hbsEngine);
 app.set('view engine', '.hbs');
 
 // locations and routes setup

views/dashboard.hbs

@@ -1 +1,15 @@
-<h1>pnid dashboard</h1>
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        {{> head-common }}
+        <!-- page specific -->
+        <link rel="stylesheet" href="/assets/css/pretendo-pnid.css">
+    </head>
+    <body class="flex">
+        {{> nav-default }}
+        <div class="contentWrapper userPage">
+            <h1>PNID dashboard</h1>
+        </div>
+        {{> footer-default }}
+    </body>
+</html>

views/login.hbs

@@ -2,12 +2,5 @@
 <form action="/api/v1/login" method="POST">
     <input type="text" name="email">
     <input type="text" name="password">
-    <a href="#" onclick="hashPassword()">Click to hash password (required before login)</a>
     <button>submit login</button>
-</form>
-
-<script>
-    function hashPassword() {
-
-    }
-</script>
+</form>

views/partials/nav-default.hbs

@@ -1,13 +1,18 @@
 <nav class="navWrapper" id="nav">
-	<a class="navItem brand" href="/">PRETENDO</a>
-	<a class="navItem" href="/news">News</a>
-	<a class="navItem" href="/progress">Progress</a>
-	<a class="navItem" href="/contact">Contact</a>
+	<a class="navItem brand{{#if_eq page 'home'}} active{{/if_eq}}" {{#if_neq page 'home'}}href="/"{{/if_neq}}>PRETENDO</a>
+	<a class="navItem{{#if_eq page 'news'}} active{{/if_eq}}" {{#if_neq page 'news'}}href="/news"{{/if_neq}}>News</a>
+	<a class="navItem{{#if_eq page 'progress'}} active{{/if_eq}}" {{#if_neq page 'progress'}}href="/progress"{{/if_neq}}>Progress</a>
+	<a class="navItem{{#if_eq page 'contact'}} active{{/if_eq}}" {{#if_neq page 'contact'}}href="/contact"{{/if_neq}}>Contact</a>
     <div class="navSpread"></div>
 {{#if user.isLoggedIn }}
-    <a class="navItem" href="#">profile</a>
+    <a class="navItem navProfile" href="/pnid/dashboard">
+        <img src="#" alt="">
+        <p>mrjvs@gmail.com</p>
+    </a>
+    <a class="navItem navBtn" href="/pnid/logout">logout</a>
 {{else}}
-    <a class="navItem" href="#">login</a>
+    <a class="navItem navBtnAlt" href="/pnid/login">Login</a>
+    <a class="navItem navBtn" href="/pnid/register">Register</a>
 {{/if}}
     <a class="navItem hamburger" id="navToggle">ICON</a>
 </nav>