Local authentication

README.md

@@ -19,11 +19,12 @@
 - [Installation Guide](https://requarks-wiki.readme.io/docs/prerequisites)
 
 ##### Milestones
+- [ ] Account Management
 - [ ] Assets Management
 	- [x] Images
 	- [ ] Files/Documents
-- [ ] Authentication
+- [x] Authentication
-	- [ ] Local
+	- [x] Local
 	- [x] Microsoft Account
 	- [x] Google ID
 	- [x] Facebook

assets/css/login.css

@@ -1 +1 @@
-#bg,#bg>div{width:100%;height:100%;top:0;left:0}#root,#root button,#root h1,a{color:#FFF}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}[v-cloak]{display:none}body{padding:0;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:14px}a{transition:color .4s ease;text-decoration:none}a:hover{color:#FB8C00;text-decoration:underline}#bg{position:fixed;z-index:1;background-color:#000}#bg>div{background-size:cover;background-position:center center;position:absolute;opacity:0;visibility:hidden;transition:opacity 3s ease,visibility 3s;animation:bg 30s linear infinite}#copyright,#root{left:10vw;z-index:2}#bg>div:nth-child(1){animation-delay:10s}#bg>div:nth-child(2){animation-delay:20s}#root h1,#root h2{animation:headerIntro 3s ease;padding:0}#root{position:fixed;top:15vh;display:flex;flex-direction:column}#root h1{font-size:4rem;margin:0}#root h2{font-size:1.5rem;font-weight:400;color:rgba(255,255,255,.7);margin:0 0 25px}#root input[type=password],#root input[type=text]{width:350px;max-width:80vw;border:1px solid rgba(255,255,255,.3);border-radius:3px;background-color:rgba(0,0,0,.2);padding:0 15px;height:40px;margin:0 0 10px;color:#FFF;font-weight:700;font-size:14px;transition:all .4s ease}#root input[type=password]:focus,#root input[type=text]:focus{outline:0;border-color:rgba(255,255,255,.8)}#root button{background-color:#FB8C00;border:1px solid #ffa32f;border-radius:3px;height:40px;width:125px;padding:0;font-weight:700;margin:15px 0 0;transition:all .4s ease;cursor:pointer}#root button:focus{outline:0;border-color:#FFF}#root button:hover{background-color:#c87000}#root #social{margin-top:25px}#root #social>span{display:block;font-weight:700;color:rgba(255,255,255,.7)}#root #social button{margin-right:5px;width:auto;padding:0 15px}#root #social button>i{margin-right:10px;font-size:16px}#root #social button.ms{background-color:#009688;border-color:#00c9b6}#root #social button.ms:hover{background-color:#00635a}#root #social button.google{background-color:#2196F3;border-color:#51adf6}#root #social button.google:hover{background-color:#0c7cd5}#root #social button.facebook{background-color:#673AB7;border-color:#8259cb}#root #social button.facebook:hover{background-color:#512e90}#copyright{display:flex;align-items:center;justify-content:flex-start;position:absolute;bottom:10vh;color:rgba(255,255,255,.5);font-weight:700}#copyright .icon{font-size:1.2rem;margin:0 8px}#copyright a{opacity:.75}@-webkit-keyframes bg{0%{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-o-transform:scale(1,1);transform:scale(1,1);visibility:visible;opacity:0}33%,5%{opacity:.5}38%{-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);-ms-transform:scale(1.2,1.2);-o-transform:scale(1.2,1.2);transform:scale(1.2,1.2);opacity:0}39%{visibility:hidden}100%{visibility:hidden;opacity:0}}@-moz-keyframes bg{0%{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-o-transform:scale(1,1);transform:scale(1,1);visibility:visible;opacity:0}33%,5%{opacity:.5}38%{-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);-ms-transform:scale(1.2,1.2);-o-transform:scale(1.2,1.2);transform:scale(1.2,1.2);opacity:0}39%{visibility:hidden}100%{visibility:hidden;opacity:0}}@-o-keyframes bg{0%{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-o-transform:scale(1,1);transform:scale(1,1);visibility:visible;opacity:0}33%,5%{opacity:.5}38%{-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);-ms-transform:scale(1.2,1.2);-o-transform:scale(1.2,1.2);transform:scale(1.2,1.2);opacity:0}39%{visibility:hidden}100%{visibility:hidden;opacity:0}}@keyframes bg{0%{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-o-transform:scale(1,1);transform:scale(1,1);visibility:visible;opacity:0}33%,5%{opacity:.5}38%{-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);-ms-transform:scale(1.2,1.2);-o-transform:scale(1.2,1.2);transform:scale(1.2,1.2);opacity:0}39%{visibility:hidden}100%{visibility:hidden;opacity:0}}@-webkit-keyframes headerIntro{0%{opacity:0}100%{opacity:1}}@-moz-keyframes headerIntro{0%{opacity:0}100%{opacity:1}}@-o-keyframes headerIntro{0%{opacity:0}100%{opacity:1}}@keyframes headerIntro{0%{opacity:0}100%{opacity:1}}
+@charset "UTF-8";#bg,#bg>div{width:100%;height:100%;top:0;left:0}#root h2,#root h4{font-weight:400;color:rgba(255,255,255,.7)}#root,#root button,#root h1,a{color:#FFF}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%,to{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}}@keyframes pulse{0%,to{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%,to{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}@keyframes rubberBand{0%,to{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:Line truncated

client/scss/login.scss

@@ -1,6 +1,8 @@
 @import './layout/_base';
 @import './layout/_mixins';
 
+@import './libs/animate.min.css';
+
 body {
 	padding: 0;
 	margin: 0;
@@ -80,6 +82,34 @@ #root {
 		animation: headerIntro 3s ease;
 	}
 
+	h3 {
+		font-size: 1.25rem;
+		font-weight: normal;
+		color: #FB8C00;
+		padding: 0;
+		margin: 0;
+		animation: shake 1s ease;
+
+		> .fa {
+			margin-right: 7px;
+		}
+
+	}
+
+	h4 {
+		font-size: 0.8rem;
+		font-weight: normal;
+		color: rgba(255,255,255,0.7);
+		padding: 0;
+		margin: 0 0 15px 0;
+		animation: fadeIn 3s ease;
+	}
+
+	form {
+		display: flex;
+		flex-direction: column;
+	}
+
 	input[type=text], input[type=password] {
 		width: 350px;
 		max-width: 80vw;
@@ -96,7 +126,7 @@ #root {
 
 		&:focus {
 			outline: none;
-			border-color: rgba(255,255,255,0.8);
+			border-color: #FB8C00;
 		}
 
 	}
@@ -148,6 +178,10 @@ #root {
 				background-color: #009688;
 				border-color: lighten(#009688, 10%);
 
+				&:focus {
+					border-color: #FFF;
+				}
+
 				&:hover {
 					background-color: darken(#009688, 10%);
 				}
@@ -158,6 +192,10 @@ #root {
 				background-color: #2196F3;
 				border-color: lighten(#2196F3, 10%);
 
+				&:focus {
+					border-color: #FFF;
+				}
+
 				&:hover {
 					background-color: darken(#2196F3, 10%);
 				}
@@ -168,6 +206,10 @@ #root {
 				background-color: #673AB7;
 				border-color: lighten(#673AB7, 10%);
 
+				&:focus {
+					border-color: #FFF;
+				}
+
 				&:hover {
 					background-color: darken(#673AB7, 10%);
 				}

controllers/auth.js

@@ -41,10 +41,8 @@ router.post('/login', bruteforce.prevent, function(req, res, next) {
 
 		if (!user) {
 			req.flash('alert', {
-					class: 'error',
 				title: 'Invalid login',
-					message:  "The email or password is invalid.",
+				message:  "The email or password is invalid."
-					iconClass: 'fa-times'
 			});
 			return res.redirect('/login');
 		}

controllers/ws.js

@@ -2,7 +2,9 @@
 
 module.exports = (socket) => {
   
-  console.log(socket.request.user);
+  if(!socket.request.user.logged_in) {
+    return;
+  }
 
   //-----------------------------------------
   // SEARCH

libs/auth.js

@@ -34,23 +34,24 @@ module.exports = function(passport, appconfig) {
 		passport.use('local',
 			new LocalStrategy({
 				usernameField : 'email',
-				passwordField : 'password',
+				passwordField : 'password'
-				passReqToCallback : true
 			},
-			function(req, uEmail, uPassword, done) {
+			(uEmail, uPassword, done) => {
-				db.User.findOne({ 'email' :  uEmail }).then((user) => {
+				db.User.findOne({ email: uEmail, provider: 'local' }).then((user) => {
-					if (user) {
+					if(user) {
-						user.validatePassword(uPassword).then((isValid) => {
+						return user.validatePassword(uPassword).then(() => {
-							return (isValid) ? done(null, user) : done(null, false);
+							return done(null, user) || true;
+						}).catch((err) => {
+							 return done(err, null);
 						});
 					} else {
-						return done(null, false);
+						return done(new Error('Invalid Login'), null);
 					}
 				}).catch((err) => {
-					done(err);
+					done(err, null) ;
 				});
-			})
+			}
-		);
+		));
 
 	}
 

models/user.js

@@ -78,9 +78,8 @@ userSchema.statics.hashPassword = (rawPwd) => {
 };
 
 userSchema.methods.validatePassword = function(rawPwd) {
-	let self = this;
+	return bcrypt.compare(rawPwd, this.password).then((isValid) => {
-	return bcrypt.hash(rawPwd).then((pwd) => {
+		return (isValid) ? true : Promise.reject(new Error('Invalid Login'));
-		return (self.password === pwd) ? true : Promise.reject(new Error('Invalid Password'));
 	});
 };
 

views/auth/login.pug

@@ -32,10 +32,16 @@ html
 		#root
 			h1= appconfig.title
 			h2 Login required
+			if appflash.length > 0
+				h3
+					i.fa.fa-warning
+					= appflash[0].title
+				h4= appflash[0].message
 			if appconfig.auth.local.enabled
-				input#login-user(type='text', placeholder='Email address')
+				form(method='post', action='/login')
-				input#login-pass(type='password', placeholder='Password')
+					input#login-user(type='text', name='email', placeholder='Email address')
-				button Log In
+					input#login-pass(type='password', name='password', placeholder='Password')
+					button(type='submit') Log In
 			if appconfig.authStrategies.socialEnabled
 				#social
 					if appconfig.auth.local.enabled
@@ -59,4 +65,3 @@ html
 			a.icon(href='https://github.com/Requarks/wiki')
 				i.fa.fa-github
 			a(href='https://github.com/Requarks/wiki') Requarks Wiki
-