Merge branch 'development'

maschinendeck · Oct 7, 2021 · 7a25464 · 7a25464
2 parents e99b7e8 + c2e8ec1
commit 7a25464
Show file tree

Hide file tree

Showing 19 changed files with 204 additions and 125 deletions.
diff --git a/bin/usermanager.js b/bin/usermanager.js
@@ -185,11 +185,14 @@ const updateUser = async () => {
 				user.password = User.HashPassword(value, user.salt);				
 				continue;
 			}
-
-			user[key] = value;
+			if (key === "email")
+				user[key] = value.toLowerCase();
+			else
+				user[key] = value;
 		}
 		user.save();
 		console.log(answers);
+		mainREPL();
 	});
 }
 
@@ -279,10 +282,10 @@ Passwort    : ${initialPassword}
 		const newUser         = User.build({
 			firstname,
 			lastname,
-			email,
+			email     : email.toLowerCase(),
 			nickname,
-			salt     : salt,
-			password : User.HashPassword(initialPassword, salt),
+			salt      : salt,
+			password  : User.HashPassword(initialPassword, salt),
 			role
 		});
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mdos-web",
-  "version": "0.0.1",
+  "version": "1.0.1",
   "description": "The frontend of MDoS exposed to the world - includes user, rights and access management",
   "main": "main.js",
   "scripts": {

diff --git a/public/assets/icon_logout.svg b/public/assets/icon_logout.svg
diff --git a/public/css/_header.scss b/public/css/_header.scss
@@ -9,4 +9,13 @@ header {
 	img {
 		max-width: 4rem;
 	}
+}
+
+.version {
+	position: absolute;
+	top: 0.5rem;
+	left: 0.5rem;
+	font-size: 0.5rem;
+	color: #555;
+	z-index: 1000;
 }
diff --git a/public/css/_icons.scss b/public/css/_icons.scss
@@ -0,0 +1,7 @@
+h1 svg {
+	color: $blue;
+	margin-left: 1rem;
+	font-size: 1.2rem;
+	vertical-align: middle;
+	cursor: pointer;
+}
diff --git a/public/css/mdos.scss b/public/css/mdos.scss
@@ -7,6 +7,7 @@
 @import "footer";
 @import "alert";
 @import "spinner";
+@import "icons";
 
 * {
 	box-sizing: border-box;

diff --git a/public/index.html b/public/index.html
@@ -2,23 +2,23 @@
 <html>
 <head>
 	<title>MDoS</title>
-	<link rel=stylesheet type=text/css href=css/mdos.css />
+	<link rel=stylesheet type=text/css href=/css/mdos.css />
 	<meta name=viewport content="width=device-width, initial-scale=1.0, user-scalable=no" />
 	<meta name="apple-mobile-web-app-title" content="MDoS" />
 	<meta name="apple-mobile-web-app-capable" content="yes" />
 	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-	<link rel="apple-touch-icon" sizes="120x120" href="assets/appIcon@120.png" />
-	<link rel="apple-touch-icon" sizes="152x152" href="assets/appIcon@152.png" />
-	<link rel="apple-touch-icon" sizes="167x167" href="assets/appIcon@167.png" />
-	<link rel="apple-touch-icon" sizes="180x180" href="assets/appIcon@180.png" />
-	<link rel="apple-touch-icon" sizes="1024x1024" href="assets/appIcon@1024.png" />
-	<script type=module src=javascript/mdos.min.js></script>
+	<link rel="apple-touch-icon" sizes="120x120" href="/assets/appIcon@120.png" />
+	<link rel="apple-touch-icon" sizes="152x152" href="/assets/appIcon@152.png" />
+	<link rel="apple-touch-icon" sizes="167x167" href="/assets/appIcon@167.png" />
+	<link rel="apple-touch-icon" sizes="180x180" href="/assets/appIcon@180.png" />
+	<link rel="apple-touch-icon" sizes="1024x1024" href="/assets/appIcon@1024.png" />
+	<script type=module src=/javascript/mdos.min.js></script>
 </head>
 <body>
-
-<section class="view" id=view_login>
+<span class=version>Version 0.0.0-dev</span>
+<section class="view" data-view=login id=view_login data-default="1">
 	<header>
-		<img src=assets/logo_maschinendeck.svg alt="Logo des Maschinendeck Trier e.V." />
+		<img src=/assets/logo_maschinendeck.svg alt="Logo des Maschinendeck Trier e.V." />
 		<p>
 			Maschinendeck Trier e.V.
 		</p>
@@ -27,19 +27,25 @@ <h1>Türsystem</h1>
 	<main id=login>
 		<form id="loginForm" method="POST">
 			<input type=text name=username id=username placeholder=E-Mail />
-			<input type=password name=password id=password placeholder=Password />
+			<input type=password name=password id=password placeholder=Password autocomplete="off" />
 			<button class=blue id=loginButton>Login</button>
-			<a href="#forgotPassword">Passwort vergessen?</a>
+			<a href="/forgotPassword">Passwort vergessen?</a>
 		</form>
 	</main>
 </section>
-<section class="view" id=view_menu>
+<section class="view" data-view=menu id=view_menu>
 	<header>
-		<img src=assets/logo_maschinendeck.svg alt="Logo des Maschinendeck Trier e.V." />
+		<img src=/assets/logo_maschinendeck.svg alt="Logo des Maschinendeck Trier e.V." />
 		<p>
 			Maschinendeck Trier e.V.
 		</p>
-		<h1>Türsystem</h1>
+		<h1>
+			Türsystem
+			<svg id="logoutButton" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-box-arrow-right" viewBox="0 0 16 16">
+				<path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/>
+			<path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
+			</svg>
+		</h1>
 	</header>
 	<main>
 		<button id=open class=green>öffnen</button>
@@ -48,7 +54,7 @@ <h1>Türsystem</h1>
 	</main>
 </section>
 
-<section class="view" id=view_keypad style="z-index: 250;">
+<section class="view" data-view="keypad" id=view_keypad style="z-index: 250;">
 	<header>
 		<input type=text name=pin id=display maxlength="4" value="" pattern="[0-9]{4}" readonly/>
 	</header>
@@ -74,9 +80,9 @@ <h1>Türsystem</h1>
 	</main>
 </section>
 
-<section class="view" id=view_forgotPassword>
+<section class="view" data-view=forgotPassword id=view_forgotPassword>
 	<header>
-		<img src=assets/logo_maschinendeck.svg alt="Logo des Maschinendeck Trier e.V." />
+		<img src=/assets/logo_maschinendeck.svg alt="Logo des Maschinendeck Trier e.V." />
 		<p>
 			Maschinendeck Trier e.V.
 		</p>
@@ -96,9 +102,9 @@ <h1>Türsystem</h1>
 	</main>
 </section>
 
-<section class="view" id=view_changePassword>
+<section class="view" data-view=changePassword id=view_changePassword>
 	<header>
-		<img src=assets/logo_maschinendeck.svg alt="Logo des Maschinendeck Trier e.V." />
+		<img src=/assets/logo_maschinendeck.svg alt="Logo des Maschinendeck Trier e.V." />
 		<p>
 			Maschinendeck Trier e.V.
 		</p>
@@ -112,12 +118,15 @@ <h1>Türsystem</h1>
 			</span>
 		</p>
 		<form id="changePasswordForm" method="POST">
-			<input type=password name=chPassword id=chPassword placeholder=Passwort />
-			<input type=password name=chPasswordConfirm id=chPasswordConfirm placeholder="Passwort widerholen" />
+			<input type=password name=chPassword id=chPassword placeholder=Passwort autocomplete="off" />
+			<input type=password name=chPasswordConfirm id=chPasswordConfirm placeholder="Passwort widerholen" autocomplete="off" />
 			<button class=blue id=chSendButton>Passwort ändern</button>
 		</form>
 	</main>
 </section>
+<section class=view data-view=notfound>
+	<h2>404 Seite nicht gefunden</h2>
+</section>
 
 <footer>
 

diff --git a/public/javascript/Keypad.js b/public/javascript/Keypad.js
@@ -1,6 +1,7 @@
 import {$}     from "./Q6.js";
 import APICall from "./APICall.js";
 import Alert   from "./Alert.js";
+import {Visit} from "./Router.js";
 class Keypad {
 	constructor(navigator) {
 		this.navigator = navigator;
@@ -85,7 +86,8 @@ class Keypad {
 				case 200:
 					new Alert(Alert.Type.Success, "Der Code war korrekt. Die Tür wird geöffnet.");
 					this.clearDisplay();
-					this.navigator.changeView(this.navigator.views.menu);
+					//this.navigator.changeView(this.navigator.views.menu);
+					Visit("/menu");
 					break;
 				case 405:
 					new Alert(Alert.Type.ERROR, `Dir fehlt die Berechtigung diese Aktion durchzuführen`);
@@ -94,7 +96,8 @@ class Keypad {
 				case 508:
 					new Alert(Alert.Type.ERROR, "Der angegebene Code war inkorrekt.");
 					this.clearDisplay();
-					this.navigator.changeView(this.navigator.views.menu);
+					//this.navigator.changeView(this.navigator.views.menu);
+					Visit("/menu");
 					return;
 				default:
 					new Alert(Alert.Type.ERROR, `Etwas ist schiefgelaufen [Code ${response.code}]`);

diff --git a/public/javascript/Login.js b/public/javascript/Login.js
@@ -1,16 +1,27 @@
 import {$}     from "./Q6.js";
 import APICall from "./APICall.js";
+import {Visit} from "./Router.js";
+import Alert   from "./Alert.js";
 
-const Login = (navigator, jwt, setJWT) => {
+const Login = (router, jwt, setJWT) => {
 
 	const container         = $("#login");
 	const usernameContainer = $("#username");
 	const passwordContainer = $("#password");
+	const logoutButton      = $("#logoutButton");
 	const form              = $("#loginForm");
 
+	logoutButton.on("click", () => {
+		setJWT(null);
+		Visit("login");
+	});
+
 	if (jwt) {
 		APICall.JWT = jwt;
-		navigator.login();
+		if (router.path.length < 1) {
+			Visit("/menu");
+			console.log("loggedin");
+		}
 	}
 
 	const login = () => {
@@ -35,9 +46,10 @@ const Login = (navigator, jwt, setJWT) => {
 			}
 			setJWT(response.data.jwt);
 			APICall.JWT = response.data.jwt;
-			navigator.changeView(navigator.views.menu);
+			Visit("/menu");
 			passwordContainer.val("");
 		}).catch(error => {
+			new Alert(Alert.Type.ERROR, "Es besteht ein Problem mit der Kommunikation zum Login-Endpunkt.");
 			console.log("error", error);
 		});
 	}

diff --git a/public/javascript/MDoS.js b/public/javascript/MDoS.js
@@ -1,20 +1,25 @@
 import useLocalStorage from "./hooks/useLocalStorage.js";
 
 import {$}           from "./Q6.js";
+import Router        from "./Router.js";
 import Navigator     from "./Navigator.js";
 import Keypad        from "./Keypad.js";
 import Login         from "./Login.js";
 import Password      from "./Password.js";
 import PasswordReset from "./PasswordReset.js";
 
+import {version} from "../../package.json";
+
 $(document).ready(() => {
+	$(".version").html(`Version ${version}`);
 	const [jwt, setJWT] = useLocalStorage("jwt", null);
 
+	const router    = new Router();
 	const navigator = new Navigator(jwt, setJWT);
-	Login(navigator, jwt, setJWT);
+	Login(router, jwt, setJWT);
 	new Keypad(navigator);
 	new Password();
-	new PasswordReset(navigator);
+	new PasswordReset();
 }).on("touchmove", (_, event) => {
 	event.preventDefault();
 });