From 5ce36df0eec41b49a2f4b9a3075fc895371c4ccf Mon Sep 17 00:00:00 2001
From: Anton Livaja <anton@livaja.me>
Date: Mon, 7 Oct 2024 19:28:37 -0400
Subject: [PATCH] feat: toggle sections

---
 _layouts/wizard.html | 61 +++++++++++++++++++++++++++++++-------------
 1 file changed, 43 insertions(+), 18 deletions(-)

diff --git a/_layouts/wizard.html b/_layouts/wizard.html
index d633f4c..094cd83 100644
--- a/_layouts/wizard.html
+++ b/_layouts/wizard.html
@@ -31,16 +31,15 @@
         <option value="false">No</option>
     </select>
 
-    <br>
-    <br>
-
-    <label>What threshold would you like to use for the cryptographic signing recovery method? (2/3, 3/5, 4/7
-        etc)</label>
-    <br>
-    <input type="text" id="remote_threshold" name="remote_threshold">
-    <!-- if is_remote_available is true -->
-    <p>Please select public keys which can be used for recovery:</p>
-    <input type="file" id="pub_keys" name="files[]" multiple>
+    <div id="remote_available_container" class="hidden">
+        <label>What threshold would you like to use for the cryptographic signing recovery method? (2/3, 3/5, 4/7
+            etc)</label>
+        <br>
+        <input type="text" id="remote_threshold" name="remote_threshold">
+        <!-- if is_remote_available is true -->
+        <p>Please select public keys which can be used for recovery:</p>
+        <input type="file" id="pub_keys" name="files[]" multiple>
+    </div>
 
     <br>
     <br>
@@ -56,15 +55,14 @@
     <br>
     <br>
 
-    <label>What threshold would you like to use for the KYC recovery method? (2/3, 3/5, 4/7 etc)</label>
-    <br>
-    <input type="text" id="kyc_threshold" name="kyc_threshold">
+    <div id="kyc_available_container" class="hidden">
+        <label>What threshold would you like to use for the KYC recovery method? (2/3, 3/5, 4/7 etc)</label>
+        <br>
+        <input type="text" id="kyc_threshold" name="kyc_threshold">
 
-    <p>Please select KYC data for individuals who can participate in recovery:</p>
-    <input type="file" id="kyc_data" name="files[]" multiple>
-
-    <br>
-    <br>
+        <p>Please select KYC data for individuals who can participate in recovery:</p>
+        <input type="file" id="kyc_data" name="files[]" multiple>
+    </div>
 
     <label>Are both remote and KYC based recovery required? (If "No", either one can be used for recovery)</label>
     <br>
@@ -160,6 +158,33 @@
 
             return toml;
         }
+
+        let remote_available_el = document.getElementById('remote_available');
+        remote_available_el.addEventListener('input', function() {
+            let currentValue = remote_available_el.value;
+            let remote_available_container = document.getElementById('remote_available_container');
+            if (currentValue == 'true') {
+                remote_available_container.classList.remove('hidden');
+            } else {
+                remote_available_container.classList.add('hidden');
+            }
+        });
+
+        let kyc_available_el = document.getElementById('kyc_available');
+        kyc_available_el.addEventListener('input', function() {
+            let currentValue = kyc_available_el.value;
+            let remote_available_container = document.getElementById('kyc_available_container');
+            if (currentValue == 'true') {
+                remote_available_container.classList.remove('hidden');
+            } else {
+                remote_available_container.classList.add('hidden');
+            }
+        });
     </script>
 
+    <style>
+        .hidden {
+            display: none;
+        }
+    </style>
 </body>
\ No newline at end of file