const session = require("express-session");
const bcrypt = require("bcrypt");
const path = require("path");
+const nunjucks = require("nunjucks");
try {
var lmno_config = require("./lmno-config.json");
saveUninitialized: false
}));
+nunjucks.configure("templates", {
+ autoescape: true,
+ express: app
+});
+
/* Load each of our game mini-apps. */
var empires = require("./empires");
return;
}
- response.sendFile(path.join(__dirname, './login.html'));
+ response.render('login.html');
});
app.post('/login', async (request, response) => {
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8"/>
- <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
-
- <title>LMNO: Login</title>
-
- <link rel="stylesheet" href="/reset.css" type="text/css" />
- <link rel="stylesheet" href="/style.css" type="text/css" />
- </head>
- <body>
-
- <script src="/lmno.js"></script>
-
- <div id="page">
-
- <div id="message-area">
- </div>
-
- <!-- The return false prevents the page from being reloaded -->
- <form id="login-form" onsubmit="lmno_login(this); return false">
- <div class="form-field large">
- <label for="username">Username</label>
- <input type="text" id="username" required>
- </div>
-
- <div class="form-field large">
- <label for="Password">Password</label>
- <input type="password" id="password" required>
- </div>
-
- <div class="form-field large">
- <button type="submit">
- Login
- </button>
- </div>
- </form>
-
- </div>
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8"/>
+ <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
+
+ <title>{{ title }}</title>
+
+ <link rel="stylesheet" href="/reset.css" type="text/css" />
+ <link rel="stylesheet" href="/style.css" type="text/css" />
+
+ <script>
+ function undisplay(element) {
+ element.style.display="none";
+ }
+
+ function add_message(severity, message) {
+ message = `<div class="message ${severity}" onclick="undisplay(this)">
+<span class="hide-button" onclick="undisplay(this.parentElement)">×</span>
+${message}
+</div>`;
+ const message_area = document.getElementById('message-area');
+ message_area.insertAdjacentHTML('beforeend', message);
+ }
+ </script>
+ {% block head %}
+ {% endblock %}
+
+ </head>
+ <body>
+
+ <div id="page">
+
+ <div id="message-area">
+ </div>
+
+ {% block page %}
+ {% endblock %}
+
+ </div>
+ </body>
+</html>
--- /dev/null
+{% extends "base.html" %}
+
+{% block head %}
+<script>
+ function lmno_login_loadend(request, username) {
+ if (request.status === 404) {
+ add_message("danger", "User authentication failed. Please try again.");
+ return;
+ }
+
+ /* Now that user is logged in, advance to the desired page (if any). */
+ const url = new URL(window.location);
+ const next_param = url.searchParams.get('next');
+ if (next_param) {
+ window.location.href = next_param;
+ return;
+ }
+
+ /* Otherwise, just report the successful login. */
+ add_message("success", `User ${username} logged in. Have fun.`);
+}
+
+function lmno_login(form) {
+ const username = form.username.value;
+ const password = form.password.value;
+
+ console.log("In lmno_login with username: " + username);
+ var request = new XMLHttpRequest();
+ request.addEventListener("loadend", () => lmno_login_loadend(request, username));
+
+ request.open("POST", "/login");
+ request.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
+ request.send(`{"username": "${username}", "password": "${password}"}`);
+}
+</script>
+{% endblock %}
+
+{% block page %}
+<!-- The return false prevents the page from being reloaded -->
+<form id="login-form" onsubmit="lmno_login(this); return false">
+ <div class="form-field large">
+ <label for="username">Username</label>
+ <input type="text" id="username" required>
+ </div>
+
+ <div class="form-field large">
+ <label for="Password">Password</label>
+ <input type="password" id="password" required>
+ </div>
+
+ <div class="form-field large">
+ <button type="submit">
+ Login
+ </button>
+ </div>
+</form>
+{% endblock %}