From 53a1ceab759988b078fb9db7ff9d11d205f4dc11 Mon Sep 17 00:00:00 2001
From: agentbox <agentbox@cozytren.ch>
Date: Fri, 31 Jul 2026 22:04:59 +0000
Subject: [PATCH] Fix: household name input visible on page load when creating
 new household

---
 templates/register.html | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/templates/register.html b/templates/register.html
index e6564b1..5d2c9e9 100644
--- a/templates/register.html
+++ b/templates/register.html
@@ -17,9 +17,7 @@
             <legend>Household</legend>
 
             <label class="radio-label">
-                <input type="radio" name="household_action" value="join" checked
-                       onchange="document.getElementById('join-block').hidden=false;
-                                document.getElementById('create-block').hidden=true;">
+                <input type="radio" name="household_action" value="join" id="radio-join" checked>
                 Join an existing household
             </label>
             <div id="join-block" class="household-block">
@@ -35,13 +33,11 @@
             </div>
 
             <label class="radio-label">
-                <input type="radio" name="household_action" value="create"
-                       onchange="document.getElementById('join-block').hidden=true;
-                                document.getElementById('create-block').hidden=false;"
+                <input type="radio" name="household_action" value="create" id="radio-create"
                        {% if not households %}checked{% endif %}>
                 Create a new household
             </label>
-            <div id="create-block" class="household-block" hidden>
+            <div id="create-block" class="household-block">
                 <input type="text" name="new_household_name"
                        placeholder="Household name (e.g. The Smiths)"
                        class="text-input">
@@ -55,4 +51,21 @@
         Already have an account? <a href="{{ url_for('auth.login') }}">Log in</a>
     </p>
 </div>
+
+<script>
+(function() {
+    var joinBlock = document.getElementById('join-block');
+    var createBlock = document.getElementById('create-block');
+    var radioJoin = document.getElementById('radio-join');
+    var radioCreate = document.getElementById('radio-create');
+
+    function sync() {
+        joinBlock.hidden = !radioJoin.checked;
+        createBlock.hidden = !radioCreate.checked;
+    }
+    radioJoin.onchange = sync;
+    radioCreate.onchange = sync;
+    sync();
+})();
+</script>
 {% endblock %}