From 2d35b2b5e9c706262007f7fc22ecb0f82f5ef557 Mon Sep 17 00:00:00 2001
From: Anton Livaja <anton@livaja.me>
Date: Sat, 12 Oct 2024 15:37:08 -0400
Subject: [PATCH] minor fixes and cleanup

---
 _includes/header.html |  1 -
 _layouts/wizard.html  |  5 +++-
 assets/js/main.js     | 58 +++++++++++++++++++++++++++++--------------
 3 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index fe76347..d10b834 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -33,4 +33,3 @@
     </div>
   </div>
 </header>
-  <script type="text/javascript" src="/assets/js/main.js"></script>
diff --git a/_layouts/wizard.html b/_layouts/wizard.html
index 6a26af4..c7e6d7f 100644
--- a/_layouts/wizard.html
+++ b/_layouts/wizard.html
@@ -148,6 +148,7 @@
                     <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 class="error-field" id="kyc_threshold_error"></div>
 
                     <p>
                         Please select KYC data for individuals who can
@@ -166,9 +167,11 @@
                             id_images = ["<base_64_encoded_image>", "<base_64_encoded_image>", ...]
                             country_of_birth = "US"
                         </code>
-                </pre>
+                    </pre>
 
                     <input type="file" id="kyc_data" name="files[]" multiple>
+                    <br>
+                    <div class="error-field" id="kyc_data_error"></div>
                 </div>
             </section>
 
diff --git a/assets/js/main.js b/assets/js/main.js
index 1500365..768e73a 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -23,19 +23,18 @@ function applyTheme() {
     }
 }
 
-toggleButton.addEventListener('click', () => {
-    if (htmlElement.classList.contains('dark-theme')) {
-        htmlElement.classList.remove('dark-theme');
-        localStorage.setItem('theme', 'light');
-    } else {
-        htmlElement.classList.add('dark-theme');
-        localStorage.setItem('theme', 'dark');
-    }
-});
+// toggleButton.addEventListener('click', () => {
+//     if (htmlElement.classList.contains('dark-theme')) {
+//         htmlElement.classList.remove('dark-theme');
+//         localStorage.setItem('theme', 'light');
+//     } else {
+//         htmlElement.classList.add('dark-theme');
+//         localStorage.setItem('theme', 'dark');
+//     }
+// });
 
 // Load the saved theme on page load
 window.onload = () => {
-    console.log('ih')
     // applyTheme();
     resetFormFields()
 };
@@ -105,7 +104,6 @@ async function extractValues() {
 
     const pubKeysEl = document.getElementById('pub_keys');
     const pubKeys = pubKeysEl.files;
-
     let pubKeyData = [];
     for (let i = 0; i < pubKeys.length; i++) {
         const pubKeyFile = pubKeys[i];
@@ -132,8 +130,14 @@ async function extractValues() {
     }
 
     const kycDataEl = document.getElementById('kyc_data');
-    const kycData = kycDataEl.files;
-    if (kycData) {
+    const kycDataFiles = kycDataEl.files;
+    let kycData = [];
+    for (let i = 0; i < kycDataFiles.length; i++) {
+        const kycDataFile = kycDataFiles[i];
+        const fileText = await readFileAsText(kycDataFile);
+        kycData.push(fileText);
+    }
+    if (kycData.length) {
         policy.kyc_data = kycData;
         console.log(kycData);
     }
@@ -173,10 +177,8 @@ function validateThreshold(threshold) {
         threshold,
     };
 
-    console.log('threshold', threshold)
     if (valid) {
         const numbers = threshold.split('/');
-        console.log('numbers', numbers)
         if (Number(numbers[0]) > Number(numbers[1])) {
             res.error = "Error: first number has to be lesser than second.";
         } else {
@@ -318,19 +320,39 @@ remoteThresholdEl.addEventListener('input', function () {
     }
 });
 
+const kycThresholdEl = document.getElementById('kyc_threshold');
+kycThresholdEl.addEventListener('input', function () {
+    const kycThresholdErrorEl = document.getElementById('kyc_threshold_error');
+    kycThresholdErrorEl.innerText = "";
+    const currentValue = kycThresholdEl.value;
+    const thresholdRes = validateThreshold(currentValue)
+    if (thresholdRes.error) {
+        kycThresholdErrorEl.innerText = thresholdRes.error;
+    }
+});
+
 const pubKeysErrorEl = document.getElementById('pub_keys_error');
 const pubKeys = document.getElementById('pub_keys')
 pubKeys.addEventListener('change', function () {
     pubKeysErrorEl.innerText = "";
     const res = validateThreshold(remoteThresholdEl.value);
-    console.log(res, remoteThresholdEl)
     if (pubKeys.files.length < res.threshold.split('/')[1] || !res || !res.threshold) {
-        console.log('uhoh')
-        pubKeysErrorEl.innerText = "Please select a valid threshold";
+        pubKeysErrorEl.innerText = "Please select a valid threshold or upload the correct number of public key files.";
         pubKeys.value = "";
     }
 });
 
+const kycDataErrorEl = document.getElementById('kyc_data_error');
+const kycData = document.getElementById('kyc_data')
+kycData.addEventListener('change', function () {
+    kycDataErrorEl.innerText = "";
+    const res = validateThreshold(kycThresholdEl.value);
+    if (kycData.files.length < res.threshold.split('/')[1] || !res || !res.threshold) {
+        kycDataErrorEl.innerText = "Please select a valid threshold or upload the correct number of public key files.";
+        kycData.value = "";
+    }
+});
+
 let kycAvailableEl = document.getElementById('kyc_available');
 kycAvailableEl.addEventListener('input', function () {
     let currentValue = kycAvailableEl.value;