public
/
disaster-recovery-website
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: more weezard updates

This commit is contained in:
Anton Livaja 2024-10-08 11:01:31 -04:00
parent 5ce36df0ee
commit 082d7effaf
Signed by: anton
GPG Key ID: 44A86CFF1FDF0E85
3 changed files with 279 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_config.yml
View File

@ -29,6 +29,7 @@ header_pages:
- index.md
- about.md
- pricing.md
- wizard.md
- recovery_policy.md
- data_storage.md
- q&a.md

426
_layouts/wizard.html
View File

@ -1,190 +1,318 @@
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: en }}">
{%- include head.html -%}
<body>
<h1>Weezard</h1>
<label for="policy_valid_upto_date">Is the policy valid up to a date?</label>
<input type="date" id="policy_valid_upto_date" name="policy_valid_upto_date">
<div class="container">
<br>
<br>
{%- include header.html -%}
<label for="policy_valid_after_date">Is the policy valid from a date?</label>
<input type="date" id="policy_valid_after_date" name="policy_valid_after_date">
<h1>Recovery Policy Wizard</h1>
<p>
This wizard will assist you in constructing the set of rules, also
known as the Recovery Policy, which specifies under which conditions
your data can be recovered. The policy has been designed with flexibility
in mind in order to accommodate different use-cases and threat models.
</p>
<br>
<br>
<div id="wizard-container">
<section>
<h2>Time Based Rules</h2>
<p>
Time based rules allow specifying during which time period the policy is <b>active</b>.
In order to request data recovery, a policy has to be in an active state at the time the
request is made to recover data. If a policy is <b>mutable</b> (allowed to be updated),
it can also only happen while the policy is in an active state, and is done by creating
a new policy which will take place of the old one.
<label for="policy_mutable">Is the policy editable (mutable)?</label>
<br>
<select name="policy_mutable" id="policy_mutable">
<option disabled selected value> -- select an option -- </option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
The dates are always interpreted in UTC (Coordinated Universal Time), at 12:00AM of the
selected date.
<br>
<br>
The two dates which are configurable, <b>from_date</b> and <b>upto_date</b> allow for
the following configurations:
<label for="remote_available">Can recovery be authorized using threshold based cryptographic signing?</label>
<br>
<select name="remote_available" id="remote_available">
<option disabled selected value> -- select an option -- </option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
<ul>
<li>
<b>from_date < upto_date</b>: makes the policy active during a time window. (e.g from_date:
2024/08/01, upto_date: 2024/09/01 would make the policy active only between those dates)
</li>
<li>
<b>upto_date < from_date</b>: makes the policy in-active during a time window (e.g upto_date:
2024/08/01, from_date: 2024/09/01 would make the policy in-active only between those
dates)
</li>
<li>
<b>upto_date only</b>: makes the policy expire after the <b>upto_date</b> (e.g upto_date:
2027/01/01 means the policy is never active again after this date.)
</li>
<li>
<b>from_date only</b>: makes the policy active after the <b>from_date</b> (e.g from_date:
2025/01/01 means the policy is active only starting after that date)
</li>
</ul>
</p>
<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>
<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>Can recovery be authorized by persons using KYC?</label>
<br>
<select name="kyc_available" id="kyc_available">
<option disabled selected value> -- select an option -- </option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
<br>
<br>
<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">
<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">
<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 for="policy_mutable">Is the policy editable (mutable) while it's active?</label>
<br>
<select name="policy_mutable" id="policy_mutable">
<option disabled selected value> -- select an option -- </option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</section>
<label>Are both remote and KYC based recovery required? (If "No", either one can be used for recovery)</label>
<br>
<select 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>
<hr class="divider">
<button onclick="generatePolicy()">Generate Policy</button>
<section>
<h2>Remote Recovery via Cryptographic Signatures</h2>
<script>
function extractValues() {
const policy = {}
<label for="remote_available">Can recovery be authorized using threshold based cryptographic
signing?</label>
<br>
<select name="remote_available" id="remote_available">
<option disabled selected value> -- select an option -- </option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
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);
<br>
<br>
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);
<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>
const policy_mutable_el = document.getElementById('policy_mutable');
const policy_mutable = policy_mutable_el.value;
policy.policy_mutable = policy_mutable;
console.log(policy_mutable);
</section>
const remote_available_el = document.getElementById('remote_available');
const remote_available = remote_available_el.value;
policy.remote_available = remote_available;
console.log(remote_available);
<hr class="divider">
const remote_threshold_el = document.getElementById('remote_threshold');
const remote_threshold = remote_threshold_el.value;
policy.remote_threshold = remote_threshold;
console.log(remote_threshold);
<section>
<h2>Recovery via KYC Validation and Statement of Intent</h2>
const pub_keys_el = document.getElementById('pub_keys');
const pub_keys = pub_keys_el.files;
policy.pub_keys = pub_keys;
console.log(pub_keys);
<label>Can recovery be authorized by persons using KYC?</label>
<br>
<select name="kyc_available" id="kyc_available">
<option disabled selected value> -- select an option -- </option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
const kyc_available_el = document.getElementById('kyc_available');
const kyc_available = kyc_available_el.value;
policy.kyc_available = kyc_available;
console.log(kyc_available);
<br>
<br>
const kyc_threshold_el = document.getElementById('kyc_threshold');
const kyc_threshold = kyc_threshold_el.value;
policy.kyc_threshold = kyc_threshold;
console.log(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">
const kyc_data_el = document.getElementById('kyc_data');
const kyc_data = kyc_data_el.files;
policy.kyc_data = kyc_data;
console.log(kyc_data);
<p>Please select KYC data for individuals who can participate in recovery:</p>
<input type="file" id="kyc_data" name="files[]" multiple>
</div>
</section>
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);
<hr class="divider">
return policy;
}
<section>
<h2>Data Storage</h2>
<p>
This part of the policy allows you to select wether you would like
Distrust to fully back up all your data, or to only hold an encryption
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>
<br>
<select name="multi_rule_requirement" id="multi_rule_requirement">
<option disabled selected value> -- select an option -- </option>
<option value="managed">Fully managed</option>
<option value="key_escrow">Key escrow only</option>
</select>
</section>
function generatePolicy(values) {
const policy_values = extractValues();
<hr class="divider">
const toml_policy = objectToTOML(policy_values);
console.log(toml_policy);
}
<section>
<h2>Additional Configurations</h2>
<label>Are both remote and KYC based recovery required? (If "No", either one can be used for
recovery)</label>
<br>
<select 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>
function objectToTOML(obj, indent = '') {
let toml = '';
<button onclick="generatePolicy()">Generate Policy</button>
</div>
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
const value = obj[key];
<textarea id="policy" disabled placeholder="Click 'Generate Policy'"></textarea>
if (typeof value === 'object' && !Array.isArray(value)) {
toml += `${indent}[${key}]\n`;
toml += objectToTOML(value, `${indent} `);
} else if (Array.isArray(value)) {
toml += `${indent}${key} = [${value.map(v => JSON.stringify(v)).join(', ')}]\n`;
} else {
toml += `${indent}${key} = ${JSON.stringify(value)}\n`;
<script>
function extractValues() {
const policy = {}
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);
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);
const policy_mutable_el = document.getElementById('policy_mutable');
const policy_mutable = policy_mutable_el.value;
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);
const remote_threshold_el = document.getElementById('remote_threshold');
const remote_threshold = remote_threshold_el.value;
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);
const kyc_available_el = document.getElementById('kyc_available');
const kyc_available = kyc_available_el.value;
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);
const kyc_data_el = document.getElementById('kyc_data');
const kyc_data = kyc_data_el.files;
policy.kyc_data = kyc_data;
console.log(kyc_data);
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);
return policy;
}
function generatePolicy(values) {
const policy_values = extractValues();
const toml_policy = objectToTOML(policy_values);
console.log(toml_policy);
const policy_text_el = document.getElementById('policy');
policy_text_el.value = toml_policy;
}
function objectToTOML(obj, indent = '') {
let toml = '';
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
const value = obj[key];
if (typeof value === 'object' && !Array.isArray(value)) {
toml += `${indent}[${key}]\n`;
toml += objectToTOML(value, `${indent} `);
} else if (Array.isArray(value)) {
toml += `${indent}${key} = [${value.map(v => JSON.stringify(v)).join(', ')}]\n`;
} else {
toml += `${indent}${key} = ${JSON.stringify(value)}\n`;
}
}
}
return toml;
}
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 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;
}
});
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');
input,
select,
textarea,
textarea::-webkit-input-placeholder {
border: 1px solid white;
}
});
</script>
<style>
.hidden {
display: none;
}
</style>
</body>
#wizard-container {
border: 1px solid white;
border-radius: 20px;
padding: 30px;
}
.divider {
color: white;
margin: 50px 0px;
}
#policy {
height: 400px;
padding: 30px;
margin-top: 30px;
border-radius: 20px;
}
</style>
</main>
{%- include footer.html -%}
</div>
</body>
</html>

2
_sass/base.scss
View File

@ -15,7 +15,7 @@ $base-font-size: 1.125rem !default;
$mobile-font-size: 1.125rem !default;
$base-line-height: 1.5 !default;
$container-width: 90% !default;
$container-max-width: 1000px !default;
$container-max-width: 1300px !default;
/**
* Global