From 5ddbdffbffcee5d324647c3d99e6fcf7bd96eb1c Mon Sep 17 00:00:00 2001
From: Anton Livaja <anton@livaja.me>
Date: Tue, 8 Oct 2024 12:40:31 -0400
Subject: [PATCH] moar

---
 _layouts/wizard.html | 146 +++++++++++++++++++++++++++++++------------
 1 file changed, 105 insertions(+), 41 deletions(-)

diff --git a/_layouts/wizard.html b/_layouts/wizard.html
index 6d9950e..31b0fd8 100644
--- a/_layouts/wizard.html
+++ b/_layouts/wizard.html
@@ -15,7 +15,7 @@
             in mind in order to accommodate different use-cases and threat models.
         </p>
 
-        <form id="wizard-container">
+        <form id="wizard-container" onsubmit="generatePolicy(event)">
             <section>
                 <h2>Time Based Rules</h2>
                 <p>
@@ -53,21 +53,21 @@
                 </p>
 
 
-                <label for="policy_valid_upto_date"><b>upto_date</b></label>
-                <input type="date" id="policy_valid_upto_date" name="policy_valid_upto_date">
+                <label for="policy_valid_upto_date"><b>upto_date</b> *</label>
+                <input required type="date" id="policy_valid_upto_date" name="policy_valid_upto_date">
 
                 <br>
                 <br>
 
-                <label for="policy_valid_after_date"><b>from_date</b></label>
-                <input type="date" id="policy_valid_after_date" name="policy_valid_after_date">
+                <label for="policy_valid_after_date"><b>from_date</b> *</label>
+                <input required type="date" id="policy_valid_after_date" name="policy_valid_after_date">
 
                 <br>
                 <br>
 
                 <label for="policy_mutable">Is the policy editable (mutable) while it's active?</label>
                 <br>
-                <select name="policy_mutable" id="policy_mutable">
+                <select required name="policy_mutable" id="policy_mutable">
                     <option disabled selected value> -- select an option -- </option>
                     <option value="true">Yes</option>
                     <option value="false">No</option>
@@ -78,11 +78,17 @@
 
             <section>
                 <h2>Remote Recovery via Cryptographic Signatures</h2>
+                <p>
+                    This type of recovery makes it possible to recover data remotely
+                    by providing cryptographic signatures to show intent of recovery.
+                    We support all widely used types of signatures such as `OpenPGP`,
+                    ETH, BTC, etc.
+                </p>
 
                 <label for="remote_available">Can recovery be authorized using threshold based cryptographic
-                    signing?</label>
+                    signing? *</label>
                 <br>
-                <select name="remote_available" id="remote_available">
+                <select required name="remote_available" id="remote_available">
                     <option disabled selected value> -- select an option -- </option>
                     <option value="true">Yes</option>
                     <option value="false">No</option>
@@ -99,7 +105,9 @@
                     <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>
+                    <p>Please select public keys which can be used for recovery. These keys should be valid public keys
+                        for whichever protocols you would like to use. You may use a mix of protocols. Ensure each file
+                        only has 1 key:</p>
                     <input type="file" id="pub_keys" name="files[]" multiple>
                 </div>
 
@@ -109,10 +117,17 @@
 
             <section>
                 <h2>Recovery via KYC Validation and Statement of Intent</h2>
+                <p>
+                    Recovery via KYC requires that a threshold of authorized
+                    persons be KYCd in person by legal representatives of Distrust
+                    and confirm their intent to recover data. This process varies
+                    based on the jurisdiction it's being conducted in and adds
+                    time to the recovery process.
+                </p>
 
-                <label>Can recovery be authorized by persons using KYC?</label>
+                <label>Can recovery be authorized by persons using KYC? *</label>
                 <br>
-                <select name="kyc_available" id="kyc_available">
+                <select required name="kyc_available" id="kyc_available">
                     <option disabled selected value> -- select an option -- </option>
                     <option value="true">Yes</option>
                     <option value="false">No</option>
@@ -126,7 +141,23 @@
                     <br>
                     <input type="text" id="kyc_threshold" name="kyc_threshold">
 
-                    <p>Please select KYC data for individuals who can participate in recovery:</p>
+                    <p>
+                        Please select KYC data for individuals who can participate in recovery.
+                        Each person's data should be a `.toml` file. Pictures of front and back
+                        of IDs should be base64 encoded and listed in the <b>id_images</b> array.
+                        The supported ID types are Driver's License, Passport, National Identity Card:
+                    </p>
+
+                    <pre>
+                        <code>
+                        first_name = "John"
+                        last_name = "Doe"
+                        date_of_birth = "1990-01-01"
+                        id_images = ["<base_64_encoded_image>", "<base_64_encoded_image>", ...]
+                        country_of_birth = "US"
+                        </code>
+                    </pre>
+
                     <input type="file" id="kyc_data" name="files[]" multiple>
                 </div>
             </section>
@@ -141,10 +172,10 @@
                     key in escrow, in which case you are responsible for redundantly backing up
                     the encrypted data (learn more <a href="/data-storage.html">here</a>)
                 </p>
-                <label>Type of data storage</label>
+                <label>Type of data storage *</label>
                 <br>
-                <select name="multi_rule_requirement" id="multi_rule_requirement">
-                    <option disabled selected value> -- select an option -- </option>
+                <select required name="data_stroage" id="data_storage">
+                    <option required disabled selected value> -- select an option -- </option>
                     <option value="managed">Fully managed</option>
                     <option value="key_escrow">Key escrow only</option>
                 </select>
