Add login/logout button on header

public/css/main.css

@@ -43,7 +43,7 @@ form>div {
 	margin: 0.3em;
 }
 
-.file_button::-webkit-file-upload-button, button {
+.file_button::-webkit-file-upload-button, button, .login, .logout {
 	border-radius: 0.3em;
 	border-width: 0em;
 	padding: 0.5em;
@@ -65,3 +65,24 @@ form>div {
 }
 
 
+header {
+	display: flex;
+	position: absolute;
+	right: 0;
+	margin: 0.5em;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.hy {
+	margin-right: 1em;
+}
+
+.login, .logout {
+	background-color: buttonface;
+	text-decoration: none;
+	color: initial;
+	width: fit-content;
+	height: fit-content;
+}
+

routes/error.js

@@ -1,6 +1,6 @@
 module.exports = (err, req, res, next) => {
 	console.error(err.stack);
 	res.status(500);
-	res.render("error");
+	res.render("error", {session: req.session});
 }
 

routes/index.js

@@ -7,7 +7,7 @@ router.get("/", isAuth, (req, res) => {
 	if ("invalidType" in req.query) {
 		invalidType = true;
 	}
-	res.render("index", {invalidType: invalidType});
+	res.render("index", {invalidType: invalidType, session: req.session});
 });
 
 

routes/list.js

@@ -5,7 +5,7 @@ let fs = require("fs");
 
 router.get("/", isAuth, (req, res, next) => {
 	let images = fs.readdirSync("./images/");
-	res.render("list", {images: images});
+	res.render("list", {images: images, session: req.session});
 });
 
 

routes/login.js

@@ -15,7 +15,7 @@ router.get("/", (req, res) => {
 		if ("path" in req.query) {
 			path = req.query.path;
 		}
-		res.render("login", {title: "login", fail: fail, path: path});
+		res.render("login", {title: "login", fail: fail, path: path, session: req.session});
 	}
 });
 
@@ -24,6 +24,7 @@ router.post("/", (req, res) => {
 		file = JSON.parse(fs.readFileSync("users.json"));
 		if (req.body.username in file && passwordHash.verify(req.body.password, file[req.body.username])) {
 			req.session.login = true;
+			req.session.username = req.body.username;
 			req.session.save();
 			if ("path" in req.query) {
 				res.redirect(req.query.path);

routes/notFound.js

@@ -3,7 +3,7 @@ let router = require("express").Router();
 
 router.use((req, res) => {
 	res.status(404);
-	res.render("404", {url: req.path});
+	res.render("404", {url: req.path, session: req.session});
 });
 
 

views/layout.pug

@@ -8,5 +8,11 @@ html(lang="en")
 			title Image Node
 		link(rel="stylesheet", href="/css/main.css")
 	body
+		header
+			if session.login
+				p.hy Hy #{session.username} !
+				a.logout(href="/logout") Logout
+			else
+				a.login(href="/login") Login
 		block content