From c1e589ae186f77f717e1784176d6a2e048107e54 Mon Sep 17 00:00:00 2001
From: jessikitty <jess.rogerson.29@outlook.com>
Date: Wed, 10 Dec 2025 10:43:31 +1100
Subject: [PATCH] Add setup template for first-run admin creation

---
 templates/setup.html | 87 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 templates/setup.html
diff --git a/templates/setup.html b/templates/setup.html
new file mode 100644
index 0000000..e6c753c
--- /dev/null
+++ b/templates/setup.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Setup - Raccoon Timekeeper</title>
+    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body class="auth-page">
+    <div class="auth-container">
+        <div class="auth-card setup-card">
+            <div class="auth-header">
+                <div class="logo-icon large">🦝</div>
+                <h1>Welcome to Raccoon Timekeeper</h1>
+                <p>Let's set up your admin account</p>
+            </div>
+
+            {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+            <div class="auth-messages">
+                {% for category, message in messages %}
+                <div class="flash-message flash-{{ category }}">{{ message }}</div>
+                {% endfor %}
+            </div>
+            {% endif %}
+            {% endwith %}
+
+            <form method="POST" class="auth-form">
+                <div class="form-group">
+                    <label for="username">Username *</label>
+                    <input type="text" id="username" name="username" required autofocus
+                           placeholder="Choose a username (min 3 characters)"
+                           minlength="3">
+                </div>
+
+                <div class="form-group">
+                    <label for="email">Email *</label>
+                    <input type="email" id="email" name="email" required
+                           placeholder="admin@example.com">
+                </div>
+
+                <div class="form-group">
+                    <label for="display_name">Display Name</label>
+                    <input type="text" id="display_name" name="display_name"
+                           placeholder="How should we call you? (optional)">
+                </div>
+
+                <div class="form-group">
+                    <label for="password">Password *</label>
+                    <input type="password" id="password" name="password" required
+                           placeholder="Min 8 characters" minlength="8">
+                </div>
+
+                <div class="form-group">
+                    <label for="confirm_password">Confirm Password *</label>
+                    <input type="password" id="confirm_password" name="confirm_password" required
+                           placeholder="Enter password again" minlength="8">
+                </div>
+
+                <button type="submit" class="btn btn-primary btn-full">
+                    Create Admin Account
+                </button>
+            </form>
+
+            <div class="auth-footer">
+                <p class="setup-note">
+                    <strong>Note:</strong> This will be the administrator account. 
+                    You can add more users after setup.
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        document.querySelector('form').addEventListener('submit', function(e) {
+            const password = document.getElementById('password').value;
+            const confirm = document.getElementById('confirm_password').value;
+            
+            if (password !== confirm) {
+                e.preventDefault();
+                alert('Passwords do not match!');
+            }
+        });
+    </script>
+</body>
+</html>