@@ -155,25 +186,30 @@
             <section>
                 <h2>Additional Configurations</h2>
                 <label>Are both remote and KYC based recovery required? (If "No", either one can be used for
-                    recovery)</label>
+                    recovery) *</label>
                 <br>
-                <select name="multi_rule_requirement" id="multi_rule_requirement">
+                <select required name="multi_rule_requirement" id="multi_rule_requirement">
                     <option disabled selected value> -- select an option -- </option>
                     <option value="true">Yes</option>
                     <option value="false">No</option>
                 </select>
             </section>
 
+            <input type="submit" value="Generate Policy">
         </form>
-        <button onclick="generatePolicy()">Generate Policy</button>
 
 
-        <textarea id="policy" disabled placeholder="Click 'Generate Policy'"></textarea>
+        <form id="policy">
+            <textarea id="generated-policy-form" disabled placeholder="Click 'Generate Policy'"></textarea>
+        </form>
 
         <script>
             function resetFormFields() {
                 const form = document.getElementById('wizard-container');
                 form.reset();
+
+                const policy_field = document.getElementById('policy');
+                form.reset();
             }
 
             window.onload = resetFormFields;
@@ -183,58 +219,86 @@
 
                 const policy_valid_upto_date_el = document.getElementById('policy_valid_upto_date');
                 const policy_valid_upto_date = policy_valid_upto_date_el.value.replace(/-/g, "/");
-                policy.policy_valid_upto_date = policy_valid_upto_date;
-                console.log(policy_valid_upto_date);
+                if (policy_valid_upto_date) {
+                    policy.policy_valid_upto_date = policy_valid_upto_date;
+                    console.log(policy_valid_upto_date);
+                }
 
                 const policy_valid_after_date_el = document.getElementById('policy_valid_after_date');
                 const policy_valid_after_date = policy_valid_after_date_el.value.replace(/-/g, "/");
-                policy.policy_valid_after_date = policy_valid_after_date;
-                console.log(policy_valid_after_date);
+                if (policy_valid_after_date) {
+                    policy.policy_valid_after_date = policy_valid_after_date;
+                    console.log(policy_valid_after_date);
+                }
 
                 const policy_mutable_el = document.getElementById('policy_mutable');
                 const policy_mutable = policy_mutable_el.value;
-                policy.policy_mutable = policy_mutable;
-                console.log(policy_mutable);
+                if (policy_mutable) {
+                    policy.policy_mutable = policy_mutable;
+                    console.log(policy_mutable);
+                }
 
                 const remote_available_el = document.getElementById('remote_available');
                 const remote_available = remote_available_el.value;
-                policy.remote_available = remote_available;
-                console.log(remote_available);
+                if (remote_available) {
+                    policy.remote_available = remote_available;
+                    console.log(remote_available);
+                }
 
                 const remote_threshold_el = document.getElementById('remote_threshold');
                 const remote_threshold = remote_threshold_el.value;
-                policy.remote_threshold = remote_threshold;
-                console.log(remote_threshold);
+                if (remote_threshold) {
+                    policy.remote_threshold = remote_threshold;
+                    console.log(remote_threshold);
+                }
 
                 const pub_keys_el = document.getElementById('pub_keys');
                 const pub_keys = pub_keys_el.files;
-                policy.pub_keys = pub_keys;
-                console.log(pub_keys);
+                if (pub_keys) {
+                    policy.pub_keys = pub_keys;
+                    console.log(pub_keys);
+                }
 
                 const kyc_available_el = document.getElementById('kyc_available');
                 const kyc_available = kyc_available_el.value;
-                policy.kyc_available = kyc_available;
-                console.log(kyc_available);
+                if (kyc_available) {
+                    policy.kyc_available = kyc_available;
+                    console.log(kyc_available);
+                }
 
                 const kyc_threshold_el = document.getElementById('kyc_threshold');
                 const kyc_threshold = kyc_threshold_el.value;
-                policy.kyc_threshold = kyc_threshold;
-                console.log(kyc_threshold);
+                if (kyc_threshold) {
+                    policy.kyc_threshold = kyc_threshold;
+                    console.log(kyc_threshold);
+                }
 
                 const kyc_data_el = document.getElementById('kyc_data');
                 const kyc_data = kyc_data_el.files;
-                policy.kyc_data = kyc_data;
-                console.log(kyc_data);
+                if (kyc_data) {
+                    policy.kyc_data = kyc_data;
+                    console.log(kyc_data);
+                }
+
+                const data_storage_el = document.getElementById('data_storage');
+                const data_storage = data_storage_el.value;
+                if (data_storage) {
+                    policy.data_storage = data_storage;
+                    console.log(data_storage)
+                }
 
                 const multi_rule_requirement_el = document.getElementById('multi_rule_requirement');
                 const multi_rule_requirement = multi_rule_requirement_el.value;
-                policy.multi_rule_requirement = multi_rule_requirement;
-                console.log(multi_rule_requirement);
+                if (multi_rule_requirement) {
+                    policy.multi_rule_requirement = multi_rule_requirement;
+                    console.log(multi_rule_requirement);
+                }
 
                 return policy;
             }
 
-            function generatePolicy(values) {
+            function generatePolicy(event) {
+                event.preventDefault()
                 const policy_values = extractValues();
 
                 const toml_policy = objectToTOML(policy_values);
@@ -311,7 +375,7 @@
                 margin: 50px 0px;
             }
 
-            #policy {
+            #generated-policy-form {
                 height: 400px;
                 padding: 30px;
                 margin-top: 30px;