From f5b0caf19407d31359fc45a29dc2b660008f244f Mon Sep 17 00:00:00 2001
From: Michael Skrynski <zlorfi@gmail.com>
Date: Sun, 12 Apr 2026 20:49:45 +0200
Subject: [PATCH] Add Terms of Service modal to registration flow

Add a modal with EDH Stats Tracker's Terms of Service and Privacy
Policy. The modal is triggered by a link next to the "I agree" checkbox.
It includes an "I Agree" button to validate acceptance and a close
button. The modal is dismissed on click outside or via the dedicated
buttons, ensuring a seamless user experience for new registrations.
---
 frontend/src/routes/register/+page.svelte | 194 +++++++++++++++++++++-
 frontend/static/version.txt               |   2 +-
 2 files changed, 194 insertions(+), 2 deletions(-)

diff --git a/frontend/src/routes/register/+page.svelte b/frontend/src/routes/register/+page.svelte
index 183b4c2..7ec5e4b 100644
--- a/frontend/src/routes/register/+page.svelte
+++ b/frontend/src/routes/register/+page.svelte
@@ -18,6 +18,7 @@
   let serverError = "";
   let successMessage = "";
   let allowRegistration = true;
+  let showTermsModal = false;
 
   onMount(() => {
     (async () => {
@@ -358,7 +359,14 @@
                   class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded mt-1"
                 />
                 <label for="terms" class="ml-2 block text-sm text-gray-900">
-                  I agree to the Terms of Service and Privacy Policy
+                  I agree to the
+                  <button
+                    type="button"
+                    class="text-indigo-600 hover:text-indigo-500 underline-offset-4 underline"
+                    on:click={() => (showTermsModal = true)}
+                  >
+                    Terms of Service
+                  </button>
                 </label>
               </div>
               {#if errors.terms}
@@ -421,3 +429,187 @@
     </div>
   </div>
 </div>
+
+{#if showTermsModal}
+  <div class="fixed inset-0 z-40 flex items-center justify-center">
+    <div
+      class="absolute inset-0 bg-gray-900 bg-opacity-50"
+      on:click={() => (showTermsModal = false)}
+    ></div>
+    <div
+      class="relative z-50 w-full max-w-3xl mx-4 bg-white rounded-2xl shadow-2xl flex flex-col max-h-[90vh]"
+    >
+      <div
+        class="flex items-center justify-between border-b border-gray-200 px-6 py-4"
+      >
+        <div>
+          <p class="text-sm uppercase tracking-wide text-gray-500">
+            Terms of Service
+          </p>
+          <h3 class="text-xl font-semibold text-gray-900">EDH Stats Tracker</h3>
+        </div>
+        <button
+          class="text-gray-400 hover:text-gray-600"
+          on:click={() => (showTermsModal = false)}
+          aria-label="Close terms of service"
+        >
+          <svg
+            class="w-6 h-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      </div>
+      <div class="flex-1 overflow-y-auto p-6 text-gray-700">
+        <p class="text-gray-600 mb-6 text-sm">Last updated: January 2026</p>
+        <div class="prose prose-sm max-w-none">
+          <h2 class="text-2xl font-bold text-gray-900 mt-6 mb-4">
+            Welcome to EDH Stats Tracker
+          </h2>
+          <p class="text-gray-700 mb-4">
+            By creating an account and using EDH Stats Tracker, you agree to
+            these Terms of Service. We've kept them simple and
+            straightforward—no legal jargon that makes your brain hurt. (You're
+            welcome.)
+          </p>
+
+          <h2 class="text-2xl font-bold text-gray-900 mt-6 mb-4">
+            1. What This Service Is
+          </h2>
+          <p class="text-gray-700 mb-4">
+            EDH Stats Tracker is a web application designed to help Magic: The
+            Gathering players track, analyze, and celebrate their EDH/Commander
+            game statistics. We store your game records, commanders, and
+            associated statistics. Think of us as your personal game journal
+            that actually does math for you.
+          </p>
+
+          <h2 class="text-2xl font-bold text-gray-900 mt-6 mb-4">
+            2. User Accounts
+          </h2>
+          <p class="text-gray-700 mb-4">
+            You are responsible for maintaining the confidentiality of your
+            password. You agree not to share your account credentials with
+            anyone else. If someone logs into your account and logs all your
+            games as losses, we'll sympathize, but that's on you.
+          </p>
+          <p class="text-gray-700 mb-4">
+            You represent that the information you provide during registration
+            is accurate and true. If you use a fake name, that's between you and
+            Magic's lore team.
+          </p>
+
+          <h2 class="text-2xl font-bold text-gray-900 mt-6 mb-4">
+            3. Your Content
+          </h2>
+          <p class="text-gray-700 mb-4">
+            All game records, commander lists, notes, and data you enter into
+            EDH Stats Tracker remain your property. We don't own your stats—we
+            just help you organize them. We won't sell your data, trade it for
+            pack equity, or share it with strangers. (We're not monsters.)
+          </p>
+
+          <h2 class="text-2xl font-bold text-gray-900 mt-6 mb-4">
+            4. Acceptable Use
+          </h2>
+          <p class="text-gray-700 mb-4">
+            You agree to use EDH Stats Tracker for its intended purpose:
+            tracking and analyzing your EDH games. Don't use it to harass,
+            deceive, or cause harm to others. Be cool.
+          </p>
+          <p class="text-gray-700 mb-4">
+            Don't try to break the service through hacking, automated attacks,
+            or other malicious means. If you find a security vulnerability,
+            please let us know responsibly instead.
+          </p>
+
+          <h2 class="text-2xl font-bold text-gray-900 mt-6 mb-4">
+            5. Service Availability
+          </h2>
+          <p class="text-gray-700 mb-4">
+            We aim to keep EDH Stats Tracker available and reliable. However,
+            like all software, it may occasionally go down for maintenance or
+            experience technical issues. We're doing our best here.
+          </p>
+          <p class="text-gray-700 mb-4">
+            We reserve the right to make changes to the service, add features,
+            or modify functionality as we see fit. We'll try to keep breaking
+            changes to a minimum.
+          </p>
+
+          <h2 class="text-2xl font-bold text-gray-900 mt-6 mb-4">
+            6. Limitation of Liability
+          </h2>
+          <p class="text-gray-700 mb-4">
+            EDH Stats Tracker is provided "as is." While we work hard to make it
+            great, we don't guarantee it will be perfect or meet every need.
+            We're not liable for data loss, lost wins, or your opponent's lucky
+            top-decks.
+          </p>
+
+          <h2 class="text-2xl font-bold text-gray-900 mt-6 mb-4">
+            7. Changes to Terms
+          </h2>
+          <p class="text-gray-700 mb-4">
+            We may update these Terms of Service from time to time. We'll let
+            you know about significant changes. Your continued use of the
+            service after changes means you accept the new terms.
+          </p>
+
+          <h2 class="text-2xl font-bold text-gray-900 mt-6 mb-4">
+            8. Account Termination
+          </h2>
+          <p class="text-gray-700 mb-4">
+            You can delete your account at any time. Your data will be removed
+            from our systems in accordance with our privacy practices. If you
+            violate these terms, we may disable your account.
+          </p>
+
+          <h2 class="text-2xl font-bold text-gray-900 mt-6 mb-4">
+            9. Questions?
+          </h2>
+          <p class="text-gray-700 mb-4">
+            If you have questions about these terms, please reach out. We're
+            reasonable people (at least we think so).
+          </p>
+
+          <div class="mt-8 p-6 bg-blue-50 border border-blue-200 rounded-lg">
+            <p class="text-blue-900 text-sm">
+              <strong>TL;DR:</strong> Use the service as intended, keep your password
+              safe, it's your responsibility. We'll keep your data private and try
+              to keep the service running. Don't be a jerk. That's it.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="border-t border-gray-200 px-6 py-4 flex justify-end gap-3">
+        <button
+          type="button"
+          class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900"
+          on:click={() => (showTermsModal = false)}
+        >
+          Close
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary"
+          on:click={() => {
+            showTermsModal = false;
+            formData.terms = true;
+            errors.terms = "";
+          }}
+        >
+          I Agree
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/frontend/static/version.txt b/frontend/static/version.txt
index e75da3e..197c4d5 100644
--- a/frontend/static/version.txt
+++ b/frontend/static/version.txt
@@ -1 +1 @@
-2.3.6
+2.4.0