registration page, me endpoint, and minor content tweaks

6 files changed, 121 insertions, 21 deletions

diff --git a/static/default.css b/static/default.css
index c1670c3..1cc3249 100644
--- a/static/default.css
+++ b/static/default.css
@@ -4,15 +4,15 @@ body {
 }
 
 #container {
-    width: 800px;
+    width: 640px;
     margin: auto;
-    padding: 20px;
+    padding: 30px;
     background: rgb(255,255,200);
 }
 
 .problem {
     border: 1px solid black;
-    padding: 0 8px;
-    margin: 8px;
+    padding: 0 10px;
+    margin: 8px 0;
 }
 
diff --git a/static/index.html b/static/index.html
index 3fd75e3..0cc6ec9 100644
--- a/static/index.html
+++ b/static/index.html
@@ -12,12 +12,17 @@
         <div id="layout">
             <div id="container">
                 <div id="content">
-                    <a href="login.html">Login</a>
+                    <div id="login-links" hidden>
+                        <a href="login.html">Login</a> / <a href="register.html">Register</a>
+                    </div>
+                    <span id="logged-in" hidden></span>
                     
                     <h1>C&amp;! Code Golf Leaderboard</h1>
+                    
+                    <p>In normal golf, the goal is to get a ball into a hole in as few swings as possible. Code golf is similar, but instead of swings your success is measured in bytes of source code. The following page contains a list of programming challenges. Your task is, first and foremost, to try to solve them, but secondly you should try to do so with as short a program as possible.</p>
+                    <p>There are no strict rules, choose whatever language you'd like and have fun with it. The goal is to get you coding and thinking. Some of the problems are challenging, especially the last few. Good luck!o</p>
 
-                    <p>In golf, the goal is to get a ball into a hole in as few swings as possible. The goal of code golf is similarly to solve a problem in as few bytes (of source code) as possible. The following is a list of programming challenges. Your task is to try and solve them in Python with as little code as possible measured in bytes.</p>
-
+                    <h2>Problems</h2>
                     
                     <div id="problems">
                         <div class="problem">
@@ -26,8 +31,8 @@
                         </div>
                     </div>
 
-                    <button onclick="fetch_problems()">Refresh Problems</button>
-                       
+                    <p>This leaderboard is lovingly handcrafted by Daniel Hader. The source code is available <a href="https://git.danielhader.net/code_golf.git">here</a> and I encourage you to explore it. There's certainly all sorts of ways to break it and it's hosted on a server that I pay for. Please be respectful to me and the other campers using it. Thanks!</p>
+                    
                     <center>&copy; 2026 Daniel Hader</center>
                 </div>
             </div>
diff --git a/static/login.html b/static/login.html
index c6cd992..ba7e127 100644
--- a/static/login.html
+++ b/static/login.html
@@ -14,15 +14,15 @@
                 <div id="content">
                     <h1>C&amp;! Code Golf Leaderboard</h1>
                     <h2>Login</h2>
-                    <form id="login-form" method="POST" action="/login">
+                    <form id="login-form">
                         <div id="error" hidden>
                             <span id="error-message" style="color: red"></span>
                             <br><br>
                         </div>
-                        <label for="email">Email</label><br>
+                        <label for="login-email">Email</label><br>
                         <input type="text" id="login-email" name="email">
                         <br><br>
-                        <label for="password">Password</label><br>
+                        <label for="login-password">Password</label><br>
                         <input type="password" id="login-password" name="password">
                         <br><br>
                         <input type="submit" value="Login">
diff --git a/static/main.js b/static/main.js
index f18cbef..da3a9d3 100644
--- a/static/main.js
+++ b/static/main.js
@@ -1,5 +1,17 @@
-async function login() {
-    
+async function me() {
+    const response = await fetch("/me");
+    if (response.ok) {
+        const result = await response.json();
+        const span = document.getElementById("logged-in");
+        // this is technically a XSS risk (TODO: deal with it)
+        // in principle it only affects the person who chose their username, but...
+        span.innerHTML = `Logged in as ${result.username}`;
+        span.hidden = false;
+    } else {
+        document.getElementById("login-links").hidden = false;
+        console.log("not logged in? No cookie");
+        console.log(response);
+    }
 }
 
 async function fetch_problems() {
@@ -9,7 +21,6 @@ async function fetch_problems() {
     }
 
     const result = await response.json();
-    console.log(result);
 
     const problems_div = document.getElementById("problems");
     while (problems_div.firstChild) {
@@ -32,12 +43,7 @@ async function fetch_problems() {
 }
 
 async function on_load() {
+    await me();
     await fetch_problems();
-    
-    const login_anchor = document.createElement("a");
-    login_anchor.innerText = "Login / Register";
-    login_anchor.href="google.com";
-    document.getElementById("login-notice").appendChild(login_anchor);
-             
 }
 
diff --git a/static/register.html b/static/register.html
new file mode 100644
index 0000000..5d769a2
--- /dev/null
+++ b/static/register.html
@@ -0,0 +1,39 @@
+<!doctype html>
+
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Code Golf Login</title>
+        <link rel="stylesheet" href="default.css">
+        <script type="text/javascript" src="register.js"></script>
+    </head>
+
+    <body onload="init()">
+        <div id="layout">
+            <div id="container">
+                <div id="content">
+                    <h1>C&amp;! Code Golf Leaderboard</h1>
+                    <h2>Register</h2>
+                    <form id="register-form">
+                        <div id="error" hidden>
+                            <span id="error-message" style="color: red"></span>
+                            <br><br>
+                        </div>
+                        <label for="register-email">Email</label><br>
+                        <input type="text" id="register-email" name="email">
+                        <br><br>
+                        <label for="register-username">Username</label><br>
+                        <input type="text" id="register-username" name="username">
+                        <br><br>
+                        <label for="register-password">Password</label><br>
+                        <input type="password" id="register-password" name="password">
+                        <br><br>
+                        <input type="submit" value="Register">
+                    </form>
+                       
+                    <center>&copy; 2026 Daniel Hader</center>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/static/register.js b/static/register.js
new file mode 100644
index 0000000..09175d6
--- /dev/null
+++ b/static/register.js
@@ -0,0 +1,50 @@
+
+function display_error(message) {
+    document.getElementById("error-message").innerHTML = `Error: ${message}`;
+    document.getElementById("error").hidden = false;
+}
+
+function init() {
+    const form = document.getElementById("register-form");
+    form.addEventListener("submit", async (e) => {
+        e.preventDefault();
+
+        const body = {}
+        new FormData(form).forEach((value, key) => body[key] = value);
+
+        try {
+            console.log();
+            
+            const reg_res = await fetch("/user", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(body)
+            });
+
+            if (!reg_res.ok) {
+                const error = await reg_res.json();
+                display_error(error.error);
+                return;
+            }
+            
+            const log_res = await fetch("/login", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                credentials: "include",
+                body: JSON.stringify(body)
+            });
+
+            if (!log_res.ok) {
+                const error = await log_res.json();
+                display_error(error.error);
+                return;
+            }
+
+            window.location.href = "index.html"
+            
+        } catch (err) {
+            console.log(err);
+            display_error("network error");
+        }
+    });
+}