Convert rendering of login.html to use a nunjucks template

[empires-server] / templates / login.html

diff --git a/templates/login.html b/templates/login.html
new file mode 100644 (file)
index 0000000..5767316
--- /dev/null
+++ b/templates/login.html
@@ -0,0 +1,57 @@
+{% 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 %}