Various changes

config/auth.js

@@ -11,13 +11,13 @@ module.exports = function(app, passport) {
 	// Methods for success and failure
 	const
 		loginOutcome = {
-		failureRedirect: '/login',
+			failureRedirect: '/login',
-		failureFlash: true
+			failureFlash: true
-	},
+		},
 		connectOutcome = {
-		failureRedirect: '/settings',
+			failureRedirect: '/settings',
-		failureFlash: true
+			failureFlash: true
-	},
+		},
 		loginCallback = function(req,res){
 			res.redirect( req.session.next || '/settings' );
 			delete req.session.next;
@@ -33,6 +33,7 @@ module.exports = function(app, passport) {
 		.post( passport.authenticate('local',loginOutcome), loginCallback );
 	app.get('/logout', function(req,res){
 		req.logout();
+		req.flash('success',`You have been logged out.`);
 		res.redirect('/');
 	});
 	

server.js

@@ -74,12 +74,12 @@ const
 		// Static files (keep this before setting default locals)
 		app.use('/static', express.static(__dirname+'/static'));
 		
-		// Set default locals (keep this after static files)
+		// Set default locals available to all views (keep this after static files)
 		app.get('/*', function(req,res,next){
 			// console.log(`Setting local variables for request to ${req.path}.`);
 				
 			// User account
-			// res.locals.user = req.user;
+			res.locals.user = req.user;
 			// console.log(`User set as ${res.locals.user}. `);
 			
 			// Flash messages

static/css/base.css

@@ -129,70 +129,8 @@ section {
 	padding: 10vh 0 5vh;
 }
 
-/* Alerts */
-.alert {
-	z-index: 10;
-	padding: 15px;
-	border: 1px solid transparent;
-	border-radius: 4px;
-}
-.alert a {
-	z-index: 10;
-	color: inherit;
-	font-weight: bold;
-	text-decoration: underline;
-}
-.alert a:hover {
-	color: inherit;
-	text-decoration: none;
-}
-.alert h4 {
-	margin-top: 0;
-	color: inherit;
-}
-.alert > p,
-.alert > ul {
-	margin-bottom: 0;
-}
-.alert > p + p {
-	margin-top: 5px;
-}
-.alert-dismissable {
-	padding-right: 35px;
-}
-.alert .close,
-.alert-dismissible .close {
-	cursor: pointer;
-	float: right;
-	color: inherit;
-}
-.alert-success {
-	color: #dff0d8;
-	background-color: #3c763d;
-}
-.alert-info {
-	color: #d9edf7;
-	background-color: #31708f;
-}
-.alert-warning {
-	color: #fcf8e3;
-	background-color: #8a6d3b;
-}
-.alert-danger {
-	color: #f2dede;
-	background-color: #a94442;
-}
-.alert.alert-header {
-	position: relative;
-	border-radius: 0;
-	top: 58px;
-	width: 100%;
-}
-
 /* Buttons */
 .btn {
-	text-decoration: none;
-	text-align: center;
 	font-weight:600;
 	display: inline-block;
 	padding: 15px 30px;
@@ -200,7 +138,7 @@ section {
 	cursor: pointer;
 	background: rgba(255,255,255,0.1);
 	color: #eee;
-	border: 1px solid #999;
+	border: 1px solid #666;
 	border-radius: .5vw;
 } .btn:not(.disabled) {
 	-moz-box-shadow: 

static/css/header.css

@@ -1,3 +1,4 @@
+/* Main */
 header {
 	background: #222;
 	padding: 0;
@@ -8,6 +9,8 @@ header {
 } header a:hover, header a:focus {
 	color: #fbc93d;
 }
+
+/* Logo */
 header .logo {
 	float: left;
 	font-family: 'Open Sans', sans-serif;
@@ -29,6 +32,8 @@ header .logo {
 	text-decoration: none;
 	background: rgba(255,255,255,0.1);
 }
+
+/* Navigation */
 header nav {
 	float: right;
 } header nav ul {
@@ -46,10 +51,9 @@ header nav {
 } header nav ul li a:hover,
 header nav ul li a:focus,
 header nav ul li a.active,
-header .logo:hover {
+
-	text-decoration: none;
+
-	background: rgba(255,255,255,0.1);
+/* Hamburger */
-}
 header .hamburger {
 	display: none;
 	padding: 5px;
@@ -151,4 +155,65 @@ header .hamburger-inner::after {
 		right: 10px;
 		top: 13px;
 	}
-}
+}
+
+/* Alerts */
+.alert {
+	padding: 15px;
+	border: 1px solid transparent;
+	border-radius: 4px;
+}
+noscript .alert-danger {
+	z-index: 40;
+}
+.alert-danger {
+	z-index: 30;
+	color: #f2dede;
+	background-color: #a94442;
+}
+.alert-warning {
+	z-index: 20;
+	color: #fcf8e3;
+	background-color: #8a6d3b;
+}
+.alert-success {
+	z-index: 10;
+	color: #dff0d8;
+	background-color: #3c763d;
+}
+.alert.alert-header {
+	position: relative;
+	border-radius: 0;
+	top: 58px;
+	width: 100%;
+}
+.alert a {
+	z-index: 10;
+	color: inherit;
+	font-weight: bold;
+	text-decoration: underline;
+}
+.alert a:hover {
+	color: inherit;
+	text-decoration: none;
+}
+.alert h4 {
+	margin-top: 0;
+	color: inherit;
+}
+.alert > p,
+.alert > ul {
+	margin-bottom: 0;
+}
+.alert > p + p {
+	margin-top: 5px;
+}
+.alert-dismissable {
+	padding-right: 35px;
+}
+.alert .close,
+.alert-dismissible .close {
+	cursor: pointer;
+	float: right;
+	color: inherit;
+}

static/css/index.css

@@ -15,6 +15,7 @@
 /* End Animations */
 
 .btn  { border-radius: 50px; }
+.container > p { margin-bottom: 5vh; }
 
 .splash {
 	background: #090909;
@@ -165,7 +166,12 @@
 .light h2 {
 	margin-bottom: 40px;
 }
+.light .btn {
+	color: #111;
+	background: rgba(0,0,0,0.1);
+}
 .light .btn:hover:not(.disabled) {
+	cursor: pointer;
 	text-decoration: none;
 	background: rgba(0,0,0,0.2);
 }

views/index.html

@@ -97,7 +97,7 @@
 		</div>
 	</section>
 
-	<section class='disclaimer light' id='disclaimer'>
+	<section class='disclaimer' id='disclaimer'>
 		<div class='container'>
 			<h2>Warning! </h2>
 			<p>This is beta software, so there are still kinks to be worked out. </p>
@@ -109,8 +109,8 @@
 	<section class='join light' id='join'>
 		<div class='container'>
 			<h2>Hook me up!</h2>
-			<p style="margin-bottom:5vh">Just click that there button to create an account. </p>
+			<p>Just click that there button to create an account. </p>
-			<a class='btn btn-lg' href="/login#signup" style="color:#111">Join Tracman</a>
+			<a class='btn btn-lg' href="/login#signup">Join Tracman</a>
 		</div>
 	</section>
 	{% endif %}