web - form usability

bin/config.js

@@ -27,6 +27,7 @@ module.exports = {
 	},
 	app: {
 		locale: 'de-DE', // default locale (de-DE & en-EN should be available)
+		name: 'authRXBN',
 		passhashDelimiter: '|'
 	},
 	mongoose: {

bin/web/routes/api.js

@@ -162,8 +162,8 @@ getRoutes = async () => {
 			});
 
 			// database error
-			if(authCode.err) {
-				global['logs'].debug(authCode[1]);
+			if(typeof authCode.err !== "undefined") {
+				global['logs'].debug(authCode.err);
 				return res.type('json').status(500).end(JSON.stringify({
 					status: 500,
 					message: [
@@ -171,11 +171,11 @@ getRoutes = async () => {
 					]
 				}));
 			}
-			else if(rep) {
+			else if(typeof authCode.reply !== "undefined") {
 				// retrieve apps
 				apps = await db.getApps();
 				// database error
-				if(apps.reply) {
+				if(typeof apps.err !== "undefined") {
 					global['logs'].debug(apps.err);
 					return res.type('json').status(500).end(JSON.stringify({
 						status: 500,
@@ -189,7 +189,7 @@ getRoutes = async () => {
 					// if app.id is equal to queried app
 					if(app.id == req.query.id) {
 						// redirect to app
-						return res.redirect(app.access+"?uid="+req.session.user.id+"&token="+rep.token);
+						return res.redirect(app.access+"?uid="+req.session.user.id+"&token="+authCode.reply.token);
 					}
 				});
 			} else {

bin/web/routes/static.js

@@ -11,7 +11,7 @@ asyncer = require('express-async-handler');
 fs = require('fs');
 path = require('path');
 
-
+var cfg = require(global['__dirname']+'/bin/config');
 
 // reduce IO file checks - save file state in cache
 var fileCheck = (file) => {
@@ -48,7 +48,8 @@ let getRoutes = async () => {
 		apps = await db.getApps();
 		res.render('index', {
 			session: req.session,
-			apps: apps.reply
+			apps: apps.reply,
+			cfg: cfg
 		});
 	}));
 
@@ -85,7 +86,8 @@ let getRoutes = async () => {
 			res.render('request', {
 				session: req.session,
 				appRequest: req.session.appRequest,
-				apps: apps.reply
+				apps: apps.reply,
+				cfg: cfg
 			});
 		// if user isnt logged in, show login page
 		} else {
@@ -110,7 +112,7 @@ let getRoutes = async () => {
 	 * @method all
 	 * @TODO comments
 	 */
-	route.all('/*', (req, res, next) => {
+	route.all('/*', asyncer(async (req, res, next) => {
 		// passthrough to next route
 		if(req.path.startsWith('/api'))
 			return next();
@@ -135,22 +137,26 @@ let getRoutes = async () => {
 							return res.status(404).render('error/404', {
 								error_code: 404,
 								error_msg: 'msg.request.file.not_found',
-								session: req.session
+								session: req.session,
+								cfg: cfg
 							});
 						} else if(rule.type == "missing_permission") {
 							return res.status(401).render('error/permission', {
 								error_code: 401,
-								session: req.session
+								session: req.session,
+								cfg: cfg
 							});
 						} else if(rule.type == "login") {
 							return res.status(401).render('error/login', {
 								error_code: 401,
-								session: req.session
+								session: req.session,
+								cfg: cfg
 							});
 						} else {
 							return res.status(401).render('error/error', {
 								error_code: 401,
-								session: req.session
+								session: req.session,
+								cfg: cfg
 							});
 						}
 					}
@@ -159,23 +165,28 @@ let getRoutes = async () => {
 		});
 
 		if(fileCheck(req.path)) {
+			// query apps
+			apps = await db.getApps();
+
 			return res.render(req.path.replace(/^\//, ''), {
 				session: req.session,
-				cfg: global['gds'].cfg
+				apps: apps.reply,
+				cfg: cfg
 			});
 		} else {
 			global['logs'].info("[web] (404) path not found: "+req.path);
 			return res.status(404).render('error/404', {
 				error_code: 404,
 				error_msg: 'msg.request.file.not_found',
-				session: req.session
+				session: req.session,
+				cfg: cfg
 			});
 		}
 
 		// TODO: try to login
 		// TODO: role-based authorization
 		// TODO: show login page or page
-	});
+	}));
 
 	return route;
 };

bin/web/views/blocks/footer.pug

@@ -1,6 +1,6 @@
 footer
 	.uk-text-center
-		small Copyright &copy; <a href="https://www.rxbn.de/">Ruben Meyer</a> 2019
+		small Copyright &copy; <a href="https://www.rxbn.de/">Ruben Meyer</a> 2019-2020
 
 .modals
 	//- Logout Modal
@@ -21,5 +21,5 @@ block scripts
 	script(src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/js/uikit-icons.min.js")
 
 	//- Custom scripts for this template
-	script(src="/public/js/locales.js")
+	//script(src="/public/js/locales.js")
 	script(src="/res/js/custom.js")

bin/web/views/blocks/head.pug

@@ -6,9 +6,9 @@ head
 	meta(name="author", content="Ruben Meyer")
 	meta(name="description" content="auth.rxbn.de")
 	if(title)
-		title="authRXBN - "+title
+		title=cfg.app.name+" - "+title
 	else
-		title authRXBN
+		title=cfg.app.name
 
 	block css
 		//- UIkit CSS

bin/web/views/blocks/login.pug

@@ -1,5 +1,5 @@
 append var
-	- if(!session || !session.user) var breadcrumb = {0: {"name": "authRXBN", "href": "/"}, 1: {"name": "ERROR - Please login", "active": true}};
+	- if(!session || !session.user) var breadcrumb = {0: {"name": cfg.app.name, "href": "/"}, 1: {"name": "ERROR - Please login", "active": true}};
 	- if(!session || !session.user) var title = "Please login";
 .uk-flex.uk-margin-medium-top.uk-margin-medium-bottom
 	div(class="uk-width-auto uk-width-1-4@s")

bin/web/views/blocks/nav.pug

@@ -8,14 +8,14 @@ mixin navItem(name, id, symbol, href)
 nav(uk-navbar).uk-navbar-container
 	.uk-navbar-left.uk-margin-left
 		ul.uk-navbar-nav
-			li(title="authRXBN")
+			li(title=cfg.app.name)
 				a(href="/", style="text-transform: unset")
 					span authRXBN
 	.uk-navbar-right.uk-margin-right
 		ul.uk-navbar-nav
 			if(session && session.user)
 				+navItem("Apps", "apps", "fas fa-tachometer-alt", "/")
-				+navItem("Configs", "configs", "fas fa-wrench", "/configs")
+				+navItem("Settings", "settings", "fas fa-wrench", "/settings")
 				+navItem("Logout", "logout", "fas fa-sign-out-alt", "/logout")
 			else
 				+navItem("Register", "register", "fas fa-user-plus", "/register")

bin/web/views/index.pug

@@ -1,8 +1,8 @@
 extends blocks/layout.pug
 append var
 	if(session && session.user)
-		- var breadcrumb = {0: {"name": "authRXBN", "href": "/"}, 1: {"name": "Dashboard", "active": true}};
-		- var title = "Dashboard";
+		- var breadcrumb = {0: {"name": cfg.app.name, "href": "/"}, 1: {"name": "Apps", "active": true}};
+		- var title = "Apps";
 
 mixin item(name, id, description)
 	div

bin/web/views/login.pug

@@ -1,7 +1,7 @@
 extends blocks/layout.pug
 append var
 	if(session && !session.user)
-		- var breadcrumb = {0: {"name": "authRXBN", "href": "/"}, 1: {"name": "Login", "active": true}};
+		- var breadcrumb = {0: {"name": cfg.app.name, "href": "/"}, 1: {"name": "Login", "active": true}};
 		- var title = "Login";
 
 append content
@@ -13,7 +13,7 @@ append content
 				#login_msg.uk-alert(data-uk-alert).uk-hidden
 					a.uk-close-alt.uk-alert-close(href="#")
 					p
-				form.uk-form-horizontal
+				form.uk-form-horizontal(onsubmit="return loginEvent();")
 					.uk-margin
 						label.uk-form-label(for="login_user") Username / Email
 						.uk-form-controls
@@ -22,6 +22,7 @@ append content
 						label.uk-form-label(for="login_pass") Password
 						.uk-form-controls
 							input.uk-input#login_pass(type="password")
+					input(hidden,type="submit")
 				button(onclick="login()").uk-button.uk-button-default Login
 			div(class="uk-width-auto uk-width-1-4@s")
 	else

bin/web/views/logout.pug

@@ -1,7 +1,7 @@
 extends blocks/layout.pug
 append var
 	if(session && session.user)
-		- var breadcrumb = {0: {"name": "authRXBN", "href": "/"}, 1: {"name": "Logout", "active": true}};
+		- var breadcrumb = {0: {"name": cfg.app.name, "href": "/"}, 1: {"name": "Logout", "active": true}};
 		- var title = "Logout";
 
 append content

bin/web/views/register.pug

@@ -1,7 +1,7 @@
 extends blocks/layout.pug
 append var
 	if(cfg && cfg.web.registration && session && !session.user)
-		- var breadcrumb = {0: {"name": "authRXBN", "href": "/"}, 1: {"name": "Register", "active": true}};
+		- var breadcrumb = {0: {"name": cfg.app.name, "href": "/"}, 1: {"name": "Register", "active": true}};
 		- var title = "Register";
 
 append content

bin/web/views/request.pug

@@ -1,7 +1,7 @@
 extends blocks/layout.pug
 append var
 	if(session && session.user)
-		- var breadcrumb = {0: {"name": "authRXBN", "href": "/"}, 1: {"name": "Authorization", "active": true}};
+		- var breadcrumb = {0: {"name": cfg.app.name, "href": "/"}, 1: {"name": "Authorization", "active": true}};
 		- var title = "authorize App";
 
 append content

bin/web/views/reset.pug

@@ -1,7 +1,7 @@
 extends blocks/layout.pug
 append var
 	if(session && !session.user)
-		- var breadcrumb = {0: {"name": "authRXBN", "href": "/"}, 1: {"name": "Forgot your password?", "active": true}};
+		- var breadcrumb = {0: {"name": cfg.app.name, "href": "/"}, 1: {"name": "Forgot your password?", "active": true}};
 		- var title = "Reset password";
 
 append content

res/web/js/custom.js

@@ -1,3 +1,7 @@
+function loginEvent() {
+	login();
+	return false;
+}
 function login() {
 	let user = document.getElementById("login_user").value;
 	let pass = document.getElementById("login_pass").value;
@@ -14,15 +18,20 @@ function login() {
 	ajax.onload = () => {
 		let json = JSON.parse(ajax.responseText);
 		let box = document.getElementById("login_msg");
-		if(json.message && json.message == "msg.auth.login.successful") {
-			if(window.location.pathname == "/authenticate" && getParameterByName("appId")) window.location.href= "/authenticate";
-			else window.location.href= "/";
 
 		box.classList.remove("uk-hidden");
+		box.classList.remove("uk-alert-success");
+		box.classList.remove("uk-alert-danger");
+
+		if(json.message && json.message == "msg.auth.login.successful") {
+			setTimeout(function () {
+				if(window.location.pathname == "/authenticate" && getParameterByName("appId")) window.location.href= "/authenticate";
+				else window.location.href= "/";
+			}, 150);
+
 			box.classList.add("uk-alert-success");
 			box.getElementsByTagName("p")[0].innerHTML = "Logged in. You will be redirected";
 		} else if(json.message && json.message == "msg.auth.login.failed") {
-			box.classList.remove("uk-hidden");
 			box.classList.add("uk-alert-danger");
 			box.getElementsByTagName("p")[0].innerHTML = "Login failed.<br> Username or Password is wrong.";
 		}